《网页设计与制作》教案

网页设计与制作教案

课程名称网页设计与制作

课程类型

教材名称：网页设计与制作实用教程主编：艳丽

使用教材

:高等教育日期：2011年5月

学时分配共64学时，其中理论36学时，实践28学时。

课

程

教该课程是三年制高职高专电子商务专业的职能课程，目标是让学

学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网

目页美工软件，能够设计制作常见的静态网页。它要以计算机基础、计

的算机网络技术课程的学习为基础，也是进一步学习网络编辑、建设与

与管理课程的基础。

要

,求

主要参考喜清，海涛《网页设计与制作》工业大学，2010.9

书目振业《网页设计与制作》高等教育，2009.3

课程教案（Nfl：l）

授课容网页制作基础知识

课型13理论口实践授课学时2

教学方法

讲授法

与手段

本次课程将讲授网页制作的基本知识，使学生了解到什么是网页，网页制作涉

教学目的

及到哪些工具、网页与有什么区别，网页与普通的文档有什么区别等。通过讲

授也将使学生了解到网页的组成，网页语言的种类及各自特点；动态网页与静

与要求

态网页的定义；Internet信息发布的原理等等容。

教学重点：

1♦Internet信息访问原理。

2,什么是网页？

教学重点

（1）网页容组成；

（2）网页编写语言种类及特点。

与难点

3,Dreamweaver8功能简介。

教学难点：

Internet信息访问原理；网页编写语言种类及特点。

—、基础知识

1•网页简介（15分钟左右）

网页：是组成WW（WorldWideWeb：万维网）的基本元素，也被称为页

面或Web页。不同的网页通过超联系在一起，构成了WWW纵横交织结构。

:就是一个相互的网页的集合，它们可以共享。大的页面数量多达几十万，

教学过程

甚至上百万页，小的个人也可以只包含数个页面。

主页：是中的一个特殊网页，它是在WWW上进入的第一个网页，其中包含指向

设计

其他网页的超，通常主页的名称是固定的。

2-Internet简介（5分钟左右）

3•了解常用的网页制作工具（10分钟左右）

皮口：Dreamweaver和FrontPage

4•了解美化网页的主要工具（10分钟左右）

（1）图像欠理软件：Photoshop、Fireworks、CorelDRAW等

（2）动画制作工具：Flash

5•了解网页中的脚本语言（10分钟左右）

如：VBScript'JavaScript

6•了解服务器端主要技术（10分钟左右）

服务器端脚本语言：ASP、JSP、PHP、CGI等。它们的形式与HTML有些类似，

但功能更加强大，能够实现许多功能。

二、了解建立的基本流程（10分钟左右）

1•确定主题

2•搜集资料

3•规划

4•选择合适的制作工具

5•制作网页

6•上传测试

7•推广宣传

8•维护更新

三、DreamweaverCS3基础（20分钟左右）

11Dreamweaver的发展史

21DreamweaverCS3的新功能

31DreamweaverCS3工作区简介

4•网页文档的基本操作

作业/思考题：

1•列举你所了解的网页设计的常用工具和美化网页的主要工具

2•建立的基本流程有哪些步骤？请归纳总结。

3•利用网上资源，在百度中搜索“网页配色方案”关键词，下载相关的“网页配色方案”

文■件,指导以后网页设计中的配色问题。

教学后记：

第一节课，应首先介绍发展的前景）重点分解Dreamweaver和其他软件的区别，提出利用网

络传播信息，并由此讲述网络发展给网页带来的市场。通过两节课的讲授，感觉到学生能对

本课程产生比较大的兴趣！

课程教案（N0：2）

授课容站点的创建与管理

课型国理论口实践授课学时2

教学方法

讲授法

与手段

教学目的

本次课程将讲授站点的创建与管理知识，使学生了解到什么是站点，站点的种

类，站点的作用，站点文件的管理。站点的发布及网页的预览。

与要求

教学重点：

1•站点的创建；

教学重点2•站点文件的管理；

3•站点文件的预览；

与难点4•站点地图的生成。

教学难点：

测试利用服务器技术的站点；站点地图创建的条件；远程站点的创建。

