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