1、项目3 风光旅游网站制作,本项目内容提要：本项目结合“风光旅游网站”的规划设计与制作过程，讲述了中文Dreamweaver CS5表格、样式、链接，中文Fireworks CS5文字特效、图像处理、按钮导航、动画制作等相关知识。本项目能力目标：1 具备应用表格结构规划设计网站的基本能力。2 掌握中文Dreamweaver CS5表格技术、中文Fireworks CS5文字、图像、按钮、动画操作技术。本项目知识目标：1 掌握中文Dreamweaver CS5表格、样式、超链接等基本知识。2 掌握中文Fireworks CS5文字特效、图像、按钮、动画制作等相关知识。,3.1 风光旅游网站制作过程
2、,任务3-1 设计规划风光旅游网站,【子任务3-1-1】设计规划风光旅游网站本网站主要采用表格整体布局方案，一般主页内容较少时多采用此布局方式。网站的主题栏目是景区精品、辽阳简史、文化名片、住在辽阳、饮食特色、风景欣赏。网站主页规划的结构如下图3-1所示：设计网页尽寸。选择1024768规格,实际尺寸为：1000768。【子任务3-1-2】收集辽阳风光旅游网站所需要的素材收集的素材包括：辽阳风光图片、辽阳历史文化知识、辽宁饮食特色等。【子任务3-1-3】确定辽阳风光旅游网站色彩风格以绿色与蓝色相结合的色调为主。,任务3-1 设计规划风光旅游网站,图3-1 风光旅游网站规划布局图,任务3-2 创
3、建风光旅游网站站点,【子任务3-2-1】设置本地站点文件夹操作步骤如下：（1）在桌面双击“我的电脑”图标。（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）。（3）使用【文件】新建文件夹命令，在硬盘中建立一个新文件夹。（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入 “Tourism”，然后在空白处单击确定。如图3-2所示。,任务3-2 创建风光旅游网站站点,图3-2 建立站点文件夹Tourism,任务3-2 创建风光旅游网站站点,【子任务3-2-2】建立一个名称为“旅游”的站点操作步骤如下：（1）启动Dreamweaver CS5
4、（2）执行“站点”菜单中的“新建站点”命令，弹出“站点设置对象”对话框。（3）在菜单中选择“站点”选项， 在“站点名称”文本框中输入：“旅游”，在“本地站点文件夹”中输入E:Tourism（或单击浏览器按钮，选择“E:Tourism”）作为本地根文件夹。（4）单击【保存】按钮，完成“风光旅游”站点创建。,任务3-2 创建风光旅游网站站点,【子任务3-2-3】在“旅游”站点中建立站点子文件夹本网站将建立以下子文件夹即子文件夹jingqu（介绍主要景区）、子文件夹lishi（用于简述辽阳简史）、子文件夹wenhua（用于介绍辽阳文化品牌）、子文件夹binguan（用于介绍辽阳主要宾馆）、子文件夹y
5、inshi（用于介绍辽阳饮食文化）、子文件夹fengjing（用于存放风景图片）。另外再建一个图片文件夹Images，一个音乐文件夹Music。操作步骤如下：（1）在文件面板中选择“站点-旅游（E:Tourism）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。（2）单击untitled文件夹的名称部分，输入jingqu，将文件夹改名为jingqu，此文件夹用于介绍主要景区；（3）参照步骤（1）和（2），依次建立子文件夹lishi、子文件夹wenhua子文件夹、子文件夹binguan、子文件夹yinshi、子文件夹fengjing。另外再建一个公共图片文件夹images、音乐文件夹
6、music。最后结果如图3-3所示。,任务3-2 创建风光旅游网站站点,图3-3 建立站点子文件夹,任务3-2 创建风光旅游网站站点,【子任务3-2-4】在“旅游”站点中建立主页文件操作步骤如下：（1）在文件面板中选择“站点-旅游（E:Tourism）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件”选项。（2）单击untitled文件的名称部分，输入index，将文件名为index.html。如图3-3所示。,任务3-3 利用Dreamweaver表格进行网站主页布局,我们在使用表格布局时，通常把不同区域单独用不同的表格来布局，而且有时还要使用表格嵌套，这样可以提高网页的访问速度。【子任务
7、3-3-1】设置主页页面属性操作步骤如下：（1）在旅游站点中双击index.htm，打开主页文件应用程序窗口，输入标题为“辽阳天逸旅游网”。（2）执行“修改”“页面属性”菜单命令，打开“页面设置”对话框，“背景颜色”设置为浅黄色（#FFFFCC），“左边距”设置为“0”，“上边距”设置为“0”。（3）单击【确定】按钮。（4）按快捷键【Ctrl】+【S】保存网页。,任务3-3 利用Dreamweaver表格进行网站主页布局,【子任务3-3-2】用表格对旅游网主页进行布局操作步骤如下：（1）执行“插入”“表格”菜单命令，在“表格”对话中输入“行数”为4，“列数”为1，“表格宽度”为1000像素，“
8、单元格边距”为0，“单元格间距”为0，“边框粗细”为0。其余值默认。单击“确定”。（2）选中表格，在表格属性面板中设置“对齐”为“居中对齐”，这样可以保证在任何大于1024*768的分辨率下网页居中显示。根据前边两节制作的素材尺寸，设置单元格的高度。（3）设置表格各行高度，第1行为180；第2行为50；第3行为480；第5行为100。图3-4 应用表格布局的主页效果（4）设置嵌套表格。第3行插入一个表格，“行数”为1，“列数”为3，“高度”为480，第一列宽度为300，第二列宽度为400，第三列宽度为300。效果如图3-4所示。（5）按快捷键【Ctrl】+【S】保存网页。,任务3-3 利用Dr
9、eamweaver表格进行网站主页布局,图3-4 应用表格布局的主页效果,任务3-4 利用Fireworks制作站标图像,【子任务3-4-1】制作旅游网站标图像“辽阳欢迎您！”操作步骤如下：（1）新建一个Fireworks文档，在弹出的“新建文档”对话框中输入如下参数：宽为1000像素、高为600像素、分辨率为96像素/英寸、画布颜色为“白色”，单击【确定】按钮，完成新文档创建。（2）执行“文件”“导入”命令，弹出“导入”对话框，如图3-5所示，选择欲导入图像文件，单击【打开】按钮。（3）应用“裁剪”工具，裁去图像下边、上边部分内容，保留图像主体内容。（4）调整图像大小。例如，在属性面板中输入
10、宽:1000，高:180，x和y的值均为0。,任务3-4 利用Fireworks制作站标图像,图3-5 “导入”对话框,任务3-4 利用Fireworks制作站标图像,（5）在图像的中间位置，应用文本工具，输入“辽阳欢迎您！”，设置字体为“方正姚体”，设置“辽阳”大小为80，“欢迎您！”大小为60，颜色为橙色。（6）在图像的右下角位置，应用文本工具，分两行输入“天逸旅游”，设置字体为“黑体”，大小为36，颜色为红色。（7）执行“修改”“画布”“修剪画布”命令。图像效果如图3-6所示。（8）执行“文件”“图像预览”命令，如图3-7所示。选择文件格式为jpeg,品质为100，执行“导出”命令，选择
11、保存位置为：站点文件夹E:/Tourism中的images子文件夹，命名为zb01.,任务3-4 利用Fireworks制作站标图像,图3-6 站标图像效果,任务3-4 利用Fireworks制作站标图像,图3-7 “图像预览”对话框,任务3-4 利用Fireworks制作站标图像,图3-8 “导出”对话框,任务3-4 利用Fireworks制作站标图像,【子任务3-4-2】制作风光旅游网站站标图像“千年古都新韵 健康运动天堂”用与【子任务3-4-1】类似的步骤制作站标图像“千年古都新韵 健康运动天堂”。在制作“千年古都新韵 健康运动天堂”文字时，可给文字设置红色阴影效果，并设置字体为舒同体，
12、大小为60，颜色为橙色，倾斜。设置属性如图3-9所示。效果如图3-10所示。,任务3-4 利用Fireworks制作站标图像,图3-9 “千年古都新韵 健康运动天堂”设置属性,图3-10 站标图像“千年古都新韵 健康运动天堂”效果,任务3-4 利用Fireworks制作站标图像,【子任务3-4-3】制作风光旅游网站标图像“天上人间 逸彩飞扬”用与【子任务3-4-1】类似的步骤制作站标图像“天上人间 逸彩飞扬”。效果如图3-11所示：,图3-11 站标图像“天上人间 逸彩飞扬”效果图,任务3-5 利用Fireworks制作站标动画,【子任务3-5-1】制作风光旅游网站站标动画操作步骤如下：（1）
13、新建一个Fireworks文档，在弹出的“新建文档”对话框中输入如下参数：宽为1000像素、高为180像素、分辨率为96像素/英寸、画布颜色为“透明”，单击【确定】按钮，完成新文档创建。（2）执行“文件”“导入”命令，弹出“导入”对话框，选择欲导入的图像文件，如zb01.jpg，单击【打开】按钮。在属性面板中输入：宽为1000，高为180，x和y的值均为0。（3）执行“窗口”“状态”命令，打开“状态”面板。如图3-12所示。,图3-12 “状态”面板,任务3-5 利用Fireworks制作站标动画,（4）单击“状态”面板右下方的【新建/重制状态】按钮，增加状态。（5）执行步骤（2），在第2帧中
14、导入图像zb02.jpg。（6）依次重复执行步骤（4）、（5）导入图像zb03.jpg。（7）按下【Ctrl的同时单击各状态，同时选择中各状态，双击“状态延时”的数值，例如500，修改为一个合适的速度。（8）按下【播放】按钮可预览动画效果。（9）执行“文件”“图像预览”菜单命令，弹出“图像预览”对话框，选择格式为GIF动画，如图3-13所示。单击【导出】按钮，弹出“导出”对话框，给出文件名zbdh.gif。再单击【保存】按钮，完成动态交换图像动画制作。,任务3-5 利用Fireworks制作站标动画,图4-13 通过图像预览导出GIF动画,任务3-5 利用Fireworks制作站标动画,【子任
15、务3-5-2】在风光旅游网主页中添加站标动画操作步骤如下：（1） 在风光旅游网主页的编辑状态下，单击表格的第一行。（2） 执行“插入”“图像”命令，在“选择图像文件源”对话框中选择images文件夹中的zbdh.gif，单击【确定】按钮，如图3-14所示。将动画插入到表格第一行中，效果如图3-15所示。,任务3-5 利用Fireworks制作站标动画,图3-14 通过“选择图像源文件”对话框插入动画文件,任务3-5 利用Fireworks制作站标动画,图3-15 将站标动画插入到表格第1行中,任务3-6 利用Fireworks制作按钮导航,导航栏是一组按钮，当网页的其他部分发生变化时，导航栏的
16、内容基本不发生变化。制作导航栏的一种简单的方法是采用复制按钮的办法，复制结束后再修改按钮上的文字内容和相应的链接。【子任务3-6-1】使用按钮制作导航操作步骤如下：（1）新建一个Fireworks文档。执行“文件”“新建”命令，在“新建文档”对话框中确定画布的宽度为1000、高100、颜色为白色，然后单击【确定】按钮。（2）执行“编辑”“插入”“新建按钮”命令，此时“状态”面板和“对齐”面板均为打开状态，用以帮助按钮准确定位。选用“圆角矩形”矢量工具创建一个按钮符号，按钮颜色为蓝色，宽为142.8，高为50，文字内容为“首页”（中间空两字），颜色为白色，字体为华文中宋，按钮链接为index.h
17、tml。如图3-16所示。,任务3-6 利用Fireworks制作按钮导航,图3-16 按钮制作,任务3-6 利用Fireworks制作按钮导航,（3）创建按钮对鼠标动作响应的不同状态，如鼠标滑过时字体颜色有改变，或鼠标按下时按钮颜色发生变化等。可按下【Shift】同时单击按钮及文本，再按下快捷键+【C】,分别选择“滑过”选项卡和“按下”选项卡，按下快捷键【Ctrl】+【V】进行粘贴，来更改按钮颜色或字体颜色。（4）执行“窗口”“文档库”命令，打开“文档库”面板，如图3-17所示。,图3-17 “文档库”面板,任务3-6 利用Fireworks制作按钮导航,（5）界面切换到页面状态，将【首页】
18、按钮从“文档库”面板拖到画布中，重复6次，使画布中有7个按钮，并将它们横向排列好。 （6）选中第2个按钮，在“属性”面板中修改文本内容为：“精品景区”，链接地址修改为jingqu/jpjq.html，依次修改其它按钮文本及链接地址为：文本：辽阳简史，链接：lishi/lyjs.html；文本：文化名片，链接：wenhua/whmp.html；文本：住在辽阳，链接：bingguan/zzly.htm；文本：饮食特色，链接：yinshi/ysts.html; 文本：风景欣赏，链接：fengjing/fjxs.html。 效果如图3-18所示。,任务3-6 利用Fireworks制作按钮导航,图3-
19、18 修剪后的导航条文本与链接设置,任务3-6 利用Fireworks制作按钮导航,（7）执行“修改”“画布”“修剪画布”命令。可修剪掉画布多余部分。效果如图3-18所示。（8）执行“文件”“导出”命令，弹出“导出”对话框，选择导出位置 e:Tourismimagesdh，导出文件名为dhcd.html，导出类型为“HTML和图像”，如图3-19所示。（9）单击“导出”对话框右下角的【选项】按钮，弹出如图3-20所示的“HTML设置”对话框。可以修改导出参数，这里将扩展名设置为html，其余采用默认设置。注意：为方便以后修改,可保存文件为dhcd.fng。,任务3-6 利用Fireworks制
20、作按钮导航,图3-19 导出dhcd.html文件,任务3-6 利用Fireworks制作按钮导航,图3-20 “HTML设置”对话框,任务3-6 利用Fireworks制作按钮导航,【子任务3-6-2】将导航栏插入到主页导航区操作步骤如下：（1）在风光旅游网站主页的编辑状态下，单击表格的第2行。（2）执行“插入”“图像对象”“Fireworks HTML”命令，弹出“插入Fireworks HTML”对话框，如图3-21所示。,（3）单击【浏览】按钮，在弹出的“选择Fireworks HTML文件”对话框中，选择要插入文件dhcd.html。如图3-22所示。(4) 单出【打开】按钮，插入导
21、航栏的效果如图3-23所示。,图3-21 “插入Fireworks HTML”对话框,任务3-6 利用Fireworks制作按钮导航,图3-22 “选择Fireworks HTML文件”对话框,任务3-6 利用Fireworks制作按钮导航,图3-23 插入导航栏的效果,任务3-7 编辑制作主体区,【子任务3-7-1】制作主体区文本辽阳旅游简介操作步骤如下：（1）将光标定位到表格第3行第2列。（2）插入一个2行1列的表格，表格宽度为100，单位为百分比。（3）在第1行中输入文本“辽阳旅游简介”。（4）在下一行输入介绍简介的具体内容。（5）建立样式规则1：在CSS 属性面板中单击【编辑规则】按钮
22、，在“新建CSS 规则”对话框中，输入选择器名称为：.zw1,单击【确定】按钮，弹出“.zw1的CSS规则定义”对话框,定义规则如下：字体为宋体，大小为14px,行距为18px，颜色为黑色，其它默认。单击【确定】按钮，样式规则定义结束。样式规则定义如图3-24所示。,任务3-7 编辑制作主体区,图3-24 .zw1的CSS规则定义对话框,任务3-7 编辑制作主体区,（6）建立样式规则2：在CSS 属性面板中单击【编辑规则】按钮，在“新建CSS 规则”对话框中输入选择器名称为：.bt1，单击【确定】按钮，弹出“.bt1的CSS规则定义”对话框。定义类型规则如下：字体为黑体，大小为18px,颜色为
23、黑色；定义区块规则如下：文本为居中对齐，其它默认。单击【确定】按钮，样式规则定义结束。样式规则定义如图3-25、3-26所示。,任务3-7 编辑制作主体区,图3-25 “ .bt1的CSS类型规则定义”对话框（类型）,任务3-7 编辑制作主体区,图3-26 “ .bt1的CSS区块规则定义”对话框（区块）,任务3-7 编辑制作主体区,（7）应用CSS规则设置文本标题，选择标题文本“辽阳旅游简介”，在“CSS样式”面板（如图3-27所示）中右键单击样式规则“.bt1”，在弹出的快捷菜单中选择“套用”命令。,（8）应用CSS规则设置文本正文，选择正文文本，在“CSS样式”面板中右键单击样式规则“.
24、zw1”，在弹出的快捷菜单中选择“套用”命令。（9）按快捷键【Ctrl】+【S】保存网页。,图3-27 “CSS样式”面板,任务3-7 编辑制作主体区,【子任务3-7-2】制作主体区图像辽阳白塔操作步骤如下：（1）将光标定位到表格第3行第1列。（2）执行“插入”“图像”命令，弹出“选择图像源文件”对话框，选择E:Tourismimagesbt.jpg，如图3-28所示。（3）单击【确定】按钮，弹出“图像标签辅助功能属性”对话框，输入“替换文本”为“辽阳白塔”，如图3-29所示。（4）单击【确定】按钮，调整图像大小。（5）按快捷键【Ctrl】+【S】保存网页。,任务3-7 编辑制作主体区,图3-
25、28 选择图像文件bt.jpg,任务3-7 编辑制作主体区,图3-29 “图像标签辅助功能属性”对话框,任务3-7 编辑制作主体区,【子任务3-7-3】制作主体区图像热门景点操作步骤如下：（1）将光标定位到表格第3行第3列。（2）设置单元格属性“垂直”为“顶端”，水平为“左对齐”，如图3-30所示。,（3）执行“插入”“表格”命令，插入嵌套表格。输入“行数”为9，“列”为1，“表格宽度”为100百分比。表格参数设置如图3-31所示。,图 3-30 设置单元格属性,任务3-7 编辑制作主体区,图3-31 设置第3行第3列中的嵌套表格参数,任务3-7 编辑制作主体区,（4）分别设置第1行行高为25
26、；第3行、第5行、第7行、第9行行高为25；第2行、第4行、第6行、第8行，行高为135。（5）在第1行中输入“热门景点”，在第3行中输入“汤河湖风景区”，在第5行中输入 “核伙沟森林公园”，在第7行中输入“弓长岭温泉滑雪场”，在第9行中输入“广佑寺景区”。应用CSS设置字体为宋体，大小为16，加粗。（6）在第2行插入汤河湖风景区图像thh1.gif，在第4行插入核伙沟森林公园图像hhg1.gif，在第6行插入弓长岭温泉滑雪场图像gclwqhxc1.gif，在第8行插入广佑寺景区图像gys1.gif。（7）按快捷键【Ctrl】+【S】保存网页。主体区制作完成后的编辑效果如图3-32所示。,任务
27、3-7 编辑制作主体区,图3-32 主体区制作完成后的编辑效果,任务3-8 编辑制作版权区,【子任务3-8-1】制作版权区与主体区水平线操作步骤如下：（1）将光标定位在主表格第4行顶端。（2）执行“插入” “HTML” “水平线”命令，水平线即插入到版权区上端。,任务3-8 编辑制作版权区,【子任务8-2】输入版权区内容操作步骤如下：（1）将光标定位到水平线下一行。（2）输入版权信息内容：（3）设置CSS规则.jz，规则内容为：字体：宋体，大小：14px，行距：18px，文本对齐方式：居中对齐。（4）选中版权信息文本，套用CSS规则.jz。（5）按快捷键【Ctrl】+【S】保存网页。制作完成后
28、的版区效果如图3-33所示。,图3-33 版权区效果,最后可通过页面属性设置背景色或背景图像。到此为止，风光旅游网站主页就制作好了。如图3-34所示。,任务3-8 编辑制作版权区,图3-34 风光旅游网站主页,任务3-9 制作子页并链接测试,各子网页的制作方法与主页类似，这里以“辽阳简史”子页为例说明制作过程，重点说明表格的应用。【子任务3-9-1】建立“辽阳简史”子网页文件在“文件”面板中，右键单击lishi子文件夹，执行“新建文件”命令，将文件命名为lyjs.html。【子任务3-9-2】布局“辽阳简史”子网页操作步骤如下：（1）在“文件”面板中双击“lyjs.html”，进入文件lyjs
29、.html的编辑状态。（2）执行“插入”“表格”命令，在“表格”对话中输入“行数”为3，“列”为1，“表格宽度”为1000像素，“单元格边距”为0，“单元格间距”为0，“边框粗细”为0。其余值默认。单击【确定】。（3）选中表格，在表格属性面板中设置“对齐”为“居中对齐”。（4）设置表格各行高度，第1行为160，第2行为360，第3行为60。表格效果如图3-35所示。,任务3-9 制作子页并链接测试,图3-35 子网页lyjs.html表格布局,任务3-9 制作子页并链接测试,【子任务3-9-3】制作标题区操作步骤如下：（1）在子网页lyjs.html编辑状态下，单击表格的第1行。（2） 执行“
30、插入”“图像”命令，在“选择图像文件源”对话框中选择images文件夹中的zbdh.gif，单击【确定】按钮，与主页相同的图像插入到了标题区。,任务3-9 制作子页并链接测试,【子任务3-9-4】制作主体区操作步骤如下：（1）在表格第2行中插入一个2行3列的内嵌表格，表格宽度100%。设置内嵌表格参数：第1行高为40，第2行高为320，第1列宽250，第2列宽500，第3列宽250。（2）将内嵌表格第1行各列合并，然后输入“辽阳简史”，并设背景色为“#66FFCC”。（3）在内嵌表格的第2行第1列中插入图像bt1.jpg(白塔) 。（4）在内嵌表格的第2行第2列中输入“辽阳史话”具体内容。（5
31、）在内嵌表格的第2行第3列中插入图像lysq.jpg。主体区制作完成后效果如图3-36所示。,任务3-9 制作子页并链接测试,任务3-9 制作子页并链接测试,【子任务3-9-5】制作版权区版权区内容与主页相同。操作步骤如下：（1）将光标定位在主表格第3行顶端。（2）执行“插入” “图像”命令，选择一个图像文件，插入一条水平线。（3）将主页版权区内容复制过来。子网页lyjs.html制作完成后的运行效果如图3-37所示。其它子网页制作不再详述。,任务3-9 制作子页并链接测试,图3-37 子网页lyjs.html制作完成后的运行效果图,任务3-9 制作子页并链接测试,【子任务3-9-6】链接测试
32、各子网页操作步骤如下 ：（1）运行主页文件。（2）分别单击各链接点，依次测试各子网页的链接情况，如发现异常，可修改后再进行测试。,3.2 风光旅游网站制作相关知识,知识点3-1 Dreamweaver中CSS样式及应用,1. CSS 样式简介样式就是一组在单个文档中控制某范围内文本外观的格式属性。CSS(Cascading Style Sheets),译为“层叠样式表”或“级联样式表”，它能让网页制作者有效地定制、改善网页。使用CSS样式可以用于控制许多文档，可以解决许多网页格式化问题。例如：您可以通过CSS样式对所管理的整个网站全部或部分页面迅速而准确地作出格式修改；您可以使用CSS样式自定
33、义列表项目符号（例如采用图像作为列表符号，而不是单调的圆点或圆圈）；使用CSS样式给一段文字加上背景颜色或背景图像；去掉超级链接的下划线；指定不同的字体大小和单位（像素、点等），使用CSS样式并将字体大小设置为以像素为单位。按CSS样式应用形式来分，CSS样式一般分为两类：嵌入式和外部链接式。嵌入式就是在独立的文档中应用CSS样式；外部链接式，可应用于多个文档，生成专门的*.css文件。使用CSS样式的方法是：首先将一些格式定义为样式，然后再为需要设置格式的内容应用样式。使用样式表的基本原则是格式与内容分离，先定义后使用。 在Dreamweaver中样式的操作有两种，一种是为文字设置样式时，D
34、reamweaver自动创建样式，并给样式取一个字称如STYLE1。另一种方式是在“CSS样式面板”中设置样式。,知识点3-1 Dreamweaver中CSS样式及应用,2. CSS样式的基本操作（1）创建CSS样式创建一种新样式的操作步骤如下： 执行“窗口”“CSS样式”菜单命令，或单击CSS属性面板中的“CSS面板”按钮，如图3-38所示。打开“CSS面板”，如图3-39所示。,图3-38 CSS属性面板,图3-39 “CSS样式”面板,知识点3-1 Dreamweaver中CSS样式及应用, 执行“CSS样式”面板右上角的弹出菜单中的“新建”命令，如图3-40所示。或单击“CSS样式”面
35、板右下角的【新建CSS规则】按钮。,图 3-40 “CSS样式”面板的弹出菜单,知识点3-1 Dreamweaver中CSS样式及应用, 在弹出的“新建CSS规则”对话框中（图3-41），可以选择四种样式类型：第1种，类：生成一个新样式，该样式可被应用于文档中任何文本。自定义样式以英文句点开头，如果没有输入句点，则Dreamweaver会自动添加。第2种，ID：生成的样式只应用于指定的HTML元素。第3种，标签：重新定义HTML元素，即将现有的标签赋上样式。制作完成后不需要选中对象就直接应用到网页中。第4种，复合内容：样式的定义基于选择的内容。另外，“选择定义规则的位置”有2个选项：第1种，（
36、仅限该文档）：只在当前文档中应用，即为嵌入式样式。第2种，（新建样式表文件）：生成专门的*.css文件，此样式可应用于多个文档，即为外部链接式样式。这里选择“类”“仅限该文档”。,知识点3-1 Dreamweaver中CSS样式及应用,图3-41 “新建CSS规则”对话框,知识点3-1 Dreamweaver中CSS样式及应用, 在“选择器名称”文本框中输入自定义的样式名称，例如：.zwys1。 单击【确定】按钮，打开“.zwys1的CSS规则定义”对话框，如图3-42所示。 在“CSS规则定义”对话框中默认分类为“类型”，可以定义字体、大小、颜色等属性。 单击【确定】按钮，一个CSS样式就建
37、立好了，新的CSS样式就出现在“CSS样式”面板中，如图3-43所示。,知识点3-1 Dreamweaver中CSS样式及应用,图3-42 “CSS规则定义”对话框,知识点3-1 Dreamweaver中CSS样式及应用,（2）使用CSS规则在当前网页中使用CSS规则操作步骤如下： 打开“CSS样式”面板（图3-43）。 用鼠标选中要应用CSS样式的对象,可以是文本、图像、表格等。 在“CSS样式”面板中右键单击要应用的CSS样式规则名称，如.zwys1。 在弹出的快捷菜单中执行“套用”命令,如图3-40所示。,知识点3-1 Dreamweaver中CSS样式及应用,图3-43 已定义了样式.
38、zwys1的“CSS样式”面板,知识点3-1 Dreamweaver中CSS样式及应用,（3）编辑CSS样式操作步骤如下： 打开“CSS样式”面板。 在“CSS样式”面板中双击要编辑的样式规则的名称，或选中要编辑的样式规则名称，再单击【编辑样式】按钮，重新弹出CSS规则定义对话框。 在对话框中对规则进行修改。 单击【确定】按钮，此时文档中应用了此样式的对象均发生相应的变化。,知识点3-1 Dreamweaver中CSS样式及应用,（4）删除CSS样式操作步骤如下： 打开“CSS样式”面板。 在“CSS样式”面板中，右键单击要删除的样式规则名称，在弹出的快捷菜单中执行“删除”命令。或单击【删除C
39、SS规则】按钮注意：在删除了样式规则之后，原来应用了该样式规则的内容将恢复应用样式规则之前的状态。,知识点3-1 Dreamweaver中CSS样式及应用,（5）设置CSS样式规则属性CSS规则定义对话框中有8个选项卡，分别是：类型、背景、区块、方框、边框、列表、定位、扩展。它们的功能分别是： 类型：定义样式规则的基本文字设置，包括：字体、字号、粗细、样式、变形、行高、大小写、修饰、颜色等。如图3-42所示。 背景：定义网页对象的背景，包括：背景颜色、背景图像、重复方式、附加方式、水平位置、垂直位置等。如图3-44所示。,图3-44 “背景”选项,知识点3-1 Dreamweaver中CSS样
40、式及应用, 区块：定义文本对象的基本样式规则，包括：单词距离、字母距离、垂直对齐、文本对齐、文字缩进、空白间距等。如图3-45所示。 方框：控制页面元素的对象布局，包括：宽、高、上边距、左边距等。如图3-46所示。,图3-45 “区块”选项,图3-46 “方框”选项,知识点3-1 Dreamweaver中CSS样式及应用, 边框：定义对象边框的相关属性，包括边框的样式、粗细、颜色等。如图3-47所示。 列表：定义项目符号、项目编号等列表属性，包括：类型、项目图像、位置等。如图3-48所示。,图3-47 “边框”选项,图3-48 “列表”选项,知识点3-1 Dreamweaver中CSS样式及应
41、用, 定位：定义层在网页中的位置。包括：类型、显示、Z轴、溢出、定位、剪辑等。如图3-49所示。 扩展：定义其他对象的扩展规则，包括：分页、视觉效果等。如图3-50所示。,图3-49 “定位”选项,图3-50 “扩展”选项,知识点3-1 Dreamweaver中CSS样式及应用,3. CSS样式应用实例【实例3-1】制作9磅字目前，中文大型网站上多数使用宋体9磅（9points）字作为一般文本的字体。因为使用HTML中的2号字有些毛边，而使用9磅字可以避免此弊端。制作9磅字的步骤如下：（1）新建网页文件3-1.html,并输入文本内容，如唐诗等。（2）执行“窗口”“CSS样式”命令，打开“CS
42、S样式”面板。（3）单击【新建CSS规则】按钮，在“新建CSS规则”对话框中设置“选择器类型”为“类”，“选择器名称”为：.font9p(可依据自己理解取名),规则定义为“（仅限该文档），也可以选择“（新建样式表文件）”。如图3-51所示。,知识点3-1 Dreamweaver中CSS样式及应用,图 3-51 建立.font9p的CSS规则,知识点3-1 Dreamweaver中CSS样式及应用,（4）单击【确定】按钮，在弹出的“.font9p的CSS规则定义”对话框中设置字体为宋体，大小为9pt,行高为150%。如图3-52所示。,图3-52 “.font9p的CSS规则定义”对话框,知识点
43、3-1 Dreamweaver中CSS样式及应用,（5）单击【确定】按钮，9磅字CSS样式规则就建好了。（6）选中要应用9磅字的文本，并在“CSS样式”面板上选择刚才建立的样式规则.pont9p，单击鼠标右键，在弹出快捷菜单中选择“套用”，则唐诗中的正文应用9磅字的效果如图3-53所示。（7）按快捷键【Ctrl】+【S】保存网页。,图3-53 应用CSS样式规则9磅字效果,知识点3-2 Dreamweaver中超级链接的进一步应用,1. 链接到本页面的其它地方有些时侯一个页面的内容太多，可能需要从页面的一个位置跳转到另一个位置，那么需要使用锚记，锚记就是在网页中需要跳转到的地方做一个标记，再通
44、过超链接链接到此锚记的位置。【实例3-2】在较长的页面中使用锚记进行超链接。操作步骤如下：（1） 建立一个空白页，保存文件名为3-2.html,输入辽阳简史内容。（2） 在需要插入锚记的地方（如“太子丹”）单击鼠标左键，然后执行“插入”“命名锚记”命令，弹出“命名锚记“对话框。（3）在“锚记名称”文本框中输入“test”作为锚记名称，如图3-54所示。,图3-54 “命名锚记”对话框,知识点3-2 Dreamweaver中超级链接的进一步应用,（4）选择文本“太子河”，然后在“属性”面板中的“链接”中输入“#test”。（5）按【F12】键查看链接效果，如图3-55所示。,图3-55 建立超链
45、接效果图,知识点3-2 Dreamweaver中超级链接的进一步应用,2. 创建电子邮件链接在图3-37所示的网页中，版权区有一个电子邮件，一般要求单击这行文字就可以发送电子邮件，而电子邮件的链接制作方法与一般超链接的方法类似，区别在于要使用“mailto”，创建电子邮件链接的操作步骤如下：(1) 选中电子邮件文本““。(2) 在“属性”面板的“链接”中输入mailto:即可。(3) 按F12键查看效果。注意：在冒号和电子邮件地址之间不能输入任何空格,知识点3-3 Dreamweaver表格与网页布局,表格除了显示数据外，在网页中通常用它来布局版面，本项目中的风光旅游网站就是使用表格来达到布局
46、的效果。利用表格对网页进行布局主要有如下几点好处： 让网页整体显示清晰，有层次。 便于对网页布局进行修改。 方便管理网页内容。对网页布局，重要的是如何对网页内容进行分割，有效的分割网页内容是使用表格布局的基础，它可以影响到网页内容的修改及今后布局的变化。一般情况下，网页基本上分为上、中、下、左、右，可以使用3行2列的表格进行一个大致的布局。然后在每一行针对其内容再嵌入相应表格进行内容的输入。具体操作步骤如下：(1) 新建一个HTML网页，单击“常用”工具栏上的【表格】按钮，打开“表格”对话框，设置“行数”为3，列为“3”，表格宽度为“600”像素，边框粗细为“0”像素，单元格边距为“0”，单元
47、格间距为“0”。如图3-63所示。,知识点3-3 Dreamweaver表格与网页布局,图3-63 使用“表格“对话框创建32表格,知识点3-3 Dreamweaver表格与网页布局,(2) 按下鼠标左键拖动表格中间的边框，调整表格两列为合适的大小。并选中最后一行，单击鼠标右键，在弹出的快捷菜单中执行“表格”“合并单元格”命令。最后选中表格，在“属性”面板中设置对齐为“居中对齐”。设置后如图3-57所示。,图3-57 对表格单元格进行设置,知识点3-3 Dreamweaver表格与网页布局,(3) 在第1行第1列使用“鼠标经过图像”插入地球仪图像。(4) 在第1行第2列输入“中国地图信息”并设
48、置文字属性，字体为华文琥珀，大小为24,并在“属性”面板中设置单元格属性，水平属性设置为“居中对齐”，垂直属性设置为“居中”。如图3-58所示。,图3-58 使用表格进行布居设置第1行,知识点3-3 Dreamweaver表格与网页布局,(5) 选中第2行第1列，设置单元格属性水平为“居中对齐”，垂直为“顶端”。在第2行第1列中插入13行1列的嵌套表格，设置表格宽度为100%，所有单元格的水平属性设置为“居中对齐”，然后输入导航文字。如图3-59所示。(6) 在第3行中插入3行1列的嵌套表格，设置表格的宽度为100%，所有单元格的水平属性设置为“居中对齐”，并输入文字。如图3-59所示。(7)
49、 在主表格的第2行第2列中插入图像，即可达到布局效果。,知识点3-3 Dreamweaver表格与网页布局,图3-59 使用表格进行布局,知识点3-4 Fireworks文字特效,1. “样式”面板的使用在Fireworks中通过创建样式，可以保存并重新应用一组预定义的填充、笔触、滤镜和文本属性。将样式应用于对象后，该对象即具备了该样式的特性。Fireworks 提供了许多预定义的样式。可以添加、更改和删除样式，还可将样式导出以便与其他 Fireworks 用户共享，或者从其它 Fireworks 文档导入样式。执行“窗口”“样式”命令，打开 “样式”面板，从下拉列表中选择一种样式，如“镶边样式”，如图3-60所示。“样式”面板可以用于创建、保存样式以及将样式应用于对象或文本。,
