新媒体网页设计与制作-Dreamweaver-CS6基础、案例、技巧实用教程第2章课件.ppt

1、第第2 2章章 认识认识Dreamweaver CS6Dreamweaver CS6本章学习要点：本章学习要点：1 1Dreamweaver CS6Dreamweaver CS6的工作界面的工作界面2 2Dreamweaver CS6Dreamweaver CS6文档视图文档视图3 3本地站点的创建和管理本地站点的创建和管理4 4网页文件的基本操作网页文件的基本操作 2.1 Dreamweaver CS62.1 Dreamweaver CS6工作界面工作界面2.1.1 界面布局界面布局2.1.2 2.1.2 浮动面板浮动面板 【插入】面板 2.1.2 2.1.2 浮动面板浮动面板【文件】面板和

2、【资源】面板 2.1.3 2.1.3 属性检查器属性检查器文本【属性】检查器 表格【属性】检查器 2.2 Dreamweaver CS62.2 Dreamweaver CS6的新功能和的新功能和改进功能改进功能2.2.1 2.2.1 针对智能手机和平板电脑的设计针对智能手机和平板电脑的设计 强大的jQuery Mobile和PhoneGap支持 基于流体网格的CSS布局 支持CSS3和HTML5代码 更新的多屏幕预览面板 2.2.2 2.2.2 简捷而高效的操作简捷而高效的操作 改良的FTP 性能 Business Catalyst 集成 CSS3过渡 站点特定的代码提示 2.3 2.3 创建

3、本地站点创建本地站点 Dreamweaver CS6对同一网站中的文件是以“站点”为单位来进行有效组织和管理的，因此在创建网站之前，首先需要创建一个本地站点，用于存储和管理网站中的各种网页文档以及相关的资源等数据，使网站设计者对网站的结构有一个整体的把握。2.3.1 站点管理器 选择【站点】/【管理站点】命令，进入【管理站点】界面，如下图所示：2.3.2 定义新站点 选择【窗口】/【文件】命令，打开【文件】面板，在【桌面】下拉列表中选择“管理站点”选项，如下图所示。2.3.3 2.3.3 创建文件或文件夹创建文件或文件夹 在【文件】面板中，右键单击站点根文件夹或任意一个文件夹，在弹出的快捷菜单

4、中选择【新建文件】或【新建文件夹】命令，即在选定位置创建一个新的文件或文件夹。2.3.4 2.3.4 编辑文件或文件夹编辑文件或文件夹1删除文件夹或文件 右键单击要删除的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【删除】命令，在确认对话框中选择【是】按钮，如下图所示。2.3.4 2.3.4 编辑文件或文件夹编辑文件或文件夹2重命名文件或文件夹 在【文件】面板中，右键单击要重命名的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【重命名】命令，待重命名的文件或文件夹在站点中名称以高亮方式显示时，用户直接输入新的名称即可。2.3.4 2.3.4 编辑文件或文件夹编辑文件或文件夹3移动文件或文件夹

5、 在【文件】面板中，右键单击要移动的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【剪切】命令，选择目标文件或文件夹并右键单击，在弹出的快捷菜单中选择【编辑】/【粘贴】命令，完成移动操作，如下图所示。2.4 2.4 管理本地站点管理本地站点2.4.1 2.4.1 打开站点打开站点 选择【窗口】/【文件】命令，打开【文件】面板，单击【桌面】下拉列表框，在弹出的列表中选择【管理站点】，如下图所示：2.4.2 编辑站点 在管理站点对话框中选择需要编辑的站点“Myhome”，打开【站点设置对象】对话框，在打开窗口的右侧将【站点名称】修改为“浪漫之旅”，如下图所示。2.4.2 编辑站点2.4.2 编辑站

6、点编辑后的站点列表2.4.3 2.4.3 复制站点复制站点 在管理站点窗口中选择“Mysite”站点，单击窗口下方“复制当前选定的站点”按钮，在站点列表中出现“Mysite 复制”站点，如下图所示。2.4.4 2.4.4 删除站点删除站点 在【管理站点】对话框中，选择“古韵”站点，单击按钮，弹出【删除站点】的提示对话框，如下图所示。1导出站点（1）在【站点管理】对话框中，选择“Mysite”站点。（2）单击按钮，弹出【导出站点】对话框。（3）在【保存在】下拉列表框中选择保存文件路径，在【文件名】下拉文本框中设置文件名为“Mysite.ste”，如下图所示。2.4.5 导入和导出站点 2.4.5

7、 导入和导出站点2导入站点（1）在【站点管理】对话框中，单击【导入站点】按钮，弹出【导入站点】对话框，如下图所示。（2）选择需要导入的站点文件，并单击【打开】按钮，完成站点文件的导入。2.4.5 导入和导出站点2.5 2.5 网页文件的基本操作网页文件的基本操作2.5.1 2.5.1 新建网页新建网页 打开Dreamweaver CS6，选择【文件】/【新建】命令，在弹出的【新建文档】对话框中选择【空白页】选项卡，在【页面类型】列表中选择【HTML】，同时选择【布局】规划网页，最后选择【文档类型】，单击【创建】按钮，完成网页的创建，如下图所示。2.5 2.5 网页文件的基本操作网页文件的基本操

8、作2.5.2 2.5.2 保存网页保存网页 在Dreamweaver CS6中对文档进行编辑后，需要对文档进行保存以备浏览和修改。选择【文件】/【保存】命令，弹出【另存为】对话框，在【保存在】下拉列表框中选择文档的保存位置，并在【文件名】下拉列表框中输入网页名称，单击【保存】按钮，完成网页的保存。2.5.3 2.5.3 预览网页预览网页 对网页进行编辑后，如果想查看网页在浏览器中的显示效果，可以通过以下方法实现预览：1选择【文件】/【在浏览器中预览】/【IExplore】。2单击文档工具栏的按钮。3按F12快捷键。2.5.4 2.5.4 设置页面属性设置页面属性 选择【修改】/【页面属性】命令或单击【属性】面板上的【页面属性】按钮，弹出【页面属性】对话框，在窗口左侧的【分类】列表中选择相应类别后，在右侧窗口对各属性进行详细设置，如下图所示：2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性具体操作步骤：1打开素材“examplechapter02booklist.html”文件。2单击属性检查器上的【页面属性】按钮，打开【页面属性】对话框。设置属性如下图所示：2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性预览网页