当前位置：文档之家 › 网页设计与制作第三章

网页设计与制作第三章

  • 格式：ppt
  • 大小：312.50 KB
  • 文档页数：38

下载文档原格式

  / 38

合集下载

Dreamweaver MX网页设计与制作 (3)

Dreamweaver MX网页设计与制作 (3)

第3章
设置子层,添加文本。并且将子层添加到时间轴上。打开【时间轴】 面板，按鼠标左键拖动子层，也就是Layer2，拖动到时间轴的合适 位置后，松开左键后则添加完毕
添加多个时间轴，并且重复以 上的步骤
第3章
3.9 时间轴与行为的结合：滑出式正文区
3.9.1 基本概念
时间轴和行为配合使用，可以制作互动性强，表现形式也 更为丰富的网页。现在制作“滑出正文区”来把这Dreamweaver 两大核心技术用到一起。
第3章
本章内容目录
3.9 时间轴与行为的结合：滑出式正文区 3.10 本章小结 3.11 本章习题
第3章
3.1 检查浏览器：自动链接主页
3.1.1 基本概念
Dreamweaver的行为是运行在网页浏览器中的Javascript代码，设计 者可以将这些行为放置在网页文档中。行为由事件和该事件所触发 的动作所组成，通过行为的设置可以方便浏览者与网页之间进行交 互。
第3章
插入JavaScript脚本。将光标重新置于右上角插入三个层的单元格内， 选择【插入】快捷栏中的【脚本】按钮。弹出如图3.17所示的对话框， 在【语言】下拉菜单中选择【JavaScript】，并且在【内容】文本框中 定义变量。 代码内容为“v_Layer2 = false ; v_Layer3 = false ; v_Layer4 = false;”。
第3章
3.11 本章习题
（1）一个行为是由________和________两部分组成的。
（2）行为可以绑定到连接、图像、表单元素或者多种其它HTML元素 中的任何一种，但是不能将行为绑定到________。
（3）动作是一段预先编写好的________源程序。
（4）使用________动作在打开当前网页的同时，还可以再打开一个 新的窗口。

网页设计与制作讲义课件第3章

网页设计与制作讲义课件第3章
图案填充采用Fireworks 8预设的图案或用户自己选择 的图案进行填充。
渐变填充采用若干种颜色之间平滑地过渡来进行填 充。
单击颜色拾取框上的【填充选项】按钮可以选择填充 的类型并作进一步的设置。
(2) 【笔尖大小】：用于设置刷子、铅笔、橡皮擦等绘图 工具的笔头的粗细。
(3) 【边缘】：用于设置用绘图工具绘出的图像边缘的柔 和程度。
网页设计与制作课件第 3章
精品
本章重点：
位图绘图和编辑操作 位图的选区操作 矢量图绘图和编辑操作 路径的操作 文字的使用方法 路径、文字、选区互相转换
3.1位图绘制
位图是由像素组成的。Fireworks 8提供了许多 修饰位图图像的方法，包括修饰、裁剪、羽化和克隆 图像等操作。利用图层和蒙版技术还可以进行图像的 后期创作，可以取得一些特殊的效果。
3. 设置不规则选区
用于设置不规则选区的是【套索工具】。具体操作如 下：
选择【自动擦除】选项时，当【铅笔工具】在描边颜色上拖 动时会自动转为使用填充颜色绘图，相当于擦除了描边。
3.刷子工具
【刷子工具】汇集了生活中各种绘图工具的功能，可 以模拟各种作图手法画出异彩纷呈的图像。单击工具 箱中的【刷子工具】按钮，并在属性面板里设置所需 的属性，然后在画布中拖曳鼠标即可画出相应图形。
3.1.1位图的绘图操作
1. 绘图工具的常用属性
Fireworks 8 工具箱里有很多绘图工具，在属性面 板里可以设置绘图工具的各种属性，使之具有各种不 同的功能和状态，以满足各种各样的绘图需求。属性 面板里各项属性的功能如下。
(1) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。

网页设计与制作 第3章 CSS技术基础

