《网页制作》教学大纲简易教案

④ 鼠标移动到【CSS样式面板】上，右击“.style1”规则，在弹出的快捷菜单中选择【套用】。⑤ 重复③和④中的操作，逐一将“.style1”规则应用到接下来的几个单元格中去。⑥ 保存并预览，其效果如图5.5.4所示。

图5.5.3 表格边框设置

图5.5.4效果预览

注意：在Dreamwaver 8中，上一个单元格的下边框和下一个单元格的上边框的属性值效果是可以叠加的。对于相邻的两个单元格，在设置边框的时候需要考虑到这点。

（2）长文本行距、缩进调整的设置步骤如下：

① 在【CSS样式面板】右击“border.css”，选择【新建】创建一个新的CSS规则，命名为“.style5”。

② 双击“.style5”，打开“CSS规则定义”对话框。③ 分别设置以下参数：

·在【分类】列表框中选择【类型】，设置【行高】为25像素； ·在【分类】列表框中选择【区块】，设置【文字缩进】为30像素； ·在【分类】列表框中选择【方框】，设置【边界】左、右各10像素。④ 单击【确定】关闭“CSS规则定义”对话框。

⑤ 选中图11.21中的“自荐信”下方单元格中的两段长文本。

⑥ 鼠标移动到【CSS样式面板】上，右击“.style5”规则，在打开的快捷菜单中选择【套用】。

⑦ 保存并预览，其效果如图5.5.5所示。

图5.5.5 长文本行距调整效果预览

5.6使用模板

模板，它能帮助我们快速定制网页的风格，并由模板生成其他页面，从而避免了许多重复性的工作。制作模板与制作其他页面基本相同，只是模板不需要把页面的所有内容都完成，而只要把导航条、标题栏等各个页面相同的部分制作出来就可以了，其他部分则由模板生成具体页面时再设置。

1．创建模板

模板的后缀名是.dwt，保存模板时Dreamwaver 8会在站点目录下自动生成一个名为“Templates”的文件夹，用以保存模板文件。生成模板的步骤如下：

（1）按照制作普通网页的方法，制作一个页面。（2）将该页面另存为模板，如果弹出警示对话框询问【要更新链接吗？】时，单击“是”。这时在站点目录下将出现一个名为Templates的文件夹，且包含了一个名为“filemod.dwt”的模板文件。

2．创建可编辑区

模板创建后还不能够直接使用，要先进行模板的编辑，主要是创建可编辑区。通过模板生成的新网页，只能更改可编辑区的内容，其余部分总是与模板中的相应部分完全一样。

创建可编辑区的步骤如下：

（1）打开模板文件，选择一个希望在生成页面中可被编辑的元素。

（2）切换到“插入”栏的【常用】选项卡，单击【模板】按钮，选择【可编辑区域】，如图5.6.1所示。

图5.6.1 【可编辑区域】按钮

（3）在打开的如图5.6.2所示的“新建可编辑区域”对话框中输入可编辑区域的名称，最后单击【确定】按钮。

图5.6.2 命名可编辑区

（4）重复上述过程逐一创建并命名模板中的可编辑区域，最后保存并关闭模板文件。最终生成的模板文件如图5.6.3所示，图中的“Edit Region1”、“Edit Region2”等就是可编辑区。

图5.6.3 生成的模板文件及可编辑区

3．应用模板创建网页

基于模板创建网页的操作步骤如下：（1）单击【文件】菜单，选择【新建】，打开如图5.6.4所示的“新建文档”对话框。（2）切换到【模板】选项卡，在【模板用于】列表中选择“我的简历”站点，并选择站点模板“filemod”。

图5.6.4 “从模板新建”对话框

（3）单击【创建】按钮即可生成一个新页面。

通过模板创建的页面在文档编辑区的四周为淡黄色，且其右上角显示“模板：filemod”字样。鼠标移动至非可编辑区域时呈锁定状态，既不可选取也不可单击。

