2022年Dreamweaver制作网页 .pdf

《2022年Dreamweaver制作网页 .pdf》由会员分享，可在线阅读，更多相关《2022年Dreamweaver制作网页 .pdf（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、学习情境六： Dreamweaver 制作网页参考手册【教学目标】能力目标：1、培养用 Dreamweaver制作网页的能力2、提高学生在制作网页过程中应用Dreamweaver的各种功能的能力3、培养学生在实践中掌握知识的能力4、培养学生利用所学知识设计与制作网页的能力5、提高学生的动手能力知识目标：1、掌握 Dreamweaver的各种菜单的用法2、掌握掌握在代码模式和设计模式下熟练制作网页的能力3、掌握利用 Dreamweaver制作网页的一般步骤职业素质目标：1、获取知识的能力2、知识应用能力3、自主学习能力4、动手能力【教学时间】 30课时【任务 1】制作“跟我学电脑”网页(2 课时

2、) 【效果图】名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 18 页 - - - - - - - - - 【学习目标】“跟我学电脑”网页是使用Dreamweaver 制作的第一个网页，该网页由标题、文字、图像等元素组成。通过制作该网页，可以了解Dreamweaver的基本操作，为后面的学习打下一个坚实的基础。【任务要求】教师布置任务、要求学生根据参考手册掌握学习目标的内容一、咨询（ 15 分钟）明确任务后， 教师帮助学生理解任务要求，分析任务， 并介绍网页设计整体情况的

3、同时提出资讯建议， 提供获取资讯的方法和途径信息。学生依据任务及提示，寻找完成任务所需的资源。例如：教材参考手册网上查询【相关知识点】1什么是Dreamweaver Dreamweaver 是原 Macromedia 公司推出的网页制作和网站管理的工具软件，集网页制作与网站管理于一身。Dreamweaver 是一套功能强大的可视化设计工具、应用开发环境和代码编辑软件。软件的集成程度非常高，开发环境精简而高效，开发人员能够运用Dreamweaver 与服务器技术构建功能强大的网络应用程序衔接到用户的数据、网络服务体系。Dreamweaver 提供了开放式和可扩展的工作环境。赋予使用者最大的自由度

4、和灵活性。Dreamweaver 将世界一流水平的“设计”和“代码”编辑器合二为一。它操作简便，可以使开发人员和设计师能够快速创建代码规范的应用程序，适合各个阶段、 各个水平的用户使用。初学者在使用Dreamweaver 时，可以无须编写一句代码就能够快速创建自己的网页。利用该软件，能够快速创建格式规范的网页文档。Dreamweaver 的整个创作环境十分人性化，它不仅界面美观、友好，而且允许用户个性化的工作环境。 用户可以创建完全属于自己的对象和命令，修改键盘快捷键，甚至可以编写JavaScript代码扩充软件功能。Dreamweaver 可以进行多个站点的管理，设置了HTML语言编辑器，支

5、持DHTML 和 CSS ，分类提供了页面对象，可净化 Microsoft Word生成的 HTML文件，可以导入 Microsoft Excel和 Microsoft Access建立的数据文件，导入和编辑Fireworks制作的 HTML 源代码和图像，以及导入Flash 动画、按钮和文字，编辑动态页面等，同时它可以用来编辑交互式的网页，即在因特网上，客户和服务器进行信息交流。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 18 页 - - - - - - - - -

6、 Dreamweaver 是开放式和可扩展的。赋予用户最大的自由度和灵活性来选择最适合用户的技术。Dreamweaver 还提供了纯粹的代码编辑环境，允许用户使用HTML 、 CSS 、 JavaScript、CFML 、ASP 、JSP、 PHP和 ASP.NET服务器技术，创建动态的、数据库驱动的网页和程序。另外，还可以帮助用户轻松创建XSLT页、附加XML文件，并在Web页中显示XML数据。目前， Dreamweaver 的最新版本是Dreamweaver 8 ，已经推出了中文Dreamweaver 8 。2进入 Dreamweaver 8 第一次运行Dreamweaver 8 时，会弹

7、出“工作区设置”对话框，如图1-2-4 所示。可以看出， Dreamweaver 8 提供了两种工作区布局（即工作界面）。 如下图：选中某一种工作区名称的单选项，再单击“确定”按钮，即可进入相应的工作区。例如，单击选中“设计器”单选项，再单击“确定”按钮，即可进入“ Macromedia Dreamweaver 8”对话框。通常在没有任何文档打开时，也会自动弹出“Macromedia Dreamweaver 8”对话框。如果选中“不再显示此对话框”复选框，则下次启动Dreamweaver 时就不会再出现此对话框。“Macromedia Dreamweaver 8”对话框中各栏的作用如下。1）“