网页设计与制作 第3章 CSS技术基础
332在style标记符中定义样式信息333引用外部样式表中的样式信息在style标记符中定义样式对于单独网页的格式设置和维护很有效但如果在一个大网站中为每个页面都定义类似的样式显然又是效率不高的这时最好的办法就是将重复在多个网页中使用的样式放在外部样式表文件中然后通过链接的方式引用其中的样式
第3章 CSS技术基础
用户可以在CSS中插入注释来说明用户代码的意思，
3.3 在网页中使用CSS
3.3.1 在标记符中直接嵌套样式信息
在标记符中直接嵌套样式信息又称为“局部引 用”，即将样式直接嵌套在 HTML 标记里使用的。 用这种方法，可以很简单的对某个元素单独定义 样式。 使用style属性可以在HTML标记符中直接嵌入 样式定义，如下所示： <标记符style："property l：value l；property 2： value 2；……">
3.4.2 文本属性
1．文字间隔属性(word-spacing)
文字间隔属性定义一个附加在文字（单词）之 间的间隔数量。该值必须符合长度格式，允许使
用负值。
需要特别说明的是，该属性是针对英文单词的
间隔，而不是中文的文字间隔，中文的文字间隔
应该用下面讲到的letter-spacing。同时在中文版的 IE浏览器中也不支持该属性。
CSS 的主要功能是通过对 HTML 选择器进行设定，
来实现对网页中的字体、字号、颜色、背景、图像记
其他元素的控制，使网页能够完全按照设计者的要求
来显示。
3.2 CSS样式
3.2.1 CSS样式表组成
CSS 的定义由三部分构成：选择符 selector、属性 property和属性值value。其基本格式如下： selector{property l ： value l ； property 2 ： value 2；……} property表示由CSS标准定义的样式属性，value表示 样式属性的值。

网页设计与制作第三章

网页设计与制作第三章




标签(tag) 标签由3部分组成：<“标签名称” >。 “<”表示一个标签的开始，紧跟着的 是标签名和该标签的各种属性，最后用“>” 表示标签的结束。 例如：<A HREF=> “A”是标签名，“HREF”是标签的属性




标签(tag) 标签分为单标记指令和双标记指令，一 般情况下都是成对出现的，并且用“/”表示 标签之间的响应。 例如： <title>网页创作示例 </title> 注意：标签不要交叉嵌套
HTML中常用的段落标记有下面几个：
●段落标记<p>:段落起始和结尾的标记，基本 语法为：<p>…</p>. ●保留段落编辑标记<PRE>:如果文字编辑工具 已编排好一段内容，想直接依照原编排显示为 HTML文件，此时格式化段落内容的标记便派上 用场。用此标记，文字内容将以原编排的格式显 示出来。基本语法为：<PRE>…</PRE>。
3.4 表格


●单元格标记<td>：<td>标记用于定义 表格的单元格，表格有多少个单元格就有 多少个<td>…</td>标记。使用<td> 标记时，必须将其放在<tr>标记内。 ●标题单元格标记<th>：<th>标记用于 定义表格内的标题单元格，表明此单元格 中的文字将以粗体的方式显示。
3.4 表格
例： <p>通过使用现有的网页图像、声音、动画、文字 材料等资源，<br> 可以减轻网页制作的工作量、缩短工作时间、提高 工作效<br> 率，并且还可以在一定程度上弥补自身在某一方面 的不足。<br> </p>

网页设计与制作教程第3章

网页设计与制作教程第3章

第3章矢量绘图与文字3.1绘制矢量图形3.1.1绘制直线、矩形和椭圆图3-1 【线条工具】默认属性面板图3-2 【线条工具】扩展属性面板图3-3 【矩形工具】的属性面板3.1.2 绘制多边形和星形图3-5 【多边形工具】的属性面板之一·30·图3-6 【多边形工具】的属性面板之二图3-7 【星形工具】的属性面板3.1.3绘制圆角矩形图3-8 【圆角矩形工具】的属性面板3.1.4绘制路径3.2编辑路径3.2.1路径的自由变形3.2.2切割路径图3-11 用【刀子工具】单击路径切割·31·图3-12 用【刀子工具】切割闭合路径3.2.3重绘路径图3-13 重绘路径3.2.4组合路径图3-14 应用【联合】命令前后的效果对比图3-15 应用【相交】命令前后的效果对比·32·图3-16 应用【打孔】命令前后效果图3-17 应用【裁切】命令前后效果图3-18 选择需要合并的两条路径图3-19 合并后的路径3.2.5显示和隐藏路径3.2.6简化路径图3-20 执行【简化】命令的前后对比·33·3.3编辑对象3.3.1对象的选择3.3.2对象的复制与删除3.3.3 对象的变形3.3.4对象的排列和对齐3.4文本的应用3.4.1输入与修改文本图3-21 【文本工具】属性面板图3-22 字号、颜色等的设置图3-23 字体、字间距等的设置·34·3.4.2文本颜色、笔触、填充和效果的应用图3-24 字体颜色选择框图3-25 图案填充后的文本图3-26 设置透明后的效果·35·图3-27 【投影】菜单图3-28 投影设置对话框图3-29 字体设置投影特效后的效果3.4.3文本沿路径排列图3-30 制作文字和路径图3-31 执行【附加到路径】命令后的效果图3-32 文本沿路径的几种状态·36·3.4.4变形文本图3-33 文本进行几种变形后的效果3.4.5将文本转换为路径图3-34 文本原样·37·图3-35 选中路径中的单个文本图3-36 对文本变形后的效果3.5应用实例图3-37 立体图片效果图3-38 【层】面板图3-39 将下层的矩形变形图3-40 设置矩形填充类型·38·图3-41 设置填充颜色及不透明度图3-42 调节渐变工具的调节手柄图3-43 导入图像后的编辑窗口图3-44 月夜星空效果图3-45 两个圆部分交叠图3-46 选择【打孔】命令后得到的形状·39·图3-47 在编辑窗口中绘制星形图3-48 在编辑窗口中添加星形图3-49 【数值变形】对话框图3-50 任意调整大小后的星形3.6小结·40·。

