如何制作网页(网页制作实战篇)111

《如何制作网页(网页制作实战篇)111》由会员分享，可在线阅读，更多相关《如何制作网页(网页制作实战篇)111（36页珍藏版）》请在金锄头文库上搜索。

1、如何制作网页（网页制作实战篇）如何制作网页（网页制作实战篇） 如何制作网页目录 一、认识网页 二、制作主页前的准备 三、如何选择网页制作工具 四、如何把握网页布局 五、设计网站 65 条原则 六、下载安装 Dreamweaver8 七、规划站点 八、在 Dreamweaver 设置站点 九、制作模板 十、制作首页 十一、在 Dreamweaver 套用模板修改模板 一、认识网页 你现在所看到的就是网页啦!可是您知道为什么网页可以在 Internet上传播， 为什么可以被您的电脑认识吗？还是让我们来好好来认识网页。 网页的学名称作 HTML 文件，是一种可以在 www 网上传输，并被浏览器 认识

2、和翻译成页面显示出来的文件。 WWWWWWWWWWWW是 “WorldWideWeb” 的缩写； HTML 的意思则是 “Hypertext Markup Language” ，中文翻译为“超文本标记语言” 。 “超文本”就是指页面内可以包含 图片、链接、甚至音乐，程序等非文字的元素。 网页就是由 HTML 语言编写出来的。 看到这，您也许会想：我最怕编程了!别急！其实 HTML 语言只是一种排版 语言，语法就类似于这样： “页高 8 宽5，(1，2)处插入高 1 宽 1 的图片 A.” 如 果您是使用 WPS 或则 Word的高手，那么恭喜您，网页制作的学习您已经走了 一半路了！ HTMLH

3、TMLHTMLHTML：全称 HyperText Markup Language，正式名称是超文本标记语言， HTML 语言发展很快，已历经 HTML1.0、HTML2.0 和 HTML3.0、HTML4.0 多 个版本， 现在 HTML5.0 正在测试， 同时 DHTML(动态)、 VHTML(虚拟)、 SHTML 等也飞速发展起来。我们现在一般只要掌握 HTML4.0 就可以了。 html 利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言， 使用任何的文本编辑器都可以对它进行编辑，与VB、C+等编程语言有着本质 上的区别。 举一个简单的例子： 要在浏览器的显示效果： HT

4、ML 原代码就标记为： 其中 就是两个 HTML 标记。它以起始标记及结束标记标 记文字 ，令它显示成粗体。 也有懒虫(像我一样:)觉得一下要记住 HTML 那么多枯燥的标记实在太麻 烦了。那么有一个偷懒的办法：找一个所见即所得的网页制作工具，即使一点 HTML 语言都不会，也可以制作出出色的网页。(嘘，别声张！)后面，我会 为大家介绍这类工具的。 说到底，我还是推荐您稍微了解一些 HTML 的语法。这样，您可以更精确 的控制页面的排版，可以实现更多的功能。当大家称赞羡慕您的主页的时候， 您就会觉得很值得哦！ -主页制作的基本条件- 在 WWW 上，不论你是资产上亿的大公司，还是捉襟见肘的穷学

5、生，只要 你建立了自己的主页，你们的地位就是平等的。实际上，许多个人管理的站点 比商业站点更加受欢迎，一切都在于你的内容和创意。那么制作主页需要什么 条件呢？ 主页制作的基本条件有： 硬件：一台电脑(64MB 以上内存，当然越大越好啦)；可以拨号上网；如果 你有条件的话，建议:配置扫描仪，这将大大方便图像和文字的输入; 软件：HTML 编辑软件：常用的有 Frontpage、Hotdog 等，本文重点介绍 Dreamweaver； 图像处理软件：常用的有 Photoshop、flash、Fireworks 等； 文件上传软件：常用的有 Cuteftp、WSftp 等。 如果你已经万事具备了，我

