网页网站域名空间

第1章网页制作基础学习目标了解网页制作基础知识掌握网页制作的一般步骤掌握网页制作的原则和技巧目标任务&项目案例天涯社区网站首页淘宝交易网站邮箱登录界面邮箱注册页面网络以其独特的优势渗入到人们的生活中,并已成为生活的一个重要组成部分,而网页在整个网络中占据了绝对的分量,几乎所有的网络活动都与网页有关.
若想学习网页制作,需先了解一些网页的基本知识,如网页的定义、分类以及网页制作的基本步骤和规则等.
本章将讲解网页制作的基础知识,为以后学习网页制作做好铺垫.

1.
1网页制作基础知识学习网页制作应先了解网页的基本概念,学好这些知识是制作出漂亮、美观的网页的前提,为以后的学习打好基础.

1.
1.
1网页的定义和分类上网时浏览的一个个页面就是网页,网页又称为Web页,其中的图像、文字、超级链接等是构成网页的基本元素,如图1-1所示即为榕树下网站的首页.
网页可按其在网站中的位置分类,也可按其表现形式分类.
下面将分别进行讲解.

图1-1榕树下网站首页1.
按位置分类按网页在网站中的位置可将其分为主页和内页,主页是指网站的主要导航页面,一般是进入网站时打开的第一个页面,也称为首页;内页是指与主页相链接的页面,也就是网站的内部页面.

