参考Web页面制作基础.ppt

第2章 Web页面制作基础,本章要点： HTML网页格式 文字及段落标记 超级链接 加入多媒体 制作表格 制作表单 CSS,2.1 一个简单的HTML程序页面,例2-1（CH1-1.htm）： ASP动态网页设计 一个简单HTML程序页面 这个程序页面包含了基本的HTML程序结构。 ,图2-1 一个简单的HTML页面,2.2 HTML网页格式,HTML语言是一种页面描述性的语言，它使用一些约定的符号对各种文件进行标注，标注过的文件就是一个个的HTML网页。每个网页一般都包括标题、段落、列表、表格、图像等基本成分。 2.2.1 HTML标记的语法 HTML的标记字符均取自ISO 646:1983字符集IRV，数字字符则取自SGML中规定的文档字符集Lation-1（ISO-8859-1）。 1字符实体 除了通常的ASCII字符外，引入字符实体就可以在HTML文档中使用拉丁字母、希腊字母和某些特殊符号等非ASCII字符。字符实体的引用格式为“”都可以代表字符“”。,2标记 在HTML语言中，所有的标记都必须用尖括号括起来。大部分标记都是成对出现的，包括开始标记和结束标记，开始标记和相应的结束标记定义了该标记所影响的范围；结束标记与开始标记名称相同，但结束标记总是以一个斜线符号开头的。也有一些标记只要求单一开始标记就可以了。HTML标记不区分大小写，但通常约定使用大写字母来表示，以利于HTML文档的维护。字符实体名是区分大小写的。 3标记属性 标记一般都有自己的属性，通过属性可以对其作用的内容进行更多的控制，属性紧跟在开始标记的后面，并且都放置在开始标记的尖括号内。一般由属性名、等号和属性值三部分组成。例如，中的background是标记的背景属性，属性值back1.gif是一幅背景动画，需要注意的是，属性值必须用双引号或者单引号标注。 4注释 HTML中的注释以“”结束，需要注释的内容放置于其中。对某部分文档进行必要的解释，便于阅读源代码，注释部分的内容并不会被Web浏览器显示出来。,2.2.2 HTML文件基本架构,HTML文档的基本结构可以表示如下： 标题文字 文本、图像、动画、HTML指令等 与标记是用来说明该文档是由HTML标记语言描述的，文档中的所有其他标记和内容都包括在这对标记之中。,2.2.3 文件主体标记,1标记 标记是全部文档内容的容器，是处在最外层的标记，说明这个文件的内容是用HTML语言实现的。是开始标记，是结束标记，它们分别是网页的第一个标记和最后一个标记，其他所有HTML代码都位于这两个标记之间。标记告诉浏览器或其他程序，这是一个Web文档，应该按照HTML语言规则对文内的标记进行解释。.标记是可选的，但最好不要省略这两个标记，以保持Web文档结构的完整性。 2标记 首部标记用于提供与Web页有关的各种信息。在首部标记中，可以使用和标记来指定网页的标题，网页的标题显示在浏览器窗口的标题栏中，一个网页仅能有一个标题。还可以在首部标记中使用和标记来定义CSS样式表，使用和标记来插入脚本等。,3标记 该标记用来标注HTML文档的正文部分，正文标记内包含了文档的内容、文字、图像、动画、超链接以及其他HTML元素，标记属性及功能见表2-1。 在上述属性中，各个颜色属性的值有两种表示方法：使用颜色名称来指定，例如红色、绿色和蓝色分别用red、green和blue表示；使用十六进制格式数值#RRGGBB来表示，其中的RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据，数值越大亮度越高，例如，#000000表示黑色，#FFFFFF表示白色，#FF0000表示红色。 例如，就是一个浅黑色背景、浅灰色文本、白色超链接效果的页面。,表2-1 标记的属性及说明,2.3 文字及段落标记,2.3.1 文字标记 1标题标记 标题标记用于设置文档正文的标题和副标题，其中n的取值是16，定义了6个级别的子标题，.标记表示字体最大的标题，.标记表示字体最小的标题。 2标记 标记，设置缺省字体的大小，也作为字体标记设置相对字体大小的基准值。其一般格式为： ,标记属性及功能见表2-2。,表2-2 标记属性及说明,3字体标记 用来设置文本的字符格式，为此可以将文本置于和标记之间，并通过其face、size和color属性来设置文本的字体、字号和颜色。face属性指定一种字体，或者给出一个字体列表，各种字体名称用逗号来分隔，可以按照作者的喜好程度来排列。size属性指定字体的大小（即字号），其取值可以从1到7，默认值为3。size属性值越大，显示的字号就越大。相对于基本字体（BASEFONT）的大小，也可使用“”或“”符号来指定相对字号。例如： 超文本标记语言 ASP动态网页设计 color属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。例如： 超文本标记语言 ASP动态网页设计,4字符样式标记 字符样式标记均无属性，可以为某些字符设置特殊格式，例如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记及说明见表2-3。,表2-3 字符样式的标记,2.3.2 段落标记,分段标记定义了一个段落，可将文本内容分为几个小的段落。浏览器遇到该标记时，将先插入一个空行，然后在下一行显示其后的文本，也就是说段落与段落之间有一个空行。若同时使用和，则将段落包围起来，表示一个分段的块；若省略结束标记，可以将开始标记放在段尾。 在HTML文档中无须在意每一行的长度，浏览器会根据显示窗口的宽度自动换行的。 分段标记的常用属性是align=“left“或“center“或“right“，用于设置段落的水平对齐方式。其中，left为默认值，表示段落文本在Web页面中按左边界对齐；center表示居中对齐；right表示按右边界对齐。需要注意的是，有的浏览器不支持右对齐。,2.3.3 换行标记,换行标记强行加入一个换行动作，使后续内容在下一行显示。它与标记不同，仅仅是换行，并不插入新空行。 换行标记的属性clear=“left“或“all“或“right“或“none“，为可选属性，该属性通常与文本中所嵌入的内联图像标记一起使用。其中，left表示换行标记后的文本换行至浏览器窗口左边界不被图像占用的地方显示；all表示换行标记后的文本在浏览器窗口的左右边界均不被图像占用的地方显示；right表示换行标记后的文本换行至浏览器窗口的右边界不被图像占用的地方显示；none为默认值，表示仅仅换行而已。,2.3.4 格式化列表,1创建有序列表 有序列表是在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标记和列表项标记来创建，语法格式如下： 列表项1 列表项2 列表项n 标记有两个常用属性：start和type。start属性用于设置各列表项的起始值，取正整数值，默认值为1；type属性用于设置各列表项的序号样式，其取值有5类。 （1）1：用阿拉伯数字1、2、3等表示各列表项序号，此为默认值。 （2）A：用大写字母A、B、C等表示各列表项序号。 （3）a：用小写字母a、b、c等表示各列表项序号。 （4）I：用大写罗马数字I、II、III、IV等表示各列表项序号。 （5）i：用小写罗马数字i、ii、iii、iv等表示各列表项序号。 当位于和标记之间时，标记也有两个常用属性：type和value。type属性指定各列表项的序号样式，其取值与的type属性相同；value属性指定一个列表项序号的新的起始值，以获得非连续性的数字序列。,2创建无序列表 序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记和列表项标记来创建，其语法格式如下： 列表项1 列表项2 列表项n 标记的value属性用于指定列表项前面显示的项目符号，其取值可以是disc、circle或square。其中，disc为默认值，用实心圆作为项目符号；circle用空心圆作为项目符号；square用方块作为项目符号。 需要注意的是，在IE浏览器中，type属性的值是区分大小写的。,2.4 加入超级链接,超链接一般可分为外部链接(External Link)与内部链接(Internal Link)。单击外部链接时，浏览器窗口将显示其他文档的内容。单击内部链接时，访问者将看到本网页的其他部分内容。另外，HTML还可以创建指向邮件地址的链接，单击该链接之后便可通过电子邮件软件给指定的地址发送邮件。,2.4.1 超级链接的概念,超级链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。,2.4.2 绝对地址与相对地址,如果要链接的文件位于不同的目录，在链接时就必须指明文件的地址，文件地址分为相对地址和绝对地址。相对地址是以当前文件所在的地址和目录为起点的进行文件查找的。绝对地址是从根目录开始的地址进行文件查找的，绝对路径中的盘符后用“|”替代“：”。表2-4列出了相对地址和绝对地址的写法与含义。,表2-4 相对地址和绝对地址的写法及含义,2.4.3 内部链接与外部链接,1内部链接 所谓内部链接，就是网页内部不同位置之间的链接。在内容较多的网页内建立内部链接时，它的链接目标不是其他文档，而是本网页内的其他位置。在使用内部链接之前，须要在网页内确定目标地点的位置，并使用标记的Name属性来确定目标地点位置名称。 定义目标地点的一般格式为： 希望看到的目的内容 目标地点位置名称使用简短、有意义的字符串代替。为了使Web浏览器易于区分“目标地点位置名称”与文档内容，在引用时，“目标地点位置名称”前面需要添加符号“#”。一般格式为： 希望跳转到的目标起始位置内容 相关的提示信息 2外部链接 外部链接就是本网页和其他类型的网络资源之间的链接。一个超链接通常由以下三部分构成：首先是超链接标记，表示这是一个链接；然后是其属性href及其值，这就定义了超链接所指的目标；最后是在超链接中显示在网页上作为链接的提示文字。超链接的一般格式为：提示文字 单击外部链接时，需要链接的目标文档可能保存在其他站点内，也可能保存在本机站点内，为了便于区分这两种情况，可将指向其他站点文档的链接称为URL链接，而将指向同一站点内文档的链接称为本地链接。,3邮件链接 邮件链接可使访问者在浏览页面时，只须单击电子邮件链接就能够打开默认的邮件编辑软件，向指定的地址发送邮件。 电子邮件链接的应用格式为： 提示文本 其中，“E-mail 地址”是用户在Internet上的电子邮件地址，而“提示文本”是访问者单击的文本。 访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件。例如，使用Office系列的Outlook Express作为默认的邮件编辑器时，单击电子邮件链接时将打开Outlook Express窗口，“收件人”一栏将出现链接设定的“E-mail 地址”。,2.5 加入多媒体,2.5.1 插入图片 1src连接源 src连接源，用于指出一个图像文件名，或给出一个图像的文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。 （1）“alt=text”用于设置图像的替换文本。只需给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。当浏览器正常显示出图像后，把鼠标移到图像上，稍作停留，也会紧跟着鼠标显示出这段替换文本。 （2）height属性用来设置图像在网页中的高度，单位是像素或百分数。 （3）width属性用来设置图像在网页中的宽度，单位是像素或百分数。 2border属性 标记的border属性可以给图像添加边框效果，该属性的取值为正整数，单位为像素，用来定义图像边框的宽度。若不设置border属性或取值为0时，图像没有边框。 3标记的使用 如果希望将插入的图像在页面上与文本同占一行，则可以将IMG标记置于和标记之间。,4align属性 当在页面中进行图文混排时，有时一个图像会占据一行以上的空间，此时，可以使用标记的align属性来设置图像与文本在垂直方向的对齐方式，此时align属性的取值与含义见表2-5。 5hspace和vspace属性 标记的hspace和vspace属性可以设置图像与文本之间的空白距离，前者指定图像的左、右边距，后者指定图像的上、下边距，两者的单位均为像素。,表2-5 align属性的取值与含义,2.5.2 加入音乐,在HTML语言中，可以使用标记在网页中添加背景音乐，该标记只允许放置在部分。通过标记的下列属性可以对音乐的播放进行控制。 （1）balance：整数，指定如何将声音分成左声道和右声道，取值为-10 000+10 000，默认值为0。 （2）loop：整数，指定声音播放的次数。如果设置为0，则播放一次；如果设置为大于0的整数，则播放指定的次数；如果设置为-1，则声音反复播放，直到页面关闭。 （3）src：指定要播放的声音文件的URL。常用的声音文件类型是波形文件（.wav）、MIDI文件（.mid）、AIFF文件（.aif）、AU文件（.au）以及MP3文件（*.mp3）等。 （4）volume：整数，指定音量高低，其取值为-10 0000，默认值为0。 若要在正文中加入音乐，只需在需要的地方引入一个超级链接即可，例如请听音乐。不过，客户机上需要安装必要的媒体播放软件。,2.5.3 加入视频,标记不仅用于在网页中插入图像，也可以用于播放Video for Windows的多媒体文件（.avi）。若要在网页中播放多媒体文件，应在标记中设置一些属性，常见的属性及其说明见表2-6。 需要说明的是，在标记中src和dynsrc属性可以同时使用，但dynsrc优先于src。换言之，如果计算机具有多媒体功能，并且所指定的多媒体文件存在，则播放该多媒体文件；如果计算机没有多媒体功能，或者所指定的多媒体文件不存在，则显示由SRC属性指定的图像文件。,表2-6 标记加入视频的一些属性及说明,2.6 制作表格,2.6.1 建立表格 1.标记 标记用来标记一个表格，其属性及说明见表2-7。 2.标记 标记，紧跟标记之后，不可缺少结束标记，用来指明表格的名称，标题可有可无，其align属性取值可以是top、bottom、left、right或center，该属性指定标题出现在表格的上、下、左、右或居中位置，默认为上方居中。,表2-7 标记的属性及说明,3.标记 标记，在HTML中，表格按行来定义，每个行内的各个单元格由标记封装，列数目是根据每行中的单元格数目自动计算，在定义表格时，应保证每行中单元格的数目能够使表格的各列对齐。该标记的属性及说明见表2-8。 4.与标记 标记定义表格的表头，表头内容一般以粗体居中显示在表格单元格中。标记定义表格的数据单元格，内容默认为左对齐。这两个标记内部几乎可以包含所有的标记在内，也可以嵌套表格。该标记的属性及说明见表2-9。,表2-8 标记的属性及说明,表2-9 标记的属性及说明,2.6.2 设置尺寸,标记的两个属性：width=n或p%和height=n或p%。分别指定表格的宽度和高度，它的取值可以是以像素点为单位的绝对宽度，也可以是百分数比，表示表格占浏览器窗口宽度的百分比（也即相对宽度），例如，要使表格占浏览器窗口宽度的80%，可以写出如下代码： 一般来说，表格可以根据其内容的多少自动调整宽度和高度，因此，一般不用设置这些属性。 2.6.3 设置颜色与背景 创建表格时，可以通过标记的一些属性来设置表格的颜色和背景。常见的属性及说明见表2-10。,表2-10 标记的属性及说明,2.7 制作表单,2.7.1 表单的概念 表单是用来收集站点访问者信息的域集。表单从用户那里收集信息，然后将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各种控件，例如文本框、列表框、复选框和单选按钮等。 在HTML语言中，表单由标记定义，其中的各种输入标记由、等三个标记定义。用户可以在一个Web页面中创建多个表单，但是表单本身不能含有子表单，也就是说表单不允许嵌套。表单常用的属性有5种。 （1）name属性：用来指定表单的名称，以标识表单。命名表单后，可以使用脚本语言（如VBScript或JavaScript）来引用或控制该表单。 （2）method属性：指定将表单数据传输到服务器的方法，其取值可以是post，在HTTP请求中嵌入表单数据，表单数据的各个字段之间以字符“&”分隔；也可以是get，将表单数据附加到请求该页的URL中，也是默认取值，适用于表单数据较少的情况。 （3）action属性：用来指定将要接收表单数据的服务器端程序或动态网页的网址，以便对提交来的表单数据进行处理。 （4）enctype属性：该属性是可选的，用来设置浏览器向服务器发送的表单数据的类型。其默认值为application/x-www-form-urlencoded，一般使用默认值就可以了。当action属性的取值为mailto URL时，enctype属性的取值也可以是text/plain，这样可使表单的内容以普通文本的形式发送给接受方。 （5）target属性：用来指定一个表单反馈回来信息的目标窗口。,2.7.2 表单的一些元素,1文本框 如果要获取站点访问者提供的一行信息，可以在表单中添加单行文本框。为此，可以在.之间添加一个标记，并将其type属性指定为“text”。创建单行文本框的基本语法格式为： 其中，name属性指定文本框的名称，通过它可以在脚本中引用该文本框控件；value属性指定文本框的初始值；size属性指定文本框的宽度；maxlength属性指定允许在文本框内输入的最大字符数。当提交表单时，该文本框的名称和内容都会包含在表单结果中。 定义如下的文本框，类型为text，域名为textfield，宽度为10个字符宽，最多容纳20个字符，初始值为“xxxx”。 2密码框 如果要求站点访问者输入密码后才能进入站点时，则应在表单中添加密码域。密码域其实只是一个单行的文本框。当站点访问者在这个域中输入数据时，大部分的Web浏览器都会以“*”或“”符号显示密码以示保密。 3复选框 如果想让站点访问者去选择一个或多个选项或都不选取时，可以在表单中添加复选框。其基本语法格式如下： 选项文本 其中，name属性指定复选框的名称；value属性指定提交时的值；checked属性是可选的，若使用该属性，则当第一次打开表单时该复选框处于选中状态。复选框在多数情况下是成组使用的，即具有相同的name属性。,4单选按钮 如果想让站点访问者从一组选项中选择其中之一，可以在表单中添加单选按钮。在一组单选按钮中，一次只能选择一个。基本语法格式如下： 选项文本 其中，name属性指定单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项；value属性指定提交时的值；checked属性是可选的，若使用该属性，则当第一次打开表单时该单选按钮处于选中状态。 5提交按钮、复位按钮和自定义按钮 使用标记可以在表单中添加三种类型的按钮：即提交按钮、复位按钮和自定义按钮。创建按钮的基本语法格式为： 其中，name属性用于指定按钮的名称；value属性用于指定显示在按钮上的提示文本；type属性用于指定按钮的类型。,6图像化按钮 在表单中可以添加图片作为提交按钮使用。在填写表单后，站点访问者单击图片以提交表单，那么表单上的数据，包括图片域名称，就会被提交到表单处理程序。图形化的提交按钮使用标记来创建，方法是将该标记的type属性设置为“image”，语法格式为： 其中，type属性表示以一个图像作为提交按钮，所用图像的URL地址由src属性给出，name或value属性提供图像的替换文本。 7文件域 由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件，从而为表单附加上一个或多个需要传送到Web服务器上去的文件。如果想让站点访问者通过表单来选择文件，可以在表单中添加文件域。 在和之间添加标记，并将其type属性设置为“file”，即可创建文件域，其语法格式为： 其中，name属性指定文件域的名称，value属性给出初始文件名，size属性指定文件名输入框的宽度。,8选项菜单 若要创建选项菜单，应在和之间添加标记，并使用标记将每个选项列出来，以便用户从这个列表中选择一个或多个选项。其基本语法格式如下： 选项1 选项2 9.滚动文本框 若要接受站点访问者输入多于一行的文本，请在表单中添加滚动文本框。在和之间添加标记，即可创建滚动文本框，其基本语法格式如下： .,2.8 CSS的应用,2.8.1 CSS简介 CSS是Cascading Style Sheets的缩写，中文翻译为“层叠样式表”，简称“样式表”，它是一种制作网页的新技术。 网页设计最初是用HTML标记来定义页面文档及格式，例如标题、段落、表格、链接等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C（The World Wide Web Consortium）颁布HTML 4标准的同时也公布了有关样式表的第一个标准CSS1，自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML（Dynamic HTML）分为三个部分来实现：脚本语言（包括JavaScript、VBScript等）、支持动态效果的浏览器（包括IE、Netscape Navigator等）和CSS样式表。可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。,2.8.2 CSS的定义,1CSS的构成 CSS由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。其基本格式如下： selectorproperty: value 即 选择符属性：值 选择符是可以是多种形式，一般是要定义样式的HTML标记，例如、可以通过此方法定义它的属性和值，属性和值要用冒号隔开，例如： BODYcolor: black 选择符BODY是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合： Pfont-family: “sans serif“ 表示定义段落字体为sans serif。 如果需要对一个选择符指定多个属性时，就要使用分号将所有的属性和值分开： Ptext-align: center; color: red 表示段落居中排列，并且段落中的文字为红色。 为使定义的样式表便于阅读，经常采用分行的书写格式，例如： P text-align: center; color: black; font-family: arial 以上定义的CSS表示段落排列居中，段落中文字为黑色，字体是Arial。,2选择符组 可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义： H1,H2,H3,H4,H5,H6color: green 表示这个组里包括所有的标题元素，每个标题元素的文字都为绿色。 又如： P, TABLEfont-size: 9pt 表示段落和表格里的文字尺寸为9号字，效果完全等效于： Pfont-size: 9pt TABLEfont-size: 9pt 3类选择符 4ID选择符 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 5包含选择符 6样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。,7注释 可以在CSS中插入注释来说明代码的意思，注释有利于以后编辑和更改代码时理解代码的含义。8伪类 伪类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同