4．更新模板

不管从模板生成多少网页，这些网页在可编辑区域中可随意添加、编辑、删除页面元素。但是它们的共同部分——不可编辑区域，却严格遵守模板的统一设计。反过来，如果模板改变了，那么通过模板创建的各个页面也可以实现同步更新。

对模板的修改，只需打开模板文件，按照普通页面那样随意修改。修改后保存模板时Dreamwaver 8自动打开如图5.6.5所示的“更新模板文件”对话框，提示是否更新站点中所有基于此模板的页面。选择“更新”将更新所示基于此模板的页面；选择“不更新”则所有页面仍将基于原始模板。

图5.6.5 “更新模板文件”对话框

第三篇：网页制作教学大纲

《网页制作》教学大纲

一、课程的性质与任务

本课程属于计算机技术基础的多媒体系列课程。主要学习Macromedia公司制作网页的软件——Dreamweaver8。通过本课程的学习，使学生了解网页设计的基础知识，熟练掌握网页制作的基本方法，具有制作网页的能力。

二、课程教学总体目标

通过本课程的课堂教学，系统学习网站的工作原理、HTML代码和网页制作软件Dreamweaver8的使用，使学生熟练掌握网站创建技术。

由于本课程具有很强的实践性，所以在教学过程中应注重典型案例的教学，通过案例使学生掌握HTML语言和Dreamweaver8的使用，并能设计和制作出功能强大的网站。

三、课程教学学时安排

本课程所需学时为204 学时，其中理论课为72学时，实践教学为96学时及课程设计36学时，教学周数17周。

四、课程教学内容及教学要求

(一)教学内容

第1章

网页设计导论（4学时）1.1 网页的设计构思和布局

1.2 站点规划与设计流程 1.3 主页的基本制作流程 1.4 网站的后期

第2章

Dreamweavre8的基本操作（4学时）

2.1 创建Dreamweaver站点 2.2 编辑站点 2.3 文档管理

2.4 设置文档属性

2.5 在文档窗口中选择元素

第3章

网页元素的基本操作

（6学时）3.1 文本处理 3.2 图片处理 3.3 多媒体处理

第4章

表格与布局（10学时）4.1 表格基本应用与高级应用

4.2 布局应用

第5章

超级链接（8学时）第6章

框架

（10学时）第7章

表单

（12学时）7.1 表单域的创建与修改、检查

7.2 常用表单元素

第8章

层

（4学时）

第9章

模板和库

（12学时）第10章

行为

（8学时）

第11章

Css样式表

（14学时）第12章

动态网页设计（24学时）12.1 Asp工作原理、ASP脚本语言 12.2 ASP应用对象

12.3 Access数据库基本操作 12.4 ASP操作数据库Access 第13章

站点发布（4学时）

第14章

在Dreamweaver中编写Html代码（14学时）14.1 HTML语言基础、常用标记

14.2 在Dreamweaver中编辑代码、优化代码 14.3 制作网页按钮

14.4 手绘网页插画

第15章

综合网站开发（12学时）

15.1 网站定位与规划、功能模块设计与数据库设计

15.2 首页、模板、网页页面、模块整合与网站测试 第16章

网站制作实例：

（58学时）

门户站点主页

16.1 网页的布局设计和实现 16.2 制作网页素材 16.3 构建网页框架

16.4 制作其他特效

（二）教学要求

了解网页设计与制作内容的规划方法、设计网页布局、站点规化与设计流程，编辑站点、Logo Banner设计思路、动作脚本的用途等基本概念。

掌握制作一个主页的基本流程，具体页面元素的设置方法、设置布局、单元格和表格格式的方法，调整图像和占位符属性的方法等。

熟练掌握网站的链接和导航，创建站点常见元素、网页的发布和调试。

第1章

网页设计导论 教学重、难点： 1.网页内容的规划 2.设计网页布局