6、们继续下一步：制作主页前的准备. 二、制作主页前的准备 1、主页题材 下面我们开始着手策划制作主页。首先面临的问题便是我要制作什么内容， 选择什么样的主页题材。网络上的主页题材千奇百怪、琳琅满目。只要你想的 到，就可以把它制作出来。以下列出一些常见的题材，是否对你有点启发。 给您的建议： (1)一般来说，个人主页的选材要小而精。如果你想制作一个包罗万象的站 点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违的，给人的感 觉是没有主题，没有特色，样样有却样样都很肤浅，因为您不可能有那么多的 精力去维护它。注意：网页的最大特点就是更新快。目前最受欢迎的个人主页 都是天天更新甚至几小时更新一次

7、。 (2)题材最好是你自己擅长或者喜爱的内容。比如：您对诗歌感兴趣，可以 放置自己的诗词；对足球感兴趣，可以报道最新的球场战况等等。这样在制作 时，才不会觉得无聊或者力不从心。 (3)不要太滥或者目标太高。 “太滥”是指到处可见，人人都有的题材； “目 标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它 是很困难的。 OK!如果你已经有一个绝妙的主意了，那我们就开始下一步：规划框架。 2、规划框架 选定了一个好的题材，是不是可以立刻动手制作了？不，经验告诉我们， 您必须规划框架，这是很重要的一步！ 每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构， 盲目的建造

8、，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混 乱，虎头蛇尾。 全面仔细规划架构好自己网站，不要急于求成。 规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当 你要制作一个很大的网站(有很多页面)的时候，特别需要把这个架构规划好， 也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构， 十分累人，也十分费钱。 大纲列出来后，你还必须考虑每个页面之间的链接关系。是星形、树形， 或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的 站点会造成浏览困难，影响内容的发挥。 为了提高浏览效率，方便资料的寻找，本站的框架基本采用“蒲公英”式， 即所有

9、的主要链接都在首页上，每个主链接再分别展开，主链接之间相互链接。 框架定下来了，然后开始一步一步有条理、有次序地做来，就胸有成竹得 多，也为你的主页将来发展打下良好的基础。 下一步，你可以动手制作具体内容了，我将告诉你一些收集资料的窍门。 3、资料收集 题材选定，框架选定，接下来就开始往主页里面填内容。我们称作 资料收 集。 就个人主页而言，很少有人有能力完全靠自己来创作所有的内容。 （一些高 手能够提供自己编的软件，文章或者音乐，是我非常佩服的！ ） 大部分人的方法是：从报纸、杂志、光盘等媒体中把相关的资料收集整理， 再加上一定的编辑后就可以了。 另外一个好的方法是从网络上收集，您只要到雅虎

10、、搜狐等搜索引擎上查 找相应的关键字，就可以找到一大堆的资料。 如果您是英语高手，您可以到国外站点上把最新的信息、资料翻译成中文， 提供给大家，这叫“洋为中用” 。 网络上的资料呈爆炸性的增长，只要注意收集某一非常细小的题材，随时 供大家方便的查找，您的主页就已经有做不完的活了。 但是，有一点必须注意！在 Copy 或引用他人的资料文章时，请您尊重知识 版权。有特别声明、禁止复制的请不要盗为己用。允许复制的也应该在引用时 注明作者、 出处。 一般来说， 个人主页是非商业站点， 只要你发封 Email 给作者， 都会征得同意的。 还有就是收集的资料必须合法。按照我国计算机信息网络国际联网安全 保

11、护管理办法的规定： 任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息： (一)煽动抗拒、破坏宪法和法律、行政法规实施的； (二)煽动颠覆国家政权，推翻社会主义制度的； (三)煽动分裂国家、破坏国家统一的； (四)煽动民族仇恨、民族歧视，破坏民族团结的； (五)捏造或者歪曲事实，散布谣言，扰乱社会秩序的； (六)宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、 恐怖，教唆犯罪的； (七)公然侮辱他人或者捏造事实诽谤他人的； (八)损害国家机关信誉的； (九)其他违反宪法和法律、行政法规的。 到这里我们已经完成了制作主页的准备工作了。 三、如何选择网页制作工具 “工欲善其事，必先利其器”

