转至繁体中文版　　　  | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告：     敏韬网|教学资源学习资料永久免费分享站！  [mintao  2008年9月2日]        
您现在的位置： 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
网页制作教程    热     ★★★★

网页制作教程

作者：闵涛 文章来源：闵涛的学习笔记 点击数：645 更新时间：2009/4/23 12:34:38
一、什么是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套件之一，网页制作解决方案，适合初、中级用户使用 与Word软件的良好兼容，现成的各种模板 操作、修改繁琐，有冗余代码 Office套件里带有 Macromedia Dreamweaver Macromedia公司的网页制作3剑客之一（另外2个是Flash、Firework），适合专业用户使用 操作灵活，效率高，网页可读性好，解决IE与Netscape的兼容性 几乎没有 需要另外购买或下载 东方网页王5.0企业版 国内交大铭泰软件公司的网页制作解决方案，适合初级用户使用 操作简便，形象直观，模板丰富 扩展度不够，制作不灵活，修改繁琐 需要另外购买或下载
四、Dreamweaver初步（见演示）
1．工具栏
2．属性栏
3．定义本地站点
4．编辑站点主页
5．定义背景颜色和图象
6．定义页面标题
7．创建链接
8．编辑表格

五、网页设计配色精彩十例 （1）这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。这样的配色可以显示独特的个性，又不失大型网站的风采。      


（2）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。        


（3）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0）。        



（4）现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非常的科学合理。          


（5）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。      



（6）橘红色如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。字体使用黑色RGB为（0，0，0）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。        
　


（7）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。    


（8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。这样的搭配显得风格独特，颜色和谐而庄重。      


（9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。如此简单，但是却栩栩如生，跃然网上。      


（10）下面举出这个例子是想证明一个道理——只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。      


没有相关教程
教程录入：mintao    责任编辑：mintao 
  • 上一篇教程：

  • 下一篇教程：
    • 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    　 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]
    　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
    		•
    赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题，因而无法显示。
    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长：MinTao ICP备案号：鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网。A打造B、C、D……
    		咸宁网络警察报警平台