8、打开最近项目”栏：此栏中列出了Dreamweaver 最近打开过的文档名称，单击其中的项目可以快速弹出已经编辑过的文档。单击“打开”按钮，可以弹出“打开”对话框，利用该对话框可以打开选定的文档。（2）“创建新项目”栏：此栏中列出了“新建文档”对话框中的大部分可以创建的项目，利用它可以快速创建一个新的文档或者一个站点。（3）“从范例创建”栏：单击其中的文件夹按钮，可弹出不同的“新建文档”对话框，利用该对话框可以新建一个相应的文档。在它的底部有一个Dreamweaver Exchange 按钮，单击此按钮后，将链接到Dreamweaver Exchange 网站。（4）“Dreamweaver 帮

9、助”栏：有“进入Dreamweaver 快速指南”等3 个链接文字。单击这 3 个链接文字，可以进入 网站中相应的站点，利用网站查找相关信息。单击“ Macromedia Dreamweaver 8”对话框中“创建新项目”栏内的“HTML ”链接文字，即可进入采用“设计器”风格的Dreamweaver 8 的工作区，如下图所示：由上图可以看出，Dreamweaver 8 的工作区主要由标题栏、菜单栏、文档窗口、状态栏、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 18

10、页 - - - - - - - - - “插入”栏（“对象”栏或“对象”面板）、“标准工具”栏、“文档工具”栏、“属性”栏（“属性”面板或属性检查器）和“隐藏面板”按钮等组成。单击“查看”“工具栏”“”菜单命令，可打开或关闭“插入”栏、“标准工具”栏、 “文档工具”栏或“样式呈现”栏。单击“窗口”“属性”菜单命令，可以打开或关闭“属性”栏。单击“窗口”“插入”菜单命令，可以打开或关闭“插入”栏。单击“查看”“隐藏面板”按钮， 可隐藏面板组和“属性”栏，单击“查看”“显示面板”按钮，可显示面板组和“属性”栏。3更换 Dreamweaver 8 工作区和默认文档类型（1） 单击“窗口”“工作区布局

11、”“编码器”菜单命令，即可进入采用“编码器”风格的 Dreamweaver 8 的工作区，如图1-2-6 所示。单击“窗口”“工作区布局”“设计器”菜单命令，可进入采用“设计器”风格的Dreamweaver 8 的工作区，如下图所示：（2）调整工作区布局后，单击“窗口”“工作区布局”“保存当前”菜单命令，可弹出“保存工作区布局”对话框，在“名称”文本框内输入名称，如下图所示：再单击“确定”按钮，即可将当前工作区布局保存。以后只要单击“窗口”“工作区布局”“”菜单命令（例如， 单击“shendalin ”菜单命令） ，即可进入相应风格的 Dreamweaver 8 的工作区。3）改变默认文档类型

12、：单击“编辑”“首选参数”菜单命令，弹出“首选参数”对话框（ Dreamweaver 8的许多设置需要使用该对话框，以后将不断涉及该对话框的使用）。单击该对话框左边“分类”栏中的“新建文档”选项。此时的“首选参数”对话框如图1-2-8所示。在“默认文档类型”下拉列表框内可以选择默认的文档类型。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 18 页 - - - - - - - - - 4Dreamweaver 8 工作区简介（1）文档窗口文档窗口用来显示和编辑当前的文档页

13、面。文档窗口的底部有状态栏，可以提供多种信息。在文档窗口最大化时，其标签顶部显示文档的名称。文档工具栏和标准工具栏在文档窗口内， 如果文档窗口处于还原状态，则文档工具栏和标准工具栏在文档窗口外，其标题栏内显示网页的标题和网页文档所在的文件夹名称和网页文档的名称。文档窗口有3 种视图，单击文档工具栏中的按钮，可进行视图的切换。也可以单击“查看”“代码”（或“设计”、“代码和设计”）菜单命令或按Ctrl+-键。“设计”视图： 它是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，显示的效果与在网络浏览器中浏览时非常相似，可以直接进行编辑。“代码”视图： 它是一个用于编写和

