单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,信息产业IT技术培训指定教材,网页设计实用教程,耿强 主编,杜艳红 刘建昌 副主编,中国青年出版社,通过本章学习，应该掌握以下内容：,认识网页,构成网页的基本要素,制作网页的基本工具,美化网页的基本工具,网页制作的基本步骤,第1章 网页制作初识,1.1 一个校园网的制作示例,1.1.1 主要网页画面,1.1.2 网页的基本功能,1.2,网页的基本要素,1.2.1 文字,文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，当用户浏览时，可以很快的展现在用户面前另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等1标题,一个网页通常都有一个标题，表明本网页的主要内容标题是否醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的网页中的文字不能太大或太小太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。
一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉2字号,在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型但在网页制作上却要慎重因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体这样浏览者就无法得到你预想的浏览效果，甚至适得相反如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了3字型,1.2.2 表格,当文本内容较多时，可以利用表格形式来实现表格是在网页上的一行或多行单元格，用来组织网页的布局或系统地布置数据，用户可以放置任何东西在表格的单元格中，包括文字、图形和表单等表格具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的记录或总结工具表格还可以用来控制网页中信息的布局方式许多大型的网站都是使用表格来进行页面布局的,使页面看起来更加直观和有条理1.2.3 图形,这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。
网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示图形在网页中通常有如下应用：,1菜单按钮,网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面2背景图形,为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图背景图可以使网页更加华丽，使人感到界面友好但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形1.2.4 链接标志,网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站链接的标志有文字和图形两种制作一些精美的图形作为链接按钮，使它和整个网页融为一体1.2.5 交互功能,Internet区别其他媒体的一个重要标志就是它的交互功能网页的交互功能其他媒体是无法比拟的通常网页的交互功能都是利用表单来实现的表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。
1.3,网,网,页,页制,作,作和,美,美化,工,工具,HTML,（,（HypertextMarkupLanguage,）,）是,一,一种,专,专门,用,用于Web页,制,制作,的,的编,程,程语,言,言，,用,用来,描,描述,超,超文,本,本各,个,个部,分,分的,内,内容,，,，告,诉,诉浏,览,览器,如,如何,显,显示,文,文本,，,，怎,样,样生,成,成与,别,别的,文,文本,或,或图,像,像的,链,链接,点,点HTML,文,文档,由,由文,本,本、,格,格式,化,化代,码,码和,导,导向,其,其他,文,文档,的,的超,链,链接,组,组成,网,网,页,页制,作,作工,具,具,1,超,超文,本,本标,识,识语,言,言（HTML,）,）,Dreamweaver是,由,由Macromedia公,司,司推,出,出的,一,一款,在,在网,页,页制,作,作方,面,面大,众,众化,的,的软,件,件，,它,它具,有,有可,视,视化,编,编辑,界,界面,，,，用,户,户不,必,必编,写,写复,杂,杂的HTML,源,源代,码,码就,可,可以,生,生成,跨,跨平,台,台、,跨,跨浏,览,览器,的,的网,页,页，,不,不仅,适,适合,于,于专,业,业网,页,页编,辑,辑人,员,员的,需,需要,，,，同,时,时也,容,容易,被,被业,余,余网,友,友们,所,所掌,握,握。
Dreamweaver支,持,持动,态,态HTML，,并,并采,用,用了RoundtripHTML,技,技术,，,，Dreamweaver是,一,一种,可,可以,满,满足,多,多层,次,次需,求,求、,功,功能,强,强大,的,的可,视,视化,专,专业,级,级网,页,页设,计,计及,制,制作,工,工具,2,Dreamweaver,FrontPage是,由,由Microsoft,公,公司,推,推出,的,的新,一,一代Web网,页,页制,作,作工,具,具FrontPage使,网,网页,制,制作,者,者能,够,够更,加,加方,便,便、,快,快捷,地,地创,建,建和,发,发布,网,网页,，,，具,有,有直,观,观的,网,网页,制,制作,和,和管,理,理方,法,法，,简,简化,了,了大,量,量工,作,作FrontPage界,面,面与Word,、,、PowerPoint等,软,软件,的,的界,面,面极,为,为相,似,似，,为,为使,用,用者,带,带来,了,了极,大,大的,方,方便,，,，Microsoft,公,公司,将,将FrontPage,封,封装,入,入Office之,中,中，,成,成为Office,家,家族,的,的一,员,员，,使,使之,功,功能,更,更为,强,强大,。
3,FrontPage,Photoshop是由Adobe,公,公司开发,的,的图形处,理,理软件，,它,它是目前,公,公认的PC机上最,好,好的通用,平,平面美术,设,设计软件,，,，它功能,完,完善、性,能,能稳定、,使,使用方便,，,，所以在,几,几乎所有,的,的广告、,出,出版、软,件,件公司，Photoshop都是首,选,选的平面,制,制作工具,1.3.2 网,页,页美化工,具,具,1,Photoshop,Fireworks是由Macromedia公司开,发,发的图形,处,处理工具,，,，它的出,现,现使Web作图发,生,生了革命,性,性的变化,因为Fireworks,是,是第一套,专,专门为制,作,作网页图,形,形而设计,的,的软件，,同,同时也是,专,专业的网,页,页图形设,计,计及制作,的,的解决方,案,案作为,一,一个图像,处,处理软件,，,，Fireworks能够,自,自由地导,入,入多种格,式,式的图像,进,进行处理,Fireworks还能够,自,自动切割,图,图像、生,成,成光标动,态,态感应的JavaScript程序,等,等等，而,且,且Fireworks具有,强,强大的动,画,画功能和,一,一个相当,完,完美的网,络,络图像生,成,成器。
2,Fireworks,Flash是美国Macromedia公司,开,开发的矢,量,量图形编,辑,辑和动画,创,创作的专,业,业软件，,它,它是一种,交,交互式动,画,画设计工,具,具，用它,可,可以将音,乐,乐、声效,、,、动画以,及,及富有新,意,意的界面,融,融合在一,起,起，以制,作,作出高品,质,质的网页,动,动态效果,它主要,应,应用于网,页,页设计和,多,多媒体创,作,作等领域,，,，功能十,分,分强大和,独,独特，已,成,成为交互,式,式矢量动,画,画的标准,，,，在网上,非,非常流行,Flash广泛,应,应用于网,页,页动画制,作,作、教学,动,动画演示,、,、网上购,物,物、在线,游,游戏等的,制,制作中3,Flash,1.4,网,网页,制,制作的基,本,本步骤,网站,定位要小,，,，内容要,精,精如果,要,要制作一,个,个包罗万,象,象的站点,，,，把所有,精,精彩的东,西,西都放在,上,上面，结,果,果往往会,事,事与愿违,，,，给人的,感,感觉是没,有,有主题，,没,没有特色,，,，样样有,，,，却样样,都,都很肤浅,网站的题,材,材最好选,自,自己擅长,或,或者喜爱,的,的内容。
兴,兴趣是制,作,作网站的,动,动力，没,有,有热情，,很,很难设计,制,制作出优,秀,秀的网站,网,网站定位,进行网站,的,的整体规,划,划也就是,组,组织网站,的,的内容和,设,设计其结,构,构组织网站,的,的内容可,以,以从两个,角,角度来考,虑,虑从设,计,计者的角,度,度来考虑,，,，可以依,据,据被描述,对,对象的组,织,织机构、,类,类别划分,等,等来组织,内,内容；从,浏,浏览者的,角,角度来考,虑,虑，就应,该,该将各种,素,素材依据,浏,浏览者的,需,需要进行,内,内容分类,，,，以便浏,览,览者可以,快,快捷地获,取,取所需要,的,的信息及,其,其相关内,容,容整,整体规划,合理的结,构,构设计对,于,于网站的,规,规划也是,至,至关重要,的,的以下,是,是三种常,用,用的结构,类,类型层状结构,层状结构,类,类似于目,录,录系统的,树,树型结构,，,，,主 页,页,面,1,页,面,2,页,面,3,线性结构,线性结构,类,类似于数,据,据结构中,的,的线性表,，,，用于组,织,织本身的,线,线性顺序,形,形式存在,的,的信息，,可,可以引导,浏,浏览者按,部,部就班地,浏,浏览整个,网,网站文件,。
主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,页面6,Web结,构,构,Web结,构,构类似于Internet,的,的组成结,构,构，各网,页,页之间形,成,成网状连,接,接，允许,用,用户随意,浏,浏览通常在进,行,行网页开,发,发时，首,先,先都进行,静,静态网页,的,的制作，,然,然后再在,其,其中加入,脚,脚本程序,、,、表单等,动,动态内容,静态网,页,页仅仅用,来,来被动地,发,发布信息,，,，而不具,有,有任何交,互,互功能，,它,它是,Web,网页的重,要,要组成部,分,分一个好的,网,网站首先,是,是内容丰,富,富，其次,就,就是网页,设,设计美观,对于网,页,页的外观,设,设计，提,供,供以下建,议,议：,（,1,）不要先,决,决定网页,的,的外观，,然,然后迫使,自,自己去适,应,应它，应,该,该根据网,站,站的访问,者,者对象、,要,要提供的,信,信息以及,制,制作目标,得,得出一个,最,最适合的,网,网页架构,网,网页设计,与,与制作,1静态,网,网页的设,计,计与制作,（,2,）每页排,版,版不要太,松,松散或用,太,太大的字,，,，尽量避,免,免访问者,浏,浏览网页,时,时要作大,幅,幅度的滚,动,动，对于,篇,篇幅太长,的,的一页可,以,以使用内,部,部链接解,决,决。
3,）切勿以,800,600,以上的分,辨,辨率设计,网,网页，常,用,用的分辨,率,率是。