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

PAGE

PAGE3

第十一章网页设计与制作

一、教学目标

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

一、初步认识AdobeDreamweaverCS4

DreamweaverCS4工作界面概览；DreamweaverCS4工作流程概述

二、AdobeDreamweaverCS4基础应用

DreamweaverCS4站点管理；使用表格对页面进行布局；使用HTML框架对页面进行布局；使用CSS对页面进行布局

第五节应用开发示例

一、规划网站

二、建立页面及素材存放

三、创建网页框架和内容

四、定义CSS规则

第六节网站的测试与发布

一、网站的测试

检查浏览器的兼容性；检查HTML标签

二、网站的发布

五、主要概念

1.页面布局

2.HTML

3.层叠样式表

六、教学案例（注：不要与教材的案例重复）

导航设计的三次点击规则是指，读者通过导航应该点击不超过三次就可以找到其所需要的信息。如果过多点击才能获得信息，就会使浏览的读者迷失方向和失去信心。

如，人民网首页的头版要闻“人民网评：纪念抗战胜利六十六周年为民族伟大复兴续写新篇章”。头版中的显示为：

点击进入后，直接进入正文如下：

只需点击两次，即可看到正文。