网页设计与制作第3章.

网页设计与制作第3章.

教学进程
上机操作题
（1）在站点目录下新建文件table.htm，插入一个1行3列的表格， 插入logo、日期及Flash动画。 （2）制作水平分隔线。 （3）制作导航条，并书写文本。 （4）插入一个1行4列的大表格，根据给定的效果图再进行细化，添 加需要的文字及图片，得到最终的效果如下图所示。
教学进程
教学进程
3.1.2 编辑表格
选择单元格
选择单个的单元格 连续选择多个单元格 选择多个非连续的单元格 选择整个表格
教学进程
3.1.2 编辑表格
调整列的宽度和行的高度 方法一 将鼠标移动到表格的列边框或行边框上，当出现 “双箭头”形状的时候，就可以左右拖动来改变它 们的宽度或高度。 方法二 可以在属性面板中改变对应的参数
第
3章
表格的应用
3.1 创建及编辑表格 3.3 表格应用综合实例 3.1.1 创建表格 3.3.1 创建表格 3.1.2 编辑表格 3.3.2 插入Flash动画 3.2 表格的应用 3.4 习题与上机操作 3.2.1 细线表格效果的制作 3.2.2 格式化表格 3.2.3 分隔线的制作 3.2.4 虚线框表格的制作 3.2.5 导入表格数据 3.2.6 表格排序
方法
制作虚线框表格的一种最简单的方法，就是利用表格背景图片来 实现。
效果
教学进程
3.2.5 导入表格数据 导入表格式数据
可以将一些具有制表符、逗号、分号、引号或者其它分隔 符格式化好了的表格导入到网页文档中。
对于需要在网页中放置大量格式化数据的情况提供了更加 快捷、方便的方法。
教学进程
3.2.6 表格排序
执行【命令】|【排序表格】命令
教学进程
3.3 表格应用综合实例

《网页设计与制作》

《网页设计与制作》

《网页设计与制作》《网页设计与制作》第三章制作页面3.1实例：制作一个旅游网站该网站实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点有以下几点：页面属性的设置及文本的修饰；插入图像，插入图像对象实现特效；多个网页之间建立超链接。

“修改”菜单>“页面属性”命令，或单击“属性”面板中的“页面属性”按钮。

弹出“页面属性”对话框：外观选项卡：设置背景颜色及背景图像，另外还可设置文本\链接\访问过的链接\活动链接\页边距等。

标题/编码选项卡:设置网页的标题，输入请到西部来旅游。

显示在浏览器的标题栏中,如果未定义,则显示为“UntitledDoc ument”编码选项卡：选择文档编码。

跟踪图像选项卡：跟踪图像是为网页排版的一种辅助手段，在HTML文档不显示。

选择跟踪图像的路径及不透明度。

3.3文本的修饰操作文本是最基本的网页制作技能，例如：字体的修饰、段落的对齐方式等。

输入和修改文本软回车（换行，shift+回车键）和硬回车（另起一个自然段）输入连续的空格：切换到中文全角状态；或是在源代码中输入“&nb sp”或是在插入栏中“字符选项”中单击“不换行空格”按钮输入特殊字符插入栏中文本选项中的“字符”选项，单击要输入的字符。

另外还有一种方法，利用WORD进行特殊字符的输入，并通过WORD可获得大量文本内容。

