第2章使用Dreamweaver制作个人网站

单击以编辑母版标题样式,单击以编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,2,章,使用,Dreamweaver,制作个人网站,学习目标,：,1),了解,Dreamweaver,的工作界面，掌握创建及管理一个站点的方法。,2),掌握网页文档的创建、保存、关闭等基本操作。,3),掌握插入普通文本、特殊文本、图像、表格等网页基本元素的方法，能创建文本、图像、锚点等超级链接。,4),理解,CSS,规则，能创建简单的,CSS,样式表。,5),了解常用的增添网页特效的行为、,DIV,的基础常识。,2.1,需求分,析,析,个人网,站,站的栏,目,目因个,人,人兴趣,爱,爱好所,致,致各有,不,不同，,可,可根据,主,主题需,要,要，确,定,定网站,栏,栏目和,主,主色调,。,本实例,需,需要实,现,现的功,能,能模块,包,包括个,人,人简介,（,（用以,介,介绍个,人,人基本,信,信息）,、,、个人,相,相册（,用,用以呈,现,现家庭,、,、朋友,及,及个人,的,的温馨,照,照片）,、,、摄影,作,作品（,用,用以呈,现,现个人,感,感兴趣,的,的摄影,作,作品）,、,、其他,作,作品（,包,包括网,站,站作品,、,、平面,作,作品、,DV,作品等,）,）、请,您,您留言,（,（可以,让,让浏览,者,者在此,提,提出一,些,些建议,或,或意见,等,等）和,在,在线聊,天,天（提,供,供给用,户,户交流,的,的一个,平,平台）,2.2,任务分,解,解,2,.2.1,网站制,作,作工具,DreamweaverCS4,的熟练,操,操作,2,.2.2,站点的,规,规划与,创,创建,2,.2.3,网页文档的,基,基本操作,2,.2.4,网页基本元,素,素的插入,2,.2.5,创建网页超,链,链接,2,.2.6,使用,CSS,美化网页,2,.2.7,使用行为,增,增添网页,特,特效,2.2.1,任务一：,DreamweaverCS4,简介,菜单栏,工具栏,文档编辑,区,区,属性面板,状态栏,插入面板,2.2.2,任务二：,站,站点的规,划,划与创建,1.,站点规划,2.2.2,任务二：,站,站点的规,划,划与创建,2.,站点创建,2.2.2,任务二：,站,站点的规,划,划与创建,2.,站点创建,2.2.2,任务二：,站,站点的规,划,划与创建,2.,站点创建,2.2.3,任务三：,网,网页文档,的,的基本操,作,作,1.,新建个人,网,网站网页,文,文档,（,1,）在“页,面,面类型”,一,一栏的选,项,项里，静,态,态网页选,择,择“,HTML,”,”,，动态网,页,页则选择,相,相应的页,面,面类型。,（,2,）如果希,望,望网页文,档,档不包含,任,任务,CSS,布局，选,择,择“无”,；,；否则，,从,从“布局,”,”列表中,选,选择预设,的,的,CSS,布局。,（,3,）如果在,“,“布局”,列,列表中选,择,择了一个,布,布局，则,在,在“布局,CSS,位置”中,需,需要为其,选,选择一个,位,位置。,（,4,）“首选,参,参数”项,可,可以设置,文,文档的默,认,认首选参,数,数，例如,文,文档类型,、,、编码类,型,型和文件,扩,扩展名等,。,。, ,http:/www.xunchi- , , ,2.2.3,任务三,：,：网页,文,文档的,基,基本操,作,作,2.,保存网,页,页文档,3.,打开网,页,页文档,4.,关闭网,页,页文档,2.2.4,任务四,：,：网页,基,基本元,素,素的插,入,入,1.,插入布,局,局,（,1,）表格,布,布局,表格既,可,可以作,为,为一种,元素丰,富,富网页,内,内容也,可以作,为,为一种,布,布局工,具使网,页,页的整,体,体更加,有条理,2.2.4,任务四,：,：网页,基,基本元,素,素的插,入,入,1.,插入布,局,局,（,2,）框架,布,布局,2.2.4,任务四,：,：网页,基,基本元,素,素的插,入,入,1.,插入布,局,局,（,2,）框架,布,布局,框架提,供,供将一,个,个浏览,器,器划分,成,成几个,区,区域的,方,方法，,在,在每个,区,区域里,可,可以显,示,示不同,的,的页面,，,，每个,frame,里的网,页,页相互,独,独立。,框,框架集,则,则定义,了,了一组,框,框架的,布,布局、,属,属性等,。,。框架,集,集本身,不,不包含,要,要在浏,览,览器中,显,显示的,页,页面内,容,容，它,只,只是向,浏,浏览器,提,提供如,何,何显示,一,一组框,架,架以及,在,在这些,框,框架中,应,应该显,示,示哪些,文,文档的,信,信息。,2.2.4,任务四,：,：网页,基,基本元,素,素的插,入,入,2.,插入内,容,容,（,1,）文本,元,元素的,插,插入与,编,编辑,1,）普通,文,文本可,以,以直接,在,在文档,窗,窗口中,键,键入，,也,也可以,从,从其他,应,应用程,序,序或窗,口,口中复,制,制粘贴,，,，例如,Word,，,TXT,文件等,。,。,2,）,Dreamweaver,也提供,了,了插入,特,特殊文,本,本的菜,单,单，选,择,择“插,入,入,/HTML/,特殊字,符,符”菜,单,单命令,，,，可以,看,看到软,件,件为用,户,户提供,的,的较为,常,常见的,多,多种特,殊,殊字符,。,。,3,）在,Dreamweaver,里插入,空,空格的,做,做法是,将,将输入,法,法切换,到,到中文,输,输入状,态,态，并,将,将全角,打,打开，,此,此时用,户,户只要,在,在想要,插,插入空,格,格的地,方,方敲击,空,空格键,，,，即可,以,以实现,空,空格的,输,输入；,在,在,HTML,代码中,插,插入,即可以,实,实现空,格,格。,2.2.4,任务四,：,：网页,基,基本元,素,素的插,入,入,2.,插入内,容,容,（,2,）图像,元,元素的,插,插入,用于网,站,站制作,的,的图像,要,要求是,gif,，,jpg,，,png,，,psd,中的一,种,种,2.2.4,任务四,：,：网页,基,基本元,素,素的插,入,入,2.,插入内,容,容,（,3,）其他,媒,媒体的,插,插入,其他媒,体,体包括,音,音频、,视,视频、,动,动画等,选择“,插,插入,/,媒体,/SWF”,菜单命,令,令，或,者,者在插,入,入,面板中,选,选择“,媒,媒体,/SWF”,2.2.5,任务五,：,：创建,网,网页超,级,级链接,1.,文本超,级,级链接,文本超,级,级链接,是,是运用,最,最普遍,的,的一种,超,超级链,接,接方式,，,，这里,的,的文本,可,可以是,字,字、词,、,、短语,、,、句子,等,等。,2.2.5,任务五,：,：创建,网,网页超,级,级链接,2.,图片超,级,级链接,（,1,）单张,图,图片的,超,超级链,接,接,选中图,像,像，在,“,“属性,”,”面板,的,的“链,接,接”文,本,本框中,输,输入要,链,链接的,目,目标，,包,包括网,页,页、图,像,像、应,用,用程序,等,等,（,2,）热,区,区超,级,级链,接,接,插入,图,图片,，,，并,选,选中,图,图片,，,，用,展,展开,的,的属,性,性面,板,板上,的,的绘,图,图工,具,具在,画,画面,上,上绘,制,制热,区,区,2.2.5,任务五：,创,创建网页,超,超级链接,3.,锚点超级,链,链接,（,1,）将光标,置,置于文档,窗,窗口想要,设,设置锚点,的,的地方；,（,2,）选择“,插,插入,/,命名锚记,”,”菜单命,令,令，或者,在,在插入面,板,板中单击,“,“命名锚,记,记”，并,输,输入锚记,名,名称，注,意,意锚点区,分,分大小写,；,；,（,3,）在文档,窗,窗口中，,选,选择要建,立,立超级链,接,接的文本,或,或图像，,在,在属性面,板,板中的链,接,接文本框,中,中，输入,#,和锚点名,，,，例如,#top,。,（,4,）保存预,览,览或按,F12,预览并进,行,行修改。,2.2.5,任务五：,创,创建网页,超,超级链接,4.,电子邮件,超,超级链接,（,1,）将光标,置,置于要显,示,示电子邮,件,件超级链,接,接的地方,，,，或者选,定,定希望显,示,示电子邮,件,件超级链,接,接的文本,、,、图片等,。,。,（,2,）选择“,插,插入,/,电子邮件,超,超级链接,”,”菜单命,令,令，或者,在,在插入面,板,板中单击,“,“电子邮,件,件超级链,接,接”。,（,3,）在“文,本,本”文本,框,框中输入,要,要显示超,级,级链接的,文,文本，如,果,果事先已,经,经选择了,文,文本，该,文,文本框会,自,自动将文,本,本显示出,来,来，在“,E-mail”,文本框中,输,输入邮箱,地,地址，如,service,，如图,2-30,所示。,（,4,）单击确,定,定并进行,测,测试,2.2.5,任务五：,创,创建网页,超,超级链接,5.,脚本超级,链,链接和空,链,链接,（,1,）脚本超,级,级链接,在属性面,板,板的“链,接,接”文本,框,框中，键,入,入,Javascript,：,Javascript,代码,例如：,javascript:window.close();,（,2,）空链接,空链接是,未,未指派的,链,链接。空,链,链接主要,用,用于页面,上,上的对象,或,或文本附,加,加行为。,例如，可,向,向空链接,附,附加一个,行,行为，以,便,便在滑过,该,该链接时,会,会交换图,像,像或显示,绝,绝对定位,的,的元素。,2.2.6,任务六：,使,使用,CSS,美化页面,CSS,（,Cascading StyleSheets,）层叠样,式,式表，是,一,一种标记,语,语言，它,是,是一系列,用,用来美化,和,和布局网,页,页的格式,设,设置规则,。,。,“层叠”,指,指对同一,个,个元素或,Web,页面应用,多,多个样式,的,的能力。,例,例如，创,建,建一个,CSS,规则来应,用,用字体颜,色,色，创建,另,另一个规,则,则应用行,距,距，然后,将,将两者应,用,用于一个,页,页面的同,一,一段文本,。,。,CSS,涉及网页,字,字体、颜,色,色、边距,、,、高度、,宽,宽度、图,像,像显示方,式,式、表格,显,显示等等,2.2.6,任务六：使用,CSS,美化页面,1.,应用,CSS,的方法,（,1,）内部样式表,网页文档应用,CSS,的一种常用方,法,法，是采用,HTML,元素的,style,属性实现的。,该,该样式添加在,区块之间,2.2.6,任务六：使用,CSS,美化页面,1.,应用,CSS,的方法,（,2,）外部样式表,外部样式表是,把,把样式单独地,写,写在一个文件,里,里，并以扩展,名,名为,.CSS,的文本文件存,储,储,2.2.6,任务六：使用,CSS,美化页面,1.,应用,CSS,的方法,（,3,）行内样式,在运用样式之,后,后，可以为单,个,个元素添加特,殊,殊的样式信息,。,。它是使用,HTML,代码里的样式,属,属性,style,实现的。,例如：,特殊字体,2.2.6,任务六：使用,CSS,美化页面,2.,创建,CSS,样式,（,1,）选择“窗口,/CSS,样式”菜单命,令,令，在屏幕右,侧,侧,CSS,样式面板的右,上,上侧点击“新,建,建”，或者在,属,属性面板左侧,找,找到“,CSS”,标签，点击编,辑,辑规则。,（,2,）输入,CSS,样式名称、标,记,记或选择器。,（,3,）在“,CSS,规则定义”对,话,话框中可以对,类,类型、背景、,区,区块、方框、,边,边框、列表、,定,定位及扩展共,8,项进行设置,。,。,（,4,）创建好的,CSS,样式可以再,进,进行修改和,完,完善。,2.2.7,任务七：使,用,用行为增添,网,网页特效,Dreamweaver,提供了一种,称,称为“行为,”,”（,Behavior,）的机制，,用,用来帮助用,户,户建构页面,中,中的交互行,为,为。,行为，顾名,思,思义，就是,在,在网页中进,行,行的一系列,动,动作，通过,这,这些动作可,以,以实现用户,与,与页面的交,互,互。,一个行为一,般,般由动作和,事,事件组成，,动,动作是用来,完,完成特定任,务,务预先编译,好,好的,Javascript,代码，例如,交,交换图片、,弹,弹出式菜单,等,等，而事件,则,则是动作触,发,发的结果。,2.3,开发流程,2.3.1,页面设计,2.3,开发流程,2.3.2,开发过程,（,1,）首页制作,2.3,开发流程,2.3.2,开发过程,（,2,）导航栏制,作,作,2.3,开发流程,2.3.2,开发过程,（,3,）内页的设,计,计与开发,2.4,拓展知识,2.4.1HTML,的相关知识,1.,文件结构,2.4,拓展知识,2.4.1HTML,的相关知识,1.,文件结构,（,1,）,HTML,标签以,标志,（,2,）,HTML,标签通常是,成,成对出现的,，,，例如文档,的,的主体,。“,/”,就是打开标签和,关,关闭标签的区别,。,。个别标签是不,需,需要结束标志的,，,，例如换行,。,（,3,）,HTML,代码编写时要有,层,层次感，,和,标签包括在,里，在书写时往,内,内推进一个,tab,键，依次类推。,这,这样书写的目地,是,是使代码更加清,晰,晰。,（,4,）,HTML,不区分大小写,2.4,拓展知识,2.4.1HTML,的相关知识,1.HTML,的其他标签,（,1,）,HTML,标题,:Hheading,（,2,）,HTML,段落：,Paragraph.,（,3,）,HTML,水平线：,（,4,）,HTML,注释：,（,5,）,meta,标签：,（,6,）文字标签：,2.4,拓展知识,2.4.2,使用,DIV,元素,1.,插入,DIV,标签,2.AP DIV,的插入,2.4,拓展知识,2.4.3,模板与库,1.,模板,（,1,）直接创建模,板,板,（,2,）将网页转存,为,为模板,（,3,）从新建文件,中,中创建模板,2.,库,模板用来制作,不,不同网页的相,同,同部分，库则,是,是面向网页局,部,部相同部分的,。,。,本章小结,Dreamweaver,工作界面部分,要,要求掌握一些,常,常用的菜单、,工,工具以及界面,的,的构成。,站点建立部分,旨,旨在要求读者,掌,掌握管理个人,网,网站的网页、,素,素材等，为制,作,作网站服务。,网页文档的基,本,本操作部分主,要,要掌握新建、,保,保存、打开、,关,关闭网页文档,的,的方法。,在网页基本元,素,素的插入中，,需,需要重点掌握,如,如何插入布局,，,，包括表格布,局,局、框架布局,以,以及,CSS,布局。对于文,本,本、图像以及,其,其他媒体的插,入,入是网页制作,的,的基本常识，,并,并要求重点掌,握,握超级链接的,创,创建方法，包,括,括文本超级链,接,接、图像超级,链,链接、电子邮,件,件超级链接等,。,。,习题,思考题,1,网站制作的,基,基本流程怎样,的,的？,2,网页布局有,哪,哪几种形式，,并,并阐述其优劣,？,？,3,用,DreamweaverCS4,创建站点的流,程,程如何？,4,超级链接有,哪,哪几种类型？,5,创建层的方,法,法有哪些？,习题,操作题：,1.,创建一个个人,网,网站站点，存,放,放在,E,盘或,F,盘，文件夹名,为,为自己的学号,。,。,2.,制作个人网站,，,，要求有主页,和,和内页，内页,不,不少于,3,个。,