电子课件第七章网页设计—Dreamweaver8.ppt

《电子课件第七章网页设计—Dreamweaver8.ppt》由会员分享，可在线阅读，更多相关《电子课件第七章网页设计—Dreamweaver8.ppt（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、LOGO计算机应用基础计算机应用基础第第2 2页页v第第1 1章章 计算机基础及常见故障排查计算机基础及常见故障排查v第第2 2章章 操作系统操作系统v第第3 3章章 文字处理软件文字处理软件Word2003Word2003v第第4 4章章 电子表格处理软件电子表格处理软件Excel2003Excel2003v第第5 5章章 演示文稿制作软件演示文稿制作软件PowerPoint2003PowerPoint2003v第第6 6章章 计算机网络基础及计算机网络基础及InternetInternet应用应用v第第7 7章章 网页设计网页设计DreamweaverDreamweaverv第第8 8章章

2、 数据库概述数据库概述v第第9 9章章 常用工具软件常用工具软件教学内容教学内容2022/12/212022/12/212计算机应用基础计算机应用基础第第3 3页页电子科技大学出版社电子科技大学出版社2011.12011.1课程课程教材教材 课程课程计划计划理论：理论：4040学时学时实验：实验：4040学时学时考核：平时考核：平时20%20%，实验，实验30%30%，期末考试期末考试50%50%2022/12/212022/12/213计算机应用基础计算机应用基础第第4 4页页第七章第七章 网页设计网页设计Dreamweaver8Dreamweaver8本本章章内内容容7.1了解网页制作与了

3、解网页制作与Dreamweaver 7.2 站点的创建与管理站点的创建与管理7.3 网页的基本操作网页的基本操作7.4 网站的发布与维护网站的发布与维护7.5 网页制作综合实训案例网页制作综合实训案例2022/12/212022/12/214计算机应用基础计算机应用基础第第5 5页页建立和维护站点的方法建立和维护站点的方法创建、修改网页的方法创建、修改网页的方法本章本章难点难点本章本章重点重点了解网页的相关概念和术语；了解网页的相关概念和术语；掌握网页的创建和设计方法；掌握网页的创建和设计方法；掌握建立和维护站点的方法；掌握建立和维护站点的方法；掌握修改网页属性的方法；掌握修改网页属性的方法；

4、第七章网页设计第七章网页设计Dreamweaver82022/12/212022/12/215计算机应用基础计算机应用基础第第6 6页页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.1网页、网站和网页的组成元素1.1.文本：文本：文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式，文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式，利用文本可以准确表达出网页想要传达的信息。利用文本可以准确表达出网页想要传达的信息。2.2.图形：图形：可以是各种图像，还可以是动画。可以是各种图像，还可以是动画。图形不仅能提供更多的

5、信息，还可以美图形不仅能提供更多的信息，还可以美化和装饰页面。化和装饰页面。3.3.超级链接：超级链接：超级链接是从一个网页指向另一个目的端的链接，这个目的端通常是超级链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。同网页的不同位置。4.4.表格：表格：表格不仅用来显示相关数据，而且用来控制网页中信息的布局方式。控制表格不仅用来显示相关数据，而且用来控制网页中信息的布局方式。控制图形、文字出现的位置，使之规范整齐、均衡协调。图

6、形、文字出现的位置，使之规范整齐、均衡协调。5.5.表单：表单：表单是动态网站交互的桥梁，通常网页的交互功能都是利用表单来实现的。表单是动态网站交互的桥梁，通常网页的交互功能都是利用表单来实现的。6.6.声音：声音：声音是多媒体网页的一个重要组成部分。目前比较流行使用声音是多媒体网页的一个重要组成部分。目前比较流行使用MP3音频文件音频文件制作网页背景音乐。制作网页背景音乐。7.7.动画与视频：动画与视频：在网页中添加动画或视频元素作为传播的媒介，增加了页面的动态在网页中添加动画或视频元素作为传播的媒介，增加了页面的动态效果和观赏性。效果和观赏性。2022/12/212022/12/216计算