3.站点规划与设计流程 4.创建设计图

5.主页的基本制作流程

第2章

Dreamweavre8的基本操作 教学重、难点： 1.启动、退出 2.站点建立

3.针对要创建的文档选择模板 4.文档的属性调整 5.选择页面元素

第3章

网页元素的基本操作 教学重、难点： 1.设置文本格式 2.文本的对齐排列 3.编辑字体组合

4.插入图像和图像占位符

5.调整图像和图像占位符属性 第4章

表格与布局 教学重、难点： 1.表格的设置

2.使用布局单元格控制页面 3.设置布局格式

4.设置布局单元格和表格的格式 第5章

超级链接 教学重、难点： 1.设置文本格式 2.编辑字体组合

4.插入图像和图像占位符

5.调整图像和图像占位符属性 6.设置超级链接

第6章

框架 教学重、难点：

1.预定义框架的创建 2.编辑框架和框架集

3.调整框架和框架集属性 4.使用布局单元格控制页面 5.设置布局格式 第7章

表单 教学重、难点： 1.表单的概念 2.表单的设置 第8章

层

教学重、难点： 1．层的使用

3．层的属性调整 第9章 模板和库 教学重、难点： 1.创建与编辑模板 2.创建与编辑库 第10章 行为 教学重、难点： 1.行为的概念 2.行为的应用

第11章

Css样式表 教学重、难点： 1.创建Css样式表 2.样式表的编辑

第12章

动态网页设计 教学重、难点： 1.ASP脚本语言 2.ASP的应用对象

3.Access数据库的基本操作 第13章

站点发布 教学重、难点： 1.站点发布的步骤 2.站点地图的使用 3.站点的同步更新

第14章

在Dreamweaver中编写Html代码 教学重、难点： 1.Htm常用标记 2.代码的优化

第15章

综合网站开发 教学重、难点： 1.创建IIS服务器 2.指定主目录 3.创建虚拟目录 4.指定默认文档

5.Dreamweaver站点管理 第16章

网站制作实例 教学重、难点：

1.实现设计的网页布局

2.Logo与Banner的制作步骤 3.构建网页框架

4.弹出式窗口和浮动窗口的创建方法

五、考试方式

1、考试突出网页制作的能力，理论知识要求从考试中体现。

2、考核成绩计算：平时成绩（包括平时作业、考勤、实验）40%、期末考试50%、课程设计（设计一套较完整的网站及相关页面。包括网站文件、素材库、运行发布）10%

3、考试的形式为机考。

六、教材和主要参考书

教材：《中文Dreamweavre8网页制作教程与上机实训》 魏聪等编著 机械工业出版社

2008年1月

参考书：《网页设计与制作》，于淼主编 中国人民大学出版社 2006版

《 Dreamweaver8网页设计全方位学习》 孙良军编著 中国青年出版社 2006 年5月

第四篇：网页制作教学大纲(专业课)

《网页制作》教学大纲（40学时）

课程代码：13407334

一、课程性质、目的及开课对象

（一）课程性质：专业选修课

（二）目的：对学生进行网页制作技能训练，提高他们对网络资源利用开发的能力，处于信息时代，还应努力培养学生的信息素养，使他们掌握网页制作的基本技能和网络资源利用的基本能力，以及网络道德素养的培养与提高。

（三）开课对象：教育技术学专业本科学生，时间为第七学期。

二、先修课程：无

三、教学方法和考核方法

（一）教学方法：演示法、讲授法。

（二）考核方式：考查

四、学时数分配

总学时：40学时。授课20学时，实验20学时。

五、教学内容与学时

第一章 HTML基础（2学时）【主要内容】：

1.1 什么是HTML 1.Web页的基本概念 2.HTML的工作原理 3.创建和测试Web页 1.2 创建WEB页 1.标记符基础

2.Web页的基本结构 3.设置页面属性 4.添加注释 5.显示特殊符号 1.3 发布WEB页 1.创建本地站点 2.申请网页空间 3.用FTP上传网页

