DreamweaverCS6站点创建与管理课件.pptx

《DreamweaverCS6站点创建与管理课件.pptx》由会员分享，可在线阅读，更多相关《DreamweaverCS6站点创建与管理课件.pptx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、21世纪普通高校计算机公共课程规划教材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

2、.1 Dreamweaver CS6的安装和启动以Dreamweaver CS6为例，安装Dreamweaver的方法如下： 在Macromedia官方网站下载安装程序； 双击Dreamweaver安装程序图标，在显示的解压缩界面中，选择保存解压缩安装文件的路径； 准备文件进度完成后显示欢迎界面，选择安装选项。 在弹出的“Adobe软件许可协议”界面，选择“接受”。 在弹出的“序列号”界面，输入合法的序列号，单击“下一步”。 在弹出的“选项”界面，选择安装路径，单击“安装”，安装完成后显示“安装完成”界面。2 2第2章 Dreamweaver CS6站点创建与管理2.1 Dreamweaver

3、 CS6概述2.1.1 Dreamweaver CS6的安装和启动首次启动Dreamweaver CS6时，会出现“默认编辑器”窗口对话框，在此可以选择常用的文件类型。启动Dreamweaver CS6后的界面如图1.8所示，在此可以选择新建页面的类型。3 3图2.1 Dreamweaver CS6的启动界面第2章 Dreamweaver CS6站点创建与管理2.1 Dreamweaver CS6概述2.1.2 Dreamweaver CS6的界面环境Dreamweaver8的基本工作界面如图1.9所示，由菜单栏、插入工具栏、文档窗口、标签选择器、属性面板和面板组等部分构成。4 4图2.2 D

4、reamweaver CS6工作界面第2章 Dreamweaver CS6站点创建与管理2.2 站点规划网站的建设一般要考虑如下几个方面：1. 1.确定建立网站的目的和主题确定建立网站的目的和主题首先要明确制作该网站的目的，希望网站达到什么效果，然后根据目的和已有的网站内容确定设计主题。该主题能让浏览者知道本网站是做什么的，可以获取什么信息。在确定网站内容的同时还需要确定要制作的网站的主色调，可以根据网站所属的行业或内容确定网站的基色，同时也应了解客户的喜好。2.2.网站可行性分析网站可行性分析可行性分析就是分析是否有能力、有财力建设和维护这个网站；分析网站建立以后是否有一定的经济效益或社会效

5、益；分析网站建设需要花费多少时间、精力、人力，性价比是否合适。5 5第2章 Dreamweaver CS6站点创建与管理2.2 站点规划网站的建设一般要考虑如下几个方面：3 3. .确定网站的目录结构和链接结构确定网站的目录结构和链接结构制作拓扑图，对该网站的目录结构进行规划，包括：网站主要有哪几部分组成，每个部分中要划分为哪几个小项目。可以画出网站的大致结构，即确定由哪种形状布局，并将网页中相关内容大致排列在草图中。4.4.确定网站的整体风格确定网站的整体风格网站的整体风格是抽象的，是指站点的整体形象给浏览者的综合感受。包括站点的版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站

6、点荣誉等诸多因素。风格是有人性的，通过站点的外表、内容、文字、交流可以概括出一个站点的个性和情绪。风格形成不是一次定位的，它可以在实践中不断强化、调整和修饰。6 6第2章 Dreamweaver CS6站点创建与管理2.3 2.3 创建本地创建本地站点站点所谓本地站点，就是指本地硬盘中存放待发布到网络中的远程站点的所有文档的地方。2.3.1 创建本地站点创建本地站点的具体操作如下：单击“站点”菜单，选择“新建站点”命令,打开如图2.3所示的“站点设置对象”对话框。选择硬盘上的一个位置作为本地站点的根目录所在位置。在选定的位置创建一个文件夹，作为本地站点的根目录。假设我们要建立一个名为“EBoo

7、k”的站点，可以在D盘上创建同名文件夹。7 7图2.3 “站点设置对象”对话框第2章 Dreamweaver CS6站点创建与管理2.3 2.3 创建本地站点创建本地站点所谓本地站点，就是指本地硬盘中存放待发布到网络中的远程站点的所有文档的地方。2.3.2 站点高级设置 在图2.3所示的“站点设置对象”对话框左侧选择“高级设置”选项，可以进行站点的高级设置，如图2.4所示，主要选项的具体含义如下：8 8图2.4 “高级设置”选项第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理管理网站网站2.4.1 2.4.1 站点的编辑站点的编辑删除站点需要注意的是，删除站点操作仅仅是

