DreamweaverCS5网页设计与制作第3版 吕宇飞电子教案1-6.docVIP

项目一：主页欣赏及页面分析 课题名称：1．7 网页导航 教学目标 1．知识与技能目标 了解导航菜单可以有哪些变化形式和导航菜单在页面中放置的位置，并能设计各个菜单项。 2．操作技能目标 能够进行网页导航草案的设计，并培养相应的审美能力。 教学分析与准备 1．教学重点 网页导航草案的设计 2．教学难点 网页导航的变化形式和在页面中的布局 3．教学策略 讲授、演示、讨论相结合 4．教学环境 多媒体网络机房 学习过程 教学组织 教学内容 备注 引入新课 （建议教学5分钟） 网页导航范例的分析一（建议教学5分钟） （建议教学10分钟） 网页导航范例的分析二（建议教学5分钟） 菜单项的设计（建议教学15分钟） 总结设计与制作要点（建议教学3分钟） 布置作业（建议教学2分钟） 观察与分析资源包提供的一系列网页的浏览。 教材中图1-7-1（个人网站\index.htm ）、图1-7-2（儿童天地.tif）、图1-7-3（香水郡\index.htm）和图1-7-4（食品有限公司欣赏\index.htm）表明了导航菜单设计的素材可以是文字、图片和Flash动画等多种形式。其中“个人网站”页面的导航菜单非常简洁，短竖线间隔的文字给浏览者直观明了的感觉。其实在设计时这部分菜单往往是由短竖线和文字组成的小图片排列而成。这样菜单项中的字体设计就可以采用喜欢的字体，以图片形式的表达可以避免由于采用了特殊字体而在不同浏览终端可能会出现的效果缺失。在一些网页中也有直接使用文字的形式作为导航菜单。“儿童天地”页面的Flash菜单导航是韩国网页设计的主流形式，色彩和谐，占用空间少却富有动态，显得特别灵巧精致。“香水郡”页面的导航菜单设计则采用静态图片的形式，既实现了导航功能，又点缀了页面。“食品有限公司欣赏”页面的导航菜单也是如此，以大堂挂牌装点页面，切合主题。这种类型的导航菜单一般菜单项较少，如果有较多的菜单项则应考虑采用子菜单的分级形式。 教师做Sothink DHTMLMenu(硕思网页魔法菜单)软件应用的示范。 教材中图1-7-5（slussers\index.htm）和图1-7-6（阿景の小屋欣赏\index.htm）、图1-7-7（她爱小孩\index.htm ）、图1-7-8（感动你的心灵欣赏\index.htm）、图1-7-9（astro.tif）、图1-7-10（weiwei个人网站欣赏\z1weiwei.htm）、图1-7-11（浮沉\浮沉.htm）和图1-7-12（FLASH网页\index.html）分别展示的是导航菜单在页面中上、中、下各种不同的摆放位置。页面位置差异和不同的表现风格似乎感觉很另类。“slussers”页面中的导航菜单处于上部位置，并通过色彩等手法和整体页面相融合，属于常见的设计方式；“阿景の小屋欣赏”页面的导航菜单则似乎不想打破画面的感情色彩而位于上部靠右排放；“她爱小孩”页面左边竖形排列的导航文字犹如国画题词旁注，使页面更富有诗画韵味；“感动你的心灵欣赏”页面中的导航则为精致的书签标记；“astro”页面的中部导航恰如少女的腰带；“weiwei个人网站欣赏”页面中部垂直排列的导航菜单傍依着美丽的少女背景图片，胜似精美雅致的挂件；“浮沉”页面右下方靠近底部，细线条和文字组合的导航菜单已话尽凄凉，似有无限柔弱之感；“FLASH网页”页面右下角的导航菜单则精巧玲珑，有种千呼万唤始出来的翩翩风度。 学生上网浏览网页，搜集各种类型的网络导航，并纪录其菜单各项的组合形式。 导航菜单上的信息简明扼要，把握表达主要信息含义的文字作为菜单项文字。 注意文字长度，使导航菜单整体和谐。 注意颜色的呈现，在整体页面中清晰醒目。 测试所有的导航菜单项。 为了能更高效地设计导航菜单，可以使用一些特殊的设计工具实现。例如：Sothink DHTMLMenu(硕思网页魔法菜单)。具体方法在本书后继章节中有关于导航菜单的制作方法介绍。 1、网页导航设计的注意点有什么？ 2、结合自己网页主题确定导航菜单的各个菜单项、表现形式和页面位置。 可以组织学生自行浏览。 建议学生侧重观察两点。其一为导航菜单可以有哪些变化形式；其二为导航菜单在页面中放置的位置。 部分组织学生思考与回答。 学生可以尝试练习 交流与评述