14、编辑HTML 、JavaScript、服务器语言代码 （如 ASP或 ColdFusion标记语言）以及任何其他类型代码的手工编码环境。“代码和设计”视图：它可以使用户在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。（2）状态栏 Dreamweaver 8的状态栏位于文档窗口的底部，如图1-2-9 所示。标签选择器：标签选择器在状态栏的最左边，它以HTML标记显示方式来表示光标当前位置处的网页对象信息。一般光标当前位置处有多种信息，则可显示出多个HTML标记。不同的 HTML标记表示不同的HTML 元素信息。例如，表示文档主体， 表示图像， 表示表格， 表示字体， 表示行， 表示插入

15、对象等。单击某一个HTML标记， Dreamweaver 8 会自动选取与该标记相对应的网页对象，用户可对该对象进行编辑。窗口大小信息栏：它用来显示与调整窗口大小。单击它会弹出一个快捷菜单，在还原状态下单击该快捷菜单上边一栏中的一个菜单命令，可马上按照选定的大小改变窗口的大小。文档大小 / 估计的下载时间：它给出了文档大小的字节数和网页的预计下载时间。（3）标尺显示标尺： 单击“查看”“标尺”“显示”菜单命令，可显示标尺， 如图 1-2-10所示。单击选中“查看”“标尺”菜单命令的下一级菜单中的“像素”、“英寸”名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - -

16、- - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 18 页 - - - - - - - - - 或“厘米”菜单命令，可以更改标尺的单位。用鼠标拖曳标尺左上角处的小正方形，此时鼠标指针呈十字线状。拖曳鼠标到文档窗口内合适的位置后松开鼠标左键，即可将原点位置改变。如果要将标尺的原点位置还原，可单击“查看”“标尺”“重设原点”菜单命令。（4）网格显示与不显示网格线：单击“查看”“网格”“显示网格”菜单命令，可以在显示网格（选中时，其菜单命令左边有对勾）和不显示网格（没选中时，其左边没有对勾）之间切换。网格线的显示效果如图1-2-10所示。靠齐功能： 如果没选中

17、“查看”“网格”“靠齐到网格”菜单命令，移动层或改变层的大小时， 最小的单位是一个像素，在移动层时不容易与网格对齐。如果选中“查看”“网格”“靠齐到网格”菜单命令，移动层或改变层的大小时，最小的单位是5 个像素，在移动层时可以自动与网格对齐。网格的参数设置：单击“查看”“网格”“网格设置”菜单命令，可以弹出“网格设置”对话框，如图1-2-11所示。利用该对话框，可对网格和靠齐等参数进行设置。（5）“属性”栏“属性”栏也叫属性检查器或“属性”面板。利用“属性”栏可以显示并精确调整网页中选定对象的属性。“属性”栏具有智能化的特点，选中网页中的不同对象，其“属性”栏的内容会随之发生变化。单击“属性”

18、栏右下角的按钮，可以展开“属性”栏；单击“属性”栏右下角的按钮，可以收缩“属性”栏。如果在没有选中任何对象时单击“属性”栏右边的按钮，可以在光标当前位置添加HTML语言；如果在选中一个对象时单击按钮，可以编辑相应标签的HTML 。（6）“插入”栏在 Dreamweaver 8 中， “插入”栏可以显示为制表符和菜单两种外观效果，如果要将“插入”栏切换到菜单状态，可右键单击“插入”栏右边的按钮， 弹出它的快捷菜单，再单击该菜单中的“显示为菜单”菜单命令。如果要将“插入”栏切换到制表符状态，可单击栏左边的黑色箭头， 弹出它的快捷菜单， 再单击该菜单中的“显示为制表符”菜单命令。“插入”栏包括了“常

19、用”、“布局”等8 个标签项或8 个与标签名称相同的菜单命令。当“插入”栏为制表符状态时，可以使用鼠标拖曳“插入”栏左边的图标，将“插入”栏变为浮动面板。一般人们习惯使用制表符状态的“插入”栏。在制表符状态下， 每一个标签内有多个用于插入对象的按钮。单击标签可以切换标签项，单击标签内的对象按钮或者将相应的按钮图标拖曳到文档窗口中，可将相应的对象插入到网名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 18 页 - - - - - - - - - 页中。对于有些对象， 会在单