7、机应用基础计算机应用基础第第7 7页页1 1、网页内容便于阅读、网页内容便于阅读网页内容要及时更新，那么访问者就不会再有兴趣访问你的网站网页内容要及时更新，那么访问者就不会再有兴趣访问你的网站 2 2、站点内容要及时更新、站点内容要及时更新要让浏览者容易找到要找的东西，也就是要有导航功能。要让浏览者容易找到要找的东西，也就是要有导航功能。3 3、注重色彩的搭配、注重色彩的搭配一个网站的标准色彩不超过一个网站的标准色彩不超过3 3种，太多则让人眼花缭乱。种，太多则让人眼花缭乱。4 4、考虑适应不同浏览器和分辨率、考虑适应不同浏览器和分辨率设计好主页能够适应不同浏览器及不同分辨率。设计好主页能够适

8、应不同浏览器及不同分辨率。5 5、提供交互性、提供交互性DreamweaverDreamweaver是有可视化编辑界面，用户不必编写复杂的是有可视化编辑界面，用户不必编写复杂的HTMLHTML源代源代码就可以生成跨平台、跨浏览器的网页码就可以生成跨平台、跨浏览器的网页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.2网页的设计理念2022/12/212022/12/217计算机应用基础计算机应用基础第第8 8页页2 2、Dreamweaver 8 Dreamweaver 8 启动与退出启动与退出v选择选择【开始开始】/【所有程序所有程序】

9、/【MacromediaMacromedia】/【Macromedia Macromedia Dreamweaver8Dreamweaver8】命令，如图命令，如图7-17-1所示。所示。v双击桌面上的双击桌面上的Dreamweaver 8Dreamweaver 8快捷方式快捷方式图标，如图图标，如图7-27-2所示。所示。7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.3 Dreamweaver 8简介1 1、Dreamweaver 8 Dreamweaver 8 运行环境运行环境Dreamweaver 8在在Windows 平台和平台

10、和Macintosh平台都可使用。平台都可使用。设计好主页能够适应不同浏览器及不同分辨率。设计好主页能够适应不同浏览器及不同分辨率。v单击快速启动栏中的单击快速启动栏中的Dreamweaver 8Dreamweaver 8快捷方式图标，如图快捷方式图标，如图7-37-3所示。所示。2022/12/212022/12/218计算机应用基础计算机应用基础第第9 9页页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 1 1、起始页、起始页打开最近项目打开最近项目”栏：在该栏中列出了最近栏：在该栏中列出了最

11、近编辑过的文件，单击即可打开相应文编辑过的文件，单击即可打开相应文件。单击件。单击”打开打开”链接可以弹出链接可以弹出“打打开开”对话框，用于选择要打开的文件。对话框，用于选择要打开的文件。“创建新项目创建新项目”栏：单击该栏中的一个超栏：单击该栏中的一个超级链接，即可创建相应类型的项目文级链接，即可创建相应类型的项目文件。件。“从范例创建从范例创建”栏：单击该栏中的一个超栏：单击该栏中的一个超级链接，即可以范例创建相应类型的级链接，即可以范例创建相应类型的项目文件。项目文件。“扩展扩展”栏：单击栏：单击Dreamweaver Exchange超级链接，即可启动超级链接，即可启动Dreamwe

12、aver Exchange Manager对对Dreamweaver的扩展插件进行管理。的扩展插件进行管理。2022/12/212022/12/219计算机应用基础计算机应用基础第第1010页页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 二、主窗口二、主窗口1 1、标题栏、标题栏 2 2、菜单栏、菜单栏3 3、插入面板组、插入面板组4 4、文档工具栏、文档工具栏5 5、标准工具栏、标准工具栏6 6、文档窗口、文档窗口7 7、状态栏、状态栏8 8、属性面板、属性面板9 9、标签选择器、标签选择器2

13、022/12/212022/12/2110计算机应用基础计算机应用基础第第1111页页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 2 2、菜单栏、菜单栏有有1010个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中各个菜单作用如下：其中各个菜单作用如下：文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。编辑：用来编辑文本。例如

14、剪切，复制，粘贴，查找，替换和参数设置等。编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格等。修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格等。文本：用来对文本操作，例如设置文本格式等。文本：用来对文本操作，例如设置文本

