1、第六章 静态网页制作,第六章 静态网页制作,6.1 网页制作概述 6.2 HTML 6.2.1 HTML的基本语法 6.2.2 页面布局与文字标记 6.2.3 多媒体 6.2.4 列表 6.2.5 表格 6.2.6 超级链接标记 6.2.7 表单标记,6.1 网页制作概述,一般而言，一个电子商务网站中的web资源总是包括静态网页和动态网页两种。 静态网页：是一个个.html文件，内容相对稳定，不需要经常修改，文件比较小，适合在网上传输，执行效率很高；如公司介绍、员工信息、销售网络、售后服务信息等是一些相对固定不变的信息。,静态页面的处理流程 浏览器发出对静态页面的请求； Web服务器寻找该页面
2、； Web服务器将该页面返回给浏览器。,动态网页：由数据库和相应的应用程序构成，包含需要频繁更新的数据。由于其页面中包含的内容是来自数据库的，因此，可根据用户的不同选择返回不同的页面。 如有关于产品的信息、网上销售的信息以及其他服务（如技术支持、公司新闻动态、论坛系统），特别是网站的管理系统，一般而言都是采用动态页面的形式。,简单动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码，生成结果； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。,复杂动态页面处理流程 浏览器发出对动态页面的请求； We
3、b服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码； 遇外部资源访问代码，应用服务器发送资源访问命令给资源服务器；,资源服务器执行资源访问命令，返回结果数据集； 应用服务器执行余下的代码，插入数据到结果页面； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。,静态网页的制作,制作静态网页的第一步就是选定一种网页制作软件（或工具）。从原理上来讲，用任何一种文本编辑器都可以制作静态网页，但“所见即所得”的可视化开发工具无疑是最方便的。,动态网页的制作,一般而言，动态网页的制作分为两种：网页表现形式的动态制作和网页数据内容的动态制作。 网页表现形式的动态
4、制作 Script（脚本）语言； Java Applets; 层叠样式表（CSS）； 虚拟现实建模语言（VRML）。,网页数据内容的动态制作 交互式动态网页中网页数据内容的动态制作一般是和数据库系统联系在一起，通过特定的编程语言和外部应用程序来访问企业信息系统已经存在于数据库中的信息。,交互式动态网页的制作主要包括两大步骤 数据库设计阶段此阶段主要工作是根据前面确定的网站信息结构图进行数据库的逻辑设计、物理设计，并将具体的数据录入到数据库管理系统中去。,程序设计阶段,Web数据库接口技术的选择； 编程语言的选择； 应用程序的编写。,6.2 HTML,HTML(超文本标记语言)是制作网页的基础。
5、HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。 一个HTML文件中包含了所有将显示在网页上的文字信息。其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。,6.2.1 HTML的基本语法,HTML是Hypertext Marked Language的英文缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言(就是制作网页的最基本的语言)。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。所谓
6、超文本，是因为它可以加入图片、声音、动画和影视等内容。,HTML的基本结构, 网页头部信息网页主体正文部分,头部描述浏览器所需的信息,主体包含所要说明的具体内容,HTML的标记,HTML的任何标记都由“”和“”符号围起来，称为标记，是用来分割标记文本的元素，从而形成文本的布局、文字的格式及五彩缤纷的画面。在起始标记的标记名前加上符号“/”便是其终止标记，如。,单标记,某些标记称为“单标记”，因为它只需单独使用就能完整的表达意思。 单标记语法如下：最常用的单标记是，它表示换行。,双标记,它由“始标记”和“尾标记”两部分构成，必须成对使用。其中，始标记告诉Web浏览器从此处开始执行该标记所表达的功
7、能；尾标记告诉Web浏览器在这里结束该功能。 双标记语法如下：内容其中“内容”部分就是要被这对标记施加作用的部分。,标记属性,许多单标记和双标记的始标记内可以包含一些属性。其语法如下：各属性之间无先后次序，属性也可省略。如单标记表示在文档当前位置画一条线。示例：最基本的超文本文档, 和双标记,标记说明该文件是用HTML来描述的，它是文件的开头，而则表示该文件的结尾。, 和双标记,这部分内容分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记是，它用于定义网页的标题，它的内容显示在网页窗口的标题栏中。, 和双标记
8、,网页中显示的实际内容均包含在这个正文标记之间。正文标记中提供以下属性来改变文本的颜色及页面背景： bgcolor颜色，用于定义网页的背景颜色。 backgrondurl，用于定义网页背景图案的图像文件。 text“”，用于定义正文字符的颜色，默认为黑色。,link颜色，用于定义网页中超级链接字符的颜色，默认为蓝色。 vlink颜色，用于定义网页中已被访问过的超链接字符的颜色，默认为紫红色。 alink颜色，用于定义被鼠标选中，但未使用时超链接的颜色，默认为红色。 示例：标记,HTML文件的创建,HTML的格式非常简单，是由文字和标记组合而成的纯文本文件，几乎任何的文字编辑器，如Windows
9、中的记事本、写字板都可以用来编写HTML文件，只需保存时修改其扩展名即可。,使用记事本创建HTML文件启动Windows XP，打开记事本窗口，即可编写HTML代码。当编辑完HTML文件后，选择菜单中的【文件】【保存】命令，将它存为扩展名为.htm或.html的文件即可。然后就可以在浏览器中浏览网页。,使用所见即所得的网页编辑工具创建HTML文件例如使用Dreamweaver，可打开其代码视图，在代码视图中输入HTML代码。输入代码完成后，可在设计视图中浏览效果。,6.2.2 页面布局与文字标记,文本是网页传播信息的基本载体，在网页中的重要地位可想而知。对于任何一个基本网页来说，文本都是必不可
10、少的，文本的格式化也是非常重要的。,标题,HTML中提供了相应的标题标记。HTML总共提供6个等级的标题，n越小标题字号就越大。字号大 一级标题 二级标题 三级标题 四级标题 五级标题字号小 六级标题示例:标题效果,换行,对于需要换行的地方，应加上标记，有了它浏览器会自动将右边的文字转移至下一行。请注意， 是单标记。示例：没有换行效果换行效果,段落标记,为了使文本排列的整齐和清晰，文字段落之间常用和 来做标记。 是可以省略的，因为下一个的开始就意味着上一个的结束。 标记还有一个属性ALING，它用来指明字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT3种。示例：段落标记效果,水
11、平线段,水平线对组织信息很有用。在页面上可以使用一条或多条水平线以可视方式分隔文本和对象。水平线标记为单标记，它有以下几个属性： Size：水平线的宽度，默认值为； Width：水平线的长，用占屏幕宽度的百分比或像素值来表示；,Align：水平线的对齐方式，有LEFT、RIGHT、CENTER3种。 Noshade：线段无阴影属性，为实心线段。示例：水平线效果,文字的大小设置,文字大小设置的标记是FONT， FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小。也可以在SIZE属性值之前加上“+”、“-”字符，来指定相对于字号初始值的增量或减量。示例：字号大小效果,文字的字体与样式
12、,为了丰富文字的变化，或强调某一部分，HTML提供了如下所示标记,这些标记用于显示文字的样式：粗体斜体加下划线打字机字体大型字体小型字体闪烁效果, 表示强调，一般为斜体表示特别强调，一般为粗体用于引证、举例，一般为斜体FONT标记中还有一个属性Face,用来表示文字的字体示例：文字的字体与样式效果,文字的颜色,文字的颜色可以是一个16进制数。文字颜色通过FONT标记里的color属性来进行设置,颜色设置格式如下：示例：文字的颜色效果,6.2.3 多媒体,在网页中，经常会插入一些多媒体。例如图像、音乐、视频等。,插入图像,插入图像的标记是，它的SCR属性指明了所要链接的图像文件地址，这个图形文件
13、可以是位于本地机器上的图形，也可以是位于远端主机上的图形。ALT属性指出图片的替代文字，在有些情况下，这个属性非常重要。其他还有TITLE（图片的提示文字）、WIDTH（图片的宽度）、HEIGHT（图片的高度）等属性。示例：插入图像效果,播放音乐,浏览器可以播放音乐，标记为，属性主要有以下几个：SCR指明所要播放的音乐文件地址。AUTOSTART表示是否自动播放。LOOP表示是否循环播放。示例： 播放音乐效果,播放视频,用浏览器可以播放的视频格式有MAV格式和AVI格式。与音乐的播放一样，可以使用EMBED标记播放视频。例如：,6.2.4 列表,列表在网页制作当中也是经常用到的，例如列出一些选
14、项以供选择等等。,有序列表,有序列表在显示时使每个表项占一行，并在表项前自动加上顺序编号。有序列表使用双标记，表项使用和，其语法格式如下：表项1表项2 ,其中TYPE1，A，a，I，i，指定编号的类型，1表示序号为阿拉伯字母（默认值），A表示序号为大写字母，a表示序号为小写字母，I表示序号为大写的罗马数字，i表示序号为小写的罗马数字。STARTn，表示序号起始值。VALUEn，用于指定一个新的数字序列起始值，以获得非连续型数字序列。示例：有序列表,无序列表,无序列表使用双标记和标记。 标记的属性项TYPE取值为disk（实心圆）、circle（空心圆）和square（方块），这些圆和方块作为列
15、表项目前的项目符号，有序列表和无序列表本身可以嵌套列表，两种列表也可以相互混合嵌套。示例：混合列表,6.2.5 表格,表格标记对制作网页是很重要的，现在很多网页都使用多重表格。利用表格可以实现各种不同的布局方式，并保证当浏览者改变页面字体大小的时候保持页面布局，还可以任意的进行背景和前景颜色的设置。,表格的基本结构, 表格标题信息 示例:表格的基本结构,双标记和在HTML文件中标示一个表格， 有以下几个常见属性：ALIGN=left,tight,center，指定表格在网页中的对齐方式，默认值为left。BACKGROUND=URL,指定表格背景图片的位置。BGCOLOR=#RRGGBB,指定
16、表格的背景颜色。BORDER=n,指定表格的边框线的粗细，单位为像素，默认值为0表示无边框,CELLPADDING=n,指定表格的单元格边距（指单元格内容和内边框的间距），默认为1个像素。CELLSPACING=n,指定表格的单元格间距（指单元格与单元格之间的距离），默认为2个像素。FRAME=void（默认值无边框）、above（只有顶框）、below （只有底框）、hsides （只有顶框和底框）、vsides（只有左右侧框）、lhs（只有左侧框）、rhs（只有右侧框）、box（包含四个边框），用于控制是否显示边框以及如何显示边框。,HEIGHT=n，用于定义整个表格的高度。WIDTH=n
17、，指定表格的宽度，可以用像素或者百分比表示。,TR标记,TR标记代表HTML表格中的一行，结束标记可省略不写。它有以下属性：ALIGN：代表某一行单元格内容的水平对齐方式（left、center、right）VALIGN：代表某一行单元格内容的垂直对齐方式（top、middle、bottom）BACKGROUND=URL,指定表格该行背景图片的位置。BGCOLOR=#RRGGBB,指定该行的背景颜色。,TD标记,TD标记表示列，每行TR中可以有多个列，每个列用TD表示。TD的属性同TR。除此之外，在标记中可使用以下两个属性来合并行、列：ROWSPAN=2,3,4,，表示单元格跨越的行数（即在纵
18、向上合并）。COLSPAN=2,3,4,，表示单元格跨越的列数（即在水平方向上合并）。示例：跨行跨列的表格,在表格的基本示例中可看到有TH双标记。这个标记是用来表示HTML表格中的表头的。TH标记有以下几个主要属性：COLSPAN：一行跨越多列。ROWSPAN：一列跨越多行。ALIGN：代表水平对齐方式（left、center、right）。VALIGN：代表垂直对齐方式（top、middle、bottom）。,表格的标题,表格标题的位置可由CAPTION标记的ALIGN属性来设置。标题位于表格上方：标题位于表格下方：示例：标题位于表格上方的效果,表格的尺寸设置,一般情况下，表格的总长度和总宽
19、度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列方式：WIDTH和HEIGHT属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素表示，也可以用百分比来表示。 示例：表格的尺寸设置效果,表格的颜色,在表格中，用户既可以对整个表格设置底色，也可以对任何一行、一列使用背景颜色。表格的背景颜色：行的背景颜色：列的背景颜色：示例：表格的颜色效果,6.2.6 超级链接标记,超级链接可以链接到图像、对象或其他文档或文件的文本链接。一个链接的基本格式如下：链接文字标记表示一个链接的开始，表示链接的结束。 属性“HREF”定义了这个链接所指的地方。 通过点击“链接文字”可以到达
20、指定的文件,6.2.7 表单标记,表单在网页中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、填写的表格、提交和重填按钮等内容。用户在填写了所需的资料后，按下“提交”按钮，这样所填资料就会通过专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了反馈和交流。,表单标记,表单标记的主要作用是设置表单的起始位置，并指定处理表单数据程序的URL地址。其基本语法结构如下：,其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序。method：指定数据传送到服务器的方式。有两种主要方式，当meth
21、odget时，将输入数据加在action指定的地址后面传送到服务器；当methodpost时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。,name：用于设定表单的名称。onrst和onsubmit是主要针对reset按钮和submit按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。target：指定输入数据结果显示在哪个窗口，这需要与标记配合使用。,文本域,每个文本域之所以会有不同的类型，就在于文本域的类型设置不同。例如：【密码】类型的文本域文本域的参数设置如下：name“名称”：设置文本框的名称。size“数值”：设置文本框
22、显示的宽度。value“预设内容”：设置文本框的预设内容。,align“对齐方式”：设置文本框的对齐方式，其值有top（向上对齐）、middle （中间对齐）、bottom （向下对齐）、right （向右对齐）、left （向左对齐）、texttop （向文字顶部对齐）、baseline （向文字底部对齐）、absmiddle （绝对居中）、absbottom（绝对置下）等。maxlength“数值”：设置文本框中可设置输入的最大长度。,单选按钮,单选按钮通常是好几个选项一起列出来供使用者选择，一次只能从中选一个，故成为单选按钮。示例：单选按钮单选按钮的参数设置如下：name“名称”：设置单选按钮的名称。value“内容”：设置单选按钮的内容、值或是意义。,align“对齐方式”：设置对齐方式，其值有top（向上对齐）、middle （中间对齐）、bottom （向下对齐）、right （向右对齐）、left （向左对齐）、texttop （向文字顶部对齐）、baseline （向文字底部对齐）、absmiddle （绝对居中）、absbottom（绝对置下）等。checked：设置为预设选取值。,复选框,
