全套课件-计算机实用技术.ppt_163文库

资源描述

1、计算机实用技术计算机实用技术第1章基础知识制作：秦洪英制作：秦洪英目录 1.1 Internet与WWW 1.2 网站与网页 1.3 网页设计常用软件1.1 Internet与WWW1.1.1 什么是Internet Internet是全球最大的、开放的、由众多网络互连而成的计算机互联网，中文译名为“国际互联网”或“因特网”。简单地说，Internet就是将世界各地的计算机网络、主机和个人计算机通过通信设施和通信协议（基于TCP/IP协议簇）互相连接起来所构成的互联网络系统。Internet目前的用户已经遍及全球，有几亿人在使用Internet，并且它的用户数还在以等比级数上升。1.1 In

2、ternet与WWW1.1.2 WWW的基本概念 WWW是World Wide Web的缩写，简写成Web，中文叫做万维网。现在Internet发展得最为蓬勃的部分就是WWW，浏览Web已成为当今最主要的Internet服务。WWW只是Internet的一部分，Internet还包括FTP、BBS等其他服务。WWW的结构非常简单，主要分为两个部分：一部分为服务器端（Server），也称为网页的提供者；另一部分为客户端（Client），也称为网页的接收者。这种模式称为客户机/服务器（Client/Server）模式。1.2 网站与网页1.2.1 网站的种类网页是网站的基本信息单位，是WWW的基

3、本文档，它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的，通过链接实现与其他网页或网站的关联和跳转。网页文件是一种在WWW上传输的能被浏览器识别显示的文本文件，扩展名是.htm或.html。网站是由众多不同内容的网页组成的一个集合，通常把进入网站首先看到的那一页网页称为首页或主页（Homepage），由网页的内容体现网站的全部功能。1.2 网站与网页1.2.1 网站的种类1、根据网站提供的服务分类资讯类网站交易类网站互动游戏类网站有偿资讯类网站功能型网站综合类网站1.2 网站与网页1.2.1 网站的种类2根据网站的性质分类政府网站企业网站商业网站教育

4、科研机构网站个人网站非盈利机构网站其他类型的网站1.2 网站与网页1.2.1 网站的种类3根据在大型搜索引擎上的设置分类娱乐与休闲类网站商业与经济类网站艺术与人文类网站健康与医药类网站新闻与媒体类网站政府与政治类网站电脑与网络类网站社会与文化类网站科学与教育类网站参考资料类网站1.2 网站与网页1.2.2 网站建设的规划网站规划是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位的作用。一个网站的成功与否和建站前的网站规划有着极其重要的关系。只有详细的规划

5、，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。建立网站的步骤可分为：申请E-mail账号、申请网页空间、域名注册和网页制作4步。1.2 网站与网页1.2.3 网站设计的原则在着手进行一个网站的设计之前，首先要明确以下几项设计原则：（1）内容与形式相统一。（2）主题鲜明。（3）风格统一。（4）兼顾下载速度与美观。（5）导航清晰。（6）栏目设置合理。（7）良好的兼容性。（8）经常更新。1.2 网站与网页1.2.3 网站设计的原则作为一个优秀网站，应该具备以下五大要素：网站内容丰富。页面下载速度快。功能多样、使用方便。网站品质优秀。保护个人信息。1.2 网站与网页1.2.4 网页设计

6、的原则1了解客户需求2遵循Web标准3运用形式美法则1.2 网站与网页1.2.5 网页版式设计网页的设计首先涉及的是页面的版面编排问题。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，那样往往会搞得杂乱无章。因此，必须根据内容的需要将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大观众。1.2 网站与网页1.2.5 网页版式设计1版面布局的依据（1）主次分明，中心突出。（2）大小搭配，相互呼应。（3）图文并茂，相得益彰。（4）动静要有度，平

