第7章 网页设计与制作-CSS样式使用
HTML5网页设计与制作教学课件第七章使用表格
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
《网页设计与制作》习题及答案
第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>）是水平线标签，可以在页面生成一条水平线。
网页设计与制作教程(第4版)电子教案
客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
让浏览者访问。上传工具选择合适与否将影响对网站更新维 护的效率。 1．CuteFTP 2．FlashFXP 3．LeapFTP 4．其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。
1.6 常用网页制作软件
1.6.5 网页设计工具的发展动向
从平面设计的角度来看，每个虚拟界面就是一个版面， 可以利用平面设计理念对其进行设计。但是，网页毕竟是计 算机技术和多媒体技术的产物，具有某些一般版面所没有的 特点和性质。为了对虚拟版面进行设计，就必须拓展设计的 范围，丰富设计的手段，如对于版面各种媒介的设计与制作， 要应用一些新的技术。
2.1 基本概念
如果在浏览器的地址栏中输入网站地址，浏览器会自动 连接到这个网址所指向的网络服务器，并出现一个默认的网 页（一般为index.html或default.html），这个最先打开 的默认页面就被称为“主页”或“首页”。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页
静态网页指客户端的浏览器发送URL请求给WWW服务 器，服务器查找需要的超文本文件，不加处理直接下载到客 户端，运行在客户端的页面是已经事先做好并存放在服务器 中的网页。其页面的内容使用的仅仅是标准的HTML代码， 静态网页通常由纯粹的HTML/CSS语言编写。
版面编排的首要任务就是根据网页传达内容的需要，将 不同的文字和图片按照一定的次序用最合理的编排和布局组 成一个有机的整体并展现出来。版面编排应注意以下几点。
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
《网页设计与制作案例实战教程》-教案
网页设计与制作案例实战教程教案第1章网页设计基础1.收集不同汽车网页并分析其特点,如图为比亚迪官方网站首页。
2.收集不同手机网页并分析其特点,如图为华为官方网站首页。
第2章 Dreamweaver入门操作件。
小结熟悉Dreamweaver 的工作界面掌握站点的创建与管理掌握文档的基础操作课后练习1.酷乐冰屋根据所学内容制作酷乐冰屋网页。
2.哎呀宠物根据所学内容制作哎呀宠物网页。
第3章 HTML知识准备1.微著齿轮根据所学内容制作微著齿轮网页。
2.闪电速运根据所学内容制作闪电速运网页。
第4章页面与文本第5章图像与多媒体元素1.美相图片根据所学内容制作美相图片网页。
2.赛克音乐根据所学内容制作赛克音乐网页。
第6章超链接的应用第7章使用表格布局网页1.倏尔鲜花根据所学内容制作倏尔鲜花网页。
2.卓越办公根据所学内容制作卓越办公登录页。
第8章 CSS网页美化技术根据所学内容美化瑞成文具网页，前后对比效果如图。
根据所学内容美化玩偶之家网页，前后对比效果如图。
第9章 Div+CSS网页布局技术掌握CSS与Div布局基础小结掌握CSS布局方法1.湖江船业根据所学内容制作湖江船业网页，效果如图。
2.安居养老根据所学内容制作安居养老网页，效果如图。
第10章表单的应用1.倏尔鲜花根据所学内容制作倏尔鲜花网页。
2.卓越办公根据所学内容制作卓越办公登录页。
第11章模板和库根据所学内容制作格纹帽业网页。
第12章行为的应用根据所学知识为动物保护协会网页添加行为。
《网页设计与制作》课程标准
《网页设计与制作》课程标准学时数：48学时________________ 课程性质：专业必修课—适用专业：计算机应用专业—一、本课程的性质、地位、作用以及与其它相关课程内容的联系《网页设计与制作》是计算机应用专业的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
二、课程教学目标本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：*掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
*掌握各种网页元素在DreamWeaVer中的使用。
例如表格、文本、图像、超级链接、层和表单等。
*掌握测试和发布网站的方法。
包括网站测试的内容和方法。
*能够解决一些网页设计中的常见问题。
三、本课程学时安排四、课程教学内容和基本要求（按章节详细阐述）第一章：网页设计概述（一）教学重点和难点重点：Dreamweavercs5的参数设置、Dreamweaver的站点设置。
难点：DreamWeaVer的站点设置。
（二）教学内容和基本要求教学内容：基础知识，初识DreamWeaver,DreamWeaVerCS5的参数设置，设置站点。
基本要求：了解网页设计基本知识；掌握DreanlweaVerCS5的参数设置；熟练掌握Dreamweaver的站点设置。
第二章：表格布局（一）教学重点和难点重点：表格基本操作、表格布局。
难点：表格布局。
（二）教学内容和基本要求教学内容：表格基本操作，表格高级应用，表格布局，网页设计基础。
基本要求：了解表格基本操作、表格高级应用及网页设计基础；掌握表格基本操作；熟练掌握表格布局。
第三章：CSS样式表（一）教学重点和难点重点：CSS样式表应用。
第7章 网页制作-浮动与定位_教学设计(教案)
《网页设计与制作(HTML+CSS)》教学设计(教案)课程名称：网页设计与制作(HTML+CSS) 授课年级：XX年级授课学期：XX学年第一学期教师姓名：某某老师XX年XX月XX日课题名称第7章浮动与定位计划学时6 课时内容分析默认情况下，网页中的元素会在浏览器窗口中从上到下或从左到右一一罗列。
如果仅仅按照这种默认的方式进行排版，网页将会单调、混乱。
为了使网页的排版更加丰富、合理，在CSS中可以对元素设置浮动和定位样式。
本课程将对元素的浮动和定位进行详细讲解。
教学目标及基本要求要求学生初学者能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，为后面学习网页布局打下良好的基础。
重点及措施教学重点：清除浮动的几种方法、overflow属性、相对定位和绝对定位的应用。
难点及措施教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮动。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解教学过程第一课时（认识浮动、元素的浮动属性float）认识浮动初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，如下图所示。
通过这样的布局制作出来的页面看起来呆板、不美观，然而大家在浏览网页时，会发现页面中的元素通常会按照左、中、右的结构进行排版，如下图所示。
通过这样的布局，页面会变得整齐、有节奏。
想要实现第二张图所示的效果，就需要为元素设置浮动。
所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
元素的浮动属性float定义浮动在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}在上面的语法中，常用的float属性值有三个，分别表示不同的含义，具体如下：●left：元素向左浮动●right:元素向右浮动●none:元素不浮动（默认值）✧不设置浮动当对页面中的所有元素均不应用float属性，也就是说元素的float属性值都为其默认值none。
《网页设计与制作》课程标准
欢迎阅读广西玉林高级技工学校《网页制作与设计》课程标准一、课程基本信息3．理解HTML 页面框架的作用，能够针对需求进行框架的设计；4．掌握各类HTML 表单元素标签，能够进行表单设计；5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计；6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局；8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。
2.职业技能目标1．能独立进行资料收集与整理、具备用户需求的理解能力；2．能根据项目需求，具备项目页面的设计与实现能力；3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力；5．能根据DOM 树形结构，进行页面DOM 的控制；12345注重理论与实践相结合、教材内容与行业标准要求相结合，强调理论在实践过程中的应用。
（二）教学建议从《网页设计与制作》的实际问题出发，精心准备各种典型案例，构建课程的宏观教学设计。
例如，公司网站、网上鲜花直销、个人网站精选、书籍专卖等。
以若干个案例为载体，形成循序渐进、种类多样的项目群，构建完整的教学设计布局。
1、教学采用“四阶段教学法”，将“教、学、练、做”融为一体。
教学体现“教师为主导，学生为主体，训练为主线”的原则，课堂上可以采用“四阶段教学法”：第1个阶段，案例引入，提出问题。
通过案例演示，提出问题，给出知识点，讲解案例应用背景，给学生一个切入点，建立感性认识。
目的是激发学生的学习兴趣、让学生感到学有所用，从而明确本次课的教学目标。
第2个阶段，学生自主学习，尝试解决问题。
充分利用我校以及互联网网络教学资源，引导学生自主学习，找到解决问题的方法和操作技能，培养学生的自主学习意识和学习方法。
HTML5+CSS3网页设计与制作单元7 网页特效与制作商品详情页面
目录导航
渐进训练
任务 7-1 设计与制作电脑版商品详情页面0701.html
.l_column .product_contentbox { margin-bottom: 10px; }
#product_main .r_column { float: right; width: 230px; }
【任务7-1-1】规划与设计商品详情页面的布局结构
表7-2 商品详情页面0701.html 主体布局结构对应的CSS 样式代码
HTML5+CSS3网页设计与制作单元7 网页特效与制作商品详情页面
本章导读
The chapter’s introduction
将JavaScript 程序嵌入HTML 代码中，对网页元素进行控制，对用户操作进行响应， 从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些 恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏 性和趣味性。
HTML代码
<div class="pages_nav"> </div> <div id="product_focus"> <div class="product_title"> </div> <div class="l_column"> <div class="slider"> <a> <div class="jqzoom"> </div> </a> <div id="sPicture"> </div> <div class="clear"> </div> <div class="btn"> </div> </div> <div class="info"> <div id="updatePanel4"> </div> <div class="support_payment_box"> </div>
简述css的定义与使用方法
简述css的定义与使用方法CSS（层叠样式表）是一种用于描述网页上的元素样式的语言。
它可以控制网页的布局、字体、颜色、背景等方面的外观。
本文将简述CSS的定义与使用方法。
一、CSS的定义CSS是一种样式表语言，用于描述网页上的元素样式。
它与HTML结合使用，通过为HTML元素添加样式，可以改变其外观和排版效果。
CSS的核心思想是将样式和内容分离，使得网页的结构和表现分开，提高了网页的可维护性和灵活性。
二、CSS的使用方法1. 内联样式：可以直接在HTML元素的标签中使用style属性来定义样式。
例如，可以通过设置font-size属性来改变文字的大小：`<p style="font-size: 16px;">这是一段文字</p>`。
2. 内部样式表：可以在HTML文档的<head>标签中使用<style>标签来定义样式。
在<style>标签中，可以使用选择器来选择要应用样式的HTML元素，并设置相应的样式。
例如，可以使用p选择器来选择所有的段落元素，并设置它们的字体颜色为红色：`<style> p {color: red;} </style>`。
3. 外部样式表：可以将样式代码写在一个独立的CSS文件中，然后在HTML文档中使用<link>标签将CSS文件链接到HTML文档中。
这样可以实现样式的复用和统一管理。
例如，可以在一个名为style.css的CSS文件中定义样式，然后在HTML文档中使用<link>标签将其链接：`<link rel="stylesheet" type="text/css" href="style.css">`。
4. 继承样式：HTML元素可以继承其父元素的样式。
例如，如果在一个<div>元素中设置了字体颜色为蓝色，那么该<div>元素内的所有子元素的字体颜色都会继承这个蓝色。
第7章 使用AP Div元素——(网页设计与制作共11章)
图7-6 创建嵌套的AP元素
图7-7将apDiv1嵌套在apDiv2中
提示：如果已启用“AP元素”控制面板中的“防止重叠”选项，那 么在移动AP元素时将无法使AP元素相互重叠。
4．对齐AP元素 使用AP元素对齐操作可将一个或多个AP元素与最后一个被 选中AP元素的边界对齐。当对选定AP元素进行对齐时，未 选定的子层可能会因为其父层被选定并移动而随之移动。为 了避免出现这种情况，不要用嵌套层。对齐两个或更多个 AP元素有以下几种方法。 （1）应用菜单命令对齐AP元素 在文档窗口中，按住〈Shift〉键，依次选中需要对齐的多个 AP元素，然后选择“修改→排列顺序”命令，在其子菜单 中选择一种对齐方式： 左对齐：以最后一个被选中AP元素的左侧为基准对齐。 右对齐：以最后一个被选中AP元素的右侧为基准对齐。 上对齐：以最后一个被选中AP元素的顶部为基准对齐。 对齐下缘：以最后一个被选中AP元素的底部为基准对齐。
图7-4 “AP元素”面板
图标：如果某一个AP 元素左侧有该图标，表示该AP 元 素可见，如果图标变成，则不可见。如果没有该图标，表示 该层继承其父级AP Div元素的可见性。如果没有父级AP Div 元素，则父级AP Div元素可以看成其本身，通常情况下，这 意味着是可见的。可以通过单击图标控制该AP Div的可见属 性。 ID：该属性用来显示和更改AP Div元素的名称。通过双击ID AP AP 下面对应的AP元素默认名称来更改AP元素的名称。 Z：该属性见“属性”面板相关设置。可以通过双击AP Div 元素的Z值属性来更改其值。
类：可以将CSS样式表应用于AP Div。 溢出：设置AP Div中的内容超过其大小时的处理方法。“溢 出”右侧下拉列表框中包括四个可选项：“visible（可 见）”，选择该项，当AP Div中内容超过其大小时，AP Div 会自动向右或者向下扩展。“hidden（隐藏）”，选择该项， 当AP Div中内容超过其大小时，AP Div的大小不变，也不会 出现滚动条，超出AP Div内容不被显示。“scroll（滚 动）”，选择该项，无论AP Div中的内容是否超出AP Div的 大小，AP Div右端和下端都会显示滚动条。“auto（自 AP Div auto 动）”，选择该项，当AP Div内容超过其大小时，AP Div保 持不变，在AP Div右端和下端都出现滚动条，以使其中的内 容能通过拖动滚动条显示。 剪辑：设置AP Div可见区域大小。在“上”、“下”、 “左”、“右”文本框中，可以指定AP Div可见区域上、下、 左、右端相对于AP Div边界距离。AP Div经过剪辑后，只有 指定的矩形区域才是可见的。
《网页设计与制作》课程标准
《网页设计与制作》课程标准《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
为今后从事网页设计与制作、网站开发和管理奠定基础。
在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：网页设计开发岗位职业能力教学内容（理实一体化课）基本开发工具的使用网页基本概念（第1章）DW CS6软件介绍（第2章）建立与管理站点（第3章）网页基本元素的处理制作主要内容为文本的网页（第4章）插入与编辑图像（第5章）插入多媒体元素（第6章）创建超级链接（第7章）HTML基础（第13章）网页布局表格处理与网页布局（第6章）AP Div的应用（第9章）使用CSS+DIV布局网页（第11章）网页美化CSS样式表（第10章）网页交互行为（第12章）动态网页基础（第15章）网页及元素的复用创建和使用模板（第9章）创建和使用库（第10章）网页与网站基本概念、网页基本组成元素、常用网页制作软件主要教学内容：1.1 网页制作基础知识1.2 网页的基本构成元素1.3 网页制作常用软件和技术第二章Dreamweaver CS6轻松入门（2学时）教学目标：DW CS6软件的安装、用DW建立网页的方法、打开和保存网页的方法主要教学内容：2.1 Dreamweaver CS6工作环境2.2 [插入]栏2.3 Dreamweaver CS6新功能第三章站点的搭建与管理（4学时）教学目标：本地站点与远程站点的概念、站点文件夹的管理主要教学内容：3.1 创建本地站点3.2 管理点站3.3 管理站点中的文件4.3 使用站点地图第四章网站建设规范和基本流程（2学时）教学目标：IIS信息服务器的搭建与管理、建立、发布主页、建立和管理站点主要教学内容：4.1 网站建设规范4.2 网站建设的基本流程第五章创建结构清晰的文本网页（6学时）教学目标：1. 在网页中添加文字和字符2. 使用背景、列表美化文本网页主要教学内容：5.1 设置文本属性5.2 插入其他元素5.3 创建项目列表和编号列表5.4 插入网页头部内容5.5 综合案例-创建基本文本网页第六章创建绚丽多彩的图像和多媒体网页（6学时）教学目标：1. 了解网页中常用的图像格式2. 网页中插入图像的方法3. 网页中插入多媒体的方法主要教学内容：6.1 网页中常用的图像格式6.2 编辑图像6.3 插入多媒体6.4 综合案例-创建图文混排网页第七章创建超级链接（6学时）教学目标：超级链接的概念、文字与网页间的链接、图片热点和锚记主要教学内容：7.1 超级链接的基本概念7.2 创建超级链接的方法7.3 创建各种类型的链接7.4 管理超链接7.5 综合实例第八章使用表格排版网页（6学时）教学目标：1. 表格的编辑处理2. 用表格制作网页元素主要教学内容：8.1 创建表格8.2 设置表格及其元素属性8.3 表格的基础操作8.4 表格的基本应用8.5 综合实例-利用表格排版网页第九章使用DIV和Spry灵活布局网页（4学时）教学目标：1. AP Div的创建2. 在AP Div中插入网页元素3. 设置AP Div的属性主要教学内容：9.1 插入AP Div9.2 设置AP Div属性9.3 使用Spry布局对象第十章使用CSS修饰美化网页（6学时）教学目标：1、CSS样式表的类型2、CSS样式表的创建3、不同样式表的样式应用主要教学内容：10.1 CSS简介10.2 使用CSS10.3 设置CSS样式10.4 CSS滤镜设计特效文字10.5 综合实例第11章CSS+DIV布局方法（6学时）教学目标：盒子模型概念、CSS布局理念、常见布局类型主要教学内容：11.1 初识DIV11.2 CSS定位11.3 CSS布局理念11.4 常见的布局类型第12章使用模板和库提高网页制作效率（6学）教学目标：了解模型的库的概念，会使用库创建项目主要教学内容：12.1 创建模板12.2 使用模板12.3 管理模板12.4 创建和应用库项目第13章使用行为和动作为网页添加活力（6学时）教学目标：重点区分行为、触发事件、动作、对象等概念和区别主要教学内容：13.1 行为的概念13.2 行为的动作和事件13.3 使用Dreamweaver内置行为第14章网站页面布局设计与色彩搭配（2学时）教学目标：网页色彩搭配知识、常见页面版式主要教学内容：14.1 网页版面布局设计14.2 常见版面布局形式14.3 网页色彩搭配知识第15章用表单创建交互式网页（6学时）教学目标：表单的基本概念、常用表单元素的插入方法主要教学内容：15.1 表单概述15.2 创建表单域15.3 插入文本域15.4 复选框和单选按钮15.5 列表和菜单15.6 跳转菜单的使用15.7 使用按钮激活表单15.8 使用隐藏域和文件域15.9 综合案例五、课程实施条件本课程需要一间高性能联网的计算机实训室，需满足每位学生一台电脑。
网页设计与制作教程第7章 使用表格
1
本章要点
7.1 使用表格显示内容 7.2 使用表格布局网页
2/17
7.1 使用表格显示内容
本节介绍在网页中制作表格显示网页数据， 内容包括：
表格基本操作 使用表格显示数据
3/17
7.1.1 表格操作
表格用于在网页上显示表格型数据。表格由一行 或多行组成，每行又由一个或多个单元格组成。 表格的基本操作包括：
10/17
7.1.1 表格操作（续）
在表格中添加内容 在文档插入表格之后就可以在单元格内添 加文本、超链接、图像等网页内容，方法 是：首先定位插入点到单元格中，然后使 用插入栏中的按钮来添加网页对象或文本。
11/17
7.1.2 使用表格显示数据
演示——使用表格显示数据（p131~p134）
17/17
8/17
7.1.1 表格操作（续）
拖拽鼠标选择相邻的单元格成为任意矩形 区域时，选择“修改”>“表格”>“合并单 击格”命令或者单击属性检查器上的“合 并单元格”按钮 ，可以合并所选单元格。
9/17
7.1.1 表格操作（续）
选择单元格后执行“修改”>“表格”>“拆 分单元格”命令或者单击属性检查器上的 “拆分单元格”按钮 ，打开“拆分单击格” 对话框，如图 7.4 所示。 在“把单元格拆分”选项中选择“行”或 “列”，在行数或列数框内输入要拆分单 元格的行数或列数，单击“确定”按钮， 可以将一个单元格拆分为若干行或列。
15/17
7.2.2 使用布局表格（续）
演示——使用布局表格制作页面 （p136~p142）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
行内样式
这种样式是直接添加在HTML的标签里，语法如下：
<标签名 style=”样式规则的集合”>网页内容< /标签名>
【例】：
<p style=”color: blue; font-size: 10pt”>CSS实例</p>
代码说明：
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显 示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥 样式表的优势“内容结构和格式控制分别保存”。
案例（文字滚动效果） <marquee direction="up" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"> <div>文字内容</div></marquee>
div设置宽高 400*100 固定定位 top: 20% left: 25%;
复习
第7章 CSS样式使用
$ [知识目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
8 [能力目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
什么是CSS层叠样式表
• CSS（Cascading Stylesheets，层叠样式 表）是一种制作网页的新技术，也有的人称 之为层叠样式表（Cascading Stylesheet） ，现在已经为大多数的浏览器所支持，成为 网页设计必不可少的工具之一。
看看段落中的字体有什么变化？
语法规定
4．注释
你可以在CSS中插入注释来说明你代码的意思 ，注释有利于你或别人以后编辑和更改代码时 理解代码的含义。在浏览器中，注释是不显示 的。CSS注释以"/*" 开头，以"*/" 结尾。
CSS的分类
• 根据添加层叠样式表的方法，可以将 CSS分为以下三类：
– 行内样式（内联样式、直接样式） – 嵌入样式 – 外部样式
为了使你定义的样式表方便阅读，你可以采用分行的书写格式 【例】：
p{ text-align: center; color: black; font-family: arial }
（段落排列居中，段落中文字为黑色，字体是arial）
【例】： 注意：
“属性:值”又叫做样式规则，大括号内允许出现多条规则，规则与规 则之间必须用“;”将其隔开，最后一条规则的“;”可以不写。
优点：
上面的“color: blue; font-size: 10pt”这个样式表就可以修改本文 档中所有P标签的格式。
外部样式
这种样式是将样式表内容保存在一个以 “.css”为扩展名的外部文件里，然后再使 用链接或导入法将其引用到HTML文档里 来。
选择器
• 要使用css对HTML页面中的元素实现一 对一，一对多或者多对一的控制，这就需 要用到CSS选择器。
要用CSS就可以轻松实现，从而更快地下载页面 。
• 使页面的字体变得更漂亮，更容易编排，使页面 真正赏心悦目。
• 你可以轻松地控制页面的布局 。 • 你可以将许多网页的风格格式同时更新，不用再
一页一页地更新了。你可以将站点上所有的网页 风格都使用一个CSS文件进行控制，只要修改这 个CSS文件中相应的行，那么整个站点的所有页 面都会随之发生变动。
一个网页的基本结构由标题、标志、页眉、导 航栏、主要内容区和页脚等。
标题：用来提示该页面内容的，通常显示在IE的 标题栏。 标志：网站独特的形象标识。 页眉：多用于设置网站的宗旨、宣传口号和广告 语等。 导航栏：用于帮助访问者快速进入想要的页面， 通常放在页面的顶端和左边。 内容区：它是页面设计的主体元素。 页脚：多用于标注站点所属公司的名称、地址、 版权和联系方式等。
和p元素（段落）都归为“center”类，这使两个元素的样式都跟随 “.center”这个类选择器： – 这个标题是居中排列的 – 这个段落也是居中排列的
• 注意：
– 这种省略HTML标签的类选择器是我们经后最常用的CSS方法， 使用这种方法，我们可以很方便的在任意元素上套用预先定义好 的类样式。
课堂案例制作
【例】：
Table TR TD P{ font-size: 9pt } （“文字尺寸为9号字”这条规则只能对P标签有效， 前提是：这个P标签必须是出现在TD中，TD又必须是 出现在TR中，这个TR又必须是出现在TABLE中。其他 地方的P标签是不受到这条规则影响的）
课堂案例
使用列表制作导航栏。
• 复习：css层叠样式表 • css三个组成：
p { font-family: "sans serif"} （定义段落字体为sans
serif）
语法规定
3．如果需要对一个选择器指定多个属性时，我们使用分号将所有的 属性和值分开 【例】：
p { text-align: center; color: red} （段落居中排列；并且段落中的文字为红色）
嵌入样式举例
<head> <style type=”text/css”>
<!— P{color: blue; font-size: 10pt} -->
</style> </head> <body>
<p>CSS实例</p>
</body> 代码说明：
这样也可以将“CSS实例”修改成为蓝色显示字体大小为10pt 。
CSS的语法
• CSS的定义是由三个部分构成：
– 选择器（selector），属性（properties）和 属性的取值（value）。
• 基本格式如下：
– Selector { property:value} – 选择器 { 属性 :值 ；属性:值； }
语法规定
1．属性和值要用冒号隔开 2．如果属性的值是多个单词组成，必须在 值上加引号，比如字体的名称经常是几个 单词的组合： 【例】：
• W3C（The World Wide Web Consortium） 把动态HTML（Dynamic HTML）分为三个 部分来实现：脚本语言（包括JavaScript、 Vbscript等）、支持动态效果的浏览器和 CSS样式表。
CSS的用途
• 在几乎所有的浏览器上都可以使用。 • 以前一些非得通过图片转换实现的功能，现在只
ID选择器
定义ID选择器要在ID名称前加上一个“#”号。和 类选择器相同，定义ID选择器的属性也有两种方 法。下面这个例子，ID属性将匹配所有id="intro" 的元素：
【例】：
#intro {
font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent
• 举例：要两个不同的段落，一个段落向右对齐，一个段落 居中，先定义两个类：
• 【例】：
p.right { text-align: right} p.center { text-align: center} – 然后用在不同的段落且只能用在段落里，只要在HTML标签后跟上
“class = 选择器名” – 这个段落就会向右对齐的 – 另外一个段落就会是居中排列的
一个网页的基本结构由标题、标志、页眉、导 航栏、主要内容区和页脚等。
标题：用来提示该页面内容的，通常显示在IE的 标题栏。 标志：网站独特的形象标识。 页眉：多用于设置网站的宗旨、宣传口号和广告 语等。 导航栏：用于帮助访问者快速进入想要的页面， 通常放在页面的顶端和左边。 内容区：它是页面设计的主体元素。 页脚：多用于标注站点所属公司的名称、地址、 版权和联系方式等。
行内样式 嵌入样式 外部样式 选择器：选择器名称{ 属性：属性值；} 标签选择器：p{属性：属性值； } 包含选择器：body ul li{ }
table tr td{ }
$ [知识目标]
掌握CSS中组选择器的使用方法 掌握CSS中ID选择器的使用方法 掌握简单的DIV布局
8 [能力目标] 可以使用ID选择器进行简单网页布局
• 注意：
– 类的名称可以是任意英文单词或以英文开头与数字的组合，一般 以其功能和效果简要命名。
class（类）选择器
• 类选择器还有一种用法，在选择器中省略HTML标签名， 这样可以把几个不同的元素定义成相同的样式
• 【例】：
.center { text-align: center} – （定义.center的类选择器为文字居中排列） – 这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）
<!-- 样式表的具体内容 -->
</style>
</head>
type=”text/css”表示样式表采用MIME类型，帮助不 支持CSS的浏览器过滤掉CSS代码，避免在浏览器 面前直接以源代码的方式显示我们设置的样式表。 但为了保证上述情况一定不要发生，还是有必要在 样式表里加上注释标识符“< !--注释内容-->”。
重点难点： DIV布局时对定位的运用 DIV布局中对浮动的使用
组选择器
把相同元素的选择器组合起来书写，用逗号 将选择器分开，这样可以减少样式重复定义 ：
选择器1，选择器2，选择器3 {属性1：值1；属 性2：值2；属性3：值3}
【例】：
h1, h2, h3, h4, h5, h6 { color: green } （这个组里包括所有的标题元素，每个标题元素 的文字都为绿色）
注意：
这里就没有选择器了，p标签在这充当了选择器的用途。