【重点难点】：站点的创建与使用

【学生掌握要点】：什么是HTML、站点的创建与使用 【习题】：

1.简要说明HTML的基本工作原理。

2.编写一个能够显示背景图案并能播放背景音乐的网页。

第二章 文本格式（2学时）【主要内容】： 2.1 文本分段

1.段落标记符P和换行标记符BR 2.水平线标记符HR 3.标题标记符Hn 4.段落对齐

2.2 控制文本的显示效果 1.字体控制标记符FONT 2.物理字符样式 3.逻辑字符样式 4.滚动文字效果 2.3 列表格式 1.有序列表 2.无序列表

【重点难点】：控制文本的显示效果 【学生掌握要点】：文本格式化 【习题】：

1、自行编写实例，尝试本章中介绍的所有标记符和属性。

第三章

使用图像（4学时）【主要内容】：

3.1 web页图像基础 1.位图与矢量图形 2.Web页图像格式 3.使用网页图像的要点 3.2 图像处理基本操作 1.Fireworks的界面 2.修改图像大小

3.用适当的格式导出图像 4.制作GIF动画 3.3 图像标记符IMG 1.插入图像 2.设置图像属性 3.4 创建超链接

1.相对地址和绝对地址 2.页面链接 3.锚点链接 4.电子邮件链接 3.5 使用图像映射 1.什么是图像映射 2.创建图像映射

【重点难点】：创建超级链接和对页面空间结构的理解。【学生掌握要点】：图像处理基础、图像处理、超级链接 【习题】：

1.2.3.4.简要说明GIF格式和JPEG格式各自的特点。说明在网页中使用图像时应注意的基本原理。

使用FRIEWORKS制作一个GIF动画，并将动画插入到网页中。制作一个简单的图像映射网页。

第四章

表格与框架（2学时）【主要内容】：

4.1 创建表格

1.表格的基本结构 2.合并单元格

3.构造表格的步骤 4.2 表格的属性设置 1.边框与分隔线 2.控制单元格空白 3.表格的对齐

4.3 使用表格设计网页布局 1.控制表格和单元格大小 2.控制表格和单元格的背景 3.使用嵌套表格

4.表格布局综合应用 4.4 创建框架 1.什么是框架 2.指定框架结构 3.框架的嵌套 4.框架的初始化

4.5 控制框架的显示效果 1.边框效果 2.设置框架空白

4.6 使用框架设计网页布局 1.指定超链接的目标框架 2.使用页面框架

【重点难点】：使用表格与框架设计网页布局

【学生掌握要点】：实现表格的各种作用、使用框架设计网页布局 【习题】：

1、按照讲解实例自行制作。

2、制作一个简单的个人网站，要求使用表格排版，并用到框架导航结构。请注意不同页面到框架页面的跳转，以及如何从框架页面跳出。第五章

CSS技术（4学时）【主要内容】：

6.1 CSS入门 1.什么是CSS 2.CSS的属性单位 6.2 在网页中使用CSS 1.在标记符中直接嵌套样式信息 2.在STYLE标记符中定义样式信息 3.链接外部样式表中的样式信息 4.样式的优先级 6.3 CSS样式定义

1.HTML标记符selector 2.具有上下文关系的HTML标记符selector 3.用户定义的类selector 4.用户定义的ID selector 5.虚类selector 6.4 CSS属性

1.字体与文本属性 2.颜色与背景属性 3.布局属性

4.定位和显示属性 5.列表属性 6.鼠标属性

6.5 CSS过滤器效果 1.过滤器属性列表 2.过滤器效果示例

【重点难点】：CSS样式定义

【学生掌握要点】：在网页中使用CSS 【习题】：

1.2.3.4.简要说明在网页中使用CSS的三种方式，并说明各自的特点。说明如何确定网页中特定CSS样式的优先级。试验各节介绍的各种CSS属性效果和过滤器效果。

