第三讲使用Dreamweaver8创建和管理本地站点.ppt

第第第第2 2 2 2章章章章使用使用使用使用Dreamweaver8Dreamweaver8Dreamweaver8Dreamweaver8创建和管理本地站点创建和管理本地站点创建和管理本地站点创建和管理本地站点12345规划站点结构规划站点结构 认识认识Dreamweaver 8 Dreamweaver 8 建立本地站点建立本地站点 管理本地站点管理本地站点 管理站点地图管理站点地图6网页文件的基本操作网页文件的基本操作 1 认识认识Dreamweaver 8 Dreamweaver Dreamweaver 是美国是美国MacromediaMacromedia公司开发的集公司开发的集网页制作和网站管理于一身的网页制作软件，也网页制作和网站管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以方便、快捷地制作出跨页制作软件，利用它可以方便、快捷地制作出跨越平台限制和浏览器限制的充满丰富动感的网页越平台限制和浏览器限制的充满丰富动感的网页1.1 dreamweaver版本排序版本排序v Dreamweaver 1.0 (发布于1997年12月）v Dreamweaver 1.2（发布于1998年三月) v Dreamweaver 2.0 （发布于1998年12月）v Dreamweaver 3.0 （发布于1999年12月）v Dreamweaver UltraDev 1.0 (发布于1999年12月)v Dreamweaver 4.0 （发布于2000年12月）v Dreamweaver UltraDev 4.0 (发布于2000年12月) v Dreamweaver MX （发布于2002年5月） v Dreamweaver MX 2004 （发布于2003年9月） v Dreamweaver 8 (发布于2005年8月) v Dreamweaver CS3 (发布于2007年7月)v Dreamweaver CS4(BETA发布于2008年5月17日)v Dreamweaver CS4（正式版发布于2008年9月23日）v Dreamweaver CS5（正式版发布于2010年4月12日）1.2 Dreamweaver8 的安装的安装1.2 Dreamweaver 8 工作界面工作界面文档窗口文档窗口“插入插入”面板面板“属性”面板文档工具栏文档工具栏面板组面板组文文件件面面板板状态栏状态栏v标题栏 显示应用程序的名称、最小化、最大化和正常之间的切换按钮以及关闭按钮1.3 Dreamweaver 8 常用工具常用工具v菜单栏文件：用来管理文件。

编辑：用来编辑文本，如剪切、复制、粘贴等，还包括“首选参 数”命令查看：可以设置文档的各种视图，可以显示和隐藏不同类型的 页面元素和工具栏插入：用来插入各种元素修改：具有对页面元素修改的功能 文本：用来对文本进行操作命令：所有的附加命令项站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能v“插入”面板 “插入”面板集成了所有可以在网页应用的对象，包括“插入”菜单中的选项有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜单共167个按钮 “插入”面板其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格图层、框架、表单、Flash和ActiveX等网页元素v文档窗口：用于显示当前创建或编辑的文档1.文档标题栏 显示当前网页页面的标题及打开的文件名2.文档工具栏 文档工具栏包含可在代码视图、设计视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令3. 页面编辑区 用于设置和编辑页面内的文本、图形和表格等v状态栏 用于显示当前编辑文档的状态，主要包括文档的用于显示当前编辑文档的状态，主要包括文档的窗口大小、文档的大小和下载时间及标签选择器窗口大小、文档的大小和下载时间及标签选择器等。

等v属性面板 使用“窗口”菜单的“属性”选项或按快捷键Ctrl+F3，可显示或隐藏属性面板 用于显示当前选定文本或图片等元素对象的属性，且可以用来修改选定对象的属性面板组 使用“窗口”菜单中的选项，可以显示或隐藏各种面板（1）资源面板 资源面板中列出了当前网页或站点中用到的各种网页元素 2）行为面板 行为面板是编辑网页中由特定事件触发交互行为的地方，能为网页添加很多特殊效果 （3）CSS样式面板 可以方便地定义CSS样式和管理CSS样式 （4）代码检查器 列出了当前网页文件的HTML源代码，对不同的HTML源代码将用不同的颜色显示，并用黄色高亮显示错误代码（5）框架面板 框架面板以一种在文档窗口中不能显示的方式显示框架集的层次结构 6）层面板 列出了当前网页中的层对象列表和叠放优先顺序：先建立的层位于列表的底部，最后建立的层位于列表的上部使用层面板可以防止层重叠，改变层的可见性和叠放顺序7）历史记录面板 历史记录面板自动记录了用户最近进行的50步操作可以通过历史记录面板撤消已完成的操作 。

8）参考面板 通过参考面板，用户可以快速地获得JavaScript、HTML、CSS和BrowserDOMs等的参考信息2 规划站点结构规划站点结构v站点规划是一个复杂的系统工程，包括一系列的组织、策划和设计v规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存放在文件夹中以便于设计者管理合理地组织站点结构，可提高工作效率，加快对站点的设计v一般来说，整个站点是一个大的文件夹，其中又包括许多小文件夹，分别存放站点中不同类型的文件2.1 按照文件的类型对文件进行规划按照文件的类型对文件进行规划v将不同类型的文件分别存放在不同的文件夹中2.2 按照主题对文件进行规划按照主题对文件进行规划§在根文件夹下根据网站不同的主题分类v可以根据规划绘制出一个网站结构草图，以便于有一个清晰的思路外语影片“零零影视”网站首页动作片国语影片喜剧片外语影片国语影片爱情片外语影片国语影片今日推荐艺术片外语影片国语影片恐怖片外语影片国语影片影星专辑2.3 2.3 了解文件目录命名及目录结构规范了解文件目录命名及目录结构规范1．文件和文件夹的命名文件和文件夹命名时需要注意以下4点1）不能使用中文在所有的操作系统中，只有英文字符和数字的编码是完全一致的，也就是说，采用其他的字符（如中文字符）就可能导致许多人无法正常浏览用户的网站。

