《网络信息编辑》教案第十一章jc.doc

第十一章网页设计与制作一、教学目标1.了解网页布局和导航设计；2．了解HTML的基本结构，掌握常见标签及其属性设置方法；3．了解CSS的概念、添加方法、格式、选择符的类型，及其继承和优先级；4．理解CSS中字体、段落、颜色和背景、列表及BOX等对象的样式控制方法；5.了解网页设计工具AdobeDreamweaverCS4的基本知识；6．理解使用AdobeDreamweaverCS4实现表格布局和div+CSS布局的方法；7．了解网站的测试与发布；8．学会使用CSS规则代替HTML元素中定义格式的属性；9.灵活应用HTML元素、CSS样式等，制作美观大方的网页。二、课时分配共两节，每节安排2个课时三、教学重点难点1.页面导航设计应遵循的原则2.文字版面的编辑3．层叠样式表中，如何控制段落的样式，如何控制颜色和背景的样式4.Dreamweaver的基础应用四、教学大纲第一节页面设计基础一、页面布局设计页面布局元素；页面布局的方法；页面布局的技术二、页面导航设计主要导航和次要导航；导航栏的形式；导航设计应遵循的规则第二节HTML语言基础一、HTML简介HTML的概念；HTML的工作方式；HTML编辑工具二、HTML的基本结构三、HTML标签及其属性四、HTML主体标签及属性五、文字版面的编辑六、字体属性设置七、HTML超链接超链接简介；链接路径种类；八、HTML列表无序列表标签；有序列表标签；嵌套列表九、HTML图像十、HTML表格十一、HTML框架第三节层叠样式表CSS技术一、层叠样式表的概念和特点二、层叠样式表的添加方法三、层叠样式表的格式四、层叠样式表选择符的分类HTML标签选择符；类选择符；伪类选择符五、层叠样式表的继承和优先级六、控制字体的样式七、控制段落的样式八、控制颜色和背景的样式九、控制列表的样式十、控制BOX的样式第四节网页设计工具AdobeDreamweaverCS4一、初步认识AdobeDreamweaverCS4DreamweaverCS4工作界面概览；DreamweaverCS4工作流程概述二、AdobeDreamweaverCS4基础应用DreamweaverCS4站点管理；使用表格对页面进行布局；使用HTML框架对页面进行布局；使用CSS对页面进行布局第五节应用开发示例一、规划网站二、建立页面及素材存放三、创建网页框架和内容四、定义CSS规则第六节网站的测试与发布一、网站的测试检查浏览器的兼容性；检查HTML标签二、网站的发布五、主要概念1.页面布局2.HTML3.层叠样式表六、教学案例（注：不要与教材的案例重复）导航设计的三次点击规则是指，读者通过导航应该点击不超过三次就可以找到其所需要的信息。如果过多点击才能获得信息，就会使浏览的读者迷失方向和失去信心。如，人民网首页的头版要闻“人民网评：纪念抗战胜利六十六周年为民族伟大复兴续写新篇章”。头版中的显示为：点击进入后，直接进入正文如下：只需点击两次，即可看到正文。