制作一个个人网站，要求合理使用CSS技术和其他网页技术。

第六章

用DreamweaverMX制作网页（6学时）【主要内容】：

7.1 DreamweaverMX的界面 1.DreamweaverMX的界面元素 2.设置文档窗口 7.2 创建和管理站点 1.网站开发流程 2.创建本地站点 3.管理本地站点

4.创建与管理远程站点 7.3 文本修饰与超链接 1.制作网页的一般过程 2.设置字符格式 3.设置段落格式 4.设置列表格式 5.使用超链接 7.4 使用图像 1.插入图像 2.设置图像属性 3.制作图像映射 4.动态图像效果 7.5 使用多媒体对象 1.使用声音与视频 2.使用Flash对象 7.6 设置页面版式 1.使用表格排版 2.使用层排版 3.使用框架排版 7.7 表单与行为 1.创建表单 2.创建表单控件

3.添加表单控件标签 4.行为的概念与基本操作

5.使用DreamweaverMX自带的行为动作 7.8 使用样式

1.使用HTML样式 2.创建和应用CSS样式

3.创建和链接外部CSS样式表

【重点难点】：站点的建立与管理；网页设计与制作 【学生掌握要点】：用DreamweaverMX制作网页 【习题】：

1.简要说明Dreamweaver的界面组成元素及其相应功能。

2.简要说明网站建设的工作流程，规划站点时要考虑哪些问题？设计站点时要考虑哪些问题？

3.总结在Dreamweaver中制作网页的一般过程。4.如何在网页中使用声音和视频？

5.在Dreamweaver中分别用表格和层两种方法制作同一个页面效果。具体页面要求见授课内容。

6.在Dreamweaver中实现一个简单的网站（5－10页），要求使用框架导航结构。7.什么是行为？Dreamweaver提供哪些常用的行为动作？它们的作用是什么？

8.什么是HTML样式？它和CSS样式有何不同？在Dreamweaver中能够实现哪些类型的CSS样式？

9.简述在Dreamweaver中使用CSS样式表的步骤。

六、教材与教参

（一）教材：

无

（二）教参：

1、《网页制作教程》

2、《网页制作三剑客实例精粹》

3、《跟我学Dreamweaver MX》

赵丰年等 姜谷鹏等 甘登岱等6

人民邮电出版社航空工业出版社人民邮电出版社 2005年 2003年 2002年

第五篇：《网页设计与制作》教学大纲

《网页设计与制作》教学大纲

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production 课程类别：选修课 适用专业：所有专业

开课学期：2011-2012第2学期 总学时：24学时 总学分：1 课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴 闵联营，科学出版社;

2、网站与网页设计，张贵明，清华大学出版社;

3、网页美术设计原理及实战策略，王晓峰 焦燕，清华大学出版社;

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）（1）HTML文件的基本结构（2）文字和段落标记

（3）列表标记

（4）图片标记（5）表格标记（6）超链接标记（7）表单标记（8）框架标记

第三章、JavaScript语言（4学时）（1）JavaScript语言简介（2）JavaScript编程基础（3）基于对象的JavaScript语言（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）（1）CSS概述（2）CSS属性

第五章、可视化网页设计工具Dreamvawer8.0（1）网页的基本操作（2）图像、表格与超链接（3）表单与框架（4）添加网页元素（5）发布站点

第六章、动态网页设计语言ASP（4学时）（1）ASP简介（2）VBScript脚本基础（3）ASP的内置对象（4）实用Global.asa文件

4学时）（第七章、利用AD0访问数据库（1学时）（1）数据库的连接（2）数据库的检索（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1.自制网站（80%）2.平时考勤、作业(20%)平时成绩分配：

平时考勤5次，每次2分，共占10% 作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

执笔人：邢雁平

下载《网页制作》教学大纲简易教案.doc

将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。

点此处下载文档

文档为doc格式