1、第第 6章章 网页设计与制作网页设计与制作多媒体技术及应用网页设计与制作网页设计与制作2华南理工大学计算机公共基础教研室内容摘要内容摘要6.1 网页制作基础6.2 网页的结构与内容6.3 修饰美化网页6.4 Adobe Dreamweaver CC 2017编辑环境3华南理工大学计算机公共基础教研室6.5 Adobe Dreamweaver 网页制作实例内容摘要内容摘要6.1 网页制作基础网页制作基础6.2 网页的结构与内容6.3 修饰美化网页6.4 Adobe Dreamweaver CC 2017编辑环境4华南理工大学计算机公共基础教研室6.5 Adobe Dreamweaver 网页制作
2、实例6.1 网页制作基础网页制作基础5华南理工大学计算机公共基础教研室网页网页 在网上浏览网站时看到的一个个页面，是一种独立的超文本文件，扩展名为.htm或.html。网站网站 是为网络用户提供信息的场所，是设计者表达某些主题内容设计的多张网页，利用超链接把相关栏目内容的网页组织起来，存放在Web服务器上。主页主页 是网站的第一页即首页，浏览者可通过主页链接到网站其他页。主页是网站的核心，对整个网站内容起到索引的作用。站点站点 是制作网站时在机器上的一个物理位置，即在硬盘上保存文件的地方。基本概念基本概念6.1 网页制作基础网页制作基础6华南理工大学计算机公共基础教研室l Internet上的
3、一个服务器或一个网络系统的名字l 域名具有唯一性，域名分为国内域名和国际域名两种l 从技术上讲，域名是一个Internet中用于解决与IP地址对应问题的一种方法。l 在网络上分配给每台计算机或网络设备的32位或128位的数字标识l 在Internet上，每台计算机或网络设备的IP地址是唯一的l WWW浏览器和WWW服务器之间的应用层通信协议l HTTP协议保证正确传输超文本文档l 确定传输文档中的哪一部分及内容首先显示（如文本先于图形）网页常用术语网页常用术语6.1 网页制作基础网页制作基础7华南理工大学计算机公共基础教研室l 在计算机和网络之间交换文件的最简单的方法l 主要功能是上传下载删除
4、文件，查询文件目录，更改文件名称等l Web服务器是放在网络中某个节点上的计算机l 装有某种服务系统，拥有独立的IP地址l 当客户向Web服务器发出请求时，根据请求的返回相应的内容至客户端，按HTTP协议进行交互l 一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等，语法是：:/l 站点内不同网页之间、站点与Web之间的链接关系 网页常用术语网页常用术语6.1 网页制作基础网页制作基础8华南理工大学计算机公共基础教研室l 导航条相当于网站的目录l 供浏览者提交填写的信息的交互网页l 将制作好的网页或网站传到网络上的过程就是发布l 是网页浏览器的简称，是一种WWW服务的客户端浏览程
5、序软件 网页常用术语网页常用术语6.1 网页制作基础网页制作基础9华南理工大学计算机公共基础教研室文字和图片、超链接是构成一个网页的最基本的元素。l 静态网页静态网页：指在浏览器中网页内容、形式及所呈现的效果与事先设计的完全一致、固定不变，且客户端与服务器端不能发生信息交互的网页。通常仅用HTML语言编写。静态网页的后缀名有：htm、html、shtml、xml等。l 动态网页：动态网页：包括DHTML(Dynamic HTML)动态网页和服务器端动态网页 基本概念基本概念6.1 网页制作基础网页制作基础华南理工大学计算机公共基础教研室10 网页设计网页设计统一统一指设计作品的整体性整体性。连
6、贯连贯指要注意页面的相互关系页面的相互关系。设计中应使各部分在内容上的内在联系和表现形式上相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯。分割分割是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。换言之，分割是对页面内容的一种分类归纳分类归纳。对比对比通过矛盾和冲突，使设计更加富有生气。和谐和谐是指整个页面符合美的法则6.1 网页制作基础网页制作基础11华南理工大学计算机公共基础教研室 常用工具常用工具 代码编辑工具代码编辑工具 此类工具是直接编写HTML源代码的软件，例如Windows系统中的记事本，使用时直接在代码编辑区输入网页代码，然后保存成网页
7、文档在浏览器中打开即可。优点采用代码编辑工具，用户便于控制代码，能够较好地实现HTML代码在浏览器中的显示效果，网页的代码做得较为精练。缺点只适用于对网页制作语言比较熟悉的用户。6.1 网页制作基础网页制作基础12华南理工大学计算机公共基础教研室 常用工具常用工具 可视化编辑综合工具可视化编辑综合工具 用户可以借助此类工具的各种快捷按钮和属性选项，以“所见即所得”的方式，在编辑的过程中看到与在浏览器所见的效果，系统会自动生成相应的代码；同时，用户又可以在“代码”编辑窗口输入代码编辑网页。优点采用可视化编辑综合工具的优点是代码可由系统自动生成，用户即便不熟悉网页制作语言也可制作出较好的网页。使用
8、可视化与代码相结合的编辑方式，以提高工作效率。缺点当然，由系统自动生成的代码难免产生一些冗余，因此熟悉HTML语言的用户可以在“代码”编辑窗口输入代码以减少冗余。6.1 网页制作基础网页制作基础 网站设计网站设计 定位性定位性规范性规范性精练性精练性观赏性观赏性文本设计网站之前首先要明确设计思想和风格。兼容性兼容性网站的文档较多时，要按栏目内容或素材种类建立子目录存放，目录的层次不宜太多，忌用中文命名文件夹，以免某些软件系统不能对中文有良好的支持而致出错。网页内容要丰富而精练，避免空洞。浏览者从主页到所需阅读的信息，点击一般不应超过三次，。同一级的页面应该保持相同的设计风格，如色调、字体和字号
9、等风格要统一。设计时要考虑到网络环境、系统、屏幕分辨率、浏览器等环境因素的兼容影响13华南理工大学计算机公共基础教研室6.1 网页制作基础网页制作基础 网站设计网站设计 14华南理工大学计算机公共基础教研室（1）需求分析）需求分析（2）结构设计）结构设计（3）页面详细设计）页面详细设计 网站建设前期需要进行需求分析（请见7.3.1），清楚网站的目的和网站的访问对象（即上文中提到的网站的定位性），然后确定网站的主题以及风格。即网站建设的整体框架设计。确定站点网页之网页之间的链接关系间的链接关系，是网站设计能否成功的关键所在。一般网站的组织结构都采用树形结构。在制作网页之前应设计出每个网页的页面结
10、构，即此页的栏目和模块的划分。大多数网站都是布局表格来布局页面结构的，有时也结合框架技术来完成。6.1 网页制作基础网页制作基础 网站设计网站设计 15华南理工大学计算机公共基础教研室（4）素材的制作与整理）素材的制作与整理（5）详细实现）详细实现（6）测试站点）测试站点在对网站有了一个详细的设计后，还需要有丰富的内容去充实它，因此在网站建设前需要收集和制作所需的素材，包括图片、音频、视频以及相关文字内容等。还要注意的是，网站的内容必须合法。要建立一个网站，还需要选择用哪种方法来实现它。目前，能够用于设计网站的方法有很多，可以使用HTML语言来编辑，也可以使用网页制作工具（如Dream-wea
11、ver）来设计网站。网站一般先创建站点，然后制作主页，再制作其他页面。网站制作以后需要在本地进行测试，测试的目的主要是检查网页文件在不同浏览器中的显示效果，以及网页之间或者网页和资源之间是否存在错误链接，以保证整个网站的正确性。6.1 网页制作基础网页制作基础 网站设计网站设计 16华南理工大学计算机公共基础教研室（7）申请域名和主页空间申请域名和主页空间（8）发布网站发布网站 当购买域名后，还需要有域名可以访问到的地方，这时候就要自建或租一个虚拟主机的空间了，把域名与主机绑定，当访问域名时，就直接进入放在虚拟主机空间里的网站了。目前阿里云、腾讯云等都提供虚拟主机的租赁服务。域名是不可再生资源
12、，域名的申请可以放在网站流程的第一步。域名一般和网站主题或企业名称有关，可以是全拼(如)或首字母(如)，可以加地域或数字，但一定要有意义且容易记住。内容摘要内容摘要6.1 网页制作基础6.2 网页的结构与内容网页的结构与内容6.3 修饰美化网页6.4 Adobe Dreamweaver CC 2017编辑环境17华南理工大学计算机公共基础教研室6.5 Adobe Dreamweaver 网页制作实例HTML简介简介华南理工大学计算机教学团队18HTML标记标记 一个HTML文件是由许多文字及标记组合而成。当浏览器阅读HTML时，它会解析包围文本的所以标记，标记是用尖括号括起来的字母或者单词，例
13、如等。标记告诉浏览器文本的结构和意义，哪些文本是标题，哪些文本是段落，哪些需要强调，甚至哪里需要放置图片。因此，一个HTML文件只要经过浏览器的解读，密密麻麻的HTML代码就能转变为图文并茂的网页。HTML文件浏览器显示网页效果剖析标记剖析标记华南理工大学计算机教学团队19这里是用来开始标题的开始标记。标记通常由尖括号及标记名组成，尖括号即“”。登鹳雀楼通常在部分内容的周围添加 标 记。这 里 使 用标记告诉浏览器“登鹳雀楼”是三级标题。是用来结束标题的结束标记，它之所以是个结束标记，因为它出现在内容的后面，而且在“h3”前面有“/”，所有的结束标记都带有“/”。我们称一对开始和结束标记为匹配
14、标记（双标记）。整个语句称为一个元素，在这里我们称其为元素。一个元素由闭合标记及它们之间的内容组成。即：元素=开始标记+内容+结束标记HTML基本语法基本语法（1）华南理工大学计算机教学团队 20 例11.1古诗一首 登鹳雀楼 王之涣 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。1.HTML标记：是以“”符号括起来的字符，构成一个标记。标记不区分大小写，如写成、和都可以。2.双标记：双标记是由开始标记和结束标记组成，例如：，标记中的“/”符号表示结束的意思。3.单标记：只有开始标记。HTML基本语法基本语法（2）华南理工大学计算机教学团队 21 例11.1古诗一首 登鹳雀楼 王之涣 白日依
15、山尽，黄河入海流。欲穷千里目，更上一层楼。4.使用标记时一般都以成对方式出现，例如：“网页标题”。5.为进一步扩展标记的用法，在开始标记中可加入属性。格式如下：6.单标记因无结束标记，因可直接使用，例如：“在文本后面换行”。HTML基本语法基本语法（3）华南理工大学计算机教学团队 22 例11.1古诗一首 登鹳雀楼 王之涣 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。8.标记与标记可以嵌套使用。7.HTML语言和其他语言一样也有注释标记，注释方法是，在注释的前后加上“”标记。htmlheadbodytitleh3h4pbrbr标记嵌套关系图HTML文档结构文档结构华南理工大学计算机教学团队
16、 23 网页标题 网页内容 文档头部文档主体标签中的文字用来表示网页的标题，显示在浏览器的标题栏上。在浏览器显示的网页内容文档的开始与结束常用常用标签标签1.文本结构标文本结构标签签2.文字格式标文字格式标签签3.图像标图像标签签华南理工大学计算机教学团队 244.链接标链接标签签文本结构标记文本结构标记1.2.3.华南理工大学计算机教学团队 254.标记标记华南理工大学计算机教学团队 26 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题普通文字显示效果标题文字与普通文字有什么区别？标签里的数字越大，所显示的文字越小。与与 标记标记华南理工大学计算机教学团队 27登鹳雀楼王之涣白日
17、依山尽，黄河入海流。欲穷千里目，更上一层楼。文本分段在此换行 标记标记华南理工大学计算机教学团队 28 块引文标签间的文字在浏览器上显示的结果：引文左右两边被缩进显示。引文左右两边被缩进显示。文本结构标记应用示例文本结构标记应用示例1华南理工大学计算机教学团队 29 网页标题 网页副标题 栏目标题1 正文1 栏目标题2 子栏目标题1 正文2，换行显示。块引文标签间的文字在浏览器上显示的结果：引文左右两边被缩进显示。、都是块元素。它们独立显示，文本前后有空行。不属于块元素，文本前后无空行。与与 有序列表标记有序列表标记华南理工大学计算机教学团队 30 列表项目1 列表项目2 列表项目3 列表项目
18、1 列表项目2 列表项目3 ol、li 两个元素结合使用就构成了有序列表。以 小写 字母 排序从 第3 个字 母开 始排序有序列表的有序列表的type属性值属性值属性示例说明说明type=”1”以数字排序，如：1，2，3，等。type=”a”以小写英文字母排序，如：a，b，c，等。type=”A”以大写英文字母排序，如：A，B，C，等。type=”i”以小写罗马字母排序，如：i，ii，iii，等。type=”I”以小写罗马字母排序，如：I，II，III，等。华南理工大学计算机教学团队 31格式：无序列表标记无序列表标记华南理工大学计算机教学团队 32 列表项目1 列表项目2 列表项目3 列表项
19、目1 列表项目2 列表项目3 ul、li 两个元素结合使用就构成了无序列表。以 为 项目符缺 省type以 为 项目符无无序列表的序列表的type属性值属性值属性示例说明说明type=”disc”以符号标识列表项。type=”circle”以符号标识列表项。type=”square”以符号标识列表项。33格式：华南理工大学计算机教学团队文本结构标记应用示例文本结构标记应用示例2华南理工大学计算机教学团队 34 网页制作“三剑客”Dreamweaver Flash Fireworks 网页制作“三剑客”Dreamweaver Flash Fireworks 浏 览 器 把 、标签中的文本作为独立
20、的一段文字显示，与其它文本有一行间隔。标签则没有此间隔。文字格式标记文字格式标记1.与2.与3.华南理工大学计算机教学团队 354.与与与标记标记华南理工大学计算机教学团队 36文字正常显示文字加粗显示文字斜体显示把文字以“斜体”样式显示。把文字以“黑体”（加粗）样式显示。与与标记标记华南理工大学计算机教学团队 37ab=NlogaN=b把文字以“上标”（加粗）格式显示。把文字以“下标”格式显示。标记标记华南理工大学计算机教学团队 38毛主席教导我们：“好好学习，天天向上。”Cite与blockquote用法上有什么区别？Cite元素主要用于引用某人的话，引文以斜体显示。与与标记标记华南理工大
21、学计算机教学团队 39 学以致用。我重要！em与strong元素主要用于信息的语气上强调重要性。我更重要！文字格式标记应用示例文字格式标记应用示例华南理工大学计算机教学团队 40 毛主席教导我们：“好好学习，天天向上。”对数的概念 下列式子：ab=N 和 logaN=b 表示a、b、N 这三个数之间的关系。学以致用。设 N=100，求 log10N。图像标记图像标记 华南理工大学计算机教学团队 41 在网页中加入图片可以减少文字的叙述，使网页更直观有趣。在HTML文件中加入图片很简单，只要在想放置图片的地方使用标记，浏览器就会自动在对应的位置加入图片。的相关属性的相关属性属性示例说明说明src
22、=”p1.jpg”链接图片文件的位置。width=”300”设置图片的宽度。hight=”200”设置图片的高度。border=”3”设置图片的边框大小。align=”top”设置图片与文字之间的对齐方式。alt=”这是一幅地图”设置图片提示信息。华南理工大学计算机教学团队 42格式：图像标记应用示例图像标记应用示例华南理工大学计算机教学团队 43 水果图片 图片在文本的右边当鼠标在图片上方时，出现提示信息。图片在浏览器的右边。利用属性可以控制图片的位置、大小等。超超链接标记链接标记华南理工大学计算机教学团队 44 超链接是网页中最基本又实用的功能之一，只要利用鼠标点击一下有链接的地方（文字、
23、图片等），即可以链接到另一个页面（或者同一个页面中的其它地方）。在HTML文件中创建超链接的标记为标记。超链接超链接标记标记华南理工大学计算机教学团队 45跳转到另一个页面元素用来创建一个到其它页面的链接。元素中的内容会作为链接的标题。浏览器将在标题下添加下划线，表明可以点击它。Href属性用来指定链接的目的地。在此链接中，浏览器会显示“跳转到另一个页面”链 接，点 击 将 跳 转 到“page2.htm”页面。超链接标记格式超链接标记格式链接标记应用示例链接标记应用示例华南理工大学计算机教学团队 46 链接标记应用示例 跳转到另一个页面 华南理工大学 电子邮箱 FTP服务器 下载文件 以新的
24、窗口打开另一个页面表格表格标记标记1.2.3.华南理工大学计算机教学团队 474.表格属性表格属性属性示例说明说明border=”1”设置表格边框的宽度，若不设此值或为“0”，则表格线不可见。width=”300”设置表格的宽度。height=”200”设置表格的高度。align=”center”设置表格的对齐方式，居左、居中、居右。bgcolor=”#88bbff”设置图片与文字之间的对齐方式。华南理工大学计算机教学团队 48格式：标记标记 华南理工大学计算机教学团队 49 表头第1列 表头第2列 第2行第1列 第2行第2列 第3行第1列 第3行第2列 表格应用示例表格应用示例华南理工大学计
25、算机教学团队 50 电话簿 一班 二班 张平 13485684569 李四海 33843936 王小山 13575345846 何新 13678392232 表格标题表示此单元格宽度占整个表格宽度的比例。此单元格跨2列表格表格布局布局示例示例（1）华南理工大学计算机教学团队51 表格布局 中国名山 中国十大名山最新排行榜终于诞生了。这里面既有五岳之林的泰山，也有宗教名山峨眉山，而黄山以其突出的审美价值跃居前列。黄山 泰山 设定表格宽度两图片和文字并列排放。文本信息跨2列表格表格布局布局示例示例（2）华南理工大学计算机教学团队 52 中国名山 上帝的盆景 华夏的图腾 黄山可以说无峰不石，无石不松
26、，无松不奇，并以奇松、怪石、云海、温泉四绝著称于世。泰山也是佛、道两教兴盛之地，是历代帝王朝拜之山。建庙塑像，刻石题字，留下了众多文物古迹。小标题、图片和文字并列排放。标题跨2列小标题居中限定图片大小6.2网页的结构与内容网页的结构与内容 HTML553华南理工大学计算机公共基础教研室1.新增的主体结构article元素nav元素 该元素专门用于定义页面上的“导航条”，包括上方的“主导航条”、侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等。例如：canvasHTML5新结构元素video 和audio本地离线存储特殊内容元素新的表单控件6.2网页的结构与内容网页的结构与内
27、容 HTML554华南理工大学计算机公共基础教研室1.新增的主体结构aside元素该元素专门用于定义当前页面或当前文章的附属信息。例如：2.新增的非主体结构header 该元素主要为定义元素的“头部”信息。hgroup 该元素主要用于组织.的标题元素footer 主要用于为元素定义脚注部分Address 通常位于文档的末尾，用来在文档中呈现联系信息figure 该元素用于表示一块“图片区域”，该元素内部包含一个或多个canvasHTML5新结构元素video 和audio本地离线存储特殊内容元素新的表单控件6.2网页的结构与内容网页的结构与内容 HTML555华南理工大学计算机公共基础教研室2
28、.新增的非主体结构 例如，将如下代码插入内，在浏览器中打开该文件，效果如图所示。内容摘要内容摘要6.1 网页制作基础6.2 网页的结构与内容6.3 修饰美化网页修饰美化网页6.4 Adobe Dreamweaver CC 2017编辑环境56华南理工大学计算机公共基础教研室6.5 Adobe Dreamweaver 网页制作实例6.3 修饰美化网页修饰美化网页57华南理工大学计算机公共基础教研室 自CSS（Cascading Style Sheet，意为“层叠样式表”）以来，网页设计方式发生了很大的变化，过去网页外观的变化通过元素标签的属性来设定，现在已由CSS所取代。随着CSS的不断发展，样
29、式表的功能也更加充实、完善，设计者使用CSS实现修饰美化网页变得更加容易。网页能否给人留好印象，除思想内容外，还需美丽的视觉感受。页面视觉悦目、信息有条理、呈现动态显示效果，则能提高用户对网页的阅读兴趣及浏览效率。页面的视觉美感，除了要有好的创意和美术设计外，还需使用代码技术来实现其设计思想。样式表概述样式表概述华南理工大学计算机教学团队58 CSS是英文Cascading Style Sheet的缩写，意为“层叠样式表”。它能提供许多HTML无法支持的属性，例如网页的文字、图片、表格等，都可以使用CSS来美化，它与HTML标记嵌套在一起，能使网页产生不同的显示效果。美美 化化 网网 页页1
30、精精 简简 代代 码码2 维维 护护 方方 便便3使用使用CSS的的优点：优点：样式表样式表的基本格式的基本格式华南理工大学计算机教学团队59样式表格式样式表格式基本格式：选择符选择符 属性属性:属性值属性值 多属性格式：选择符选择符 属性属性1:属性值属性值1;属性属性2:属性值属性值2;.应用示例：p font-style:italic;color:red 属性与属性之间使用分号“;”间隔。样式表的创建与引用样式表的创建与引用1.样式表创建方式样式表创建方式2.样式表引用方式样式表引用方式3.CSS常用属性常用属性60华南理工大学计算机教学团队样式表样式表创建创建方式方式1（标记选择符标记
31、选择符）华南理工大学计算机教学团队61格式：标记名称标记名称 属性属性:属性值属性值应用示例：h3 color:red;p font-family:幼圆;color:#0000ff 定义三级标题为红色。定 义 段 落 为幼 圆 字 体、蓝色字。（1）定义标记选择符样式表样式表创建创建方式方式1（标记选择符实例标记选择符实例）华南理工大学计算机教学团队62 标记选择符样式表的创建与引用例示 h3 color:red;p font-family:幼圆;color:#0000ff 这是红色的标题 这是第一段文本，字体为幼圆，颜色为蓝色。这是第二段文本，和第一段文本一样都是使用相同的样式表。使用定义样
32、式表h3、p为标记选择符、以样式表定义的属性显示样式表样式表创建创建方式方式2（类选择符类选择符）华南理工大学计算机教学团队63格式：.类名称类名称 属性属性:属性值属性值应用示例：.text font-family:幼圆;.color color:#0000ff p.text font-family:幼圆;p.color color:#0000ff 自 定 义名 称 前面加“.”。“.”前面加p表示 此 样 式 只用于段落。（2）定义类选择符样式表样式表创建创建方式方式2（类选择符类选择符实例实例）华南理工大学计算机教学团队64 类选择符样式表的创建与引用例示 p.text font-fam
33、ily:幼圆 p.color color:#0000ff 第一段文本字体为幼圆 第二段文本颜色为蓝色 使用定义样式表p.text、p.color为 类 记选择符在标记中使用样式表定义的属性显示样式表样式表创建创建方式方式3（ID选择符选择符）华南理工大学计算机教学团队65格式：#ID名称名称 属性属性:属性值属性值应用示例：#p1 text-indent:3em;color:#00ff00#p2 text-indent:6em;color:#0000ff 自定义名称前面加“#”。（3）定义ID选择符样式表样式表创建创建方式方式3（ID选择符选择符实例实例）华南理工大学计算机教学团队66 ID选
34、择符样式表的创建与引用例示#p1 width:600px;height:100;background:#bbff88#p2 width:600px;height:150;background:#88bbff 这是第一段文本 这是第二段文本 定义区域范围定义区域底色样式表样式表引用引用方式方式1（嵌入式嵌入式）华南理工大学计算机教学团队67 嵌入式是把样式表嵌入文档头部内。前面所举之例都是把样式表嵌入在文档头部的 标记之间的，例如：（1）嵌入式嵌入式 h3 color:red;.text font-family:幼圆;color:#0000ff 样式表引用方式样式表引用方式1（嵌入式嵌入式实例）
35、实例）华南理工大学计算机教学团队68 样式表的创建与引用1（嵌入式）h3 color:red;.text font-family:幼圆;color:#0000ff 这是红色的标题 这是第一段文本，字体为幼圆，颜色为蓝色。这是第二段文本，没有引用样式表。样式表嵌入到中引用h3标记选择符引用.text类选择符没有引用样式表样式表引用方式样式表引用方式2（内联式内联式）华南理工大学计算机教学团队69 内联式是把样式表直接写在HTML标记内。（2）内联式内联式例如：说明：例中h3是HTML标记，style=.，是定义内联式样式表的格式，样式写在引号.内。样式表引用方式样式表引用方式（内联式内联式实例）
36、实例）华南理工大学计算机教学团队70 样式表的创建与引用2（内联式）这是第一段文本，字体为幼圆，颜色为蓝色。这是第二段文本，没有引用样式表。样 式 表 定 义在标记中。执行此标记时，引用定义的样式显示。此标记没有引用样式表。样式表引用方式样式表引用方式3（外部式外部式）华南理工大学计算机教学团队71 外部式是把样式表作为外部文件保存，后缀名为.css。CSS作为一个外部文件引入的方式有两种，一种是做链接，另一种是导入。两种外部引用方式的语句都是放在文件头标记中。（3）外部式外部式链接方式：import url(文件名.css)导入方式：样式表引用方式样式表引用方式3（外部式外部式）华南理工大学
37、计算机教学团队72整个运用过程如下：整个运用过程如下：1）首先定义样式表。如：h1 color:red;font-family:黑体 p text-indent:3em;color:#0000ff 2）命名以.css为后缀名的文件保存。如：teststyle.css3）引用：或者是 import url(teststyle.css);样式表引用方式样式表引用方式3（外部外部链接链接式式）华南理工大学计算机教学团队73 外部链接式引用示例 这标题用黑体红字显示 文本段落首行缩进3em，蓝色字体。这是外部链接式的引用例子。链 接 外 部样式表。执行这3个标记时，引用外部样式显示。h1 color:
38、red;font-family:黑体 p text-indent:3em;color:#0000ff 样 式 表 保 存 在teststyle.css文件中。样式表引用方式样式表引用方式3（外部外部导入导入式式）华南理工大学计算机教学团队74 外部导入式引用示例 import url(teststyle.css);这标题用黑体红字显示 文本段落首行缩进3em，蓝色字体。这是外部导入式的引用例子。导 入 外 部样式表。执行这3个标记时，引用外部样式显示。h1 color:red;font-family:黑体 p text-indent:3em;color:#0000ff 样 式 表 保 存 在t
39、eststyle.css文件中。CSS常用属性常用属性1.字体属性字体属性2.文本属性文本属性3.颜色与背景属性颜色与背景属性75华南理工大学计算机教学团队字体属性字体属性表表属性名属性值功能应用示例font-family字体名称设置字体p font-family:幼圆font-styleNormal、italic、oblique设置字体样式p font-style:italic font-sizept、px、in、cm、mm等设置字号大小p font-size:25pt font-weightNormal、bold、bolder、lighter、100900等设置字体粗细p font-wei
40、ght:bold font-variantNormal、small-caps设置字体变形p font-variant:small-caps76华南理工大学计算机教学团队 字体相关属性应用示例 p.sfont-size:20pt/*字号为20pt*/.fvfont-variant:small-caps/*小型大写字母*/.fffont-family:幼圆/*幼圆字体*/.fsfont-style:italic/*斜体字*/.fwfont-weight:bold/*粗体字*/使用默认字体的显示效果 html是英文 HyperText Markup Language 的缩写。加入字体样式的显示效果
41、html是 英文 HyperText Markup Language 的 缩写。/body字体属性字体属性的应用的应用华南理工大学计算机教学团队77文本属性文本属性表表属性名属性值功能应用示例text-alignleft、center、right、justify设置文字水平对齐p text-align:center vertical-aligntop、middle、bottom、super、sub设置文字垂直对齐td vertical-align:middle word-spacingnormal、长度单位设置单词间距p word-spacing:8pt letter-spacingnorma
42、l、长度单位设置字母间距p letter-spacing:4pt text-indent长度单位、百分比设置首行缩进p text-indent:30pt text-transformuppercase、lowercase、capitalze、none设置文字大小写ptext-transform:uppercase78华南理工大学计算机教学团队 文本属性应用示例 .hh letter-spacing:18pt/*字符间隔距离*/.tt font-size:16pt;/*文本字号大小*/text-align:left;/*文本向左对齐*/text-indent:30pt;/*文本首行缩进*/wor
43、d-spacing:8pt/*单词间隔距离*/使用默认文本的显示效果：上帝的盆景 HTML是英文 HyperText Markup Language 的缩写。加入文本样式的显示效果：上帝的盆景 HTML是英文 HyperText Markup Language 的缩写。文本属性文本属性的应用的应用华南理工大学计算机教学团队79颜色与背景属性颜色与背景属性表表属性名属性值功能应用示例color颜色值设置文本颜色p color:#00ff00 background-color颜色值设置背景颜色p background-color:#0088ffbackground-image图像文件设置背景图像p
44、 background-image:back.jpg 80华南理工大学计算机教学团队 例11.19 颜色与背景属性应用示例 bodybackground-color:#ddffee/*设置背景色*/tablebackground-image:url(黄山.jpg);/*设置背景图*/color:#000000;/*设置文本色*/font-size:16/*设置字号大小*/上帝的盆景 黄山可以说无峰不石，无石不松，无松不奇，并以奇松、怪石、云海、温泉四绝著称于世。颜色与背景属性颜色与背景属性的应用的应用华南理工大学计算机教学团队81内容摘要内容摘要6.1 网页制作基础6.2 网页的结构与内容6.
45、3 修饰美化网页6.4 Adobe Dreamweaver CC 2017编辑环境编辑环境82华南理工大学计算机公共基础教研室6.5 Adobe Dreamweaver 网页制作实例6.4 Adobe Dreamweaver CC 2017编辑环境编辑环境83华南理工大学计算机公共基础教研室 工作区工作区A.应用程序栏 B.文档工具栏 C.“文档”窗口 D.工作区切换器 E.面板 F.“代码”视图 G.状态栏 H.标签选择器 I.“实时”视图 J.工具栏6.4 Adobe Dreamweaver CC 2017编辑环境编辑环境84华南理工大学计算机公共基础教研室 文档工具栏文档工具栏 使用“文
46、档”工具栏包含的按钮，可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。如图 6.7所示。以下选项将显示在“文档”工具栏中：1.“代码”视图仅在“文档”窗口中显示“代码”视图。2.“拆分”视图在“代码”视图和“实时/设计”视图之间拆分“文档”窗口。流体网格文档无“设计”视图选项可用。3.“实时”视图是一个交互式预览，可准确地实时呈现 HTML5 项目和更新，以便在用户做出更改时显示用户的更改。4.“设计”视图显示文档的表现形式，以说明用户如何在 Web 浏览器中查看文档。6.4 Adobe Dreamweaver CC 2017编辑
47、环境编辑环境85华南理工大学计算机公共基础教研室 工具栏工具栏 工具栏垂直显示在“文档”窗口的左侧，在所有视图中可见。工具栏上的按钮是特定于视图的，并且仅在适用于用户所使用的视图时显示。例如，如果用户正在使用“实时”视图，则特定于“代码”视图的选项（例如“格式化源代码”）将不可见。6.4 Adobe Dreamweaver CC 2017编辑环境编辑环境86华南理工大学计算机公共基础教研室 状态栏状态栏 文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。A.标签选择器 B.“输出”面板 C.代码颜色 D.插入和覆盖切换 E.行和列编号 图 6.9状态栏6.4 Adobe Dreamwea
48、ver CC 2017编辑环境编辑环境87华南理工大学计算机公共基础教研室 属性检查器属性检查器 使用属性检查器（【窗口】【属性】），可以检查和编辑当前选定页面元素（如文本和插入对象）的最常用属性，如图 6.10所示。若要访问特定属性检查器的帮助，请单击属性检查器右上角的帮助按钮，或者从属性检查器的“选项”菜单中选择“帮助”。内容摘要内容摘要6.1 网页制作基础6.2 网页的结构与内容6.3 修饰美化网页6.4 Adobe Dreamweaver CC 2017编辑环境88华南理工大学计算机公共基础教研室6.5 Adobe Dreamweaver 网页制作实例网页制作实例华南理工大学计算机公共
49、基础教研室89效果图效果图内容摘要内容摘要901.前期工作前期工作2.建立和管理站点建立和管理站点3.设计网站主页设计网站主页4.制作网站导航栏制作网站导航栏5.修饰美化页面修饰美化页面6.填写页面内容填写页面内容7.制作次级页面制作次级页面8.发布网页发布网页知识点知识点 网站制作的基本流程 Dreamweaver制作网站的操作91使用的使用的工具工具92关键流程关键流程-1 建立站点建立站点 设计主页设计主页美化页面美化页面 关键流程关键流程-2 填写页面内容填写页面内容制作次级页面制作次级页面 测试并发布测试并发布 网站制作前期工作网站制作前期工作多媒体技术及应用新建站点新建站点多媒体技
50、术及应用设计制作主页设计制作主页-新建网页新建网页多媒体技术及应用设计制作主页设计制作主页-新建层新建层多媒体技术及应用设计制作主页设计制作主页-插入第一个表格插入第一个表格多媒体技术及应用设计制作主页设计制作主页-插入第二个表格插入第二个表格多媒体技术及应用设计制作主页设计制作主页-插入第三个表格插入第三个表格多媒体技术及应用设计制作主页设计制作主页-设置第一个表格属性设置第一个表格属性多媒体技术及应用设计制作主页设计制作主页-插入插入各种对象各种对象多媒体技术及应用设计制作主页设计制作主页-修改页面属性修改页面属性多媒体技术及应用制作网站导航栏制作网站导航栏多媒体技术及应用修饰美化页面修饰