8、删除了站点文件与Dreamweaver的联系，并没有真正删除站点文件，站点文件仍然存在于硬盘中。编辑站点打开如图2.3所示的“站点设置对象”对话框，可以修改已有的站点设置。复制站点在站点名称列表中选择需要复制的站点，单击“复制”按钮，即可复制该站点。新复制的站点名称将会出现在站点列表内。9 9第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理管理网站网站2.4.1 2.4.1 站点的编辑站点的编辑导出站点通过站点的导出和导入，可以在不同计算机和产品版本之间移动站点，与其他用户共享。单击“站点”菜单，选择“管理站点”命令,弹出如图2.5所示的“管理站点”对话框，在站点名称列

9、表中选择要编辑的站点，相关编辑可以在列表下方选择“删除”按钮、“编辑”按钮、“复制”按钮或“导出”按钮来完成。1010图2.5 “管理站点”对话框第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理管理网站网站2.4.2 站点文件管理1. 1.在站点中新建文件夹在站点中新建文件夹刚刚建立的站点是空的，用户可以添加文件夹。站点内的文件夹可以起到分类管理子栏目和各种文件的作用，新建文件夹的方法如下：在文件面板中选择“本地视图”，在站点的根目录上右击鼠标，在弹出的快捷菜单中，选择“新建文件夹”，如图2.6所示；系统自动在根目录下创建一个文件夹，此时文件夹名称处于可编辑状态，修改文

10、件夹名称后，按回车键，即完成新建文件夹的操作；1111图2.6 新建文件夹第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理管理网站网站2.4.2 站点文件管理2.2.在站点中新建网页文件在站点中新建网页文件用户可以在站点中添加文件，方法如下：(1)在文件面板中选择“本地视图”，在站点中要创建文件的文件夹上右击鼠标，在弹出的快捷菜单中，选择“新建文件”，如图2.7所示；(2)统自动在此文件夹下创建一个网页文件，此时文件名处于可编辑状态，修改文件名称后，按回车键，即完成新建网页文件的操作；1212图2.7 新建网页文件第2章 Dreamweaver CS6站点创建与管理2.

11、4 2.4 管理管理网站网站2.4.2 站点文件管理3.3.使用使用“新建文档新建文档”对话框新建文对话框新建文件件在Dreamweaver CS6中，还可以通过“新建文档”对话框新建文件，方法如下：(1)单击“文件”菜单，在弹出的下拉菜单中，选择“新建”命令，如图2.8所示；(2)在弹出的“新建文档”对话框左侧选择“空白页”选项卡，在“页面类型”中选择文件类型，例如HTML，如图2.9所示；单击“创建”按钮，完成新建文件的操作。1313图2.8 “新建”命令图2.9 “新建文档”对话框第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理网站管理网站2.4.2 站点文件管理

12、4 4. .复制和移动文件或文件夹复制和移动文件或文件夹(1)在文件面板中选择“本地视图”，在要复制的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”|“拷贝”，如图2.10所示；(2)在要准备复制到的目标文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”| “粘贴”；(3)也可以使用快捷键，单击选中准备复制的文件或文件夹，按Ctrl+C复制；然后选择复制到的目标文件夹，按Ctrl+V粘贴，完成复制文件或文件夹的操作。1414图2.10 “编辑”|“拷贝”命令第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理网站管理网站2.4.2 站点文件管理5.5.移动文件或文

13、件夹移动文件或文件夹(1)在文件面板中选择“本地视图”，在要移动的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”|“剪切”，如图2.11所示；(2)在要准备移动到的目标文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”| “粘贴”；(3)也可以使用快捷键，单击选中准备移动的文件或文件夹，按Ctrl+X剪切；然后选择移动到的目标文件夹，按Ctrl+V粘贴，完成移动文件或文件夹的操作。1515图2.11 “编辑”|“剪切”命令第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理网站管理网站2.4.2 站点文件管理6.6.重命名文件或文件夹重命名文件或文件夹(1)在文件

14、面板中选择“本地视图”，在要重命名的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”|“ 重命名”，如图2.12所示；(2)选中的文件名称变为可编辑状态，输入新的文件名称，按回车键，完成重命名操作；1616图2.12 “编辑”|“ 重命名”命令第2章 Dreamweaver CS6站点创建与管理2.4 2.4 管理网站管理网站2.4.2 站点文件管理7. 7. 删除文件或删除文件或文件夹文件夹在文件面板中选择“本地视图”，在要删除的文件或文件夹上右击鼠标，在弹出的快捷菜单中，选择“编辑”|“删除”，如图2.13所示，即可完成删除文件或文件夹的操作。1717图2.13 “编辑”|“删除”

