《可视化网页设计工具DW网页设计课件》由会员分享，可在线阅读，更多相关《可视化网页设计工具DW网页设计课件（90页珍藏版）》请在金锄头文库上搜索。
1、-Dreamweaver-DreamweaverrDreamweaver是美国著名的软件公司Macromedia推出的一个“所见即所得”的可视化网站开发工具。也是深受国内外专业Web开发人员喜欢的一款软件。本章重点介绍Dreamweaver MX的工作界面、站点管理、组织排版、制作网页、网页发布等功能。5.1 Dreamweaver5.1 Dreamweaver的工作界面的工作界面rDreamweaver MX的工作界面中包括了标题栏、菜单栏、插入栏、工具栏、“属性”面板、功能面板组、状态栏和文档窗口。与Fireworks和Flash的工作界面基本一致。用户可根据需要把这面板组合在一起或折叠起
2、来，从而构造一个方便的工作环境。5.1 Dreamweaver5.1 Dreamweaver的工作界面的工作界面r1.标题栏r2.菜单栏r3.插入栏r4.工具栏5.1 Dreamweaver5.1 Dreamweaver的工作界面的工作界面5.1 Dreamweaver5.1 Dreamweaver的工作界面的工作界面r5.“属性”面板r6.文档窗口r7.面板组5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.1 关于Web站点rWeb站点是一组具有共同属性（如共同的主题、类似的设计或共同的目的）并相互链接的网页文档的集合。使用Dreamweaver当然
3、可以设计单张的网页，但由于网页一般都要通过超级链接互相进行关联，一些具有共同属性的网页，相互链接在一起，就构成了一个Web站点。如一个小公司的Web站点，往往由公司首页、公司概况、产品介绍、联系方式等网页文档互相链接构成。5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.1 关于Web站点r站点也是网页文档的在本地磁盘的组织形式，它同样是由文档和文档所在的文件夹组成的。建立站点的第一步就是要在本地硬盘上进行规划，创建一个文件夹（例如在D:盘上建立一个mysite的文件夹）作为保存一个站点所有文档的文件夹，然后再分门别类地创建子文件夹来分别存放不同类别的文
4、档。5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.1 关于Web站点r只有设置和规划好本地站点的结构，以后网站的维护、更新才能轻松地进行。设置站点就是在本地磁盘上创建一个包含站点所有文件的文件夹（也被称为本地站点），然后在该文件夹中创建和编辑文档。一旦用户创建了站点结构，就必须在Dreamweaver中指定新的站点，当在Dreamweaver中建立了本地站点并设置好FTP后，就可以将站点上传到Web服务器上，并能够自动跟踪和维护链接、相互共享文件了。5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.2在Drea
5、mweaver中创建一个站点r5.2.3管理本地站点r1.向站点中添加内容v（1）添加文件夹v（2）添加主页v（3）添加普通网页5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.3管理本地站点v2.管理本地站点v（1）打开站点v（2）编辑站点v（3）打开和删除网页文件5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.4上传和更新Web站点v1.设置远程站点属性5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.4上传和更新Web站点v1.设置远程站点属性5.2 Dreamwea
6、ver5.2 Dreamweaver的站点管理的站点管理r5.2.4上传和更新Web站点v2.连接和上传文件到远程站点v设置好远程站点的属性后，就可以连接到远程站点了。打开站点面板，切换到远程视图，通过站点工具栏，如图5.15所示，可以方便地完成连接、上传、下载文件等工作。5.2 Dreamweaver5.2 Dreamweaver的站点管理的站点管理r5.2.4上传和更新Web站点v2.连接和上传文件到远程站点5.3 处理基本网页元素r当本地站点创建完成，在站点中建立的一个个网页文件还是空文档。需要在网页中插入文字、图片以及其他的多媒体对象，如动画、影像、连接到其他文件的链接以及声音，才能成
7、为真正的网页，这个过程就是网页设计。这一切操作主要在文档窗口完成，Dreamweaver MX会自动在文件中加入相应的HTML和其他脚本程序代码。5.3 处理基本网页元素r5.3.1页面基本属性的设定r设置页面基本属性是网页设计的第一步工作。网页的基本属性包括页面标题、背景图像和颜色、文本和链接颜色，还包括在“文件头”选项卡中定义的信息等内容。这些信息对于用户了解了解网页的基本内容、搜索查找网页都起着非常重要的作用。5.3 处理基本网页元素r5.3.1页面基本属性的设定r1.设置页面属性5.3 处理基本网页元素r5.3.1页面基本属性的设定r1.设置页面属性5.3 处理基本网页元素r5.3.1
8、页面基本属性的设定r2.设置文档头部元素5.3 处理基本网页元素r5.3.2文本处理v1.插入普通文本v2.插入特殊字符v3.插入日期v4.插入水平线5.3 处理基本网页元素r5.定义文本格式r在一般情况下，插入的文本都是使用默认格式，网页中的文字显得呆板而不美观，因此，需要根据情况对网页中的文本的格式进行设定，这项工作相当于文字处理软件中的格式化文本的过程。文本的格式包括字符属性的设定和段落属性的设定等内容。r(1）设置字符属性v设定字体 示例属性：size=“”;color=“”;face=“”Face属性给出了一个用逗号分隔的字体样式列表。v设置文本的大小Size的值是17级，默认是3级
9、，可以在当前级的基础上增大或减小。v设置文本的颜色v设置文本样式 示例文本样式是指文本的显示方式，如加粗、倾斜、下划线等 加粗斜体、下划线 删除线 下标 上标5.3 处理基本网页元素r5.定义文本格式r（2）设置段落属性v应用段落和标题格式v设置对齐方式v设置段落缩进5.3 处理基本网页元素r5.定义文本格式r（2）设置段落属性n使用文本列表n符号列表是各项目左边无编号，而是以特殊的符号表示。Today Tommorow 显示结果如下：Today Tommorow Today Tommorow 显示结果如下：Today Tommorow Today Tommorow 显示结果如下：Today
10、Tommorow 5.3 处理基本网页元素r5.定义文本格式r（2）设置段落属性v使用文本列表v标号列表就是各项目左边加上数字符号或其他有序的标号.Today Tommorow 显示结果如下：1.Today 2.Tommorow Today Tommorow 显示结果如下：a.Today b.Tommorow Today Tommorow 显示结果如下：5.Today 6.Tommorow 5.3 处理基本网页元素r5.3.3图像处理v1.插入图像v2.设置图像的属性5.3 处理基本网页元素r5.3.4超级链接v1.创建文档链接v2.创建命名锚记链接（1）创建命名锚记（2）创建命名锚记链接v3
11、.创建电子邮件链接v4.创建脚本链接javascript:window.history.back()javascript:window.scroll(0,0)5.3 处理基本网页元素r5.3.4超级链接v5.创建空链接空链接是指没有目标端点的链接，利用空链接，可以激活文档中链接对应的对象或文本，从而为对象或文本添加一个行为。创建空链接的操作步骤如下：（1）选择需要创建空链接的文字或图片。（2）在“属性”面板的“链接”后的文本框内输入一个“#”号。v6.创建图像地图链接图像地图指一个图像被分割为多个链接区域（或称热点），当用户单击某个链接区域时会打开链接目标。使用图像属性面板可以通过图形方式创建
12、或编辑图像地图链接。5.3 处理基本网页元素r5.3.5 表格v在网页设计中，人们经常感到许多网页元素，如文字、图像等的位置难以控制。而在网页设计中，最好也是最具有兼容性的方法就是使用表格。表格是Web站点中经常使用的一种简洁有序信息的方式。在网页中合理地使用表格，能够快速便捷地处理批量数据，使网页不论是在版式方面，还是在文本、图像方面，都能够呈现更好的视觉效果。5.3 处理基本网页元素r5.3.5 表格v在网页设计中，人们经常感到许多网页元素，如文字、图像等的位置难以控制。而在网页设计中，最好也是最具有兼容性的方法就是使用表格。表格是Web站点中经常使用的一种简洁有序信息的方式。在网页中合理
13、地使用表格，能够快速便捷地处理批量数据，使网页不论是在版式方面，还是在文本、图像方面，都能够呈现更好的视觉效果。5.3 处理基本网页元素r5.3.5 表格v（1）布局视图为了简化使用表格进行排版的过程，Dreamweaver MX提供了布局视图。在布局视图中，用户可以使用表格作为基础结构来设计网页，避免了使用传统的方法创建基于表格的页面布局经常出现的一些难题。在布局视图中，用户可以在页面上方便地绘制布局单元格，然后将这些单元格移动到所需的位置。v（2）表格和布局表格5.3 处理基本网页元素r5.3.5 表格v2.创建表格（1）创建普通表格（2）创建布局表格v3.编辑表格（1）选择表格5.3 处
14、理基本网页元素r5.3.5 表格v3.编辑表格（2）设置单元格属性（3）拆分与合并单元格（4）删除行或列5.3 处理基本网页元素r5.3.5 表格表格的高级应用1.制作一个圆角表格 在表格的参数里面增加了.2.制作一个无名表格 在参数里面增加了.和.3.制作一个立体表格 在表格参数中增加了bordercolorlight 属性 bordercolorlight 立体边框色4.制作一个细线表格5.制作一个正立方表格 在表格参数里面增加了 bordercolordark 和 bordercolorlight 属性5.3 处理基本网页元素r5.3.6 使用CSS样式1.Dreamweaver MX中
15、的“CSS样式”面板2.创建和链接外部CSS样式（1）创建CSS样式（2）链接外部CSS样式3.管理CSS样式表（1）应用CSS样式（2）管理CSS样式5.3 处理基本网页元素r5.3.7 插入其他多媒体对象r1.在网页中加入音频v（1）链接到音频文件v（2）在网页加入背景音乐v（3）在网页中嵌入音频文件r2.在网页中插入Flash动画5.3 处理基本网页元素r5.3.7 插入其他多媒体对象r3.在网页中插入视频文件v（1）在网页中插入普通视频文件v（2）在网页中嵌入视频文件v（3）在网页中嵌入Real视频文件5.4 Dreamweaver5.4 Dreamweaver高级应用高级应用v5.4
16、.1 表单v在制作动态网页的过程中，网站的设计者需要了解网络的访问者的一些情况，HTML提供了表单作为网站与访问者之间交流信息的主要工具。v表单工作的基本过程如下：v（1）访问者在浏览有表单的网页时，可填写必须的信息，然后按某个按钮提交信息。v（2）这些信息通过Internet传送到服务器上。v（3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。v（4）当数据完整无误后，服务器反馈一个输入完成的信息。v从这个工作过程可以看出，表单的开发可以分成两个部分：一是在网页上制作必须的表单项目，这一部分称为前端，主要在Dreamweaver或其他的网页制作软件中完成；另一部分是编制如何处理访问者填入的信息的程序，这一部分称为后端，主要是用网络解释或编译程序（如ASP、PHP、JSP等）制作。5.4 Dreamweaver5.4 Dreamweaver高级应用高级应用v5.4.1 表单1.创建表单对于访问者来说，大多在网上看到的是表单对象，如文本框、下拉菜单、单选框等。实际上，表单中还包括了一些访问者看不到的内容。一个表单基本包括以下几个部分：（1）表单标签：包含