7、衡要对称。1.2 网站与网页1.2.5 网页版式设计2网页布局的类型网页布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、自由型等。1.2 网站与网页1.2.6 网页色彩设计1色彩的基础知识色彩是艺术表现的要素之一。在网页设计中，要根据和谐、均衡和重点突出的原则将不同的色彩进行组合，搭配出美丽的页面。作为网页设计师，做到有针对性的用色是相当重要的。针对不同的主题来布置色彩，如健康类的网站就不能采用较为刺激的大红和黄、橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，以及一些不利于健康的联想。1.2 网站与网页1.2.

8、6 网页色彩设计2网页设计的标准色彩“标准色彩”是指展示网站形象和延伸内涵的色调。作为网站标准色彩的设计要遵循的基本原则是标准色彩不要超过三种。如果一个网站标准色彩超过三种则会让人眼花缭乱。标准色彩主要用于网站的标志、标题、主菜单和大色块，给人以整体统一的感觉，至于其他色彩的使用，只可作为点缀和衬托，绝不能喧宾夺主。1.2 网站与网页1.2.7 图形与文字的设计图形和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。1.2 网站与网页1.2.7 图形与文字的设计1图形设计的原则图形是网站的特色之一，它有醒目、吸引人以及传达信息的功能。好的、适量且清晰的图形

9、可以为页面增色，反之则会惹来浏览者的反感。在图形使用上，要采用一般浏览器均支持的压缩图形格式，如JPEG、GIF等，JPEG的压缩效果较好，适合中大型的图片，可以节省传输时间。使用图形的一般规则如下：（1）图形的主体要清晰可见，去除不必要的噪声。（2）图形的意义要简单明了。（3）图形内的文字要清楚容易辨认。（4）图形内文字的装饰不要过分花哨，造成文字辨识不易。1.2 网站与网页1.2.7 图形与文字的设计2文字设计的原则文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息。文字设计是增强视觉传达效果，提高作品的诉求力，赋予版面审美价值的一种重要构成技术。文字排列组合的好坏，直接影响其版

10、面的视觉传达效果。网页上的文字要易于阅读，文字太细、颜色太浅、页面太长或超出屏幕宽度都是有违网站设计“美学原则”的。在文字的组合中，要注意以下几个方面：（1）人们的阅读习惯。（2）字体的外形特征。（3）要有一个设计基调。（4）注意负空间的运用。（5）在有图片的版面中，文字的组合应相对较为集中。1.2 网站与网页1.2.7 图形与文字的设计3文字和图形的组合设计文字、标题、图片等的组合会在页面上形成各种各样的线条和形状，这些线条与形状的组合构成了主页的总体艺术效果，搭配好这些线条和形状能增强页面的艺术魅力。（1）直线（矩形）的应用。（2）曲线（弧形）的应用。（3）曲线、直线（矩形、弧形）的综合

11、应用。1.2 网站与网页1.2.7 图形与文字的设计4设计图形与文字时还应注意的事项（1）标题的呈现方式。（2）连结点的呈现方式。（3）重要信息呈现方式。（4）内文设计部分。1.2 网站与网页1.2.8 网页音效设计网页中背景音乐或指令音乐等音效的使用能够带给浏览者愉悦感、联想和想象。1指令音当浏览者进行访问某个页面或者单击等交互动作时，伴随动作会产生一些短暂而且适宜的音效，比如在交互过程中页面间的转换经常伴随“嗖”、“唰”等声音，按钮则伴随“咔哒”等声音，以此给浏览者一定的心理暗示，同时对内容起到烘托作用。2背景音乐不同的音乐表达不同的情感，如欢乐、喜悦、彷徨、忧愁、愤怒、激情、沧桑、坚强

12、、希望等。相对于指令音而言，此类音乐一般播放时间都比较长，适合作为网页的背景音乐使用。1.3 网页设计常用软件1.3.1 Dreamweaver 8的主要功能和特点1.3.2 Photoshop CS2的主要功能和特点1.3.3 Flash 8的主要功能和特点第第2 2章章网页制作基础网页制作基础目录 2.1 Dreamweaver 8基础知识基础知识2.2Dreamweaver 8 本地站点的建立与管本地站点的建立与管理理2.3 HTML设计基础设计基础2.1 Dreamweaver 8基础知识2.1.1 Dreamweaver 8简介简介2.1.2 Dreamweaver 8工作界面