选择、复制、移动文本拷贝HTML，直接将文件的HTML源代码拷贝至剪贴板。

CTRL+Z是撤消,CTRL+Y重做检查拼写错误：文本菜单|“检查拼写”命令。

查找和替换文字“编辑”菜单|“查找和替换”命令设置文字属性选中文本，在“属性”面板进行文字的设置,或是使用插入栏|“文本”选项中的某个按钮进行修饰；更多的可选择“文本”菜单|“样式”命令进行修饰。

设置段落选中文本，“属性”面板中,对段落进行修饰,对齐方式、文本缩进等.列表(有序列表\无序列表)选中文本，在“属性”面板中,单击“列表”按钮,再单击列表项目，弹出“列表属性”对话框，对列表进行样式的修饰.建嵌套列表:进行文本缩进,输入嵌套列表.3.4设置超级链接超链接是组成网站的基本元素，通过超链接将多个网页组成一个网站，浏览者通过超链接选择阅读路径。

网页设计与制作第3章

网页设计与制作第3章
1．打开并编辑站点 2．删除站点 3．复制站点 4．导出和导入站点
3.4 新建网页
3.4.1 创建空白文档
3.4.2 页面属性的设置
1．设置外观（CSS）属性 2．设置链接（CSS）属性 3．设置标题（CSS）属性 4．设置标题和编码属性 5．设置跟踪图像属性
3.5 案例：制作第一个网页作品
3.6 实训：扬州的夏日
3.1.3 状态栏
3.1 Dreamweaver CS5的工作环境
3.1.4 属性检查器
执行“窗口”→“属性”或者直接按快捷键〈Ctrl+F3〉，即可以显 示或隐藏属性检查器。属性检查器中的选项内容是根据网页中选定元素类 型的不同而改变的，当用户在属性检查器中修改某个属性值后，其效果立 刻在“文档”窗口反映出来.
3.3.1 什么是站点
1．本地站点 本地站点指的是在用户本地计算机硬盘中构建用来存放整个网站框架的本 地文件夹。一般制作网页只需建立本地站点即可，用户在本地对各种文档 编辑后，再一并上传至Internet服务器中。 2．远程站点 在Dreamweaver的“文件”面板中，该远程文件夹被称为远程站点。远程 文件夹通常位于运行Web服务器的计算机上，具有与本地文件夹相同的名 称。也就是说，用户发布到远程文件夹的文件和子文件夹是本地创建的文 件和子文件夹的副本。
3.1 Dreamweaver CS5的工作环境
3.1.5 常用功能面板
1．“插入”面板 2．“CSS样式”面板
3.1 Dreamweaver CS5的工作环境
3.1.5 常用功能面板
3．“文件”面板 4．“框架”面板 5. “资源”面板
3.2 自定义工作环境
3.2.1 自定义工作区
1．新建工作区 2．重置工作区 3．管理工作区

《网页设计与制作》 第三章 文档的基本操作

《网页设计与制作》 第三章 文档的基本操作
2．链接
在链接设置中，可以对链接的字体、大小进行设置，还 可以对链接的样式进行设置。比如链接文字是否加下划 线及链接文字在各种状态下的颜色等。如图3.7所示。
7
第3章 文档的基本操作
3.1 文档的基本操作
3．标题
在标题设置中，可以对文档中的各种标题进行字体、
大小、颜色的默认定义，方便在文档中直接使用，达 到样式统一的目的。如图3.8所示。
在文档窗口底部状态栏的左侧有标签选择区，显示环 绕当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。单击 <body>可以选择文档的整个正文。使用标签选择区是 选择标签的首选方法，它可以确保准确地选择标签。
3.1.7 文档中的代码操作
11
第3章 文档的基本操作
若要选择调色板以外的颜色，单击“颜色选择器”右 上角的 按钮可以弹出“系统颜色拾取器”，“系统 颜色拾取器”不局限于网页安全色。
3.1.6 选择“文档”窗口中的元素
10 若要在设计视图中选择文字、图片等第元3章素文，档通的常基可本以操作
3.1 文档的基本操作
单击元素或鼠标拖动选取元素。如果元素被隐藏了， 可以选择主菜单的【查看】|【可视化助理】中的相关 选项将其显示。有些元素(例如层)的左上角有标记，选 择此标记则选择了该元素。
4．标题/编码
在“标题/编码”设置中，可以对页面的标题进行设置 (即HTML代码中的<title>标记内容)，同时可以对文档 的类型和文档中使用文字编码进行定义。如图3.9所示。
5．跟踪图像
在跟踪图像设置中，可以为页面提供一个设计的参考 图像。同页面的背景图像不同，这个图像只在设计时