15、格式等。命令：所有的附加命令项。命令：所有的附加命令项。站点：用来创建和管理站点。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。窗口：用来显示和隐藏控制面板以及切换文档窗口。帮助：联机帮助功能。例如按下帮助：联机帮助功能。例如按下F1F1键，打开帮助文本。键，打开帮助文本。2022/12/212022/12/2111计算机应用基础计算机应用基础第第1212页页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 3 3、插入面板组、插入面板组 集成了可以在网页中应用的对象。插入面

16、板组其实就是图像化了的插入指集成了可以在网页中应用的对象。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易地加入图像、声音、多媒体动画、表令，通过一个个的按钮，可以很容易地加入图像、声音、多媒体动画、表格、绘制层、框架、表单、格、绘制层、框架、表单、FlashFlash和和ActiveXActiveX等网页元素，单击按钮，在弹等网页元素，单击按钮，在弹出的下拉菜单中可以选择要插入的网页元素的类型如图出的下拉菜单中可以选择要插入的网页元素的类型如图7-97-9所示。所示。2022/12/212022/12/2112计算机应用基础计算机应用基础第第1313页页7.1 7.1 了解

17、网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 4 4、文档工具栏、文档工具栏 “文档文档”工具栏包含各种按钮，它们提供各种工具栏包含各种按钮，它们提供各种“文档文档”窗口视图（如窗口视图（如“设设计计”视图和视图和“代码代码”视图）的选项、各种查看选项和一些常用操作（如在视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。如图浏览器中预览）。如图7-107-10所示。所示。5 5、标准工具栏、标准工具栏“标准标准”工具栏包含来自工具栏包含来自“文件文件”和和“编辑编辑”菜单中的一般操作的按钮：菜单中的一般操

18、作的按钮：“新建新建”、“打开打开”、“保存保存”、“保存全部保存全部”、“剪切剪切”、“复制复制”、“粘贴粘贴”、“撤销撤销”和和“重做重做”。如图。如图7-117-11所示。所示。图图7-112022/12/212022/12/2113计算机应用基础计算机应用基础第第1414页页7.1 7.1 了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 6 6、文档窗口、文档窗口 “文档文档”窗口显示当前文档。窗口显示当前文档。在文档区域中进行输入文在文档区域中进行输入文字、插入表格和编辑图片字、插入表格和编辑图片等操作，

19、它主要由项目选等操作，它主要由项目选择标签、文档工具栏、水择标签、文档工具栏、水平标尺、垂直标尺、编辑平标尺、垂直标尺、编辑区域、状态栏、垂直扩展区域、状态栏、垂直扩展按钮和水平扩展按钮构成，按钮和水平扩展按钮构成，如图如图7-127-12所示。所示。2022/12/212022/12/2114计算机应用基础计算机应用基础第第1515页页7.17.1了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 6 6、文档窗口、文档窗口编辑区域是用于编辑网页和编写网页代码的区域，该区域有编辑区域是用于编辑网页和编写网页代码的区域

20、，该区域有3 3种视图模式。种视图模式。设计视图设计视图：在该模式中可以直接对网页进行编辑。：在该模式中可以直接对网页进行编辑。代码视图代码视图：在该模式中可以编写或修改网页代码，如图：在该模式中可以编写或修改网页代码，如图7-137-13（a a）所示。）所示。拆分视图拆分视图：在该模式下整个编辑区域被分为上下两个部分，上边为代码视图，：在该模式下整个编辑区域被分为上下两个部分，上边为代码视图，下边为设计视图，如图下边为设计视图，如图7-13(b)7-13(b)所示。这样可以在代码视图和设计视图之所示。这样可以在代码视图和设计视图之间进行切换，并可对照编辑。间进行切换，并可对照编辑。2022

21、/12/212022/12/2115计算机应用基础计算机应用基础第第1616页页7.17.1了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1.4 Dreamweaver 8工作界面 9 9、标签选择、标签选择位于位于“文档文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其文档中标签的全部构。单击该层次结构中的任何标签可以选择该标签及其文档中标签的全部内容，如图内容，如图7-167-16所示。所示。在窗口菜单中，选择不同的命令在窗口菜单中，选择

22、不同的命令可以打开基本面板组、设计面板组、可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资代码面板组、应用程序面板组、资源面板组和其他面板组。源面板组和其他面板组。图图7-17在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组。程序面板组、资源面板组和其他面板组。2022/12/212022/12/2116计算机应用基础计算机应用基础第第1717页页7.17.1了解网页设计与了解网页设计与Dreamweaver 8Dreamweaver 87.1

