第2章初识Dreamweaver 8.ppt

《第2章初识Dreamweaver 8.ppt》由会员分享，可在线阅读，更多相关《第2章初识Dreamweaver 8.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第2章 初识Dreamweaver 8|熟悉Dreamweaver 8操作环境|网站规划与管理|设置页面属性|上机实践编辑“墨攻”页面并保存 2.1 熟悉Dreamweaver操作环境|安装Dreamweaver 8后，单击“开始”按钮，选择“所有程序”“Macromedia”“Macromedia Dreamweaver 8”菜单，就可以启动Dreamweaver 8了。进入Dreamweaver 8后，首先映入眼帘的是起始页。打开最近打开最近打开最近打开最近打开过的打开过的打开过的打开过的文件文件文件文件创建不同创建不同创建不同创建不同类型的新类型的新类型的新类型的新文件文件文件文件在系统

2、内置在系统内置在系统内置在系统内置文件的基础文件的基础文件的基础文件的基础上创建新文上创建新文上创建新文上创建新文件件件件|在起始页的“创建新项目”列中选择“HTML”后，将会进入Dreamweaver 8的工作界面。菜单栏菜单栏标题栏标题栏插入栏插入栏文档标签文档标签文档工具栏文档工具栏收缩与展开收缩与展开下方面板组下方面板组状态栏状态栏属性面板属性面板收缩与展开收缩与展开右方面板组右方面板组面面板板组组2.1.1 “插入”栏|“插入插入”栏包含用于将各种类型栏包含用于将各种类型的对象（如图像、表格和层）插入的对象（如图像、表格和层）插入到文档中的按钮。到文档中的按钮。|单击单击“插入插入”

3、栏左侧的栏左侧的“常用常用”按钮可以打开一个下拉列表，从中按钮可以打开一个下拉列表，从中选择其他选项可以改变选择其他选项可以改变“插入插入”栏栏的内容。的内容。|单击单击“常用常用”按钮，在下拉列表中选择按钮，在下拉列表中选择“显示为制表显示为制表符符”命令，命令，“插入插入”栏的外观将发生变化。栏的外观将发生变化。|某些按钮的右侧带有一个小三角符号某些按钮的右侧带有一个小三角符号“”“”，单击该，单击该三角符号将弹出该按钮的一组同位按钮。三角符号将弹出该按钮的一组同位按钮。2.1.2 文档标签与文档工具栏|文档标签显示了当前打开的网页文档的名称。只只显示代显示代码视图码视图显示代码视图显示代

4、码视图和设计视图和设计视图只只显示设显示设计视图计视图刷新设刷新设计视图计视图在在浏览器中浏览器中预览预览/调试调试文档工具栏用于切换网页视图，管理文件，以及预览文档工具栏用于切换网页视图，管理文件，以及预览文档工具栏用于切换网页视图，管理文件，以及预览文档工具栏用于切换网页视图，管理文件，以及预览网页等。网页等。网页等。网页等。文档标题文档标题2.1.3 文档窗口中的状态栏|状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。标签选择器标签选择器手形工具手形工具缩放工具缩放工具文档大小与预计下载时间文档大小与预计下载时间标签选择器显示了光标所在位置的标签的层次结构。标签选择器显示了光标

5、所在位置的标签的层次结构。标签选择器显示了光标所在位置的标签的层次结构。标签选择器显示了光标所在位置的标签的层次结构。选取、手形和缩放工具是选取、手形和缩放工具是选取、手形和缩放工具是选取、手形和缩放工具是Dreamweaver 8Dreamweaver 8新增的功新增的功新增的功新增的功能，能，能，能，分别用于选取、移动和缩放对象。分别用于选取、移动和缩放对象。分别用于选取、移动和缩放对象。分别用于选取、移动和缩放对象。选取工具选取工具2.1.4 属性面板与面板组|属性面板用于查看或编辑所选对象的属性。属性面板会随着所选对象的不同而变化。选中图像后选中图像后选中图像后选中图像后的属性面板的属

