网页是怎样制作的

本章要点2网页制作的基础知识6网页制作的软件7网页制作的流程小魔女:魔法师,最近我看到好多精美的网页,忍不住想自己制作一个网站,也让我的学弟学妹们羡慕一下!

魔法师:好啊,要不要我做你的老师,让你提前尝到制作网页的乐趣小魔女:那好啊.
不过,听学长们说,制作网页是很难的,我怕学不会!
魔法师:小魔女,你太小瞧自己了,况且还有我这个名师的指点,丑小鸭也会变为白天鹅.

小魔女:好的,那现在就开始给我上第1课吧!
魔法师:别心急啊!
慢慢来.
1.
1网页制作的基础知识在因特网技术空前发展的今天,越来越多的人融入到网络的浪潮中体验其带来的乐趣,那么,有多少人能真正地了解网络、知道网络呢下面就来认识它吧.

1.
1.
1HTML的简单原理上网冲浪(即浏览网页)时,呈现在人们面前的一个个漂亮的页面就是网页,是网络内容的视觉呈现,如图1-1所示.

网页是怎样制作的呢其实网页的主体是一个用HTML代码创建的文本文件,使用HTML中的相应标签,就可以将文本、图像、动画及音乐等内容包含在网页中,再通过浏览器的解析,多姿多彩的网页内容就呈现出来了.

HTML(HypertextMarkupLanguage)是超文本标记语言的缩写.
尽管称为超文本,其实它本身还是文本文件,用记事本程序就可以打开它,如图1-2所示.

图1-1网页图1-2用记事本程序打开HTML文本文件是不是有点难以想象没关系,下面就来分析一下它们之间的对应关系.
从结构上讲,HTML文件由两大部分组成:一是头部(即""标签与""标签之间的内容,如网页的标题就放置在头部),二是主体(即""标签与""标签之间的内容,也就是在浏览器中看到的内容),而为了与普通的文本文件相区别,就将""标签与""标签分别放置在网页代码最前及最后,这样,一个网页的"躯壳"就这样创建好了.

光有"躯壳"可不够,还需要添加其他的一些标签,将文本、图像、动画及音乐等内容包含在内,这样才会有血有肉.
下面对常见的文本和图像的添加方法进行讲解:文本:可以像在其他文字处理软件(如记事本)中输入文本一样直接输入就行了,不需要特别的标签,但如果要对其进行如颜色、大小、字体等属性的设置,就需要添加相应的标签了,如设置字体的颜色的代码为"文本内容",其中""标签表示要对文本进行属性设置,"color=#898989"则表示文本的颜色(网页中颜色用十六进制的RGB颜色值进行表示,也可以直接用颜色的英文来表示,如红色可以表示为"#ff0000"或"red").

图像:要添加图像,需要使用""标签,如"",其中""标签表示要添加一幅图像,"src=xuebao_pic/xuebao.
jpg"则表示添加的图像是当前站点的"pic"文件夹下的"xuebao.
jpg"这幅图像.

1.
1.
2网页的组成元素网页通常由文本、图像、动画、音乐等元素组成.
文本是网页最基本的组成元素,通过它可以非常详实地将信息传达给浏览者.
网页中最常用的中文字体是宋体,且绝大部分都使用黑色作为文本的颜色(白色背景),正文文本的大小通常为12像素(即12px,如果用磅作为度量单位则为9磅,即9pt),行间距一般为20px,而标题文本可以设置为14px或16px.
字体不能太大,否则看起来不精致,还应尽量避免多种字体混合使用,这样会使页面显得杂乱不堪.

图像也是网页中不可或缺的元素,网页中有了图像,页面效果会随之大大提升,但受网络传输速度的影响,图像不能太大,应在保证一定清晰度的条件下图像最小.
除照片级效果的图像采用jpg格式外,其他精细度要求不高的图像都应尽量采用gif格式,且其大小尽量不超过8KB为宜.

