风光旅游网站制作

项目3风光旅游网站制作本项目内容提要：本项目结合“风光旅游网站”的规划设计与制作过程，讲述了中文DreamweaverCS5表格、样式、链接，中文FireworksCS5文字特效、图像处理、按钮导航、动画制作等相关知识。本项目能力目标：1具备应用表格结构规划设计网站的基本能力。2掌握中文DreamweaverCS5表格技术、中文FireworksCS5文字、图像、按钮、动画操作技术。本项目知识目标：1掌握中文DreamweaverCS5表格、样式、超链接等基本知识。2掌握中文FireworksCS5文字特效、图像、按钮、动画制作等相关知识。3.1风光旅游网站制作过程任务3-1设计规划风光旅游网站【子任务3-1-1】设计规划风光旅游网站本网站主要采用表格整体布局方案，一般主页内容较少时多采用此布局方式。网站的主题栏目是景区精品、辽阳简史、文化名片、住在辽阳、饮食特色、风景欣赏。网站主页规划的结构如下图3-1所示：设计网页尽寸。选择1024×768规格,实际尺寸为：1000×768。【子任务3-1-2】收集辽阳风光旅游网站所需要的素材收集的素材包括：辽阳风光图片、辽阳历史文化知识、辽宁饮食特色等。【子任务3-1-3】确定辽阳风光旅游网站色彩风格以绿色与蓝色相结合的色调为主。任务3-1设计规划风光旅游网站站标区导航区辽阳旅游简介主体区图像热点景区版权区图3-1风光旅游网站规划布局图任务3-2创建风光旅游网站站点【子任务3-2-1】设置本地站点文件夹操作步骤如下：（1）在桌面双击“我的电脑”图标。（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）。（3）使用【文件】→新建→文件夹命令，在硬盘中建立一个新文件夹。（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入“Tourism”，然后在空白处单击确定。如图3-2所示。任务3-2创建风光旅游网站站点图3-2建立站点文件夹Tourism任务3-2创建风光旅游网站站点【子任务3-2-2】建立一个名称为“旅游”的站点操作步骤如下：（1）启动DreamweaverCS5（2）执行“站点”菜单中的“新建站点”命令，弹出“站点设置对象”对话框。（3）在菜单中选择“站点”选项，在“站点名称”文本框中输入：“旅游”，在“本地站点文件夹”中输入E:\Tourism（或单击浏览器按钮，选择“E:\Tourism”）作为本地根文件夹。（4）单击【保存】按钮，完成“风光旅游”站点创建。任务3-2创建风光旅游网站站点【子任务3-2-3】在“旅游”站点中建立站点子文件夹本网站将建立以下子文件夹即子文件夹jingqu（介绍主要景区）、子文件夹lishi（用于简述辽阳简史）、子文件夹wenhua（用于介绍辽阳文化品牌）、子文件夹binguan（用于介绍辽阳主要宾馆）、子文件夹yinshi（用于介绍辽阳饮食文化）、子文件夹fengjing（用于存放风景图片）。另外再建一个图片文件夹Images，一个音乐文件夹Music。操作步骤如下：（1）在文件面板中选择“站点-旅游（E:\Tourism）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。（2）单击untitled文件夹的名称部分，输入jingqu，将文件夹改名为jingqu，此文件夹用于介绍主要景区；（3）参照步骤（1）和（2），依次建立子文件夹lishi、子文件夹wenhua子文件夹、子文件夹binguan、子文件夹yinshi、子文件夹fengjing。另外再建一个公共图片文件夹images、音乐文件夹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表格进行网站主页布局我们在使用表格布局时，通常把不同区域单独用不同的表格来布局，而且有时还要使用表格嵌套，这样可以提高网页的访问速度。【子任务3-3-1】设置主页页面属性操作步骤如下：（1）在旅游站点中双击index.htm，打开主页文件应用程序窗口，输入标题为“辽阳天逸旅游网”。（2）执行“修改”→“页面属性”菜单命令，打开“页面设置”对话框，“背景颜色”设置为浅黄色（#FFFFCC），“左边距”设置为“0”，“上边距”设置为“0”。（3）单击【确定】按钮。（4）按快捷键【Ctrl】+【S】保存网页。任务3-3利用Dreamweaver表格进行网站主页布局【子任务3-3-2】用表格对旅游网主页进行布局操作步骤如下：（1）执行“插入”→“表格”菜单命令，在“表格”对话中输入“行数”为4，“列数”为1，“表格宽度”为1000像素，“单元格边距”为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利用Dreamweaver表格进行网站主页布局图3-4应用表格布局的主页效果任务3-4利用Fireworks制作站标图像【子任务3-4-1】制作旅游网站标图像“辽阳欢迎您！”操作步骤如下：（1）新建一个Fireworks文档，在弹出的“新建文档”对话框中输入如下参数：宽为1000像素、高为600像素、分辨率为96像素/英寸、画布颜色为“白色”，单击【确定】按钮，完成新文档创建。（2）执行“文件”→“导入”命令，弹出“导入”对话框，如图3-5所示，选择欲导入图像文件，单击【打开】按钮。（3）应用“裁剪”工具，裁去图像下边、上边部分内容，保留图像主体内容。（4）调整图像大小。例如，在属性面板中输入宽: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，执行“导出”命令，选择保存位置为：站点文件夹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】类似的步骤制作站标图像“千年古都新韵健康运动天堂”。在制作“千年古都新韵健康运动天堂”文字时，可给文字设置红色阴影效果，并设置字体为舒同体，大小为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）新建一个Fireworks文档，在弹出的“新建文档”对话框中输入如下参数：宽为1000像素、高为180像素、分辨率为96像素/英寸、画布颜色为“透明”，单击【确定】按钮，完成新文档创建。（2）执行“文件”→“导入”命令，弹出“导入”对话框，选择欲导入的图像文件，如zb01.jpg，单击【打开】按钮。在属性面板中输入：宽为1000，高为180，x和y的值均为0。（3）执行“窗口”→“状态”命令，打开“状态”面板。如图3-12所示。图3-12“状态”面板任务3-5利用Fireworks制作站标动画（4）单击“状态”面板右下方的【新建/重制状态】按钮，增加状态。（5）执行步骤（2），在第2帧中导入图像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制作站标动画【子任务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制作按钮导航导航栏是一组按钮，当网页的其他部分发生变化时，导航栏的内容基本不发生变化。制作导航栏的一种简单的方法是采用复制按钮的办法，复制结束后再修改按钮上的文字内容和相应的链接。【子任务3-6-1】使用按钮制作导航操作步骤如下：（1）新建一个Fireworks文档。执行“文件”→“新建”命令，在“新建文档”对话框中确定画布的宽度为1000、高100、颜色为白色，然后单击【确定】按钮。（2）执行“编辑”→“插入”→“新建按钮”命令，此时“状态”面板和“对齐”面板均为打开状态，用以帮助按钮准确定位。选用“圆角矩形”矢量工具创建一个按钮符号，按钮颜色为蓝色，宽为142.8，高为50，文字内容为“首页”（中间空两字），颜色为白色，字体为华文中宋，按钮链接为index.html。如图3-16所示。任务3-6利用Fireworks制作按钮导航图3-16按钮制作任务3-6利用Fireworks制作按钮导航（3）创建按钮对鼠标动作响应的不同状态，如鼠标滑过时字体颜色有改变，或鼠标按下时按钮颜色发生变化等。可按下【Shift】同时单击按钮及文本，再按下快捷键+【C】,分别选择“滑过”选项卡和“按下”选项卡，按下快捷键【Ctrl】+【V】进行粘贴，来更