网页设计与制作教学大纲..
《网页制作与设计》教学大纲
学时：72 学时
课程类别：专业必修课
适用专业：软件技术
一、课程的性质与任务
课程的性质：本课程是一门专业基础课，要求学生掌握HTML、css和dreamweaver制作网页的知识和技术，同时为后续课程的学习奠定基础。
课程的任务：通过本课程的学习，使学生了解网站开发的流程，掌握HTML和CSS技术实现网页的构建和美化，并用dreamweaver CS5工具实现网页的制作。
前导课程：计算机应用基础
后续课程：Javascript、 Java Web组件编程等
二、教学基本要求
本课程以《计算机应用基础》课程为基础，通过本课程的学习，应使学生掌握网页制作的基本方法，掌握HTML、CSS等网页基础编程知识，并使用主流工具Dreamweaver CS5进行网页制作。
三、教学条件
多媒体教室，安装Adobe Dreamweaver CS5的一体化实训室
四、教学内容及学时安排
（一）优秀网页赏析
教学时数：4
教学目标：
1.理解网站相关的概念。
2.了解网页的基本组成元素
3.理解网站的主题定位，风格和网站布局。
4.制作第一个简单的静态网页
教学重点难点：
1. 理解网站的定位和风格
2、学习模仿网页的色彩搭配
2. 分析网站的布局
3. 能模仿制作一个简单网页。
教学方法：案例演示、理论讲解
教学案例：海尔集团网站（企业类）、携程旅游网（旅游类）、中国大众体育网（体育类）、新东方教育（教育类）、往届优秀毕业设计答辩系统、一个简单的静态网页理论教学内容：
1. 不同行业网站赏析
2. 网页与网站的概念和术语。
3. 网页组成元素。
4. 网站的策划与设计原则。
5. 网站的开发流程
6. 应用HTML、CSS制作第一个简单静态网页
实践教学内容：
1.第一个静态网页
实验目的：锻炼学生学会使用记事本编辑静态网页，使学生熟悉HTML标记语言和认识HTML语言的结构；提升学生学习兴趣和自信。
实验要求：要求学生会使用HTML搭建网页架构；在合适位置插入CSS代码并体会使用HTML制作网页的方法。
实验内容：按给定的要求和步骤实现一个静态网页的制作
（二）用HTML设置文本和图像
教学时数：4
教学目标：
1．进一步熟悉HTML文档结构
2．掌握文本排版标记
3．掌握文字列表的标记和属性
4. 掌握图像插入标记和属性
教学重点难点：
1．HTML文档结构
2．掌握文本排版标记
3．掌握文字列表的标记和属性
4. 掌握图像插入标记和属性
教学方法：案例演示、理论讲解
理论教学内容：
1.文本排版(
标记、
标记、标题标记)
2.设置文字列表(
- 和
- 标记)
3.HTML标记与HTML属性
4.插入和使用网页图像(标记和width、alt等属性
5．Dreamweaver CS5中设置文本何图像的方法
实践教学内容：
1.用HTML制作一个图文并茂的网页。
实验目的：熟悉HTML文件结构；掌握HTML中文字、列表、图像标记的使用
要求按照规定格式使用合适标记和属性进行排版，实现给定的效果图中显示效果
实验内容：用HTML语言编写一个图文并茂网页
（三）超链接网页
教学时数：4
教学目标：
1．掌握html中设置基本文字和图片超链接
2．掌握html中设置其他超链接
3. 掌握dreamweaver中建立和编辑超链接的方法
4. 理解相对路径和绝对路径
教学重点难点：
1.掌握html中建立超链接的标记
2.理解相对路径和绝对路径
3.掌握dreamweaver建立超链接的方法
4.理解相对路径和绝对路径
教学方法：案例演示、理论讲解
教学案例：短信平台系统页面
理论教学内容：
1.设置基本文字超链接
2.设置图片超链接
3.设置电子邮件链接
4.创建热点链接
6.利用dreamweaver方便实现网页间的链接
实践教学内容：
1.教务系统子页面
实验目的：理解并运用HTML编辑超链接的标记和属性，会在dreamweaver中快速建立超链接的方法
实验要求：建立几个相关页面，并按要求建立页面间和页面内的超链接
实验内容：按要求建立教务系统子页面，并设置页面间的链接
（四）表格网页
教学时数：4
教学目标：
1．掌握html中表格的建立
2．掌握html中table的常用属性
3、掌握dreamweaver中表格的插入和编辑
4. 掌握数据表格的建立和基本美化
教学重点难点：
1.表格的基本结构
2.表格的属性设置
3.数据表格的编辑和美化
教学方法：案例驱动法
理论教学内容：
1．html中表格的基本结构
2．表格的合并和拆分
3．dreamweaver中表格的插入和编辑
4．数据表格的建立和基本美化
实践教学内容：
1. 短信平台系统页面
实验目的：掌握的插入和编辑。
实验要求：按要求插入和编辑表格
实验内容：按要求实现短信平台系统页面
（五）表单网页
教学时数：4
教学目标：
1.掌握HTML中表单元素的建立
2.掌握表单元素的插入和属性的设置
教学重点难点：
1.理解表单域
2.各种表单元素的插入和属性设置
教学方法：案例演示、理论讲解。
教学案例：教务系统页面
理论教学内容：
1.在html中插入表单域
2.在表单域中插入及编辑文本域和文本区域
3.在表单域中插入及编辑单选按钮、单选按钮组和复选框
4.在表单域中插入及编辑列表/菜单、按钮和图像域等
5.Dreamweaver cs5中插入和编辑表单的方法
实践教学内容：
1. 短信平台注册和登录页面
实验目的：掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。
实验要求：要求学生能利用表单来创建网页；掌握设定表单的内容和表单对象；掌握设置各个表单对象的属性值等内容。
实验内容：教务系统注册和登录页面的实现
(六)框架页面
教学时数：4
教学目标：
1.掌握HTML中创建框架的方法。
2.掌握dreamweaver中创建和保存框架的方法
3.掌握设置框架集属性和框架属性的操作方法
4.掌握框架中设置导航超级链接的操作方法
教学重点难点：
1.HTML中创建框架的标记和属性
2.dreamweaver中框架的建立和操作
3.框架中设置导航超级链接的操作方法
教学方法：案例演示、理论讲解
教学案例：教务系统页面
理论教学内容：
1.HTML中创建和设置框架的标记和属性
2.在dreamweaver中快速创建框架
3.设置框架集属性和框架属性
4.编辑框架内容
5.框架中设置导航超级链接
实践教学内容：
1. 短信平台系统后台页面
实验目的：为了让学生掌握如何创建框架；设定框架的内容和样式；框架间的链接等。
实验要求：要求学生能利用框架来进行布局网页，设定框架内容和样式；设置框架的内容；保存框架。
实验内容：按要求实现短信平台系统后台页面
（七）CSS基础
教学时数：4
教学目标：
1.掌握CSS的构造规则
2.掌握基本的CSS选择器
3.掌握HTML中使用CSS的方法
4.掌握dreamweaver中编辑css的方法
教学重点难点：
1.掌握CSS选择器；
2.掌握HTML中使用CSS的方法
教学方法：案例教学法
理论教学内容：
1.CSS的引入
2.CSS构造规则
3.基本CSS选择器
4.HTML中使用css的方法
5.dreamweaver中使用css的方法
实践教学内容：
1.网上购物管理系统的美化
实验目的：体验css的作用；熟悉css的构造规则；掌握基本的css选择器，掌握dreamweaver中编辑css的方法
实验要求：能按照给定的效果图和要求，运用css技术进行基本的美化
实验内容：按照给定的要求，对网上购物管理系统进行美化
（八）CSS对文字的设置
教学时数：4
教学目标：
1．进一步理解CSS的概念
2．掌握用CSS编辑文字
3．掌握用CSS对段落精细排版
教学重点难点：
利用CSS对文字和段落排版的控制
教学方法：案例教学法
理论教学内容：
1.了解网页中常用的长度单位
2.利用CSS掌控文字的字体、粗细、大小、加线、英文字母大小写转换
3.利用CSS掌控段落的首行缩进、字符间距、段落行距、位置控制
实践教学内容：
1.利用CSS对网上商城系统的段落和文字进行美化
实验目的：掌握CSS美化段落和文字的方法
实验要求：使用CSS样式美化给定网页中的文字和段落
实验内容：按照给定的要求对网上商城系统的段落和文字进行美化。（九）CSS对背景的设置
教学时数：4
教学目标：
1．掌握背景颜色的设置方法
2．掌握背景图片的设置
教学重点难点：
利用CSS对网页中背景图片、背景颜色进行设置
教学方法：讲授与演示相结合
理论教学内容：
1．网页中颜色的设置方法
2．网页及文字、背景颜色的设置
3．背景图片的设置
实践教学内容：
1.利用CSS美化网上商城系统网页背景
实验目的：掌握CSS美化网页背景的方法
实验要求：使用CSS美化网页背景
实验内容：对网上商城系统按要求使用CSS对背景进行美化。
（十）CSS盒子模型
教学总时数：4
教学目标：
1.理解css盒子模型
2．掌握边框的设置方法
3．掌握方框的设置
教学重点难点：
1.理解css盒子模型
2．掌握边框的设置方法
教学方法：案例教学法
理论教学内容：
1．css盒子模型介绍
2. css设置填充
3. css设置边距
4．应用CSS中方框和边框样式到不同元素
实践教学内容：
1.利用CSS美化教务系统中表格和表单元素
实验目的：掌握CSS方框和边框样式美化表单元素和DIV的方法
实验要求：对给定的网页文件按要求使用CSS边框和方框样式美化表单元素和DIV元素
实验内容：对教务系统表格和表单页面按要求使用CSS进行美化。
（十一）CSS+DIV实现网页布局
教学总时数：8
教学目标：
1．理解div元素的特点
2．掌握css设置div元素的方法
3．掌握常用的网页布局
教学重点难点：
1.理解div元素的特点
2．能利用padding和margin属性对div进行控制
3.掌握常用的布局方法
4.掌握float属性的使用
教学方法：案例教学法
理论教学内容：
1．插入和编辑div元素
2．单行单列结构
3．二列式布局
4. 三列式布局
实践教学内容：
1.分别对教务系统和短信系统的页面进行重新布局
实验目的：掌握CSS+DIV对网页进行布局的方法
实验要求：对效果图给定的网页结构按要求使用CSS+DIV进行布局
实验内容：对给定系统的页面按要求使用CSS+DIV对网页实现不同的布局。
（十二）运用dreamweaver CS5制作网页
教学时数：6
教学目标：
1．掌握站点的创建和管理
2. 进一步熟悉运用dreamweaver工具制作网页的方法
3. 进一步掌握dreamweaver中插入和编辑不同元素的方法
4. 熟悉网站的测试和发布流程
教学重点难点：
1.掌握站点的创建和管理
2.进一步熟悉dreamweaver中插入和编辑元素的方法。
教学方法：案例教学法
理论教学内容：
1.站点的创建和管理
2. dreamweaver中插入各种网页元素
3. dreamweaver中编辑各种网页元素
4. dreamweaver中使用css的方法
5. 网站的测试和发布
实践教学内容：
1.“习近平出访”新闻专题网站
实验目的：掌握dreamweaver工具制作网页的方法
实验要求：熟练掌握dreamweaver工具的使用
实验内容：按指定要求实现新闻网站的制作
（十三）网页设计与制作综合案例
教学时数：6
教学目标：
1．进一步掌握网页制作的整体流程
2. 引导学生对网站的内容和色彩美工的把握
3. 巩固网页制作的知识
教学重点难点：
1．对网页制作的流程能有整体的认识和体验
2. 要求学生具有一定的网站内容的策划和色彩美工的把握
3. 熟练应用已学知识制作网页
教学方法：案例教学法
理论教学内容：
1.不同类型的专业网站的欣赏和分析
2. 网页制作的整体流程
3.马鞍山志业软件工作日志网站的制作
实践教学内容：
1. 设计并制作专题网站
实验目的：掌握网页设计与制作的方法
实验要求：掌握网站的策划和制作
实验内容：按给定要求选定主体实现网站的整体设计和页面的制作
（十四）综合实训
教学时数：12
教学目标：掌握网页制作的方法和技术，提高实际动手能力
教学重点难点：实训过程的指导、跟踪和把控
理论教学内容：无
实践教学内容：学生选择网站主题，按照网站制作的流程和给定规范，从规划到设计、到制作、到美化、到测试，直至最后评审
五、各教学环节学时分配
六、考核方式及评分办法
采用平时成绩+实训成绩的方式，包括：
平时的考勤和作业：占40%，综合实训项目：占60%
七、教材与参考书
建议教材（实验指导书）：
[1]《Dreamweaver CS5网页设计教程》,杨子燕编著,人民邮电出版社,2013年
建议参考书：
[1]《完全手册HTML+CSS+Javascript》实用详解,叶青编著,电子工业出版社,2011年
[2] 《HTML+CSS网页设计与布局从入门到精通》,人民邮电出版社, 温谦等编著，2011年出版
八、说明
无