Dreamweaver cs5网页设计与制作.docxVIP

《Dreamweaver cs5网页设计与制作》教案本课程目标：学生掌握静态网页的基本制作方法，熟练掌握Dreamweaver cs5的使用，掌握HTML和CSS的用法，熟练掌握Div+CSS的布局方法，为学习动态网页打下基础。第一篇欣赏与分析篇项目一主页欣赏及页面分析项目目标：了解网页的组成对网页有更深一步的认识提高网页的审美观教学课题：主页欣赏及页面分析一、课型：讲解型二、课时：4课时三、教学目标：对主页有直观认识了解网页的布局和组成了解组成网页的各种元素，包括主题、版式、色彩、导航等四、教学重难点组成网页的各种元素五、教学方法网页鉴赏、小组讨论等。六、教具：电脑、交互式大屏、网络七、教学过程1、新课导入：展示几种不同类型的主页，让学生来分析这些主页的风格和组成。2、新课讲解1）页面的构成元素网页设计技术主要由版式设计、视听元素和延伸设计三部分组成。2）表现主题确立明确的主题，视觉表达才有特定的意图和要求，并按照视觉心理规律和形式将主题传达给浏览者。两方面：一方面是要对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑思维方式；另一方面要对网页各个构成元素运用艺术的形式美法则进行条理性处理，更好地营造切合主题的视听环境，增强网页的感染力。十类参考题材：网上求职网上聊天网上社区/讨论计算机技术网页/网站开发娱乐网站旅行参考/资讯家族/教育生活/时尚选择主题的注意事项：主题定位小，内容精主题贴近生活，题材最好是自己擅长或喜爱的内容挖掘有特色的主题3）网站名称和CI形象网站名称是很着急的一个要素，名称的含义清晰、容易记忆，对网站的形象和宣传推广有很大的影响。例如：新浪、阿里巴巴等。确定网页设计主题和网站名称后，要设计网站自身的CI形象（CI是英文Corporate Identity的缩写，即通过视觉来统一企业的形象）。创建网站的CI形象，首要是标志（logo）的设计。标志的设计可以是中文、英文字母、符号、图案，甚至是动物或人物等。提示：网站的名称械合法、合理、合情网站名称要简明扼要、容易记忆网站名称要有特色4）设计风格网络是指Web站点的整体内容与形式给浏览者的综合感受。主题和内容是风格的基础，创意是风格的灵魂。形式与内容、功能的和谐统一提升网页整体品质。网页风格的形成主要依赖于网页的版式设计、页面的色调处理，以及图片与文字的组合形式等。例如：政府部门的网页一般严肃庄重；文化教育的网页网络高雅大方；娱乐行业的轻松活泼；商务网页贴近民俗。5）版式设计版式设计主要表现为网页页面布局，强调页面所包含的各个模块的共性因素，合理安排图片和文字排放位置，合整体流畅富有感染力。网页的版式没有统一标准，一般有以下几种布局方式：“T”型、“口”型、“三”字型、“同”字型、对比型实例：6）色彩运用色彩三原色：红、绿、蓝色彩的三个属性：色相、饱和度、明度色彩的配色方案：暖色调：红色、黄色、橙色等色彩的搭配，使呈现温馨、和煦、热情冷色调：青色、绿色、紫色等色彩的搭配，呈现宁静、清凉、高雅相近色调：色彩环中相邻的颜色搭配，视觉效果舒适、自然对比色调：色彩环中相对的颜色搭配，可以产生强烈的视觉效果7）网页导航网页导航能帮助浏览者浏览网页时根据需要快捷地链接到相应的位置，是网页元素非常重要的组成部分。导航设计一定要清晰、醒目。导航菜单设计的素材可以是文字、图片和Flash动画等多种形式。如果导航菜单项较多，则应考虑采用子菜单的分级形式。8）视听元素视听元素主要包括背景、文字、颜色、导航菜单、音乐、图标、图像、按钮、Flash动画、动态影像等。网页中的背景设计不仅影响浏览者对网页内容的接受程度、还影响浏览者对整个网站的视觉印象。网页中的字体同样具有实现语意和美学效应两方面的作用。最适合的网页正文显示的字体大小不一为12磅左右；行距应接近字体尺寸，比例通常为12：10；文字的颜色要与背景有一定的对比，从而使文字清晰便于阅读。 Flash的使用要注意：衬托主题而不要喧宾夺主；对主题和布局要作全面考虑。八、教学小结本章内容主要是欣赏网页和对网页有一个认识。通过展示一系列风格不一的网页，全面了解组成网页的各种元素，包括文字、背景、图像、导航、版式、色彩等，从而对后面的学习打下基础。九、课后反思学生对欣赏网页还是很有兴趣，都希望把这门课学好，但是学生普遍对美学方面的知识很欠缺，对版面构成，色彩等相关知识了解很少，所以在开这门课程之前，最好普及一下美学方面的知识比较好。第二篇基础入门篇项目二网站的规划与设计教学课题：认识网站与与网站的运行环境一、课型：讲解型二、课时：1课时教学目标：1、认识网站与网页2、了解网站的运行环境四、教学重难点网站中网页的组织方式五、教学方法讲解法六、教具：电脑、交互式大屏、网络七、教学过程1、新课导入：任务一：认