23、.5 Dreamweaver 8 帮助1 1、打开帮助、打开帮助搜索帮助搜索帮助（1）可以对）可以对 Dreamweaver 8 帮助执行全文搜索，单击帮助执行全文搜索，单击“搜索搜索”选项卡。选项卡。（2）在文本框中键入一个单词或短语，然后单击）在文本框中键入一个单词或短语，然后单击“列出主题列出主题”。（3）双击结果列表中的一个主题，可显示该主题。）双击结果列表中的一个主题，可显示该主题。若要搜索产品中的帮助若要搜索产品中的帮助(Macintosh)，请执行以下操作：，请执行以下操作：（1）在）在 Dreamweaver 8 帮助中，在帮助中，在“提出问题提出问题”文本框中键入一个单词或短

24、语，然后按文本框中键入一个单词或短语，然后按 Enter。（2）双击结果列表中的一个主题，可显示该主题。）双击结果列表中的一个主题，可显示该主题。2、使用索引、使用索引使用索引可以快速找到信息。使用索引可以快速找到信息。若要使用索引若要使用索引(Windows)，请执行以下操作：，请执行以下操作：（1）在）在 Dreamweaver 8 帮助中，单击帮助中，单击“索引索引”选项卡。选项卡。（2）滚动到字母列表中的一个索引项，然后双击该项可显示索引信息。）滚动到字母列表中的一个索引项，然后双击该项可显示索引信息。提示：可以在文本框中键入一个关键字，以快速滚动到某一索引项。提示：可以在文本框中键入

25、一个关键字，以快速滚动到某一索引项。若要使用索引若要使用索引(Macintosh)，请执行以下操作：，请执行以下操作：（1）在）在 Dreamweaver 8 帮助中，在目录中单击帮助中，在目录中单击“索引索引”链接。链接。（2）单击某个字母以滚动到列表中的某一索引项。）单击某个字母以滚动到列表中的某一索引项。（3）单击该项旁边的数字，可显示索引信息。）单击该项旁边的数字，可显示索引信息。2022/12/212022/12/2117计算机应用基础计算机应用基础第第1818页页1 1、认识站点、认识站点（1 1）本地站点本地站点:本地站点是用户工作的目录，是存放用户网页、素材等的本地文件本地站点

26、是用户工作的目录，是存放用户网页、素材等的本地文件夹。夹。（2 2）远程站点远程站点:若需要不连接若需要不连接InternetInternet就能对所建的站点进行测试，可以在本地电就能对所建的站点进行测试，可以在本地电脑上创建远程站点模拟真实的脑上创建远程站点模拟真实的WebWeb服务器环境进行测试。服务器环境进行测试。（3 3）测试站点：测试站点：是是Dreamweaver 8Dreamweaver 8处理动态页面的文件夹。使用此文件夹生成动态处理动态页面的文件夹。使用此文件夹生成动态内容并在工作时连接到数据库。内容并在工作时连接到数据库。2 2、规划站点结构、规划站点结构 站点是管理网页与

27、素材的场所。规划站点结构是指利用不同的文件夹将不同的站点是管理网页与素材的场所。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率。网页内容分门别类地保存，合理地组织站点结构，可提高工作效率。应该事先在本地磁盘上创建一个文件夹作为站点的根目录，然后在文件夹下建应该事先在本地磁盘上创建一个文件夹作为站点的根目录，然后在文件夹下建若干个子文件夹，形成合理的目录结构，将不同类型的文件分门别类地存放在若干个子文件夹，形成合理的目录结构，将不同类型的文件分门别类地存放在不同的目录中，在网站设计中所有创建和编辑的网页都应当保存在该文件夹中。不同的目录中，在网

28、站设计中所有创建和编辑的网页都应当保存在该文件夹中。在发布站点时，只需将此文件夹中的所有内容上传到在发布站点时，只需将此文件夹中的所有内容上传到WebWeb服务器上即可。服务器上即可。提示：在制作网页时应将所有的文件夹和文件都统一用小写的英文字母命名，否则可能会出现找不到文件的错误。7.2 7.2 站点的创建与管理站点的创建与管理7.2.1站点设计 2022/12/212022/12/2118计算机应用基础计算机应用基础第第1919页页3 3、制作导航流程、制作导航流程 可以根据规划制作一个导航流程图，以便理清思路，制作时可直接在纸上粗略地绘出可以根据规划制作一个导航流程图，以便理清思路，制作