20、击按钮或拖曳按钮后，弹出一个相应的设置对话框，进行完设置后，单击“确定”按钮才可以真正在文档窗口（即网页）中插入对象。如果在插入对象的同时按住Ctrl键，就可以避免出现一个选择对象对话框，而是直接插入一个相应类型的空对象，如果以后要给该空对象赋予相应内容，可以双击该对象。5面板的基本操作（1）面板的拆分与组合面板的拆分：将鼠标指针移到面板左上角图标处，当鼠标指针变为十字锚状时，将面板拖离原来的位置，即可使面板成为一个可以用鼠标拖曳的浮动面板，如下图所示：如果要将面板组合中的面板（例如， “CSS样式”面板） 拆分， 可单击面板中的标签（例如，“ CSS样式”标签） ，使它成为当前面板，再单击面

21、板右上角的图标，弹出面板菜单，如图 1-2-13所示。单击该菜单中的“将文件组合在”“新组合面板”菜单命令，即可将当前面板（例如，“ CSS 样式”面板）拆分出来，如下图所示：面板的组合：单击面板（例如，“CSS样式”面板）右上角的图标，弹出面板菜单，单击该菜单中的“将文件组合在”“层”菜单命令，即可将当前面板与“层”面板组合在一起。 单击面板菜单中的“重命名面板组”菜单命令，在弹出的“重命名面板组”对话框中将面板组的名称改为“设计”，即可恢复该面板组。（2）调整面板大小和打开与关闭面板调整面板大小：将鼠标指针移到面板的边缘，当鼠标指针变成双向箭头时，单击并名师资料总结 - - -精品资料欢迎

22、下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 18 页 - - - - - - - - - 拖曳面板的边框，达到所需的大小后松开鼠标左键即可打开面板：单击“窗口”“”（面板名称）菜单命令，即可打开指定的面板。例如，单击“窗口”“文件”菜单命令，即可打开“文件”面板。关闭面板：单击面板（组）标题栏右上角的按钮。另外，在面板标题栏单击鼠标右键，弹出其快捷菜单，再单击该快捷菜单中的“关闭”菜单命令，也可以关闭该面板。隐藏所有面板： 单击“查看”“隐藏面板”菜单命令或按F4 键，即可隐藏所有打开的面板。再进行相同

23、的操作，即可以将隐藏的面板（原来打开的面板）显示出来。6网页的新建、打开、关闭和保存（1）新建和打开网页文档新建网页文档： 单击“文件”“新建”菜单命令，即可弹出“新建文档”对话框，如下图所示：从该对话框可以看出，利用它可以建立各种类型的文件。从“类别”列表框中选择“基本页”选项，然后选择“基本页”列表框中的HTML选项。单击“创建”按钮，即可新建一个空白的HTML网页文档。打开网页文档： 单击“文件”“打开”菜单命令，弹出“打开”对话框。在该对话框内选中要打开的HTML文档，单击“打开”按钮，即可将选定的HTML文档打开。例如，可打开前面编写的名字为1-1.htm文档。（2）保存文档和关闭文

24、档单击“文档”“保存”菜单命令，可以原名字保存当前的文档。单击“文档”“另存为”菜单命令，可弹出“另存为”对话框。利用该对话框可以将当前的文档以其他名字保存。单击“文档”“保存全部”菜单命令，可将当前正在编辑的所有文档以原名保存。单击“文档”“关闭”菜单命令，可以关闭打开的当前文档。如果当前文档在修改后没有存盘，则会弹出一个提示框，提示用户是否保存文档。单击“文档”“全部关闭”菜单命令，即可关闭所有打开的文档。二、计划（ 5 分钟）在教帅协调下学生分组，明确分工、收集资料。学生按照工作任务的要求，在教师指导下制定学习计划，教师适时审定工作计划方案，关注计划中的预期成果及未来的自查项目，关注工作

25、进度及重要节点。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 18 页 - - - - - - - - - 三、实施（ 55 分钟）学生根据任务计划依据参考手册实施任务，教师对任务重点难点进行讲解和分析，学生做好知识点记录，重点掌握重要知识点，使学习计划能够按时完成。教师监督学生学习过程， 纠正学生学习偏差， 注重考察学生在任务实施过程中的能力，关注职业素养的培养，做好相应的记录。本任务应先由教师系统讲解， 学生分步跟学。对部分理解掌握知识相对熟练、快速的学生， 如果其

