网页设计教案
吴静
教案
课程名称：
网页设计
授课教师：
吴静
章次名称
第一章 网页与网站基础
授课学时
总学时：
6
课堂讲授：
4
试验：
上机：
2
教
学
目
的
通过本章的学习，学生应
●WWW、网页与网站的关系；
●静态网页、动态网页和动态服务器网页；
●用HTML编写静态网页的技术；
●网站建设的步骤。
教
学
重
点
重点：
用HTML编写静态网页
难点：
静态网页、动态网页和动态服务器网页之间的区别
教
学
方
法
在采用的教学手段中，打（√  ）
课程讲授
√
使用教模
挂图
参观
现代化手段
幻灯机
投影仪
√
电视录象
电影
CAI情况
软件名称
自制
上机学时
教
学
内
容
asp网页文件的格式1、WWW简介
●因特网实现信息共享的主要途径是WWW服务。
●WWW是World Wide Web的缩写，即世界范围内的网络的意思，也叫万维网，有时简称为Web。
●WWW服务的信息资源以Web网页的形式组织在一起，Web网页存放在WWW服务器里。因特网普通用户在浏览器中输入不同的WWW服务器地址就能看到不同的Web网页。
●Web网页中通过一种“链接”技术，可以实现Web网页之间的连接与跳转。
2、网页与网站的关系
●Web网页，简称为网页，一般是用HTML语言和其它Script语言编写而成的程序文件。HTML是HyperText Markup Language的缩写，即超文本标记语言；Script语言是嵌入式脚本语言，如JavaScript、VBScript、JSScript等。
●除文本以外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，然后才能嵌入到网页文件中。
●一个WWW服务器里常常有许多网页和相关文件，为便于分类查、组织和管理，常将众多的网页及相关文件存放到一个主目录（也叫根目录）下，或者分别存放在主目录下面的不同子目录里。然后将这些网页以链接的形式组织起来，并确定一个主网页（主网页存放在根目录下），就形成了一个网站。
●因特网用户访问某网站时，首先打开的就是网站的主网页（简称为主页）。通过链接，用户可以方便地从主网页到达各分网页，也可以从分网页很容易地回到主网页。
3、静态网页、动态网页和动态服务器网页
●Web网页有很多种，如HTML网页、DHTML网页、ASP网页、JSP网页、PHP网页等。
●静态网页指的是HTML网页，即用HTML语言编写的网页，它是所有其他网页技术的基础。
●网页中所有的对象，包括文字、图片、超链接、Flash动画、表格、列表等都需要通过HTML才能展现出来。
●动态网页主要指的是DHTML网页，它是通过脚本语言(包括JavaScript、VBScript和JScript)、层叠样式表（CSS）及文档对象模型（DOM）的综合使用，能让网页中的对象产生各种动态变化，例如鼠标移上后弹出快捷菜单、随滚动条移动的广告图片等。
●动态服务器网页是在WWW服务器端动态生成网页的技术，ASP、JSP、PHP等都属于动态服务器网页技术，本课程主要学习ASP技术。
●动态服务器网页一般都需要通过访问数据库（或文本类文件）来实现网页的生成，系统中有一台单独的数据库服务器，也可以将WWW服务器与数据库服务器合二为一。
4、用HTML编写静态网页
●HTML简介
HTML是HyperText Markup Language的缩写，中文意义是超文本标记语言。用HTML语言编写的网页是静态网页。HTML是网页的基本语言，也是其他网页技术的基础。
●HTML静态网页基本结构
一个HTML网页文件总是从<html>标记开始，以</html>标记结束；网页的标题（浏览网页时，显示在浏览器的标题栏）总是在<title>和</title>之间定义；网页主体内容则在<body>和</body>之间描述。
●网页内的文字格式
⏹标题字体的定义<hn align="#">……</hn>
⏹文本文字的定义
<font face="fontname" size=n color=rrggbb align="#">…</font>
⏹加粗、倾斜与下划线的定义
<b>……</b>        <!--加粗文字-->
<i>……</i>          <!--文字倾斜-->
<u>……</u>        <!--加下划线-->
●分段、换行与预格式
⏹分段标记<p align="#">……</p>
⏹换行标记<br>
⏹预格式标记<pre>……</pre>
●媒体元素的插入
⏹图像的插入
<img src="path&filename" width=n1 height=n2 align="#"></img>
⏹其他媒体元素的插入
< embed src="……" width=n1 height=n2 align=#></embed>
●超链接的使用
⏹网页文件的链接<a href="URL">……</a>
⏹锚点的定义与页内链接
<a name="yyyy"></a>

<a href="#yyyy">……</a>
●表格的设计
⏹表格标记
<table border=n1 cellspacing=n2 cellpadding=n3 bgcolor=rrggbb width=n4 height=n5>…</table>
⏹表题标记<caption>…..</caption>
⏹表行标记<tr align=#1 valign=#2 bgcolor=rrggbb>……</tr>
⏹单元格标记
<th align=#1 valign=#2 bgcolor=rrggbb>……</th>
<td align=#1 valign=#2 bgcolor=rrggbb>……</td>
●网页属性的设置
<body bgcolor=rrggbb background="path&filename" text=rrggbb link=rrggbb alink=rrggbb vlink=rrggbb >……</body>
●HTML标记分类
5、网站的建设步骤
●网站的规划与设计
●站点的具体建设
●网站的发布
●网站的管理与维护
学
生
作
业
P18【实验一】用HTML语言制作含多个静态网页的个人网站
教
书
育
人
方
式
讲授
备
注

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。