DreamweaverCS网设计培训教程电子教案

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,Dreamweaver CS3,网页设计培训教程,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,第,1,课 网页制作基础,本课要点,具体要求,本课导读,上机练习,本课要点,网页制作的相关知识,初识Dreamweaver CS3,具体要求,了解网页的定义及组成元素,了解网页常见部分的称谓及规范,了解网页制作的流程,了解网页配色技巧,了解Dreamweaver CS3的工作界面,掌握Dreamweaver CS3的基本设置,掌握Dreamweaver CS3的基本操作,本课导读,网页是构成网络的主体，是互联网信息的主要载体。在学习网页制作前，需要了解网页制作的相关知识，以便在以后的学习及工作中运用。另外，我们还需要认识网页制作工具,Dreamweaver CS3,的工作界面、基本设置以及一些简单的应用，如启动与退出,Dreamweaver CS3,、新建、保存、预览及打开网页文档等。,1.1,网页制作的相关知识,网上冲浪已成为生活的一个重要组成部分，人们通过网络来获取知识、资源，越来越多的企事业单位也将网页作为宣传公司品牌形象的一种重要手段，网页也从以前的纯文本形式逐步发展到图、文、声音及动画兼有的综合形式。下面我们就来学习网页制作的各种知识。,1.1,网页制作的相关知识,1.1.1,知识讲解,1.1.2,典型案例,用“记事本”制作“,welcome.html”,网页,1.1.1,知识讲解,在开始学习网页制作之前，应先了解一下什么是网页以及一些相关的专业术语。,1.1.1,知识讲解,1.,网页的定义及组成元素,2.,网页常见部分的称谓及规范,3.,网页制作的流程,4.,网页配色技巧,1.,网页的定义及组成元素,浏览网页时在浏览器中看到的一个个页面就是网页，其中包括多种多样的网页元素，如文本、图像、动画和音乐等。,文本是网页最基本的组成元素，是网页的主体部分。,图像也是网页中不可缺少的元素，是使网页看起来更美观的点睛之笔。,动画在网页中也有广泛的应用，网页中常用的动画格式主要有两种：一种是,SWF,动画，一种是,GIF,动画。,播放音乐是为浏览者提供听觉感受的最佳选择，但因为受音乐版权的约束，在专业网站中很少有使用背景音乐的，只在部分个人主页或企业网站中有所使用。,2.,网页常见部分的称谓及规范,通常情况下，网页的基本组成部分有,Logo,、,Banner,、导航条、超链接和版权信息等。,3.,网页,制,制作,的,的流,程,程,制作,网,网页,不,不像,编,编辑,文,文档,那,那样,轻,轻松,，,，需,要,要遵,循,循一,定,定的,流,流程,：,：收,集,集资,料,料和,素,素材,、,、规,划,划站,点,点、,制,制作,网,网页,、,、测,试,试站,点,点、,发,发布,站,站点,、,、更,新,新和,维,维护,站,站点,等,等。,1,）收集资,料,料和素材,2,）规划站,点,点,3,）制作,网,网页,4,）测试,站,站点,5,）发布,站,站点,6,）更新,和,和维护,站,站点,4.,网页配,色,色技巧,网页中,的,的色彩,通,通常用,十,十六进,制,制数来,表,表示，,如,如“,#FF0000”,表示红,色,色，“,#00FF00”,表示绿,色,色、“,#0000FF”,表示蓝,色,色、“,#FFFF00”,表示黄,色,色、“,#FFFFFF”,表示白,色,色、“,#000000”,表示黑,色,色等，,即,即每两,位,位为一,种,种色彩,，,，从左,到,到右分,别,别为红,、,、绿、,蓝,蓝三色,，,，每组,色,色彩的,取,取值均,为,为,00,FF,（十进,制,制数,255,的十六,进,进制值,）,）。,典型案,例,例,用“记,事,事本”,制,制作“,welcome.html,”,”,网页,案例目,标,标,本案例,将,将使用,“,“记事,本,本”制,作,作一个,简,简单的,网,网页。,典型案,例,例,用“记,事,事本”,制,制作“,welcome.html,”,”,网页,操作思,路,路,（,1,）利用,以,以,HTML,代码创,建,建的文,本,本文件,可,可以通,过,过“记,事,事本”,等,等文本,编,编辑程,序,序直接,进,进行编,写,写的特,点,点制作,本,本网页,文,文档。,（,2,）创建,图,图像和,文,文本等,内,内容。,（,3,）从结,构,构上讲,，,，,HTML,文件由,两,两大部,分,分组成,：,：一是,头,头部（,即,即,标签与,标签之,间,间的内,容,容，如,网,网页的,标,标题就,放,放置在,头,头部）,，,，二是,主,主体（,即,即,标签与,标签之,间,间的内,容,容，也,就,就是在,浏,浏览器,中,中看到,的,的内容,）,）。为,了,了与普,通,通的文,本,本文件,相,相区别,，,，将,标签与,标签分,别,别放置,在,在网页,代,代码最,前,前及最,后,后，这,样,样，一,个,个简单,的,的网页,就,就创建,好,好了。,典型案,例,例,用“记,事,事本”,制,制作“,welcome.html,”,”,网页,操作步,骤,骤,具体操,作,作步骤,请,请教师,参,参照软,件,件及书,中,中内容,进,进行讲,解,解。,典型案,例,例,用“记,事,事本”,制,制作“,welcome.html,”,”,网页,案例小,结,结,本案例,用,用“记,事,事本”,制,制作了,一,一个简,单,单的网,页,页文档,。,。在制,作,作过程,中,中需注,意,意的是,：,：在保,存,存文档,时,时一定,要,要在,【,保存类,型,型,】,下拉列,表,表框中,选,选择,【,所有文,件,件,】,选项；,在,在输入,网,网页文,档,档名称,时,时，一,定,定要将,网,网页文,档,档的扩,展,展名,.htm,（或,.html,）一并,输,输入，,否,否则“,记,记事本,”,”程序,会,会将其,保,保存为,纯,纯文本,格,格式文,档,档。,1.2,初识,DreamweaverCS3,在学习,了,了网页,制,制作的,基,基础知,识,识后，,接,接下来,就,就应该,认,认识网,页,页制作,利,利器,Dreamweaver CS3,了。,1.2,初识,DreamweaverCS3,知识讲,解,解,典型案,例,例,用,DreamweaverCS3,创建“,welcome2.html”,网页,知识讲,解,解,在学习,DreamweaverCS3,之前应,先,先安装,DreamweaverCS3,，安装,方,方法与,其,其他应,用,用程序,的,的安装,基,基本相,同,同，这,里,里不再,赘,赘述。,知识讲,解,解,1.DreamweaverCS3,的工作,界,界面,2.DreamweaverCS3,的基本,设,设置,1.Dreamweaver CS3,的工作,界,界面,2.DreamweaverCS3,的基本,设,设置,在使用,DreamweaverCS3,前，需,要,要进行,一,一些简,单,单的设,置,置，以,方,方便使,用,用软件,。,。选择,【,编辑,】,【,【,首选,参,参数,】,命令,，,，打,开,开,【,首选,参,参数,】,对话,框,框，,如,如图,1.17,所示,。,。该,对,对话,框,框左,侧,侧为,【,分类,】,列表,框,框，,右,右侧,为,为对,应,应的,设,设置,选,选项,；,；默,认,认打,开,开的,是,是,【,常规,】,分类,，,，可,单,单击,左,左侧,【,分类,】,列表,框,框中,的,的选,项,项进,行,行切,换,换，,然,然后,进,进行,该,该分,类,类的,设,设置,。,。,典型,案,案例,用,DreamweaverCS3,创建,“,“,welcome2.html”,网页,案例,目,目标,本案,例,例将,用,用,DreamweaverCS3,制作,“,“,welcome2.html”,网页,，,，其,效,效果,和,和用,“,“记,事,事本,”,”创,建,建的,“,“,welcome.html,”,”,网页,相,相同,典型,案,案例,用,DreamweaverCS3,创建,“,“,welcome2.html”,网页,操作,思,思路,（,1,）创,建,建一,个,个新,网,网页,并,并将,其,其保,存,存。,（,2,）在,网,网页,中,中添,加,加素,材,材并,设,设置,效,效果,。,。,（,3,）加,入,入版,权,权栏,。,。,典型,案,案例,用,DreamweaverCS3,创建,“,“,welcome2.html”,网页,操作,步,步骤,具体,操,操作,步,步骤,请,请教,师,师参,照,照软,件,件及,书,书中,内,内容,进,进行,讲,讲解,。,。,典型,案,案例,用,DreamweaverCS3,创建,“,“,welcome2.html”,网页,案例,小,小结,本案,例,例用,DreamweaverCS3,创建,了,了一,个,个网,页,页，,并,并在,IE,浏览,器,器中,进,进行,了,了预,览,览。,通,通过,本,本案,例,例的,学,学习,，,，可,以,以看,出,出,Dreamweaver,的强,大,大功,能,能及,由,由此,带,带来,的,的便,捷,捷。,Dreamweaver,最大,的,的特,点,点之,一,一就,是,是可,视,视化,的,的操,作,作，,使,使得,用,用户,在,在不,是,是很,了,了解,网,网页,的,的框,架,架语,言,言,HTML,时即,可,可随,心,心所,欲,欲地,对,对网,页,页元,素,素进,行,行添,加,加、,删,删除,以,以及,各,各种,属,属性,设,设置,，,，大,大,大地,减,减轻,了,了初,学,学者,的,的负,担,担，,使,使初,学,学者,能,能够,轻,轻松,上,上手,，,，为,以,以后,的,的学,习,习打,下,下基,础,础。,1.3,上机,练,练习,用“,记,记事,本,本”,创,创建,“,“,Goodmorning.html,”,”,网页,用,DreamweaverCS3,制作,“,“,Goodmorning2.html,”,”,网页,用“,记,记事,本,本”,创,创建,“,“,Goodmorning.html,”,”,网页,本练,习,习将,使,使用,“,“记,事,事本,”,”制,作,作“,Goodmorning.html”,网页,文,文档,。,。,用,用,“,“记,事,事本,”,”创,建,建“Goodmorning.html,”,”网,页,页,操作,思,思路,：,：,将素,材,材文,件,件夹,中,中的,所,所有,图,图像,复,复制,到,到网,页,页要,保,保存,的,的文,件,件夹,中,中，,如,如“,D:web,”,”,。,打开,“,“记,事,事本,”,”程,序,序，,新,新建,一,一个,文,文件,，,，将,其,其保,存,存到,与,与素,材,材图,像,像相,同,同的,文,文件,夹,夹中,，,，如,“,“,D:web,”,”,，并将,其,其名称,设,设置为,“,“,Good morning.html”,。,参照效,果,果图输,入,入所有,的,的代码,，,，然后,进,进行保,存,存。,用,DreamweaverCS3,制作“,Good morning2.html,”,”,网页,本练习,将,将使用,DreamweaverCS3,制作与节中用,“,“记事,本,本”制,作,作的网,页,页相同,效,效果的,网,网页“,Good morning2.html,”,”,。,用,DreamweaverCS3,制作“,Good morning2.html,”,”,网页,操作思,路,路：,新建一,个,个网页,并,并将其,保,保存。,将要用,到,到的素,材,材复制,到,到保存,网,网页的,同,同一目,录,录下。,在网页,中,中插入,图,图像。,演讲完,毕,毕，谢,谢,谢观看,！,！,