浅谈动易风格模板制作思路及方法（一）

dn001 2009-03-07 19:30:43

这里整体结构的头部信息,放置在<head>与</head>之中.

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：

name 属性

其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。

6、代码中的链接使用:

在html语言中，最重要的就是对链接的使用,一般形式如:<a href=要指向的网址 target=_blank>要显示的内

容</a>，链接（也称超链接）是超文本的一个重要特征，它是指通过标志符号的作用，并把不连续的两段文字或两个文件联接起来。链接是构起网富网络世界的纽带：;
A、链接文件的使用标志：;
要建立一个链接，必须具备两个条件：;
1：确认被链接的文件名称URL;
2：在文件中确定链接;
　　HTML文件的链接标志是：<A>……</A>
　　在<A>中除了标记名“A”外还包括其他扩展信息，这些扩展信息称为属性。

HREF是链接中一个最常用的属性，该属性用来指出所要链接文件的名称或URL。其

结构形式为：;
　　<A HREF=“被链接的文件名”>高亮显示的文本</A>
　　我们看这个的代码：<a href="html2.htm" target="mainFrame">
　　这是我们刚才点击从动易官方站采来的源代码，大家可以在Dreamweaver里打开，你会更容易找到这样的源代码的意思是怎样的，里面a这是链接的标志，后面的href命令指出链接的方向，也就是方向指向文件名。;
同一个文件中的链接：;

在制作html网页时，经常是需要链接的文件的两部分内容分别存成两个文件，甚至是网络上的文件，这就形成了本地链接和网络链接两种链接方式。;
A、本地链接：;
本地链接是链接本地的文件，并不需要网络了，只要本机有浏览器就可，这里就不解释了。
B、网络链接：;
这个很简单的，有时我们需要从一个站点链接到一个站点，这种通过网络实现链接方法与本地文件链接相同，仍然是可能<a>标记和属性以及提示链接的一些文字，只是在文件名处应写上网络上的URL而己：如你可以用这个基本的格式,去链接你想要链接的.如,让别人点邮箱的链接,就能发信给你......

当然还有好多,大家可以在以后的学习中自己去发现......

7、美化网页时要注意的地方：

A、插入图象要注意格式和尺寸

在HTML网页中加入图像是通过<img>标记实现的。其书写格式为：<IMG SRC=”图像的文件名或URL”>，如我们在网页源码中找到：<img src="../../images/banner.gif" width="760" height="80">

这里的"../../images/banner.gif"路径名，后面的width="760" height="80"是宽和高。在<IMG>中使用了一个很重要的属<src>，src的作用是指出一个图像文件名或是指出URL（此时的路径名书写规则与使用链接时的书写规则相同）。如果同一个文件中需要反复使用绝对路径名或URL。因为使用相对路径名，浏览器只需将图像文件下载一次，再次使用这个图像时只要再重新显示一遍即可。如果使用的是绝对路径名，每次显示时都要下载一次图像像，这会大大降低图像的显示速度。

B、调整图像和文本的相对位置

在实际的网页制作过程中，经常需要将图像和文本放在一起进行显示使用<img>标记的ALIGN属性可以调整图像与文本的位置：
ALIGN=top;;图像的顶部与其他文本或图像的底部对齐
ALIGN=middle; 图像的中间与其它文本或图像的底部对齐
ALIGN=bottom; 图像的底部与其它文本或图像的底部对齐（缺省值）
ALIGN=left;图像放置在屏幕左边
ALIGN=right图像放置在屏幕右边
如把上面提到的例子修改成：<img src="../../images/banner.gif" width="760" height="80" ALIGN=left> 我们只是在后面加上一句ALIGN=left，大家就会看到这个名为banner的图片显示靠左。

C、设计图像的替代文字

虽然图像可以使你的网页变得绚丽多彩，富有吸引力，但会带来传输速度降低的问题，有些浏览者为了提高网页下载速度，会关掉浏览器中载入的图像命令。为了使只浏览文本的用户能够了解页面上的图片内容可以使用<IMG>的alt命令。代码如下：<img src="../../images/banner.gif" width="760" height="80" alt="动易公司">，这样当banner图片没有出现时，ALT将引导文字内容会出现在屏幕上，以弥补无法显示的图像。;

8、表格在html中的运用：
可以说,表格是最常用的了,在以前的网页制作中,如果不用表格,网页真是没法看。现在web2.0技术的流行,大多数人喜欢用div+css.但对才接触网络的人来说,表格还是很重要的,它对我们新手学习风格网页模板的制作,还是很有帮助的。

学习怎样在网页上创建表格之前，需要首先了解表格的基本部分：;
● 表格标题(Caption)：指示表格的含义，标题可有可无。;
● 表格标签(Table Headings Label)指示行、列存放的内容说明，一般以黑体、大写突出显示。;
● 表格数据(Table Data)：指示表格的内容。
● 表格单元(Table Cell)：指示表格中各个独立的区域，其中一个区域可以放置表格标签或者　表格数据。;

创建表格使用的标记;

<table>标记是定义表格的总标记，HTML要求一个表格的全部内容包含<table>.....</table>标记之中，其中可以有标题及表格的内容。;
<table>标记中最常用属性是BORDER属性。从HTML3.2以后，BORDER的含义有了变化，它的值不再标记边框有无，而是以像素点为单位表示边框的宽度，如BORDER=1即边框为1个像素点（像素点是位图的基本单位），如果不包含BORDER属性则默认无边，这与HTML2.0恰恰相反。;

下面是一个简单代码的例子，表中只有一行数据，该行包含四个单元，一个表格标签，三个数据单元。;
　<html>
　<head>
　<title>一个单行表格</title>
　</head>
　<body>
　<table border=2>
　<caption>表的标题</caption>
　<tr>
　<th>表头</th>
　<td>表的数据</td>
　<td>表的数据</td>
　<td>表的数据</td>
　</tr>
　</table>
　</body>
　</html>
其实对表格的学习主要还应该结合自己学习中的实践来理解，这样效果会更好一些！

标签：