13、工作界面2.1.3 Dreamweaver 8 常用工具栏常用工具栏2.1.4 Dreamweaver 8常用面板常用面板2.1.1 Dreamweaver 8简介 Dreamweaver 8是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。2.1.2 Dreamweaver 8工作界面Dreamweaver8的标准工作界面包括：标题栏、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。如下图所示文档工具栏工具栏标尺面板组属性面板文档窗口状态栏标题

14、栏菜单栏文件面板标签选择2.1.3 Dreamweaver 8 常用工具栏 1、插入工具栏“插入”工具栏位于菜单栏下方，集成了所有可以在网页应用的对象，包括了“插入”菜单中的选项。如下图所示：显示或隐藏插入工具栏的方式：选择菜单【查看】|【工具栏】|【插入】选项选择菜单【窗口】|【插入】选项 2、文档工具栏“文档”工具栏包含一些对文档进行操作的常用按钮。3、标准工具栏 “标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮，可以通过【查看】|【工具栏】|【标准】命令来显示或隐藏。面板集合了网页设计过程需要用到的各类功能，并根据功能被分为了若干组。在工作区窗口底部有个“属性”面板，而窗口

15、右边为“应用程序”、“CSS”、“标签检查器”和“文件”等面板。1、面板的基本操作u打开和关闭面板：面板可以通过“窗口”菜单对应的选项来打开。如果需要关闭面板则可右键点击面板选择弹出菜单的“关闭面板组”选项。u显示和隐藏面板：【查看】|【隐藏面板】命令来隐藏所有已打开的面板。2.1.4 Dreamweaver 8常用面板说明：显示面板操作和隐藏面板方式相同。2、属性面板默认情况下，“属性”面板位于工作区的底部，属性”面板显示的内容是随当前在文档中选择的对象来确定的。显示或隐藏“属性”面板，可以通过选择【窗口】|【属性】命令来实现。2.2.1定义和管理本地站点2.2.2 站点目录结构的建立和管

16、理2.2Dreamweaver 8 本地站点的建立与管理2.2.1定义和管理本地站点 1、创建站点步骤：（1）选择菜单栏中的【站点】|【管理站点】命令。（2）在“站点定义”对话框中选择默认的“基本”选项卡。（3）设置是否要使用服务器技术。选择“否，我不想使用服务器技术”表示建立一个静态站点。（4）设置文件存储位置，文件的使用方式和网页文件存储的文件夹。（5）设置浏览站点的根目录对话框。在文本框中输入站点的URL。（6）设置是否使用远程服务器。（7）站点定义总结，单击“完成”按钮就定义好一个站点了。定义好后文件面板中会显示刚才定义的站点。2、管理站点（1）编辑站点编辑站点即修改已建好站点的属

17、性和参数，可菜单栏中选择【站点】|【管理站点】命令，（2）删除站点在“管理站点”对话框中选择要删除的站点，然后单击“删除”按钮即可。（3）复制站点在“管理站点”对话框中选择要复制的源站点，再单击“复制”按钮，就可生成一个和源站点相同的新站点。（4）导入和导出站点导出站点：“管理站点”对话框中选择要导出的一个或多个站点，然后单击“导出”按钮。导入站点：若要导入站点在“管理站点”对话框中单击“导入”按钮，出现“导入站点”对话框。找到要导入的站点文件单击“打开”按钮即可。2.2.2 站点目录结构的建立和管理 1、文件命名规则最好用英文或者汉语拼音命名。文件多的时候可以和数字、符号组合使用。不能

18、使用中文命名。最好使用小写字母，因为有些操作系统（如UNIX）对大小写敏感。文件和文件夹的名称可以使用下划线“_”，但是不能使用空格、特殊符号以及“”、“！”、“”、“#”、“$”、“%”、“”、“&”、“*”等符号。名字不要过长。2、目录结构根据站点规划的内容确定所需要的的文件夹。可以给每个板块建立一个文件夹，这样可以让制作者保持清晰的设计思路。建立站点目录结构层次越少越容易管理和访问。3、创建文件夹 “文件”面板中右键单击根文件夹，在弹出的快捷菜单中选择“新建文件夹”命令。4、创建文件 “文件”面板中右键单击根文件夹，在弹出的快捷菜单中选择“新建文件”命令。5、文件与文件夹的管理对建立