动画在网页中应用也不少,有它的加入后,平静的网页就变得生机勃勃了.
网页中常用的动画格式主要有两种,一种是gif动画,一种是swf动画.
gif动画是逐帧动画,相对比较简单,而swf动画则更富表现力和视觉冲击力,还可结合声音和互动功能,给浏览者一个强悍的视听感受,因此,在网上备受推崇,FlashMTV的大量流行就是一个明证.
生活中人们离不开音乐,同样,在网页中也少不了音乐的踪迹.
在网页中加上一首轻快抒情的音乐,让浏览者边听音乐边浏览网页,岂不快哉!
但受版权的约束,在专业网站中很少使用背景音乐,只有在部分个人主页中有所使用,这也不能不说是一种遗憾.

1.
1.
3网页常见部分的称谓及规范网页中有一些专业的术语,如Logo、Banner、导航栏、超级链接、版权信息等,如图1-3所示即为这些术语所指对象.

图1-3网页术语1.
LogoLogo是网站的"商标",一般包含网站名称、英文网址、网站标志、网站理念4个部分,也可只包含其中一个部分.

Logo的设计要求精炼、简洁,一目了然.
简单的Logo比复杂的Logo容易记忆,符号化的Logo比自然图像更具说服力.

Logo的位置一般在左上角,这是视觉的焦点,第一眼往往看到的就是这里.
Logo的尺寸通常控制在160*60px之内,一般Banner的高度为60px,Logo比Banner高的话则排版上就不太合适.
160px的宽度已经足够,在Logo左右留点空白可以显出网站的品位.

2.
BannerBanner一般用作宣传网页内容,也称之为广告条,其位置一般在Logo的右侧.
Banner的标准大小为468*60px,其设计要点是清晰明确,要服从整体,即形状、色彩的感觉要符合整个页面的版式和色调.

Banner通常为动画效果,可以用ImageReady制作成gif动画,也可以用Flash做成swf动画.

3.
导航栏导航栏是网页中有效的指向标志.
导航栏可分为框架导航、文本导航和图片导航等,根据导航栏放置的位置可分为横排导航栏和竖排导航栏.
导航栏的使用原则如下:对于内容丰富的网站,可以使用框架导航,以便浏览者在任何页面都可快速切换到另一个栏目.

若利用JS、DHTML等动态隐藏层技术实现的导航栏,应注意访问者的浏览器是否支持.

图片导航虽很美观,但占用的空间较大,会影响网页打开的速度,不应多用.

多排导航条应在导航栏目很多的情况下使用.
导航栏目超过6个可考虑分两排进行排列,如果栏目过多可以多行排列.
4.
按钮按钮实际上是一种超级链接,按钮的大小及样式没有具体的规定,但一般要符合所处位置的色调,外形不能太抢眼.

5.
超级链接超级链接是指页面对象之间的链接关系,它可以是网站内部页面、对象的链接,也可以是与其他网站的链接,通过单击网页中的链接就可以转到相应的页面上进行浏览.
这样大大方便了用户在各个页面对象之间的跳转.

6.
版权信息版权信息一般位于网页的最底部,主要起版权申明等作用,部分网站也将计数器等内容放置在这一区域.
版权信息的一般写法为"CopyrightBy网站名称,2000-2006.
AllRightsReserved",将其中的"网站名称"替换为自己网站的名称即可.
另外,还可以加入版权符号,或使用中文来申明版权.

1.
2网页制作的软件由于网页元素的多样化,因此要想制作出精致美观、丰富生动的网页不是单靠一种软件就能实现的,需结合使用多种软件才能实现,如图像处理软件Photoshop、动画制作软件Flash,以及网页布局软件Dreamweaver等.

1.
2.
1图像处理软件无论是网页布局,还是网站宣传广告的制作等诸多方面都离不开图像处理,由此,图像处理软件的选择就显得非常重要,在网页制作中最常用的是Fireworks及Photoshop.
Fireworks是Macromedia公司专门为网页图像量身订做的图像处理软件,使用它可以轻松地对图像进行处理、制作gif动画,制作网页中常用的变换图像、导航栏、弹出菜单等,利用它的切片功能,还可以将布局好的网页直接切片输出为网页.
由于它与Dreamweaver同属一个公司出品,因此它们之间具有很好的兼容性和互操作性,同时它内置的许多图像和按钮制作功能使制作网页更方便、快捷.

Photoshop一直是图像处理软件的领导者,有着非常强大的图像处理能力,在网页图像处理方面也不弱,通过它可以创建Web照片画廊;与ImageReady配合,还可以制作gif动画、翻转按钮等,利用切片功能,它也可以将布局好的网页切片输出为网页,并可对每一张输出图像的格式、大小等进行设置和优化,实在是一款不可多得的软件.

