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

第2章

使用Dreamweaver8创建和管理本地站点12345规划站点结构认识Dreamweaver8建立本地站点管理本地站点管理站点地图6网页文件的基本操作1认识Dreamweaver8

Dreamweaver是美国Macromedia公司开发的集网页制作和网站管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以方便、快捷地制作出跨越平台限制和浏览器限制的充满丰富动感的网页。1.1dreamweaver版本排序

Dreamweaver1.0(发布于1997年12月）

Dreamweaver1.2（发布于1998年三月)Dreamweaver2.0（发布于1998年12月）

Dreamweaver3.0（发布于1999年12月）

DreamweaverUltraDev1.0(发布于1999年12月)Dreamweaver4.0（发布于2000年12月）

DreamweaverUltraDev4.0(发布于2000年12月)DreamweaverMX（发布于2002年5月）

DreamweaverMX2004（发布于2003年9月）

Dreamweaver8(发布于2005年8月)DreamweaverCS3(发布于2007年7月)DreamweaverCS4(BETA发布于2008年5月17日)DreamweaverCS4（正式版发布于2008年9月23日）

DreamweaverCS5（正式版发布于2010年4月12日）1.2Dreamweaver8的安装1.2Dreamweaver8工作界面文档窗口“插入”面板“属性”面板文档工具栏面板组文件面板状态栏标题栏显示应用程序的名称、最小化、最大化和正常之间的切换按钮以及关闭按钮1.3Dreamweaver8常用工具菜单栏文件：用来管理文件。编辑：用来编辑文本，如剪切、复制、粘贴等，还包括“首选参数”命令。查看：可以设置文档的各种视图，可以显示和隐藏不同类型的页面元素和工具栏。插入：用来插入各种元素。修改：具有对页面元素修改的功能。文本：用来对文本进行操作。命令：所有的附加命令项。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。帮助：联机帮助功能。“插入”面板

“插入”面板集成了所有可以在网页应用的对象，包括“插入”菜单中的选项。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜单共167个按钮。“插入”面板其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。文档窗口：用于显示当前创建或编辑的文档1.文档标题栏显示当前网页页面的标题及打开的文件名。2.文档工具栏

文档工具栏包含可在代码视图、设计视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令。3.页面编辑区用于设置和编辑页面内的文本、图形和表格等。状态栏用于显示当前编辑文档的状态，主要包括文档的窗口大小、文档的大小和下载时间及标签选择器等。属性面板使用“窗口”菜单的“属性”选项或按快捷键Ctrl+F3，可显示或隐藏属性面板。用于显示当前选定文本或图片等元素对象的属性，且可以用来修改选定对象的属性。面板组

使用“窗口”菜单中的选项，可以显示或隐藏各种面板。（1）资源面板

资源面板中列出了当前网页或站点中用到的各种网页元素。（2）行为面板

行为面板是编辑网页中由特定事件触发交互行为的地方，能为网页添加很多特殊效果。（3）CSS样式面板

可以方便地定义CSS样式和管理CSS样式。（4）代码检查器

列出了当前网页文件的HTML源代码，对不同的HTML源代码将用不同的颜色显示，并用黄色高亮显示错误代码。（5）框架面板框架面板以一种在文档窗口中不能显示的方式显示框架集的层次结构

。（6）层面板

列出了当前网页中的层对象列表和叠放优先顺序：先建立的层位于列表的底部，最后建立的层位于列表的上部。使用层面板可以防止层重叠，改变层的可见性和叠放顺序。（7）历史记录面板

历史记录面板自动记录了用户最近进行的50步操作。可以通过历史记录面板撤消已完成的操作。（8）参考面板

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

[新建站点]菜单命令或“文件”面板新建站点。新建文件夹建立好站点后就可以在站点中新建文件夹，该文件夹主要用来存储这个网站中用到的网页元素，如图片、音乐等。新建网页文件新建网页文件的方法与新建文件夹的方法相同。4管理本地站点

选择本地站点删除站点中的文件和文件夹更改站点信息5管理站点地图5.1定义主页在使用站点地图查看站点时必须保证这个站点已定义了一个主页，因为主页是一个站点的根节点，必须有根节点才有各个支节点，也就是各个子页。5.2查看站点地图

查看站点地图是在Dreamweaver8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。5.3在站点地图中管理页面文件

打开页面文件在页面文件上双击鼠标即可打开该文件。在选择页面之后，选择[文件]

[打开]菜单命令打开页面。选择页面后单击鼠标右键，在弹出的快捷菜单中选择“打开”命令可打开页面。新建页面文件在建立好站点地图之后，如果还需要在其中添加新的网页文件，可以在站点地图中新建一个页面文件。更改页面标题在站点地图中可对页面标题进行更改，以方便对站点的管理。6网页文件的基本操作新建网页除了可以在“文件”面板中可以新建网页还可以通过以下的操作新建网页：

1．执行以下操作之一：

·单击菜单栏中“文件”|“新建”命令。

·单击标准工具栏上的按钮。

2．打开“新建文档”对话框。

3．选择“基本页”选项中的“HTML”，单击“创建”按钮，即可新建一个空白的文档。

保存网页新建网页要进行保存，保存网页的操作为：

1．执行以下操作之一：

单击菜单栏中“文件”|“保存”命令

单击标准工具栏上的按钮。

2．打开“另存为”对话框。

3．在“保存在”选项中选择网页的保存位置。在“文件名”文本框中的输入文件名。

4．单击“保存”按钮，文件就保存到指定位置。

打开网页打开己保存的网页有以下三种方法

1、通过文件菜单打开己有的网页，具体操作为：

（1）执行以下操作之一：

单击菜单栏中的“文件”|“打开”命令。

或单击标准工具栏上的。

（2）打开“打开”对话框。

（3）在查找范围下拉列表中选择网页所在的文件夹，选择要打开的文件，单击“打开”按钮，即可打开了文件。

2、在“文件”面板中打开网页文件

在“文件”面板中，双击要打开的文件，即可打开网页。

3、在资源管理器中打开网页文件

在资源管理器中，右击要打开的网页