《网页设计》教案教案.docVIP

网页设计教案 吴静  教案 课程名称： 网页设计 授课教师： 吴静 章次名称 第一章 网页与网站基础 授课学时 总学时： 6 课堂讲授： 4 试验： 上机： 2 教 学 目 的 教 学 重 点 难点： 静态网页、动态网页和动态服务器网页之间的区别 教 学 方 法在采用的教学手段中，打（√ ） 课程讲授 √ 使用教模 挂图 参观 幻灯机 投影仪 √ 电视录象 电影 CAI情况 软件名称 自制 上机学时 教 学 内 容 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=pathfilename width=n1 height=n2 align=#/img 其他媒体元素的插入 embed src=…… width=n1 height=n2 align=#/embed 超链接的使用 网页文件的链接a href=URL……/a 锚点的定义与页内链接a name=yyyy/a!-- 定义锚点yyyy，这时/a可省略 --a href=#yyyy……/a!-- 网页内跳转链接，链接到锚点yyyy处 -- 表格的设计 表格标记 table border=n1 cellspacing=n2 cellpadding=n3 b