1.
2.
2动画制作软件动画制作软件首推Flash,它具有小巧灵活、生成文件小、表现力丰富、视觉冲击力强等诸多优点,网上风行的FlashMTV就是它的杰作,一些网站的Logo、Banner,甚至宣传广告等也是用它制作的.
看到它强悍的视听效果,没有人不被其深深吸引的.

Flash制作的动画播放时需要专门的播放器,如果浏览器中没有安装该播放器插件,那么将看不到动画效果.
另外,制作Flash动画需要制作者有一定的专业知识,因此如果既想简便又想制作Flash动画,那么可以选择Swish之类的软件,利用Swish内置的各种特效,完全可以做出专业级的Flash特效.

1.
2.
3网页布局软件Dreamweaver是最常用的网页布局软件,它不仅能进行专业的可视化网页设计编辑,而且还是一个出色的网站管理、维护的最佳工具.
它的最大特点就是能够快速创建各种静态、动态的网页,而且所生成的网页代码精小,是一款制作网页的优秀软件.

除了Dreamweaver之外,还有Microsoft公司出品的Frontpage.
它是Microsoft公司Office办公自动化套装组件之一,是一款编写网页和创建网站的优秀软件.
它内含大量的模板,使用时只需选择相应的命令、设置相应的属性即可,特别适合初学者使用.
但是,由于Frontpage大部分网页是基于表格的,所以它生成的网页代码伴有大量的垃圾代码,网上传播速度较慢,且占用的存储空间也过大,故专业制作人员很少选用它.

1.
3网页制作的流程网页制作是一个系统的过程,在正式制作网页之前应有一个整体的规划,如网站主题定位、建立网站架构等;而制作好网页后,还有一系列的后期工作,如网站上传与宣传、更新与维护网站内容等.

1.
3.
1网站主题定位在网页制作初期阶段,决定站点的服务对象是关键的第一步.
设计者应该清楚建立该站点后,哪些用户可以从该网站获得有用的信息.
在网络社会中,网络是一个庞大的群体,每一个用户都有不同的需求,上网的软硬件环境也各不相同,因此要建立一个令每一个人都满意的网站是不可能的,但是可以建立一个适合大多数人的网站.
所以,在建站的初期,就要为网站的服务群进行定位,尽量做到有的放矢.

如果是制作个人主页,则最好选择自己感兴趣的内容作为建站的内容,如对足球感兴趣,则可以建站以报道最新赛事、球星动态及自己的一些看法等;如果是建立企业网站,则需要深入了解企业文化,了解企业需要向客户提供哪些服务等.

另外,网站主题应小而精,内容尽量专业,涉及主题方面信息的内容要全.
不要贪大求全而每方面内容较少,这样当浏览者想深入了解一下每方面的内容时就没有内容了,反而给人一种肤浅、内容少的印象,这样就适得其反了.

1.
3.
2建立网站架构确定网站主题后,应将网站所包含的内容列出来,并将其结构化.
确定结构时可以假想自己为浏览者,考虑浏览者如何访问网站,如何从一个页面跳到另一个页面,怎样防止他们"迷路"根据浏览者的访问顺序将内容设计为树型目录,如图1-4所示.
一般不要级数太多,尽可能少于4级,否则会让浏览者感觉比较繁琐,不方便网站管理.
如果内容太多,绘制一个导航图也是非常必要的,这样可以让浏览者更好、更舒服地访问网站内容,同时也更容易在各栏目间进行切换,如图1-5所示即为一个导航设计.

图1-4网站树型目录图1-5导航设计在目录结构设计时要注意按栏目内容分别建立子目录,如图1-4所示中bbs(论坛)及boke(博客),并在每个子目录下创建放置图像、动画、音乐等素材的文件夹,如pic,如果要与其他栏目的文件夹以示区别,也可以在前面加上栏目文件夹名称,如图1-4所示中bbs栏目的文件夹bbspic.
另外,不论是站点名称或是站点内文件夹名称、网页名称、图像等素材的名称一概不要使用中文,并最好使用小写字母或数字进行命名,不要包含特殊符号.