网页设计与制作第3章

网页设计与制作第3章

第3章列表一、知识要点1、设置无序列表<ul type=disc/circle/square ><li type=disc/circle/square>列表项1</li><li type=disc/circle/square>列表项2</li>……</ul>属性：type:disc实心圆；circle空心圆；square实心方。

<li>中type的优先级大于<ul>中的。

2、设置有序列表<ol type=1/A/a/I/i start=数值><li type=1/A/a/I/i>列表项1</li><li type=1/A/a/I/i>列表项2</li>……</ol>属性：type：编号样式；start：编号的起始值。

<li>中type的优先级大于<ol>中的。

3、定义列表<dl><dt>列表条目1<dd>条目1的说明<dt>列表条目2<dd>条目2的说明……</dl>4、设置列表嵌套二、例题分析例3．1：<html><head><title>列表</title></head><body><h2 align=center>人生规划</h2><ul type=square><li>发现或搞清楚你的主要人生目标是什么。

</li><li>着手准备实现这项目标。

</li></ul><ul><li>着手考虑你的人生和职业规划中的具体细节。

</li><li type=circle>策划一下将如何去实现它们。

网页设计与制作课件第3章

网页设计与制作课件第3章
在网页中插入水平线和图像 给网页设置背景颜色或背景图像
关闭
本章内容
• 3.1 文本与段落 • 3.1.1 字体和字号 • 3.1.2 文字颜色、对齐方式和文字样式 • 3.2 美 化 页 面 • 3.2.1 插入水平线 • 3.2.2 插入图像和给表格设置背景图像 • 3.2.3 图文混排 • 3.2.4 改变网页背景色和设置背景图像
“index.html”的网页，在页面中插入一个层并在层内输入文字 。
步骤2：在网页标题中输入网页标题“《沁园春·雪》”，按【Enter】键确认 。
步骤3：选择第1段“《沁园春·雪》（1936年2月）”，然后选择“属性”面
板中“字体”下拉列表中的“编辑字体列表”，系统弹出“编辑字体列表”对话
框。
步骤4：在“可用字体”栏中选中所需字体，这里选择“仿宋_GB2312”，单
击“可用字体”左侧的 按钮，将选中的字体添加到左侧的“选择的字体”列
表中，一种字体就添加好了，然后单击“确定”按钮 。
步骤5：选择文本“属性”面板上的“字体”下拉列表，把第一段设置为
“仿宋_GB2312” 。
步骤6：选择文本“属性”面板上的“大小”下拉列表，选择字体大小为
“18” 。 步骤7：保存文件，按【F12】键在浏览器中预览 。
在Dreamweaver中输入空格，直接使用空格键只能输入 一个半角字符，可以把输入法切换到全角状态，或是 使用【Ctrl+Shift+空格】组合键输入空格。
上一页 下一页 返回
知识点评
用鼠标选中文字后，“属性”面板中显示出关于文字的属性设置。如下图所 示。如果此时“属性”面板隐藏，可以通过菜单栏中的【窗口】→【属性】命令 打开文字“属性”面板。
步骤2：在文本“属性”面板单击按钮设置字体为加粗，接着单击按钮设置 对齐方式为居中对齐 。

网页设计与制作第3章

网页设计与制作第3章