19、好的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。在“文件”面板中右键单击需要操作的文件或文件夹，从弹出的快捷菜单中选“编辑”选项，即可进行相关操作。2.3.1 什么是HTML2.3.2 HTML中的常用标记2.3 HTML设计基础2.3.1 什么是HTML HTML（HyperText Markup Language）即超文本标记语言或超文本链接标示语言，是构成网页文档的主要语言。HTML用于描述功能的符号称为“标记”，如“HTML”、“BODY”、“TABLE”等。HTML标记可以说明文字、图形、动画、声音、表格、链接等。HTML标记通常是英文词汇的全称（如头部:head

20、）或缩略语（如“p”代表Paragraph），均用尖括号括起来。如Paragragh标记是，头部标记是。HTML标记用于描述、设置网页文件的内容及格式。用户只需要输入文件内容和必要的标记，文件内容就能在浏览器中按照标记定义的格式显示出来。HTML的结构包括3个部分：起始标记、网页标题（Head）和文件主体（Body）。标题夹在和标记之间，用于描述网页标题及属性。正文即文件主体在和之间是HTML的主要部分，它包括了文件所有的实际内容和绝大多数标记符号。1、标记的基本格式 HTML标记用“”括起来，通常成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。2.3.2 HTM

21、L中的常用标记l单标记表示一种功能，没有范围之分。语法格式为：l双标记包括开始标记和结束标记符，定义了标记符影响的范围。语法格式为：内容。l包含属性的标记，作用是对标记影响的内容进行更详细的控制。标记属性可以由用户设置，否则采用默认值。属性出现在标记的后面，并且以空格进行分隔。如果标记有多个属性，不同属性名称之间也以空格隔开。格式：2、常用标记（1）：整份文件处于标记与之间（2）：由至称为开头（3）：只可出现开头部分，所标示的是文件的标题（4）：至称文本（5）常用数，如：（6）水平线（7）字体 Face：设定文字的字形，建议不要使用“Windows内建字体以外的字形 Size：设定文字大小，其

22、值可以是绝对或相对。不受影响。内定为3 Color：字体颜色（8）称为顺序清单标记所谓顺序清单就是在每一项前面加上1,2,3,等数，又称为编引清单。（9）无序清单标记，如：（10）是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在它范围内才适用。（11）图形标记（12）滚动代码（13）FLASH代码（14）背景音乐第第3章章制作简单的网页制作简单的网页目录3.1 网页的基本操作3.2 文本的插入和编辑3.3 图像的插入和编辑3.4 表格的插入和编辑3.5 多媒体的使用和编辑3.6 超链接的使用3.7 CSS样式表的使用3.8 框架的使用3.1网页的基本操作1、创建文件

24、性”面板中的“页面属性”按钮页面属性窗口“外观”：设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图片等“链接”：是一些与页面的链接效果有关的设置。“标题”：用来设置标题字体的一些属性。“标题/编码”：“标题”用来修改新建文档的标题，显示在浏览器标题处和编辑软件的标题处。编码可修改页面编码信息，。“跟踪图像”：文本框用来设置在页面编辑过程中使用的描图图像的地址和名称。3.2文本的插入和编辑 3.2.1 插入文本 3.2.2 设置文本格式3.2.1插入文本1、输入文本输入时如果按回车键换行会便会另起一个段落，在段落与段落之间会产生一个空行。如果希望文

