《网页设计与制作》第四章：页面设计分解
合集下载
网页设计与制作4
№ 17
网页设计艺术
（2）在现有的表格中插入单元列 将光标移到在插入单元列的右边一列， 将光标移到在插入单元列的右边一列，选 修改” 表格 表格” 插入列 命令。 插入列” 择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，按 组合键“Ctrl+Shift+A”。 组合键“Ctrl+Shift+A 。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，单 击鼠标右键， 击鼠标右键，在弹出的快捷菜单中选择 表格” 插入列 命令。 插入列” “表格”|“插入列”命令。
网页设计艺术 第四章 网页表格的处理
表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局，布局 网页文本、图像、媒体等。 通过本章学习应该掌握以下内容: 利用HTML创建和编辑网页表格 利用Dreamweaver MX处理表格
№1
网页设计艺术
4.1 利用Dreamweaver MX处理网页表格 4.2 利用HTML创建和编辑网页表格
№ 14
网页设计艺术
（3）选择多个单元格 选择多个单元格 按住Ctrl键 单击所要选择的所有单元格。 按住Ctrl键，单击所要选择的所有单元格。 Ctrl 将光标置于单元格中，拖动鼠标， 将光标置于单元格中，拖动鼠标，选择多 个单元格。 个单元格。 如果要选择整行， 如果要选择整行，将光标置于该行的左边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。 如果要选择整列， 如果要选择整列，将光标置于该列的上边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。
№ 19
网页设计艺术
删除整行/ （4）删除整行/整列 先选择欲删除的整行或整列，直接按Del 先选择欲删除的整行或整列，直接按Del 即可删除。 键，即可删除。 先将光标移到要删除的行或列中， 先将光标移到要删除的行或列中，选择 修改” 表格 表格” 删除行 删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。 命令。 将光标移到要删除的行或列中， 将光标移到要删除的行或列中，单击鼠标 右键，在弹出的快捷菜单中选择“表 右键，在弹出的快捷菜单中选择“ 删除行” 删除列”命令。 格”|“删除行”或“删除列”命令。 删除行
网页设计艺术
（2）在现有的表格中插入单元列 将光标移到在插入单元列的右边一列， 将光标移到在插入单元列的右边一列，选 修改” 表格 表格” 插入列 命令。 插入列” 择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，按 组合键“Ctrl+Shift+A”。 组合键“Ctrl+Shift+A 。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，单 击鼠标右键， 击鼠标右键，在弹出的快捷菜单中选择 表格” 插入列 命令。 插入列” “表格”|“插入列”命令。
网页设计艺术 第四章 网页表格的处理
表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局，布局 网页文本、图像、媒体等。 通过本章学习应该掌握以下内容: 利用HTML创建和编辑网页表格 利用Dreamweaver MX处理表格
№1
网页设计艺术
4.1 利用Dreamweaver MX处理网页表格 4.2 利用HTML创建和编辑网页表格
№ 14
网页设计艺术
（3）选择多个单元格 选择多个单元格 按住Ctrl键 单击所要选择的所有单元格。 按住Ctrl键，单击所要选择的所有单元格。 Ctrl 将光标置于单元格中，拖动鼠标， 将光标置于单元格中，拖动鼠标，选择多 个单元格。 个单元格。 如果要选择整行， 如果要选择整行，将光标置于该行的左边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。 如果要选择整列， 如果要选择整列，将光标置于该列的上边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。
№ 19
网页设计艺术
删除整行/ （4）删除整行/整列 先选择欲删除的整行或整列，直接按Del 先选择欲删除的整行或整列，直接按Del 即可删除。 键，即可删除。 先将光标移到要删除的行或列中， 先将光标移到要删除的行或列中，选择 修改” 表格 表格” 删除行 删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。 命令。 将光标移到要删除的行或列中， 将光标移到要删除的行或列中，单击鼠标 右键，在弹出的快捷菜单中选择“表 右键，在弹出的快捷菜单中选择“ 删除行” 删除列”命令。 格”|“删除行”或“删除列”命令。 删除行
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
网页设计与制作第四章
（3）定义CSS样式的区块属性
在CSS样式定义对话框中的“分类”列表中选择 “区块”选项，设置CSS样式的“区块”属性， 包括单词间距、字母间距、对齐方式、文字缩进 等内容。
（4）定义CSS样式的方框属性
在CSS样式定义对话框中的“分类”列表中选择 “方框”选项，设置CSS样式的“方框”属性 。
4.1 CSS样式 样式
一.使用CSS样式面板 使用CSS样式面板 CSS
使用Dreamweaver MX 2004的CSS样式面板可以创建和管 理CSS样式。用下面的方法之一可以打开CSS样式面板： （1）选择命令“窗口”→“CSS样式”。 （2）单击“设计”面板上的小三 角形将 “设计”面板展开，选择 样 面板上的“CSS样式”标签。 式 面 （3）使用快捷键“Shift+F11” 板
二.模板的编辑 模板的编辑
1．编辑页面共用部分
（1）打开模板面板，然后 在模板面板的列表中选中 要修改的模板，单击“编 辑”按钮，或双击已有模 板名将模板打开； （2）编辑页面共用部分
2．定义可编辑区域
（1）将光标放在表格右边单元格中，单击鼠标右键 选择“模板”→“新建可编辑区域”，出现新建 可编辑区域对话框，为该区域输入一个名称；
4.2 模板
模板的创建 模板的编辑
模板
在一个网站中，有大量的网页具有相同的格式， 我们可以创建一个网页样本，在此样本中包含有 可编辑区域和不可编辑区域。不可编辑区域的内
模板 容是固定的，通常为标记、图标、导航栏目，而
可编辑区域内容是可变的，这就是模板。使用模 板可以大大提高制作网页的效率。
一、模板的创建
CSS 图
二.新建和编辑CSS样式 新建和编辑CSS样式 CSS 1.新建CSS样式 2.设置CSS样式定义对话框参数 3.编辑CSS样式表
网页设计与制第4章图文
3．图层 图层就像透明的胶片，每个层都包含一个显示在舞台中 的不同图像，在舞台上一层层地向上叠加，每一张又都保持 独立。在一个图层上绘制和编辑对象，不会影响其他图层上 的对象。当有很多图层时，可以组合出各种复杂的动画效果。 Flash中的图层位于时间轴左侧，如图4-17所示。
第4章 Flash 8入门 图4-17 图层
第4章 Flash 8入门 图4-26 设置“声音”属性
第4章 Flash 8入门
(4) 测试和保存影片。 ① 保存文档，文件名为“奔驰的骏马”。 ② 按组合键Ctrl+Enter测试影片，观看效果。 ③ 制作完成的动画场景如图4-27所示。
4.2 制作Flash动画
本节知识点
逐帧动画 形状补间动画 动作补间动画 引导层动画 遮罩动画
第4章 Flash 8入门
4.2.1 逐帧动画
逐帧动画是一种常见的动画形式，其原理是在“连续的 关键帧”中分解动画动作，也就是在时间轴的每个关键帧上 逐帧绘制不同的内容，连续播放形成动画。
案例1：制作“文字流光效果”动画 制作如图4-21所示的“文字流光效果”动画。
③ 选择“工具”面板上的“椭圆工具”，在“属性”面 板上设置笔触颜色为“没有颜色”，设置填充颜色为蓝色 (#0000FF)。移动鼠标到舞台的中间，按住键盘上的Shift键的 同时按住鼠标左键拖动，绘制出一个任意大小的正圆，如图 4-5所示。
第4章 Flash 8入门 图4-5 绘制出的小球
第4章 Flash 8入门
(5) 保存和测试动画。 ① 执行“文件”→“保存”命令(快捷键为Ctrl+S)，弹 出“另存为”对话框，指定文件保存的路径，输入文件名 “小球运动”，保存类型为“Flash 8文档(*.fla)”，如图4-13 所示。
第4章 Flash 8入门 图4-17 图层
第4章 Flash 8入门 图4-26 设置“声音”属性
第4章 Flash 8入门
(4) 测试和保存影片。 ① 保存文档，文件名为“奔驰的骏马”。 ② 按组合键Ctrl+Enter测试影片，观看效果。 ③ 制作完成的动画场景如图4-27所示。
4.2 制作Flash动画
本节知识点
逐帧动画 形状补间动画 动作补间动画 引导层动画 遮罩动画
第4章 Flash 8入门
4.2.1 逐帧动画
逐帧动画是一种常见的动画形式，其原理是在“连续的 关键帧”中分解动画动作，也就是在时间轴的每个关键帧上 逐帧绘制不同的内容，连续播放形成动画。
案例1：制作“文字流光效果”动画 制作如图4-21所示的“文字流光效果”动画。
③ 选择“工具”面板上的“椭圆工具”，在“属性”面 板上设置笔触颜色为“没有颜色”，设置填充颜色为蓝色 (#0000FF)。移动鼠标到舞台的中间，按住键盘上的Shift键的 同时按住鼠标左键拖动，绘制出一个任意大小的正圆，如图 4-5所示。
第4章 Flash 8入门 图4-5 绘制出的小球
第4章 Flash 8入门
(5) 保存和测试动画。 ① 执行“文件”→“保存”命令(快捷键为Ctrl+S)，弹 出“另存为”对话框，指定文件保存的路径，输入文件名 “小球运动”，保存类型为“Flash 8文档(*.fla)”，如图4-13 所示。
《网页设计与制作》第四章：页面设计
选择多个层可按住Shift键后依次在层中或层边 框上单击，也可按住Shift键后依次在“层”面 板中单击层的名称。
层的拖动
选择需移动的层，将光标移到层边框上，按住 鼠标左键将其拖动到需要的位置后释放鼠标即 可。
层的对齐
在设计网页过程中经常需要将层对齐。对齐层 的操作比较简单，选择需对齐的层，选择“修 改/对齐”菜单中的相应子命令即可。层的对齐 有左对齐、右对齐、对齐上缘、对齐下缘几种 方式。
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板组打 开“CSS样式”面板
新建样式
1.新建样式
（1）在属性面板样式的样式菜单中选择“管理样式”，
在打开的编辑样式表对话框中单击“新建”按钮。
（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
设置框架属性
“框架名称”文本框
“源文件”文本框
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和框架
“属性”面板中的基本相同，不同的是在“行”
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。
层的拖动
选择需移动的层，将光标移到层边框上，按住 鼠标左键将其拖动到需要的位置后释放鼠标即 可。
层的对齐
在设计网页过程中经常需要将层对齐。对齐层 的操作比较简单，选择需对齐的层，选择“修 改/对齐”菜单中的相应子命令即可。层的对齐 有左对齐、右对齐、对齐上缘、对齐下缘几种 方式。
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板组打 开“CSS样式”面板
新建样式
1.新建样式
（1）在属性面板样式的样式菜单中选择“管理样式”，
在打开的编辑样式表对话框中单击“新建”按钮。
（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
设置框架属性
“框架名称”文本框
“源文件”文本框
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和框架
“属性”面板中的基本相同，不同的是在“行”
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。
《网页设计与制作》第4章课件
如何实现窗口间的关联3-1
如何实现左列导 航，在右面显示 相关页面？
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名（框架主页）
设置右窗口名为： rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示：iframe常用属性
练习——引用google主页
需求说明：
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明：
根据提供的素材实现
总结2-1
框架的基本语法？ 如何实现2行2列的典型框架？
如何实现窗口间关联？
内嵌框架的语法？
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面： sohu
网页设计与制作第4章PPT课件
ID：用于设置HTML 5音频的标题。 源：用于设置HTML 5音频源文件。 Controls：选中该属性，表示显示音频播放控件。 Autoplay：选中该属性，则音频在加载完成后自动播放。 Loop：选中该属性，则音频将循环播放。 Muted：设置音频是否静音。 Preload：选中该属性，则音频在页面加载的同时进行加载，并预备播放。如果已选中 “Autoplay”，则忽略该属性。 “Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持 时，打开的第2种和第3种音频格式。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
《网页设计与制作》课程说明书
计算机图像处理 专业核心课
学时 /学分 56 /3 授课范围
2010 级本科 1 班、2 班、3 班
授课时间 和地点
周三 1-2 节，11-A507 室（2 班、3 班） 周五 5-6 节，11-A507 室（1 班）
人数 限制 90
课 程 本课程全面讲授使用 HTML 和 CSS 进行网页设计和制作的方法和技巧，包括网页设计基础、网页 简 制作工具、XHTML 基础、CSS 基础、CSS 布局技术和 CSS 高级技术等内容。 介
实验、实习、作业、课外 阅读及参考文献等 内容及时间、地点
实验（一）网页基本元素 周三 3、4 节 计算机基础教学实验室 B-103
实验（二）XHTML 语言 周三 3、4 节 计算机基础教学实验室 B-103
实验（三）CSS 选择器 周三 3、4 节 计算机基础教学实验室 B-103
实验（四）CSS 盒模型 周三 3、4 节 计算机基础教学实验室 B-103
缺席 1/3 学时者，取消考试资格，重修；总成绩不及格者，补考；补考不及格者， 重修；补考或重修时，期末考试占 100%。
备注
1．开学一周内，班长或课代表将其姓名、联络电话、手机以 e-mail 传送给任课 老师。 2．若以 e-mail 与老师联络时，请于主题处注明您的班级、姓名及事由等。 3．修读本课程的同学均应准时到课，若无法准时前来，应有请假条。
第 14 章 表格布局（2 课时） 13.1 表格布局基础 13.2 表格布局实例
第 15 章 浏览器兼容问题（2 课时） 13.1 CSS 过滤器 13.2 IE 常见 bug 修复 网页制作综合训练（2 课时） 第 16 章 网页制作综合训练
实验（六）用 CSS 设置背景样 式 周三 3、4 节 计算机基础教学实验室 B-103
《网页设计与制作》课程标准
《网页设计与制作》课程标准适用专业：计算机专业学时： 72课时1、课程定位和课程设计《网页设计与制作》课程是中职计算机相关专业的一门专业必修课程。
本课程以图形图像处理为前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页制作、网站规划与网站维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为专业的核心主干课程，使学生掌握商业网站的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。
学生毕业后可胜任网站管理员、网页设计员、网页美工员等工作岗位。
2、课程目标本课程以学生能够网页网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，为以后的学习动态网页设计课程打下基础。
1、素质目标(1) 培养具有较强的网页设计创意思维、艺术设计素质；(2) 培养学生在学习过程中解决困难的能力；(3) 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性；(4) 培养学生理论联系实际的工作和学生方法；(5) 培养具有高度责任心和良好的团队合作精神；(6) 具有社会责任感。
2、知识目标(1) 了解WEB站点的工作原理；(2) 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用；(3) 了解服务器、客户端、浏览器的概念和作用；(4) 掌握常规网站的规划及流程；(5) 熟练掌握HTML语言中各种标记符的运用能力；(6) 熟练掌握Dreamweaver应用软件的使用；(7) 理解网页中脚本语言的使用方法；(8) 熟练开发常规静态网站。
3、能力目标(1) 熟练掌握Dreamweaver应用软件制作网站及网页；(2) 熟练掌握使用绝对和相对URL，创建超链接，图像链接；(3) 掌握在网页中添加CSS的方法；(4) 培养学生设计、制作和维护动态网站。
页面布局设计
4.3 使用表格排版
表格是由一些被线条分开的单元格组成。线条即表格的边 框，被边框分开的区域被称为单元格，数据、文字、图像 等网页元素均可根据需要放置在相应的单元格中。如图所 示。
在网页中使用表格一般有两种情况：一种是在需要组织数 据显示时用；另一种是在布局网页时用。当表格被用作布 局时，需要对表格的属性进行设置。
步骤2 单击“绘制布局单元格”按钮，鼠标在页面 上变为“+”形，按下鼠标左键拖动可绘制布局单元格。
4.3.4 在布局模式下插入表格和单元格
如图所示：
4.3.5 表格排版实例的制作过程
本小节讲解【例4.1】利用表格进行网页布局的制作过程。 作为专业的设计者，首先利用图形制作软件如： Fireworks、Photoshop等，绘制一张网页草图，然后根 据网页草图利用表格对网页进行排版。
在布局模式下，使用表格进行布局具有定位简单、容 易调整等优点。例如：在布局模式中可以在页面上方便地 绘制布局单元格，可将这些单元格拖动到所需的位置；还 可以方便地创建固定宽度的布局或自动伸展为整个浏览器 窗口宽度的布局。
4.3.4 在布局模式下插入表格和单元格
1、绘制布局表格与布局单元格 首先从标准模式切换到布局模式：单击“插入”栏｜
4.4 使用层排版
除了表格以外，层是另外一种定位网页元素的方法。本 节介绍层的概念和操作，并通过一个实例说明如何利用层 进行页面布局的设计。
4.4.1 实例导入：层排版网页
Dreamweaver中的层是一种网页元素定位技术，它可 以包含文字、图像、表格、插件甚至其它层。一个网页中 可以含有多个层，层的特点在于各个层之间可以重叠，并 可以决定每个层是否可见，还可以定义各个层之间的层次 关系。层可以转换成表格，通过与“时间轴”及行为的结 合，能够实现动态交互效果。
《网页设计与制作》第04章
制布局表格。单击“布局”工具栏上的“绘制布局单元格”按 钮，绘制布局单元格。
• 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布
局模式的创建。布局表格为浅绿色，上面带有布局表格的标签 和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏 可以打开列标题菜单。
• 步骤5：绘制完布局表格和单元格后，系统会自动生成表格。
• 2. 设置表格属性
如果需要查看表格的属性，可以选中表格，弹出表格属性 面板。
• 表格属性面板参数说明： • 表格Id：表格名称，用于脚本语言中的引用。 • 行、列：表格的行与列。可输入数值改变表格的行数和列数。 • 宽、高：表格的宽与高。可输入数值改变表格的宽与高，单位
有百分比和像素。
• 填充：单元格边框相对于单元格内容的距离。 • 间距：表格内单元格之间的距离。 • 对齐：可以设置表格水平对齐方式，包括默认、左对齐、居中
动到适当的位置。
4.2.3 重设布局表格和单元格的大小
• 步骤1：打开buju.htm，切换到布局模式下。 • 步骤2：选中要调整的布局表格，出现控制点，用鼠标
拖动控制点，调整布局表格的大小。
• 步骤3：选中要调整的布局单元格，出现控制点，用鼠
标拖动控制点，调整布局表格的大小。
4.2.4 清除单元格高度
击“插入”按钮。
• 步骤3：在“标签编辑器-Iframe”对话框中，根据面板提示
操作。最基本的两项是“源”和“名称”。
• 步骤4：设置链接在某个iframe中打开。选中链接，在属性
面板中的“目标”项，手工输入目标iframe的名称。
• 步骤5：iframe透明。为了使iframe内容和网页背景相同，
择链接的文档应在其中显示的框架或窗口。
• 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布
局模式的创建。布局表格为浅绿色，上面带有布局表格的标签 和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏 可以打开列标题菜单。
• 步骤5：绘制完布局表格和单元格后，系统会自动生成表格。
• 2. 设置表格属性
如果需要查看表格的属性，可以选中表格，弹出表格属性 面板。
• 表格属性面板参数说明： • 表格Id：表格名称，用于脚本语言中的引用。 • 行、列：表格的行与列。可输入数值改变表格的行数和列数。 • 宽、高：表格的宽与高。可输入数值改变表格的宽与高，单位
有百分比和像素。
• 填充：单元格边框相对于单元格内容的距离。 • 间距：表格内单元格之间的距离。 • 对齐：可以设置表格水平对齐方式，包括默认、左对齐、居中
动到适当的位置。
4.2.3 重设布局表格和单元格的大小
• 步骤1：打开buju.htm，切换到布局模式下。 • 步骤2：选中要调整的布局表格，出现控制点，用鼠标
拖动控制点，调整布局表格的大小。
• 步骤3：选中要调整的布局单元格，出现控制点，用鼠
标拖动控制点，调整布局表格的大小。
4.2.4 清除单元格高度
击“插入”按钮。
• 步骤3：在“标签编辑器-Iframe”对话框中，根据面板提示
操作。最基本的两项是“源”和“名称”。
• 步骤4：设置链接在某个iframe中打开。选中链接，在属性
面板中的“目标”项，手工输入目标iframe的名称。
• 步骤5：iframe透明。为了使iframe内容和网页背景相同，
择链接的文档应在其中显示的框架或窗口。
《网页设计与制作》教案
一、教案基本信息教案名称：《网页设计与制作》教案适用课程：网页设计与制作课时安排：共20课时，每课时45分钟教学目标：1. 了解网页设计的基本概念和流程；2. 掌握HTML、CSS和JavaScript的基本语法和应用；3. 能够独立设计和制作简单的网页。
教学方法：1. 讲授与实践相结合；2. 案例分析；3. 小组讨论与协作。
教学内容：1. 网页设计基本概念与流程；2. HTML基本语法及应用；3. CSS基本语法及应用；4. JavaScript基本语法及应用；5. 网页设计与制作实践。
二、第一章：网页设计基本概念与流程课时安排：2课时教学内容：1. 网页设计基本概念；2. 网页设计流程；3. 网页设计原则与技巧。
教学方法：1. 讲授与实践相结合，通过案例分析让学生了解网页设计的基本概念和流程；2. 小组讨论，让学生分享对网页设计原则与技巧的理解。
教学活动：1. 引入案例：分析优秀网页设计案例，引导学生了解网页设计的基本概念；2. 讲解网页设计流程，让学生掌握从需求分析到设计制作的过程；3. 小组讨论：学生分组讨论网页设计原则与技巧，分享心得体会。
作业与评估：1. 课后作业：要求学生总结本节课所学的网页设计基本概念和流程；2. 课堂表现：观察学生在讨论中的参与程度和理解程度。
三、第二章：HTML基本语法及应用课时安排：4课时教学内容：1. HTML基本语法；2. 常用HTML标签及属性；3. HTML页面结构。
教学方法：1. 讲授与实践相结合，通过案例让学生掌握HTML基本语法和常用标签；2. 小组讨论，让学生分析实际案例中的HTML代码。
教学活动：1. 讲解HTML基本语法，让学生了解HTML代码的构成；2. 演示常用HTML标签及属性，让学生通过实践掌握其应用；3. 案例分析：学生分组分析实际案例中的HTML代码，理解其结构。
作业与评估：1. 课后作业：要求学生编写一个简单的HTML页面，运用所学标签和属性；2. 课堂表现：观察学生在讨论和实践中对HTML基本语法的掌握程度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
32
框架“属性”面板中的基本相同，不同的
是在“行”或“列”文本框中可设置框架 的行或列的宽度，在“单位”下拉列表框 中选择单位后即可输入所需数值。
返回
框架链接的目标
1.设置网页元素的链接目标
_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
（1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、表格等。
返回
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。
29
右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。
返回
设置框架与框架集的属性
36
层的基本操作
返回
本章要点
设置网页属性
页面布局
5
使用框架布局
层的使用 使用CSS
CSS属性
返回
6
网页标题
如果文档工具栏没有显示，使用菜单“查看”→“工 具”→“文档”可打开其显示。
返回
页面设置
• • • • • 1．外观 2．链接 3．标题 4．标题/编码 5．跟踪图像
7
返回
文件头设置
1.META
33
_top：目标网页的内容在最顶层框架窗口中显示。
2.设置网页的缺省显示区域 使用菜单“插入”“HTML”“文件头标签”“基
础”，打开“基础”对话框，在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。
返回
一个实例
利用框架为“书香盈袖”网页布局页面，
并为其添加网页元素。
设置框架属性
设置框架集属性
30
返回
设置框架属性
“框架名称”文本框
“源文件”文本框
31
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
返回
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和
返回
框架与框架集的概念
• 用框架布局网页时有如下的技巧和规则：
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
返回
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”，使得框架边框被选中。
22
返回
使用布局模式布局
绘制布局表格
绘制布局单元格
23
返回
使用框架布局
一个实例：
24
返回
框架与框架集的概念
25
• 单个框架是指在网页上定义的一个区域， 而框架集则记录了同一网页上多个框架的 布局、链接和属性信息。 • 利用框架可以把浏览器窗口划分为多个区 域，每个区域可以添加任意网页元素，也 可分别显示不同的网页。 • 框架集与框架之间的关系是包含与被包含 的关系，多个框架就组成了框架集，框架 集包含了框架1、框架2和框架3共3个框架。
返回
19
20
• （5） 在表格b的第2行插入一个1行5列的表格d。 宽度100％。 • （6） 在表格a的第2行插入一个1行2列的表格e。 宽度100％。 • （7） 在表格e的第1列插入一个2行1列的表格f。 宽度100％。 • （8） 在表格e的第2列插入一个2行1列的表格g。 宽度100％。 • （9）在表格g的第2行插入一个1行3列的表格h。 宽度100％。
返回
使用扩展模式布局
在工具栏上单击扩展表格模式按钮，既可切换到 “扩展表格模式” 。
扩展模式下并不是所见即所得的效果，最好不要在 单元格中添加内容，只进行页面设计操作。
21
返回
使用布局模式布局
用表格布局的页面，往往给人一种过于整齐的排列 效果，而使用“布局模式”，则可以是网页中的元素快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模 式。
1.确定显示分辨率
（1）T型结构布局
2.版面布局的模式
（2）口型布局
（3）三型布局
（4）对称对比布局 （5）POP布局 返回
画出网页布局草图
标题 图片栏
17
链接文 字区
主要内容区
网站版权信息区
返回
表格布局
1个实例
使用表格对课本74页的网页进行布局。
18
返回
操作步骤
• （1） 插入一个3行1列的表格a。a 760×420 边框为0，填充、间距为0，对 齐方式居中。 • （2） 在表格a的第3行插入1条水平线， 宽度为70％。居中。文字 • （3） 在表格a的第1行中插入1个2行1列 的表格b。宽度100％。其余0 • （4） 在表格b的第1行插入一个1行2列 的表格c。宽度100％。
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
返回
网页的风格3
4Байду номын сангаас
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
6.链接
链接用于设置需要链接的CSS等外部文件的地址和类型。
返回
网页布局实例1
10
返回
网页布局实例2
11
返回
网页布局实例3
12
标题正文型结构的顶端是网站标识和标题 ，下面是网页正文。内容非常简单。
返回
网页布局实例4
13
返回
网页布局实例5
14
返回
网页布局实例6
15
返回
16
网页的版面布局