26、在学习过程中遇见问题，教师可辅助提示学生查找教材、参考手册的相关内容或通过网络获取相关内容，引导学生解决问题； 部分知识构建不熟练的学生则应详细讲解或者建议学生反复理解相关知识并完成任务。鼓励小组成员在工作过程中互帮互助，解决在完成任务中所遇到的问题。【操作步骤】参考教材： P.9-10 四、检查评估（ 5 分钟）1 、任务完成后，学生自我检查评价自己的工作，填写“自我评价表”，小组成员互相检查和评价并填写在“小组互评”表。2 、教师针对学生在完成任务过程中遇见的普遍问题做点评。3 、教师指引学生归纳总结， 引导学生独立写出自己的经验和完成任务的更好方法。4 、特别注意对“假如下次做同类似的任

27、务，您认为怎么做更好？”的引导和讨论。【任务拓展】教材 :P.17-20 完成拓展案例3、拓展案例4名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 18 页 - - - - - - - - - 【任务 2】制作“计算机简史”、“硬件知识”、“外设简介”网页(4 课时) 【效果图】【学习目标】文字是 网页 的基 础和 灵魂 ，任何 一个 网站 都离 不开 网页 中的文 字。在Dreamweaver中，可以对文字的格式、字体、字号、颜色以及对齐格式等属性进行设置。通过本案例的

28、学习，可以掌握这些属性设置的方法。在网页中同时插入图像和文字时，可以设置不同的对齐方式， 以达到不同的显示效果。图文混排是网页制作的基本操作，实用性非常强。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 18 页 - - - - - - - - - 在该网页中， 除了常见的文字和图像外， 还包含一个由多个图像按钮组成的导航条。当鼠标移到该导航条中的任意一个按钮上时，该按钮中的文字会变为“单击进入”文字图像。【任务要求】教师布置任务、要求学生根据参考手册掌握学习目标的内容

29、一、咨询（ 15 分钟）明确任务后， 教师帮助学生理解任务要求，分析任务， 并介绍网页设计整体情况的同时提出资讯建议， 提供获取资讯的方法和途径信息。学生依据任务及提示，寻找完成任务所需的资源。例如：教材参考手册网上查询【相关知识点】“计算机简史”网页1文字属性设置文字的属性可以在下图所示的文本“属性”栏的“插入”（文本）栏中进行设置。（1）文字标题格式的设置根据 HTML语言规定，页面的文本有6 种标题格式，它们所对应的字号大小和段落对齐方式都是设定好的。在“格式”下拉列表框中，可以选择各种格式。“无”选项：无特殊格式的规定，仅决定于浏览器本身。“段落”选项：正文段落，在文字的开始与结尾处有

30、换行，各行的文字间距较小。“标题 1”至“标题6”选项：标题1 至标题 6 约为中文 6 号至中文 1 号字大小。“预先格式化的”选项：设置预定义的格式。（2）创建字体组合 Dreamweaver 8使用了字体组合的方法，取代了简单地给文本指定一种字体的方法。字体组合就是多个不同字体依次排列的组合。在设计网页时，可给文本指定一种字体组合。在网页浏览器中浏览该网页时，系统会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的字体。采用这种方法可以照顾各种浏览器和安装不同操作系统的计算机用户。在“字体”下拉列表框中，可以选择Dreamweaver 提供的各种字体组合，如下图所示。 单击其中的某个

31、列表项，即可设置该字体组合。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 18 页 - - - - - - - - - 单击上图所示的字体组合列表项中的“编辑字体列表”列表项，弹出“编辑字体列表”对话框， 如下图所示。 单击“编辑字体列表”对话框中“字体列表”列表框内的“在以下列表中添加字体”列表项。在“可用字体”列表框中选择字体，然后双击该字体名称，即可在“选择的字体”列表框中显示出相应的字体名称；也可以单击某一个字体名字，再单击按钮， 将选中的字体添加到“选择的字

32、体”列表框内。按照上述方法， 依次往“选择的字体”列表框中加入字体组合中的各种字体。同时， 会看到在“字体列表”列表框内最下边随之显示出新的字体组合，如图 2-1-4 所示。单击“确定”按钮，即可完成字体组合的创建操作。如果要删除字体组合中的一种字体，单击“选择的字体”列表框内该字体的名称，再单击按钮。如果要删除一个字体组合，可在“字体列表”列表框中单击该字体组合，再单击“编辑字体列表”对话框中的按钮。如果还要增加字体组合，可以单击“编辑字体列表”对话框中的按钮，使“字体列表”列表框中增加“在以下列表中添加字体”选项。（3）文字属性的设置文字大小设置：字号的数字越大，文字也越大。在Dreamw

