网页制作教程—项目6.pptVIP

项目6 设计时装潮流网站 【项目目标】 掌握“行为”的应用 掌握使用行为完善网站主页 掌握模板的创建和应用 任务1 使用行为完善主页 【任务说明】 本任务制作的Badgley Mischka网站，在打开首页时，会弹出一个“欢迎光临”的对话框，当鼠标指针掠过网页时，浏览器的状态栏会显示“欢迎访问时尚潮流服装网站！”文本。 【任务分析】 行为是Dreamweaver中内置的脚本程序，在浏览网页时，经常看到菜单式的导航栏、弹出的消息框、打开浏览器的新窗口以及Flash的播放控制等，这些行为使页面变得生动而丰富。本任务主要使用的行为，包括状态栏文本和弹出信息。因此对本任务分解成如下内容： 设置状态栏文本 添加弹出信息 1、设置状态栏文本 在主菜单中选择“窗口”→“行为”命令，打开行为面板。 选中页眉左端的图像“images/logo.jpg”，然后在“行为”面板中单击 按钮，打开行为菜单，从中选择“设置文本”→“设置状态栏文本”命令，打开“设置状态栏文本”对话框，在“消息”文本框中输入“欢迎访问时尚潮流时装网站。 单击“确定”按钮完成设置。 2、添加弹出信息 打开本项目素材的网页文件“index.html”，单击“文档”窗口底部状态栏上的“标签选择器”中的“body”标签，选中该标签。 单击“行为”面板中的 按钮，在弹出的下拉菜单中选择“弹出信息”命令，打开“弹出信息”对话框。 在“弹出信息”对话框中输入“欢迎光临”，单击“确定”按钮，确认触发该行为的事件是否正确。 任务2 设计制作时尚流行网站子页 【任务说明】 任何网站最难设计的都是主页，当主页设计完毕之后，网站的整体风格、栏目版块等基本上已经确定，其二级子页面在结构框架及风格、配色上与主页面相互呼应即可。因此，最简单易行的方法就是将首页的公用信息制作为模板，然后在制作其他子页面时直接调用，既省时又省力。 【任务分析】 本任务是对时装潮流网站子页的设计，具体实施包括两项内容： 制作“秋冬新品”子页 使用行为完善子页 1、制作“秋冬新品”子页 2、使用行为完善子页 (1) 交换图像 (2) 图像增大/收缩 (3) 改变属性 任务3 设计旅游类网站首页 【任务说明】 要制作一个丰富多彩的网页，光靠文本是远远不够的。作为网页的另一个重要组成元素——图片，不但能够美化网页，而且与文本相比，能够更直观地说明问题，使网页所要传达的意思一目了然。 【任务分析】 本任务是在太阳岛了旅游网站中添加图像，并进行必要的编辑，因此本任务被分解成如下内容： 插入图像 编辑图像 1、插入图像 2、编辑图像 （1）改变图像大小 （2）设置图像间距 （3）设置图像对齐 相关知识点 1、认识行为和行为面板上的按钮 2、为对象附加行为 3、常见事件介绍 4、时尚流行类网站分类 （1）流行服饰类 （2）流行影视类 （3）流行音乐类 （4）时尚美容类 （5）时尚运动类 （6）时尚装潢类 （7）综合时尚信息类 ?想一想 ① 每个行为都有两部分组成，即 和 。所谓事件是指“发生什么”，如鼠标移动到对象上方、离开对象或双击对象等；而动作是指“去做什么”，如打开浏览器窗口、播放声音或弹出信息等。 ② 在制作由大量相同结构的网页构成的网站时，如果把相同的部分制作成 ，则可以避免大量的重复工作。 ③ 创建模板的方法有两种，一种是将普通的网页 ；还有一种是像普通网页文档一样创建模板文档，然后编辑内容。 ④ 默认状态下， 文件夹时用来存放模板文件的。不要将模板移动到Templates 文件夹之外或者将任何非模板文件放在Templates文件夹中，否则会导致将来无法使用模板等一系列问题。 ⑤使用“设置状态栏文本”行为可以再浏览器窗口底部左侧的 中显示信息。