2）最好使用小写因为有些操作系统（如UNIX等）对大小写敏感，对它们而言， index.htm和（3）不能使用特殊字符文件名和文件夹名不能使用特殊符号、空格，以及～、!、@、#、$、%、^、&、*等符号4）合理使用下划线下划线“_”在命名时主要用于将两个单词分开或给同类文件批量命名，如title_news.gif和news_001.htm等2．网站首页的命名 网页首页是指浏览者在浏览器中输入网址时，服务器默认发放给浏览者的该网站的第一个网页 由于本书只介绍静态网页的制作，建议用户最好将网站首页的文件名设为index.html 3．目录结构规范 目录建立的基本原则是：以最小的层次提供最清晰简便的访问结构具体而言，需要注意以下一些原则1）站点根目录一般只存放index.htm以及系统文件，不要将所有网页都存放在根目录下2）每个一级栏目开设一个独立的目录3）根目录下的images文件夹用于存放各页面的公用图片，子目录下的images文件夹存放本栏目页面中使用的私有图片4）所有CSS文件存放在根目录下的style目录中5）多媒体文件存放在根目录下的media目录中6）目录层次不要太深，最好不要超过3层。

7）不要使用过长的目录名 3 建立本地站点建立本地站点v新建站点v新建文件夹v新建网页文件新建站点通过[站点][新建站点]菜单命令或“文件”面板新建站点新建文件夹v建立好站点后就可以在站点中新建文件夹，该文件夹主要用来存储这个网站中用到的网页元素，如图片、音乐等新建网页文件v新建网页文件的方法与新建文件夹的方法相同 4 管理本地站点管理本地站点 v选择本地站点v删除站点中的文件和文件夹v更改站点信息5 管理站点地图管理站点地图5.1 定义主页 在使用站点地图查看站点时必须保证这个站点已定义了一个主页，因为主页是一个站点的根节点，必须有根节点才有各个支节点，也就是各个子页 5.2 查看站点地图查看站点地图 v查看站点地图是在Dreamweaver 8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项5.3在站点地图中管理页面文件在站点地图中管理页面文件 v打开页面文件v在页面文件上双击鼠标即可打开该文件v在选择页面之后，选择[文件][打开]菜单命令打开页面v选择页面后单击鼠标右键，在弹出的快捷菜单中选择“打开”命令可打开页面v新建页面文件新建页面文件v在建立好站点地图之后，如果还需要在其中添加新的网页文件，可以在站点地图中新建一个页面文件。

v更改页面标题v在站点地图中可对页面标题进行更改，以方便对站点的管理6 网页文件的基本操作网页文件的基本操作v新建网页 除了可以在“文件”面板中可以新建网页还可以通过以下的操作新建网页：　1．执行以下操作之一：　　·单击菜单栏中“文件”|“新建”命令　　·单击标准工具栏上的按钮　2．打开“新建文档”对话框　3．选择“基本页”选项中的“HTML”，单击“创建”按钮，即可新建一个空白的文档 v保存网页 新建网页要进行保存，保存网页的操作为：　　1．执行以下操作之一：　　 单击菜单栏中“文件”|“保存”命令　　 单击标准工具栏上的 按钮　　2．打开“另存为”对话框 　　3．在“保存在”选项中选择网页的保存位置在“文件名”文本框中的输入文件名　　4．单击“保存”按钮，文件就保存到指定位置v打开网页 打开己保存的网页有以下三种方法 　　　1、通过文件菜单打开己有的网页，具体操作为：　　（1）执行以下操作之一：　　 单击菜单栏中的“文件”|“打开”命令　　 或单击标准工具栏上的 　　（2）打开“打开”对话框　　（3）在查找范围下拉列表中选择网页所在的文件夹，选择要打开的文件，单击“打开”按钮，即可打开了文件。

　　2、在“文件”面板中打开网页文件　　在“文件”面板中，双击要打开的文件，即可打开网页　　3、在资源管理器中打开网页文件　　在资源管理器中，右击要打开的网页文件，在弹出的快捷菜单中选择“在Dreamweaver8”中编辑即可将文件在Dreamweaver8中打开 v预览网页预览网页　　编辑好的网页可以随时在浏览器中预览文档，查看网页的版式及链接的完好性，从而对网页进行修改以在Iexplore中预览为例，执行以下操作之一：　　单击菜单栏中“文件”|“在浏览器中“预览”|“Iexplore 6.0”命令　　使用快捷键为F12　　在文档工具栏中单击，选择在浏览器中预览上机实践上机实践 本课上机实战将练习创建一个名为“国画欣赏”的站点，将其中的本地站点保存在“D:\guohua”文件夹下然后为“国画欣赏”网站建立一个存放图片的文件夹“images”，并新建名为“index.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件国画知识分类欣赏联系我们国画大师“国画欣赏”网站首页今日名画国画论坛。