33、eaver 8中，默认的字号是13。 单击文字“属性”栏内的“大小”下拉列表框中的一种字号数字，即可完成字号的设定。在“大小”下拉列表框内，还可以通过选择“极小”到“极大”以及“较小”和“较大”列表项的方法来设置文字的大小。文字样式设置： 在“样式”下拉列表框中，单击“管理样式”项目，可以弹出“编辑样式表”对话框。单击该对话框中的“新建”按钮，就可以为文字添加样式设置。文字的对齐设置：文字的对齐是指一行或多行文字在水平方向的位置，它有左对齐、 居中对齐和右对齐3 种。可以通过在选中页面内的文字后，单击文字“属性”栏内的（左对齐） 、（居中对齐）和（右对齐）按钮来实现。如果文字是直接输入到页面中

34、的，则会以浏览器的边界线进行对齐。文字的缩进设置：要改变段落文字的缩进量，可以选中文字，再单击文字“属性”栏内的（减少缩进，向左移两个单位）按钮或（增加缩进，向右移两个单位）按钮。文字风格的设置： 选中网页中的文字，单击按下按钮，即可将选中的文字设置为粗体；单击按下按钮，即可将选中的文字设置为斜体。利用菜单命令改变文字风格：在“文本”“样式”菜单的子菜单中，单击其中的某一名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 18 页 - - - - - - - - - 个菜单

35、命令，可以将选中的文字样式做相应的改变。文字颜色的设置： 单击文字“属性”栏内的“大小”下拉列表框右边的按钮，可以弹出颜色面板， 利用它可以设置文字的颜色。也可以在其文本框中直接输入颜色代码，例如红色的颜色代码为“ #FF0000 ”。使用“插入”（文本）栏：单击“插入”栏的“文本”标签，如下图所示。面板中有许多文本格式控制按钮，通过这些按钮可以方便地插入各种文本。单击面板中的“字体标签编辑器”按钮，可以弹出“标签编辑器”对话框，如下图所示。利用该对话框可以设置文字的字体、大小和颜色等，还可以编辑文字字体列表。2设置和修改项目列表（1）设置项目列表设置无序列表和有序列表：选中要排列的文字段，再

36、单击文字“属性”栏内的按钮，可设置无序列表；选中要排列的文字段，再单击文字“属性”栏内的按钮， 可设置有序列表。定义列表方式： 选中要排列的文字段，再单击“文本”“列表”“定义列表”菜单命令。采用这种列表方式的效果是：奇数行靠左，偶数行向右缩进，如下图所示。（2）修改项目列表属性首先将列表的文字按照无序或有序列表方式进行列表，然后将光标移到列表文字中。单击“文本”“列表”“属性”菜单命令，弹出“列表属性”对话框，如图2-1-8 所示。“列表类型”下拉列表框用来选择列表类型，其类型有项目列表、编号列表、 目录列表和菜单列表4 种。项目列表的段首为图案标志符号，是无序列表；编号列表的段首是数字，是

37、有序列表。选择“编号列表”选项后，“列表属性”对话框中的隐藏选项会变为有效。在“样式”下拉列表框内，可以选择列表的风格，其中各选项的含义为：“ 默认 ”选项是默认方式， 段首标记为实心圆点；“项目符号”选项是段首标记为项目的符号；“正方形”选项的段首标记为实心方块。在“新建样式”下拉列表框内，也有上述 4 个选项， 用来设置光标所在段和以下各段的列表属性。在“列表类型”下拉列表框中选择“编号列表”列表项目后，“列表属性”对话框如下图所示。在“样式”列表框中，可以选择列表的风格。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师

38、精心整理 - - - - - - - 第 13 页，共 18 页 - - - - - - - - - 选择“ 默认 ”选项和“数字”选项，段首标记为阿拉伯数字；选择“小写罗马数字”选项，段首标记为小写罗马数字；选择“大写罗马数字”选项，段首标记为大写罗马数字；选择“小写字母”选项，段首标记为英文小写字母；选择“大写字母”选项，段首标记为英文大写字母。在“开始计数”文本框内可以输入起始的数字或字母，以后各段的编号将根据起始数字或字母自动排列。在“列表属性”对话框的“列表项目”栏内的“新建样式”下拉列表框中，也有上述6个选项，用来设置光标所在段和以下各段的列表为另一种新属性。在“重设计数”文本框内

