网页设计与制作第12章
网页设计与制作基础教程ch12简明教程PPT课件
网页设计与制作基础教程
12.1.1
测试站点步骤
将站点上传到服务器并声明可供浏览之前，建议先在本地进行测试 。确保页面在目标浏览器中如预期的那样显示和工作，而且没有断开 的链接，页面下载也不会占用太长时间。还可以通过运行站点报告来 测试整个站点并解决出现的问题。站点的测试主要包括以下几个步骤 。 确保页面在目标浏览器中正常浏览 测试浏览器兼容性 测试页面的文件大小以及下载这些页面所占用的时间： 使用站点报告来测试站点 验证代码 对发布后的站点进行更新和维护
网页设计与制作基础教程
12.1.2
检查和修复超链接
在Dreamweaver CS4的编辑平台下，可以查看整个网站页面间 的链接关系，根据需要添加、修改或删除链接，然后通过链接检查、 修复工具对网站中某个文档或整个站点进行测试，修复错误链接，并 在站点地图中观察网站结构变化。 选择【窗口】|【结果】|【链接检查器】命令，打开【链接检 查器】选项卡面板，如图所示。可通过该选项卡检查并修复站点的链 接。
网页设计与制作基础教程
12.1.4 站点其他测试
除了链接测试和浏览器测试以外，还可以进行负载测试和压力测试。
网页设计与制作基础教程
12.1.5
使用报告测试站点
在Dreamweaver CS4中，可以对当前文档、选定的文件或整个 站点的工作流程或HTML属性运行站点报告，还可以使用报告来检查 站点中的链接。 选择【窗口】|【文件】命令，打开【文件】面板，如图所示 。在该面板中可以选择要打开的站点文件。选择【站点】|【报告】命 令，打开【报告】对话框，如图所示。
网页设计与制作基础教程
第12章 测试和发布站点
本章介绍网站的测试、调试和上传方法，如何利用站点地图、 设计备注等工具来管理站点，以及站点的维护方法和技巧。 Dreamweaver CS3包含大量管理站点的功能，还具有与远程服务器进行 文件传输的功能。可以使用站点窗口来组织本地站点和远程站点上的 文件，将本地站点结构复制到远程站点上，也可以将远程站点结构复 制到本地系统中。。
网页设计与制作（附微课视频第2版）参考答案
⽹页设计与制作（附微课视频第2版）参考答案第⼀章习题参考答案⼀、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B⼆、简答题1．答：URL是UniformResourceLocation的缩写,译为“统⼀资源定位符”，URL是Internet 上⽤来描述信息资源的字符串,主要⽤在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采⽤URL可以⽤⼀种统⼀的格式来描述各种信息资源,包括⽂件、服务器的地址和⽬录等；2答：⽂本、图像、动画、视频等。
3.答：⽹页结构语⾔的作⽤是将⽹页需要的内容以结构化、模块化的⽅式总结和存储，供表现语⾔和⾏为进⾏调⽤。
⽹页结构语⾔包括可扩展超⽂本标记语⾔XHTML 1.0和HTML 5等两种结构语⾔。
其中，XHTML 1.0为当前被⼴泛使⽤的标准，⽽HTML 5标准则是⽹页未来将被使⽤的标准。
⽹页表现语⾔的作⽤是为⽹页的结构语⾔定义尺⼨、位置、背景，以及⽂本的各种效果。
⽬前⽹页表现的国际标准语⾔为CSS 样式表技术。
⽹页结构语⾔和⽹页表现语⾔共同作⽤可以为⽤户呈现⽹页的整体画⾯，然⽽，⽹页是⼀种交互性的媒体，其除了可以呈现内容外，还可以根据⽤户的界⾯操作响应各种事件，此时，就需要⽤到⽹页的⾏为语⾔。
⽹页的⾏为语⾔包括多种类型，例如，JavaScript、JScript以及VBScript等。
4.答：⼀个完整的HTML5⽂档包含声明、头部和主体三个部分组成。
第⼆章习题参考答案⼀、选择题1.A、B2.A3.B4.D5.D6.D7.C⼆、简答题1．答：（⼀）⽹站功能需求分析；（⼆）⽹站的策划，本阶段主要包含⽹站栏⽬，内容，产品提炼等等；（三）⽹站设计，根据策划开始进⾏设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。
网页设计与制作教程-目录
网页设计与制作教程目录第1章网页设计与制作概述1.1网络的基础知识1.1.1 TCP/IP协议1.1.2 IP地址1.1.3域名地址1.1.4统一资源定位器1.2图形图像的基础知识1.2.1位图与矢量图1.2.2常用的图像格式1.2.3常用的图形格式1.3网页的布局知识1.3.1网页的基本结构1.3.2页面的布局原则和模式1.4网页的色彩应用1.4.1色彩属性与象征意义1.4.2网页色彩的规划1.5 HTML基础1.5.1 HTML语言的基本结构1.5.2 HTML语言的基本单位1.5.3 HTML标记符基础1.5.4文本格式标记符1.5.5超链接标记符1.5.6图像标记符1.5.7表格标记符1.5.7框架标记符1.5.8表单标记符1.5.9滚动条1.6 CSS技术1.6.1 什么是CSS1.6.2 在网页中使用CSS1.6.3 CSS 样式定义1.6.4 CSS 属性1.6.5 CSS 过滤器简介1.7 JavaScript技术1.7.1 JavaScript脚本嵌入HTML文档的方法1.7.2使用客户端脚本习题一第2章DreamweaverCS6网页设计基础2.1 Dreamweaver的工作环境2.2构建Dreamweaver站点2.2.1创建本地站点2.2.2管理本地站点2.2.3创建和管理本地站点中文件2.3网页文本编辑2.3.1正文文本的添加2.3.2文本格式的设置2.3.3页面属性的设置2.3.4插入特殊字符2.3.5插入空格2.4 CSS样式设置2.4.1创建CSS规则2.4.2链接样式表2.5制作一个简单网页2.6 Dreamweaver工作环境的设置习题二第3章图像与多媒体3.1图像的应用3.1.1在网页中插入图像3.1.2设置图像属性3.2创建鼠标经过图像3.3图像占位符及属性的设置3.4插入flash动画3.5音频的应用3.5.1音频文件格式3.5.2网页中添加音频3.6视频的应用习题三第4章超级链接及其应用4.1超链接概述4.2创建文本超链接4.3创建图像超链接4.4创建电子邮件链接4.5空链接习题四第5章网页的布局5.1表格的应用5.1.1插入表格5.1.2表格的嵌套5.2表格编辑及属性设置5.2.1文档中的设置表格格式优先顺序5.2.2选择表格及其它元素5.2.3设置表格属性5.2.4设置单元格、行或列属性5.2.5编辑单元格、行或列5.3应用APDiv布局页面5.4APDiv与表格的相互转换5.4.1将APDiv转换为表格5.4.2表格转换为APDiv5.5框架的应用5.5.1创建框架集5.5.2查看和设置框架集属性5.5.3查看和设置框架属性5.5.4设置框架中显示的网页5.5.5嵌套的框架集5.5.6框架的编辑习题五第6章表单的应用6.1创建表单6.2添加表单对象6.2.1插入文本域6.2.2插入单选按钮/单选按钮组6.2.3插入复选框/复选框组6.2.4插入选择框（列表/菜单）6.2.5插入文件域6.2.6插入按钮6.3表单的提交6.4应用表格布局表单实例习题六第7章行为与脚本语言及模板和库的应用7.1行为在网页中的应用7.1.1行为、事件、动作7.1.2添加行为7.1.3Dreamweaver内置事件7.2 JavaScript脚本7.2.1 JavaScript脚本概述7.2.2 JavaScript脚本语言特效7.3创建与应用模板7.3.1创建模板7.3.2使用模板创建新网页7.3.3修改模板7.3.4文档从模板中分离7.3.5设置模板的首选参数7.4创建与应用库项目7.4.1创建库7.4.2在网页中应用库项目7.4.3编辑并更新库页面7.4.4将库项目从源文件中分离习题七第8章站点的测试8.1站点的测试8.1.1检查浏览器兼容性8.1.2.链接的检查与修正8.1.3不同分辨率下的测试8.1.4运行站点报告8.1.5网站内容的编辑8.2创建远程站点8.2.1设置远程服务器8.2.2连接远程站点8.3文件的上传和下载8.3.1文件的上传8.3.2下载文件8.3.3文件的取出与存回习题八第9章FireworksCS6基础及其在网页制作中的应用9.1 FireworksCS6基础9.1.1认识FireworksCS6工作区9.1.2文档管理9.1.3使用布局工具9.1.4各种面板9.1.5常用工具9.2绘制并编辑矢量图形9.2.1绘制与编辑基本形状9.2.2绘制与编辑自动形状9.2.3自由变形形状9.2.4复合形状9.3创建并修饰位图图像9.3.1创建位图图像9.3.2编辑位图图像9.3.3修饰位图9.4创建并编辑文本9.4.1创建文本9.4.2选择文本9.4.3编辑文本9.5应用笔触和填充9.5.1应用颜色工具9.5.2应用和更改笔触9.5.3应用和更改填充9.5.4在笔触和填充中添加纹理9.5.5应用样式9.6应用动态滤镜9.6.1应用动态滤镜9.6.2调整动态滤镜9.7使用切片和热点9.7.1使用切片9.7.2使用热点习题九第10章FlashCS6基本操作及在网页制作中的应用10.1 FlashCS6的基本操作10.1.1 FlashCS6的工作界面10.1.2 Flash文档的创建、打开、保存10.1.3面板组的使用10.2时间轴的使用10.2.1图层10.2.2帧10.2.3播放头10.2.4场景10.3元件、实例和库资源10.3.1元件的创建10.3.2实例10.3.3库面板以及元件与实例的关系10.4创建各种动画10.4.1遮罩层动画10.4.2引导层动画10.4.3形状补间动画10.4.4逐帧动画10.5在动画中添加声音10.6文本的使用10.6.1传统文本字段10.6.2使用文本布局框架(TLF)文本10.7动作面板的使用10.7.1动作面板的介绍10.7.2动作脚本的基本元素10.8 ActionScript基本语句10.8.1时间轴控制命令10.8.2浏览器/网络命令10.9动作的应用10.10测试发布Flash动画10.10.1制作过程中的测试10.10.2测试方法10.10.3下载模拟测试10.10.4发布影片10.10.5优化Flash文档习题十第11章PhotoshopCS6基本操作及在网页设计中的应用11.1 PhotoshopCS6基本操作11.1.1 PhotoshopCS6的工作界面11.1.2文件操作11.1.3环境设置11.1.4基本概念11.1.5选区的创建与编辑11.1.6利用画笔类工具绘制图像11.1.7利用形状绘制工具绘制图像11.1.8图像修饰工具的应用11.1.9调色命令的高级应用11.1.10图层样式11.1.11文字图层11.1.12滤镜11.2页面设计与制作11.2.1整体页面的制作11.2.2制作导航栏11.2.3制作网页内容板块11.2.4制作网页页脚习题十一第12章网页制作工具集成及网页制作综合实训12.1 Fireworks与Dreamweaver的集成12.2使用Photoshop和Dreamweaver12.2.1 Dreamweaver中处理Photoshop文件的工作流程12.2.2创建智能对象12.2.3更新智能对象12.3 Dreamweaver与Flash的集成12.4网页制作综合实训习题十二。
网页设计与制作第12章 Flash基础
2021/8/17
20
12.3 绘图
单击“选项”按钮则弹出多边形“工具设置” 对话框，如下图所示，其设置内容如下：
2021/8/17
在“工具设置”对话 框中，可以设置绘制的图 形样式（星形或者多边 形），设置星形或者多边 形的边数，以及设置星形 顶点的大小。
21
12.3 绘图
例如：绘制一个五角星的设置方法： 选择“多边星形工具”，在“多边星形工具”的
包括4种状态：鼠标未在按钮上的状态、鼠标在按钮 中的状态、鼠标点击的状态、按钮起作用的范围区域。 （3）影片剪辑
是一段小的影片，包括在整个Flash影片中，每个影片 剪辑都有着独立的时间轴，影片剪辑还可以包括其他的影 片剪辑，并且可以进行复杂的ACTION动作程序设计。
2021/8/17
8
12.2 使用库
33
12.4 颜色处理
2.颜料桶工具
“颜料桶工具”功能是
负责填充笔触内部的颜色区
域，可以将内部填充为纯色
也可以填充为渐变色或者使
用位图填充，这些取决于对
颜色面板的设置。
利用“颜料桶工具”来将
五角星填充为渐变色。
2021/8/17
34
12.4 颜色处理
允许的空隙大小主要是帮 助设计者在遇到非密封的填充 对象应如何填充。根据设定的 允许空隙大小来进行封闭填充， 该选项中给出了四种级别的封 闭模式，如图所示。根据设定 允许的空隙大小来完成填充。 此功能是填充的容差处理。
2021/8/17
28
12.4 颜色处理
在“混色器”选项卡中，可以设置熟悉的笔触颜色、 填充颜色，还可以设置笔触颜色和填充颜色的类型。混色 器类型包括种类有：无、纯色、线性、放射性、位图，五 种选择，其中：“纯色”是单一颜色，“无”则是删除填 充，“线性”和“放射性”则是渐变色，而“位图”则是 使用图片来填充。除“无”选项之外的四种色彩类型的效 果如下图所示。
《动态网页设计与制作实用教程(第二版)》-第12章
第12章 网页元素的添加与编辑 章
12.1.3 层叠样式（CSS）的应用 层叠样式（ ） 1．CSS样式概述 ． 样式概述 CSS样式表是一系列格式规则，它们控制网页内容的外观。使用 样式表是一系列格式规则， 样式表是一系列格式规则 它们控制网页内容的外观。使用CSS 样式可以非常灵活并更好地控制确切的网页外观， 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特 定的字体和样式。 定的字体和样式。 CSS样式可以控制许多仅用 样式可以控制许多仅用HTML无法控制的属性。例如，可以指定 无法控制的属性。 样式可以控制许多仅用 无法控制的属性 例如， 自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。 自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。 CSS样式的主要优点是提供便利的更新功能；更新 样式的主要优点是提供便利的更新功能； 样式时， 样式的主要优点是提供便利的更新功能 更新CSS样式时，使用 样式时 该样式的所有文档的格式都自动更新为新样式。 该样式的所有文档的格式都自动更新为新样式。 2．创建新的 ．创建新的CSS样式 样式 样式” （1）单击“CSS样式”面板右上角的扩展按钮，选择下拉列表中的“新 ）单击“ 样式 面板右上角的扩展按钮，选择下拉列表中的“ 建” 菜单，打开“新建CSS规则”对话框。 规则” 菜单，打开“新建 规则 对话框。 样式输入或选择名称、 （2）为新建 ）为新建CSS样式输入或选择名称、标记或选择器。 样式输入或选择名称 标记或选择器。 定义在”区域选择定义的样式位置，可以是“新建样式表文件” （3）在“定义在”区域选择定义的样式位置，可以是“新建样式表文件” ） 或 仅对该文档” “仅对该文档”。 规则定义” 规则定义。 （4）“CSS规则定义”对话框中设置 ） 规则定义 对话框中设置CSS规则定义。主要分为类型、背 规则定义 主要分为类型、
网页设计与制作第12章
第12章 CSS的基本语法一、CSS与HTML的区别是什么？为什么要使用CSS呢？原因主要有如下4点：1、弥补HTML对网页格式化功能的不足，比如段落间距、行距等。
2、字体变化和大小。
3、页面格式的动态更新。
4、排版定位等。
注意：HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，可以进一步美化我们的页面。
换句话说，CSS是一种来装饰HTML的一种标记集合。
下面我们就开始学习CSS的格式。
CSS样式表的特别之处：1、可以将格式和结构分离。
2、可以以前所未有的能力控制页面布局。
3、可以制作体积更小、下载更快的网页。
4、可以将许多网页同时更新，比以前更快、更容易。
5、浏览器将成为更友好的界面。
二、CSS的格式案例名称：CSS初次 l1-1.htm<html><head><title>CSS初次</title><style type="text/css" >h1 { color:red }h2 { color:blue;font-style:oblique }</style></head><body><h1>I love you China! I am H1</h1><h2>I love you China! I am H2</h2></body></html>(使用链接的样式表时，可无须使用注释标签。
)三、CSS的结构和规则1、选择符所谓的选择符号就是如何才能让HTML认识CSS格式的一种标记。
任何HTML元素都可以是一个CSS的选择符。
选择符仅仅是指向特别样式的元素。
例如语句P{text-indent:3em}中的选择符是P。
案例名称：利用选择符 l1-2.htm<html><head><title>利用选择符</title><style>p{ text-indent:1em }</style></head><body><p>利用选择符</p>上面段落的效果是P标记的首行自动缩进</body></html>在上面的案例中，<style type="css/text">可以简化为<style>，显示的结果是P标记的首行自动缩进。
第12章-表单和jQuery-UI
jQuery UI 是建立在 jQuery JavaScript 库上的一 组用户界面交互、特效、小部件及主题。
12.2.1 课堂案例-创意家居 12.2.2 折叠面板Accordion 12.2.3 选项卡Tabs 12.2.4 日期选择器Datepicker 12.2.5 对话框Dialog
日期选择器Datepicker用于从弹出框或内联日
历选择一个日期。该控件能非常方便的展现日 历中的日期，灵活配置相关选项，包括日期格 式、范围等。我们经常在WEB应用中用到 Datepicker，比如要求用户输入日期进行相关 查询。
在网页中插入日期选择器Datepicker的操作步骤 如下。
13.1.1 课堂案例-网页设计 13.1.2 表单及属性 13.1.3 文本元素 13.1.4 单选按钮和单选按钮组 13.1.5 复选框和复选框组 13.1.6 选择 13.1.7 文件元素 13.1.8 按钮 13.1.9 HTML5表单元素
案例学习目标：学习表单的基本操作。
将光标置于要插入文件元素的位置。
选择菜单【插入】|【表单】|【文件】或 单击【插入】面板【表单】选项卡中的【文件】 按钮 插入一个文件域，如图12-31所示。
选中文件元素，在【属性】面板中进行相 应设置，如图12-32所示。
对表单而言，按钮是非常重要的，它能够控制对 表单内容的操作，如提交或重置。要将表单的内 容发送到远程服务器上，需要使用提交按钮；要 清除现有表单内容，需使用重置按钮。用户也可 以自定义按钮的名称。
选择菜单【窗口】|【属性】，打开【属性】 面板设置选项，如图12-62所示。
12.3.1练习案例-咖啡餐厅 12.3.2练习案例-网上生活超市
案例练习目标：练习表单的基本操作。 案例操作要点：
CH12
7．虚类选择器
虚类可以看作是一种特殊的类选择符，是能被支
持CSS的浏览器自动识别的特殊选择符。它最大的用
处就是可以在不同状态下定义不同的样式超链接效 果。 将虚类和类组合起来用，就可以在同一个页面中 做几组不同类型的链接效果了。所谓不同类型超链 接 ， 是 指 访 问 过 的 （ A:visited ） 、 未 访 问 过 的 （A:link）、激活的（A:active）以及鼠标指针悬
层叠性，即继承性，样式表的继承规则是外部的
元素样式会保留下来继承给这个元素所包含的其他元
素。 不同的选择符定义相同的元素时，要考虑到不同 的 选 择 符 之 间 的 优 先 级 。 ID 选 择 符 ， 类 选 择 符 和 HTML标记选择符，因为ID选择符是最后加在元素上
的，所以优先级最高，其次是类选择符。如果想超越
12.3.2 文本属性
1．文字间隔属性(word-spacing)
文字间隔属性定义一个附加在文字（单词）之 间的间隔数量。该值必须符合长度格式，允许使
用负值。
需要特别说明的是，该属性是针对英文单词的
间隔，而不是中文的文字间隔，中文的文字间隔
应该用下面讲到的letter-spacing。同时在中文版的 IE浏览器中也不支持该属性。
2．background-color属性
用于设置HTML元素的背景颜色。此属性的默认 值是transparent，表示没有任何颜色，此时上级元 素的背景可以在子元素中显示出来。
3．background-image属性
用于设置HTML元素的背景图案，取值为url或
none。默认值为none，即没有背景图案。该属性相
《网页设计与制作》课程标准
《网页设计与制作》课程标准《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于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 综合案例五、课程实施条件本课程需要一间高性能联网的计算机实训室，需满足每位学生一台电脑。
网页设计与制作第12章 综合实例
12.2.5 为评论设置斑马纹
12.2.2 用CSS3添加样式
现在，将定义一些其他样式，使导航项的外观看起来更美观，并基于 布局使其对齐到网格。其中包括一些重点页面的样式和一个自定义样式 的订阅链接。
12.2.2 用CSS3添加样式
3. 设置导言样式 导言标签的设置非常简单，就是带有标题和简介的一小节文字。但是 ，在此将使用一些CSS3的新技巧，使其看起来更具视觉吸引力。
12.1.2 页面布局
在布局网页的时候，遵循自顶向下、从左到右的原则。 使用DIV层搭建主结构的主体，index.html 文件源代码如下：
12.1.2 页面布局
下面的样式文件style.css代码对班级网站全局页面元素 进行统一的定义：
12.1.2 页面布局
接下来是对全局div层的样式定义：
12.1.1 网站规划与设计
（2）教师需求 对于教师而ห้องสมุดไป่ตู้，通过网站，可以更直观地了解学生的学
习和生活状态，具体包括：
● 具有对学生的管理功能。 ● 能够发布通知。 ● 能够发布学生的作品，并参与到学生的讨论中，引导学生。
（3）家长需求 对于家长而言，他们可能更多地希望通过网站可以了解
孩子在集体中的信息，具体包括：
图12-1
12.1.1 网站规划与设计
4. 站点定义与目录管理 站点是一个管理网页文档的场所。简单地讲，一个个网
页文档连接起来就构成了站点。站点可以小到一个网页，也 可大到一个网站。制作网站，第一步就是创建站点，为网站 指定本地的文件夹和服务器，使之建立联系。首先应建立公 共目录，存放各网页访问和使用的公共信息，如images文 件夹存放图片信息，js文件夹存放JavaScript程序，CSS文 件夹存放全局的一些样式定义等。然后各栏目建立各自的文 件夹。一般来说，如果在网站信息较大、栏目较复杂的情况 下，则除公共CSS文件夹外，每个栏目目录下还可以存放各 栏目的图片文件夹和CSS文件夹。
网页设计与制作教程第12章 光影世界后台管理页面
最后还要说明的是，当这些栏目整合完成之后，记得正确地设置各级页面 之间的链接，使之有效地完成各个页面的跳转。
习题12
习题12
12.3 制作添加新闻页面
制作添加新闻页面
添加新闻页面是管理员通过表单输入新的新闻数据，然后提交到网站数据 库中的页面。添加新闻页面的效果如图12-10所示，布局示意图如图12-11所 示。
12.3 制作添加新闻页面
制作添加新闻页面
1．前期准备 在建立网站首页的准备工作中，用户曾经在网站根目录中建立了一个专门 存放JavaScript脚本的目录js，这里提前将添加新闻页面中需要用到的脚本文 件calender.js复制到目录js中。 2．制作页面 （1）页面结构代码 （2）添加JavaScript脚本实现网页特效
网页设计与制作教程 （HTML+CSS章 光影世界后台管理页面
机械工业出版社
12.1 制作后台管理登录页面
制作后台管理登录页面
光影世界后台管理登录页面是管理员在登录表单中输入用户名、密码和验 证码进而登录系统的页面，该页面的效果如图12-1所示，布局示意图如图12-2 所示。
12.4 制作修改新闻页面
制作修改新闻页面
在修改新闻页面中，管理员可以选择要修改的新闻，然后在修改新闻表单 中重新定义新闻的各项内容。修改新闻页面的效果如图12-14所示，布局示意 图如图12-15所示。
12.5 网站的整合
网站的整合
在前面讲解的光影世界的相关示例中，都是按照某个栏目进行页面制作的， 并未将所有的页面整合在一个统一的站点之下。读者完成光影世界所有栏目的 页面之后，需要将这些栏目页面整合在一起形成一个完整的站点。