个人网页制作简明教程
（孙晓鹏  整理）
资料来源：www.jzxue/
目  录
1. 认识网页
w3school的好处
2. 制作主页前的准备
3. 如何选择网页制作工具
4. 如何把握网页布局
5. 安装Dreamweaver8
6. 规划站点
7. 制作模板
8. 制作首页
9. 套用模板和修改模板
10.网页的发布
1. 认识网页
1.1. 什么是网页
网页的学名称作HTML文件，是一种可以在www网上传输，并被浏览器认识和翻译成页面显示出来的文件。
WWW是“World Wide Web"的缩写；HTML的意思则是“Hypertext Markup Language”，中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐，程序等非文字的元素。
网页就是由HTML语言编写出来的。HTML语言是一种排版语言，语法就类似于这样：“页高8宽5，(1,2)处插入高1宽1的图片A...” 如果您是使用WPS或则Word的高手，那么恭喜您，网页制作的学习您已经走了一半路了！
1.2. HTML
全称HyperText Markup Language，正式名称是超文本标记语言，HTML语言发展很快，已历经HTML1.0、HTML2.0和HTML3.0、HTML4.0多个版本，现在HTML5.0正在测试，同时DHTML (动态)、VHTML(虚拟)、SHTML等也飞速发展起来。我们现在一般只要掌握HTML4.0就可以了。
html利用标记（tag）用来描述网页的字体、大小、颜及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。
举一个简单的例子：
HTML 原代码： <b>www.jzxue</b> 从不懂上网到网络高手
在浏览器的显示效果： www.jzxue 从不懂上网到网络高手其中 <b></b> 就是两个HTML标记。它以起始标记<b>及结束标记</b>标记文字www.jzxue，令它显示成粗体。html个人网页完整代码怎么看
也有懒虫(像我一样:－)觉得一下要记住HTML那么多枯燥的标记实在太麻烦了。那么有一个偷懒的办法：一个所见即所得的网页制作工具，即使一点HTML语言都不会，也可以制作出出的网页。(嘘——，别声张！)后面，我会为大家介绍这类工具的。
说到底，我还是推荐您稍微了解一些HTML的语法。这样，您可以更精确的控制页面的排版，可以实现更多的功能。当大家称赞羡慕您的主页的时候，您就会觉得很值得哦！
2. 制作主页前的准备
2.1. 主页题材
下面我们开始着手策划制作主页。首先面临的问题便是我要制作什么内容，选择什么样的主页题材。网络上的主页题材千奇百怪、琳琅满目。只要你想的到，就可以把它制作出来。以下列出一些常见的题材，是否对你有点启发。
给您的建议：
(1)一般来说，个人主页的选材要小而精。如果你想制作一个包罗万象的站点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违的，给人的感觉是没有主题，没有特，样样有却样样都很肤浅，因为您不可能有那么多的精力去维护它。注意：网页的最大特点就是更新快。目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。
(2)题材最好是你自己擅长或者喜爱的内容。比如：您对诗歌感兴趣，可以放置自己的诗词；对足球感兴趣，可以报道最新的球场战况等等。这样在制作时，才不会觉得无聊或者力不从心。
(3)不要太滥或者目标太高。“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。
OK!如果你已经有一个绝妙的主意了，那我们就开始下一步：规划框架。
2.2. 规划框架
选定了一个好的题材，是不是可以立刻动手制作了？不，经验告诉我们，您必须规划框架，这是很重要的一步！
每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。
全面仔细规划架构好自己网站，不要急于求成。
规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当你要制作一个很大的网站(有很多页面) 的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，十分累人，也十分费钱。
大纲列出来后，你还必须考虑每个页面之间的链接关系。是星形、树形，或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。
为了提高浏览效率，方便资料的寻，本站的框架基本采用“蒲公英”式，即所有的主要链接都在首页上，每个主链接再分别展开，主链接之间相互链接。
框架定下来了，然后开始一步一步有条理、有次序地做来，就胸有成竹得多，也为你的主页将来发展打下良好的基础。
下一步，你可以动手制作具体内容了，我将告诉你一些收集资料的窍门。
2.3. 资料收集
题材选定，框架选定，接下来就开始往主页里面填内容。我们称作资料收集。
就个人主页而言，很少有人有能力完全靠自己来创作所有的内容。（一些高手能够提供自己编的软件，文章或者音乐，是我非常佩服的！）
大部分人的方法是：从报纸、杂志、光盘等媒体中把相关的资料收集整理，再加上一定的编辑后就可以了。
另外一个好的方法是从网络上收集，您只要到雅虎、搜狐等搜索引擎上查相应的关键字，就可以到一大堆的资料。
如果您是英语高手，您可以到国外站点上把最新的信息、资料翻译成中文，提供给大家，这叫“洋为中用”。
网络上的资料呈爆炸性的增长，只要注意收集某一非常细小的题材，随时供大家方便的查，您的主页就已经有做不完的活了。
但是，有一点必须注意！在Copy或引用他人的资料文章时，请您尊重知识版权。有特别声明、禁止复制的请不要盗为己用。允许复制的也应该在引用时注明作者、出处。一般来说，个人主页是非商业站点，只要你发封Email给作者，都会征得同意的。
还有就是收集的资料必须合法。按照我国《计算机信息网络国际联网安全保护管理办法》的规定：
任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息：
(一)煽动抗拒、破坏宪法和法律、行政法规实施的；
(二)煽动颠覆国家政权，推翻社会主义制度的；
(三)煽动分裂国家、破坏国家统一的；
(四)煽动民族仇恨、民族歧视，破坏民族团结的；
(五)捏造或者歪曲事实，散布谣言，扰乱社会秩序的；
边框设计彩
抽签法是不是简单随机抽样
(六)宣扬封建迷信、淫秽、情、赌博、暴力、凶杀、恐怖，教唆犯罪的；
(七)公然侮辱他人或者捏造事实诽谤他人的；
(八)损害国家机关信誉的；
(九)其他违反宪法和法律、行政法规的。
到这里我们已经完成了制作主页的准备工作了。
3. 如何选择网页制作工具
"工欲善其事，必先利其器"。制作网页第一件事就是选定一种网页制作软件。从原理上来讲，虽然直接用记事也能写出网页，但是对网页制作必须具有一定的html基础，非初学者能及，且效率也很低。用WORD也能做出网页，但有许多效果做不出来，且垃圾代码太多，也
是不可取的。我认为比较合适的网页制作软件首推Dreamweaver，它简单易学，功能强大，用它做出的网页垃圾代码也比较少，另外，它还可以在我们用所见即所得的环境制作网页的同时可以在代检视窗中看到对应的HTML代码，这对我们学习HTML有很大好处。虽然用Dreamweaver，即使我们一点不懂HTML 也能做出漂亮的网页，但HTML毕竟是制作网页的基础，我们要想把网页做活了，必须要知
其然还要知其所以然，最终我们还是要熟练掌握HTML 才行。当然 Frontpage也不错，但比起Dreamweaver来还是要稍逊一筹。
3.1. DreamWeaver——自制动态HTML动画的网页
DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug －in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。
3.2. Microsoft FrontPage 98——制作功能强大的网页
如果你曾对Word很熟悉，那么相信你用FrontPage 98进行网页设计一定会非常顺手。
使用Frontpage98制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作由Frontpage98
中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页，预览页。Frontpage98带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。 FrontPage 98最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage 98会为你跟踪文件并拷贝那些新版本文件。FrontPage 98是现有网页制作软件中唯一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。
对于WEB新手来说，"所见即所得"无疑是最方便的，所以我建议你选择 DreamWeaver，在网上人们习惯叫它为“DW”。下面我将在 DreamWeaver里做实例。
4. 如何把握网页布局
最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。
4.1. 页面尺寸
由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率
在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。
4.2. 整体造型
什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
4.3. 页头
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
4.4. 文本
文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML 的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
4.5. 页脚
vuejs漏洞页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。
4.6. 图片
图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
php开放平台源码4.7. 多媒体
除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。