15、命令第2章 Dreamweaver CS6站点创建与管理2.5 2.5 课堂实例：本地站点的创建与管理课堂实例：本地站点的创建与管理【例2.1】EBook站点的建立和默认图像文件夹的设置【目标】通过本例的学习，掌握和熟悉Dreamweaver CS6中本地站点的创建和管理。【思路】 要创建一个本地站点，首先要定义站点，在本地磁盘上建立一个文件夹，用来存储网站中的文件，然后使用“站点高级”选项卡进行设置，并在站点文件夹中建立子文件分类管理媒体文件。【步骤】步骤步骤1 1：在D盘上创建一个名为“EBook”的文件夹。步骤步骤2 2：启动Dreamweaver CS6，单击“站点”菜单，选择“新建站

16、点”命令,打开“站点设置对象”对话框。1818第2章 Dreamweaver CS6站点创建与管理2.5 2.5 课堂实例：本地站点的创建与管理课堂实例：本地站点的创建与管理【例2.1】EBook站点的建立和默认图像文件夹的设置【步骤】步骤步骤3 3：在“站点设置对象”对话框左侧选择“站点”，在右侧的“站点名称”处输入“EBook”，在本地站点文件夹处选择D:EBook 。步骤步骤4 4：在文件面板中选择“本地视图”，在站点的根目录EBook上右击鼠标，在弹出的快捷菜单中，选择“新建文件夹”，文件夹的名称为“images”，用同样的方法在根目录EBook中创建文件夹“music”和“movie

17、”。步骤步骤5 5：在“站点设置对象”对话框左侧选择“高级设置”|“本地信息”，在右侧的“默认图像文件夹”处选择D:EBookimages步骤步骤6 6：在文件面板中选择“本地视图”，在站点的根目录EBook上右击鼠标，在弹出的快捷菜单中，选择“新建文件”，文件的名称为“index.html”。步骤步骤7 7：设置完毕，完成本地站点的建立。1919第2章 Dreamweaver CS6站点创建与管理2.6 2.6 本章小结本章小结在网页制作过程中使用可视化网页编辑工具是主要趋势。本章介绍了Macromedia公司的可视化网页编辑工具Dreamweaver CS6的安装、启动和工作环境，并通过对

18、网站的规划、创建、管理的详细介绍，帮助读者对网站的建设过程有一个系统全面的了解，从实例“本地站点的创建与管理”的学习及实践中掌握站点的创建以及编辑方法。2020第2章 Dreamweaver CS6站点创建与管理思考与练习思考与练习2 21. 1.思考题思考题：(1)在对web站点进行规划时需要哪些步骤？(2)创建一个web站点需要哪些步骤？(3)Dreamweaver CS6是由哪个公司出品的？它是一个什么样的软件？2121第2章 Dreamweaver CS6站点创建与管理思考与练习思考与练习2 22. 2. 选择题：选择题：（1）下面按钮用来查看网页代码的是（ ）。（2）在Dreamwe

19、aver CS6中，我们可以（ ）。 A重定义站点 B.复制站点 C. 剪切站点 D.删除站点（3）要想编辑、复制或者导入站点时，可以执行“站点”（ ）。 A. 同步站点范围 B. 新建站点 C.管理站点 D.高级2222第2章 Dreamweaver CS6站点创建与管理思考与练习思考与练习2 22. 2. 选择题：选择题：（4）通常一个站点的主页默认文档名是（ ）。 A main.html B. webpage.html C index.html D. homepage.html（5）在Dreamweaver CS6中，导出站点文件的扩展名为（ ）。 A.html B. .htm C.st

20、e D. .web（6）使用Dreamweaver CS6制作网站须先定义一个站点，至少设置一个本地文件夹，选择“站点”( )菜单命令可打开定义新站点对话框。 A新建站点 B.管理站点 C编辑站点 D. 设置站点2323第2章 Dreamweaver CS6站点创建与管理思考与练习思考与练习2 23. 3. 判断题：判断题：（1）使用Dreamweaver CS6制作网站时，最好把素材和网页文件放在同一个网站根文件夹下以便管理。（ ）（2）网站首页的文件名必须是index.html。（ ）（3）在Dreamweaver CS6中，不能删除站点。（ ）（4）Dreamweaver CS6编辑区的视图模式包括代码视图、设计视图、标准视图和拆分视图。（ ）2424第2章 Dreamweaver CS6站点创建与管理思考与练习思考与练习2 24 4. . 操作题操作题：（1）定义一个本地站点，名称为“网络书城”，站点目录设置为d:site并在该目录中再建立一个子目录“images”。（2）打开站点面板，并打开新创建的站点“网络书城”。（3）在站点面板的本地文件列表中创建一个名称为“index.htm”的文件，并将该文件定义为主页文件。（4）在站点根目录新建文件夹“images”、“music”和“movie”。2525