6、性面板的属性面板的属性面板选中文字后选中文字后选中文字后选中文字后的属性面板的属性面板的属性面板的属性面板|Dreamweaver 8Dreamweaver 8为用户提供了众多面板，如属为用户提供了众多面板，如属性面板、文件面板、历史记录面板等。为便于管理，性面板、文件面板、历史记录面板等。为便于管理，Dreamweaver 8Dreamweaver 8将这些面板归入到不同的面板组将这些面板归入到不同的面板组中。中。“文件文件文件文件”面板组包面板组包面板组包面板组包括三个面括三个面括三个面括三个面板板板板“CSS”CSS”面面面面板组包括板组包括板组包括板组包括两个面板两个面板两个面板两个面

7、板2.2 网站规划、创建与管理n n2.2.1 确定网站结构所谓网站结构，就是网站中各个分支之间以及分支所谓网站结构，就是网站中各个分支之间以及分支所谓网站结构，就是网站中各个分支之间以及分支所谓网站结构，就是网站中各个分支之间以及分支与主页之间的关系与主页之间的关系与主页之间的关系与主页之间的关系。通常情况下，一个网站的结构往往与该网站的导航通常情况下，一个网站的结构往往与该网站的导航通常情况下，一个网站的结构往往与该网站的导航通常情况下，一个网站的结构往往与该网站的导航菜单相对应。菜单相对应。菜单相对应。菜单相对应。百度网当当网首页 确定好网站结构后，接下来应根据网站结构创建本地站点，确定

8、好网站结构后，接下来应根据网站结构创建本地站点，实际上就是确定本地站点以及文件的存放位置。实际上就是确定本地站点以及文件的存放位置。注：网站根目录文件夹名称任意，但子目录名称只能是英注：网站根目录文件夹名称任意，但子目录名称只能是英文小写字母、数字和其它符号。文小写字母、数字和其它符号。2.2.2 确定站点目录结构2.2.3 定义站点站点站点站点站点信息信息信息信息新站点新站点新站点新站点为便于管理和编辑站点，在创建网页之前，首先要在为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。中定义站点。定义站点可以将本地磁盘中的站点同定义站点可以将本地磁盘中的站点同Dre

9、amweaver建立一定的关联。定义站点包括设置站点名称、站点建立一定的关联。定义站点包括设置站点名称、站点性质以及站点所对应的文件夹。创建站点之后，删除性质以及站点所对应的文件夹。创建站点之后，删除站点时并未删除站点文件，仅仅删除了站点与站点时并未删除站点文件，仅仅删除了站点与DW的的联系。联系。2.2.4 新建、打开和关闭网页文件1.新建网页文件 Dreamweaver中的文件也就是网页，可以通过中的文件也就是网页，可以通过“文件文件”“新建新建”菜单来创建新网页。菜单来创建新网页。2.打开网页文件如果要打开某站点中现有的网页文件，可以选择“文件”“打开”菜单，在“打开”对话框中进行选择。

10、3.关闭网页文件要关闭网页文件，只需单击相应文件右上角的“关闭”按钮，或者按【Ctrl+W】组合键。2.2.5 保存和预览网页文件新建或编辑网页文件后，需要保存文件，才能使所做的设置生效。选择“文件”“保存”菜单或按【Ctrl+S】组合键，即可保存文件。对网页进行编辑或修改后，按【F12】键可以在浏览器中预览其效果。2.2.6 “文件”面板的应用在Dreamweaver中，利用“文件”面板可以非常方便地管理站点中的网页文件和文件夹。显示站显示站显示站显示站点名称点名称点名称点名称连接到远程连接到远程连接到远程连接到远程主机或与远主机或与远主机或与远主机或与远程主机断开程主机断开程主机断开程主机

11、断开刷新刷新刷新刷新站点站点站点站点获取获取获取获取文件文件文件文件上传上传上传上传文件文件文件文件取出取出取出取出文件文件文件文件存回存回存回存回文件文件文件文件选择选择选择选择视图视图视图视图展开以展开以展开以展开以同时显同时显同时显同时显示本地示本地示本地示本地和远程和远程和远程和远程站点站点站点站点站点内站点内站点内站点内容列表容列表容列表容列表1新建文件和文件夹利用“文件”面板可以方便地新建文件（实际上就是网页）和文件夹。n n如要新建文件夹，可在弹出的菜单中选择“新建文件夹”选项，其他操作同上。2重命名文件和文件夹在“文件”面板中可以方便地重命名文件和文件夹，在右键快捷菜单中选择“

