电子商务网页设计与制作
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

任务1 制作HTML基本页面

1．任务引导

本任务目标是用文本工具手工编写一个简单的HTML网页，来初步了解HTML的基本结构，效果如图2-1所示。

图2-1 网店推广动态图像制作效果

2．任务实施

（1）打开文本工具

执行“开始”→“程序”→“附件”→“记事本”命令，打开一个记事本；或者通过单击鼠标右键，在弹出的快捷菜单中选择“新建”选项，在列表中再选择“文本文档”，新建一个文本文档并通过鼠标双击将其打开。

（2）输入HTML源代码

在文本工具窗口中输入以下HTML源代码：

<HTML>
<HEAD>
   <TITLE>HTML 语言教程：目录</TITLE>
   <META http-equiv="Content-Type" content="text/html;charset=GB2312">
</HEAD>
<BODY text="#FFFFFF" bgcolor="#000000" topmargin="15">
<H1 align=center>HTML 语言教程：目录</H1>
<P><HR></P>
<TABLE width="600" border="2" align="center">
   <TR>
     <TH width="25%" rowspan="4">
<a href="html\index.html"><H3>详细目录</H3></a>
</TH>
     <TH colspan="5">标记语法（一）</TH>
   </TR>
   <TR>
     <TD width="15%"> 页面</TD>
     <TD width="15%">字体</TD>
     <TD width="15%">图像</TD>
     <TD width="15%">表格</TD>
     <TD width="15%">超链接</TD>
   </TR>
   <TR>
     <TH colspan="5">标记语法（二）</TH>
   </TR>
   <TR>
     <TD>列表</TD>
     <TD>移动</TD>
     <TD>插入多媒体</TD>
     <TD>框架</TD>
     <TD>表单</TD>
   </TR>
</TABLE>
</BODY>
</HTML>

（3）保存为网页文件

执行“文件”→“另存为”命令，在弹出的对话框中选择存放位置，在“文件名”后的文本框中输入“1.html”，然后单击“保存”按钮，完成保存为网页文件的操作。

（4）打开网页

打开保存网页文件所在的文件夹，双击“1.html”文件，显示效果如图2-2所示。

图2-2 1.html显示效果

（5）查看网页源代码

通过浏览器打开的网页，可以通过执行“查看”→“源文件”命令，打开该页面的网页源代码，如图2-3所示。

图2-3 1.html网页源代码

3．任务分析

（1）HTML

HTML即超文本标记语言，它是一种描述文档结构的标记语言，而非程序设计语言。HTML是构成网页文档的最主要语言，已经成为Internet上描述网页内容和外观的标准，其他构成网页的语言或脚本也是建立在HTML之上的，或者是嵌入在HTML中使用的。

HTML也是文本文件，所以可以用纯文本编辑器来进行编辑（如Windows的记事本、写字板等）。通过HTML将所需要表达的信息按某种规则写成HTML文件，通过浏览器来识别，并将这些HTML翻译成所见到的网页。HTML文件一般以.htm或.html为扩展名。

（2）HTML语法

HTML是由标记、标记属性和内容注释构成的，一起用来描述需要表现在网页上的各种元素。

标记，用于描述功能的符号。通过相应的英文名称或者缩写字母嵌套在“<”与“>”中构成，如<HTML>、<TABLE>等。标记一般分为起始标记和结束标记，其中起始标记由<标记名>组成，如<HTML>；结束标记由</标记名>组成，如</HTML>。这些有着起始标记和结束标记的标记被称为双标记。除此之外，还有一些标记，只有起始标记，没有结束标记，被称为单标记。这类标记并不常见，如<BR>、<HR>等。

属性，来进一步描述该标记。属性放在起始标记中，一个标记可以有多个属性项，各属性项次序不影响属性的效果，各属性之间须用空格分隔，空格数目不影响属性的效果。带属性的起始标记一般可写为：<标记名称 属性名称=对应属性值 ……>。对应属性值可以用双引号包含，也可以不加。对标记的属性设置不用每一个均设置值，每一个属性都有对应的默认属性值，若在标记属性中不设置新的值，则该属性值为默认值。

内容注释，可对文档起标记注释的作用，可放在文档中的任意位置，使用<!-- …… -->标记。标记内的部分就是注释内容，在浏览器中不显示。

在HTML文档中，HTML标记和属性不区分大小写；HTML标记可以嵌套但不能交叉；HTML文档可以在一行上书写多个标记，也可以把一个标记包含的属性分为多行书写，但一个完整的单词不能分成两行写。

在HTML文档中，换行、分段都有对应的HTML标记。遇到需要使用占位空格时，则需要在文档中输入转义符号“&nbsp”。若需要显示多个空格，则使用多个“&nbsp”。

（3）HTML基本结构