25、本换行后不产生空行可以按Shift+Enter组合键或选择菜单【插入】|【HTML】|【特殊字符】|【换行符】命令换行，2、复制和粘贴选择“编辑”菜单中的“首选参数”选项，可在“复制/粘贴”分类设置粘贴的方式。3、导入文档选择【文件】|【导入】命令。3.2.2设置文本格式设置文本格式可以通过“属性”面板来完成，如图3-9所示。1、文字属性的设置（1）设置文字字体：选择菜单中【文本】|【字体】选项中的相应字体选项；或者在“属性”面板上“字体”下拉列表中选择相应的选项。Dreamweaver默认字体较少，如果字体列表中没有需要的字体，可以在“编辑字体列表”对话框中添加需要的字体到字体列表中。（2）

26、设置文字字号选定要改变字号的文本，选择“属性”面板上“大小”的下拉列表中选择相应的选项。注意：如果单位设置为“点数(pt)”，设置为点数的文字的大小不会随着分辨率的改变而发生变化，像素则正好相反。（3）设置文字颜色：选择“文本”菜单中“颜色”命令，在随后出现的对话框中选择所需要的颜色。（4）设置文本样式：选择“文本”菜单中的“样式”选项设置更多类型的字体样式。2、设置段落对齐方式对齐段落有三种方式：左对齐、居中和右对齐可以使用“文本”菜单中“对齐”子菜单进行设置3、使用列表有序列表又称为编号列表，所有项目前使用有序的数字符号进行排列。无序列表又称为项目列表，所有项目前使用相同的项目符号进行排列

27、。（1）创建列表：选择“文本”“列表”选项（2）修改列表属性选择【文本】|【列表】|【属性】命令 4、插入水平线选择菜单【插入】|【HTML】|【水平线】命令，3.3图像的插入和编辑 3.3.1 网页中常见的图像格式 3.3.2 插入图像 3.3.3 设置图片的属性 3.3.4 编辑图像3.3.1 网页中常见的图像格式1、GIF格式 GIF是一种索引颜色的图像格式。GIF格式的特点是压缩比高，磁盘空间占用较少，可以同时存储若干幅静止图象进而形成连续的动画。适用于导航条、按钮、图标、透明图像和动画。2、JPEG格式 JPEG是支持32位颜色图像，可以保持原图像的真实颜色。JPEG适合网页中对图片

28、质量要求较高，有颜色渐变、需要精确色彩显示的图片，如照片。3、PNG格式 PNG是一种新兴的网络图像格式，是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点；PNG还支持透明图像的制作。PNG的缺点是不支持动画应用效果3.3.2 插入图像1、插入图片插入图片的方法:（1）打开需要加入图片的网页后将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用“插入”工具栏的“图像”按钮。如下图插入图像按钮（2）鼠标拖动：在“文件”面板的文件夹中找到需要插入的图片后，用鼠标拖曳该图标到网页文档窗口中。（3）选择菜单【插入】|【图像】命令。2、图文混排设置图片的对齐方式：选中图片，在“属性”面板

29、中“对齐”下拉列表框选择图片的对齐方式。说明：如果需要文字环绕图像可选择对齐方式中的“左对齐”或“右对齐”。3、插入图像占位符方法如下：选择菜单【插入】|【图像对象】|【图像占位符】单击“插入”工具栏中“图像”按钮选择“图像占位符”。4、设置图片为网页背景选择菜单【修改】|【页面属性】命令，在“属性”面板中单击“页面属性”按钮说明：背景图片大小是固定的，如果网页内容较多，可以在“重复”下拉列表中选择是否要重复。3.3.3 设置图片的属性如果需要精确调整图像的大小、位置、图像与网页边距的距离等属性，可以使用图像“属性”面板来完成如下图所示。1、图像标记名称文本框中输入的名字可以在脚本语言中被引用

30、。2、精确调整图像大小“宽”和“高”文本框中的数值是以像素为单位指定图像的宽度和高度。如将单位设置为百分比，则图像的大小会跟随文档窗口的大小自动调整。3、设置图片边距“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。通常用于图文混排等多种元素的页面。4、源文件“源文件”指定图像的源文件路径。5、链接“链接”指定图像的超级链接。添加链接的方法如下：（1）将“指向文件”图标拖到“站点”面板中的某个文件上，即可建立链接。（2）单击浏览文件图标选择要链接的文件，（3）手动输入链接地址 URL。6、替换 “替换”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示

