网页设计教程,网页设计入门教程.pdf

本教程来自新手建站网《》 John 制作网页简明教程 2009/9/17 本教程来自新手建站网《》 目 录 一、认识网页3 什么是网页3 主页制作的基本条件4 二、制作主页前的准备4 1、主页题材4 2、规划框架4 3、资料收集5 三、如何选择网页制作工具6 四、如何把握网页布局8 1.页面尺寸8 2.整体造型8 3.页头9 4.文本9 5.页脚9 6.图片9 7.多媒体9 五、网站设计26 条原则9 六、规划站点14 七、在Dreamweaver 设置站点15 一、申请免费空间15 二、设置站点15 八、制作模板20 九、在Dreamweaver 套用模板和修改模板35 2 本教程来自新手建站网《》 一、认识网页 什么是网页 你现在所看到的就是网页啦! 可是您知道为什么网页可以在 Internet 上传播，为什么可以被您的电脑认识吗？还是让我 们来好好来认识网页。 网页的学名称作HTML 文件，是一种可以在 www 网上传输，并被浏览器认识和翻译成页面显 示出来的文件。 WWW 是 “World Wide Web的缩写；HTML 的意思则是 “Hypertext Markup Language”,中文 翻译为 “超文本标记语言”。 “超文本”就是指页面内可以包含图片、链接、甚至音乐，程 序等非文字的元素。 网页就是由HTML 语言编写出来的。 看到这，您也许会想：我最怕编程了! 别急！其实 HTML 语言只是一种排版语言，语法就类似于这样： “页高 8 宽 5，(1,2)处插 入高 1 宽 1 的图片A...” 如果您是使用 WPS 或则 Word 的高手，那么恭喜您，网页制作的 学习您已经走了一半路了！ HTML 全称 HyperText Markup Language，正式名称是超文本标记语言，HTML 语言发展很快，已 历经 HTML1.0、HTML2.0 和 HTML3.0、HTML4.0 多个版本，现在 HTML5.0 正在测试，同时 DHT ML (动态)、VHTML(虚拟)、SHTML 等也飞速发展起来。我们现在一般只要掌握 HTML4.0 就可 以了。 html 利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的 文本编辑器都可以对它进行编辑，与 VB、C++等编程语言有着本质上的区别。 举一个简单的例子： HTML 原代码： b/b 从不懂上网到网络高手 在浏览器的显示效果： 从不懂上网到网络高手 其中 b/b 就是两个 HTML 标记。它以起始标记b及结束标记/b标记文字 www.jzxue. com，令它显示成粗体。 也有懒虫(像我一样:－)觉得一下要记住 HTML 那么多枯燥的标记实在太麻烦了。那么有一 个偷懒的办法：找一个所见即所得的网页制作工具，即使一点 HTML 语言都不会，也可以制 作出出色的网页。 (嘘——，别声张！)后面，我会为大家介绍这类工具的。 说到底，我还是推荐您稍微了解一些 HTML 的语法。这样，您可以更精确的控制页面的排版， 可以实现更多的功能。当大家称赞羡慕您的主页的时候，您就会觉得很值得哦！ 3 本教程来自新手建站网《》 主页制作的基本条件 在 WWW 上,不论你是资产上亿的大公司,还是捉襟见肘的穷学生,只要你建立了自己的主页, 你们的地位就是平等的。实际上,许多个人管理的站点比商业站点更加受欢迎。一切都在于 你的内容和创意.那么制作主页需要什么条件呢? 主页制作的基本条件有： 硬件： 一台电脑(64MB 以上内存，当然越大越好啦)； 可以拨号上网； 如果你有条件的话,建议:配置扫描仪,这将大大方便图像和文字的输入; 软件： HTML 编辑软件：常用的有 Frontpage、Hotdog 等，本文重点介绍 Dreamweaver； 图像处理软件：常用的有Photoshop、flash、Fireworks 等； 文件上传软件：常用的有 Cuteftp、WSftp 等。 如果你已经万事具备了，我们继续下一步：制作主页前的准备. 二、制作主页前的准备 1、主页题材 下面我们开始着手策划制作主页。首先面临的问题便是我要制作什么内容，选择什么样的 主页题材。 网络上的主页题材千奇百