DreamweaverCS6站点创建与管理课件

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,2019/12/19,#,第,2,章,Dreamweaver CS6,站点创建与管理,清华大学出版社,第2章 Dreamweaver CS6站点创建与管理清华大学,第,2,章,Dreamweaver CS6,站点创建与管理,2.1 Dreamweaver CS6,概述,Dreamweaver CS6,支持多种类型的网页代码和编程语言，包括,HTML,、,CSS,、,XHTML,、,XML,、,JavaScript,、,VBScript,、,ColdFusion,、,Java,、,Visual Basic,、,C#,、,PHP,、,ASP.NET,、,ASP,以及,JSP,等语言的支持，可以辅助生成访问网络数据库的,Web,应用程序。,2.1.1 Dreamweaver CS6,的安装和,启动,以,Dreamweaver CS6,为例，安装,Dreamweaver,的方法如下：,在,Macromedia,官方网站下载安装程序；,双击,Dreamweaver,安装程序图标，在显示的解压缩界面中，选择保存解压缩安装文件的路径；,准备文件进度完成后显示欢迎界面，选择安装选项。,在弹出的“,Adobe,软件许可协议”界面，选择“接受”。,在弹出的“序列号”界面，输入合法的序列号，单击“下一步”。,在弹出的“选项”界面，选择安装路径，单击“安装”，安装完成后显示“安装完成”界面,。,2,第2章 Dreamweaver CS6站点创建与管理2.1,第,2,章,Dreamweaver CS6,站点创建与管理,2.1 Dreamweaver CS6,概述,2.1.1,Dreamweaver CS6,的安装和,启动,首次启动,Dreamweaver CS6,时，会出现“默认编辑器”窗口对话框，在此可以选择常用的文件类型,。,启动,Dreamweaver CS6,后,的,界面如图,1.8,所示，,在此,可以,选择新建页面的类型,。,3,图,2.1 Dreamweaver CS6,的启动界面,第2章 Dreamweaver CS6站点创建与管理2.1,第,2,章,Dreamweaver CS6,站点创建与管理,2.1 Dreamweaver CS6,概述,2.1.2 Dreamweaver CS6,的界面,环境,Dreamweaver8,的基本工作界面如图,1.9,所示，由菜单栏、插入工具栏、文档窗口、标签选择器、属性面板和面板组等部分构成。,4,图,2.2 Dreamweaver CS6,工作界面,第2章 Dreamweaver CS6站点创建与管理2.1,第,2,章,Dreamweaver CS6,站点创建与管理,2.2,站点规划,网站,的建设一般要考虑如下几个方面：,1.,确定建立网站的目的和主题,首先要明确制作该网站的目的，希望网站达到什么效果，然后根据目的和已有的网站内容确定设计主题。该主题能让浏览者知道本网站是做什么的，可以获取什么信息。,在确定网站内容的同时还需要确定要制作的网站的主色调，可以根据网站所属的行业或内容确定网站的基色，同时也应了解客户的喜好。,2.,网站可行性分析,可行性分析就是分析是否有能力、有财力建设和维护这个网站；分析网站建立以后是否有一定的经济效益或社会效益；分析网站建设需要花费多少时间、精力、人力，性价比是否合适。,5,第2章 Dreamweaver CS6站点创建与管理2.2,第,2,章,Dreamweaver CS6,站点创建与管理,2.2,站点规划,网站,的建设一般要考虑如下几个方面：,3,.,确定网站的目录结构和链接结构,制作拓扑图，对该网站的目录结构进行规划，包括：网站主要有哪几部分组成，每个部分中要划分为哪几个小项目。可以画出网站的大致结构，即确定由哪种形状布局，并将网页中相关内容大致排列在草图中。,4.,确定网站的整体风格,网站的整体风格是抽象的，是指站点的整体形象给浏览者的综合感受。包括站点的版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。风格是有人性的，通过站点的外表、内容、文字、交流可以概括出一个站点的个性和情绪。风格形成不是一次定位的，它可以在实践中不断强化、调整和修饰,。,6,第2章 Dreamweaver CS6站点创建与管理2.2,第,2,章,Dreamweaver CS6,站点创建与管理,2.3,创建本地,站点,所谓本地站点，就是指本地硬盘中存放待发布到网络中的远程站点的所有文档的地方,。,2.3.1,创建本地站点,创建本地站点的具体操作如下：单击“站点”菜单，选择“新建站点”命令,打开如图,2.3,所示的“站点设置对象”对话框,。,选择硬盘上的一个位置作为本地站点的根目录所在位置。在选定的位置创建一个文件夹，作为本地站点的根目录。假设我们要建立一个名为“,EBook,”的站点，可以在,D,盘上创建同名文件夹,。,7,图,2.3,“站点设置对象”对话框,第2章 Dreamweaver CS6站点创建与管理2.3,第,2,章,Dreamweaver CS6,站点创建与管理,2.3,创建本地站点,所谓本地站点，就是指本地硬盘中存放待发布到网络中的远程站点的所有文档的地方。,2.3.2,站点高级设置,在图,2.3,所示的“站点设置对象”对话框左侧选择“高级设置”选项，可以进行站点的高级设置，如图,2.4,所示，主要选项的具体含义如下：,8,图,2.4,“高级设置”,选项,第2章 Dreamweaver CS6站点创建与管理2.3,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理,网站,2.4.1,站点的编辑,删除,站点,需要注意的是，删除站点操作仅仅是删除了站点文件与,Dreamweaver,的联系，并没有真正删除站点文件，站点文件仍然存在于硬盘中。,编辑站点,打开如图,2.3,所示的“站点设置对象”对话框，可以修改已有的站点设置。,复制站点,在站点名称列表中选择需要复制的站点，单击“复制”按钮，即可复制该站点。新复制的站点名称将会出现在站点列表内,。,9,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理,网站,2.4.1,站点的编辑,导出,站点,通过站点的导出和导入，可以在不同计算机和产品版本之间移动站点，与其他用户共享,。,单击,“站点”菜单，选择“管理站点”命令,弹出如图,2.5,所示的“管理站点”对话框，在站点名称列表中选择要编辑的站点，相关编辑可以在列表下方选择“删除”按钮、“编辑”按钮、“复制”按钮或“导出”按钮来完成。,10,图,2.5,“管理站点”对话框,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理,网站,2.4.2,站点文件管理,1.,在站点中新建文件夹,刚刚建立的站点是空的，用户可以添加文件夹。站点内的文件夹可以起到分类管理子栏目和各种文件的作用，新建文件夹的方法如下：,在文件面板中选择“本地视图”，在站点的根目录上右击鼠标，在弹出的快捷菜单中，选择“新建文件夹”，如图,2.6,所示；,系统自动在根目录下创建一个文件夹，此时文件夹名称处于可编辑状态，修改文件夹名称后，按回车键，即完成新建文件夹的操作；,11,图,2.6,新建文件夹,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理,网站,2.4.2,站点文件管理,2.,在站点中新建网页文件,用户可以在站点中添加文件，方法如下：,(1),在,文件面板中选择“本地视图”，在站点中要创建文件的文件夹上右击鼠标，在弹出的快捷菜单中，选择“新建文件”，如图,2.7,所示；,(2),统,自动在此文件夹下创建一个网页文件，此时文件名处于可编辑状态，修改文件名称后，按回车键，即完成新建网页文件的操作；,12,图,2.7,新建网页文件,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理,网站,2.4.2,站点文件管理,3.,使用“新建文档”对话框新建文件,在,Dreamweaver CS6,中，还可以通过“新建文档”对话框新建文件，方法如下：,(1),单击,“文件”菜单，在弹出的下拉菜单中，选择“新建”命令，如图,2.8,所示；,(2),在,弹出的“新建文档”对话框左侧选择“空白页”选项卡，在“页面类型”中选择文件类型，例如,HTML,，如图,2.9,所示,；单击,“创建”按钮，完成新建文件的操作。,13,图,2.8 “,新建”命令,图,2.9 “,新建文档”对话框,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理网站,2.4.2,站点文件管理,4,.,复制和移动文件或文件夹,(1),在,文件面板中选择“本地视图”，在要复制的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”,|,“拷贝”，如图,2.10,所示；,(2),在,要准备复制到的目标文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”,|,“粘贴”；,(3),也,可以使用快捷键，单击选中准备复制的文件或文件夹，按,Ctrl+C,复制；然后选择复制到的目标文件夹，按,Ctrl+V,粘贴，完成复制文件或文件夹的操作,。,14,图,2.10,“编辑”,|,“拷贝”命令,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理网站,2.4.2,站点,文件管理,5.,移动文件或文件夹,(1,),在,文件面板中选择“本地视图”，在要移动的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”,|,“剪切”，如图,2.11,所示；,(2),在,要准备移动到的目标文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”,|,“粘贴”；,(3),也,可以使用快捷键，单击选中准备移动的文件或文件夹，按,Ctrl+X,剪切；然后选择移动到的目标文件夹，按,Ctrl+V,粘贴，完成移动文件或文件夹的操作,。,15,图,2.11 “,编辑”,|“,剪切”命令,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理网站,2.4.2,站点,文件管理,6.,重命名文件或文件夹,(1),在,文件面板中选择“本地视图”，在要重命名的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”,|,“ 重命名”，如图,2.12,所示；,(2),选中,的文件名称变为可编辑状态，输入新的文件名称，按回车键，完成重命名操作,；,16,图,2.12 “,编辑”,|“,重命名”命令,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.4,管理网站,2.4.2,站点,文件管理,7.,删除文件或,文件夹,在文件面板中选择“本地视图”，在要删除的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”,|,“删除”，如图,2.13,所示，即可完成删除文件或文件夹的操作。,17,图,2.13 “,编辑”,|“,删除”命令,第2章 Dreamweaver CS6站点创建与管理2.4,第,2,章,Dreamweaver CS6,站点创建与管理,2.5,课堂实例：本地站点的创建与管理,【例,2.1,】,EBook,站点的建立和默认图像文件夹的设置,【目标】通过本例的学习，掌握和熟悉,Dreamweaver CS6,中本地站点的创建和管理。,【思路】,要创建一个本地站点，首先要定义站点，在本地磁盘上建立一个文件夹，用来存储网站中的文件，然后使用“站点高级”选项卡进行设置，并在站点文件夹中建立子文件分类管理媒体文件,。,【步骤】,步骤,1,：,在,D,盘上创建一个名为“,EBook,”的文件夹。,步骤,2,：,启动,Dreamweaver CS6,，单击“站点”菜单，选择“新建站点”命令,打开“站点设置对象”对话框,。,18,第2章 Dreamweaver CS6站点创建与管理2.5,第,2,章,Dreamweaver CS6,站点创建与管理,2.5,课堂实例：本地站点的创建与管理,【例,2.1,】,EBook,站点的建立和默认图像文件夹的设置,【步骤】,步骤,3,：,在“站点设置对象”对话框左侧选择“站点”，在右侧的“站点名称”处输入“,EBook,”，在本地站点文件夹处选择,D:EBook,。,步骤,4,：,在文件面板中选择“本地视图”，在站点的根目录,EBook,上右击鼠标，在弹出的快捷菜单中，选择“新建文件夹”，文件夹的名称为“,images,”，用同样的方法在根目录,EBook,中创建文件夹“,music,”和“,movie,”,。,步骤,5,：,在“站点设置对象”对话框左侧选择“高级设置”,|,“本地信息”，在右侧的“默认图像文件夹”处选择,D:EBookimages,步骤,6,：,在文件面板中选择“本地视图”，在站点的根目录,EBook,上右击鼠标，在弹出的快捷菜单中，选择“新建文件”，文件的名称为“,index.html,”。,步骤,7,：,设置完毕，完成本地站点的建立,。,19,第2章 Dreamweaver CS6站点创建与管理2.5,第,2,章,Dreamweaver CS6,站点创建与管理,2.6,本章小结,在网页制作过程中使用可视化网页编辑工具是主要趋势。本章介绍了,Macromedia,公司的可视化网页编辑工具,Dreamweaver CS6,的安装、启动和工作环境，并通过对网站的规划、创建、管理的详细介绍，帮助读者对网站的建设过程有一个系统全面的了解，从实例“本地站点的创建与管理”的学习及实践中掌握站点的创建以及编辑方法。,20,第2章 Dreamweaver CS6站点创建与管理2.6,第,2,章,Dreamweaver CS6,站点创建与管理,思考与练习,2,1.,思考题,：,(1),在,对,web,站点进行规划时需要哪些步骤？,(2),创建,一个,web,站点需要哪些步骤？,(3)Dreamweaver,CS6,是由哪个公司出品的？它是一个什么样的软件？,21,第2章 Dreamweaver CS6站点创建与管理思考与练,第,2,章,Dreamweaver CS6,站点创建与管理,思考与练习,2,2.,选择题：,（,1,）下面按钮用来查看网页代码的是（,）,。,（,2,）在,Dreamweaver CS6,中，我们可以（,）。,A,重定义站点,B.,复制站点,C.,剪切站点,D.,删除站点,（,3,）要想编辑、复制或者导入站点时，可以执行“站点”（,）。,A,.,同步站点范围,B.,新建站点,C,.,管理站点,D.,高级,22,第2章 Dreamweaver CS6站点创建与管理思考与练,第,2,章,Dreamweaver CS6,站点创建与管理,思考与练习,2,2.,选择题：,（,4,）通常一个站点的主页默认文档名是（,）。,A,main.html B. webpage.html,C,index.html D. homepage.html,（,5,）在,Dreamweaver CS6,中，导出站点文件的扩展名为（,）。,A,.html,B. .htm,C,.ste,D. .web,（,6,）使用,Dreamweaver CS6,制作网站须先定义一个站点，至少设置一个本地文件夹，选择“站点”,( ),菜单命令可打开定义新站点对话框。,A,新建站点,B.,管理站点,C,编辑站点,D.,设置,站点,23,第2章 Dreamweaver CS6站点创建与管理思考与练,第,2,章,Dreamweaver CS6,站点创建与管理,思考与练习,2,3.,判断题：,（,1,）使用,Dreamweaver CS6,制作网站时，最好把素材和网页文件放在同一个网站根文件夹下以便管理。（,）,（,2,）网站首页的文件名必须是,index.html,。（,）,（,3,）在,Dreamweaver CS6,中，不能删除站点。（,）,（,4,）,Dreamweaver CS6,编辑区的视图模式包括代码视图、设计视图、,标准视图和拆分视图。（,）,24,第2章 Dreamweaver CS6站点创建与管理思考与练,第,2,章,Dreamweaver CS6,站点创建与管理,思考与练习,2,4,.,操作题,：,（,1,）定义一个本地站点，名称为“网络书城”，站点目录设置为,d:site,并在该目录中再建立一个子目录“,images,”。,（,2,）打开站点面板，并打开新创建的站点“网络书城”。,（,3,）在站点面板的本地文件列表中创建一个名称为“,index.htm”,的文件，并将该文件定义为主页文件。,（,4,）在站点根目录新建文件夹“,images,”、“,music,”和“,movie,”。,25,第2章 Dreamweaver CS6站点创建与管理思考与练,