31、的替代文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。7、对齐 “对齐”指该图片对齐同一行上的图像和文本。主要用于图文混排或者多个图像排版使用。8、图片边框 “边框”文本框是用来设置图像边框的宽度，类似给图片描边。3.3.4编辑图像1、图像重新取样添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素。对图像进行重新取样会减小图像文件的大小。2、裁剪通过减小图像区域编辑图像。3、亮度/对比度修改图像中像素的亮度或对比度。4、锐化可通过增加图像中边缘的对比度来调整图像的焦点。注意：图像编辑功能仅适用于 JPEG 和 GIF 图像文件格式。3.4表格的插入和编辑 3.4.

32、1 表格的基本操作 3.4.2 嵌套表格 3.4.3 表格的导入导出和排序3.4.1表格的基本操作1、插入表格单击“插入”工具栏中的插入表格按钮则选择菜单【插入】|【表格】命令 2、选择表格（1）选择整个表格要选定整个表格可以把鼠标放在表格边框的任意处，当鼠标变为时单击即可选中整个表格在表格内任意处单击，然后在状态栏选中标签即可。在表格内任意处单击，点鼠标右键在弹出菜单中选择【表格】|【选择表格】命令或则选择菜单【修改】|【表格】|【选择表格】命令。单击表格左上角（2）选择单个单元格w按住Ctrl键，鼠标在需要选中的单元格单击即可。w单击要选择的单元格，再选则状态栏中的标签。w在要选择

33、的单元格内双击鼠标。（3）选择连续的单元格w按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。w按住Shift建单击要选择的单元格。(4)选择不连续单元格可以按住Ctrl键，单击要选择的所有单元格即可。(5)选择行或列将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。注意：当选中表格或表格中有插入点时，Dreamweaver 会显示表格和列的宽度以及访问表格标题菜单和列标题菜单的箭头3、调整表格的大小（1）调整表格的大小选取整个表格后，将鼠标放在表格边框周围的黑色小方块上，鼠标变为双箭头后按住鼠标左键拖动即可改变表格大小。当调整整个表格的大小时，表格中的

35、“插入行或列”对话框。在该对话框中选择“行”或“列”，然后设置需要插入的行或列的数目即可。5删除行或列选择行或列，“编辑”|“清除”命令或按Delete 键。6拆分和合并单元格（1）拆分单元格。右击单元格，快捷菜单中选择“表格”|“拆分单元格”命令（2）合并单元格。选中多个单元格，选择“修改”|“表格”|“合并单元格”命令7设置表格属性选中表格，“属性”面板修改表格的相关属性参数如图所示8设置单元格属性把光标移动到某个单元格内，利用单元格“属性”面板对单元格的属性进行设置3.4.2 嵌套表格创建嵌套表格的操作方法（1）插入总表格（2）将光标置于要插入嵌套表格的地方，继续插入表格即可。3.

37、中设置它的属性3设置Flash 动画背景透明设置透明效果的方法为：（1）选中Flash 动画（2）单击“属性”面板中的“参数”按钮（3）“参数”对话框中单击“加号”按钮，在参数文本框中输入参数为wmode，值为transparent。4插入Flash 按钮方法：选择“插入”|“媒体”|“Flash 按钮”命令说明：如果需要修改Flash 按钮对象，可以先选中它，然后在属性面板中单击“编辑”按钮，在“插入Flash 按钮”对话框中更改它的设置即可。3.5.2 音频的插入和编辑1、插入背景音乐设置背景音乐有两种方法：一种是通过HTML 代码实现，还有一种是通过行为实现。具体步骤如下：（1）打开需要

38、添加背景音乐的文档，将视图切换为“拆分”视图。（2）将光标定位到之前的位置，在光标的位置写下代码：如下图所示2嵌入音频（1）插入音频文件方法：选择“插入”|“媒体”|“插件”命令说明：插入的音频文件在文档窗口中以图标的方式显示，如图所示。（2）设置背景音乐方法二：插入一个音频文件选择该音频文件，单击“属性”面板中的“参数”按钮。在参数对话框中单击“”按钮，在“参数”列中输入loop，并在“值”列中输入true。设置后可实现让音频文件循环播放。在“参数”列中输入hidden，值为true；设置后可隐藏播放器在“参数”列中输入autostart，值为true。设置后可自动播放音频文件。设置结果