HTML文档以<HTML>标签开始，以</HTML>结束，其中可分为头部<HEAD>和主体<BODY>两部分。所有HTML文档内容则分别嵌套在头部和主体部分的标记对之间。一个最基本的HTML网页代码如下：

<HTML>
  <HEAD>
    <!-- 网页头部内容 -->
  </HEAD>
  <BODY>
    <!-- 网页主体内容 -->
  </BODY>
  </HTML>

头部标记<HEAD>主要包括文档的一些基本说明信息，如文档标题、META信息等，若不需头部信息，则可省略头部标记。另外，后面将会提到JavaScript特效、CSS样式，一般也定义在头部标记中。头部标记的常用标记是<title>和<meta>。

<title>标题标记，只能在<HEAD>标记对内出现。<title>标记对嵌套的内容通常可以在浏览器的标题栏中显示。当把页面加入收藏夹或书签列表时，显示的名称就是<title>标记对嵌套的内容。

<meta>提供有关页面的元信息（meta-information），在一个页面的头部中可以有多个<meta>标记。常见功能如下：

① 帮助页面被各大搜索引擎登录，主要就是对Keywords（关键字）和Description（网站内容描述）的设置。来帮助你的主页被各大搜索引擎登录，提高网站的访问量。例如：

<meta name="keywords" content="电子商务,电子支付, 科技,浙江">
<meta name="description" content="电子商务,电子支付, 科技,浙江">

② 定义页面的使用语言，是<meta>标记最常见的功能。起的作用是定义网页的语言，当浏览者访问网页时，浏览器会自动识别并设置网页中的语言。下面是一个最常见的运用：

<meta http-equiv="content－Type″ content=″text/html; charset=gb2312">

③ 自动刷新并指向新的页面，可以使页面自动在指定的时间内去访问指定的网页。例如：

<meta http-equiv=″refresh″ content=″2; URL=http://www.baidu.com″>

主体标记<BODY>一般不省略，表示页面主体内容的开始和结束，在网页中看到的页面内容均包含在这对标记之间。<BODY>有多样属性可以设置，这些属性的作用范围为整个页面。常见属性有：bgcolor-背景色彩，text-非可链接文字的色彩，link-可链接文字的色彩，alink-正被单击的可链接文字的色彩，vlink – 已经访问过的可链接文字的色彩，background – 背景图像，leftmargin – 页面左边距，topmargin – 页面上边距，rightmargin – 页面右边距，bottommargin – 页面底边距。然而在实际运用中，这些<BODY>对应的“页面属性”一般是由后面将会介绍的CSS样式控制的，而不建议使用对<BODY>的属性定义来实现。

（4）HTML颜色设置

在HTML中，颜色由红色、绿色、蓝色混合而成，即RGB颜色模式。颜色值一般由#开头的16进制数来表示，由红色、绿色和蓝色的值组成。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。例如，白色用#FFFFFF表示，黑色用#000000表示，其他颜色值在这两个数值之间，值越大越亮，值越小越暗。

除了用16进制值来表示颜色外，还能运用颜色的英文名称作为颜色值来表示颜色。但仅有16种颜色名被HTML 4.0 标准支持，它们是aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

如果需要使用其他的颜色，还需要使用十六进制的颜色值。

（5）HTML常用标记

① 标题标记<Hn>。HTML提供了六个级别的标题，n值越小，标题字号就越大。<h1>定义最大的标题，<h6> 定义最小的标题。在这些标记中嵌套的文字元素显示黑体字体且自动插入一个空行。可设置属性为align，作用为规定标题中文本的排列对齐方向。

② 段落标记<P>。当需要换段落另起一段时可以使用段落标记<P>，段落的结束由</P>来标记，一般可以将</P>省略，因为下一个<P>的开始就意味着上一个<P>的结束。<P>标记同样可以设置对齐属性align，属性值一般有center（居中对齐）、left（左对齐）、right（右对齐）三种。

③ 换行标记<BR>。换行标记<br>是一个单标记，与段落标记在显示效果上相同，即都是另起一行，但换段则新起的一行与原行之间有一空行，另外由于不属于同一段落，对齐方式可以不同。而通过换行标记<br>则是紧贴原行下方另起一行，仍属于同一段落。可以通过以下HTML代码感受其不同之处：

<html>
<head>
<title>换段换行标记示例</title>
</head>
<body>
这里显示的是换段效果<p>现在是另起一段</p>
这里显示的是换行效果<br>现在是另起一行
</body>
</html>

④ 水平线标记<HR>。在屏幕上显示一条水平线段，可从视觉上将页面分割成不同部分。<hr>的可设置属性有：size设置水平线的高度，width设置水平线的宽度，两者可用占屏幕宽度的百分比这种相对数值或像素值的这种绝对数值来表示；align设置水平线的对齐方式，同样常见的有left、right、center三种；noshade设置水平线为实心线段，无阴影效果；color设置水平线颜色，设置颜色后的水平线同样为实心线段，无阴影效果，该属性只能作用于IE浏览器。

