DreamweaverCS网制作项目一

,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,中文版Dreamweaver CS5网页制作案例教程,全国计算机“十二五”精品图书,项目一 网页制作基础,任务一 认识网站和网页,任务二 网站开发基础,任务三 初识,Dreamweaver CS5,任务四 站点基本操作,任务五 网页文档基本操作,任务一 认识网站和网页,任务说明,本任务中，我们将简单了解网页和网站、网页的构成元素以及网页的本质。,预备知识,一、网页和网站,网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。,另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。,二、网页的构成元素,我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等。,站标,导航条,广告条,标题栏,按钮,三、网页的本质,一般情况下，网页中除了包含网页文件（扩展名为,.html,、,.asp,等）外，还有图像文件（扩展名为,.jpg,、,.gif,等）、,Flash,动画文件（扩展名为,.swf,）、脚本文件（扩展名为,.js,）、样式文件（扩展名为,.css,）以及视频文件（扩展名为,.avi,、,.flv,等）等。,任务实施,指出新浪网主页的构成元素,在了解了网页的构成元素后，接下来通过辨识“新浪网”网站首页的构成元素，来进一步加强和巩固前面的学习。,站标,导航条,广告条,标题栏,按钮,任务二 网站开发基础,任务说明,在学习制作网页之前首先了解一下与网站开发相关的基础知识，并从整体上认识一下其制作流程，对后面的学习将是非常有利的。下面就来了解一下与网站开发密切相关的基础知识。,预备知识,一、网站管理与网页制作相关软件,Dreamweaver,是目前最常用的网站管理和网页制作软件，其功能全面、操作灵活、专业性强。,在制作网页时，除,Dreamweaver,外还需要用到,Fireworks,、,Flash,、,Photoshop,等辅助软件。,二、网页制作基础,XHTML,语言,XHTML,是,Extensible HyperText Markup Language(,可扩展超文本标记语言,),的英文缩写，它的前身是,HTML,。由于,HTML,代码繁琐，结构松散，所以推出了,XHTML,。也可以说，,XHTML,是,HTML,的一个升级版本。,三、,IP,地址、域,名,名和网址,（,1,）,IP,地址,互联网上,连,连接了不,计,计其数的,服,服务器和,客,客户机，,每,每一个主,机,机在互联,网,网上都有,一,一个唯一,的,的地址，,我,我们称这,个,个地址为IP地址,（,（Internet Protocol Address）。IP地址,由,由4个小,于,于256,的,的数字组,成,成，数字,之,之间用点,间,间隔。例,如,如，“61.135.150.126”就是,一,一个IP,地,地址。,（,2,）域名,（,3,）网址,网址又叫URL，,英,英文全称,是,是“Uniform Resource Locator”，,即,即统一资,源,源定位符,。,。它是网,络,络上通用,的,的一种地,址,址格式，,用,用于标识,网,网页文件,在,在网络中,的,的位置。,一个完整,的,的网址由,通,通信协议,名,名称、域,名,名或IP,地,地址、网,页,页在服务,器,器中的路,径,径和文件,名,名4部分,组,组成。,任务实施,网站建设,基,基本流程,网站建设,流,流程是从,企,企业计划,建,建设网站,到,到网站建,设,设完成的,一,一套规范,化,化运作。,收集网站,建,建设需求,及,及素材。,制作网站,策,策划书。,网页美术,设,设计。,美术与程,序,序整合。,测试和发,布,布网站。,推广和维,护,护网站。,任务三,初,初识Dreamweaver CS5,任务说明,DreamweaverCS5,是一款集,网,网页制作,和,和网站管,理,理于一身,，,，所见即,所,所得的网,页,页编辑软,件,件。下面,我,我们首先,启,启动该软,件,件，然后,熟,熟悉一下,其,其工作界,面,面上的各,组,组成元素,，,，最后在,任,任务实施,中,中学习调,整,整,DreamweaverCS5,工作界面,的,的基本操,作,作。,预备知识,一、启动,DreamweaverCS5,安装,DreamweaverCS5,后，单击,桌,桌面左下,角,角的“开,始,始”按钮,，,，,选,选择“所,有,有程序”,“AdobeDreamweaverCS5”,，就可以,启,启动,DreamweaverCS5,了。,二、,DreamweaverCS5,界面元素,简,简介,DreamweaverCS5的,工,工作界面,由,由应用程,序,序栏、文,档,档标签栏,、,、文档工,具,具栏、文,档,档窗口、,标,标签选择,器,器、状态,栏,栏、属性,检,检查器和,面,面板组等,组,组成。,1,应用程,序,序栏,应用程序,栏,栏位于工,作,作区顶部,，,，左侧显,示,示菜单栏,，,，右侧包,含,含工作区,切,切换器（,可,可在其下,拉,拉列表中,选,选择不同,的,的工作区,模,模式）、,“,“CSLive,”,”按钮和,程,程序窗口,控,控制按钮。,2文档,标,标签栏,文档标签,栏,栏位于应,用,用程序栏,下,下方，左,侧,侧显示当,前,前打开的,所,所有网页,文,文档的标,签,签（标签,上,上显示相,应,应网页文,档,档的名称,）,）及其关,闭,闭按钮；,右,右侧显示,当,当前文档,在,在本地磁,盘,盘中的保,存,存路径以,及,及向下还,原,原按钮；下方显,示,示当前文,档,档中包含,的,的文档以,及,及链接文,档,档。,3文档,工,工具栏,文档工具,栏,栏位于文,档,档标签栏,的,的下方，,包,包括各种,可,可对文档,进,进行操作,的,的按钮。,4状态,栏,栏,状态栏位,于,于文档窗,口,口底部，,它,它提供了,与,与当前文,档,档相关的,一,一些信息,。,。,5属性,检,检查器,使用“属,性,性检查器,”,”可以检,查,查和设置,当,当前选定,页,页面元素,（,（如文本,和,和插入对,象,象）的最,常,常用属性,。,。“属性,检,检查器”,中,中的内容,会,会根据选,定,定元素的,不,不同而变,化,化。,6面板,组,组,默认状态,下,下，面板,组,组位于文,档,档窗口右,侧,侧。面板,组,组中包含,各,各种类型,的,的面板，Dreamweaver中,的,的大部分,操,操作都需,要,要在面板,中,中实现。,其,其中最常,用,用的有“,插,插入”面,板,板、“文,件,件”面板,和,和“CSS样式”,面,面板。,任务实施,调整DreamweaverCS5工,作,作界面,使用Dreamweaver制作或,编,编辑网页,时,时，经常,需,需要打开,、,、关闭某,个,个面板，,或,或对其工,作,作界面进,行,行各种调,整,整。,本节,我们就来,学,学习一下,调,调整Dreamweaver CS5工作界,面,面的基本,操,操作,（具体操,作,作见视频,1-3,）,。,任务四,站,站点基,本,本操作,任务说明,一般在,Dreamweaver,中制作网,页,页之前，,最,最好先定,义,义站点，,然,然后在站,点,点中创建,网,网页。本,任,任务主要,学,学习在,DreamweaverCS5,中定义和,管,管理站点,的,的方法。,预备知识,一、在,DreamweaverCS5,中定义站,点,点,在Dreamweaver,中,中定义站,点,点的目的,是,是把本地,磁,磁盘中的,站,站点文件,夹,夹同Dreamweaver建立一,定,定的关联,，,，从而方,便,便用户使,用,用Dreamweaver,管,管理站点,和,和编辑站,点,点中的网,页,页文档，,以,以及上传,或,或下载站,点,点内容等,。,。,二、在Dreamweaver CS5中管,理,理站点,定义站点,后,后，如果,需,需要修改,站,站点属性,、,、复制或,删,删除站点,等,等，可执,行,行,管理站点,的操作。,任务实施,在DreamweaverCS5,中,中定义站,点,点“欧妮,雅,雅”,在本书的,大,大部分“,任,任务实施,”,”中，我,们,们都将制,作,作“欧妮,雅,雅”化妆,品,品网站的,相,相关页面,，,，下面我,们,们先从定,义,义该站点,开,开始,（具体操,作,作见视频,1-4,）,。,任务五,网,网页文,档,档基本操,作,作,任务说明,定义好站,点,点后，便,可,可以在站,点,点中创建,网,网页了。,本,本任务首,先,先学习网,页,页文档和,文,文件夹的,命,命名规则,，,，然后依,次,次学习新,建,建、保存,、,、打开、,预,预览和关,闭,闭网页文,档,档的方法,，,，最后学,习,习利用“,文,文件”面,板,板管理站,点,点中网页,文,文档和文,件,件夹的方,法,法。,预备知识,一、网页,文,文档和文,件,件夹命名,规,规则,首页文档,一,一般命名,为,为index.html、index.asp或者index.php,。,。,不要用中,文,文命名网,页,页文档和,文,文件夹。,网页文档,名,名中不要,使,使用大写,英,英文字母,，,，最好全,部,部使用小,写,写英文字,母,母。,运算符符,号,号不能用,在,在文件名,的,的开头。,比较长的,网,网页文档,名,名可以使,用,用下划线,“,“_”来,隔,隔开多个,单,单词或关,键,键字。,在大型网,站,站中，分,支,支页面的,文,文件应存,放,放在单独,的,的文件夹,中,中，每个,分,分支中的,图,图像也应,该,该存放在,各,各自单独,的,的文件夹,中,中，存放,网,网页图像,的,的文件夹,一,一般命名,为,为“images,”,”或者“img”,。,。,在动态网,站,站中，用,来,来存放数,据,据库的文,件,件夹一般,命,命名为“data,”,”或者“database,”,”。,二、新建,和,和保存网,页,页文档,在DreamweaverCS5,中,中可以创,建,建两种类,型,型的网页,文,文档，一,种,种是直接,创,创建的空,白,白网页文,档,档，另一,种,种是通过DreamweaverCS5内,置,置的模板,创,创建具有,一,一定内容,和,和样式的,网,网页文档,。,。,三、打开,、,、预览和,关,关闭网页,文,文档,若要对已,有,有的文档,进,进行编辑,，,，就需要,在,在Dreamweaver,中,中打开该,文,文档。另,外,外，在Dreamweaver中打,开,开网页文,档,档并执行,相,相应操作,后,后，如果,想,想查看它,在,在浏览器,中,中的效果,，,，可执行,预,预览操作,。,。,四、利用“,文,文件”面板,管,管理站点文,件,件和文件夹,一般在定义,站,站点后，都,会,会利用“文,件,件”面板来,创,创建、重命,名,名或打开站,点,点中的网页,文,文档和文件,夹,夹。,任务实施,在站点“,欧,欧妮雅”中,创,创建网页,在学习了网,页,页文档的基,本,本操作后，,本节,通过在前面,定,定义的站点,“,“欧妮雅”,中,中创建并保,存,存网页，来,进,进一步巩固,前,前面所学,（具体操作,见,见视频,1-5,）,。,演讲完毕，,谢,谢谢观看！,