39、，输入光标所在段和以下各段的列表的起始数字或字母。“硬件知识”网页（1）用鼠标拖曳图像在 Windows 的“我的电脑”或“资源管理器”中，单击一个图像文件，再用鼠标拖曳该图像到网页文档窗口内，即可将图像插入到页面内的指定位置。双击页面内的图像，可以弹出“选择图像源文件”对话框，供用户更换图像。（2）利用“插入”（常用）面板插入图像单击“插入” （常用）栏“图像”快捷菜单中的“图像”按钮， 或用鼠标拖曳“图像”按钮到网页内，可以弹出“选择图像源文件”对话框，如图2-2-2 所示。如果“图像”快捷菜单处显示的不是“图像”按钮，可以单击旁边的下三角按钮，在弹出的快捷菜单中选择“图像”按钮。在“选择

40、图像源文件”对话框中选中图像文件后，单击“确定”按钮，即可将选定的图像插入到页面的光标处。通常所选图像应放在站点文件夹下的图像文件夹内。在“选择图像源文件”对话框内，“URL ”文本框内会给出该图像的路径。在“相对于”下拉列表框内，如果选择“文档”选项，则“URL ”文本框内会给出该图像文件的相对于当前网页文档的路径和文件名。例如“ pic/2-1- 1.jpg ”； 如果选择“站点根目录”选项，则“URL ”文本框内会给出以站点目录为根目录的路径，例如“/pic/2-1- 1.jpg ”。2图像和文字的相对位置当网页内有文字和图像混排时，系统默认的状态是图像的下沿和它所在的文字行的下沿对齐。

41、如果图像较大， 则页面内的文字与图像的布局会很不协调，因此需要调整它们的布局。调整图像与文字混排的布局需要使用图像的“属性”栏。（1）图像与文字相对位置的调整图像“属性”栏内的“对齐”下拉列表框中有10 个列表项，用来进行图像与文字相对位置的调整。这些列表项的含义如下。“默认值”列表项：使用浏览器默认的对齐方式，不同的浏览器会稍有不同。“基线”列表项：图像的下沿与文字的基线水平对齐。“顶端”列表项：图像的顶端与当前行中最高对象（图像或文本）的顶端对齐。“中间”列表项：图像的中线与文字的基线水平对齐。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - -

42、 - - - - 名师精心整理 - - - - - - - 第 14 页，共 18 页 - - - - - - - - - “底部”列表项：图像的下沿与文字的基线水平对齐。“文本上方”列表项：图像的顶端与文本行中最高字符的顶端对齐。“绝对中间”列表项：图像的中线与文字的中线水平对齐。“绝对底部”列表项：图像的下沿与文字的下沿水平对齐。文字的下沿是指文字的最下边，而基线不到文字的最下边。“左对齐”列表项：图像在文字的左边缘，文字从右侧环绕图像。“右对齐”列表项：图像在文字的右边缘，文字从左侧环绕图像。文字的上沿、中线、基线、下沿、左边缘和右边缘之间的关系如下图所示。（2）图像与文字间距的调整图像

43、与文字的间距是指图像与文字水平方向和垂直方向的间距，可以通过改变“水平边距”和“垂直边距”文本框内的数值来实现，数值的单位是像素。3图像的移动、复制、删除和调整大小移动和复制图像：选中要编辑的图像，这时图像周围会出现几个黑色方形的小控制柄。如果要移动或复制图像，可以像移动文字那样，用鼠标拖曳图像到目标点，即可移动图像；按住 Ctrl键并用鼠标拖曳图像到目标点，即可复制图像。删除图像：先选中要删除的图像，再按Delete键即可，还可以将它剪切到剪贴板中。简单调整图像大小：选中要调整的图像，用鼠标拖曳其控制柄。按住Shift键，同时用鼠标拖曳图像周围的小控制柄，可以在保证图像长宽比不变的情况下调整

44、图像的大小。4利用图像“属性”栏编辑“硬件知识”网页中的图像在网页中插入图像后，如果要精确调整图像的大小和图像的位置，必须使用图像“属性”栏。在选中图像后，图像“属性”栏如下图所示。图像命名： 在图像“属性”栏的左上角会显示缩小的选中的图像，图像的右边会显示它的 字 节 数 。 可 以 在 图 像 右 边 的 文 本 框 内 输 入图 像 的 名 字 ， 以 后 可 以 使 用 脚本 语 言（JavaScript、VBScript等）对它进行引用。调整图像的位置：选中要调整位置的图像后，或将光标移到图像所在的行后，单击（居左）、（居中）或（居右）按钮，即可对该行的图像位置进行调整。精确调整图像