29、时可直接在纸上粗略地绘出导航流程图。如图导航流程图。如图7-187-18所示是一个班级网站最初的导航草图。所示是一个班级网站最初的导航草图。7.2 7.2 站点的创建与管理站点的创建与管理7.2.1站点设计 修修养养课课程程文艺“班级班级”网站首页网站首页最新动态最新动态学习交流学习交流寝室写真寝室写真体体育育班级活动班级活动班级论坛班级论坛班级荣誉班级荣誉个个人人集集体体图图7-184 4、绘制页面草图、绘制页面草图确定整个站点的页面风格设计站点的样式和版面草图。它可以用确定整个站点的页面风格设计站点的样式和版面草图。它可以用PhotoshopPhotoshop、CorelDRAWCorel

30、DRAW和和FireworksFireworks等图形软件制作。等图形软件制作。2022/12/212022/12/2119计算机应用基础计算机应用基础第第2020页页 1 1、进入、进入Dreamweaver 8Dreamweaver 8工作界面后，选择工作界面后，选择【站站点点】/【新建站点新建站点】命令或命令或【站点站点】/【管理站管理站点点】命令，弹出命令，弹出“管理站点管理站点”对话框。单击按对话框。单击按钮，在弹出的下拉菜单中选择钮，在弹出的下拉菜单中选择【站点站点】命令，命令，如图如图7-197-19所示。所示。7.2 7.2 站点的创建与管理站点的创建与管理7.2.2 创建站点

31、图图7-192、弹出站点定义对话框，在、弹出站点定义对话框，在“您您打算为您的站点起什么名字？打算为您的站点起什么名字？”文本框中输入站点名称，如文本框中输入站点名称，如“班班级网站级网站”，如图，如图7-20所示。所示。3、单击、单击“下一步下一步”按钮，在弹按钮，在弹出的对话框中选中单选按钮，如出的对话框中选中单选按钮，如图图7-21所示。所示。2022/12/212022/12/2120计算机应用基础计算机应用基础第第2121页页 4、单击单击“下一步下一步”按钮，在弹出的按钮，在弹出的对话框中选择在开发过程中如何使对话框中选择在开发过程中如何使用文件，这里选中单选按钮，在用文件，这里选

32、中单选按钮，在“您将把文件存储在计算机上的什么您将把文件存储在计算机上的什么位置位置?”文本框中输入本地站点存储文本框中输入本地站点存储的位置，如的位置，如“f:dw”，如图，如图7-22所示。所示。5、单击、单击“下一步下一步”按钮，在弹出的按钮，在弹出的对话框中的对话框中的“您如何连接到远程服您如何连接到远程服务器？务器？”下拉列表框中选择下拉列表框中选择“无无”选项，如图选项，如图7-23所示。所示。7.2 7.2 站点的创建与管理站点的创建与管理7.2.2 创建站点6、单击、单击“下一步下一步”按钮，弹出如图按钮，弹出如图7-24所示的对话框，单击按钮完成本地所示的对话框，单击按钮完成

33、本地站点的定义。站点的定义。7、弹出弹出“管理站点管理站点”对话框，在其左对话框，在其左侧列表框中将显示名为侧列表框中将显示名为“班级网站班级网站”的站点，如图的站点，如图7-25所示。单击按钮完所示。单击按钮完成本地站点的创建。成本地站点的创建。2022/12/212022/12/2121计算机应用基础计算机应用基础第第2222页页1 1、编辑站点、编辑站点（1 1）选择）选择【站点站点】/【管理站点管理站点】命令，弹出命令，弹出“管管理站点理站点”对话框，选择需要编辑的站点，这里选对话框，选择需要编辑的站点，这里选择择“班级网站班级网站”站点，如图站点，如图7-267-26所示。所示。（2

