第2章 网页元素的添加
网页设计与制作教程——Web前端开发(第6版)课件第2章 块级元素2.5
2.5 分区元素div
<div>标签的格式为： <div id="控件id" class="类名">文本、图像或表格</div>
【例2-18】使用<div>标签组织网页内容，本例文件2-18.html在浏览器中显示 的效果如图2-18所示。
2.5 分区元素div
<!DOCTYPE html> <html>
生园地 院系新闻</p> <hr />
</div>
2.5 分区元素div
教研室组建而成。...</p>
</div> </body> </html>
<div id="main" class="main_news"> <h4>院系概况</h4> <p>计算机科ead> <meta charset="utf-8"> <title>div元素示例</title>
</head> <body>
<div class="page"> <div id="head" class="header"> <h1>计算机科学学院网站</h1> <hr /> </div> <div class="nav"> <p>院系首页 院系概况 教学工作 学
第2章 网页设计与制作-HTML语言基础
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
4添加网页元素 教学设计
八年级信息技术教学设计课题：《添加网页元素》执教：一、教材分析：设计制作一个精致、美观的网页，必须要有精彩有内容，内容的类型包括文字、图片、背景、背景音乐和其它组件，本节主要是将搜集的文字等素材插入到网页中。
二、学情分析学生了解如何用表格进行网页的布局，并且会进行复制、粘贴等基本操作并会进行格式设置。
三、教学目标：知识与技能：1、掌握如何在网页中添加文字、图片。
2、学会给网页添加背景、背景音乐。
3、能够添加字幕、视频等动感元素。
过程与方法：通过添加网页元素，丰富网页的内容，完成网页的制作过程。
情感态度与价值观：通过制作网页，对前面的知识进行回顾，培养学生的综合思维能力和逻辑思维能力。
通过实践尝试，培养学生操作能力和技巧。
四、教学重点与难点：重点是如添何加网页元素。
难点是网页元素格式的设置。
五、教学策略:每个小组按照前面网页的布局及栏目规划，收集相应的素材内容，参照具体方法和步骤，添加网页元素，并且进行格式设置，完成网页的制作。
六、教学过程七、板书设计：添加网页元素1、添加文字、图片2、添加背景和背景音乐3、添加字幕和视频八、教学反思：1、由于课堂时间有限，若用大量时间让学生收集资料，则无法完成任务。
为了使学生能有更多时间学习网页设计，教师可以事先多准备一些各种类型的素材，以方便学生查找和使用。
2、在教学中，教师可以要求学生设计的网页内容不同，但网页设计的基本要求要与教师的教学要求一致，保证教学内容落实到位。
3、添加字幕和视频时有部分计算机可能无法操作，让学生实现小组合作操作，合作探究共同提高的效果。
Dreamweaver-CS6网页制作第2章
后退
定义在新建样式表文件
结束
2.2使用CSS规则美化文本
（2）单击“确定”按钮，弹出如下图所示的对话框
，定义样式文件名称为“mycss”保存在站点目录
“D:\mysite”文件夹中。
目录
前进
后退
保存新样式表文件“mycss”
结束
2.2使用CSS规则美化文本
（3）单击“保存”按钮，弹出“CSS规则定义”对 话框，保持默认值，单击“确定”按钮。在“属性 ”面板中，定义“title2”样式，大小为“16px”、 目录 颜色为“#960”、“粗体”，效果如下图所示：
中选择“D:\mysite\images\flying.gif”图像文件，
单击“确认”按钮，图像插入后通过标签编辑器将
“对齐”属性设置为“右”。
调整大小：宽度 为215像素，高 度为160像素
前进
后退
设置图像大小
结束
2.3添加图像
（4）使用快捷键插入图象：将插入光标移动到“立
志飞翔”部分的第五段文字“但我”前，使用组合 目录
对话框中选择“D:\mysite\images\flying.gif”图像
文件，单击“确认”按钮，图像插入后通过标签编
辑器将“对齐”属性设置为“左”。
前进
调整大小：宽度 为285像素，高 度为213像素
设置图像大小
后退 结束
2.3添加图像
（3）使用“插入”菜单插入图象：将插入光标移动
到“立志飞翔”部分的第三段文字“听着”前，选 择“插入”栏“常用” 类别中的 按钮，在对话框 目录
达到如图所示的效果，还要对“自我介绍”的内容
后退
制作列表，要在文档中添加水平线，编辑网页的外
网页设计模块四 插入网页元素及超链接
任务一 设置页面的相关属性
步骤4 选择“链接”选项卡。如图4-2 所示。
图4-2 链接选项卡
任务一 设置页面的相关属性
信息卡
(1)“链接字体”：设置链接文字的默认字体，设置方法与页面字体 的设置方法相同。 (2)“大小”：设置链接文字的大小，与页面文字的大小设置方法完 全相同。 (3)“链接颜色”、“交换图像链接”、“已访问链接”、“活动链 接”：设置链接4种不同状态的颜色。这4种状态分别是：正常状态、 鼠标滑过状态、访问过的状态、鼠标单击时的状态。 (4)“下划线样式”：设置链接文字下面的下划线样式。系统提供了4 种样式，分别是“始终有下划线”、“始终无下划线”、“仅在变 换图像时显示下划线”、“变换图像时隐藏下划线”。
任务一 设置页面的相关属性
步骤5 选择“标题”选项卡。如图4-3所示。 “标题”选项卡中可以定义应用在具体文档中各级不同标题上的一种“标题字 体样式”。而不是指页面的标题内容。在分类中可以定义“标题字体”及6 种 预定义的标题字体样式，包括粗体、斜体、大小和颜色等。操作步骤同前面类 似，在此不再叙述。
步骤７ 选择““跟踪图像”选项卡。如图4-5所示。 “跟踪图像”是用于网页中元素定位的图像，该图像只是在编辑网页时提供参照， 起到辅助编辑的作用，最终不会显示在浏览器中，所以，并不能等同于背景图像。
图4-5 跟踪图像选项卡
任务一 设置页面的相关属性
信息卡
选择跟踪图像时，可以单击后面的〖浏览〗按钮，从系统中寻找图像 文件作为跟踪图像。 还可以设置跟踪图像的透明度，滚动条最左端是透明，最右端是不透 明，可以用鼠标拖动滑块来进行调整。
图4-3 标题选项卡
任务一 设置页面的相关属性
步骤６ 选择“标题/编码”选项卡。如图4-4所示。 这里的“标题”是页面的标题内容，可输入和首页相关的文字内容，它将
为网页添加元素
链接命名锚记
创建好锚记之后，必须创建对应的 超级链接源端点。
创建空链接
要想对文本设置行为，首先必须为文本建立空超级 链接（空超级链接是一个未指派目标的超级链接）， 这样行为才会有效。 为文本建立空超级链接时，只要先在文档窗口中选 中需要建立空超级链接的文本，然后在属性面板的“ 链接”文本框中输入一个“#”符号即可。建立空超级 链接的目的只是为了应用行为，其他情况下不必建立 。
为网页添加元素
插入Flash动画 插入视频 插入音频 插入导航条 插入超链接
向网页中插入Flash动画
在“常用”插入栏中单击“媒体”按钮，在弹出的快捷 菜单中选择“Flash”命令。
使网页中的动画透明
在网页中插入一个层，然后为层设置背景图像，接着再 在层中插入Flash动画，并通过参数设置使Flash动画透 明。 1. 插入-布局对象-层 2. 设置背景图像，调节大小 3. 在层中插入一个Flash动画，调节大小 4. 选中动画，设置参数“Wmode”值为“Transparent”
创建文本超级链接
文本超级链接是最常见的超级链接，通过使用鼠标 点击文本即可从一个网页跳转到另一个网页。
为一般图像创建超级链接
创建锚链接
创建命名锚记
链接命名锚记
创建命名锚记
在制作网页时，为了达到跳转到网页固定位置的 目的，可以使用锚链接。通过对网页中指定位置的 命名，利用超级链接打开目标网页时可直接跳转到 相应的命名位置上。
超级链接分类
绝对超级链接
文档相对路径 站点根目录相对路径
绝对超级链接
绝对超级链接就是形如 “http://www.china/zh_cn”的超级链接地址，它给出了 超级链接目标端点完整的URL地址，包括使用的协议 “http://”。一般用于创建站外具有固定地址的超级链 接。
第二章 网页设计语言_Html
标题标记用于设置文档中的标题，其中
<H1>...</H1>标记表示字体最大的标题，
<H6>…</H6>标记表示字体最小的标题。
每个标题标记所标记的字句将独占一行且上下留下一空 白行。
演示：Sample2_4.htm
水平线的插入 <hr>标志是在Html文档中加入一条水平线。
COLOR属性
设置水平线的颜色，例如<HR color=red>
2.5.1 在网页中插入图像
演示：Sample2_13.htm、Sample2_14.htm
2.5.2
播放多媒体文件
Img标记不仅用于在网页中插入图像，也可以用
于播放多媒体文件（.avi）。若要在网页中播放多媒
体文件，应在IMG标记中设置以下属性： DYNSRC：指定要播放的多媒体文件的URL。 START：指定何时开始播放多媒体文件，其取值可 以是fileopen或mouseover。
二、创建无序列表 使用UL和LI标记来创建，语法格式如下：
<UL>
<LI>列表项1
…… <LI>列表项n </UL>
UL标记的TYPE属性用于指定列表项前面显示的项目 符号，其取值可以是：
disc：使用实心圆作为项目符号（默认值）。
circle：使用空心圆作为项目符号。 square：使用方块作为项目符号。 演示：Sample2_10.htm
<P align=“center”> 演示：Sample2_7.htm 、Sample2_8.htm
二、换行标记<BR> 大多数情况下，段落标记<P>是分隔文本的最佳
FrontPage2000网页制作
FrontPage2000网页制作考试大纲第1章网页编辑一、内容提示本章主要介绍网页的基本知识，包括网页的基本组成元素， FrontPage 2000的基本操作，以及利用字体、段落、水平线、背景作为修饰方法，制作一个简单而美观的页面。
二、考试基本要求（一）掌握的内容掌握FrontPage 2000的基本操作，能够新建网页或网站，打开网页或网站，保存网页或网站；掌握预览网页、打印网页、字体操作、段落操作、使用项目符号和编号的方法；能够使用背景，添加水平线。
第2章网页中添加图形一、内容提示丰富多彩的网页离不开各种图片，本章介绍如何在网页中添加图片，并通过设置图片格式、添加背景图像起到美化网页的效果。
二、考试基本要求（一）掌握的内容掌握插入图片、调整图片大小、设置图片对齐方式、设置图片间距的方法、使用背景图片的方法；掌握使用图片工具栏进行网页的设计方法。
（二）熟悉的内容能够指定文本以代替图形显示；熟悉设置图片边框属性、在图片上放置文本、以及图片的定位方法。
第3章超级链接一、内容提示超级链接是网页中“超文本”、格式的重要内容，本章介绍如何建立文本、图像、电子邮件形式的超链接，设置超链接的相关属性，以及如何使用热点和一些利用超链接组织网站结构的技巧。
二、考试基本要求（一）掌握的内容掌握超级链接中链接到网页、链接到本地文件的基本方法，能够创建指向新网页的超链接，链接到电子邮件的超链接；掌握对超链接进行编辑，如定义超链接的颜色，删除一个超链接；掌握为图形添加热点，使用文字热点的方法。
（二）熟悉的内容熟悉创建指向一篇Office文档的超链接、跟踪一个超链接的方法；熟悉突出显示图形上的热点的方法；熟悉创建一个书签、删除一个书签的方法。
第4章使用表格一、内容提示除了绘制可见表格，网页中还可以通过表格定位网页元素，因此，在较复杂的网页布局设计中，表格起着重要的使用。
本章将介绍表格的相关操作和属性设置和如何使用表格来定位网页元素。
第2章 网页元素的添加1 文本和页面属性 课件
1. 水平线颜色的修改 可以通过设置HTML代码修改水平线颜色。选中水平条，切换到代码视图，找到反白
显示的代码“<hr>”。将光标移到字母“r”后边按空格键，出现属性提示，鼠标在属性中双 击“color”，接着在颜色提示中单击需设定的颜色即可。按F12可在浏览器中观察水平条的 颜色改变情况。
（1）HTML属性
•
：选中要设置的段落文本，单击项目列表 和编号列表 ，则可为文本添加项目列
表和编号列表。若要调整列表的外观，可将光标移至列表中的任一位置，单击属性
面板中的选中要设置的段落文本，单击项目列表 和编号列表 ，则可为文本添加项目
列表和编号列表。若要调整列表的外观，可将光标移至列表中的任一位置，单击属
选中第4、5、6段文字，单击项目列表按钮 ，添加项目列表符号。属性面板如图213所示。将光标移到第3段落开始位置，按住Ctrl+Shift +空格键插入空格，共按4次，使 得段落首行缩进2个字。
2.13
第2章 网页元素的添加
2.1 文本和页面属性
2.1.1 案例制作：网页“藏獒鉴赏”部分正文
2.14
2.1.1 案例制作：网页“藏獒鉴赏”部分正文
7）单击“字体”右侧的下拉列表，选 择“管理字体”选项。在弹出的“管理 字体”对话框中切换到“自定义字体堆 栈”选项卡，在“可用字体”列表中选 择“隶书”，单击 按钮 将字体 “隶属”添加到左侧的“选择的字体” 列表框中，单击对话框上部的 按钮， 再在“可用字体”中选择“宋体”，单 击 按钮 添加字体。同样的，单击 对话框上部的 按钮，再在“可用字 体”中选择“楷体”，单击“完成”按 钮退出对话框。此时隶书、宋体、楷体 被添加到字体列表中了。
认识HTML和CSS网页设计语言
认识HTML和CSS网页设计语言第一章：HTML的介绍和基本语法HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它包含一系列的标记，这些标记用于描述网页的结构和内容。
HTML的基本语法由标签、元素和属性组成。
1.1 标签HTML中的标签是一对尖括号包围的关键字，它们定义了元素的开始和结束。
例如，<head>和</head>标签用于定义网页的头部部分。
1.2 元素在HTML中，元素是由起始标签、内容和结束标签组成的。
起始标签用于定义元素的开始，结束标签用于定义元素的结束。
元素的内容位于起始标签和结束标签之间，可以包含文本、图片、链接等。
1.3 属性HTML中的属性用于为元素提供额外的信息。
属性通常包含在起始标签中，由属性名和属性值组成。
例如，<imgsrc="image.jpg">中的src属性指定了图片的链接地址。
第二章：HTML常用标签和属性2.1 文本标签HTML中的文本标签用于定义文本的样式和结构。
常用的文本标签包括<p>（段落）、<h1>-<h6>（标题）、<strong>（加粗）、<em>（斜体）等。
2.2 图片标签图片标签用于在网页中插入图片。
<img>标签是HTML中用于插入图片的标签，它需要指定图片的链接地址、宽度、高度等属性。
2.3 链接标签链接标签用于创建网页之间的链接。
<a>标签用于定义链接，它需要指定链接的目标地址，可以是其他网页、文件或者锚点。
2.4 列表标签列表标签用于创建有序或无序的列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表，<li>标签用于定义列表项。
第三章：CSS的介绍和基本语法CSS（Cascading Style Sheets）是用于描述网页样式的语言。
第2章 网页版设设计与色彩搭配[101页]
![第2章 网页版设设计与色彩搭配[101页]](https://img.taocdn.com/s3/m/ce6257985fbfc77da269b1e9.png)
2.2 学习任务：网页版式设计
9．三角型 网页各视觉元素呈三角形排列。正三角形（金字塔
型）最具稳定性，倒三角形则产生动感。侧三角形构 成一种均衡版式，既安定又有动感。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
《网页设计与制作案例教程》（第3版）
2.1 案例分析：不同风格网页作品欣赏与解析
网页作品欣赏之四：苹果公司网站首页
《网页设计与制作案例教程》（第3版）
2.1 案例分析：不同风格网页作品欣赏与解析
网页采用四横的骨骼式设计，整体色彩采用黑白灰 色调。从色彩及版式看，网站秉承了苹果创始人乔布 斯的极简风格，苹果在网页设计上并没有花费太大笔 墨。骨骼式架构是公司网站通用的架构，容易被浏览 者接受，黑白灰是永恒的时尚色。中间大块区域被主 打商品占据，产品宣传意图明显。可见，无论从版式 还是配色，无处不透露着苹果公司的文化氛围和价值 理念，很容易被苹果的粉丝所认可。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
2.2.3 网页的版式设计风格
1．骨骼型
是一种规范的、理性的分割方法，类似报刊的版式。 骨骼型又称为分栏式。常见的骨骼有竖向通栏、双栏、 三栏、四栏和横向的通栏、双栏、三栏和四栏等。一 般以竖向分栏为多。这种版式给人以和谐、理性的美。 几种分栏方式结合使用，既理性、条理，又活泼而富 有弹性。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
2.2.1 版式设计概述 网页的版式设计，是指在有限的屏幕空间内，根据
网页主题诉求，将网页元素按照一定的艺术规律进行 组织和布局，使其形成整体视觉印象，最终达到有效 传达信息的视觉设计。它以有效传达信息为目标，利 用视觉艺术规律，将网页的文字、图像、动画、音频 、视频等元素组织起来，充分体现了网页整体风格。
网页设计(CS5)-第3讲-向网页中添加元素
网页设计·第2讲
3 在网页中添加图片
想一想：相同的图片，不同的图片格式，大小会不会相同？
网页设计·第2讲
3 在网页中添加图片
想一想：相同的图片，不同的图片格式，大小会不会相同？
网页设计·第2讲
3 在网页中添加图片
想一想：相同的图片，不同的图片格式，大小会不会相同？
网页设计·第2讲
3 在网页中添加图片
用途：大量用于网站的图标Logo、广告条Banner及网页背景 图像。但由于受到颜色的显示，不适合用于照片级的网页图像。
网页设计·第2讲
3 在网页中添加图片
网页中常用的图片格式
.JPEG格式
特点：可以高效地压缩图片的数据量。使图片文件变小的同时 基本不丢失颜色画质。
用途：通常用于显示照片等颜色丰富的精美图像。
添加空格
输入法切换到半角状态，按空格键只能输入一个空格； 如果需要输入多个连续的空格可以通过以下几种方法来实现：
（1）菜单“插入”→HTML→特殊字符→不换行空格 （2）直接按“Ctrl+Shift+Space”组合键
（3）菜单“编辑”→设置软件首选参数→允许连续空
格
网页设计·第2讲
1（1）菜单“插入”→HTML→特殊字符→不换行空格
要信息的传播，是信息的主要载体。同时为了使页面美观整齐，
还需要对输入的文本进行修饰和排版。 •如果在页面中要输入的文本较少，可直接通过键盘输入文本， 若是在其他位置存在的大段文本内容则可以通过复制、粘贴或 导入的方式来完成 。 •无论是直接输入文本还是从外部导入，都需要先在网页中单 击一次鼠标来定位，即指定文本开始的地方，对于表格性的文
网页设计·第2讲
2 编辑文本
第2章 网页元素的添加4 翻转图和Flash对象 课件
第2章 网页元素的添加
2.4 翻转图
2.4.4 实战演练：网站“闪闪作坊”页眉局部
4）光标移到第1行左侧单元格中，插入图像为image/fm01.gif。光标移到第2行中间单元格 中，单击菜单命令“插入”→“图像”→“鼠标经过图像”插入翻转图像，在对话框中设 原始图像为image/fm02.gif，鼠标经过图像为image/fm02x.gif。光标移到第2行右侧单元格中， 插入图像为image/fm03.gif。
2.23
第2章 网页元素的添加
2.5 Flash对象
2.5.4 实战演练：网页“蝴蝶谷”页眉部分
7）将光标移到第1行单元格中。单击菜单命令“插入”→“媒体”→“Flash SWF （F）”，打开“选择文件”对话框，找到image/mu.swf，单击“确定”按钮，于是 在单元格中插入Flash的SWF文件。选中SWF文件，在属性面板中单击Wmode的下 拉列表选择“透明”，按F12预览Flash背景是否透明。
5）将光标向左移动、移到字符“<td”的后面，按空格键会出现属性下拉列表，鼠标 双击背景图像属性“background”。接着系统会出现如图2-86所示的代码，并出现文 件浏览按钮，单击该浏览按钮，指定背景图像为image/tou.jpg。此时代码如图2-87所 示。
2.21
第2章 网页元素的添加
2.13
第2章 网页元素的添加
2.5 Flash对象
2.5.2 新知解析
1. 插入Flash的SWF动画 SWF动画文件插入后，选中SWF文件，可通过SWF属性面板进行相关设置。可设置
SWF动画的大小、对齐方式、与周围网页元素的边距、背景色等，可通过单击“播放”按 钮进行测试，也可通过wmode或“参数”设置SWF动画背景透明，详细设置方法请参照 “技巧提示”部分。当需要对SWF进行重新编辑时，可以单击“编辑”按钮启动Flash软件 对源文件进行编辑。
第2章-Photoshop网页版面制作 - 优秀教学样本
第2章Photoshop网页版面制作教学目标1.掌握使用photoshop制作网页中图形元素的技巧2.掌握使用photoshop进行整体版面的制作3.掌握photoshop切片工具的使用方法4.掌握photoshop与dreamweaver结合的方法教学要求2.1 网页图形元素的制作2.1.1 各式线条的绘制在网页中常使用线来分隔版面，或分隔导航条，是最常用的图形元素。
在photoshp中画线是使用画笔或铅笔工具来实现的。
1．画线选择photoshop工具箱中的画笔工具，并设置画笔的半径为1个像素，设置画笔硬度为0%，按住shift键拖动鼠标可绘制一条直线。
如要连续绘制多条直线，一定要在绘制后一直线前先选择其它工具，然后再选择画笔工具继续绘制，否则连续绘制会出现连笔现象如图2-1所示。
连笔图2-1 连笔现象2．画虚线画虚线和画直线一样也是使用画笔工具，不过要对画笔间距进行设置。
按下快捷键F5弹出画笔设置面板，对画笔的直径、硬度和间距进行设置，如图2-2所示，3．画凹凸线凹凸线在网页版面中最常见，对网页有着非常重要的点缀作用，如图2-3所示。
绘制的方法如下：首先绘制一条比背景色暗的直线，然后再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，然后两直线并列排，这样凹凸效果就出来了。
图2-3 凹凸线2.1.2 图案填充在网页的背景和Banner中经常会见到填充的各式图案，如点、方格子，横线、斜线、交叉线等等。
网页填充的背景图案往往要先自定义图案，然后再进行填充。
1．方格子的图案填充，如下图2-4所示。
图2-4 格子图案填充方法如下：(1)新建一40*40px大小，背景是透明的文件。
(2)使用单行与单列选框工具绘制两条线，如下图2-5所示。
图2-5 定制的图案(3)全选上图，选择菜单“编辑—定义图案”，图案定义好了。
(4)选择要填充图案的区域，选择菜单“编辑—填充”，并找到刚才定义的图案，如下图2-6所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1. 文本的属性面板 在文档窗口输入一段文字，此时属性面板变为文本属性面板， 在文档窗口输入一段文字，此时属性面板变为文本属性面板，可通过文本属性 面板对文本进行设定。 面板对文本进行设定。
2.4
第2章
网页元素的添加
2.1 文本和页面属性
2. 插入空格 在Dreamweaver中，无论按键盘上的空格键多少次，只能添加一个空格。若要添加 Dreamweaver中 无论按键盘上的空格键多少次，只能添加一个空格。 多个空格，一般采用按住Ctrl+Shift +空格键的方法 每按一次，添加一个空格。 空格键的方法， 多个空格，一般采用按住Ctrl+Shift +空格键的方法，每按一次，添加一个空格。
2.6
第2章
网页元素的添加
2.1 文本和页面属性
4. 特殊字符 当在网页中需输入一些特殊字符时，可单击菜单“插入” 当在网页中需输入一些特殊字符时，可单击菜单“插入”→“HTML” →“特殊字符” 选择相应选项。 →“特殊字符”→选择相应选项。 特殊字符
2.7
第2章
网页元素的添加
2.1 文本和页面属性
2.12
第2章
网页元素的添加
2.2 图像的插入和设置
3. 图像属性面板 在网页中用鼠标单击图像，则图像处于选中状态，四周出现控制柄， 在网页中用鼠标单击图像，则图像处于选中状态，四周出现控制柄，拖动柄可调整 图像大小，同时属性面板显示出与图像有关的属性设置。 图像大小，同时属性面板显示出与图像有关的属性设置。
第2章
网页元素的添加
学习目标
掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局
2.1
第2章
网页元素的添加
本章内容
2.1 文本和页面属性 2.2 图像的插入和设置 2.3 超链接的设置方法 2.4 翻转图 2.5 Flash对象 Flash对象
2.2
第2章
网页元素的添加
2.1 文本和页面属性
2.20
第2章
网页元素的添加
ቤተ መጻሕፍቲ ባይዱ
2.3 超链接的设置方法
（2）网页内的超链接 创建网页内超链接是通过使用“命名锚记”来完成的。 命名锚记链接” 创建网页内超链接是通过使用“命名锚记”来完成的。 “命名锚记链接”一般用 在单个网页篇幅较长，浏览者需要翻屏查看的情况下。 在单个网页篇幅较长，浏览者需要翻屏查看的情况下。 制作锚记链接，首先将光标移到需要插入锚点的位置，单击菜单“插入” 制作锚记链接，首先将光标移到需要插入锚点的位置，单击菜单“插入”→“命 名锚记”命令，在弹出的对话框中输入锚记名称，单击“确定”按钮， 名锚记”命令，在弹出的对话框中输入锚记名称，单击“确定”按钮，于是就添加了 然后再创建跳转到这些命名锚记的超链接。建立锚记链接的格式是“ 命名锚记 。然后再创建跳转到这些命名锚记的超链接。建立锚记链接的格式是“#锚记 名称”。 名称”
2.5
第2章
网页元素的添加
2.1 文本和页面属性
3. 页面属性的设置 当我们需要对网页的整体外 观进行设置时，可通过“ 观进行设置时，可通过“页面属 性”命令进行设置。在属性面板 命令进行设置。 中单击“页面属性”按钮， 中单击“页面属性”按钮，或单 击菜单“修改”→“页面属性” 页面属性” 击菜单“修改” 命令，出现页面属性对话框。 命令，出现页面属性对话框。在 “外观”选项下可以整体上对网 外观” 页中采用默认方式输入的文字的 字体、大小、颜色、页面背景、 字体、大小、颜色、页面背景、 边距等进行设定。 边距等进行设定。
2.1.1 案例制作：网页“藏獒鉴赏”部分正文 案例制作：网页“藏獒鉴赏”
通过本案例的操作，你将学会： 如何插入文本和设置文本的属性、 通过本案例的操作，你将学会： 如何插入文本和设置文本的属性、 如何插入网页背 景图像和设置项目列表。 景图像和设置项目列表。
2.3
第2章
网页元素的添加
2.1 文本和页面属性
2.10
第2章
网页元素的添加
2.2 图像的插入和设置
2.2.1 案例制作：网页“球星---亨利” 案例制作：网页“球星---亨利 亨利”
通过本案例的操作，你将学会：如何插入图像和设置图像属性、 通过本案例的操作，你将学会：如何插入图像和设置图像属性、如何设置网页背景颜 色、如何设置图像和文本的对齐方式和进行文本换行。 如何设置图像和文本的对齐方式和进行文本换行。
2.16
第2章
网页元素的添加
2.3 超链接的设置方法
2.3.1案例制作：网站“诗词大观” 2.3.1案例制作：网站“诗词大观”首页 案例制作
通过本案例的操作，你将学会：如何 通过本案例的操作，你将学会： 插入文本、图像和设置它们的属性、 插入文本、图像和设置它们的属性、如何 插入表格并借助表格进行文本和图像的定 如何建立锚记链接、电子邮件链接、 位、如何建立锚记链接、电子邮件链接、 绝对超链接、空连接。 绝对超链接、空连接。
2.17
第2章
网页元素的添加
2.3 超链接的设置方法
2.3.2 新知解析 2.3
1. 超链接的表现形式 （1）网页之间的超连接 （2）网页内的超链接 （3）E-mail链接 mail链接 （4）空链接和脚本链接 （5）图像热点链接
2.18
第2章
网页元素的添加
2.3 超链接的设置方法
（1）网页之间的超连接 要在网页中创建超链接，首先选中要创建链接的对象（文本、 要在网页中创建超链接，首先选中要创建链接的对象（文本、图像或其他页面对 然后可以通过以下3 象），然后可以通过以下3种方法创建超链接。 ），然后可以通过以下 种方法创建超链接。 在属性面板的“链接”文本框中输入目标对象的URL或路径。 或路径。 在属性面板的“链接”文本框中输入目标对象的URL或路径 拖动“链接”文本框后面的“指向文件”图标到“文件” 拖动“链接”文本框后面的“指向文件”图标到“文件”面板中的目标 对象上（默认使用相对路径）。 对象上（默认使用相对路径）。 单击“链接”文本框后面的“浏览文件”按钮，在打开的“选择文件” 单击“链接”文本框后面的“浏览文件”按钮，在打开的“选择文件” 对话框中选择链接对象，然后单击“确定”按钮。 对话框中选择链接对象，然后单击“确定”按钮。
5. 水平线 水平线主要用于分隔文档内容，使文档结构清晰，层次分明。单击菜单“ 水平线主要用于分隔文档内容，使文档结构清晰，层次分明。单击菜单“插 HTML” 水平线”命令，或单击插入面板组中“HTML” 入”→“HTML”→“水平线”命令，或单击插入面板组中“HTML”选项下的 按钮可插 入水平线，此时属性面板变为水平线属性面板，可对水平线的宽、高、对齐方式、阴影等 水平线属性面板， 对齐方式、 入水平线，此时属性面板变为水平线属性面板 可对水平线的宽、 进行设置。 进行设置。
2.11
第2章
网页元素的添加
2.2 图像的插入和设置
2.2.2 新知解析 2.2
1. 常见的图像类型和格式 目前已知的图像格式有几十种，但能在浏览器中显示的图像只有GIF、JPEG和 目前已知的图像格式有几十种，但能在浏览器中显示的图像只有GIF、JPEG和 PNG三种 而最常用的是GIF和JPEG两种 PNG三种，而最常用的是GIF和JPEG两种。 三种， 两种。 2. 插入图像 在插入图像前，应将图像与网页文件保存到同一文件夹。在网页中插入图像的方法 在插入图像前，应将图像与网页文件保存到同一文件夹。 如下。 如下。 将光标移到要插入图片的地方，选择“插入”→“图像”命令，打开“选择图像源 图像”命令，打开“ 将光标移到要插入图片的地方，选择“插入” 文件”对话框。选中需要插入的图像文件，单击“确定”按钮，打开“ 文件”对话框。选中需要插入的图像文件，单击“确定”按钮，打开“图像标签辅助功 能属性”对话框。输入所需的信息后，单击“确定”按钮， 能属性”对话框。输入所需的信息后，单击“确定”按钮，此时在文档窗口中将显示出 该图像。 该图像。
2.13
第2章
网页元素的添加
2.2 图像的插入和设置
宽和高：浏览器中为图像保留的宽度和高度，默认单位为像素。 宽和高：浏览器中为图像保留的宽度和高度，默认单位为像素。 源文件：指定图像的路径。 源文件：指定图像的路径。 链接：指定图像的超链接。 链接：指定图像的超链接。 替换：为图像添加注释。 替换：为图像添加注释。 编辑：单击其右侧的优化、裁剪、重新取样、亮度/对比度、 编辑：单击其右侧的优化、裁剪、重新取样、亮度/对比度、锐化等按 钮对图像进行处理， 钮对图像进行处理，也可以单击按钮打开指定的图像处理软件重新编辑 图像。 图像。 垂直边距：指定图像在垂直方向上与文本或其他网页元素的间距。 垂直边距：指定图像在垂直方向上与文本或其他网页元素的间距。 水平边距：指定图像在水平-方向上与文本或其他网页元素的间距。 水平边距：指定图像在水平-方向上与文本或其他网页元素的间距。 目标：指定链接时的目标窗口或框架。 目标：指定链接时的目标窗口或框架。 边框：指定图像边框的宽度 边框： 图像所处的段落在文档中的对齐方式。 图像所处的段落在文档中的对齐方式。 对齐：指定当前图像与旁边的文本的混排方式。 对齐：指定当前图像与旁边的文本的混排方式。 低解析度源：指定当前图像的低分辨率副本的路径。 低解析度源：指定当前图像的低分辨率副本的路径。 地图：用于制作图像热点链接。 地图：用于制作图像热点链接。 2.14
2.19
第2章
网页元素的添加
2.3 超链接的设置方法
设置完链接后，在属性面板的“目标”下拉列表框也变为可用状态。 目标” 设置完链接后，在属性面板的“目标”下拉列表框也变为可用状态。“目标” 下拉列表框中各选项的含义如下。 下拉列表框中各选项的含义如下。 _parent： _parent：在含有该链接的框架的父框架集或父窗口中打开目标文件。 _self：在该链接所在的窗口或同一框架中打开目标文件， _self：在该链接所在的窗口或同一框架中打开目标文件，此为默认选项。 _top：在整个浏览器窗口中打开目标文件，因而会删除所有框架。 _top：在整个浏览器窗口中打开目标文件，因而会删除所有框架。 _blank：在一个新的浏览器窗口中打开目标文件。 _blank：在一个新的浏览器窗口中打开目标文件。