45、的大小：在“宽”文本框内输入图像的宽度，系统默认的单位是像素（pixels） ，如果要使用其他单位，则必须在输入数字后再输入单位名称，例如in （英寸，1in=96 pixels） 、 mm （毫米， 1mm=3.8 pixels)、pt （磅， 1pt=1.3pixels）和pc（派卡，1pc=16 pixels）等。用同样的方法可在“高”文本框内输入图像的高度。% 表示图像占文档窗口的宽度和长度百分比，设置后，图像的大小会随文档窗口的大小自动进行调整。若不管页面大小，只想占页面宽度的30% ，可在“宽”文本框中输入30% 。如果要还原图像大小的初始值，可单击和文字或删除“宽”和“高”文本框

46、中的数值；要想将宽度和长度全部还原，则可单击“重设大小”按钮。图像的路径： “源文件”右边的文本框内给出了图像文件的路径。文件路径可以是绝对路径（“file:/D|/跟我学电脑/pic/2-1-1.jpg ”图像文件不在站点文件夹内），也可以是相对路径 （“pic/2 -1- 1.jpg ”或“ /pic/2-1- 1.jpg ”图像文件在站点文件夹内）。单击“源名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 18 页 - - - - - - - - - 文件”右边的按

47、钮，即可弹出“选择图像源文件”对话框，利用它可以更换图像。链接： “链接”右边的文本框内给出了被链接文件的路径。超级链接所指向的对象可以是一个网页， 也可以是一个具体的文件。设置图像链接后，用户在浏览网页时只要单击该图像，即可打开相关的网页或文件。建立超级链接有3 种方法：直接输入链接地址URL ；拖曳指向文件图标到“站点”窗口要链接的文件上；单击该文本框右边的文件夹按钮，弹出“选择文件”对话框，利用该对话框选定文件。给图像加文字提示说明：选中要加文字提示说明的图像，再在图像“属性”栏内的“替代”下拉列表框中输入图像的文字提示说明。用浏览器打开图像页面后，将鼠标移到加文字提示说明的图像上，或发

48、生断链现象时，即可出现相应的文字提示说明，如下图所示。“外设简介”网页1插入导航条导航条实际上是一组动态图像按钮，单击一个导航按钮，可以在浏览器中弹出HTML文件和其他（如图像）文件。插入导航条的方法如下。（1）单击“插入”（常规）面板中的“图像”快捷菜单中的“导航条”按钮，即可弹出“插入导航条”对话框，如下图所示。（2）在“插入导航条”对话框中进行各选项的设置。各选项的作用如下“导航条元件”列表框：给出导航条中各个动态图像按钮的名称（默认是图像的名称）。单击按钮，可以增加动态图像按钮；选中动态图像按钮名称，再单击按钮，可以删除该按钮；单击动态图像按钮名称，再单击按钮或按钮，可以改变动态图像按

49、钮在导航条中的位置。“项目名称”文本框：其内可输入各动态图像按钮的名称。4 个文本框与“浏览”按钮：定义鼠标4 种状态时的图像。“状态图像”是按钮抬起状态，“鼠标经过图像”是鼠标移到按钮上时的图像，“按下图像”是鼠标按下时的图像，“按下时鼠标经过图像”是鼠标按下的过程中的图像。“按下时， 前往的 UR L”栏：在文本框内可输入与动态按钮链接的文件目录和名字，单击“浏览”按钮后， 可选择链接的文件。 在其右边的列表框内，可选择显示链接的页面的框架名字。“选项”栏：第一个复选框用来确定是否要预先载入各个图像，第2 个复选框用来确定是否要在页面载入的初始状态时显示鼠标按下状态的图像。“插入”列表框：

50、用来选择按钮放置的方式。选择“水平”选项，表示水平放置；选择“垂直”选项，表示垂直放置。“使用表格”复选框：选中它后，表示使用表格将动态按钮框起来。（3）完成上述设置后，单击“确定”按钮，即可在网页中插入导航条。2插入水平线在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的信息分布清晰。当然，用线条图像来分割，效果会更好些，但会使文件变大。插入水平线的方法如下。（1）单击“插入”（HTML ）面板中的“水平线”按钮，即可在光标所在的行插入一条水名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - -