《Dreamweaver网页制作简明教程(8.0版)》第2章.ppt

第2章 DreamweaverDreamweaver 8 8入门入门 熟悉熟悉DreamweaverDreamweaver 8 8工作界面工作界面 网站创建与管理网站创建与管理 基本页面属性设置基本页面属性设置 2.1 2.1 熟悉熟悉DreamweaverDreamweaver 8 8工作界面工作界面 启动启动DreamweaverDreamweaver 8 8后，在起始页的后，在起始页的“创建新项创建新项目目”列中单击第一项列中单击第一项“HTML”HTML”，将会创建一个，将会创建一个“.html”.html”格式的新文档，并进入格式的新文档，并进入DreamweaverDreamweaver 8 8工作界面。工作界面。2.1.1 2.1.1 标题栏和菜单栏标题栏和菜单栏 标题栏上显示软件名称、文档标题和程序窗口标题栏上显示软件名称、文档标题和程序窗口控制按钮（控制按钮（“最小化窗口最小化窗口”按钮按钮 、“最大化最大化窗口窗口”按钮按钮 和和“关闭窗口关闭窗口”按钮按钮 ）。菜单栏中几乎集中了菜单栏中几乎集中了DreamweaverDreamweaver 的全部操的全部操作命令，利用这些命令可以编辑网页、管理站作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。点以及设置操作界面等。2.1.2 “2.1.2 “插入插入”栏栏 “插插入入”栏栏包包含含各各种种类类型型的的对对象象按按钮钮（如如图图像像、表表格格和和层层等等），通通过过单单击击这这些些按按钮钮，可可将相应的对象插入到文档中。将相应的对象插入到文档中。2.1.3 2.1.3 文档标签与文档标签与“文档文档”工具栏工具栏 文档标签显示了网页文档名称；文档标签显示了网页文档名称；“文档文档”工具工具栏用于切换网页视图，设置网页标题，检查浏栏用于切换网页视图，设置网页标题，检查浏览器支持等。览器支持等。2.1.4 2.1.4 状态栏状态栏 状态栏位于文档编辑窗口底部，它提供了与当状态栏位于文档编辑窗口底部，它提供了与当前文档相关的一些信息。前文档相关的一些信息。课堂练习课堂练习1 1 利用状态栏中标签选择单元格利用状态栏中标签选择单元格 在制作网页时，往往会使用一些像素值非常在制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，本节我小图片所在的单元格就有些困难了，本节我们就来看看如何利用们就来看看如何利用“标签选择器标签选择器”来选中来选中这些小单元格。这些小单元格。2.1.5 2.1.5 属性面板与面板组属性面板与面板组 在在DreamweaverDreamweaver中，大多数操作都是通过面板实中，大多数操作都是通过面板实现的。现的。“属性属性”面板位于文档窗口的下方，主要用于面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。查看或编辑所选对象的属性。除除“属性属性”面板外，面板外，DreamweaverDreamweaver 8 8还提供了众还提供了众多面板，如多面板，如“文件文件”面板、面板、“历史记录历史记录”面板面板等。等。如要打开或关闭某个面板，可单击如要打开或关闭某个面板，可单击“窗口窗口”菜菜单下的相应选项。单下的相应选项。课堂练习课堂练习2 2 面板基本操作面板基本操作 在了解了面板的种类和作用后，本节来在了解了面板的种类和作用后，本节来看看如何打开新的面板、隐藏面板，以看看如何打开新的面板、隐藏面板，以及完全关闭面板等。及完全关闭面板等。2.2 2.2 网站创建与管理网站创建与管理 2.2.1 2.2.1 确定站点目录结构确定站点目录结构 为便于以后管理和维护网站，在开始创建网页为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。它主要包之前，最好先确定站点的目录结构。它主要包括两项任务，一是在本地磁盘上创建用来保存括两项任务，一是在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等）的网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹；为便文件夹，该文件夹被称为站点根文件夹；为便于管理站点中的内容，还要根据网站栏目结构于管理站点中的内容，还要根据网站栏目结构图在站点文件夹中创建若干子文件夹，以存放图在站点文件夹中创建若干子文件夹，以存放不同类型的文件。不同类型的文件。课堂练习课堂练习3 3 在在DreamweaverDreamweaver中定义中定义“lily“lily”站点站点 为便于管理和编辑站点，在创建网页之前，首为便于管理和编辑站点，在创建网页之前，首先要在先要在DreamweaverDreamweaver中定义站点。定义站点可中定义站点。定义站点可以将本地磁盘中的站点同以将本地磁盘中的站点同DreamweaverDreamweaver建立一建立一定的关联，可以使用定的关联，可以使用DreamweaverDreamweaver上传或下载上传或下载站点内容。站点内容。2.2.2 2.2.2 网页文档基本操作网页文档基本操作 1 1新建文档新建文档 DreamweaverDreamweaver中的文档也就是网页，创建新网中的文档也就是网页，创建新网页的方法有多种，下面使用页的方法有多种，下面使用“文件文件”菜单创菜单创建网页。建网页。选择选择“文件文件”“新建新建”菜菜单，打开单，打开“新建新建文档文档”对话框。对话框。2 2保存文档保存文档 新建或编辑网页文档后，需要保存文档，新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。才能使所做的设置生效。选择选择“文件文件”“保存保存”菜菜单，弹出单，弹出“另存另存为为”对话框对话框 选择保选择保存位置存位置 输入文输入文件名件名 单击单击“保保存存”按钮按钮 3 3预览文档预览文档 对网页进行编辑或修改后，可在浏览器中对网页进行编辑或修改后，可在浏览器中预览其效果。预览其效果。打开文档后，单击文打开文档后，单击文档工具栏中的档工具栏中的 按钮，按钮，在弹出的菜单中选择在弹出的菜单中选择“预览在预览在IExploreIExplore 6.06.0”菜单项菜单项4 4打开和关闭文档打开和关闭文档 如果要打开某站点中现有的网页文档，可以选如果要打开某站点中现有的网页文档，可以选择择“文件文件”“打开打开”菜单，在弹出的菜单，在弹出的“打开打开”对话框中选择要打开的文件，然后单击对话框中选择要打开的文件，然后单击“打开打开”按钮。按钮。选择目标选择目标文件所在文件所在文件夹文件夹 关闭文件的操作相当简单，只需单击相应文件关闭文件的操作相当简单，只需单击相应文件右上方的右上方的“关闭关闭”按钮按钮 。单击选单击选择文件择文件 单击单击“打打开开”按钮按钮 课堂练习课堂练习4 4 利用利用“文件文件”面板创建网页面板创建网页使用使用“文件文件”面板，可以非常方便地管理站点面板，可以非常方便地管理站点和站点中的文件。本节看一下在和站点中的文件。本节看一下在“文件文件”面板面板中创建和命名文档的方法。中创建和命名文档的方法。2.2.3 2.2.3 网页文档与文件夹命名规则网页文档与文件夹命名规则 为便于日后的维护和管理，网站中所有文件和为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。首先，静文件夹的命名最好遵循一定的规则。首先，静态的首页文件一般命名为态的首页文件一般命名为“index.htmlindex.html”或或“index.htmindex.htm”。如果是包含程序代码的动态页。如果是包含程序代码的动态页面，比如面，比如ASPASP文件，则命名为文件，则命名为“index.aspindex.asp”。总之，后缀名与网页本身所使用的技术是对应总之，后缀名与网页本身所使用的技术是对应的。的。2.3 2.3 基本页面属性设置基本页面属性设置 2.3.1 2.3.1 指定网页文档标题和边距指定网页文档标题和边距 在浏览网页时，可以看到浏览器上端都会有表在浏览网页时，可以看到浏览器上端都会有表示网页特征或欢迎词之类的标题。另外，一般示网页特征或欢迎词之类的标题。另外，一般网页的上、下、左、右边距均为网页的上、下、左、右边距均为0 0，它们是如，它们是如何设置的呢？下面以何设置的呢？下面以“lilylily”网站中的网站中的“index.htmlindex.html”为例，来看看具体设置方法。为例，来看看具体设置方法。2.3.2 2.3.2 指定网页背景颜色和背景图像指定网页背景颜色和背景图像 指定网页背景颜色的方法非常简单，只需在指定网页背景颜色的方法非常简单，只需在“页面属性页面属性”对话框中单击对话框中单击“背景颜色背景颜色”后的颜后的颜色按钮，然后在弹出的调色板中单击选择相应色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。颜色就可以了。如果用户喜欢的话，也可以将图像设置为网页如果用户喜欢的话，也可以将图像设置为网页背景。背景。2.3.3 2.3.3 为网页设置文本和链接属性为网页设置文本和链接属性 通过设置通过设置“页面属性页面属性”对话框中的对话框中的“页面字页面字体体”、“大小大小”和和“文本颜色文本颜色”，可以设置，可以设置网页中文本的属性。网页中文本的属性。另外，要设置链接文本的属性，可以在另外，要设置链接文本的属性，可以在“页页面属性面属性”对话框左侧的分类列表中选择对话框左侧的分类列表中选择“链链接接”选项，然后在右侧设置各项参数。选项，然后在右侧设置各项参数。课堂练习课堂练习5 5 为为“movie”movie”网页设置页面属性网页设置页面属性 通过前面的学习，相信大家对基本页面通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。本属性的设置已经有了个大概的认识。本节通过编辑节通过编辑“movie”movie”网页，来使读者进网页，来使读者进一步掌握网页页面属性的设置方法。一步掌握网页页面属性的设置方法。设置页面设置页面属性前后属性前后效果对比效果对比