一、站点（10分钟左右）

也称“”，用来定位上的所有文件，是一系列通过超而相互联系的网页集合。

建立首先要在本地计算机上构建本地站点来管理站点中的文档喇作网页＞

测试完毕后1上传到Internet服务器。

二、新建本地站点（20分钟左右）

1•站点菜单-＞新建站点

2•站点菜单-＞管理站点-＞新建

教学过程3•建立站点注意问题：

（1）用文件夹进行分类存储：如网页文件存放在html文件夹中，图像文

设计件存放在images文件夹中。嵌套文件夹的层数不要太多，最多不超过三层，

否则超时会出错。

（2）文件命名要合理：建议全部使用小写的文件名称，不要用中文文件名。

文件夹的名称最好用顾名思义的英文，方便以后修改维护。文件名也要符

合规，比如首页一般命名为index,html或default,html。

三、文件的管理（20分钟左右）

1•文件的创建（鼠标右击站点-＞新建文件；文件菜单-＞新建；ctrl+N）；

2•文件的选择（鼠标点击单选；按Ctrl或shift键辅助多选）；

3•打开和编辑文件（双击）；

4•删除文件；

5•重命名文件（右击文件；F2）；

6♦保存及另存为文件：ctrl+s/fl2；或通过文件菜单；

7•文件的复制，移动,关闭：ctrl+c.ctrl+x，ctrl+w；

8•消除文件只读属性：右击文件选择；

9•将文件设为首页：和制作站点地图有关；

10•给文件添加设计备注：备注文件的存放位置和文件的扩展名。

四、页面预览（F12键）（20分钟左右）

1•文件菜单-＞在浏览器中预览-＞选择浏览器

2•工具栏-＞地球土标-＞选择浏览器：此时可通过“添加浏览器”选项来增

加更多的浏览器

3•编辑菜单-＞首选参数-＞在浏览器中预览-＞不选”使用临时文件预览”

五、站点的编辑和管理（20分钟左右）

1•站点管理器：文件面板（窗口菜单或F8键）

2•打开现有本地站点

3,查看本地和远程的文件和地图

4•调整窗口视图

5•保存站点地图

6•重建站点缓存

7•站点编辑，复制，删除，导人与导出：站点菜单-＞管理站点

作业/思考题：

1•在制作网页前为什么要首先建立站点？

2•定义本地站点的含义是什么？

3•建立站点应该注意的问题？

教学后记：

的站点，好似一个班级，应该首先为班级起一个名称，并配备一个班主任，然后再陆续的加

入一些学生。这其实就是我们站点创建时应该为站点起一个名字，并设置一个首页，增加更

多的超。

课程教案(N0：3)

授课容了解Dreamweaver的界面及站点的建立

课型口理论因实践授课学时2

教学方法

讲授法、演示法

与手段

教学目的

利用DreamweaverCS3熟练创建本地.远程站点。并掌握Dreamweaver的基本

操作。

与要求

教学重点：

1•站点的创建；

教学重点2•站点文件的管理；

3•站点文件的预览；

与难点4•站点地图的生成。

教学难点：

站点地图创建的条件；远程站点的创建。

1.本地站点的创建

(1)运行软件

(2)站点菜单-＞新建站点

(3)远程服务器连接选择为无

2.远程站点的创建

(1)运行软件

(2)站点菜单-＞新建站点

教学过程(3)远程服务器连接选择为FTP

3.IIS的安装

设计(1)我的电脑-＞控制面板-＞添加和删除程序

(2)选择添加windows组件

(3)勾选Intemet信息服务，更新安装

4.创建利用服务器技术的站点

(1)运行软件

(2)站点菜单-＞新建站点

(3)是否利用服务器技术设置为是

(4)允许IIS，将默认站点的主目录设置为站点所对应的文件夹

(5)设置服务器站点的测试服务器为localhost

5.站点文件的管理

站点文件的创建.编辑及预览

6.管理站点

(1)站点菜单->新建站点

(2)实现对站点创建.删除.编辑

(3)导出并重新导入站点

\ib・\Br・aa.・”・r1X2004、心网jKift计\S.T*两爰看东线\l"d・a・、.]