12、编辑”“重命名”菜单即可。3文件与文件夹的命名规则为便于日后的维护和管理，网站中所有文件和文件夹的命名都是有一定规则的。|最好不要使用中文命名文件。最好不要使用中文命名文件。|文件名中不要使用大写英文字母。文件名中不要使用大写英文字母。|运算符符号不能用在文件名的开头。运算符符号不能用在文件名的开头。|比较长的文件名可使用下划线比较长的文件名可使用下划线“_”_”来隔开多个单词或关键来隔开多个单词或关键字。字。|在大型网站中，分支页面的文件应存放在单独的文件夹中存在大型网站中，分支页面的文件应存放在单独的文件夹中存放网页图像的文件夹一般命名为放网页图像的文件夹一般命名为“images”imag

13、es”或者或者“imgimg”。|在动态网站中，用来存放数据库的文件夹一般被命名为在动态网站中，用来存放数据库的文件夹一般被命名为“data”data”或者或者“database”database”。4在“文件”面板中打开和删除文件n n要打开文件，可以直接在文件列表区双击文件名。如果是网页文件，该文件会自动在网页编辑区打开；如果是图像文件，系统会自动启动Fireworks并打开文件。n n要删除文件或文件夹，可以右击文件或文件夹，然后在弹出的菜单中选择“编辑”“删除”，也可在选中文件后，直接按【Delete】键删除。2.3 设置页面属性n n2.3.1 外观选项n n单击属性面板上的“页面属

14、性”按钮，或者选择“修改”菜单下的“页面属性”命令，将打开“页面属性”对话框，默认显示为“外观”选项。设置页面字体设置页面字体设置页面字体设置页面字体设置页面字号设置页面字号设置页面字号设置页面字号设置页面设置页面设置页面设置页面文本颜色文本颜色文本颜色文本颜色设置页面设置页面设置页面设置页面背景颜色背景颜色背景颜色背景颜色设置页面设置页面设置页面设置页面背景图像背景图像背景图像背景图像设置背景设置背景设置背景设置背景图像重复图像重复图像重复图像重复方式方式方式方式设置页面与设置页面与设置页面与设置页面与浏览器左、浏览器左、浏览器左、浏览器左、右、上、下右、上、下右、上、下右、上、下边界的距离

15、边界的距离边界的距离边界的距离2.3.2 链接选项n n在“页面属性”对话框中，单击左侧“分类”列表中的“链接”选项，其参数设置将显示在对话框右侧。设置链接文设置链接文设置链接文设置链接文本的字体本的字体本的字体本的字体设置链接文设置链接文设置链接文设置链接文本的字号本的字号本的字号本的字号设置链接文设置链接文设置链接文设置链接文本在不同状本在不同状本在不同状本在不同状态下的颜色态下的颜色态下的颜色态下的颜色设置链接设置链接设置链接设置链接对象的下对象的下对象的下对象的下划线情况划线情况划线情况划线情况2.3.3 标题选项n n单击左侧“分类”列表中的“标题”选项，其参数设置将显示在对话框右侧

16、。设置页面标题设置页面标题设置页面标题设置页面标题的字体样式的字体样式的字体样式的字体样式设置各级标题的设置各级标题的设置各级标题的设置各级标题的字号以及颜色字号以及颜色字号以及颜色字号以及颜色2.3.4 标题/编码选项n n单击左侧“分类”列表中的“标题/编码”选项，其参数设置将显示在对话框右侧。设置网页标题设置网页标题设置网页标题设置网页标题指定文档指定文档指定文档指定文档类型定义类型定义类型定义类型定义指定文档中指定文档中指定文档中指定文档中字符所用的字符所用的字符所用的字符所用的编码类型编码类型编码类型编码类型2.3.5 跟踪图像选项n n单击左侧“分类”列表中的“跟踪图像”选项，其参数设置将显示在对话框右侧。设置跟设置跟设置跟设置跟踪图像踪图像踪图像踪图像设置跟踪图设置跟踪图设置跟踪图设置跟踪图像的透明度像的透明度像的透明度像的透明度2.4 上机实践编辑“墨攻”页面并保存n n本节通过编辑“墨攻”页面，来使读者进一步领略Dreamweaver的独特魅力