《网页设计与制作》第三章：插入网页基本元素解析
合集下载
网页设计与制作(Dreamweaver)《插入网页基本要素之文本与样式》
斜体 强调 块引用
标题
编号列表定义列表 定义说明 首字母缩写词
粗体 加强
段落 已编排格式
项目列表 列表项 定义术语 缩写 字符
插入网页基本要素之文本与样式
添加空格和段落
插入空格
空格的添加：HTML只允许字符之间包含一个空格；若要在文档中 添加其他空格，必须添加连续空格。
（1）空格的HTML代码为： （2）在“插入”栏中，选择“文本”，然后单击最右侧下拉列表框中“不 换行空格”。 （3）选择“插入”>“HTML”>“特殊字符”>“不换行空格”。 （4）按 Ctrl+Shift+空格键 （首选）。
插入网页基本要素之文本与样式
层叠样式的应用
CSS样式面板
显示“CSS样式”面板：在“窗口”菜单中单击“CSS 样式”，或 者按 Shift+F11 键。CSS样式面板下方的四个按钮分别是：附加样 式表，新建CSS样式，编辑样式表，删除CSS样式表。
（1）将插入点置于欲设格式处，单击新建 CSS样式按钮。 （2）定义CSS样式的类型； （3）选择定义样式的位置； （4）单击“确定”。出现“CSS样式定义” 对话框。 （5）选择要为新CSS样式设置的样式选项。
插入网页基本要素之文本与图像
层叠样式的应用
插入网页基本要素之文本与图像
层叠样式的应用
插入网页基本要素之文本与图像
层叠样式的应用
CSS样式可以保存成一个独立的外部样式文件，使得多个网页文件可以共享同一CSS样式，以便统一网 页的格式。 CSS样式文件的扩展名是CSS，是一个纯文本文件。 CSS样式面板中单击附加样式按钮，可以将一个现成的样式链接到当前网页中使用。
网页设计与制作(Dreamweaver)《插入网页基本要素之页面布局框架》
插入网页基本要素之页面的框架布局
选择框架和框架集
在“文档”窗口中选择框架和框架集 在按下ALT的同时，单击欲选的框架。 单击框架集中两个框架之间的边框，可以选择一个框架集。 或者在按下ALT的同时，按下左右上下光标移动键。
插入网页基本要素之页面的框架布局
编辑框架集
（1）将一个框架拆分成几个更小的框架 拆分插入点所在的框架，从“修改/框架集” 子菜单选择拆分项。 （2）删除一个框架 当拖动框架边框至四边外侧时，框架将被 自动删除。
Main Frame
插入网页基本要素之页面的框架布局
使用Iframe
Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是，Iframe可以嵌在网页的任意 部分，因而也被称作内联框架或者浮动框架。
(1)将光标定位在准备插入的目标区域，选择“插入录”|HTML|“框 架”|IFRAME命令即可。 (2)将光标定位在准备插入的目标区域，选择“插入”栏中的“布局” 选项卡，单击Iframe按钮即可。 (3)进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标 记。
插入网页基本要素之页面的框架布局
使用Iframe
属性
align
frameborder height
longdesc
marginheight marginwidth
name scrolling
src width
值 left、right、top、middle、
bottom 1、0
pixels、%
URL
pixels pixels frame_name yes、no、auto URL pixels、%
描述 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 规定是否显示框架周围的边框。 规定 iframe 的高度。 规定一个页面，该页面包含了有关 iframe 的较长描 述。 定义 iframe 的顶部和底部的边距。 定义 iframe 的左侧和右侧的边距。 规定 iframe 的名称。 规定是否在 iframe 中显示滚动条。 规定在 iframe 中显示的文档的 URL。 定义 iframe 的宽度。
选择框架和框架集
在“文档”窗口中选择框架和框架集 在按下ALT的同时，单击欲选的框架。 单击框架集中两个框架之间的边框，可以选择一个框架集。 或者在按下ALT的同时，按下左右上下光标移动键。
插入网页基本要素之页面的框架布局
编辑框架集
（1）将一个框架拆分成几个更小的框架 拆分插入点所在的框架，从“修改/框架集” 子菜单选择拆分项。 （2）删除一个框架 当拖动框架边框至四边外侧时，框架将被 自动删除。
Main Frame
插入网页基本要素之页面的框架布局
使用Iframe
Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是，Iframe可以嵌在网页的任意 部分，因而也被称作内联框架或者浮动框架。
(1)将光标定位在准备插入的目标区域，选择“插入录”|HTML|“框 架”|IFRAME命令即可。 (2)将光标定位在准备插入的目标区域，选择“插入”栏中的“布局” 选项卡，单击Iframe按钮即可。 (3)进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标 记。
插入网页基本要素之页面的框架布局
使用Iframe
属性
align
frameborder height
longdesc
marginheight marginwidth
name scrolling
src width
值 left、right、top、middle、
bottom 1、0
pixels、%
URL
pixels pixels frame_name yes、no、auto URL pixels、%
描述 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 规定是否显示框架周围的边框。 规定 iframe 的高度。 规定一个页面，该页面包含了有关 iframe 的较长描 述。 定义 iframe 的顶部和底部的边距。 定义 iframe 的左侧和右侧的边距。 规定 iframe 的名称。 规定是否在 iframe 中显示滚动条。 规定在 iframe 中显示的文档的 URL。 定义 iframe 的宽度。
网页设计与制作(Dreamweaver)《插入网页基本要素之表单》
通常，一个完整的表单包括表单对象（如单选按钮、复 选框、文本字段以及按钮等）和应用程序两个基本组件。
工作原理：一般将表单设置在一个HTML文档中，访问 者填写相关信息后提交表单，表单内容会自动从客户端 的浏览器传送到服务器上，经过服务器上的ASP或CGI 等程序处理后，再将访问者所需的信息传送到客户端的 浏览器上。
表单“属性”面板中各选项含义如下： 表单ID：是<from>标签的name参数，用于标志表单的名称，每个表单的名称都不能相同。命名表单后，用户就可以使用 JavaScript或VBScript等脚本语言引用或控制该表单。 动作：是<from>标签的action参数，用于设置处理该表单数据的动态网页路径。用户可以在此选项中直接输入动态网页的 完整路径，也可以单击选项右侧的“浏览文件”按钮，选择处理该表单数据的动态网页。
插入网页基本要素之表单
添加表单对象
表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理，所以在添加文本域、 按钮等表单对象之前，要先插入表单。 向表单中插入表单对象的方法有如下几种： 将光标置于表单边界内（即红色虚线框内）的插入点，从“插入→表单”级联式菜单中选择需要的对象。 将光标置于表单边界内的插入点，在“插入”面板“表单”标签中选择并单击表单对象按钮。 在“插入”面板“表单”标签中，选中需要的表单对象按钮，按下鼠标左键将其直接拖曳到表单边界内的插入点位置。
插入网页基本要素之表单
设置表单属性
需要注意的是，页面中的红色虚线框表示创建的表单，这个框的作用仅方便编辑表单对象，在浏览器中不会显示。另外， 可以在一个页面中包含多个表单，但是，不能将一个表单插入到另一个表单中（即标签不能交迭）。
网页设计与制作(Dreamweaver)《插入网页基本要素之层的使用》
更改层的层叠顺序：在属性面板中“Z轴”表示图层的网页中顺序号，
该文本框中输入层叠序号，可直接改变层叠顺序，其中１号位于最下面， 编号较大的层出现在编号较小的层上面，编号也可以是负值。
插入网页基本要素之层的使用
修改现有层的属性
更改层可见性：
（1）当处理文档时，可以使用“层”面板手动 显示和隐藏层，以查看页如何在不同的条件下 显示。眼睛睁开表示该层是可见的；眼睛闭合 表示该层是不可见的。如果没有眼形图标，该 层通常会继承其父级的可见性。
图层最大的优点在于使网页元素位于网页中的任意位置。 （实际上也是一种页面布局的工具）
插入网页基本要素之层的使用
层的创建
单击插入栏上“布局”标签下的“绘制AP DIV”图标。在文档窗口的设计视图中拖动鼠标绘制出层。 或者：执行“插入”菜单的“布局对象”中“AP DIV”命令。
插入网页基本要素之层的使用
层的基本操作
选择层：
按下SHIFT的同时，单击欲选层，或者单击多个层。 若要选择一个层，可以在“层”面板中单击该层的名称或单击一个层的边框。 若要选择多个层，可按住Shift键并单击“层”面板上的两个或更多个名称或在两个或更多个 层的边框内（或边框上）按住Shift键并单击。
调整层大小
调整选定层的大小方法：拖动该层的任一大小调整柄。 微调（一次调整一个像素的大小）： Ctrl + →或↓ 如果、已启用“防止重叠”选项，那么在调整层的大小时将无法使该层与另一单，然后在出现的 对话框中选择所需的选项。最后单击“确定”。
插入网页基本要素之层的使用
布局：CSS+层
一般情况下一个网页主要包括：LOGO（标志），Banner（横幅），导航栏，导航菜单，网页正文，版权声明，在设计 页面布局时，也正是围绕着这些元素展开的。 在页面制作过程中要确定一个页面的布局（版式），应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、 图片、动画、超链接等。
该文本框中输入层叠序号，可直接改变层叠顺序，其中１号位于最下面， 编号较大的层出现在编号较小的层上面，编号也可以是负值。
插入网页基本要素之层的使用
修改现有层的属性
更改层可见性：
（1）当处理文档时，可以使用“层”面板手动 显示和隐藏层，以查看页如何在不同的条件下 显示。眼睛睁开表示该层是可见的；眼睛闭合 表示该层是不可见的。如果没有眼形图标，该 层通常会继承其父级的可见性。
图层最大的优点在于使网页元素位于网页中的任意位置。 （实际上也是一种页面布局的工具）
插入网页基本要素之层的使用
层的创建
单击插入栏上“布局”标签下的“绘制AP DIV”图标。在文档窗口的设计视图中拖动鼠标绘制出层。 或者：执行“插入”菜单的“布局对象”中“AP DIV”命令。
插入网页基本要素之层的使用
层的基本操作
选择层：
按下SHIFT的同时，单击欲选层，或者单击多个层。 若要选择一个层，可以在“层”面板中单击该层的名称或单击一个层的边框。 若要选择多个层，可按住Shift键并单击“层”面板上的两个或更多个名称或在两个或更多个 层的边框内（或边框上）按住Shift键并单击。
调整层大小
调整选定层的大小方法：拖动该层的任一大小调整柄。 微调（一次调整一个像素的大小）： Ctrl + →或↓ 如果、已启用“防止重叠”选项，那么在调整层的大小时将无法使该层与另一单，然后在出现的 对话框中选择所需的选项。最后单击“确定”。
插入网页基本要素之层的使用
布局：CSS+层
一般情况下一个网页主要包括：LOGO（标志），Banner（横幅），导航栏，导航菜单，网页正文，版权声明，在设计 页面布局时，也正是围绕着这些元素展开的。 在页面制作过程中要确定一个页面的布局（版式），应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、 图片、动画、超链接等。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
❖高 ❖背景颜色 ❖边框颜色 ❖背景图像 ❖对齐设置
2020/10/4
26
3.设置单元格属性
❖ 文字（属性面板的上半部分） ❖ 水平 ❖ 宽、高 ❖ 垂直 ❖ 标题 ❖ 背景和背景颜色 ❖ 边框
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
2020/10/4
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
5、链接文字颜色的设置
通过页面属性来设置的。
2020/10/4
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2020/10/4
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮的各个单元格中分别输入内容。
2020/10/4
25
2.修改表格属性
2020/10/4
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
2020/10/4
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2020/10/4
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
2020/10/4
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
2020/10/4
8
网页效果图
2020/10/4
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
2020/1“0/>4 <”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
2020/10/4
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2020/10/4
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
20
设置网页图片属性最终效果图
2020/10/4
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2020/10/4
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2020/10/4
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
2020/10/4
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
2020/10/4
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
2020/10/4
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字符”。
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
2020/10/4
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2020/10/4
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2020/10/4
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2020/10/4
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
2020/10/4
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
2020/10/4
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。
2020/10/4
26
3.设置单元格属性
❖ 文字（属性面板的上半部分） ❖ 水平 ❖ 宽、高 ❖ 垂直 ❖ 标题 ❖ 背景和背景颜色 ❖ 边框
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
2020/10/4
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
5、链接文字颜色的设置
通过页面属性来设置的。
2020/10/4
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2020/10/4
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮的各个单元格中分别输入内容。
2020/10/4
25
2.修改表格属性
2020/10/4
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
2020/10/4
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2020/10/4
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
2020/10/4
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
2020/10/4
8
网页效果图
2020/10/4
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
2020/1“0/>4 <”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
2020/10/4
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2020/10/4
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
20
设置网页图片属性最终效果图
2020/10/4
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2020/10/4
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2020/10/4
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
2020/10/4
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
2020/10/4
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
2020/10/4
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字符”。
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
2020/10/4
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2020/10/4
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2020/10/4
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2020/10/4
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
2020/10/4
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
2020/10/4
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。