1.
3.
3设计网站形象网站形象设计十分关键,这是一个网站的"脸面",在"眼球"经济的时代,一个网站的成败大部分取决于网站形象设计的好坏,当然,网站内容也很重要.
但不管怎样,大家都不愿意看到一个衣衫褴褛的"乞丐"站在面前吧.

1.
网站标志网站标志,也就是Logo,即是利用一切可利用的视觉元素和方法,针对主题,概括出高度简洁、集中体现站点特色和内涵的图形与文字.
标志可以是中文、英文字母,可以是符号、图案,也可以是动物或人物等.
如新浪网的眼睛标志、迪斯尼网站的米老鼠标志、搜狐的卡通狐狸,都是以有代表性的人物或动物作为蓝本,再加以卡通化和艺术化处理而制作出来的.
中国工商银行网站的铜钱标志,奔驰汽车网站的方向盘标志,则是以本行业有代表性的物品作为标志.
另外,采用不同的字体、字母和变形,字母的组合可以轻易地制作美观易记的网站标志,如新浪网用字母sina与眼睛图案作为标志.
如图1-6所示即为一些典型的网站标志.

图1-6典型网站标志2.
网站标准色彩标准色彩是指能体现网站形象和延伸内涵的色彩,就如可口可乐的鲜红、百事可乐的蓝加红.
网站给人的第一印象来自网站的色彩感觉,确定网站的标准色彩是相当重要的一步.
建议选用一种标准色(主色),适当使用两种标准色,反对使用两种以上的标准色.
最好从网站的服务对象出发,根据服务对象及网站的内容来确定标准色彩.
如果想创建一个儿童网站,那么就可以以红色或黄色为标准色彩,如果要创建一个关于茶叶的网站,则可以使用绿色作为标准色彩.
不要担心色彩会单调,加上各种小图案的点缀,以及相近色的使用,完全可以创造出绚烂多彩的网页出来.

3.
网站标准字体和标准色彩一样,标准字体是指用于标志、标题、主菜单的特有字体.
一般网页默认的字体是宋体.
为了体现站点的"与众不同"和特有风格,可以根据需要选择一些特别字体.
例如,为了体现专业可以使用粗仿宋体,体现设计精美可以用广告体,体现亲切随意可以用手写体等.
目前常见的中文字体有二三十种,常见的英文字体有近百种,网络上还有许多专用英文艺术字体下载,要寻找一款满意的字体并不困难.

4.
网站宣传标语网站宣传标语也可以说是网站的精神、网站的目标.
可以用一句话甚至一个词来高度概括,类似实际生活中的广告金句.
如雀巢的"味道好极了"、麦斯威尔的"好东西和好朋友一起分享"、Intel的"给你一个奔腾的心",以及鲜橙多的"多C多漂亮"等.

1.
3.
4制作网站页面具体到每一个页面的制作时,首先要做的就是设计版面布局.
就像传统的报刊杂志一样,需要将网页看作一张报纸、一本杂志来进行排版布局.

版面指的是在浏览器中看到的完整的一个页面的大小.
因为每个人的显示器分辨率不同,所以同一个页面的大小可能出现640*480px、800*600px或1024*768px等不同尺寸.
目前主要以800*600px分辨率的用户为主,在实际制作网页时,应将网页内容宽度限制在778px以内(可以用表格或层来进行限制),这样在用800*600px分辨率的显示器进行浏览时,除去浏览器左右的边框后,刚好能完全显示出网页的内容.

布局,就是以最适合浏览的方式将图片和文字排放在页面的不同位置.
这是一个创意的过程,需要一定的经验,当然也可以参考一些优秀的网站来寻求灵感.
本书第1~5章会有这方面的详细叙述.

版面布局完成后,就可以着手制作每一个页面了,通常都从首页做起,制作过程中可以先使用表格或层对页面进行整体布局,然后将需要添加的内容分别添加到相应的单元格中,并随时预览效果并进行调整,直到整个页面完成并达到理想的效果.
然后使用相同的方法完成整个网站中其他页面的制作.

