信息产业IT技术培训指定教材--网页设计实用教程

单击此处编辑母版标题样式,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,信息产业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.3,.,.1,网,网页,制,制作工,具,具,1超,文,文本标,识,识语言,（,（HTML）,Dreamweaver是,由,由Macromedia公,司,司推出,的,的一款,在,在网页,制,制作方,面,面大众,化,化的软,件,件，它,具,具有可,视,视化编,辑,辑界面,，,，用户,不,不必编,写,写复杂,的,的HTML源,代,代码就,可,可以生,成,成跨平,台,台、跨,浏,浏览器,的,的网页,，,，不仅,适,适合于,专,专业网,页,页编辑,人,人员的,需,需要，,同,同时也,容,容易被,业,业余网,友,友们所,掌,掌握。,Dreamweaver支,持,持动态HTML，并,采,采用了RoundtripHTML技,术,术，Dreamweaver是,一,一种可,以,以满足,多,多层次,需,需求、,功,功能强,大,大的可,视,视化专,业,业级网,页,页设计,及,及制作,工,工具。,2Dreamweaver,FrontPage,是,是由Microsoft公,司,司推出,的,的新一,代,代Web网页,制,制作工,具,具。FrontPage使,网,网页制,作,作者能,够,够更加,方,方便、,快,快捷地,创,创建和,发,发布网,页,页，具,有,有直观,的,的网页,制,制作和,管,管理方,法,法，简,化,化了大,量,量工作,。,。,FrontPage,界,界面与Word、PowerPoint,等,等软件,的,的界面,极,极为相,似,似，为,使,使用者,带,带来了,极,极大的,方,方便，Microsoft,公,公司将FrontPage,封,封装入Office,之,之中，,成,成为Office家,族,族的一,员,员，使,之,之功能,更,更为强,大,大。,3FrontPage,Photoshop,是,是由Adobe公司,开,开发的,图,图形处,理,理软件,，,，它是,目,目前公,认,认的PC机上,最,最好的,通,通用平,面,面美术,设,设计软,件,件，它,功,功能完,善,善、性,能,能稳定,、,、使用,方,方便，,所,所以在,几,几乎所,有,有的广,告,告、出,版,版、软,件,件公司,，,，Photoshop都是,首,首选的,平,平面制,作,作工具,。,。,1.3,.,.2,网,网页,美,美化工,具,具,1Photoshop,Fireworks,是,是由Macromedia,公,公司开,发,发的图,形,形处理,工,工具，,它,它的出,现,现使Web作,图,图发生,了,了革命,性,性的变,化,化。因,为,为Fireworks是第,一,一套专,门,门为制,作,作网页,图,图形而,设,设计的,软,软件，,同,同时也,是,是专业,的,的网页,图,图形设,计,计及制,作,作的解,决,决方案,。,。作为,一,一个图,像,像处理,软,软件，Fireworks,能,能够自,由,由地导,入,入多种,格,格式的,图,图像进,行,行处理,。,。,Fireworks,还,还能够,自,自动切,割,割图像,、,、生成,光,光标动,态,态感应,的,的JavaScript程,序,序等等,，,，而且Fireworks,具,具有强,大,大的动,画,画功能,和,和一个,相,相当完,美,美的网,络,络图像,生,生成器,。,。,2Fireworks,Flash是,美,美国Macromedia,公,公司开,发,发的矢,量,量图形,编,编辑和,动,动画创,作,作的专,业,业软件,，,，它是,一,一种交,互,互式动,画,画设计,工,工具，,用,用它可,以,以将音,乐,乐、声,效,效、动,画,画以及,富,富有新,意,意的界,面,面融合,在,在一起,，,，以制,作,作出高,品,品质的,网,网页动,态,态效果,。,。它主,要,要应用,于,于网页,设,设计和,多,多媒体,创,创作等,领,领域，,功,功能十,分,分强大,和,和独特,，,，已成,为,为交互,式,式矢量,动,动画的,标,标准，,在,在网上,非,非常流,行,行。Flash广泛,应,应用于,网,网页动,画,画制作,、,、教学,动,动画演,示,示、网,上,上购物,、,、在线,游,游戏等,的,的制作,中,中。,3Flash,1.4,网,网页制,作,作的基,本,本步骤,网站定位要,小,小，内,容,容要精,。,。如果,要,要制作,一,一个包,罗,罗万象,的,的站点,，,，把所,有,有精彩,的,的东西,都,都放在,上,上面，,结,结果往,往,往会事,与,与愿违,，,，给人,的,的感觉,是,是没有,主,主题，,没,没有特,色,色，样,样,样有，,却,却样样,都,都很肤,浅,浅。,网站的,题,题材最,好,好选自,己,己擅长,或,或者喜,爱,爱的内,容,容。兴,趣,趣是制,作,作网站,的,的动力,，,，没有,热,热情，,很,很难设,计,计制作,出,出优秀,的,的网站,。,。,1.4,.,.1,网,网,站,站定位,进行网,站,站的整,体,体规划,也,也就是,组,组织网,站,站的内,容,容和设,计,计其结,构,构。,组织网,站,站的内,容,容可以,从,从两个,角,角度来,考,考虑。,从,从设计,者,者的角,度,度来考,虑,虑，可,以,以依据,被,被描述,对,对象的,组,组织机,构,构、类,别,别划分,等,等来组,织,织内容,；,；从浏,览,览者的,角,角度来,考,考虑，,就,就应该,将,将各种,素,素材依,据,据浏览,者,者的需,要,要进行,内,内容分,类,类，以,便,便浏览,者,者可以,快,快捷地,获,获取所,需,需要的,信,信息及,其,其相关,内,内容。,1.4,.,.2,整,整,体,体规划,合理的,结,结构设,计,计对于,网,网站的,规,规划也,是,是至关,重,重要的,。,。以下,是,是三种,常,常用的,结,结构类,型,型。,层状结,构,构,层状结,构,构类似,于,于目录,系,系统的,树,树型结,构,构，,主 页,页,面,1,页,面,2,页,面,3,线性结,构,构,线性结,构,构类似,于,于数据,结,结构中,的,的线性,表,表，用,于,于组织,本,本身的,线,线性顺,序,序形式,存,存在的,信,信息，,可,可以引,导,导浏览,者,者按部,就,就班地,浏,浏览整,个,个网站,文,文件。,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,页面6,Web,结,结构,Web,结,结构类,似,似于Internet的组,成,成结构,，,，各网,页,页之间,形,形成网,状,状连接,，,，允许,用,用户随,意,意浏览,。,。,通常在,进,进行网,页,页开发,时,时，首,先,先都进,行,行静态,网,网页的,制,制作，,然,然后再,在,在其中,加,加入脚,本,本程序,、,、表单,等,等动态,内,内容。,静,静态网,页,页仅仅,用,用来被,动,动地发,布,布信息,，,，而不,具,具有任,何,何交互,功,功能，,它,它是Web网页的,重,重要组,成,成部分,。,。,一个好,的,的网站,首,首先是,内,内容丰,富,富，其,次,次就是,网,网页设,计,计美观,。,。对于,网,网页的,外,外观设,计,计，提,供,供以下,建,建议：,（1）不要,先,先决定,网,网页的,外,外观，,然,然后迫,使,使自己,去,去适应,它,它，应,该,该根据,网,网站的,访,访问者,对,对象、,要,要提供,的,的信息,以,以及制,作,作目标,得,得出一,个,个最适,合,合的网,页,页架构,。,。,1.4,.,.3,网,网,页,页设计,与,与制作,1静,态,态网页,的,的设计,与,与制作,（2）每页,排,排版不,要,要太松,散,散或用,太,太大的,字,字，尽,量,量避免,访,访问者,浏,浏览网,页,页时要,作,作大幅,度,度的滚,动,动，对,于,于篇幅,太,太长的,一,一页可,以,以使用,内,内部链,接,接解决,。,。,（3）切勿,以,以800600以上的,分,分辨率,设,设计网,页,页，常,用,用的分,辨,辨率是640480及800600。现在,国,国内的,站,站点基,本,本上都,是,是800600，但是,如,如果主,要,要是面,向,向国外,访,访问者,的,的站点,，,，建议,使,使用640480。,（4）不应,在,在每页,中,中插入,太,太多的,广,广告。,相,相信任,何,何访问,者,者都不,会,会喜欢,浏,浏览尽,是,是些广,告,告的网,页,页，要,考,考虑该,页,页内容,与,与广告,的,的比例,，,，广告,太,太多，,只,只会令,人,人烦厌,。,。,（5）不要,每,每页都,采,采用不,同,同的墙,纸,纸，以,免,免每次,转,转页时,都,都要花,费,费过多,的,的时间,去,去下载,。,。,（6）底色,或,或墙纸,必,必须与,文,文字对,比,比强烈,，,，以易,于,于阅读,。,。如果,网,网页是,文,文章式,或,或是包,含,含大量,文,文字，,不,不妨在,底,底色与,文,文字的,搭,搭配上,下,下些工,夫,夫，力,求,求让访,问,问者能,够,够舒适,地,地阅读,网,网页。,（7）不要,把,把图片,白,白色当,作,作透明,，,，要知,道,道别人,的,的系统,不,不一定,把,把内定,底,底色设,为,为白色,，,，解决,的,的办法,除,除了真,的,的把该,网,网页的,底,底色设,为,为白色,之,之外，,最,最好还,是,是用图,片,片编辑,工,工具将,图,图片设,为,为透明,颜,颜色。,静态网,页,页制作,完,完成后,，,，接下,来,来的工,作,作就是,为,为网页,添,添加动,态,态效果,，,，包括,一,一些脚,本,本语言,程,程序和,数,数据库,程,程序的,设,设计，,以,以及加,入,入动画,效,效果等,。,。,一个真,正,正的网,站,站，不,仅,仅应该,实,实现传,统,统媒体,的,的电子,化,化，给,用,用户提,供,供需要,的,的内容,，,，而且,还,还应该,做,做更多,的,的事情,，,，完成,比,比页面,浏,浏览更,高,高层次,的,的需求,，,，例如,收,收集信,息,息、数,据,据传递,、,、数据,存,存储以,及,及系统,维,维护等,。,。,2为,网,网页的,添,添加动,态,态效果,当网页,设,设计人,员,员制作,完,完所有,网,网站页,面,面之后,，,，需要,对,对所设,计,计的网,页,页进行,审,审查和,测,测试，,测,测试内,容,容包括,功,功能性,测,测试和,完,完整性,测,测试两,个,个方面,。,。,所谓功,能,能性测,试,试就是,要,要保证,网,网页的,可,可用性,，,，达到,最,最初的,内,内容组,织,织设计,目,目标，,实,实现所,规,规定的,功,功能，,读,读者可,方,方便快,速,速地寻,找,找到所,需,需的内,容,容。完,整,整性测,试,试就是,保,保证页,面,面内容,显,显示正,确,确，链,接,接准确,，,，无差,错,错无遗,漏,漏。,1.4,.,.4,测,测试,网,网页,网页设,计,计好，,必,必须把,它,它发布,到,到互连,网,网上，,否,否则网,站,站形象,仍,仍然不,能,能展现,出,出去。,发,发布的,服,服务器,可,可以是,远,远程，,也,也可以,是,是本地,，,，但必,须,须支持ASP,，,，因为,动,动态程,序,序是建,立,立在ASP基,础,础上的,。,。,1.4,.,.5,网,网,页,页上传,发,发布,网站的,宣,宣传和,推,推广一,般,般有两,种,种途径,和,和方法,。,。一是,通,通过传,统,统媒体,进,进行广,告,告宣传,；,；另一,是,是利用Internet自身的,特,特点向,外,外宣传,。,。,可用来,宣,宣传的,传,传统媒,体,体包括,：,：电视,、,、广播,、,、报纸,、,、广告,牌,牌、海,报,报和黄,页,页等。,。,。,在Internet上宣传,网,网站的,方,方法也,是,是多种,多,多样的,，,，如可,以,以将网,址,址和网,站,站信息,发,发布到,搜,搜索引,擎,擎、网,上,上黄页,、,、新闻,组,组、邮,件,件列表,上,上进行,宣,宣传推,广,广，也,可,可以与,其,其他同,类,类网站,交,交换宣,传,传广告,。,。,1.4,.,.6,网,网,站,站的宣,传,传与推,广,广,现在的,网,网站注,重,重信息,的,的不断,更,更新和,交,交互性,，,，只有,这,这样才,能,能吸引,更,更多的,浏,浏览者,来,来访问,和,和参与,。,。如何,知,知道哪,些,些网页,内,内容需,要,要调整,、,、更新,和,和修改,，,，网页,需,需要增,加,加那些,内,内容呢,？,？这些,不,不能靠,主,主观臆,断,断来确,定,定，而,是,是需要,得,得到访,问,问者的,反,反馈意,见,见，也,可,可根据,不,不同网,页,页的被,访,访次数,来,来分析,。,。,获得用,户,户反馈,信,信息的,方,方法很,多,多，常,用,用的有,计,计数器,、,、留言,板,板、调,查,查表等,，,，也可,以,以建立,系,系统日,志,志来记,录,录网页,的,的被访,情,情况。,1.4,.,.7,网,网,站,站的反,馈,馈与评,价,价,网站要,注,注意经,常,常维护,更,更新内,容,容，保,持,持内容,的,的新鲜,，,，不要,做,做好就,放,放到服,务,务器永,远,远不变,了,了，只,有,有不断,地,地补充,、,、更新,内,内容，,才,才能够,吸,吸引浏,览,览者。,维,维护更,新,新时可,以,以充分,利,利用Dreamweaver提供,的,的模板,和,和库技,术,术，以,提,提高工,作,作效率,。,。,1.4,.,.8网站的,更,更新与,维,维护,E ND,