网页设计与制作第三章
合集下载
网页设计与制作第三章
上一页 返回
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.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章
图案填充采用Fireworks 8预设的图案或用户自己选择 的图案进行填充。
渐变填充采用若干种颜色之间平滑地过渡来进行填 充。
单击颜色拾取框上的【填充选项】按钮可以选择填充 的类型并作进一步的设置。
(2) 【笔尖大小】：用于设置刷子、铅笔、橡皮擦等绘图 工具的笔头的粗细。
(3) 【边缘】：用于设置用绘图工具绘出的图像边缘的柔 和程度。
网页设计与制作课件第 3章
精品
本章重点：
位图绘图和编辑操作 位图的选区操作 矢量图绘图和编辑操作 路径的操作 文字的使用方法 路径、文字、选区互相转换
3.1位图绘制
位图是由像素组成的。Fireworks 8提供了许多 修饰位图图像的方法，包括修饰、裁剪、羽化和克隆 图像等操作。利用图层和蒙版技术还可以进行图像的 后期创作，可以取得一些特殊的效果。
3. 设置不规则选区
用于设置不规则选区的是【套索工具】。具体操作如 下：
选择【自动擦除】选项时，当【铅笔工具】在描边颜色上拖 动时会自动转为使用填充颜色绘图，相当于擦除了描边。
3.刷子工具
【刷子工具】汇集了生活中各种绘图工具的功能，可 以模拟各种作图手法画出异彩纷呈的图像。单击工具 箱中的【刷子工具】按钮，并在属性面板里设置所需 的属性，然后在画布中拖曳鼠标即可画出相应图形。
3.1.1位图的绘图操作
1. 绘图工具的常用属性
Fireworks 8 工具箱里有很多绘图工具，在属性面 板里可以设置绘图工具的各种属性，使之具有各种不 同的功能和状态，以满足各种各样的绘图需求。属性 面板里各项属性的功能如下。
(1) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。
渐变填充采用若干种颜色之间平滑地过渡来进行填 充。
单击颜色拾取框上的【填充选项】按钮可以选择填充 的类型并作进一步的设置。
(2) 【笔尖大小】：用于设置刷子、铅笔、橡皮擦等绘图 工具的笔头的粗细。
(3) 【边缘】：用于设置用绘图工具绘出的图像边缘的柔 和程度。
网页设计与制作课件第 3章
精品
本章重点：
位图绘图和编辑操作 位图的选区操作 矢量图绘图和编辑操作 路径的操作 文字的使用方法 路径、文字、选区互相转换
3.1位图绘制
位图是由像素组成的。Fireworks 8提供了许多 修饰位图图像的方法，包括修饰、裁剪、羽化和克隆 图像等操作。利用图层和蒙版技术还可以进行图像的 后期创作，可以取得一些特殊的效果。
3. 设置不规则选区
用于设置不规则选区的是【套索工具】。具体操作如 下：
选择【自动擦除】选项时，当【铅笔工具】在描边颜色上拖 动时会自动转为使用填充颜色绘图，相当于擦除了描边。
3.刷子工具
【刷子工具】汇集了生活中各种绘图工具的功能，可 以模拟各种作图手法画出异彩纷呈的图像。单击工具 箱中的【刷子工具】按钮，并在属性面板里设置所需 的属性，然后在画布中拖曳鼠标即可画出相应图形。
3.1.1位图的绘图操作
1. 绘图工具的常用属性
Fireworks 8 工具箱里有很多绘图工具，在属性面 板里可以设置绘图工具的各种属性，使之具有各种不 同的功能和状态，以满足各种各样的绘图需求。属性 面板里各项属性的功能如下。
(1) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。
网页设计与制作 第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表示 样式属性的值。
第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表示 样式属性的值。
网页设计与制作 第3版 第3章 建立本地站点
第3章 建立本地站点
3.3 综合实训案例：创建“我的第一个站点”
⑤在“文件”面板中选择“本地视 图”，在站点的根目录“站点 - 我 的第一个站点”上右击，在弹出的 快捷菜单中选择“新建文件”命令， 文件名称为index.html，结果如图所 示。
第3章 建立本地站点
3.3 综合实训案例：创建“我的第一个站点”
第3章 建立本地站点
3.2 管理本地站点
3.2.2 站点的其他操作 ● 导出 。 单击 按钮，弹出“导出站点”对话框，如图所示。
第3章 建立本地站点
3.2 管理本地站点
3.2.2 站点的其他操作
● 导入站点
。单击
按钮，弹出“导入站点”对话框。
3.2 管理本地站点
3.2.2 站点的其他操作
第3章 建立本地站点
第3章 建立本地站点
3.3 综合实训案例：创建“我的第一个站点”
④在“文件”面板中选择“本地视图”， 在站点的根目录“站点 - 我的第一个站点” 上右击，在弹出的快捷菜单中选择“新 建文件夹”命令，文件夹名称为images， 然后用同样的方式再创建两个文件夹， 其名称分别是videos和styles。最终创建的 文件夹如图所示。
3.2 管理本地站点
3.2.2 站点的其他操作
第3章 建立本地站点
（4）重命名文件或文件夹 要在站点中重命名文件或文件夹， 可在“文件”面板上选择并右击 要操作的文件或文件夹，在弹出 的快捷菜单中选择“编 辑”→“重命名”。等选中文件 的名称变为可编辑状态后，输入 新的文件名称，按Enter键，完 成重命名操作。
3.2 管理本地站点
3.2.2 站点的其他操作
第3章 建立本地站点
1．“管理站点”对话框 如要对站点进行管理， 在菜单栏中选择“站 点”→“管理站点”命 令，弹出“管理站点” 对话框。
网页设计与制作教程第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章.
教学进程
上机操作题
（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 表格应用综合实例
《网页设计与制作》第三章插入网页基本元素精品PPT课件
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
09.10.2020
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
09.10.“20>20<”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
09.10.2020
26
3.设置单元格属性
❖ 文字（属性面板的上半部分） ❖ 水平 ❖ 宽、高 ❖ 垂直 ❖ 标题 ❖ 背景和背景颜色 ❖ 边框
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
网页设计与制作第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．管理工作区
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.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章列表一、知识要点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.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.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．重命名文件夹或文件
先选中需要重命名的文件夹或文件，然 后单击快捷菜单中的【编辑】→【重命名】 命令或者按【 F2 】快捷键，文件夹或文件的 名称变为可编辑状态，重新输入新的名称， 按Enter键确认即可。
3.4.2 在页面中使用资源
1．向文档中添加资源
（1）将光标定位于想要加入资源的位置。 （2）打开“资源面板”，选择资源的种 类图标按钮。 （3）选择“站点”或者“收藏”单选按 钮，然后在列表中选择所要的资源。 （4）从“资源面板”中拖动资源到“设 计”视图中或者单击“资源面板”左下角的 按钮，这样资源就被插入到文档中。
对话框列出了刚才设置的主要内容，如果发 现有错误，可以单击“上一步”按钮退回到 合适的步骤进行更正，核对无误后，单击 【完成】按钮，结束站点定义对话框的设置。
3.2 管理站点
1．切换站点
在文件面板左边的下拉列表框中选中某
个已创建的站点，例如单击选中“我的班级
网站”，就可切换到对这个站点进行操作的 状态。
第3章 站点的创建与管理
课程引导
认识了Dreamweaver 8的工作环境之后，接 下来将要迈出制作网页的第一步了。无论是 网页制作的新手，还是专业的网页设计师，
都要从构建站点开始，理清网站结构。
知识技能目标
（1）掌握“文件”面板 （2）掌握站点的创建
（3）掌握站点的管理
站点效果展示
本章所创建的实例网站“长沙世界之窗” 的站点结构效果如图所示。
4．删除文件夹或文件
要从本地站点文件列表中删除文件夹或
文件，先选中要删除的文件夹或文件，然后 这时系统会弹出一个提示对话框，询问是否
命令；如果要进行复制操作，则执行【编辑】
3．重命名文件夹或文件
先选中需要重命名的文件夹或文件，然 后单击快捷菜单中的【编辑】→【重命名】 命令或者按【 F2 】快捷键，文件夹或文件的 名称变为可编辑状态，重新输入新的名称， 按Enter键确认即可。
3.4.2 在页面中使用资源
1．向文档中添加资源
（1）将光标定位于想要加入资源的位置。 （2）打开“资源面板”，选择资源的种 类图标按钮。 （3）选择“站点”或者“收藏”单选按 钮，然后在列表中选择所要的资源。 （4）从“资源面板”中拖动资源到“设 计”视图中或者单击“资源面板”左下角的 按钮，这样资源就被插入到文档中。
对话框列出了刚才设置的主要内容，如果发 现有错误，可以单击“上一步”按钮退回到 合适的步骤进行更正，核对无误后，单击 【完成】按钮，结束站点定义对话框的设置。
3.2 管理站点
1．切换站点
在文件面板左边的下拉列表框中选中某
个已创建的站点，例如单击选中“我的班级
网站”，就可切换到对这个站点进行操作的 状态。
第3章 站点的创建与管理
课程引导
认识了Dreamweaver 8的工作环境之后，接 下来将要迈出制作网页的第一步了。无论是 网页制作的新手，还是专业的网页设计师，
都要从构建站点开始，理清网站结构。
知识技能目标
（1）掌握“文件”面板 （2）掌握站点的创建
（3）掌握站点的管理
站点效果展示
本章所创建的实例网站“长沙世界之窗” 的站点结构效果如图所示。
4．删除文件夹或文件
要从本地站点文件列表中删除文件夹或
文件，先选中要删除的文件夹或文件，然后 这时系统会弹出一个提示对话框，询问是否
网页设计与制作第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），可以在其中设置网格的颜色、 间隔和显示等选项。网格线是非打印线条，不作为网页的内容 输出。
《Dreamweaver CS6网页设计与制作》第3章 HTML 刘敏娜 主编
3.3 页面布局与文字格式
3.3.1标题
一个html文件的结构基本上可以分为两部分，一部分称 为标题区(Head Section)；另一部分称为主体区(Body Section)。文件结构标记就是用来标示出何处属于标题， 何处属于主体。 一般文章都有标题、副标题、章和节等结构，HTML中也 提供了相应的标题标签<Hn>，其中n为标题的等HTML 总共提供六个等级的标题，n越小，标题字号就越大，以 下列出所有等级的标题：
3.3.3段落标记
【实例】 ex5.htm <html> <head> <title>段落标签</title> </head> <body> 登鹳雀楼<P>白日依山尽，<br>黄河入海流。<br>欲穷 千里目，<br>更上一层楼。</P> </body> </html> 在浏览器中显示如图3.5所示。
线段排列的设定
【实例】 ex8.htm
<HTML> <HEAD> <TITLE>线段排列的设定</TITLE> </HEAD> <BODY> <P>这是第一条线段，无ALIGN设定，(取默认值CENTER显示) <HR WIDTH=50% SIZE=5> <P>这是第二条线段，向左对齐 <HR WIDTH=60% SIZE=7 ALIGN=LEFT> <P>这是第三条线段，向右对齐 <HR WIDTH=70% SIZE=2 ALIGN=RIGHT> </BODY> </HTML> 在浏览器中显示如图3.8所示。
网页设计与制作 第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章 网页制作基础
图3-39 插入窗口创建表格
图3-40 插入窗口中插入行或列
第3 章
网页制作基础
• 第三中方法：直接用输入HTML标记创建表格。 表格标记有<table>、<th>、<tr>和<td>四个，它们的具体含义是： <table></table>:定义表格,是表格必须的元素 <th></th>：定义标题单元格，在这个单元格中的文字将用粗体表示。 <tr></tr>：定义表格中的行。 <td></td>：定义单元格，使用<td>标记一定要放在<tr>标记内部。 上述标记中，<th></th>可以省略，其他三个是必须的。<Table>、<tr>、 <td>标记中可以添加属性和参数，如<Table>的border属性，用于设置 表格的边框宽度，值为大于等于“0”的整数，当值为“0”，在浏览器 中显示无边框表格，无边框表格是网页布局最主要的手段。
第3 章
网页制作基础
图3-7 插入窗口
图3-8 属性面板
图3-9 格式菜单
第3 章
网页制作基础
• 自定义设置段落格式 段落格式一般包括“对齐方式”和“缩进”等设置，下面就分别来看 一下如何设置文本的“对齐方式”和“缩进”。 • 1.设置对齐方式 段落的对齐是指段落中的文本在网页内水平方向上的排列方式。一般 有左对齐、居中对齐、右对齐、两端对齐四种方式。以设置“课程介 绍”为左对齐为例，设置段落对齐方式的操作为： ① 将光标定位在段落中，或者选择段落。 ② 执行以下操作之一： 单击菜单栏中的【格式】→【对齐】→【左对齐】。 在“属性”面板中单击按钮，段落左对齐；单击按钮，段落居中对齐； 单击按钮，段落右对齐；单击按钮，段落两端对齐。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
标签(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.2 页面排版的基本元素
3.2.1文件中标题标记（<title>）和字体 标记（<hx>）
3.2.3 设置段落标记
文字中的居中对齐标记<CENTER>:如果 需要将文件的段落或说明的各类标记文件 居中对齐，都可以使用居中对齐标记。基 本语法为： <CENTER>…</CENTER>。
使用此标记，浏览器能够根据窗口的大小 自动调整每行文字的居中显示。
段落缩进标记<BLOCKQUOTE>:如果段落需 要缩排，请直接在前后加上缩排标记。每使用一 次可以缩排数个空白字符，如果段落想缩排的更 多，重复使用此标记即可。基本语法为： <BLOCKQUOTE>…</BLOCKQUOTE>。
3.4.2 表格的属性
●<cellspacing>属性：功能是设置框线的宽 度。标记格式为： <table cellspacing=#>……</table>其 中，#为数字，单位是pixel（像素），默认值为 1。 <cellpadding>属性：功能是设置数据与边框 的宽度，标记格式为： <table cellpadding=＃>…</table>其中， #为数字，单位是pixel（像素），默认值为1。 ●<bgcolor>属性：功能是设置单元格的背景 颜色，标记格式为： <table bgcolor= #value>…</table>
3.2.3 设置段落标记
1.type数字形式属性
数字 小写字母 大写字母 小写罗马字母 大写罗马字母 Type=# Type=# Type=# Type=# Type=# #=1.2.3 #=a,b.c #=A,B,C #=I,ii,iii #=I,II,III
2.start 起始数字属性 <OL STRAT =#>,#代表起始数字
3.1.2 超文本文件格式的约定和限制
（1）由于WWW浏览器忽略超文本文件中的回车 符（除非用户指定用<PRE>标记元素限制按源文 件格式展示文本内容），而是用专门的标记符号 <BR>表示回车。 （2）由于WWW浏览器是按标记元素来控制超文 本显示效果的，所以源文件列宽不受限制，一个 文件的内容可以写在一行中，也可以写成习惯的 80列屏幕宽度，后者更便于源文件的阅读和修改。 （3）在超文本中用“/”表示路径，而不是DOS 系统中的反斜杠“\”。 （4）在超文本中可以用<IMG>标记元素插入图 形图像。
标号清单 标号清单就是清单 各项目左边加上数字 符号或其他有序的标 号，如a,b,c,并可设定 从何处开始计数，由 浏览器自动给予编号。
<OL> <L1> <L1> . . . <L1> </OL> „„. „„.
UL：无编号列表(Unnumbered List) OL：有编号列表(Unnumbered List) LI : 列表项目 (List Iterm)
标签的嵌套 <html> <head> <title>网页 创作示例</title> </head> <body> <p>用于教 学的示范网页。 </p> </body> </html>
错误的嵌套
<html>
<head>
<title>网页创 作示例</title>
</head> <body> <p>用于教学的 示范网页。</body> </p>
3.4.3 单元格属性
单元格属性指的是每一个表格中的格，体现在 HTML标记中就是<th>和<td>标记的属性设定， 主要有width，height，align，valign， bgcolor以及nowrap六项属性。 <width>属性：其功能是设定单元格的宽度， 单位是pixel。如： <th width= 100>产品名称</th> <height>属性：其功能是设定单元格的高度， 单位是pixel。如： <th height=30>产品名称</th>
3.4 表格
在HTML语法中，表格的建立由<table>，<tr>， <th>和<td>四个标记完成。下面是对这四个标 记的说明。 ●表格起始标记<table>：<table>标记用于 标识一个表格。一个表格是由<table>标记开始， </table>标记结束。表格的内容由<tr>、 <th>和<td>标记定义，表格的边框类型由 〈border=#〉标记属性指定，其中#为数字，默 认值为0。 ●表格行标记<tr>：<tr>标记用于定义表格 的一个行，表格有多少行就有多少个 <tr>…</tr>标记。在一个<tr>标记内可以包 含若干个由<th>和<td>标记所定义的单元格。
</html>
Html代码分类： 1、基本标志 2、链接标志 3、格式标志 4、帧标志 5、文本标志 6、表单标志 7、图像标志 8、声音标志 9、表格标志
3.1 HTML的基本结构
一个HTML文件应具有下面的结构： <html> HTML文件开始 <head> 文件头开始 文件头 </head> 文件头结束 <body> 文件体开始 文件体 </body> 文件体结束 </html> HTML文件结束
HTML的基本结构 页面排版的基本元素 清单列表的设计 表格 图片与多媒体 在网页中建立超链接 框架网页的学习 交互网页的制作
HTML HTML语言，又称超文本标记语言，是 英文HyperText Markup Language的缩 写。HTML语言作为一种标识性的语言，是 由一些特定符号和语法组成的，通过标签 来分割和标记文本中的各个元素。 网页就是HTML写的文档，可以在浏览 器中显示。
3.2.3 设置段落标记
3.3 清单列表的设计
清单用于列举事项,常用的清单有符号清单 和标号清单,清单允许嵌套 符号清单(包括“选择清单”和“说明式 清单”)项目左边无编号,而以特殊的符号 表示
3.3 清单列表的设计
清单前的符号可以由最外层标记中加入标 记属性type来控制, 格式为:<menu type =#>其中,#表示 符号名称,主要有以下三种: DISC------------实心圆点 Circle………….空心圆点 SQUARE……….实心方块.
网页设计与制作
第3章 HTML的认识
教学目的： 1、了解html语言 2、 熟悉html代码的基本标志、链接标 志、 格式标志、 帧标志、文本标志、表单 标志、图像标志、声音标志、表格标志 3、使用dreamweaver做出html页面
主要内容
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
一般来讲，HTML的的元素有以下3种表达 方式:
<标记>对象</标记> <标记 属性1=参数1 属性２=参数２>对 象</标记> <标记> 注意：语句中标记的书写不区分大小写。