网页设计与制作
第3章 Dreamweaver 8简介
单击插入栏左上方的 标志，将弹出如图3.3.6所示的快 捷菜单，选择“显示为菜单”命令，可以将插入栏以菜单的 形式显示，如图3.3.7所示。
图3.3.6 快捷菜单
图3.3.7 菜单式的插入栏
网页设计与制作
第3章 Dreamweaver 8简介
（4）文档工具栏：Dreamweaver 8的文档工具栏如图 3.3.8所示，通过它可以在不同的工作模式中切换，便于对网页 进行编辑。
网页设计与制作
第3章 Dreamweaver 8简介
图3.2.1 安装界面（一）
图3.2.2 安装界面（二）
网页设计与制作
第3章 Dreamweaver 8简介
（3）单击“下一步”按钮，系统将打开如图3.2.3所示 的安装界面（三），此处显示该软件的许可证协议，用户可 以使用键盘中的“Page Down”键翻页浏览，如果要安装此软 件就必须接受该协议。
图3.3.8 文档工具栏
网页设计与制作
第3章 Dreamweaver 8简介
（5）工作区：作为一个所见即所得的网页设计工具，工 作区对可视化设计是非常重要的。Dreamweaver 8的工作区 就是界面的中间部分，用户可以在其中输入文本和插入表格、 图像、媒体对象等。 （6）状态栏：用于显示当前文档的编辑状态，主要包括 工作区的大小、文档大小、下载时间、选取工具、手形工具、 缩放工具及标识选择器等，如图3.3.9所示。
第3章 Dreamweaver 8简介
选择“查看”→“网格”→“依靠齐到网格”命令，可以 将网页元素捕捉到网格线。所谓捕捉是指设置鼠标指针按指定 距离精确移动，例如，捕捉距离为5个像素，则打开捕捉后， 鼠标指针移动的步长即为5个像素。 选择“查看”→“网格”→“网格设置”命令，弹出“网 格设置”对话框（见图3.5.2），可以在其中设置网格的颜色、 间隔和显示等选项。网格线是非打印线条，不作为网页的内容 输出。

网页设计与制作 第3章

网页设计与制作 第3章

第三章 图片使用
11、 11、在图片上放置文本 可以在图片上放置文本，例如∶ 可以在图片上放置文本，例如∶若想要添加图片标 签，所加入的文本不会影响到站点中的图片文件。 所加入的文本不会影响到站点中的图片文件。 在网页视图模式下，单击图片。 图片” 1）在网页视图模式下，单击图片。在 “图片” 工 具栏， 文本” 具栏，单击 “文本” 。 格式， 若图片是 JPEG 格式， Microsoft FrontPage 会 格式， 提示将图片保存为 GIF 格式，因为在 JPEG 图片中不 支持文本。 支持文本 。 若 FrontPage 将图片从另一格式转换成 GIF 格式，图片上的颜色数目可能会减少，而图片的文 格式，图片上的颜色数目可能会减少， 件大小可能会变大。 确定” 件大小可能会变大。单击 “确定”。
第三章 图片使用
5、旋转图片 可以将图片顺时针或逆时针旋转 90 度。 在网页视图模式下，单击图片。 图片” 在网页视图模式下，单击图片。在 “图片” 工具 栏,单击 “向左旋转” 去翻转图片 90 度。单击 “向 向左旋转” 右旋转” 右旋转” 去翻转图片 90 度。 6、翻转图片 可以将图片水平翻转（将图片上下反转） 可以将图片水平翻转（将图片上下反转）或垂直翻 转（创建镜像）。 创建镜像）。 在网页视图模式下，单击图片。 图片” 在网页视图模式下，单击图片。在 “图片” 工具 栏,单击 “水平翻转” 去创建一个镜射。单击 “垂直 水平翻转” 去创建一个镜射。 翻转” 将图片向上向下翻转。 翻图片 在网页视图模式下，单击图片。 图片” 在网页视图模式下，单击图片。在 “图片” 工具 黑白模式” 栏， 单击 “黑白模式” 。 4、裁剪图片 通过裁剪图片，可以删除不想用到的图片区域， 通过裁剪图片，可以删除不想用到的图片区域，也 可以改变图片的缩放比例。 可以改变图片的缩放比例。 在网页视图模式下，单击图片。 图片” 1）在网页视图模式下，单击图片。在“图片”工 剪裁框会出现在图片上。 具栏单击“剪裁” 具栏单击“剪裁”， 剪裁框会出现在图片上。 以单击并拖动框上控点的方式， 2）以单击并拖动框上控点的方式，调整框大小来 包含想要保留的图片部份；也可绘制裁剪框， 包含想要保留的图片部份；也可绘制裁剪框，单击剪裁 框的外面区域而不是图片内部，然后绘制框。 框的外面区域而不是图片内部，然后绘制框。 剪裁” 以删除剪裁框的外围区域。 3）再次单击 “剪裁” 以删除剪裁框的外围区域。

网页设计与制作基础_第三章

网页设计与制作基础_第三章

