使用Dreamweaver制作网页.doc

《网页设计与制作教程》·教案 - PAGE 13 - 使用Dreamweaver制作网页 4.1 Dreamweaver简介 主要功能与特色 Dreamweaver 是Macromedia公司推出的可视化的网页设计和站点工具，用户可以不用编写HTML代码就可以生成跨平台、跨浏览器的网页，它支持动态HTML和CSS样式，采用了Roundtrip HTML技术（可以同时进行可视化设计与源代码设计），页面设计过程中自动生成的源代码简练，通过对象的属性控制面板可以很方便地完成各种属性的设置。必威体育精装版版的Dreamweaver MX在站点管理和动态网页编辑方面的功能更加强大，是目前最为流行的网页设计工具。 用户界面 主窗口：包括菜单栏（实现几乎所有功能）、工具栏（常用操作）、工作区（网页编辑区）、状态栏（各种提示信息）。 浮动的控制面板：在网页设计过程中，随着选中的对象不同，属性面板的内容自动更新，通过它可以完成各种属性设置、建立链接、编辑代码等。 站点管理窗口： 用类似于资源管理器的方式对站点中的所有文件进行管理，如：重命名、移动（并自动更新所有链接）、复制、删除文件；新建/打开文件夹、文件；可以直接上传（put files）或下传(get files)文件等。 4.2 Dreamweaver中的基本操作 建立站点 站点是存储所有Web网站文件的地方。用Dreamweaver创建网站前，应该先在资源管理器中建立一个文件夹，以便今后保存所有站点文件。在Dreamweaver中创建网站时，需要给出站点名称（最好直接用网站的中文名字，该名称可以更改）和一个本地文件夹（就用资源管理器中刚建的那个）。建好站点后，再从站点管理窗口建立起各个栏目的子文件夹以及用于保存公共文件的分类文件夹，如放图片的images、放样式的CSS。 特别提示：在Dreamweaver中建立文件夹和文件时，应该采用英文字符/数字命名，不要用汉字，以免有时候上传之后不能正常显示。 建立网页 设置页面总体属性：从“修改”（Modify）菜单中选择“页面属性”（Page Properties），可以设置网页的标题、背景图片、背景颜色、超级链接各状态的颜色、页面边距等。 编辑文本： 和Word中的操作基本相同，先输入文字，然后通过属性面板设置字体、字号、颜色、对齐方式等效果。输入时注意： 关于空格：系统默认字符之间可以通过空格键输入1个字符的空隙，如果想加大空隙，需按组合键：Ctrl+Shift+空格，或从代码窗口输入专门的空格符nbsp;否则按空格键无效。 关于换行：输入文字时，若超过窗口显示宽度，系统可自动换行；需要分段时直接按Enter键即可，两段之间空一行。可以按Shift+Enter键实现不分段的手动换行。 关于字体：系统默认的中文字体是一般是宋体，字号为3，颜色为黑色。如果想换成其它字体，第一次进行此操作时需要添加所需要的汉字字体。一般正文字号用2显得比较秀气，太大不好看，标题文字可以设为3或4。文字颜色尽量与背景色对比鲜明。 插入图片 从“插入”（Insert）菜单里选择“图片”（Image），从对话框里找到所需要的图片并确定之。 注意：1）插入图片前应该先保存网页，否则系统提示用带File的本地路径； 2）如果所插图片不在站点文件夹中，系统会提示是否复制到站点文件夹，应该选择“是”，否则设计时可以看得到图片，等上传到网上后就找不到该资源了！故最好先把所需要的图片从资源管理器的其它文件夹中复制或移动到站点文件夹中。 3）插入进来的图片可以通过属性面板改变其尺寸（数字加粗则表示改变了）、对齐方式、提示文字、建立常规链接和热点图链接等。 插入轮替图片：从“插入”（Insert）菜单里选择“轮替图片”（Interactive Images），从对话框里找到所需要的图片1和图片2，并确定之。这样当鼠标移动到图片1上时就会出现图片2，并且可以出现提示文字。 插入其它对象 可以通过插入菜单插入其它各种网页元素，如：表格（Table）、图层（Layer）、框架（Frame）、表单（Form）、超级链接（Hyperlink）、锚（Named Anchor）（也叫书签）、多媒体控件（Media）、水平线（Horizontal Rule）、特殊字符（Special Characters）、导航条（Navigation Bar）、日期（Date）、脚本程序（Script Objects）等。 建立超链接 利用超级链接可以实现在文档之间或文档中的跳转。链接由源端点和目标端点及一个方向构成，链接的目标端点可以是任意的网络资源，如一个页面、一幅图画、一段音乐、一段程序，或者是页面中的某个位置。可以利用文字也可以通过图片等建立超级链接。 链接的