34、 2）单击按钮，弹出）单击按钮，弹出“班级网站班级网站 的站点定义为的站点定义为”对话框，如图对话框，如图7-277-27所示。所示。（3 3）在该对话框中即可对站点进行编辑，其操作过）在该对话框中即可对站点进行编辑，其操作过程和站点的创建方法类似，只需按提示进行操作程和站点的创建方法类似，只需按提示进行操作即可。即可。7.2 7.2 站点的创建与管理站点的创建与管理7.2.3 管理站点 选择选择“班级网站班级网站”的站点定义对话框的站点定义对话框中的中的“高级高级”选项卡可对站点进行一些选项卡可对站点进行一些高级设置，如设计备注、站点地图布局高级设置，如设计备注、站点地图布局等，如图等，如图

35、7-287-28所示。所示。图图7-282022/12/212022/12/2122计算机应用基础计算机应用基础第第2323页页2 2、删除站点、删除站点（1 1）选择）选择【站点站点】/【管理站点管理站点】命令，弹出如图命令，弹出如图7-29(a)7-29(a)所示的所示的“管理站点管理站点”对话框，对话框，在左侧列表框中选择要删除的站点后单击按钮。在左侧列表框中选择要删除的站点后单击按钮。（2 2）弹出一个警告对话框，提示执行本操作后将不能撤销，如图）弹出一个警告对话框，提示执行本操作后将不能撤销，如图7-29(b)7-29(b)所示。单击按钮所示。单击按钮返回返回“管理站点管理站点”对话

36、框，可以看见站点已被删除，如图对话框，可以看见站点已被删除，如图7-29(c)7-29(c)所示。所示。（3 3）单击按钮即可删除所选的站点。）单击按钮即可删除所选的站点。7.2 7.2 站点的创建与管理站点的创建与管理7.2.3 管理站点提示：从提示：从“管理站点管理站点”对话框中删除站点只是删除对话框中删除站点只是删除Dreamweaver 8Dreamweaver 8同本地站点的连接关同本地站点的连接关系，并没有从硬盘上删除，可以单击系，并没有从硬盘上删除，可以单击“管理站点管理站点”窗口中的窗口中的 按钮进行恢复按钮进行恢复。2022/12/212022/12/2123计算机应用基础计

37、算机应用基础第第2424页页（2 2）删除文件或文件夹文件夹）删除文件或文件夹文件夹 如果某个站点下不需要一些文件或文件夹，可以将其删除。删除文件或文如果某个站点下不需要一些文件或文件夹，可以将其删除。删除文件或文件夹的方法是：选择需删除的文件或文件夹并单击鼠标右键，在弹出的快件夹的方法是：选择需删除的文件或文件夹并单击鼠标右键，在弹出的快捷菜单中选择捷菜单中选择【编辑编辑】/【删除删除】命令，或直接按命令，或直接按DelDel键，在弹出的确认对键，在弹出的确认对话框中单击按钮即可，如图话框中单击按钮即可，如图7-317-31所示。所示。7.2 7.2 站点的创建与管理站点的创建与管理7.2.

38、3 管理站点图图7-31(a)图图7-31(b)2022/12/212022/12/2124计算机应用基础计算机应用基础第第2525页页（3 3）重命名文件或文件夹）重命名文件或文件夹 为了使文件名或文件夹名更加直观，常常需要为文件或文件夹重命名，为了使文件名或文件夹名更加直观，常常需要为文件或文件夹重命名，其方法是：选择需重命名的文件或文件夹并单击鼠标右键，在弹出的快捷其方法是：选择需重命名的文件或文件夹并单击鼠标右键，在弹出的快捷菜单中选择菜单中选择【编辑编辑】/【重命名重命名】命令如图命令如图7-327-32所示，使文件或文件夹名所示，使文件或文件夹名进入可改写状态，然后输入新的名称，按

39、进入可改写状态，然后输入新的名称，按EnterEnter键确认名称即可。键确认名称即可。7.2 7.2 站点的创建与管理站点的创建与管理7.2.3 管理站点提示：也可使用快捷方式，直接单击需要修改的文件或文件名，使之进入可改写状态提示：也可使用快捷方式，直接单击需要修改的文件或文件名，使之进入可改写状态输入新的名称即可。输入新的名称即可。图图7-322022/12/212022/12/2125计算机应用基础计算机应用基础第第2626页页（4 4）编辑文件）编辑文件如果需要对站点中的文件进行编辑，除了可以使用第如果需要对站点中的文件进行编辑，除了可以使用第2 2章介绍的打开文件的方法外，还可以直