文件9堀倦⑴杳着9ftAH)［岑改尊)文本①命令©站点⑤)«□«)制物Q0

▼处入常用布局装单文本m.2P应用程序”・小元案收族天后►css

0日息严目理•卷。司SQ|0•51

费现代礴片IU

二11本增视的二J

检CI86a*10

।菇点-f»r«l0(\>b»)

oDr«».«kvtr«X2tXM动寄网贡设i+

由已51道艺本

F匕5J0人力资j5管理景统

ao5.2在校亚系战

田匕5.4国书查逾弟统

王匕56在发论城

日二_57辄期t布系找

.OC«t>n«cti4&s

出已Dktkbas*

由Q

用已S»«rc・

regTf1"”

浮已明即程

'Aid-dxi«v.cp

8'«44succ.5

JiNtx.tsp

£12dty.c»

aJsbc«d«t4ilesp

X5.9T*Xft

熨字课件演示

0

口IMT22

囹

▼属性

«]人机界面设计原IN.ppt

格式侨3作式伍Fcss|Bi/iKfiaia|啦|3噂

»]的字媒体设计ppt

种时字体5大小历习「町

口gi闫好心|闺目标।二।认知心皆竽概论”>，

I二刁单元格水平|\”二JR不接行「一而=Q」

|口口朝西直画二三］«±1________________I2J

酒it室即斗，|I眸口.匚厂.UI个车跑项目被遑中，总共2601个/.B卷I

作业/思考题：

1•在制作网页前为什么要首先建立站点？

2•定义本地站点的含义是什么？

3•建立站点应该注意的问题？

教学后记：

通过本次实训，让学生系统的掌握站点的创建及管理，了解各类站点的创建过程，并能

正确的导出和导入站点文件。

课程教案（No：4）

授课容HTML语言简介

课型国理论口实践授课学时2

教学方法

讲授法

与手段

教学目的1•了解HTML语言，重点掌握HTML文件的基本结构和语法格式；

2•掌握标记语言的用法；

与要求3,熟记<title>标记、〈marquee>标记及常用属性代码。

教学重点：

教学重点1-HTML文件的基本结构；

2•HTML语法格式；

与难点教学难点：

设置网页标题；设置网页关键字；制作滚动文字。

一'HTML简介（5分钟左右）

HTML：（HyperTextMarkupLanguage）是一种超文本标记语言，是网页制作的基

本语言。即通过将特定的标记放置在文本或图片或URL前后，来达到使该段文

本或图片或URL以指定方式显示的目的。

二、HTML文件的基本结构（10分钟左右）

<HTML>

<head>

〈title〉网页的标题《/title>

</head>

教学过程

<body>

网页的主体容

设计

</body>

</HTML>

三、HTML语法格式（20分钟左右）

1­HTML标记一般格式

〈标记属性1="属性值1"属性2="属性值2"••­>

对象

</标记）

说明：标记除了上述格式，还有单标记，如下面的<img>标记；属性书写不

分先后顺序；属性值用英文双撇号括住。

2-HTML语法规则

HTML文件以纯文本格式形式存放，扩展名为html"或htm”。

HTML标记不区分大小写。

多数HTML标记可以嵌套，但不可以交叉。

HTML源文件中的换行、回车符和多个连续空格在显示效果中无效。只有在

设计视图中才有用。在HTML源文件中，＜br＞为换行标记；＜pX/p＞为换段

标记；空格用 表示。

四、HTML标记举例（55分钟左右）

1•设置网页标题：＜title＞标记

2•元信息标记:＜meta＞标记

＜meta＞标记的信息只显示在源代码中，浏览器中没有显示，通过设置＜meta＞

标记的不同属性，可以定义页面中各种元数据，如页面的名称、关键词等

多种信息。

3,制作滚动文字：＜marquee＞标记

属性：

①direction表示滚动的方向，值可以是left'right、up'down，默

认为left。

②behavior表示滚动的方式，值可以是scroll（连续滚动）、siide（滑

动一次）、alternate（来回滚动）。

③Loop表示循环的次数，值是正整数，默认为无线循环。

