网页设计教学课件-项目3 制作太阳岛旅游网站.pptVIP

项目三 制作太阳网旅游网站 一、项目描述及分析 二、添加并编辑文本 三、添加并编辑图像 四、设计网站 Banner 目 录 五、创建CSS样式表 六、设计网站子页 项目描述及分析 项目描述： 制作一个太阳岛旅游网站。重点是编辑网站首页和“美食文化”、“旅游宝典”子页面。 主要任务： 熟悉主页及子页的编辑方法，文本、图片、flash等的插入与编辑； 掌握CSS样式的创建与应用； 掌握超链接的创建。 项目描述及分析 项目分析： 太阳岛旅游网站是一个景点类网站，这类网站一般以介绍景点的湖光山色、典故传说、风土人情为主，辅以与游客出行相关的衣、食、住、行等资讯信息。 绿色是旅游休闲类网站常用的主题色之一，搭配适宜的绿色可使人心旷神怡。但网站最终风格及配色方案的确定，应与景点的特色相吻合。 网站首页可提供一些与游客出行密切相关的资讯信息，如天气预报、交通指南、景区导游、周边风景等，还可以提供一些自助游记或自驾游记，作为出行建议。 本项目采用绿色为主色调，分“太阳岛简介”、“景点介绍”、“美食文化”、“旅游宝典”、“旅游散记”和“联系我们”等子栏目。 “太阳岛”旅游网站首页 “美食文化”子页面 项目效果图 任务1. 添加并编辑文本 1、添加文本并设置文本格式 为“景区新闻” 和“公告栏”栏目添加文本。 （1）从本项目的素材文件夹中，打开主页文档。 （2）在“景区新闻”栏图片右侧的单元格中输入一条新闻摘要。 （3）在“景区新闻”栏图片下方的单元格中继续输入3条新闻标题。 （4）在页面左侧“公告栏”的空白单元格中输入一条关于风筝节的最新公告。 （5）设置新闻摘要部分文本的格式。 提示：每当文字输入到单元格右边时，按 Shift+Enter 组合键进行换行。 任务1. 添加并编辑文本 2、设置项目列表 将“景区新闻”栏图片下方的3条新闻标题设置为项目列表。 （1）选中需要设置为项目列表的新闻标题文字。 （2）选择“格式”→“列表”→“项目列表”命令，或单击属性面板中的项目列表按钮，对文字添加项目符号。 任务2. 添加并编辑图像 1、插入图像 （1）插入7个导航图片 导航栏制作步骤： （1）在Banner下方的第一个单元格中单击，选择“插入”→“图像”命令，弹出“选择图像源文件”对话框。 （2）选择daohang.gif文件，单击“确定”按钮，即可将该图片插入到文本中。 （3）插入图片时，系统会自动打开“图像标签辅助功能属性”对话框，在“替换文本”文本框中输入图像的说明，单击“确定”按钮。 （4）采用同样的方法，在导航条后6个单元格中依次插入图片daohang1.gif、daohang2.gif、daohang3.gif、daohang4.gif、daohang5.gif和daohang6.gif。 任务3. 设计网站 Banner 太阳岛旅游网站的Banner是可以自动进行图片切换的Flash动画，展示了景区美丽的湖光山色。配合太阳岛Logo的旋转特效效果，看起来动感十足。 认识 Flash 颜色面 板和库 面板 属性面板 工具 面板 主菜单栏 主工 具栏 时间轴 舞台 任务3. 设计网站 Banner 1、制作Banner动画 （1）选择“文件”→“新建”命令，在弹出的对话框中选择“常规”→“Flash文件”命令，然后单击“确定”按钮，新建一个影片文档。文件大小为780×164像素，背景色为白色。 （2）选择“文件”→“导入”→“导入到库”命令，将素材图片aa导入。在库面板中，将aa拖至场景1中，打开“对齐”面板，将水平、垂直方向都设置为居中对齐。 （3）选择“修改”→“转换为元件”命令，打开“转换为元件”对话框，将aa转换为图形元件。 （4）在第50、65帧处插入关键帧。单击第65帧，选中元件aa，将“颜色”属性设置为Alpha，值设为0%。然后在第50-65帧之间创建补间动画。 任务3. 设计网站 Banner （5）在第130、145帧处插入关键帧。单击第 145帧，选中元件aa，将颜色属性设置为Alpha，值设为100%。然后在第 130-145帧之间创建补间动画。 （6）将素材图片bb导入到库中。 （7）新建图层2，在第65帧处插入关键帧。将bb拖至场景1中，设置其相对于舞台水平、垂直均居中对齐。 （8）将图层2中的图片bb修改为元件。 （9）在第75、120和135帧处插入关键帧。单击第75帧，将Alpha值修改为0%；单击第135帧，将Alpha值修改为0%。 任务3. 设计网站 Banner （10）在第65、75帧之间和第120、135帧之间创建补间动画。 （11）将素材图片“logo文字”导入到库，新建图层3，将库中的 “logo文字”图片拖入到场景中。 （12