12、。制作网页第一件事就是选定一种网页制作软 件。从原理上来讲，虽然直接用记事也能写出网页，但是对网页制作必须具有 一定的 html 基础，非初学者能及，且效率也很低。用 WORD 也能做出网页， 但 有许多效果做不出来，且垃圾代码太多，也是不可取的。我认为比较合适的网 页制作软件首推 Dreamweaver，它简单易学，功能强大，用它做出的网页垃圾代 码也比较少，另外，它还可以在我们用所见即所得的环境制作网页的同时可以 在代检视窗中看到对应的 HTML 代码，这对我们学习 HTML 有很大好处。虽然 用 Dreamweaver， 即使我们一点不懂 HTML 也能做出漂亮的网页，但 HTML 毕

13、竟是制作网页的基础，我们要想把网页做活了，必须要知其然还要知其所以然， 最终我们还是要熟练掌握 HTML 才行。当然 Frontpage 也不错，但比起 Dreamweaver 来还是要稍逊一筹。 DreamWeaver自制动态 HTML 动画的网页 DreamWeaver 是一个很酷的网页设计软件，它包括可视化编辑、HTML 代 码编辑的软件包， 并支持 ActiveX、JavaScript、 Java、 Flash、 ShockWave 等特性， 而 且 它 还 能 通 过 拖 拽 从 头 到 尾 制 作 动 态 的 HTML 动 画 ， 支 持 动 态 HTML(Dynamic HTML

14、)的设计， 使得页面没有 plugin 也能够在 Netscape 和IE 4.0浏览器中正确地显示页面的动画。 同时它还提供了自动更新页面信息的功能。 DreamWeaver 还 采 用 了 Roundtrip HTML 技 术 。 这 项 技 术 使 得 网 页 在 DreamWeaver 和 HTML 代码编辑器之间进行自由转换， HTML 句法及结构不变。 这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑 带来的益处。DreamWeaver 最具挑战性和生命力的是它的开放式设计，这项设 计使任何人都可以轻易扩展它的功能。 下载 Dreamweaver注：下载点不提供

15、安装序列号的，请复制( WPD800-53931-95632-35191) Microsoft FrontPage98制作功能强大的网页 如果你曾对 Word 很熟悉，那么相信你用 FrontPage 98 进行网页设计一定会 非常顺手。 使用 Frontpage98 制作网页，你能真正体会到“功能强大，简单易用”的含 义。页面制作由 Frontpage98 中的 Editor完成，其工作窗口由 3 个标签页组成， 分别是“所见即所得”的编辑页，HTML 代码编辑页，预览页。Frontpage98带有 图形和 GIF 动画编辑器，支持 CGI和 CSS。向导和模板都能使初学者在编辑网 页时感到

16、更加方便。 FrontPage 98 最强大之处是其站点管理功能。在更新服务 器上的站点时，不需要创建更改文件的目录。FrontPage 98 会为你跟踪文件并拷 贝那些新版本文件。 FrontPage 98 是现有网页制作软件中唯一既能在本地计算机 上工作，又能通过 Internet 直接对远程服务器上的文件进行工作的软件。 下载网址 http: Netscape 编辑器制作简单的网页 NetscapeCommunicator 和 Netscape NavigatorGold 3.0 版本都带有网页编辑 器。 如果你喜欢用 Netscape浏览器上网，那么使用 Netscape 编辑器真是简单方 便！当你用 Netscape 浏览器显示网页时，单击编辑按钮，Netscape 就会把网页 存储在硬盘中，然后就可以开始编辑了。你也可以象使用 Word 那样编辑文字、 字体、颜色，改变主页作者、标题、背景颜