40、接在章介绍的打开文件的方法外，还可以直接在“文件文件”面板中双击需要编辑的文件，打开该文件并进入编辑窗口进行编辑。面板中双击需要编辑的文件，打开该文件并进入编辑窗口进行编辑。例：在例：在D D盘上建立自己姓名为名的文件夹，把这个文件夹定义为站点，站点名的盘上建立自己姓名为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站我的个人网站”操作步骤：操作步骤：a a、在、在D D盘上建立文件夹盘上建立文件夹b b、在、在Dreamweaver 8Dreamweaver 8中，选择菜单中，选择菜单“站点站点-新建站点新建站点”，可以按向导一步一步操作，也可以直接选，可以按向导一步一步操作，也可

41、以直接选“高级高级”选项卡设置选项卡设置c c、在、在“本地信息本地信息”中，填入中，填入“站点名称站点名称”，把，把“本地根文件夹本地根文件夹”指定为该目录指定为该目录7.2 7.2 站点的创建与管理站点的创建与管理7.2.3 管理站点5 5、使用站点管理器、使用站点管理器单击菜单单击菜单“窗口窗口文件文件”。可以在站点管理器中通过右击。可以在站点管理器中通过右击“新建文件夹新建文件夹”、“新建文件新建文件”、“文件重命名文件重命名”、“删除文件删除文件”，也可以通过拖动，把文件移动到其它文件夹。，也可以通过拖动，把文件移动到其它文件夹。4 4、如何把一个已有目录定义为一个站点、如何把一个已

42、有目录定义为一个站点 例：首先单击例：首先单击下载下载网站，把网站包下载到网站，把网站包下载到D D盘，并解压缩，在盘，并解压缩，在D D盘上会自动生成一个盘上会自动生成一个文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为”公司网站公司网站”2022/12/212022/12/2126计算机应用基础计算机应用基础第第2727页页1 1、启动、启动Dreamweaver 8Dreamweaver 8的时创建网页，选择的时创建网页，选择“创建项目创建项目”中的中的HTMLHTML，就可以创，就可以创建一个新的网页，如图建一个新的网

43、页，如图7-337-33所示所示7.3 7.3 网页的基本操作网页的基本操作7.3.1 创建网页2 2、在、在【文件文件】菜单中选择菜单中选择“新建新建”命令。在弹出的命令。在弹出的“新建文档新建文档”对话框中对话框中“常规常规”选选项中，选择项中，选择“基本页基本页”，在，在“基本页基本页”区域下选择区域下选择 “HTMLHTML选项选项”，然后单击，然后单击“确定确定”，即可创建一个新的网页。，即可创建一个新的网页。2022/12/212022/12/2127计算机应用基础计算机应用基础第第2828页页3 3、单击文档窗口中标准工具栏的、单击文档窗口中标准工具栏的“新建新建”按钮，创建空白

44、网页按钮，创建空白网页7.3 7.3 网页的基本操作网页的基本操作7.3.1 创建网页4 4、在站点窗口直接创建网页。在、在站点窗口直接创建网页。在“文件文件”面板中打开本地站点，然后单击右键，在弹面板中打开本地站点，然后单击右键，在弹出的快捷菜单中，选择出的快捷菜单中，选择“新建文件新建文件”命令，即可以创建一个新的网页。命令，即可以创建一个新的网页。2022/12/212022/12/2128计算机应用基础计算机应用基础第第2929页页1 1设置网页外观设置网页外观选择选择【修改修改】/【页面属性页面属性】命令命令,弹出弹出“页面属性页面属性”对话框对话框 v“页面字体页面字体”下拉列表框

45、：用于设置网页中文字所使用的字体，单下拉列表框：用于设置网页中文字所使用的字体，单击右侧的和按钮可设置文本为加粗和斜体格式。击右侧的和按钮可设置文本为加粗和斜体格式。v“大小大小”文本框：用于设置网页中文字的大小。文本框：用于设置网页中文字的大小。v“文本颜色文本颜色”文本框：用于设置网页中文字的颜色，可以单击按钮，文本框：用于设置网页中文字的颜色，可以单击按钮，在弹出的颜色列表中选择需要的颜色或直接在后面的文本框中输入在弹出的颜色列表中选择需要的颜色或直接在后面的文本框中输入颜色的值。颜色的值。v“背景颜色背景颜色”文本框：用于设置网页中的背景颜色，可以单击按钮，文本框：用于设置网页中的背景