1.
3.
5网站发布与宣传在发布网页前必须在Internet上申请一个主页空间,用于指定网站或主页在Internet上的放置位置.
主页空间有免费和收费两种.
免费主页空间的大小和运行的技术条件会受一定限制;收费主页空间一般由网站托管机构提供,其空间大小及技术条件可供用户根据需要进行选择.
如果是一般的个人网站可选择免费主页空间;如果是商业网站、公司、专业性、行业性网站或需要较为稳定的运行环境的网站最好选择收费的主页空间.

主页空间申请成功后,即可使用FTP(远程文件传输)软件将网站上传到服务器中,常用的上传/下载软件有LeapFTP、CuteFTP及FlashFXP等.
下面以LeapFTP为例讲解网站的上传过程,其具体操作如下:步骤1启动LeapFTP,打开如图1-7所示窗口.
步骤2单击工具栏中的按钮,弹出"站点管理器"对话框,如图1-8所示.
步骤3单击按钮,弹出"添加站点"对话框,在"输入站点名"文本框中输入站点的名称,如xuebao,如图1-9所示.

步骤4单击按钮返回"站点管理器"对话框,在右侧的"地址"文本框中输入提供主页空间的FTP服务器的地址,如"202.
13.
5.
8",选中复选框,在"用户名"文本框中输入登录FTP服务器的名称,如"xuebao888",在"密码"文本框中输入登录服务器的密码,在"本地路径"文本框中输入本地站点所在的位置"D:xuebao",完成设置后的对话框如图1-10所示.

图1-7LeapFTP的界面图1-8"站点管理器"对话框图1-9"添加站点"对话框图1-10配置FTP服务器信息步骤5单击按钮,LeapFTP即开始连接FTP服务器,连接成功后,在左侧列表中选择要上传的文件后按住鼠标左键不放,拖动到右侧列表中释放鼠标即可上传文件,如图1-11所示.

步骤6在右侧列表选中要下载的文件后按住鼠标左键不放,拖动到左侧列表中释放鼠标即可下载文件,如图1-12所示.
图1-11上传文件图1-12下载文件网站上传后,可以打开浏览器,在"地址"文本框中输入申请的网址进行访问,确认无误后即可投入使用了.

网站上传后,还需要对网站进行宣传以获取更多的访问量,可以通过与其他网站建立友情链接、将网站注册到yahoo等专业搜索网站、在论坛里留言时留下自己的网址并作介绍等方式来实现.

1.
3.
6更新与维护网站内容在这个阶段,网站已经正式发布,整个网站已进入正常运行阶段.
这时的主要任务是不断地更新陈旧的网页信息,及时对访问者的留言和反馈信息进行响应,并及时加入一些新的信息.
同时,要不断采用新技术升级网页,使网页的访问更为方便快捷、信息含量更加丰富、界面更加美观.

网站的所有原始文件最好进行备份,以备更新网页所需或网站受到攻击时进行恢复.
另外,如果网站有数据库文件,如保存留言簿留言内容的数据库文件,则需要定时将其下载备份,以免网站遭到恶意破坏时丢失重要数据.
要对网页页面进行修改时,可以使用备份的网页进行修改或下载相应的网页后对其进行修改.
修改完成并在本地计算机中调试正常后,再上传更新后的网页到服务器覆盖以前的旧网页即可.

1.
4小结通过今天的学习,小魔女终于对网页制作有了初步的了解,看到网页制作的魔法大门敞开在自己面前,小魔女在心花怒放的同时就开始幻想着要制作出漂亮、有格调的网页让魔法师看看自己的能力.

这些基础知识都是学习网页制作初期必须掌握的.
若把网页制作比作盖房子,这些基础知识就好比是建筑物的地基,只有地基打牢了才能盖出气势恢弘或优雅别致的建筑物.

魔法师告诫小魔女,不要看到那些漂亮复杂的网页就感慨制作者水平高,自己无法达到,与其临渊羡鱼不如退而结网,要相信自己经过努力学习一定会做出漂亮的网页.

1.
5过关练习(1)用IE浏览器打开www.
jzbooks.
com/index.
html网页,选择【查看】/【源文件】命令,在打开的记事本中查看各代码,并试着与浏览器中的内容进行对照.

(2)制作一个表格,将网页中相关的制作标准放入其中.
(3)用IE浏览器打开www.
jzbooks.
com/wenti.
asp网页,利用本章所学知识指出各个常见部分,如Logo等的位置.