第2章 网页中的文本与图像
第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">.
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）使用“插入”菜单插入图象：将插入光标移动
到“立志飞翔”部分的第三段文字“听着”前，选 择“插入”栏“常用” 类别中的 按钮，在对话框 目录
达到如图所示的效果，还要对“自我介绍”的内容
后退
制作列表，要在文档中添加水平线，编辑网页的外
网页设计课后习题答案
思考与练习答案第1章1、填空题：（1）文字、图片和超链接（2）“设计者”模式和“代码编写者”模式（3）“设计”视图、“代码”视图和“拆分”视图。
2、简答题（1）简述Drea mweav er 8的基本菜单的组成。
答：●【文件】菜单：包括对文件进行操作的标准菜单项，还包括各种其他命令用于查看当前文档或对当前文档执行的操作。
例如：【新建】、【打开】、【保存】、【在浏览器中预览】和【打印代码】等。
●【编辑】菜单：包括用对文本进行操作的标准菜单项，还包括选择和搜索命令。
例如：【剪切】、【拷贝】、【粘贴】、【选择父标签】和【查找和替换】等●【查看】菜单：可以看到文档的各种视图，并且可以显示和隐藏不同类型的页面元素以及不同的 Dreamw eaver工具。
●【插入】菜单：提供插入栏的替代项，以便用于将对象插入文档。
●【修改】菜单：可以更改选定页面元素或项的属性。
使用此菜单，可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
●【文本】菜单：可以轻松地设置文本的格式。
●【命令】菜单：提供对各种命令的访问。
●【站点】菜单：提供一些菜单项，这些菜单项可用于创建、打开和编辑站点，以及用于管理当前站点中的文件。
●【窗口】菜单：提供对 Dreamw eaver中的所有面板、检查器和窗口的访问。
●【帮助】菜单：提供对Dre amwea ver文档的访问，包括使用 Dreamw eaver以及各种语言的参考材料。
（2）简述插入面板所包含的选项卡的种类。
答：●“常用”选项卡：包含用于创建和插入最常用对象（如图像、表格）的按钮。
●“布局”选项卡：允许插入布局表格和图层两种方式，并且可以在两种视图之间进行选择。
●“表单”选项卡：允许插入制作页面表单的各个元素。
第二章 网页设计语言_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>是分隔文本的最佳
《DreamweaverCS5网页设计》课件
第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏 来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置Web应用程序 创建动态页 测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章 制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。 在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述 工作区中主要包括以下元素。 欢迎屏幕。 应用程序栏。 文档工具栏。 标准工具栏。 编码工具栏。 样式呈现工具栏 文档窗口 属性检查器 标签选择器 面板组 插入面板 文件面板
第1章目录
13／183
第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 版式设计概述 网页的版式设计，是指在有限的屏幕空间内，根据
网页主题诉求，将网页元素按照一定的艺术规律进行 组织和布局，使其形成整体视觉印象，最终达到有效 传达信息的视觉设计。它以有效传达信息为目标，利 用视觉艺术规律，将网页的文字、图像、动画、音频 、视频等元素组织起来，充分体现了网页整体风格。
第二章HTML基础
例：
无序列表
例：
有序列表
1. 计算机一班 2. 计算机二班
1.无序列表
无序列表由两个标记组成，语法如下：
<ul>
<li> <li> 计算机一班 计算机二班
</ul>
<ul></ul> 表示中间的内容为无序列表 <li> 表明为一个列表项
例：
<html><body> <ul> <li>第一章 <li>第二章 <li>第三章 </ul> </body></html>
问其它的信息资源。
HTML文件大致结构
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD>
<BODY>
网页的内容 </BODY>
</HTML>
一个完整的html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> </BODY> 运行结果 </HTML>
第2章 文字标签 段落标签 图象标签
（1）文字标记
在网页中我们所看到的文字属性可以分为：大小、颜色、字体等 这些属性其实都是由一个标签决定的： <font size="3" color="red" face="隶书">文字</font> size是用来定义字体的大小的,可以是“1-7” color是定义字体的颜色的 face是控制字型的，可选：宋体，黑体，隶书，arial,arial black等等。
使用 align 属性
注意：对于不同的标记符，默认的 align 属性值不同。P 和 Hn标记符 的默认 align 属性值是 left，而 HR 标记符的默认 align 属性值是 center。
② DIV 标记符与 CENTER 标记符 如果需要将多个段落使用相同的对齐方式，那么可以不必在每个段 落中设置 align 属性，而是使用 DIV 标记符将所有段落包括起来，然后在 DIV 标记符中设置 align 属性。例如，以下 HTML 代码将多个段落的内容 都设置为居中对齐，效果如图 所示。 <HTML> <HEAD><TITLE>使用 DIV 标记符</TITLE></HEAD> <BODY> <DIV align="center"> <H1 >浣溪沙</H1> <H4>晏殊</H4> <HR width="400">
第二章
文本标记 段落标记 图像标记
复习： 复习： 上节课我们已经讨论了HTML语言的基本原理并且使用记事本书写了一些 web页。同时也将网页设置背景颜色、背景图片等效果。其中，我们还设置 了文字的颜色，并且知道在<body>中所设置的是所以文字的颜色。今天我们 首先来看在网页中究竟如何设置文字的属性。
page第2章 基本操作
29第2章 文字与图形的基本操作通过本章，你应当学会：（1）文字输入。
（2）置入文本。
（3）导出文本。
（4）文字块控制。
（5）文字编辑器。
（6）绘制基本图形。
（7）图像置入与裁切。
在PageMaker 中，对文字的控制很方便，我们可以通过文字编辑器键入和编辑文字，也可以直接在页面中键入文字。
对文字的处理由所选择的工具决定，文字工具用来键入、编辑和修改文字；而指针工具可以编辑和修改文字段。
2.1 文 字 输 入文字的输入有两种方法：一是通过文字工具输入文字；二是通过文字编辑框输入文字。
2.1.1 直接输入文字在工具箱中选择文字工具，在页面任意位置点击鼠标，当出现插入点后，就可以输入文字了。
也可以直接在页面内拖拽鼠标画出一个矩形框，这时文字块的宽度就是矩形框的宽度。
文字键入完毕后，使用指针工具选中文字段，文字区域就会以文字块的形式显示出来。
文字段上下中心位置都有门状把手，上面的把手表示文字块的起始部分，下面的表示文字块终止位置。
如果下面的把手有红色三角形显示，表示文字块显示不完全，有一部分文字被隐藏了。
将鼠标放在红色三角形上，按住鼠标左键，这时鼠标指针变成双箭头状，开始拖拽，随着文字块高度的增加，被隐藏的部分就显示出来了。
文字块内容有隐藏的部分时，也可以将其放在另一个文字块内，操作步骤如下：（1）用指针工具选中文字块，然后单击文字块下面的红色三角形。
此时，鼠标显示为状，在页面目标位置单击鼠标左键。
（2）文字块的放置就完成了，这时候它们的文字是连续的。
说明：在文字块区域终止位置的把手中心会有一条十字线，表示此部分文字的未列入部分在另外一个文字块内；如果在文字块区域起始位置的把手中心有一条十字线，表示此部分文字的上面部分在另外一个文字块内。
使用鼠标拖拽十字线的把手，随着文字块区域的变化，里面的文字也随之变化，一个文字块中的文字减少，则另外一个文字块中的文字就会增加。
30PageMaker 6.5中文版实例教程（2）在弹出的“置入”对话框中选择需要置入的文本，如图2-1-2所示。
课后练习
《动画与网页制作》课后练习第一章网页制作基础判断正误（1）HTML标记符一般不区分大小写。
（对）（2）网站就是一个链接的页面集合。
（对）（3）将网页上传到Internet时通常采用FTP方式。
（对）（4）所有的HTML标记符都包括开始标记符和结束标记符。
（错）选择题（单选）（1）WWW是的意思。
答案：BA．网页B．万维网C．浏览器D．超文本传输协议（2）在网页中显示特殊字符，如果要输入“<”，应使用_________。
答案：D A．lt; B．≪ C．< D．<（3）浏览器是一种_________。
答案：BA．系统程序B．客户端程序C．服务器端程序D．编程工具填空题（1）如果要为网页指定黑色的背景颜色，应使用以下html语句：<body > 答案：bgcolor="black"（2）网页的扩展名通常是：答案：.htm或.html（3）要为网页添加背景音乐，应使用标记符。
答案：BGSOUND（4）BODY的属性用于设置未被访问过的超链接的颜色。
答案：link简答题（1）简要说明HTML 的基本工作原理。
综合题（1）编写一个能够显示背景图案并能播放背景音乐的网页。
（2）编写一个显示为如图所示的页面。
第二章文本与超链接判断正误（1）用H1标记符修饰的文字通常比用H6标记符修饰的要小（错）。
（2）B标记符表示用粗体显示所包括的文字。
（对）（3）使用FONT 标记符的size 属性可以指定字体的大小。
（对）（4）OL和LI标记符结合，可以创建无序列表，UL和LI 标记符结合可以创建有序列表。
（错）（5）在网页中创建超链接，其中URL 可以是相对地址或绝对地址。
（对）选择题（单选）（1）以下关于FONT标记符的说法中，错误的是：答案：D A．可以使用color 属性指定文字颜色。
B．可以使用size 属性指定文字大小（也就是字号）。
第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所示。
网页文档的编辑第2章
2．认识“文件”面板 认识“文件” 网站是多个网页、图像、动画和程序等文件有机联系的整体， 网站是多个网页、图像、动画和程序等文件有机联系的整体，要管理
项 目 2 网 页 文 档 的 编 辑
这些文件以及它们之间的联系，需要一个有效的工具， 文件” 这些文件以及它们之间的联系，需要一个有效的工具，“文件”面板便是 这样的工具。 文件”面板主要有三个方面的功能： 这样的工具。“文件”面板主要有三个方面的功能： （1）管理本地站点，包括建立文件夹和文件，对文件夹和文件进行 管理本地站点，包括建立文件夹和文件， 重命名等操作，也可以管理本地站点的结构； 重命名等操作，也可以管理本地站点的结构； （2）管理远程站点，包括文件上传、文件更新等； 管理远程站点，包括文件上传、文件更新等； （3）连接网络应用服务器，预览动态网页。 连接网络应用服务器，预览动态网页。 打开“文件”面板的方法：选择【窗口】菜单\ 文件】 打开“文件”面板的方法：选择【窗口】菜单\【文件】，或者按 【F8】键，即可显示“文件”面板。“文件”面板的组成如图2-1所示， F8】 即可显示“文件”面板。 文件”面板的组成如图2 所示， 在“文件”面板中显示了当前站点的内容。 文件”面板中显示了当前站点的内容。
步】按钮返回，进行更正。 按钮返回，进行更正。 核对无误后，单击【完成】 核对无误后，单击【完成】 按钮，结束“站点定义” 按钮，结束“站点定义”对话 框的设置。 框的设置。
8 / 178
至此， Dreamweaver中新建了一个静态站点：我的站点。 文件” 至此，在Dreamweaver中新建了一个静态站点：我的站点。“文件” 中新建了一个静态站点 面板中显示了刚才新建的站点，如下图左所示。 面板中显示了刚才新建的站点，如下图左所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页中最基本的元素为文本与图像,这两种 元素可以组成最简单的网页.文本可以直接在 Dreamweaver中创建与编辑,而图像既可以借助图像处 Dreamweaver中创建与编辑,而图像既可以借助图像处 理软件事先加以编辑,也可以在Dreamweaver中简单地 理软件事先加以编辑,也可以在Dreamweaver中简单地 进行编辑.为了配合网页的互动性,图像还以多种形式 出现在网页中.
图标 编辑 优化 裁剪
名称
功能描述 启动外部编辑器( 在首选参数中指定的图像编辑器) 启动外部编辑器 ( 在首选参数中指定的图像编辑器) , 打开 选定的图像开始编辑 在 【 图像预览】 对话框中 , 对不同格式的图像进行不同程度 图像预览 】 对话框中, 的优化 可让修剪图像的大小, 可让修剪图像的大小,从所选图像中删除不需要的区域 对已调整大小的图像进行重新取样, 对已调整大小的图像进行重新取样 , 提高图片在新的大小和 形状下的品质 修改图像中像素的亮度或对比度 调整图像的清晰度
10
2.3.1 插入普通图像
网页中最常见的图像是直接插入式图像, 该图像插入网页以后,在正常情况下不可以在相同 的位置输入文本,或者再次插入图像.还有一种是 为插入式图像做准备的图像,就是占位图像.占位 图像其实是图形,是在准备好将最终图像添加到 Web页面之前使用的图形. Web页面之前使用的图形.
编辑图 像按钮
17
2.4.2 图像编辑功能
Dreamweaver提供的基本图像编辑功能,可以 Dreamweaver提供的基本图像编辑功能,可以 直接在该软件中编辑图像,而无需使用外部图像编 辑应用程序(比如Fireworks).例如亮度和对比 辑应用程序(比如Fireworks).例如亮度和对比 度,锐化,裁切和图像的重新取样等.
13
2.3.4 插入导航条
导航条通常为在站点上的页面和文件之 间移动提供一条简捷的途径.虽然鼠标经过图像 也可以制作导航条,但是通过【插入】 也可以制作导航条,但是通过【插入】|【图像对 象】|【导航条】命令创建的导航条,可以包括4种 导航条】命令创建的导航条,可以包括4 状态:【状态图像】 状态:【状态图像】,【鼠标经过图像】,【按 鼠标经过图像】 下图像】 下图像】和【按下时鼠标经过图像】. 按下时鼠标经过图像】
3
2.1.1 输入各种文本
在网页中,文本以多种形式展示,来表达 不同的信息.最常见的为词组或者一句话,有时也 会出现注册商标或者版权符号等特殊符号等.下面 详细介绍各种类型的文本输入方法.
4
2.1.2 创建段落与列表
对于文字信息较多的网页,文本以段落形 式显示,使网页的美观,易读性大大增加.而文本 除了简单的文本段落,还有一种排列方式,就是项 目符号.数据信息以后者形式显示,能够更加快速 地被注意到.
开始计数 新建样式 重设计数
9
2.3 网页图像
网页中有了图像才显得生动,并且图像还具有 直观,生动的特点.图像还能够跨越语言,编码标 准,人种,地域和年龄的差异.但是图像的增加也 会使网页的下载时间大大增加,所以设计网页时要 整体考虑图像的数目和大小. 要使用图像制作出精美的网页,掌握图 像文件格式方面的知识是必不可少的.虽然存在着 很多种图形文件格式,但是在Web中,通常使用的 很多种图形文件格式,但是在Web中,通常使用的 只有GIF,JPEG/JPG,PNG三种文件格式,因为 只有GIF,JPEG/JPG,PNG三种文件格式,因为 大多数浏览器都可以支持他们.
文本【属性】 文本【属性】面板显示文档中所选文本的 当前格式属性.
格式
样式
CSS样式按钮
粗体
斜体
对齐方式
链接
目标 字体 缩进与凸 出
大小
文本颜色
项目列表
编号列表
列表项目
7
2.2.2 设置段落格式
输入文本后,还可以用对齐 段落来调整页面.要改变一个或多个段落在水平方 向上的对齐方式,首先用拖黑的方式选中这些段落, 然后在【属性】 然后在【属性】面板中单击不同的对齐按钮,即可 得到相应的显示效果.
15
2.4 图像属性
插入网页中的图像,在默认状态下使用的 是原图片的大小,颜色等属性.而根据不同的网页要 求,需要适当地重新调整图像属性.图像属性中既包 括基本属性,比如大小,对齐方式等,也包括改变图 像本身的属性,比如亮度/ 像本身的属性,比如亮度/对比度,锐化等.
16
2.4.1 图像基本属性
Dreamweaver中的【属性】 Dreamweaver中的【属性】面板是相对应的, 选中不同的元素会显示相应的属性参数.如果选中 图片后,【属性】 图片后,【属性】面板中就会显示该图片的各个属 性参数.
图像宽度和高 度 图像 名称
链接
源文件
文件夹图标
Hale Waihona Puke 描述性文字 类热区 创建 图像位置描述 目标浏览器 低分辨率源文件 边框 对齐方式
8
2.2.3 设置列表属性
创建的项目列表在默认情况下,以球形显示.要 想更改项目符号的形状,或者是将项目列表更改为编 号列表,单击【属性】面板中的【列表项目】 号列表,单击【属性】面板中的【列表项目】按钮 选 择并且修改即可.
选项 列表类型 含义 指定要创建的列表类型, 一共有4 类列表类型, 分别是【 项目列表】 指定要创建的列表类型 , 一共有 4 类列表类型 , 分别是 【 项目列表 】 , 【 编号列表 】 , 编号列表】 【目录列表】,【菜单列表】. 目录列表】 菜单列表】 确定用于编号列表或项目列表的编号或项目符号的样式. 所有列表项目都将具有该样式, 确定用于编号列表或项目列表的编号或项目符号的样式. 所有列表项目都将具有该样式, 除非为列表项目指定新样式.该项的下拉菜单中有3 除非为列表项目指定新样式.该项的下拉菜单中有3个选项 样式 默认 项目符号 正方形 使用默认设置类型 以球形作为项目符号 以一个实心正文形作为项目列表的符号 设置第一个编号列表项的值 指定所选列表项的样式. 新建样式 】弹出式菜单中的样式与 【 列表类型】 指定所选列表项的样式 .【 新建样式】弹出式菜单中的样式与【 列表类型】 弹出式菜单 中显示的列表类型相关. 例如, 如果【 列表项目】 弹出式菜单显示【 项目列表】 中显示的列表类型相关 . 例如 , 如果 【 列表项目 】 弹出式菜单显示 【 项目列表 】 , 则 【新建样式】弹出式菜单中只有项目符号选项可用. 新建样式】弹出式菜单中只有项目符号选项可用. 设置用来从其开始为列表项编号的特定数字
11
2.3.2 插入背景图像
提起背景图像,首先要介绍网页背景颜色, 这两者均属于网页页面属性中的选项之一.网页 背景颜色在默认情况下为白色,可以根据网页风 格随意设置网页背景颜色.方法是单击【属性】 格随意设置网页背景颜色.方法是单击【属性】 面板中的【页面属性】 面板中的【页面属性】按钮 ,设置【背景颜色】 ,设置【背景颜色】 选项即可.
14
2.3.5 插入分层图像
Dreamweaver CS3包括了与Photoshop CS3 CS3包括了与Photoshop 增强的集成功能,这样在Dreamweaver中就可以 增强的集成功能,这样在Dreamweaver中就可以 插入具有多个层次的图像.与Photoshop CS3相 插入具有多个层次的图像.与Photoshop CS3相 结合,还可以根据不同的情况插入选区图像或者 切片图像.
重新取样 亮度和对比度 锐化
18
2.5 课堂练习:制作诗歌目录 课堂练习:
制作图书目录一般在Word文档中创建, 制作图书目录一般在Word文档中创建, 但是在Dreamweaver中也可以制作图书目录,并 但是在Dreamweaver中也可以制作图书目录,并 且可以制作不同列表形式的目录,例如项目列表形 式,编号列表形式,定义列表形式,或者是混合嵌 套列表形式等.在制作过程中,只要掌握技巧,可 以非常快速地制作出图书目录.
5
2.2 文本属性
虽然在Dreamweaver中可以输入不同形式 虽然在Dreamweaver中可以输入不同形式 的文本,但是段落由文字组成,所以段落除了本身 的属性外,还包括文字属性.同样列表属性中除了 本身属性外,也包括文字属性与段落属性.三种形 式的文本其属性是可以穿插进行设置的.
6
2.2.1 设置字体属性
1
本章知识要点: 本章知识要点:
输入文本 创建段落 创建列表 插入普通图像 插入鼠标经过图像 插入导航条图像 插入分层图像
2
2.1 网页文本
文本是网页中不可缺少的内容之一,是网 页中最基本的元素.在一些大型网站中,文字的主 导地位是无可替代的.这是因为文字所占的存储空 间非常小,这样以文字为主体的页面下载速度很快, 可以最佳地利用网络带宽.而网页中的文本一般以 普通文字,段落或者各种项目符号等形式显示.
12
2.3.3 插入鼠标经过图像
鼠标经过图像是一种在浏览器中查看并使 用鼠标指针经过时发生变化的图像.若要插入鼠标经 过图像,必须具有两幅图像:主图像和次图像,并且 两幅图像尺寸相同.
选项名称 图像名称 原始图像 鼠标经过图像 预载鼠标经过图像 替换文本 按下时,前往的URL 按下时,前往的URL 作 用 鼠标经过图像的名称,名称是自定义的, 鼠标经过图像的名称,名称是自定义的,只要不与同页面另一个鼠标 经过图像名称相同即可. 经过图像名称相同即可. 页面开始显示的图像. 页面开始显示的图像. 鼠标经过的时候显示的图像. 鼠标经过的时候显示的图像. 启用该选项后,浏览网页时两个图片都同时被下载, 启用该选项后,浏览网页时两个图片都同时被下载,当鼠标经过时无 需从网上下载,而是调用预先下载的图像,减少延迟, 需从网上下载,而是调用预先下载的图像,减少延迟,使效果平滑流 畅 图像无法正常显示的时候出现的文本注释, 图像无法正常显示的时候出现的文本注释,也是图像正常显示时鼠标 指向链接时的说明. 指向链接时的说明. 单击鼠标后链接的目标