可视化网页设计工具-DW-网页设计

《可视化网页设计工具-DW-网页设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章可视化的网页制作工具----DreamweaverDreamweaver是美国著名的软件公司Macromedia推出的一个“所见即所得”的可视化网站开发工具。也是深受国内外专业Web开发人员喜欢的一款软件。本章重点介绍DreamweaverMX的工作界面、站点管理、组织排版、制作网页、网页发布等功能。5.1Dreamweaver的工作界面DreamweaverMX的工作界面中包括了标题栏、菜单栏、插入栏、工具栏、“属性”面板、功能面板组、状态栏和文档窗口。与Fireworks和Flash的工作界面基本一致。用户可根据需要把这

2、面板组合在一起或折叠起来，从而构造一个方便的工作环境。5.1Dreamweaver的工作界面1.标题栏2.菜单栏3.插入栏4.工具栏5.1Dreamweaver的工作界面5.1Dreamweaver的工作界面5.“属性”面板6.文档窗口7.面板组5.2Dreamweaver的站点管理5.2.1关于Web站点Web站点是一组具有共同属性（如共同的主题、类似的设计或共同的目的）并相互链接的网页文档的集合。使用Dreamweaver当然可以设计单张的网页，但由于网页一般都要通过超级链接互相进行关联，一些具有共同属性的网页，相互链接在一起

3、，就构成了一个Web站点。如一个小公司的Web站点，往往由公司首页、公司概况、产品介绍、联系方式等网页文档互相链接构成。5.2Dreamweaver的站点管理5.2.1关于Web站点站点也是网页文档的在本地磁盘的组织形式，它同样是由文档和文档所在的文件夹组成的。建立站点的第一步就是要在本地硬盘上进行规划，创建一个文件夹（例如在D:盘上建立一个mysite的文件夹）作为保存一个站点所有文档的文件夹，然后再分门别类地创建子文件夹来分别存放不同类别的文档。5.2Dreamweaver的站点管理5.2.1关于Web站点只有设置和规划好本地

4、站点的结构，以后网站的维护、更新才能轻松地进行。设置站点就是在本地磁盘上创建一个包含站点所有文件的文件夹（也被称为本地站点），然后在该文件夹中创建和编辑文档。一旦用户创建了站点结构，就必须在Dreamweaver中指定新的站点，当在Dreamweaver中建立了本地站点并设置好FTP后，就可以将站点上传到Web服务器上，并能够自动跟踪和维护链接、相互共享文件了。5.2Dreamweaver的站点管理5.2.2在Dreamweaver中创建一个站点5.2.3管理本地站点1.向站点中添加内容（1）添加文件夹（2）添加主页（3）添加普通

5、网页5.2Dreamweaver的站点管理5.2.3管理本地站点2.管理本地站点（1）打开站点（2）编辑站点（3）打开和删除网页文件5.2Dreamweaver的站点管理5.2.4上传和更新Web站点1.设置远程站点属性5.2Dreamweaver的站点管理5.2.4上传和更新Web站点1.设置远程站点属性5.2Dreamweaver的站点管理5.2.4上传和更新Web站点2.连接和上传文件到远程站点设置好远程站点的属性后，就可以连接到远程站点了。打开站点面板，切换到远程视图，通过站点工具栏，如图5.15所示，可以方便地完成连接、

6、上传、下载文件等工作。5.2Dreamweaver的站点管理5.2.4上传和更新Web站点2.连接和上传文件到远程站点5.3处理基本网页元素当本地站点创建完成，在站点中建立的一个个网页文件还是空文档。需要在网页中插入文字、图片以及其他的多媒体对象，如动画、影像、连接到其他文件的链接以及声音，才能成为真正的网页，这个过程就是网页设计。这一切操作主要在文档窗口完成，DreamweaverMX会自动在文件中加入相应的HTML和其他脚本程序代码。5.3处理基本网页元素5.3.1页面基本属性的设定设置页面基本属性是网页设计的第一步工作。网页

7、的基本属性包括页面标题、背景图像和颜色、文本和链接颜色，还包括在“文件头”选项卡中定义的信息等内容。这些信息对于用户了解了解网页的基本内容、搜索查找网页都起着非常重要的作用。5.3处理基本网页元素5.3.1页面基本属性的设定1.设置页面属性5.3处理基本网页元素5.3.1页面基本属性的设定1.设置页面属性5.3处理基本网页元素5.3.1页面基本属性的设定2.设置文档头部元素5.3处理基本网页元素5.3.2文本处理1.插入普通文本2.插入特殊字符3.插入日期4.插入水平线5.3处理基本网页元素5.定义文本格式在一般情况下，插入的文本

8、都是使用默认格式，网页中的文字显得呆板而不美观，因此，需要根据情况对网页中的文本的格式进行设定，这项工作相当于文字处理软件中的格式化文本的过程。文本的格式包括字符属性的设定和段落属性的设定等内容。(1）设置字符属性①设定字体示例……