网页制作基础
第1章 网页制作基础学习目标☑ 了解网页制作基础知识☑ 掌握网页制作的一般步骤☑ 掌握网页制作的原则和技巧目标任务&项目案例天涯社区网站首页
第1章 网页制作基础
学习目标
☑ 了解网页制作基础知识
☑ 掌握网页制作的一般步骤
☑ 掌握网页制作的原则和技巧
目标任务&项目案例
天涯社区网站首页 淘宝交易网站
邮箱登录界面 邮箱注册页面
网络以其独特的优势渗入到人们的生活中，并已成为生活的一个重要组成部分，而网页在整个网络中占据了绝对的分量，几乎所有的网络活动都与网页有关。若想学习网页制作，需先了解一些网页的基本知识，如网页的定义、分类以及网页制作的基本步骤和规则等。本章将讲解网页制作的基础知识，为以后学习网页制作做好铺垫。
,
Dreamweaver 网页制作（第2版）
1.1 网页制作基础知识
学习网页制作应先了解网页的基本概念，学好这些知识是制作出漂亮、美观的网页的前提，为以后的学习打好基础。
1.1.1 网页的定义和分类
上网时浏览的一个个页面就是网页，网页又称为Web 页，其中的图像、文
字、超级链接等是构成网页的基本元素，如图1-1所示即为榕树下网站的首页。网页可按其在网站中的位置分类，也可按其表现形式分类。下面将分别进行讲解。
图1-1 榕树下网站首页
1．按位置分类
主页和内页，主页是指网站的主要导航
页面，一般是进入网站时打开的第一个页面，也称为首页；内页是指与主页相链接的按网页在网站中的位置可将其分为页面，也就是网站的内部页面。
提示： 一些网站的首页并非主页，其作用只是为了欢迎访问者或者引导访问者进入主页，所以首页并不一定就是主页。
2
,第1章 网页制作基础
2．按表现形式分类
按网页的表现形式可将其分为静态网页和动态网页，具体含义如下。
→ 静态网页：指用HTML 语言编写的网页，其制作方法简单易学，但缺乏灵活性。
→ 动态网页：这类网页使用ASP 、PHP 、JSP 和CGI 等程序生成，具有动态效果，
其制作方法较静态网页复杂。
注意： 静态网页和动态网页不是以网页中是否包含动态元素来区分的，而是针对客户端与服务器端是否发生交互行为而言的。不发生交互的是静态网页，发生交互的是动态网页。
1.1.2 网页的基本概念
在网页制作过程中常常会遇到一些专业名词，如站点、发布、浏览器、导航条、超级链接、表单、URL 、IP 地址以及域名，需掌握其具体含义才能在网页制作过程中轻松操作。下面分别讲解这些专业名词。
→ 站点：站点是一个管理网页文档的场所，简单地讲，一个个网页文档链接起来就
构成了站点。站点可以小到一个网页，也可大到一个网站。
→ 发布：发布就是把制作好的网页上传到网络中的过程。
→ 浏览器：浏览器是一种把互联网上的文本文档和其他类型的文件翻译成网页的软
件。通过浏览器，可以快捷地连接Internet 。目前使用人数最多的浏览器是Microsoft 公司的IE 浏览器，电脑中安装了操作系统都会捆绑安装IE 浏览器，如图1-2所示为IE 浏览器打开的网页。另外，还有很多其他浏览器可供用户安装使用，如腾讯TT 浏览器、火狐浏览器、360安全浏览器以及
搜狗浏览器等。如图1-3
所示为搜狗浏览器打开的网页。
图1-2 IE 浏览器 图1-3 搜狗浏览器
→ 导航条：导航条就如同一个网站的路标，有了它就不会在浏览网站时“迷
路”，如图1-4所示。导航条链接着各个页面，只要单击导航条中的超级链
3
,
Dreamweaver 网页制作（第2版）
接就能进入相应的页面。
图1-4 导航条
→
→
→
4 超级链接：超级链接在网页中起着重要的作用，主要用于将不同页面链接起来，链接的范围可以是同一站点内的页面，也可以是其他网站的页面。超级链接主要有文字链接和图像链接等，通常将鼠标指针移动到网页对象上，如果该对象是一个超级链接，鼠标指针会变为一个手形，如图1-5所示。单击超级链接就能打开其指定的目标网页。
图1-5 超级链接 表单：表单是具有交互性的动态网页，常用于在注册网站会员和申请邮箱等活动时提交用户信息。如图1-6所示为申请网易邮箱的表单。
图1-6 表单页面 URL ：URL 是指全球资源定位器，即主要用于指明通信协议和地址的方式，如http://www.163.com就是一个完整的URL 。“http://”形式的URL 用于表示网页的Internet 位置，而“ftp//”则用于表示文件传输的一种URL 形
,第1章 网页制作基础
式。
→ IP 地址：IP 地址就是为连接在Internet 上的每一个主机分配的一个32bit 地址，
Internet 上的每台主机的IP 地址都是唯一的，就像生活中的门牌号，在网络中就命名为IP 地址。IP 地址分为A 、B 、C 、D 、E 5类，常用的是B 和C 两类，如192.168.1.1为一个C 类IP 地址。
→ 域名：域名就如同是网站的地址，Internet 中任何网站的域名都是全世界唯一的，
所以域名也就是网站的网址，如www.sohu.com 就是搜狐网站的域名。域名是由固定的网络域名管理组织在全球进行统一管理的，用户需到各地的网络管理机构进行申请，申请成功后才能获取域名，然后将其与网站服务器的IP 地址绑定，访问者通过域名就可以访问服务器中的网页了。
5
,
Dreamweaver 网页制作（第2版）
1.1.3 网页的基本组成元素
网页是由多种元素组成的。文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。而其他的很多元素（如超级链接等）都是基于这两种基本元素而创建的。如图1-7所示为网页中的文本和图像。
图1-7 网页中的文本和图像 1．文本
因文本体积小、在网络上传输速度较快、用户可以很方便地浏览和下载，故成为了网页的主要信息载体。网页中文本的样式多变，风格不一，吸引人的网页通常都具有美观的文本样式。文本的样式可通过对网页文本的属性进行设置来调整，在后面的章节将详细讲解这方面的知识。
2．图像
图像比文本更具有生动性和直观性，它可以传递一些文本不能传载的信息，如网站标识、背景等一般都是图像。
1.1.4 认识网站
网站是多个网页的集合，按网站内容可将网站分为5种类型，即门户网站、企业网站、个人网站、专业网站和职能网站，下面将分别对这几种网站进行讲解。
→ 门户网站：门户网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、
影视、体育、新闻和娱乐等方面的内容，且具有论坛、搜索和短信等功能。国内较著名的门户网站有新浪、搜狐和网易等。
→ 企业网站：企业网站是为展现企业形象和公司产品，以公司名义开发创建的网站，
其内容、样式和风格等都为展示企业自身形象。
→ 个人网站：个人网站具有较强的个性化，是以个人名义开发创建的网站，以个性
化为主。
→ 专业网站：专业网站具有很强的专业性，通常只涉及某一个领域，内容专业。如
榕树下网站即是一个专业文学网站，太平洋电脑网是一个电子产品专业网站平台。
→ 职能网站：职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子
商务网站也属于这类网站，较有名的电子商务网站有淘宝网、卓越网和当当网等。
6
,第1章 网页制作基础
1.2 网页制作的一般步骤
制作网页也是有一定顺序和步骤的，在此之前还需要做一些准备工作。
1.2.1 收集、整理资料
在确定了制作哪方面的网页后，需要先收集和整理与网页内容相关的文字资料、图像和动画素材等。如要制作影视网站，就需收集大量中外影片的信息以及演职人员资料等；要制作公司网站，就需收集公司信息、产品信息和企业文化等。
1.2.2 规划、创建站点
收集好资料后还需对资料进行有效管理，站点就是管理资料的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。规划站点时，应按素材的不同种类分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不同站点中将不同的素材进行细分。站点规划好后即可对其进行网页制作了。
1.2.3 制作网页
网站是由若干页面链接而成的。在制作网页时，为了方便浏览者轻松浏览网站，需注意以下几个方面。
→ 页面框架的构建：页面框架的构建是指对网页的整体布局，针对网页中的内容应
将网页有条理地划分为几部分。
→ 导航条：导航条通常放置在页面的上部或左侧并且应出现在网站的各个页面中，
提供各个站点的相关主题，引导浏览者有条理地浏览网站。
→ 返回首页链接：在分页页面中放置返回首页链接，以便浏览者在访问分页面后快
速回到首页，并重新选择其他页面进行浏览。
→ 添加网页元素：为网页添加相应的内容，以传递网页信息给浏览者。
1.2.4 站点测试
在制作好网页后，还需对站点进行测试后才能发布站点。站点测试可根据浏览器种类、客户端要求以及网站大小要求等进行，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。测试站点的过程中应注意以下几方面：
→ 监测页面的文件大小以及下载速度。
→ 运行链接检查报告对链接进行测试。由于在网页制作中，各站点的重新设计、重
新调整可能会使某些链接所指向的页面已被移动或删除，所以应检查站点是否有断开的链接，若有则会自动重新修复断开的链接。
→ 为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏
览器兼容性的检查。使用“检查浏览器”行为，可自动将访问者定向到另外的页
7
,
Dreamweaver 网页制作（第2版）
面，这样可解决在较早版本的浏览器中无法运行页面的问题。
→ 网页布局、字体大小、颜色和默认浏览器窗口大小等是在目标浏览器检查中无法
预见的，需在不同的浏览器和平台上预览页面进行查看。
提示： Dreamweaver 只对文件的最新保存执行检查，而不检查未保存的更改，所以对当前文档运行检查前，应先保存文件。通过站点报告测试可解决整个站点的问题，如无标题文档、空标签以及冗余的嵌套标签等。
1.2.5 网页发布
发布站点之前需在Internet 上申请一个主页空间，用来指定网站或主页在Internet 上的位置，在后面的章节中将详细讲解申请主页空间的知识。
提示：
为提高上传速度，网页发布通常使用FTP （远程文件传输）软件上传网页到服务器中，也可使用Dreamweaver 或FrontPage 中的发布站点命令进行上传。
1.2.6 站点的更新与维护
站点上传到服务器后，还需对站点进行定期或不定期的更新和维护，以保持站点内容的最新和页面元素的正常。
1.3 网页制作的原则和技巧
在制作网站时还需要注意网页制作的原则，并掌握一定的技巧，使网站做得更有水平，下面分别进行介绍。
1.3.1 网页制作的基本原则
在网页制作过程中需遵循其制作原则，下面将详细讲解。
→ 整体规划网站结构：为能合理安排站点中的各项内容，制作网页之前需对整个站
点进行有条理的规划。
→ 新颖的站点名称：名称对于网站来说非常重要，有创意的站名能给浏览者留下较
深的印象，也有利于网站的宣传和推广。给站点取名时应基于简洁、好记并且要与站点内容相适应，此外最好还能给人耳目一新的感觉。
→ 鲜明的主题：标题内容不能太长太复杂，需简单明了。主题内容需要醒目抢眼，
具有较强的针对性。
→ 网页的尺寸：为了让大多数浏览者可正常地浏览网页，在制作网页时通常需考虑
8
,第1章 网页制作基础
→
→
→
→ 满足800×600像素的显示屏。使用漂亮的网页背景可填充左右两侧多余的空白空间，可使800×600像素的网页在分辨率高的显示器中也显得较为美观。 动画不能过多：动画元素虽能使网页更加生动，但动画文件通常较大，若网页中动画过多则会降低网页的下载速度，造成网页打开速度变慢甚至不能打开的情况，因此网页中的动画不宜过多。 导航要明朗：网页的导航需明确，主页导航条中的链接项目不宜太多，最好只限于几个主要页面，通常用6～8个链接比较合适，大型网站可适当增加导航链接 数量。 优化图像：网页中的图片太多也会影响网页下载的速度。可以对网页中的图片进行优化，在图片大小和显示质量两个方面取得一个平衡，网页中的图像最好保持在10KB 以下。 定期更新网站：定期更新页面内容或更改主页的样式，让浏览者对网站保持一种
新鲜感，以保持较高的浏览率。
1.3.2 网页基本元素的标准及使用技巧
一个完整的网站都有Logo 、Banner 、文本、图像、导航栏和按钮等网页元素，这些元素被称为网页的基本元素。下面分别进行讲解。
1．Logo
Logo 即网站的标志，其制作要点如下：
→ Logo 的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般
需保证Logo 醒目，让浏览者能很快看到。
→ 站点的Logo 虽然有动态的，但不是所有的站点都适宜用动态Logo ，且动态Logo
的动作频率也不能太大，否则可能会适得其反。
2．Banner
Banner 即网站中的横幅广告，60像素、392×60像素、234×60像素、其标准尺寸有468×
125×125像素、120×90像素、120×60像素、88×31像素及120×240像素等。其中，468×60
31像素的Banner 使用最多，468×60像素的Banner 文件大小应在15KB 左右，像素和88×
31像素的Banner 文件大小最好在5KB 左右。除此之外，在一些特殊场合也可使用而88×
一些非标准尺寸的Banner ，如图1-8所示。
图1-8 非标准尺寸的Banner
9
,
Dreamweaver 网页制作（第2版）
3．文本
网页中最主要的元素就是文本，文本编辑操作对网页的整体起着决定作用。编辑文本时需注意以下几点：
→ 文本的颜色需要能够明显地与背景区别开来，让浏览者能清楚地看到文本。
→ 每行文字最好为20～30个汉字的长度，并注意段落的区分和缩进，以便于阅读。 → 同版面文本样式不宜过多，最好在3种以内。
4．图像
图像是网页中不可或缺的元素，使用图像时除了美观外，还应考虑它对网页下载速度的影响。在选择图片时应注意以下几点：
→ 图像应采用淡色系列的背景，能与主题分离的则用浅色标志或文字背景。 → 图像的主题要清晰可见，所表达的含义要简单明了。
→ 图像中的文字要求清晰可辨，不可出现朦胧、辨识不清的情况。
5．导航栏
导航栏按照放置的位置可分为横排和竖排两种；按照表现形式则有图像导航、文本导航和框架导航等。导航栏的制作需注意以下几点：
→ 最好不用图片导航，如必须使用应减小图片大小。
→ 内容丰富的网站可以使用框架导航，这样可以快速地在网站内的各栏目之间跳转，
且只需下载一次导航页面。
→ 在栏目不多的情况下，通常使用一排，如一般的个人网站或企业网站；如果导航
栏目太多，可分两排或多排进行排列，如图1-9所示。
图1-9 多排导航栏
6．按钮
按钮的大小没有具体的规定，如图1-10所示。需注意的是，按钮要和网页的整体效果协调，不要太抢眼。一般采用背景较淡、字体较深的方式，也可采用具有较强对比度的 颜色。
图1-10 各式按钮
1.3.3 网页用色技巧
网页中合适的色彩搭配可以给浏览者留下美好的印象。色彩应用的总体原则是“总体协调，局部对比”，就是网页的整体色彩效果应该保证和谐，可以在局部的、小范围的地方使用一些对比较强烈的色彩。下面将讲解几点用色的技巧。
10