单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,信息产业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（HypertextMarkup Language,）,）是一种专,门,门用于Web页制作的,编,编程语言，,用,用来描述超,文,文本各个部,分,分的内容，,告,告诉浏览器,如,如何显示文,本,本，怎样生,成,成与别的文,本,本或图像的,链,链接点HTML文,档,档由文本、,格,格式化代码,和,和导向其他,文,文档的超链,接,接组成。
1.3.1,网,网页制,作,作工具,1超文本,标,标识语言（HTML）,Dreamweaver是由Macromedia公司,推,推出的一款,在,在网页制作,方,方面大众化,的,的软件，它,具,具有可视化,编,编辑界面，,用,用户不必编,写,写复杂的HTML源代,码,码就可以生,成,成跨平台、,跨,跨浏览器的,网,网页，不仅,适,适合于专业,网,网页编辑人,员,员的需要，,同,同时也容易,被,被业余网友,们,们所掌握Dreamweaver支持动态HTML，,并,并采用了Roundtrip HTML技术,，,，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.4.1,网,网站定位,进行网站的整体,规,规划也就是组织,网,网站的内容和设,计,计其结构组织网站的内容,可,可以从两个角度,来,来考虑从设计,者,者的角度来考虑,，,，可以依据被描,述,述对象的组织机,构,构、类别划分等,来,来组织内容；从,浏,浏览者的角度来,考,考虑，就应该将,各,各种素材依据浏,览,览者的需要进行,内,内容分类，以便,浏,浏览者可以快捷,地,地获取所需要的,信,信息及其相关内,容,容1.4.2,整,整体规划,合理的结构设计,对,对于网站的规划,也,也是至关重要的,以下是三种常,用,用的结构类型层状结构,层状结构类似于,目,目录系统的树型,结,结构，,主 页,页,面,1,页,面,2,页,面,3,线性结构,线性结构类似于,数,数据结构中的线,性,性表，用于组织,本,本身的线性顺序,形,形式存在的信息,，,，可以引导浏览,者,者按部就班地浏,览,览整个网站文件,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,页面6,Web结构,Web结构类似,于,于Internet的组成结构,，,，各网页之间形,成,成网状连接，允,许,许用户随意浏览,。
通常在进行网页,开,开发时，首先都,进,进行静态网页的,制,制作，然后再在,其,其中加入脚本程,序,序、表。
