《网页设计与制作》第四章：页面设计
网页设计与制作4
网页设计艺术
（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>）是水平线标签，可以在页面生成一条水平线。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
网页设计与制作第四章
（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章图文
第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 所示。
网页设计与制作
第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。
一般流程如下：1.建设网站前进行必要的市场分析。
2.明确建设网站的目的及功能定位。
3.制定网站技术解决方案。
4.根据网站的目的确定网站内容、网站结构和网站功能。
5.进行网页设计，并根据技术方案实施网站建设。
6.做出经费预算。
7.网站测试。
8.网站发布及推广。
9.网站维护。
第2章网站基础知识网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
网站的组成●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。
●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。
●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。
●网页网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。
●基本构成元素：文字、图像、超级链接。
●阅读方式：浏览器。
●类型：以不同的后缀代表不同类型的网页文件。
通常分为静态页面、动态页面。
动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。
也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。
一般文件名均以htm、html、shtml等为后缀。
术语WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。
《网页设计与制作》第四章：页面设计
层的拖动
选择需移动的层，将光标移到层边框上，按住 鼠标左键将其拖动到需要的位置后释放鼠标即 可。
层的对齐
在设计网页过程中经常需要将层对齐。对齐层 的操作比较简单，选择需对齐的层，选择“修 改/对齐”菜单中的相应子命令即可。层的对齐 有左对齐、右对齐、对齐上缘、对齐下缘几种 方式。
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板组打 开“CSS样式”面板
新建样式
1.新建样式
（1）在属性面板样式的样式菜单中选择“管理样式”，
在打开的编辑样式表对话框中单击“新建”按钮。
（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
设置框架属性
“框架名称”文本框
“源文件”文本框
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和框架
“属性”面板中的基本相同，不同的是在“行”
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。
网页设计与制作第四章讲稿
4.6.1 创建框架集与框架
HTML语言用标签<FRAMESET>表示框架集， 属性rows表示水平分割几个窗口，属性值可以是 数值、百分数，其中“*”表示分配剩余空间。 属性值的个数代表分割窗口数，并用逗号隔开。 例如，rows=“60,30%,*”表示将窗口水平分割 成三个子窗口，第一个窗口宽度为60像素，为绝 对高度，第二个窗口占整个窗口的50%，为相对 高度，第三个窗口分配剩余部分；属性cols表示 将窗口垂直分割，属性值表达方式与rows相似；
4.6.1 创建框架集与框架
属性frameborder表示框架是否显示边框， 其值只有0和1，0表示不显示边框，1表示 显示边框； 属性border表示框架的边框宽度，以像素 为单位； 属性bordercolor表示框架的边框颜色；属 性framespacing表示框架与框架间的间距。
4.6.1 创建框架集与框架
4.1.3 插入其它常见对象
插入图像 使用Dreamweaver插入图像，点击菜单栏的 【插入】→【图像】，弹出图像选择对话框，选 择图像所在路径，确定添加图像。 图像选择对话框上【URL】文本框会显示添加图 像的路径，图像的路径表达方式可以通过对话框 上【相对于】下拉菜单选择。默认值是【文档】 选项，表示路径表达方式是相对路径，而选项 【站点根目录】表示路径表达方式是根相对路径。
4.6.1 创建框架集与框架
属性scrolling表示窗口滚动条设置，其中 yes 表示一定显示滚动条，no表示从不显 示滚动条，auto表示根据页面大小决定是 否显示滚动条； 属性noresize表示使用者不可以改变这个 窗口边框的位置，如果没有设定noresize 属性，使用者可以随意地调整窗口边框的 位置；
《网页设计与制作》第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课件
一、网页、网站和主页
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”，并单 击“确定”按钮，插入插件， 如右图所示。
页面布局设计
4.3 使用表格排版
表格是由一些被线条分开的单元格组成。线条即表格的边 框，被边框分开的区域被称为单元格，数据、文字、图像 等网页元素均可根据需要放置在相应的单元格中。如图所 示。
在网页中使用表格一般有两种情况：一种是在需要组织数 据显示时用；另一种是在布局网页时用。当表格被用作布 局时，需要对表格的属性进行设置。
步骤2 单击“绘制布局单元格”按钮，鼠标在页面 上变为“+”形，按下鼠标左键拖动可绘制布局单元格。
4.3.4 在布局模式下插入表格和单元格
如图所示：
4.3.5 表格排版实例的制作过程
本小节讲解【例4.1】利用表格进行网页布局的制作过程。 作为专业的设计者，首先利用图形制作软件如： Fireworks、Photoshop等，绘制一张网页草图，然后根 据网页草图利用表格对网页进行排版。
在布局模式下，使用表格进行布局具有定位简单、容 易调整等优点。例如：在布局模式中可以在页面上方便地 绘制布局单元格，可将这些单元格拖动到所需的位置；还 可以方便地创建固定宽度的布局或自动伸展为整个浏览器 窗口宽度的布局。
4.3.4 在布局模式下插入表格和单元格
1、绘制布局表格与布局单元格 首先从标准模式切换到布局模式：单击“插入”栏｜
4.4 使用层排版
除了表格以外，层是另外一种定位网页元素的方法。本 节介绍层的概念和操作，并通过一个实例说明如何利用层 进行页面布局的设计。
4.4.1 实例导入：层排版网页
Dreamweaver中的层是一种网页元素定位技术，它可 以包含文字、图像、表格、插件甚至其它层。一个网页中 可以含有多个层，层的特点在于各个层之间可以重叠，并 可以决定每个层是否可见，还可以定义各个层之间的层次 关系。层可以转换成表格，通过与“时间轴”及行为的结 合，能够实现动态交互效果。
网页设计第四章
4.1 Flash概述
Flash 是一种创作工具，设计人员和开发 人员可使用它来创建演示文稿、应用程序和 其它允许用户交互的内容。在Flash中可以 以不同的方式制作效果不同的动画，例如逐 帧动画、补间动画、引导和遮罩动画等，还 可以制作网页中的导航菜单动画。在动画创 作时，为了让设计的动画具有生动、形象的 感觉，还可以在动画中添加声音，或者将视 频生成流媒体发布到网络中等后期的处理， 使动画不仅内容丰富，而且在形式上也呈现 出多样化。
4.3.4 实例的使用
实例是指位于舞台上或嵌套在另一个元件 内的元件副本。
4.3.5 Flash绘图
绘图是Flash设计的基本能力之一，Flash提供了 许多绘图工具 1．线条工具：通过“属性”检查器，可以对直 线进行详细的设置
2．铅笔工具 “线条工具”对话框 可以在“工具”面板【选项】下选择绘画模
4.3 Flash基础
本节主要围绕Flash的各种可用资源进行， 从库面板，到各种设计制图工具，从绘制线 到绘制复杂图形，这些都是Flash创作动画 的基础知识。本节重点是使用户可以掌握各 种绘图技巧和“工具”面板中的绘图和文字 工具的使用方法。
4.3.1 使用Flash资源
Flash自带有丰富的资源。从设计开始到设 计的每一个细节，可以使用Flash的自带资 源来实现，也可以使用外部的资源实现。
发布Flash文档可以通过执行【文件】|【发布设 置】菜单命令或者直接在文档“属性”检查器中 点击“发布 随着添加、删除发布的类型，“发布设置”对话 框对应的发布类型选项卡也将随之变化 设置好发布设置后，在编辑影片过程中需要测试 影片的运行效果 相应的热键： ①测试文档：“Ctrl+Enter” ②调试文档：“Ctrl+Shift+Enter” ③测试场景：“Ctrl+Alt+Enter”
《网页设计与制作》第04章
• 表格宽度控制：依次为清除列宽、将表宽度转换为像素 表格宽度控制：依次为清除列宽、
单位、将表宽度转换为百分比单位。 单位、将表宽度转换为百分比单位。
• 表格高度控制：依次为清除列宽、将表列度转换为像素 表格高度控制：依次为清除列宽、
单位、将表列度转换为百分比单位。 单位、将表列度转换为百分比单位。
拆分单元格” 弹出“拆分单元格”对话框。 拆分单元格”按钮 ，弹出“拆分单元格”对话框。
• 步骤6：在对话框中设置行为3。单击“确定”按钮。 步骤6 在对话框中设置行为3 单击“确定”按钮。 • 步骤7：保存。按F12预览。 步骤7 保存。 F12预览 预览。
4.2 布局视图的使用
4.2.1 绘制布局视图
属性面板。 属性面板。
• 单元格属性面板参数说明： 单元格属性面板参数说明： • 合并与拆分单元格：将选取的多个单元格合并，或将单元格 合并与拆分单元格：将选取的多个单元格合并，
拆分为多行或多列。 拆分为多行或多列。
• 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 • 宽、高：设置单元格的宽度和高度。 设置单元格的宽度和高度。 • 不换行：购选此项，文本超出单元格的宽度时不自动换行， 不换行：购选此项，文本超出单元格的宽度时不自动换行，
《网页设计与制作》
第四章 网页布局
讲解提纲
• 4.1 表格的使用 • 4.2 布局视图的使用 • 4.3 层的使用 • 4.4 框架的使用
本章教学目标：
• • • •
1．掌握新建表格 编辑表格 2．熟练掌握布局视图的使用 3．掌握层的使用在页面中的应用 4．掌握框架的技术使用
4.1表格的使用 4.1表格的使用
《网页设计与制作》第04章
• 步骤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)。
本章要点
设置网页属性
页面布局
5
使用框架布局
层的使用 使用CSS
CSS属性
返回
6
网页标题
如果文档工具栏没有显示，使用菜单“查看”→“工 具”→“文档”可打开其显示。
返回
页面设置
• • • • • 1．外观 2．链接 3．标题 4．标题/编码 5．跟踪图像
7
返回
文件头设置
1.META
36
层的基本操作
• 对层可进行选择、移动、调整大小和对齐 等操作，这些操作大多数都可在“层”面 板中进行。
37
返回
层的基本操作
• • • • • • 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面
38
返回
显示“层”面板
• 选择“窗口/层”命令或按F2键显示“层” 面板，“层”面板用于对层进行管理和操 作。 • 当前网页中的层都会显示在“层”面板的 列表中，嵌套层以树状结构显示。
改”→“转换”→“表格到层”打开转换表格为层 对话框。
返回
使用层实现图文混排1
使光标出现在编辑区中，移动鼠标指针到“ 插入”面板的“常用”选项卡中，单击描绘层 按钮。在网页编辑区中拖动鼠标，画出一个区 域，该区域即为插入层的大小。
注意，每插 入一个新层，在 网页顶端就会增 加一个层标记，
51
返回
使用层实现图文混排2
41
返回
2．多个层的选择
• 选择多个层可按住Shift键后依次在层中或 层边框上单击，也可按住Shift键后依次在 “层”面板中单击层的名称。
42
返回
层的拖动
• 选择需移动的层，将光标移到层边框上， 按住鼠标左键将其拖动到需要的位置后释 放鼠标即可。
43
返回
层的对齐
• 在设计网页过程中经常需要将层对齐。对 齐层的操作比较简单，选择需对齐的层， 选择“修改/对齐”菜单中的相应子命令即 可。层的对齐有左对齐、右对齐、对齐上 缘、对齐下缘几种方式。
返回
52
使用CSS
CSS基础
1.什么是CSS
CSS（Cascading Style sheet）是1996年出现的有关 网页制作的技术，中文叫做级联风格页或层叠样式表。 使用CSS定义的网页风格可以控制HTML语言标志的一 些诸如字体、边框、颜色与背景等属性，也可以通过定
53
义外部风格文件实现整个网站页面风格的统一。
33
_top：目标网页的内容在最顶层框架窗口中显示。
2.设置网页的缺省显示区域 使用菜单“插入”“HTML”“文件头标签”“基
础”，打开“基础”对话框，在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。
返回Biblioteka 一个实例利用框架为“书香盈袖”网页布局页面，
并为其添加网页元素。
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
返回
网页的风格3
4
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
返回
58
重定义标签的外观 新建样式——选择器类型——标签 使用类定义样式 新建CSS样式——选择器类型——类 使用伪类定义超级链接的样式 新建CSS样式——选择器类型——高级 a:link、a:visited、a:hover、a:active
39
返回
层的选择
• 要对层进行操作和设置需先将其选择，单 个层和多个层的选择方法不同。
40
返回
1．单个层的选择
• 选择单个层有如下几种方法：
• • • • 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后，在“层”面板中会以反白方式显示该 层名称。
设置框架属性
设置框架集属性
30
返回
设置框架属性
“框架名称”文本框
“源文件”文本框
31
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
返回
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和
返回
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％。
返回
55
56
• • • •
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板 组打开“CSS样式”面板
返回
新建样式
1.新建样式
（1）在属性面板样式的样式菜单中选择“管理样式”，
57
在打开的编辑样式表对话框中单击“新建”按钮。
（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
32
框架“属性”面板中的基本相同，不同的
是在“行”或“列”文本框中可设置框架 的行或列的宽度，在“单位”下拉列表框 中选择单位后即可输入所需数值。
返回
框架链接的目标
1.设置网页元素的链接目标
_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。
返回
框架与框架集的概念
• 用框架布局网页时有如下的技巧和规则：
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
返回
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”，使得框架边框被选中。
返回
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
返回
现有层的嵌套层，如果不按住[Alt]键绘制的是连个
重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的
另一个层上，可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层，使用菜单“修改”→“转
换”→“层到表格”打开转换层为表格对话框。
50
2.将表格转换成层
选中要转换为层的表格，使用菜单“修
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
（1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、表格等。
返回
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。
29
右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。
返回
设置框架与框架集的属性
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％。