39、如图所示3.5.3 视频的插入和编辑插入视频的方法:将插入点放在需要插入视频的位置，选择“插入”|“媒体”|“插件”命令3.6 超链接的使用3.6.1 超链接概述3.6.2 超链接的基本操作3.6.1 超链接概述1超链接的概念(1)概念：超链接是“超级文本链接”的缩略语，指站点内不同网页之间、站点与Web 之间的链接关系，它可以使站点内的网页成为机的整体，还能够使不同站点之间建立联系。(2)分类：内部超链接：同一网站文档之间的链接。外部超链接：不同网站文档之间的链接。锚点超链接：同一网页或不同网页中指定位置的链接。电子邮件超链接：启动邮件客户端程序，可以写邮件并发送到链接的邮箱中。2链接路径链

40、接路径可以是相对路径也可以是绝对路径。（1）绝对路径：指某个文件在网络上的完整路径，包括适用的协议（如http、ftp、rtsp等）、Web 服务器、路径和文件名等。例如：file:/G|/图片/手机图片/1.gif（2）相对路径：和当前文档所在的文件夹相对的路径。相对路径最适合网站的内部链接。例如：./images/m.jpg（3）根目录相对路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头。例如：/about/index.html3.6.2 超链接的基本操作1设置超链接格式选择“修改”|“页面属性”命令“属性”面板中单击“页面属性”按钮，弹出“页面属性”对话框中设置2创建外部链

41、接方法：（1）选中要添加链接的文字（2）在“属性”面板中的在“链接”文本框中直接输入外部绝对地址http:/。（3）在“目标”下拉列表框中选择“_blank”。说明：“目标”下拉列表框中有4 种选项：_blank 选项：单击链接后，在新的浏览器窗口中打开链接文档。_parent 选项：当链接文本所在的网页是嵌套框架中的一部分时，被链接的文档将在父框架中打开。如果不是在嵌套框架中，则会在整个浏览器窗口中打开链接文档。_seft：默认值，链接文档将在当前网页所在的窗口或框架中打开。_top：在整个浏览器窗口中打开链接文档，会删除所有框架。3创建内部链接（1）选中要添加链接的对象（如：文字）（2）单

42、击“插入”工具栏“常用”分类中的“超链接”按钮，弹出“超级链接”对话框。如图所示（4）单击“超级链接”对话框中的“链接”下拉列表框后的按钮，在弹出的“选择文件”对话框中选择链接目标文件（5）在“超级链接”对话框的“目标”下拉列表框中选择_blank 选项。4创建电子邮件链接方法：（1）选中需要建立链接的文本或图片（2）单击“插入”工具栏常用分类中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框（3）在对话框的E-mail文本框内输入邮箱地址。5创建锚点链接概念：锚点链接，是指在文档中设置位置标记，并在该位置定义一个名称以方便引用。锚点链接通常用于跳转到特点主题或者文档顶部。方法：（1）将光

43、标放置于要插入锚点的地方，（2）选择“插入”|“命名锚记”命令，或者单击“插入”工具栏常用分类中的“命名锚记”按钮（3）在弹出“命名锚记”对话框中，“锚记名称”后的文本框中输入链接时引用的名称，如BT。单击“确定”按钮后将在光标所在处插入一个锚记，如图所示。3.7 CSS 样式表的使用 3.7.1 CSS 样式表概述 3.7.2 创建和应用CSS 样式表3.7.1 CSS 样式表概述（1）概念：层叠样式表（CSS，Cascading Style Sheet）是一系列格式设置规则，它们控制Web 页面内容的外观。使用CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位