DW CS3 的操作环境
（3）插入面板组 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选 项。 插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以 很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、 Flash和ActiveX等网页元素。
DW CS3 的操作环境
2.
3.
DW CS3 的操作环境
DW CS3在界面方面的变动不大，工具栏默认状态又恢复到 DW MX版本的设计样式。除此以外，基本保留 DW 8的界面设计。 按照安装向导安装完 DW CS3之后，第一次启动 DW CS3时会弹 出一个对话框，让用户选择默认编辑器。这样，会自动，会自动启动 DW CS3进行编辑。 在DW CS3 中首先将显示一个起始页，可以勾选这个窗口下面的 “不再显示此对话框”来隐藏它。在这个页面中包括“打开最近项 目”、“新建”“从模板创建”三个方便实用的项目。 新建或打开一个文档，进入DW CS3的标准工作界面。DW CS3的 标准工作界面包括：标题栏、菜单栏、插入面板组、工具栏、文档 窗口、状态栏、属性面板和浮动面板等。




Adobe DW CS3推出。
Adobe DW CS4推出。
DW版本发展
DW 3.0 DW 4.0 DW MX
DW MX2004 DW 8 DW CS3
DW CS3的功能
基本功能 利用 DW 中的可视化编辑功能，可以快速创建 Web 页面而无需编 写任何代码。可以查看所有站点元素或资源并将它们从易于使用的 面板直接拖到文档中。可以在Fireworks 或其它图形应用程序中创 建和编辑图像，然后将它们直接导入 DW，从而优化开发工作流程。 DW 还提供了其它工具，可以简化向 Web 页中添加 Flash 资源的 过程。 除了可帮助生成 Web 页的拖放功能外，DW 还提供了功能全面的 编码环境，其中包括代码编辑工具（例如代码颜色、标签完成、 “编码”工具栏和代码折叠）；有关层叠样式表 (CSS)、 JavaScript、ColdFusion 标记语言 (CFML) 和其它语言的语言参考 资料。 DW 还可以使用服务器技术（如、ASP、JSP 和 PHP） 生成动态的、数据库驱动的 Web 应用程序。

网页设计与制作3.ppt