(提示:一些网站的首页并非主页,其作用只是为了欢迎访问者或者引导访问者进入主页,所以首页并不一定就是主页.

2.
按表现形式分类按网页的表现形式可将其分为静态网页和动态网页,具体含义如下.
静态网页:指用HTML语言编写的网页,其制作方法简单易学,但缺乏灵活性.

动态网页:这类网页使用ASP、PHP、JSP和CGI等程序生成,具有动态效果,其制作方法较静态网页复杂.

(注意:静态网页和动态网页不是以网页中是否包含动态元素来区分的,而是针对客户端与服务器端是否发生交互行为而言的.
不发生交互的是静态网页,发生交互的是动态网页.

1.
1.
2网页的基本概念在网页制作过程中常常会遇到一些专业名词,如站点、发布、浏览器、导航条、超级链接、表单、URL、IP地址以及域名,需掌握其具体含义才能在网页制作过程中轻松操作.
下面分别讲解这些专业名词.

站点:站点是一个管理网页文档的场所,简单地讲,一个个网页文档链接起来就构成了站点.
站点可以小到一个网页,也可大到一个网站.

发布:发布就是把制作好的网页上传到网络中的过程.
浏览器:浏览器是一种把互联网上的文本文档和其他类型的文件翻译成网页的软件.
通过浏览器,可以快捷地连接Internet.
目前使用人数最多的浏览器是Microsoft公司的IE浏览器,电脑中安装了操作系统都会捆绑安装IE浏览器,如图1-2所示为IE浏览器打开的网页.
另外,还有很多其他浏览器可供用户安装使用,如腾讯TT浏览器、火狐浏览器、360安全浏览器以及搜狗浏览器等.
如图1-3所示为搜狗浏览器打开的网页.

图1-2IE浏览器图1-3搜狗浏览器导航条:导航条就如同一个网站的路标,有了它就不会在浏览网站时"迷路",如图1-4所示.
导航条链接着各个页面,只要单击导航条中的超级链接就能进入相应的页面.

图1-4导航条超级链接:超级链接在网页中起着重要的作用,主要用于将不同页面链接起来,链接的范围可以是同一站点内的页面,也可以是其他网站的页面.
超级链接主要有文字链接和图像链接等,通常将鼠标指针移动到网页对象上,如果该对象是一个超级链接,鼠标指针会变为一个手形,如图1-5所示.
单击超级链接就能打开其指定的目标网页.

图1-5超级链接表单:表单是具有交互性的动态网页,常用于在注册网站会员和申请邮箱等活动时提交用户信息.
如图1-6所示为申请网易邮箱的表单.

图1-6表单页面URL:URL是指全球资源定位器,即主要用于指明通信协议和地址的方式,如http://www.
163.
com就是一个完整的URL.
"http://"形式的URL用于表示网页的Internet位置,而"ftp//"则用于表示文件传输的一种URL形式.

IP地址:IP地址就是为连接在Internet上的每一个主机分配的一个32bit地址,Internet上的每台主机的IP地址都是唯一的,就像生活中的门牌号,在网络中就命名为IP地址.
IP地址分为A、B、C、D、E5类,常用的是B和C两类,如192.
168.
1.
1为一个C类IP地址.
域名:域名就如同是网站的地址,Internet中任何网站的域名都是全世界唯一的,所以域名也就是网站的网址,如www.
sohu.
com就是搜狐网站的域名.
域名是由固定的网络域名管理组织在全球进行统一管理的,用户需到各地的网络管理机构进行申请,申请成功后才能获取域名,然后将其与网站服务器的IP地址绑定,访问者通过域名就可以访问服务器中的网页了.

1.
1.
3网页的基本组成元素网页是由多种元素组成的.
文本和图像是网页中最基本的元素,更是网页信息的主要载体,它们在网页中起着非常重要的作用.
而其他的很多元素(如超级链接等)都是基于这两种基本元素而创建的.
如图1-7所示为网页中的文本和图像.

图1-7网页中的文本和图像1.
文本因文本体积小、在网络上传输速度较快、用户可以很方便地浏览和下载,故成为了网页的主要信息载体.
网页中文本的样式多变,风格不一,吸引人的网页通常都具有美观的文本样式.
文本的样式可通过对网页文本的属性进行设置来调整,在后面的章节将详细讲解这方面的知识.

2.
图像图像比文本更具有生动性和直观性,它可以传递一些文本不能传载的信息,如网站标识、背景等一般都是图像.

1.
1.
4认识网站网站是多个网页的集合,按网站内容可将网站分为5种类型,即门户网站、企业网站、个人网站、专业网站和职能网站,下面将分别对这几种网站进行讲解.

门户网站:门户网站是一种综合性网站,涉及领域非常广泛,包含文学、音乐、影视、体育、新闻和娱乐等方面的内容,且具有论坛、搜索和短信等功能.
国内较著名的门户网站有新浪、搜狐和网易等.

企业网站:企业网站是为展现企业形象和公司产品,以公司名义开发创建的网站,其内容、样式和风格等都为展示企业自身形象.

个人网站:个人网站具有较强的个性化,是以个人名义开发创建的网站,以个性化为主.

专业网站:专业网站具有很强的专业性,通常只涉及某一个领域,内容专业.
如榕树下网站即是一个专业文学网站,太平洋电脑网是一个电子产品专业网站平台.

职能网站:职能网站具有专门的功能,如政府职能网站等.
目前逐渐兴起的电子商务网站也属于这类网站,较有名的电子商务网站有淘宝网、卓越网和当当网等.

1.
2网页制作的一般步骤制作网页也是有一定顺序和步骤的,在此之前还需要做一些准备工作.
1.
2.
1收集、整理资料在确定了制作哪方面的网页后,需要先收集和整理与网页内容相关的文字资料、图像和动画素材等.
如要制作影视网站,就需收集大量中外影片的信息以及演职人员资料等;要制作公司网站,就需收集公司信息、产品信息和企业文化等.

1.
2.
2规划、创建站点收集好资料后还需对资料进行有效管理,站点就是管理资料的场所.
在创建站点之前需对站点进行规划,站点的形式有并列、层次和网状等,用户需根据实际情况选择.
规划站点时,应按素材的不同种类分为几个站点,再将收集好的素材分类放置在相应站点中,然后在不同站点中将不同的素材进行细分.
站点规划好后即可对其进行网页制作了.

1.
2.
3制作网页网站是由若干页面链接而成的.
在制作网页时,为了方便浏览者轻松浏览网站,需注意以下几个方面.

页面框架的构建:页面框架的构建是指对网页的整体布局,针对网页中的内容应将网页有条理地划分为几部分.

导航条:导航条通常放置在页面的上部或左侧并且应出现在网站的各个页面中,提供各个站点的相关主题,引导浏览者有条理地浏览网站.

返回首页链接:在分页页面中放置返回首页链接,以便浏览者在访问分页面后快速回到首页,并重新选择其他页面进行浏览.

添加网页元素:为网页添加相应的内容,以传递网页信息给浏览者.
1.
2.
4站点测试在制作好网页后,还需对站点进行测试后才能发布站点.
站点测试可根据浏览器种类、客户端要求以及网站大小要求等进行,通常是将站点移到一个模拟调试服务器上对其进行测试或编辑.
测试站点的过程中应注意以下几方面:监测页面的文件大小以及下载速度.
运行链接检查报告对链接进行测试.
由于在网页制作中,各站点的重新设计、重新调整可能会使某些链接所指向的页面已被移动或删除,所以应检查站点是否有断开的链接,若有则会自动重新修复断开的链接.

为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常,可进行浏览器兼容性的检查.
使用"检查浏览器"行为,可自动将访问者定向到另外的页面,这样可解决在较早版本的浏览器中无法运行页面的问题.

网页布局、字体大小、颜色和默认浏览器窗口大小等是在目标浏览器检查中无法预见的,需在不同的浏览器和平台上预览页面进行查看.

(提示:Dreamweaver只对文件的最新保存执行检查,而不检查未保存的更改,所以对当前文档运行检查前,应先保存文件.
通过站点报告测试可解决整个站点的问题,如无标题文档、空标签以及冗余的嵌套标签等.

1.
2.
5网页发布发布站点之前需在Internet上申请一个主页空间,用来指定网站或主页在Internet上的位置,在后面的章节中将详细讲解申请主页空间的知识.

(提示:为提高上传速度,网页发布通常使用FTP(远程文件传输)软件上传网页到服务器中,也可使用Dreamweaver或FrontPage中的发布站点命令进行上传.

1.
2.
6站点的更新与维护站点上传到服务器后,还需对站点进行定期或不定期的更新和维护,以保持站点内容的最新和页面元素的正常.

1.
3网页制作的原则和技巧在制作网站时还需要注意网页制作的原则,并掌握一定的技巧,使网站做得更有水平,下面分别进行介绍.

1.
3.
1网页制作的基本原则在网页制作过程中需遵循其制作原则,下面将详细讲解.
整体规划网站结构:为能合理安排站点中的各项内容,制作网页之前需对整个站点进行有条理的规划.

新颖的站点名称:名称对于网站来说非常重要,有创意的站名能给浏览者留下较深的印象,也有利于网站的宣传和推广.
给站点取名时应基于简洁、好记并且要与站点内容相适应,此外最好还能给人耳目一新的感觉.

鲜明的主题:标题内容不能太长太复杂,需简单明了.
主题内容需要醒目抢眼,具有较强的针对性.

网页的尺寸:为了让大多数浏览者可正常地浏览网页,在制作网页时通常需考虑满足800*600像素的显示屏.
使用漂亮的网页背景可填充左右两侧多余的空白空间,可使800*600像素的网页在分辨率高的显示器中也显得较为美观.

动画不能过多:动画元素虽能使网页更加生动,但动画文件通常较大,若网页中动画过多则会降低网页的下载速度,造成网页打开速度变慢甚至不能打开的情况,因此网页中的动画不宜过多.

导航要明朗:网页的导航需明确,主页导航条中的链接项目不宜太多,最好只限于几个主要页面,通常用6~8个链接比较合适,大型网站可适当增加导航链接数量.
优化图像:网页中的图片太多也会影响网页下载的速度.
可以对网页中的图片进行优化,在图片大小和显示质量两个方面取得一个平衡,网页中的图像最好保持在10KB以下.

定期更新网站:定期更新页面内容或更改主页的样式,让浏览者对网站保持一种新鲜感,以保持较高的浏览率.

1.
3.
2网页基本元素的标准及使用技巧一个完整的网站都有Logo、Banner、文本、图像、导航栏和按钮等网页元素,这些元素被称为网页的基本元素.
下面分别进行讲解.

1.
LogoLogo即网站的标志,其制作要点如下:Logo的位置通常位于网页的左上角,也可根据需要将其置于其他任何位置,一般需保证Logo醒目,让浏览者能很快看到.

站点的Logo虽然有动态的,但不是所有的站点都适宜用动态Logo,且动态Logo的动作频率也不能太大,否则可能会适得其反.

2.
BannerBanner即网站中的横幅广告,其标准尺寸有468*60像素、392*60像素、234*60像素、125*125像素、120*90像素、120*60像素、88*31像素及120*240像素等.
其中,468*60像素和88*31像素的Banner使用最多,468*60像素的Banner文件大小应在15KB左右,而88*31像素的Banner文件大小最好在5KB左右.
除此之外,在一些特殊场合也可使用一些非标准尺寸的Banner,如图1-8所示.

图1-8非标准尺寸的Banner3.
文本网页中最主要的元素就是文本,文本编辑操作对网页的整体起着决定作用.
编辑文本时需注意以下几点:文本的颜色需要能够明显地与背景区别开来,让浏览者能清楚地看到文本.

每行文字最好为20~30个汉字的长度,并注意段落的区分和缩进,以便于阅读.

同版面文本样式不宜过多,最好在3种以内.
4.
图像图像是网页中不可或缺的元素,使用图像时除了美观外,还应考虑它对网页下载速度的影响.
在选择图片时应注意以下几点:图像应采用淡色系列的背景,能与主题分离的则用浅色标志或文字背景.

图像的主题要清晰可见,所表达的含义要简单明了.
图像中的文字要求清晰可辨,不可出现朦胧、辨识不清的情况.
5.
导航栏导航栏按照放置的位置可分为横排和竖排两种;按照表现形式则有图像导航、文本导航和框架导航等.
导航栏的制作需注意以下几点:最好不用图片导航,如必须使用应减小图片大小.
内容丰富的网站可以使用框架导航,这样可以快速地在网站内的各栏目之间跳转,且只需下载一次导航页面.

在栏目不多的情况下,通常使用一排,如一般的个人网站或企业网站;如果导航栏目太多,可分两排或多排进行排列,如图1-9所示.

图1-9多排导航栏6.
按钮按钮的大小没有具体的规定,如图1-10所示.
需注意的是,按钮要和网页的整体效果协调,不要太抢眼.
一般采用背景较淡、字体较深的方式,也可采用具有较强对比度的颜色.
图1-10各式按钮1.
3.
3网页用色技巧网页中合适的色彩搭配可以给浏览者留下美好的印象.
色彩应用的总体原则是"总体协调,局部对比",就是网页的整体色彩效果应该保证和谐,可以在局部的、小范围的地方使用一些对比较强烈的色彩.
下面将讲解几点用色的技巧.

在同一页面中,可以使用相近色来设置页面中的各种元素.
网页中的文字与背景要求有较高的对比度,才能更加清晰地看到网页中的文字.
通常用白底黑字或淡色背景深色文字.
可以先确定背景色,然后在背景色的基础上加深文字的颜色以突出文字显示,并能使颜色协调.

导航栏区域通常需要将菜单背景颜色设置得较暗一些,然后通过较亮的颜色、较强烈的图形元素或独特的字体将网页内容和导航菜单区分开来.

在制作网页时,首先应从网站的类型以及网站所服务的群体对象来确定整个站点的主色调.
如校园类站点可以选用绿色;新闻类站点可以选用深红色或黑色再搭配高级灰;旅游类站点可以选用草绿色搭配黄色;游戏类站点可以选用黑色;政府类站点可以选用红色和蓝色.
如图1-11所示为青城山·都江堰风景区网站的首页,以绿色为主.
图1-11旅游类站点的主色调在同一页面中,如果要在两种截然不同的色调之间过渡,需在它们中间搭配上灰色、白色或黑色,使其过渡自然.

站点Logo一般采用深色,并有较高的对比度,让浏览者很容易看到并加深印象.
标题可以使用与网页内容差异较大的字体和颜色,也可以采用与网页内容相反的颜色来衬托.
如图1-12所示为人民网的主页以及Logo图标.

图1-12Logo网页设计的用色也要特别关注流行色的发展.
每年日本或者欧美都要发布一批流行色,这是从大量人的喜好中挑选出来的.
将这种观念应用到自己的设计中去,做一个色彩方面的有心人,就会使自己的网页富有朝气,更受欢迎.

用色时可以先选定一种色相,然后调整饱和度或亮度产生新的色彩,这样用色的页面看起来色彩统一、有层次感.
也可以先选定一种色彩,然后再选择它的对比色,使页面色彩丰富而又不花哨.
还可以用一个色系,如淡蓝、淡黄、淡绿或土黄、土灰、土蓝.

如果是创建公司站点,还应考虑公司的企业文化、企业背景及CI、VI标识系统和产品的色彩搭配等.

如果有需要突出显示的内容,则可以采用一些鲜艳、反差大的颜色来吸引浏览者的视线,达到"万绿丛中一点红"的效果.

(注意:侧栏通常用于显示附加信息,不是所有的网页都有.
另外,网页底部可以考虑使用与侧栏相同或稍微淡一些的颜色.

1.
4上机及项目实训1.
4.
1浏览各类网站熟悉网站构成本次实训将浏览各种类型的网站,通过观察不同类型网站的风格,了解网页制作的部署技巧.

操作步骤如下:(1)启动IE浏览器,在地址栏中输入"http://www.
sina.
com.
cn/"并按Enter键打开新浪网首页,观察门户网站的页面布局和各组成元素的搭配,如图1-13所示.

(2)在浏览器地址栏中输入"http://www.
autohome.
com.
cn/"并按Enter键打开汽车之家首页,观察专题类网站的用色及页面版面设计,如图1-14所示.

图1-13门户网站图1-14专题类网站(3)在地址栏中输入"http://www.
taobao.
com/"并按Enter键打开淘宝网首页,观察交易类网站的页面布局特点及Banner的制作和使用,如图1-15所示.

(4)在地址栏中输入"http://www.
tianya.
cn/"并按Enter键打开天涯社区网站的首页,观察非主页式首页以简洁、美观为主的制作技巧,如图1-16所示.

图1-15交易类网站图1-16非主页式首页(5)单击"浏览进入"超级链接进入其主页,观察社区论坛类网站的布局和用色技巧,如图1-17所示.

(6)在地址栏中输入"http://www.
chinagwy.
org/"并按Enter键打开国家公务员网站首页,观察政府类网站的用色及布局方式,如图1-18所示.

图1-17社区论坛类网站图1-18政府类网站1.
4.
2注册电子邮箱熟悉网页基本元素通过注册电子邮箱,熟悉网页中的文字、图像、超级链接、表单、按钮等基本组成元素的作用和应用方式,为后面的学习做好准备.

本练习可结合立体化教学中的视频演示进行学习(立体化教学:视频演示第1章注册电子邮箱熟悉网页基本元素.
swf).
主要操作步骤如下:(1)启动IE浏览器,在地址栏中输入"http://email.
163.
com"并按Enter键进入网易邮箱首页,观察登录页面各种网页元素的设计后单击"立即注册"超级链接进入注册页面,如图1-19所示.

(2)在打开的注册页面中按照提示填写或选择各种注册信息,填写完后单击按钮提交信息,如图1-20所示.
图1-19网易邮箱首页图1-20填写表单(注意:在输入邮箱用户名时需单击后面的按钮检测申请的账号是否已经被其他人注册,如果已有人注册将不能使用,只能重新输入其他用户名,这也是网页制作中表单的一项重要功能.

(3)在打开的验证页面中按提示在文本框中输入验证信息,单击按钮提交.

(4)在打开的"注册成功"页面中显示了注册的重要信息,牢记后关闭页面完成注册,这时可打开邮箱登录页面进行登录.

1.
5练习与提高(1)浏览不同的网站,观察其用色技巧和各种元素之间的色彩搭配情况.
(2)通过在网上搜索,收集一些制作网页的文字资料和图片资料,以在后面制作网页时使用.

提示:收集资料时需先确定自己需要做哪种类型的网站,做好网站规划,才能有的放矢.