44、于自身的TML 文件中，而定义代码表现形式的CSS 规则位于另一个文件（外部样式表）或HTML 文档的另一部分（通常为部分）中。（2）组成CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如P、H1、类名或ID）声明用于定义元素样式。声明由两部分组成：属性（如font-family）和值（如Helvetica）3.7.2 创建和应用CSS 样式表1创建CSS 样式表（1）选中“窗口”|“CSS 样式”命令，弹出“CSS 样式”面板（2）单击“CSS 样式”面板右下角的“新建CSS 规则”按钮，弹出“新建CSS 规则”对话框（3）为新建CSS 样式输入或选择名称、标记或

45、选择器。（4）在“选择器类型”选项组中选择“类”，然后在“名称”组合框框中输入样式名称（如：.moviestyle）（5）在“定义在”组合框中选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。选择“新建样式表文件”选项，在弹出的“保存样式表文件为”对话框中给样式表命名。2定义CSS 样式表“CSS 规则定义”对话框中，可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置来美化页面。在定义某个CSS 样式的时候，不需要对每一项都进行设置，需要什么效果，选择相应的项进行设置即可。设置时在左边的“分类”中选择样式，在右边窗格中修改该样式的属性。（1）文本样式的设置。（2）背景样

46、式的设置。在HTML 中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS 之后，有了更加灵活的设置。（3）区块样式设置。（4）方框样式的设置。在前面我们设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。方框设置进一步完善、丰富了这些设置。（5）边框样式设置。边框样式设置可以给对象添加边框，设置边框的颜色、粗细、样式。（6）列表样式设置。（7）定位样式的设置。“定位”项实际上是对层的设置（8）扩展样式的设置。CSS 样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。3CSS 样式表的基本操作单

47、击CSS 样式面板右上方的扩展按钮，或者选择要编辑的样式并右击，将会弹出CSS操作菜单，CSS 的相关操作都是通过这个菜单上的项目来实现的。（1）编辑CSS样式。选择CSS操作菜单中的“编辑”选项单击“编辑样式”按钮，在弹出的“CSS规则定义”对话框中修改相应的设置。（2）应用CSS自定义样式。右击在网页中被选中的元素，快捷菜单中选择“CSS样式”，在其子菜单中选择需要的自定义样式。选中要应用样式的对象，在“属性”面板中选择“样式”下拉列表框中定义好的CSS样式。（3）附加样式表。在CSS面板中单击“附加样式表”按钮，弹出“链接外部样式表”对话框，可以链接外部的CSS样式文件。3.8 框架的

48、使用 3.8.1 框架与框架集 3.8.2 创建框架 3.8.3 设置框架3.8.1 框架与框架集框架（Frame）：是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示的内容无关的网页文件。框架集（Frameset）：也是一个网页文件，由若干个框架组成，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。3.8.2 创建框架1使用预制框架集（1）选择“文件”|“新建”命令（2）在框架集下的选项中选择一种框架类型。（3）在“框架标签辅助功能属性”对话框中，给每一个框架设定一个框架名称，或者用默认的框架名称。（4）

49、修改好后单击“确定”按钮即可创建一个带框架的网页文档，2保存框架文档在保存框架网页时，需要将所有的框架网页文档都保存下来。保存时可以分别保存每个框架集页面或框架页面，也可以同时保存所有的框架文件和框架集文件。（1）保存全部框架页。选择“文件”|“保存全部”命令（2）保存单个框架页。在需要保存的框架内单击，选择“文件”|“保存框架”命令。3.8.3 设置框架1框架的基本操作（1）选定框架。选择“窗口”|“框架”命令，在窗口右边的面板组中将会出现“框架”面板，单击某个框架即可选中该框架；单击框架集的边框可以选择该框架集。按住Alt键在文档窗口中的某个框架内单击，即可选择该框架。在文档窗口中单击要

50、选择框架集的边框即可选中该框架集。（2）改变框架大小。用鼠标拖拽框架边框可随意改变框架大小。（3）删除框架。用鼠标把框架边框拖拽到父框架的边框上，可删除框架。2框架属性选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等，3设置框架属性 4在框架中使用超链接在框架式网页中制作超链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口中，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。第第4 4章章交互式网页设计交互式网页设计目录目录 4.1

展开阅读全文