网页设计与制作3.ppt
<I></I> <U></U> <TT></TT> <CITE></CITE> <EM></EM>
文本以黑体字的形式输出
文本以斜体字的形式输出 文本以下加一划线的形式 输出 输出打字机风格字体文本 输出引用方式的字体，通 常是斜体 输出需要强调的文本(通 常是斜体加黑体) 输出加重文本(通常也是 斜体加黑体)
网页设计艺术
1)、关于META标签中的HTTP-EQUIV <META http-equiv="Content-Type" content="text/HTML; charset=gb2312"> 其作用是指定了当前文档所使用的字 符编码为gb2312，也就是中文简体字符。 根据这一行代码，浏览器就可以识别出这 个网页应该用中文简体字符显示。类似地， 如果 将 “gb2312”替换为“big5”，就是我 们熟知的中文繁体字符了。 HTTP-EQUIV用于向浏览器提供一些说 明信息，从而可以根据这些说明做出相应。
№ 24
网页设计艺术 3.2 利用Dreamweaver MX处理网页文本
3.2.1 3.2.2 3.2.3 3.2.4 3.2.5
输入文本 查找/替换文本的内容 设置文本格式 添加和删除中文字体 设置页面的属性
№ 25
网页设计艺术
3.2.1 输入文本
1．换行
（1）自动换行：在输入文字时，若某一行的长度超过 了Dreamweaver MX窗口的显示范围，文字将自动换到下
№5
网页设计艺术
3.<TITLE></TITLE> 在<TITLE></TITLE>标记对之间加入 要显示的文本即是网页的“主题”。注 意：<TITLE></TITLE>标记对只能放在 <HEAD></HEAD>标记对之间。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
上一页 返回
3.3 用Dreamweaver 8制作网页
3.3.1创建站点及网页
1.规划站点结构 网站是多个网页的集合，其包括一个首页和若十个分页，
这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web站点页面之前，要对站点的结构进行设计和规划。卞要 包括决定要创建多少页，每页上显示什么内容，页面布局的 外观以及各页是如何互相连接起来的，等等。
返回
3.2 Dreamweaver 8基本工作环境
3.2.1界面介绍
新建或打开一个文档，进入Dreamweaver 8的标准 工作界面。Dreamweaver 8的标准工作界面包括：标题 显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文 档窗口、状态栏、属性面板和浮动面板组，如图3-2所示。
下一页 返回
下一页 返回
3.3 用Dreamweaver 8制作网页
2.创建站点
在Dreamweave 8中可以有效地建立并管理多个站点。 创建站点有两种方法：一是利用向导完成；一是利用高级设 定来完成。
在创建站点前，用户可以先在自己的电脑硬盘上新建一 个以英文或数字命名的空文件夹作为本地站点使用。
上一页 下一页 返回
上一页 下一页 返回
3.2 Dreamweaver 8基本工作环境
3.浮动面板
其他面板可以统称为浮动面板，这些面板都浮动于编辑 窗口之外。在初次使用Dreamweave 8的时候，这些面板 根据功能被分成了若十组。在窗口菜单中，选择不同的命令 可以打开基本面板组、设计面板组、代码面板组、应用程序 面板组、资源面板组和其他面板组。
上一页 下一页 返回
3.2 Dreamweaver 8基本工作环境
4.状态栏
“文档”窗口底部的状态栏提供与用户正创建的文档有 关的其他信息。标签选择器显示环绕当前选定内容的标签层 次结构。单击该层次结构中的任何标签以选择该标签及其全 部内容。单击<body>标签可以选择文档的整个正文。
上一页 下一页 返回
3.2.3工具栏
1.文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”
窗口视图(如“设计”视图和“代码”视图)的选项、各种查 看选项和一些常用操作(如在浏览器中预览)。
上一页 下一页 返回
3.2 Dreamweaver 8基本工作环境
2.标准工具栏
“标准”工具栏包含来自“文件”和“编辑”菜单中的 一般操作的按钮： “新建”、 “打开”、“保存”、“保 存全部”、“剪切”、“复制”、“粘贴”、“撤销”和 “重做”
上一页 下一页 返回
3.2 Dreamweaver 8基本工作环境
2.属性面板
属性面板并不是将所有的属性加载在面板上，而是根据 用户选择的对象来动态显示对象的属性，属性面板的状态完 全是随当前在文档中选择的对象来确定的。例如，当前选择 了一幅图像，那么属性面板上就出现该图像的相关属性；如 果选择了表格，那么属性面板会相应的变化成表 8制作网页
3.搭建站点结构
站点是文件与文件夹的集合，下面我们根据前面对 xmWeb网站的设计，来新建xmWeb站点要设置的文件夹 和文件。
上一页 下一页 返回
3.3 用Dreamweaver 8制作网页
3.3.2设置网页的属性
1.页面的总体设置 2.设置页面属性 (1)设置外观 (2)设置链接 (3)设置标题
3.2 Dreamweaver 8基本工作环境
3.2.4常用面板
1.插入面板组 插入面板集成了所有可以在网页应用的对象包括“插入”
菜单中的选项。插入面板组其实就是图像化了的插入指令， 通过一个个的按钮，画、表格、图层、框架、表单、Flash 和 ActiveX可以很容易地加入图像、声音、多媒体动等网页 元素。
链接等。 修改：具有对页面元素修改的功能。 文本：用来对文本操作，例如设置文本格式等。 命令：所有的附加命令项。 站点：用来创建和管理站点。 窗口：用来显示和隐藏控制面板以及切换文档窗口。 帮助：联机帮助功能。例如按F1键，就会打开电子帮助文本。
上一页 下一页 返回
3.2 Dreamweaver 8基本工作环境
上一页 下一页 返回
3.2 Dreamweaver 8基本工作环境
3.文档窗口
“文档”窗口显示当前文档。可以选择下列任一视图： “设计”视图是一个用于可视化页面布局、可视化编辑和快 速应用程序开发的设计环境。在该视图中， Dreamweaver显示文档的完全可编辑的可视化表示形式， 类似于在浏览器中查看页面时看到的内容。“代码”视图是 一个用于编写和编辑HTML， JavaScript、服务器语言代 码以及任何其他类型代码的乎工编码环境。“代码和设计” 视图使用户可以在单个窗口中同时看到同一文档的“代码” 视图和“设计”视图。
3.2 Dreamweaver 8基本工作环境
3.2.2主菜单
文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打 印等。
编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置 等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。 插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级
第3章 Dreamweaver 8快速入门
3.1 Dreamweaver 8简介 3.2 Dreamweaver 8基本工作环境 3.3 用Dreamweaver 8制作网页 3.4 网页制作高级功能
3.1 Dreamweaver 8简介
Macromedia Dreamweaver 8是一个可视化的网 页设计和建立Web站点及应用程序的专业工具。它将可视布 局工具、应用程序开发功能和代码编辑支持组合在一起，其 功能的强大使得各个层次的开发人员和设计人员都能够快速 创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS设计的领先支持到乎工编码功能，Dreamweaver提 供了专业人员在一个集成、高效的环境中所需的工具。开发 人员可以使用 Dreamweaver及所选择的服务器技术来创 建功能强大的Internet应用程序，从而使用户能链接到数 据库、Web服务和旧式系统。