HTML5网页制作技术第4章 文本
手把手教你制作HTML5网页
手把手教你制作HTML5网页随着互联网的发展，各种网页应运而生，现在已经成为人们必不可少的信息来源工具。
而网页制作也逐渐成为一项重要的技能。
在本篇文章中，我们将一步步教你如何制作HTML5网页。
HTML5是最新的HTML标准，是用于展示网页内容的基本语言。
因为它的功能更加强大，适应性更强，所以被越来越多的人所青睐。
为了制作HTML5网页，我们需要掌握一些基本技能和工具。
1. HTML5语言基础在制作HTML5网页之前，我们需要了解HTML5的基础语言。
HTML5包括标记、元素和属性。
其中标记是HTML的基本语言结构，元素是标记和内容的结合体，属性是指定元素的特定信息的关键字。
在HTML5中，用于定义HTML文档的标记是“<! DOCTYPE HTML>”。
然后，计算机就知道我们正在使用HTML5。
然后，我们在“<html>”标记内输入HTML5网页的基本信息，如网页标题等。
2. 利用文本编辑器在制作HTML5网页时，需要使用一些文本编辑器，如Notepad++或Sublime Text等。
当你打开一个文本编辑器时，可以选择“新建文件”，然后输入“<! DOCTYPE HTML>”开始制作HTML5网页。
为了使网页更好看，我们需要添加些样式。
这里可以使用CSS （层叠样式表），CSS用于控制HTML文本内容的布局和样式。
它与HTML5结合使用可以使网页看起来更加美观。
3. 增加网页内容在HTML5网页制作中，你可以添加各种内容，如文本、图像、表格和视频等。
这需要我们掌握一些标签。
比如在添加文本时，我们可以使用“<p>”标签。
如果要插入图片，我们使用“<img>”标签。
表格使用“<table>”标签，视频使用“<video>”标签。
除此之外，我们还可以使用超链接来将网页链接到其他网页或文件。
为此，我们可以使用“<a>”标签，并使用“href”属性指定要链接的目标。
项目四(网页文本、图像与多媒体)
（7）text-align属性用于设置文本的水平对齐方式。属性值有4个，left是默认值，表示左对齐；right表示右对齐； center表示居中对齐；justify表示两端对齐。
（8）text-decoration属性用于设置文本划线。属性值有4个，none表示默认效果；underline表示下划线效果； overline表示上划线效果；line-through表示贯穿线效果。
（9）text-indent属性用于设置文本的缩进。属性值为表示缩进大小的数值与单位（一般为em，表示一个字符）。
（10）text-shadow属性用于设置文本阴影。该属性有4个值，依次为h-shadow、v-shadow、blur与color。 其中，h-shadow表示阴影的水平偏移量，v-shadow表示阴影的垂直偏移量，这两个属性值都可以为负值，0
border-radius属性用于设置元素的圆角。属性值为数值加单位，设置该属性时可
03 以直接在属性后输入属性值（表示同时设置四个方向角的圆角），也可以在下方
的矩形元素示意图上设置特定方向角的圆角。
CSS3中新增了一些属性用于设置元素的变形与过渡效果，从而展示动画效果，提升页面趣味性。
01 变形:在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等变形效果。属性值有以下几种:
各级别标题标签与段落标签的页面效果
3．文本格式化标签
HTML5中提供了一些文本格式化标签，如<strong>（粗体）、<em>（倾斜）标签，使Dreamweaver CC添加这两种标签的方法如下:
01 打开本书配套素材“项目四”→“任务一”文件夹，右击“ex1.html”文件，在弹出的快捷菜单中选择
HTML5完整教程
HTML5完整教程HTML5是HTML（超文本标记语言）的第五个版本，它不仅为网页开发者提供了更多的功能和选项，还增加了许多新的元素和属性。
与之前的HTML版本相比，HTML5更加强大灵活，并且能够更好地满足现代网页的需求。
首先，我们来了解一下HTML5的基本结构。
一个HTML5文档以<!DOCTYPE html>开始，这是必须包含的声明，它告诉浏览器使用HTML5的解析模式。
接下来的部分是html元素，它是文档的根元素。
整个网页的内容都位于html元素中。
在html元素内部，有两个主要的部分：head元素和body元素。
head元素用于定义网页的一些元信息，比如标题、字符编码等。
body元素则用于定义网页的实际内容，比如文本、图片、链接等。
HTML5引入了许多新的元素，这些元素使得网页的结构更加语义化，并且能够更好地描述网页的内容。
比如，我们可以使用<header>元素定义网页的头部，<nav>元素定义导航栏，<article>元素定义一个独立的文章，<footer>元素定义网页的底部等等。
这些元素不仅使得网页的结构更加清晰，而且对于引擎的优化也非常有帮助。
总结一下，HTML5是一种强大、灵活的标记语言，用于编写现代网页。
它引入了许多新的元素、属性和功能，使得网页的结构更加清晰、语义化，并且能够更好地满足现代网页的需求。
在使用HTML5构建网页时，我们应该遵循最佳实践，编写语义化的、可访问的代码，并进行优化，以提高网页的性能。
希望这篇HTML5教程能够为您提供一些帮助。
《HTML5完整教程》课件
制作一个简单网站注 册页面
学习如何设计和实现一个用户 注册页面。
制作一个简单网页动 态效果
使用JavaScript和CSS3为网页添 加动态效果和交互性。
结束语
1 HTML5的未来
展望HTML5的发展前景和可能的趋势。
2 学习建议和资源推荐
提供给学习者关于深入学习HTML5的建议和推荐资源。
3 答疑时间
多媒体元素
学习如何在HTML5中嵌入视频、 音频和Canvas。
第四章 CSS3新特性
1 CSS3介绍
了解CSS3的功能和应用领域。
2 盒模型
深入了解CSS3盒模型的各个方面，包括边框、填充、外边距等。
3 文字样式
探索CSS3提供的新的文字样式特性，如文pt基础语法
Web Workers
探索Web Workers如何提供多线程编程能力。
Web Socket
学习使用Web Socket实现实时通信和数据传输。
WebGL
了解WebGL的基本原理和在浏览器中展示3D图 像的方法。
第七章 HTML5实战案例
制作一个简单网站
使用HTML5和CSS3创建一个功 能丰富的静态网站。
《HTML5完整教程》PPT 课件
在这份《HTML5完整教程》的PPT课件中，我将向大家介绍HTML5的各个方 面，包括概述、基础语法、新增元素、CSS3新特性、JavaScript基础语法、高 级技术和实战案例等内容。
第一章 HTML5概述
HTML5介绍
了解HTML5的定义、用途和优势。
HTML5特性
1
JS脚本位置
学习如何在HTML文档中嵌入JavaScript代码。
第4章 【HTML5入门精通实战教程】HTML5文档标签
浏览器显示效果：
4.8 footer元素
1、footer元素的使用说明 （1）<footer> 标签定义文档或节的页脚。页脚通 常包含文档的作者、版权信息、使用条款链接、 联系信息等等。 （2）离body最近的footer表示整个页面的页脚。 （3）不能将footer元素嵌套在header、address里。 Footer里不能嵌套header或另一个footer。 （4）footer可以嵌套在article中，作为文章的页 脚，可以放置文章作者及联系方式。联系信息 放在address中。 2、举例
浏览器显示效果：
浏览器显示效果：
4.8 main元素
1、main元素的使用说明 （1）<main> 标签规定文档的主要内容。 （2）<main> 元素中的内容对于文档来说应当是 唯一的。在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后 代：<article>、<aside>、<footer>、<header> 或 <nav>。 2、举例：
4.5 article元素
代码：
<body> <header> <nav> <ul> <li><a href=“#”> 首页 </a></li> <li><a href=“#”> HTML5 </a></li> <li><a href=“#”> CSS3 </a></li> </ul> </nav> </header> <article> <h1> HTML5介绍 </h1> <p> HTML5是HTML的最新版本 </p> <p> HTML5增加了很多新的语义标签 </p> <h2> CSS3介绍 </h2> <p> CSS3是CSS的最新版本 </p> <p> CSS3增加了很多新的功能 </p> </article> </body>Leabharlann 4.8 main元素代码：
《HTML5开发指南》
《HTML5开发指南》HTML5开发指南HTML是一种标记语言，用于创建网页。
它在过去几十年中一直是Web开发的基础。
随着时间的推移，HTML不断进化，引入了新的特性和功能，成为了今天众所周知的HTML5标准。
HTML5标准是一种全新的Web开发技术，它可以让Web开发者更加轻松地创建响应式设计、多媒体和互动应用等。
在本篇文章中，我们将向您介绍HTML5的一些基本概念和新特性，以及如何使用这些新特性来创建各种Web应用。
我们将介绍HTML5的一些新元素和属性，如何创建动画和游戏，以及如何使用Web存储和Web Workers等功能优化性能。
我们还将介绍在Web应用中使用多媒体和地理位置等方面的开发技术。
新标签和属性HTML5为Web开发者提供了一些新的标签和属性，使页面构建更加灵活和易于维护。
以下是一些新标签和属性的示例：1. nav - 用于定义导航链接部分。
2. article - 用于定义文章部分。
3. section - 用于定义一个页面的段落或部分。
4. time - 用于定义日期和时间。
5. required - 用于定义表单元素是否必填。
动画和游戏除了新的标签和属性之外，HTML5还引入了一些新的API，使Web开发更具有互动性和动感。
Canvas API是HTML5中最值得关注的API之一，它提供了一个2D绘图表面，让开发者可以基于像素绘制各种图形，例如：图表、图像等。
WebGL则允许开发者使用3D图形和硬件加速在Web上创建复杂的动画和游戏。
另外还有Audio和Video API，它们允许多媒体的播放和处理，这让开发者能够更易于控制音频和视频的播放。
优化性能与其他语言、框架相比，HTML5可以让开发者创建更快、更流畅的Web应用。
一些优化技巧包括使用Web存储和Web Workers。
Web存储可以让Web 应用程序缓存和访问数据，而Web Workers则允许开发者在后台线程中处理任务，不会影响到Web UI的运行效率。
HTML5+CSS3 Web前端设计基础教程(第4章)
4.3 控制图像和颜色
此处图片通过横向 平铺实现效果。此 外，同时设置图像 高度，如果不设置， div元素内又没有内 容将容器撑起来， 将无法显示背景图 片 此处图片设置了跟 随滚动条滚动的效 果，即便不设置， 浏览器默认状态就 是滚动效果
图4-15 背景色、背景图预览效果
此 处 为 box 容 器同时设置背 景图和背景色
此处文本溢出，文 字折返到下一行
此列表项内容超出了容器设 置的范围，出现了省略标记
图4-7 文本溢出处理预览效果
4.2 控制超链接
4.2.1 文本链接、邮件链接与锚链接 4.2.2 CSS伪类与超链接 1．什么是CSS伪类 伪类的语法形式为：
选择符：伪类 { 属性: 属性值; }
表4-3 常见的伪类及其含义 伪类 :link、:visited、:hover、:active :focus :not(s)（CSS 3新增） :root（CSS 3新增） :first-child :last-child（CSS 3新增） :nth-child(n) （CSS 3新增） 解释 设置超链接被访问前后的4个状态样式。 设置对象在成为输入焦点时的样式。 匹配不含有s选择符的元素。 匹配某一个元素在文档的根元素。 匹配父元素的第一个子元素。 匹配父元素的最后一个子元素。 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
4.1 控制文本
1．font-family（字体类型） 2．font-size（字号大小）
3．font-style（字体风格）
标题设置固定字号， 字体风格为斜体
此行设置为“宋体” 此行设置为“华文彩云 此行设置为“微软雅黑”
图4-3 字体类型、字号和风格预览效果
此行设置为“黑体”， 字号大小为父级的 80%
网站建设与网页制作_第四章_HTML超文本标记语言
网站建设与网页制作
4.2
插入图像
背景图案的设定
在网页中除了用一种单一的颜色作背景外，还可以用 图像平铺的方法制作背景。图像平铺就是把一张小的图像 在屏幕上一个一个地拼接起来，构成一个屏幕的完整的背 景。定义背景图像的语法格式如下： <body background="image-URL"> 其中，“image-URL”指图像的位置。 在建立这种形式的背景之前，首先要确定所选定的图 案能否看上去无痕迹地连接在一起，或者能否产生一种较 好的背景效果。 用平铺图像作背景，将极明显地降低网页的显示速度。 唯一的解决办法就是尽量使用小的图像文件，如果可能的 话则不用。
网站建设与网页制作
4.2
插入图像
图像使用原则
在使用图像的问题上，网页的制作者可能会与浏览者产生一些 矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像， 使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不 耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方 法来缓解这个矛盾： 1．在设计网页时，应该反复斟酌哪些图像必须要，哪些图像 可在可无，对于那些不是必需的图像，要舍得忍痛割爱； 2．把图像尽量做得小一点，小图像在网上的传输速度比较 快， 这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸 比较小，也可以通过减少图像颜色使图像文件减小；
网站建设与网页制作
4.3
插入表格
设置表格边框的尺寸border
设置边框尺寸的语法如下： <table border="数值"> border属性的参数值是数字，表示表格边框宽度所占 的像素点数。例如，<table border=10>表示表格的边框 宽度为10个像素点。
html5教程txt
html5教程txtHTML5教程HTML5是一种用于构建和展示网页内容的标准。
它是最新版本的HTML（超文本标记语言）标准，为网页设计师和开发人员提供了更多功能和选项。
本教程将向您介绍HTML5的基本概念和语法，并逐步引导您创建各种网页元素和效果。
第一部分：HTML5基础1. HTML简介HTML是一种标记语言，用于描述网页的结构和内容。
它由一系列的标签组成，每个标签都有不同的作用和功能。
2. HTML5新特性HTML5引入了许多新特性，包括音频和视频嵌入、画布绘图、地理位置定位、本地存储等。
这些新特性大大增强了网页的交互性和多媒体表现能力。
3. HTML5文档结构一个HTML文档由DOCTYPE声明、html元素、head元素和body元素组成。
DOCTYPE声明指定了文档使用的HTML版本，html元素是整个文档的根元素，head元素包含了文档的元信息，body元素包含了网页的主要内容。
第二部分：HTML5元素和属性1. 标题和段落使用h1到h6元素来定义标题，使用p元素来定义段落。
2. 链接和图像使用a元素创建链接，使用img元素插入图像。
可以通过href属性指定链接的目标URL，通过src属性指定图像的源文件。
3. 列表和表格使用ul、ol和li元素创建无序列表和有序列表，使用table、tr、th和td元素创建表格。
4. 表单和输入元素使用form元素创建表单，使用input元素创建各种输入元素，如文本框、单选框、复选框、下拉列表等。
第三部分：HTML5样式和布局1. CSS和HTML使用CSS（层叠样式表）来控制网页的外观和布局。
可以通过内联样式、内部样式表和外部样式表来定义样式。
2. CSS选择器使用CSS选择器来选择网页中的元素并应用样式。
常见的选择器包括标签名选择器、类选择器、ID选择器和属性选择器。
3. 盒模型和布局每个HTML元素都被视为一个矩形的盒子，盒模型定义了元素的尺寸、边距和内边距。
网页设计与制作(附微课视频 第2版)参考答案
第一章习题参考答案一、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B二、简答题1．答：URL是UniformResourceLocation的缩写,译为“统一资源定位符”，URL是Internet 上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等；2答：文本、图像、动画、视频等。
3.答：网页结构语言的作用是将网页需要的内容以结构化、模块化的方式总结和存储，供表现语言和行为进行调用。
网页结构语言包括可扩展超文本标记语言XHTML 1.0和HTML 5等两种结构语言。
其中，XHTML 1.0为当前被广泛使用的标准，而HTML 5标准则是网页未来将被使用的标准。
网页表现语言的作用是为网页的结构语言定义尺寸、位置、背景，以及文本的各种效果。
目前网页表现的国际标准语言为CSS样式表技术。
网页结构语言和网页表现语言共同作用可以为用户呈现网页的整体画面，然而，网页是一种交互性的媒体，其除了可以呈现内容外，还可以根据用户的界面操作响应各种事件，此时，就需要用到网页的行为语言。
网页的行为语言包括多种类型，例如，JavaScript、JScript以及VBScript等。
4.答：一个完整的HTML5文档包含声明、头部和主体三个部分组成。
第二章习题参考答案一、选择题1.A、B2.A3.B4.D5.D6.D7.C二、简答题1．答：（一）网站功能需求分析；（二）网站的策划，本阶段主要包含网站栏目，内容，产品提炼等等；（三）网站设计，根据策划开始进行设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在大自然中比比皆是，同时也是版式设计常用的构成形式。
对称的形式给人以稳定平衡的感觉，但也容易流于刻板、单调。
html5 教程 文档
html5 教程文档HTML5教程HTML5（超文本标记语言5）是目前最新版本的HTML标准，它引入了很多新的元素和特性，使得网页开发变得更简单和强大。
本文将介绍HTML5的一些基础知识和常用的特性。
HTML5的优点：1. 更简单的语法：HTML5提供了更简洁的语法规则，使得开发人员可以更轻松地编写和维护代码。
2. 更强大的多媒体支持：HTML5引入了<video>和<audio>标签，使得在网页中播放视频和音频变得非常简单，不再需要借助第三方插件。
3. 更好的兼容性：HTML5加强了与不同浏览器的兼容性，使得网页在不同平台和设备上都能够正确显示和运行。
4. 更多的交互元素：HTML5引入了一些新的元素，如<canvas>、<svg>和<progress>等，使得网页开发可以实现更多的交互效果，并丰富了用户体验。
5. 更好的搜索引擎优化：HTML5提供了更多的标记和元素，有助于搜索引擎更好地理解和解析网页内容，提高搜索排名。
常用的HTML5标签和特性：1. 语义化标签：HTML5引入了一些新的语义化标签，如<header>、<nav>、<section>、<article>和<footer>等，用于更好地描述页面的结构，提高可读性和可访问性。
2. 视频和音频标签：使用<video>和<audio>标签可以在网页中嵌入视频和音频，同时提供了丰富的控制接口，如播放、暂停、调整音量等。
3. 表单元素：HTML5引入了一些新的表单元素，如<input type="date">、<input type="email">和<input type="range">等，使得表单输入更方便和友好。
html5 web 教程
html5 web 教程HTML5是一种用于创建网页和应用程序的标记语言。
与之前的HTML版本相比，它引入了许多新功能和特性，使得开发者能够更好地构建富媒体内容和交互性。
在本教程中，我们将介绍HTML5的基本概念、语法和常用标签，帮助你逐步入门开发。
HTML5标签是HTML文档的构建块，它们告诉浏览器如何显示内容。
最常见的HTML5标签之一是`<html>`标签，它是所有HTML元素的容器。
在`<html>`标签内，你需要添加`<head>`和`<body>`标签，分别用于定义文档的头部和主要内容。
在`<head>`标签内，你可以添加页面的标题、样式表链接、脚本引用等。
例如，`<title>`标签用于定义页面的标题，`<link>`标签用于引入样式表，`<script>`标签用于引入JavaScript代码。
在`<body>`标签内，你可以添加页面的实际内容。
常用的HTML5标签包括`<h1>`到`<h6>`用于定义标题，`<p>`用于定义段落，`<a>`用于创建链接等。
另外，HTML5还引入了一些新的语义化标签，如`<header>`、`<footer>`、`<nav>`、`<article>`、`<section>`等，用于更好地组织内容结构。
除了基本的标签和结构，HTML5还引入了许多新的功能和API，如视频和音频播放、本地存储、绘图等。
其中，`<video>`和`<audio>`标签用于嵌入视频和音频，你只需要指定视频或音频的来源链接即可。
HTML5还提供了`<canvas>`标签，用于动态绘图和图形处理。
你可以使用JavaScript与`<canvas>`标签一起使用，实现各种效果和动画。
HTML5+CSS3网页设计与制作实用教程单元4 表单应用与制作注册登录页面
【任务4-1-1】创建电脑版用户注册网页
4．在网页中插入表格 在网页040101.html 的表单域中插入一个9 行3 列的表格，该表格的id 设置为“table01”， “宽”设置为“700 像素”，“边框”设置为“1”，“填充”设置为“3”，“间距”设置为
“0”，“ 对齐”方式设置为“居中对齐”，对应的【属性】面板如图4-6 所示。
图4-9 单行文本域的“属性”设置
【任务4-1-1】创建电脑版用户注册网页
5．插入单行文本域
如果在文本框【属性】面板中的“类型”选项组中选择“密码”单选按钮，则文本框将 转换成密码框，密码框和文本框的设置完全一致，只是在浏览时，密码框中输入字符时，字符 将自动以符号“*”或“ · ”显示，文本内容被隐藏，从而起到保密作用。 在“密 码：*”行的第2 个单元格中和“再次输入密码：*”行的第2 个单元格中分别插 入1 个“单行文本域”，这两个文本框的类型为“密码”，“最多字符数”设置为“16”，名
【任务4-1-1】创建电脑版用户注册网页
表单域的属性设置完成后，其【属性】面板如图4-5 所示。
图4-5 表单域的属性设置
对应的HTML 代码如下所示：
<form action="register.aspx" method="post" name="form1" target="_blank" id="form1"> </form>
2．插入表格域 一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要 放入这个框内才能起作用。如果看不见插入到页面中的标记表单域的红色虚线区域，则可以选
择菜单命令【查看】→【可视化助理】→【不可见元素】，使红色虚线可见，如图4-4 所示。
Dreamweaver CC网页设计课件第4章第2节
第4章 表单
4.2 新知解析
1.插入表单 2）用鼠标单击红色的虚线选中表单，可在属性面板中设置表单的各项属性。
4.2
第4章 表单
4.2 新知解析
1.插入表单 •ID：标识该表单的唯一名称，命名表单后就可以使用脚本语言（如 JavaScript 或 VBScript）引用或控制该表单。 •Class：在该下拉列表中可以选择已经定义好的类CSS样式应用。 •Action：该选项用来设置处理这个表单的服务器端脚本的路径。如果希望该表单通过Email方式发送、而不被服务器端脚本处理，需要在“Action”后填入“mailto”和E-mail地 址。
4.10
第4章 表单
4.2 新知解析
3. 插入密码域 密码域与文本域的形式是一样的，只是在密码域中输入的内容会以星号或圆点的方式显 示。若要插入文本域，请执行以下操作。 1）将光标放在表单域内，单击菜单命令“插入”→“表单”→“密码”，或单击“插 入”面板“表单”选项下的“密码”图标。 2）选中该对象，在属性面板中，根据需要设置密码域的属性。
4.20
第4章 表单
4.2 新知解析
7. 插入单选按钮与单选按钮组 •“名称”：文本框中输入该单选按钮组的名称。如果希望这些单选按钮将参数传递回 服务器，则这些参数将与该名称相关联。 •“单选按钮”：单击加号 按钮向单选按钮组添加一个单选按钮，如果需要，可以为新 按钮输入标签和选定值。单击向上或向下箭头重新对这些按钮排序。 •“布局，使用”：可以使用换行符或表格来设置这些按钮的布局。如果选择表格选项， 则 Dreamweaver CC创建一个单列表，并将这些单选按钮放在左侧，将标签放在右侧。
4.7
第4章 表单
4.2 新知解析
html第四章
4.2.1 背景图像
Dreamweaver可视化实现 可视化实现 “修改”----“页面属性”----“背景图像”----“确定”----“查 看源码”。 <style type="text/css"> //<head>中填写 <!-body { background-image: url(bg.gif); } --> </style>
4.1.3 链接颜色 链接颜色包括超级链接的颜色，访问过的链接的 颜色，激活的链接的颜色。 HTML代码实现 代码实现 <body link=”#006699” alink=”#33ccff” vlink=”#cccccc”> Link指还没有单击过的所有链接的颜色； Alink指激活链接颜色； Vlink指已经单击过的所有链接的颜色。
4.4 设置页面的跟踪图像
Dreamweaver可视化实现 可视化实现 “修改”----“页面属性”----“跟踪图像”分 类----设置图像----设置透明度----“查看”下 “跟踪图像”子菜单选择“显示”----“查看” 下“跟踪图像”子菜单选择“对齐所选范围” 对齐左上角----“查看”下“跟踪图像”子菜 单选择“调整位置”（按shift+键盘移5像素） ----“查看”下“跟踪图像”子菜单选择“重 设位置”----查看效果。
4.1.3 链接颜色
CSS代码实现 代码实现 <style type="text/css"> <!-a:link { color: #000000; } //正常状态下链接文字的 外观 a:visited { color: #0099FF; } //访问过的链接外观 a:hover { color: #0066cc; } //鼠标放置在链接文字之 上时文字的外观 a:active { color: #0000CC; } //鼠标单击时链接的外 观 --> </style>
HTML第4章
b.Html c.html同样 同样
纵向排列多个窗口
<Html> <Head> <Title> 横向排列多个窗口 </Title> </Head> <Frameset cols="25%，50%，25%"> ， ， <Frame src="a.html"> <Frame src="b.html"> <Frame src="c.html"> </Frameset> </Html>
<frame marginwidth=# marginheight=#> 用来设定各窗口的上下左右边界宽度
各窗口间空白区域的设置
<Frameset rows="30%，70%" bordercolor="red" framespacing=20> ， <Frame src="a.html"> <Frameset cols="20%，80%" bordercolor="black" framespacing=40> ， <Frame src="b.html"> <Frame src="c.html"> </Frameset> </Frameset>
网页设计第4章
第4章定义与美化网页在Dreamweaver 8中，使用HTML标签和CSS级联样式可以很方便的进行文本格式化。
HTML（HyperText Markup Language）即超文件标签语言是一种用来制作超文本文档的简单标签语言。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。
在文本菜单中的命令以及在属性面板中的操作都可以使用标准HTML标签来实现文本格式化。
自定义CSS级联样式可以制作出特殊效果的文本格式。
有了CSS 级联样式的控制，所制作的网页便会给人一种赏心悦目、条理清晰的感觉，同时字体色彩的变化也使网页变得更加生动活泼。
Dreamweaver 8提供的新的、统一的CSS面板，将所有CSS的功能都整合到一个面板设置上，同时增加其性能，以便轻松而有效地使用CSS。
新的界面可以更容易地看清应用于某个具体元素的层叠样式，也易于识别属性定义的位置。
本章学习目标：HTML基础HTML信息CSS样式基础自定义CSS样式4.1 HTML基本结构HTML语言是超文本标签语言（HyperText Markup Language）的缩写。
它是一种描述文档结构的语言，而不能描述实际的表现形式。
HTML语言使用描述性标签来标明文档的第4章第4章定义与美化网页103不同内容。
标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的结构，如段落、标题和列表等。
标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。
用HTML语言编写的网页是普通的文本文档，不含任何与平台和程序相关的信息，它们可以被任何文本编辑器读取。
HTML文档包含两种信息：一种是页面本身的文本；另一种表示页面元素、结构、格式和其他超文本链接的HTML 标签。
4.1.1 HTML基本样式4.1.2 标签4.1.3 排版标签4.1.4 字体标签表4-1标题等级表4-2 常用的字体样式标签<I> </I> 斜体<U> </U> 加下划线<TT> </TT> 打字机字体<BIG> </BIG> 大型字体<SMALL> </SMALL> 小型字体<BLINK> </BLINK> 闪烁效果<EM> </EM> 表示强调，一般为斜体<STRONG> </STRONG> 表示特别强调，一般为粗体<CITE> </CITE> 用于引证、举例，一般为斜体104网页设计三剑客（Studio 8）标准教程表4-3 字体颜色的名称及十六进制数4.1.5 列表4.2 课堂练习4-1：丰富多彩的网页制作有价值的网页，首先要有丰富的内容在里面，其次要有亮点，能够不断地吸引来访问者进行浏览。
HTML5文本
HTML5文本1.1.1 标题和正文标题是网页信息的提纲。
标题分为6级，分别使用<h1><h2><h3><h4><h5><h6>标签进行标识，按照语义的轻重分别为h1到h6, 它们包含的重要性递减。
h1表示最重要的信息，h6表示最次要的信息。
示例:<h1>书籍</h1><h2>科技</h2><h3>《计算机应用》</h3><h2>人文</h2><h3>《明朝那些事儿》</h3>h1,h2,h3比较常用，一般文档的层级在三级左右。
不要使用h1-h6标记副标题，副标题一般应该使用段落或其它标题元素。
1.1.2段落网页正文主要通过段落文本来表现。
使用<p>标签定义段落文本。
默认情况下，段落文本前后合计显示约一个字距的间距。
1.2 描述性信息HTML5提供了两个强调内容的语义标签。
strong表示重要，em表示着重，语气弱于strong。
示例: <p><strong>请不要大声喧哗</strong>特别是在<em>图书馆</em></p>strong文本以粗体显示，em文本以斜体显示。
1.2.2 注解small元素表示注解，形式类似于细则，旁注，适用于标记行内文本，不适用段落文本等大块文本。
<dt>单人间</dt><dd>599</dd><small>含早餐</small><dd>299</dd><small>不含早餐</small>1.2.3 备选b: 表示出于实用目的提醒注意的文字，不传达额外的重要性，用于关键词，产品名等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
B. <p><b>文章标题</b></p>
B. <h1>文章标题</div>
D.<strong>文章标题</strong>
2、如果想要实现粗体效果，我们可以使用（ ）标签来实现。
A. <strong></strong>
B. <em></em>
C. <sup></sup>
D.<sub></sub>
3、下面有关自闭合标签说法不正确的是（区别 ➢ 掌握标题标签、段落标签、文本标签等 ➢ 掌握自闭合标签的特点 ➢ 掌握块元素和行内元素的区别 ➢ 了解网页特殊符号
4.1 文本简介
• 在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、 h5、h6。其中h是“header”的缩写。
4.7 自闭合标签
• 在HTML中，标签可以分为2种：（1）一般标签；（2）自 闭合标签
• 一般标签：由于有开始符号和结束符号，因此可以在内 部插入其他标签或文字
• 自闭合标签：由于只有开始符号而没有结束符号，因此 不可以在内部插入标签或文字。所谓的“自闭合”，指 的是本来要用一个配对的结束符号来关闭，然而它却 “自己”关闭了
4.9 特殊符号
• 在HTML中，如果想要显示一个特殊符号，也是需要通过 代码形式来实现的
• 网页特殊符号对应的代码，都是以“&”开头、并且以“;” （英文分号）结尾的
• 我们只需要记住一个：
练习题
一、单选题
1、选出你认为最合理的定义标题的方法是（ ）。
A. <div>文章标题</div>
A. 自闭合标签只有开始符号没有结束符号
B. 自闭合标签可以在内部插入文本或图片
C. meta标签是自闭合标签
D. hr标签是自闭合标签
4、在浏览器默认情况下，下面有关块元素和行内元素说法不 正确的是（ ）。
A. 块元素独占一行
B. 块元素内部可以容纳块元素
C. 块元素内部可以容纳行内元素
D. 行内元素可以容纳块元素
4.8 块元素和行内元素
• 在HTML中，根据元素的表现形式，一般可以分为2类：块元素、 行内元素
• 块元素的特点： （1）块元素独占一行，排斥其他元素（包括块元素和行内元素）
与其位于同一行； （2）块元素内部可以容纳其他块元素和行内元素；
• 行内元素的特点： （1）行内元素可以与其他行内元素位于同一行； （2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素；
• 这6个标题标签在页面的重要性是有区别的，其中h1标签 的重要性最高，h6标签的重要性最低。
• 一个页面一般只能有一个h1标签，而h2~h6标签可以有多 个
4.2 标题标签
• 不是“会动”的页面就叫动态页面，静态页面和动态页 面的区别在于：是否与服务器进行数据交互。以下4种情 况不一定是动态页面：
5、下面标签中，哪一个不是块元素？（ ）
A. strong
B. p
C. div
D. hr
二、编程题
1、使用这一章学到的各种文本标签，把下图所示的网页效果 做出来。
重点掌握：strong、em、sup、sub
4.5 水平线标签
• 我们可以使用“hr标签”来实现一条水平线。hr， “horizon（水平线）”的缩写。
4.6 div标签
• div，全称“division（分区）”，用来划分一个区域 • div标签最重要的用途：划分区域，然后结合CSS针对该区
域进行样式控制。
➢ 带有音频和视频 ➢ 带有Flash动画 ➢ 带有CSS动画 ➢ 带有JavaScript特效
【疑问】网页不是有title标签来定义标题了吗？为什么还要用 h1标签呢？ • title标签和h1标签是不一样的。title标签用于显示地址栏的
标题，而h1标签用于显示文章的标题
4.4 文本标签
• 粗体标签：strong、b • 斜体标签：i、em、cite • 上标标签：sup • 下标标签：sub • 划线标签：s、u • 字号标签：big、small