点击这里给我发消息 点击这里给我发消息

网页制作教程

添加时间:2010-1-5
    相关阅读: 网页制作 制作网页 网页 软件 页面 HTML flash

一、什么是HTML
    HTML(超文本标记语言)是网页中使用的语言,它能被网页浏览器(IE或Netscape)解释,从而显示出丰富多彩的信息(图片、文字、声音、影象、动画等)。
    制作网页前首先要弄懂什么是HTML。

 

    在IE中点击"查看"→"源文件",就能看到该网页的HTML代码。下面是一个网页文件(model.htm)的HTML代码:

<html>
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1><font color="#FF0000">第一段文字。</font></h1>
<h2><font color="#000099">第二段文字。</font></h2>
</body>
</html>

【操作】请在记事本中输入以上代码,命名为test1.htm,存于D盘,然后双击打开看看。

标记一般是成对出现的,#FFFFFF表示使用的颜色是白色。

<html>...</html>
<head>...</head>
<title>...</title>之间是该网页的标题
charset=gb2312表示语言字符集信息是中文简体,如big5则是中文繁体。
<body>...</body>之间是网页的正文内容
<body bgcolor="#FFFFFF" text="#000000">表示网页的背景色是白色,默认的文字颜色是白色。
<h1>...</h1>之间是h1号标题字
<h2>...</h2>之间是h2号标题字
<font color="#FF0000">...</font>之间的文字为红色

HTML是一套国际标准,其标记有几百种,你并不需要全部了解它们,只要记住其中常用的十几种,就可以做出非常漂亮的网页来。

常用的标记举例:













































标记名称 标记举例 解释
链接

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

URL:链接的地址,如:
http://www.163.com
标尺线

<hr>

划一条横线
换行

<br>

人工换行
链入图象

<img src="URL">

如:images/face.gif
文字的对齐

<h3 align=center>Hello</h3>

元素中间对齐

<h3 align=right>Hello</h3>

元素右对齐

<h3 align= left>Hello</h3>

元素左对齐
表格

<table>...</table>

定义表格

<tr>

定义表行

<th>

定义表头

<td>

定义表元(表格的具体数据)


【操作】复制一个jpg格式的图片文件,取名为pic,保存到D盘,在记事本中输入下列语句,命名为test2.htm,存于D盘。

<html>
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#009999" text="#00FF00">
<h1>第二个网页</h1>
<img src="pic.jpg" alt="看到上面的文字吗">
<hr>
<h1 align=center><a href="http://192.168.0.2">链接到校园网</a></h1>
<h2 align=center><a href="pic.jpg">链接到我的图片</a></h2>
<h3 align=center><a href="test1.htm" target="_blank">链接到test1</a></h3>
<hr>
<h4 align=center>下面是一个带边框的表格</h4>
<table border>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</table>
</body>
</html>

二、准备工作
    制作网页前重要的工作是规划好网页的架构,一般开设images、common、temp三个子目录,根据需要再开设media子目录,images目录中放不同栏目的页面都要用到的公共图片,例如网站的标志、banner条、菜单、按钮等;common子目录中放css、js、php、include等公共文件;temp子目录放各种临时备用的文件;media子目录中放flash、avi、quick time等多媒体文件。
    在根目录中原则上按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
    除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往一个月后连自己都看不懂。
网站的首页文件一般取名:index.htm
放置在页面顶部的广告、装饰图案等长方形的图片取名:banner
标志性的图片取名:logo
在页面上位置不固定并且带有链接的小图片取名:button
在页面上某一个位置连续出现,性质相同的链接栏目的图片取名:menu
装饰用的照片取名:pic
不带链接表示标题的图片取名:title

三、制作软件介绍
    下面介绍3个做网页的辅助软件,有了软件并不一定可以把网页做好,关键还得看懂HTML代码具体表示什么意思。











软件名称 描述 优点 缺点 如何获取
Microsoft FrontPage 微软Office套件之一,教程(图十) src="http://edu.cnzz.cn/newsfile/3000-3999/3815/070923222174381.jpg" width=244 border=0 _fckxhtmljob="1">
本文作者:
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册