④Scrol1amount表示运动速度，值是正整数，默认为6。

⑤ScrolIdelay表示停顿时间，值是正整数，默认为0，单位是毫秒。

⑥Align表示元素的垂直对齐方式，值可以是top'bottom'middle°

⑦Height'width表示运动区域的高度和宽度，值是正整数或百分比，

默认width=100%，height为标签元素的高度。

事件：

onMouseOver=this.stop（）和onMouseOut=this.startO,表示当鼠标浮到

以上区域的时候滚动停止和当鼠标移开的时候又继续滚动。

作业/思考题：

1•关键字之间以英文逗号分隔。关键词输入不是越多越好，因为大多数搜索引擎限制关

键字的数量，所以设置关键字要精简才会被搜中率高。

2•什么是HTML?HTML文件的基本结构是什么？

3•HTML标记的一般格式是什么？

教学后记：

虽然现在不懂HTML也能制作漂亮网页，但是只有掌握HTML，才可以更方便、更全面地控制

网页，同时又一些网页设计离不开代码。

课程教案（N0：5）

授课容网页文本的使用

课型国理论口实践授课学时2

教学方法

讲授法

与手段

教学目的

本次课程将讲授网页制作过程中的文本使用，掌握各种特殊文本的输入，文本

列表的使用。

与要求

教学重点：

1•特殊文本的输入及使用状态；

2•文本属性；

教学重点

3•文本列表的使用；

4­在html中的文本代码。

与难点

教学难点：

1•有序列表和无序列表的区别；

2•描述性列表的制作。

一、文本的输入（10分钟左右）

1•换行与换段的输入

2•空白字符的输入

3•特殊符号的输入

4•日期与时间的插入

5•水平线的插入

二、文本的编辑（20分钟左右）

教学过程1•文本的选择：鼠标拖选，按住shift+光标键选择

2•文本的删除，复制，移动，选择性粘贴

设计3•查找与替换:ctrl+f

•文本对文本的替换

•带格式文本的替换

•源代码的替换

•文本高级及指定标签的替换

4♦拼写检查:shift+F7

三、文本的属性（15分钟左右）

1•属性工具栏：窗口菜单

2•设置文本的格式.大小.字体.颜色（注意样式的变化）

3•设置文本对齐方式：注意html代码中的变化

四、文本列表（30分钟左右）

1•项目列表的创建

2•编号列表的创建

3•描述性列表的创建

五、HTML中的文本代码（15分钟左右）

1•段落和换行代码

段落：<p></p>

换行：<br/>

2•保留源格式代码：pre

3•水平线代码：<hr7>

4•标题代码:hl、h2、h3、h4、h5、h6

5•列表代码：ulollidldtdd

作业/思考题：

1•设置网页中文本的字体、颜色时要注意什么问题？

2•如何修改水平线的颜色？

教学后记：

本节课授课前，应更多的让学生去回忆此前学习的word中的文本。从而感觉本知识的非常

容易，最后能比较发现网页文本的特殊性。

课程教案（N0：6）

授课容建立简单的网页制作

课型口理论因实践授课学时2

教学方法

讲授法、演示法

与手段

教学目的

通过站点的创建，以及站点文件的管理，创建一个简单的。

与要求

教学重点：

1•创建本地站点

2•创建首页

教学重点

3•在首页输入文本容

4•制作文本列表

与难点

教学难点：

1•有序列表和无序列表的区别；

2•描述性列表的制作。

主要步躲

一、创建本地站点

1•运行软件

2•站点菜单-＞新建站点

3•远程服务器连接选择为无

二、创建首页

1•窗口-＞文件

2,右击当前站点-＞新建文件-＞命名为1ndex.html

教学过程

三、在首页输入文本客

1•输入常规文本，并在其中换行/换段

设计

2•输入空白字符，设置首选参数中的常规设置

3•插入日期和水平线

四、制作文本列表

1•制作无序列表

文本属性栏-＞项目列表

敲回车继续新的项目

2•制作有序列表

文本属性栏-＞编号列表

敲回车继续新的项目

3,嵌套列表的制作

增加文本缩进

修改