⑤ 超链接标记<A>。<a>标记作用为可定义锚（anchor），主要通过设置href属性，创建指向另外一个文档的超链接。基本语法如下：

<a href="URL"> ... </a>

另外，还可以通过设置name属性，创建一个文档内部的书签（链接），即跳转到同一页面中的另外一个地方。基本语法如下：

<a href="#name"> ... </a>

在被跳转的地方设置锚名：

<a name="name"> ... </a>

在实际页面的制作中，超级链接的常用类型有三种。

a．内部链接，用于链接网站内部的文档，注意路径一般运用相对路径。例如：

<a href="html\index.html"><H3>详细目录</H3></a>

b．外部链接，用于链接网站外部的文档，一般指远端网上的文档，注意需要输入完整的URL路径。例如：

<a href="http://www.baidu.com"><H3>百度</H3></a>

c．邮件E-mail链接，能自动调用Outlook Express来执行发邮件命令，新邮件的收件人为E-mail链接中设置的邮箱。例如：

<a href="mailto:abc@163.com">联系我们</a>

⑥ 表格标记<TABLE>。在HTML网页中，表格是最主要的页面布局方式。表格主要由三个标记对构成：最外面的定义表格的标记<table>...</table>，表格行的标记<tr>...</tr>，最里面的定义单元格的标记（用来包含表格具体数据）<td>...</td>，这三个标记对是逐层包含的关系。另外，可以通过<th>...</th>标记对来定义表头单元格，和<td>的区别在于表头单元格内的内容以黑体显示并且居中对齐。而<CAPTION>…</CAPTION>标记用于定义整个表格的标题文字。

表格中的空单元格，在大多数浏览器中，没有内容的表格单元格边框会没有显示，为了避免这种情况，可以在空单元格中添加一个空格占位符&nbsp;，就可以将边框显示出来。例如：

<td>&nbsp;</td>

表格边框属性border，在创建表格时如果不定义边框属性，表格将不显示边框。如果要显示边框，需要对表格边框属性border进行属性值定义。例如：

<table border="2" >……</table>

表格属性值的单位为像素，该例表示整个表格边框显示且宽度为2像素。

边框颜色属性bordercolor，可以定义整个表格边框的颜色或者单元格边框的颜色，当表格边框被显示时有效。当单元格定义了和整个表格不同的颜色时，单元格部分以单元格颜色为基准。

背景颜色属性bgcolor，可以定义整个表格的背景颜色或者单元格的背景颜色，当单元格定义了和整个表格不同的颜色时，单元格部分以单元格颜色为基准。

背景图片属性background，可以定义整个表格的背景图片或者单元格的背景图片，当单元格定义了和整个表格不同的背景图片时，单元格部分以单元格背景图片为基准。

表格尺寸属性width和height，可以定义整个表格的宽度和高度，同样可使用表示相对值的百分比表示和表示绝对值的像素值表示。

跨行或跨列的表格单元格，在实际表格运用过程中，大多数表格都需要进行单元格的行列合并，即所说的跨行或跨列。

跨多列的单元格，用属性colspan设置。例如：

<table width="300" border="1">
  <tr><th colspan=3> 课程表 </th></tr>
  <tr><td>1-2</td><td>3-4</td><td>5-6</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

跨多行的单元格，用属性rowspan设置。例如：

<table width="300" border="1">
  <tr><th rowspan=3>课程表</th> <td>1-2</td> <td>A</td></tr>
<tr><td>3-4</td> <td>B</td></tr>
<tr><td>5-6</td> <td>C</td></tr>
</table>

表格间距属性cellspacing，设置表格中的单元格之间的空白量，即各个单元格之间的距离，以像素为单位。

表格填充属性cellpadding，设置表格中的单元格的内部空白量，即单元格内填充的元素与单元格边框间的距离，以像素为单位。

表格对齐属性align和valign，align设置水平对齐方向；valign设置垂直对齐方向，对应的属性值分别为top（顶端对齐）、middle（居中对齐）、bottom（底部对齐）、baseline（基线对齐）。

4．任务拓展

（1）XML

XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML（Standard Generalized Markup Language，标准通用标记语言）。XML是Internet环境中跨平台的，依赖于内容的技术，是主要用于处理结构化文档信息的工具。XML和HTML是两种不同用途的标记语言。HTML的重点是数据显示，XML的重点是组织和描述信息。XML包含了一系列相关技术。

（2）表格练习

创建如图2-4所示的HTML网页。

图2-4 表格练习效果图

上一章目录下一章