46、颜色，可以单击按钮，在弹出的颜色列表中选择需要的颜色或直接在后面的文本框中输入在弹出的颜色列表中选择需要的颜色或直接在后面的文本框中输入颜色的值。颜色的值。v“背景图像背景图像”文本框：用于设置网页中的背景图像，在该文本框中文本框：用于设置网页中的背景图像，在该文本框中输入背景图片的路径，也可单击按钮指定背景图片的路径。输入背景图片的路径，也可单击按钮指定背景图片的路径。v“重复重复”下拉列表框：用于设置背景图像的重复方式。下拉列表框：用于设置背景图像的重复方式。7.3 7.3 网页的基本操作网页的基本操作7.3.2 设置网页属性v“左边距左边距”文本框：在该文本框中设置网页内容与浏览器左边界

47、的距离。文本框：在该文本框中设置网页内容与浏览器左边界的距离。v“右边距右边距”文本框：在该文本框中设置网页内容与浏览器右边界的距离。文本框：在该文本框中设置网页内容与浏览器右边界的距离。v“上边距上边距”文本框：在该文本框中设置网页内容与浏览器上边界的距离。文本框：在该文本框中设置网页内容与浏览器上边界的距离。v“下边距下边距”文本框：在该文本框中设置网页内容与浏览器下边界的距离。文本框：在该文本框中设置网页内容与浏览器下边界的距离。2022/12/212022/12/2129计算机应用基础计算机应用基础第第3030页页2 2设置超级链接样式设置超级链接样式 在在“分类分类”列表框中选择列表

48、框中选择“链接链接”选项，右侧将显示链选项，右侧将显示链接的相应参数设置选项，如图接的相应参数设置选项，如图7-377-37所示，其中各参数的含所示，其中各参数的含义如下：义如下：7.3 7.3 网页的基本操作网页的基本操作7.3.2 设置网页属性v“链接字体链接字体”下拉列表框：用于设置网页中超级链接的字体，单击右侧的和按钮下拉列表框：用于设置网页中超级链接的字体，单击右侧的和按钮可设置超级链接的字体为加粗和斜体格式。可设置超级链接的字体为加粗和斜体格式。v“大小大小”下拉列表框：在该文本框中设置超级链接字体的大小。下拉列表框：在该文本框中设置超级链接字体的大小。v“链接颜色链接颜色”文本框

49、：设置超级链接的基本颜色。文本框：设置超级链接的基本颜色。v“变换图像链接变换图像链接”文本框：设置鼠标指针移动到超级链接上时，超级链接的颜色。文本框：设置鼠标指针移动到超级链接上时，超级链接的颜色。v“已访问链接已访问链接”文本框：设置访问后的超级链接颜色。文本框：设置访问后的超级链接颜色。v“活动链接活动链接”文本框：设置正在访问的超级链接颜色。文本框：设置正在访问的超级链接颜色。v“下划线样式下划线样式”下拉列表框：设置超级链接的下划线类型。下拉列表框：设置超级链接的下划线类型。2022/12/212022/12/2130计算机应用基础计算机应用基础第第3131页页3 3设置标题样式设置

50、标题样式在在“分类分类”列表框中选择列表框中选择“标题标题”选项，右侧将显示选项，右侧将显示“标标题题”的参数设置选项，其中各参数的含义如下：的参数设置选项，其中各参数的含义如下：v“标题字体标题字体”下拉列表框：在该下拉列表框中设置页面下拉列表框：在该下拉列表框中设置页面标题的字体。标题的字体。v“标题标题1 1”“标题标题6 6”下拉列表框：在文本框中设置下拉列表框：在文本框中设置1 1级标题至级标题至6 6级标题的字体、大小和颜色。级标题的字体、大小和颜色。7.3 7.3 网页的基本操作网页的基本操作7.3.2 设置网页属性4 4设置网页标题和网页编码设置网页标题和网页编码v在在“分类分