网页设计与制作第13章范文
网页设计与制作案例教程-电子教案第13单元
本章主要学习如何使用框架对网页中的 文本、图像等对象进行合理的布局。 文本、图像等对象进行合理的布局。
知识技能目标
（1）掌握在网页中创建框架的操作方法。 掌握在网页中创建框架的操作方法。 （2）掌握为框架命名并导入框架源文件 的操作方法。 的操作方法。 （3）掌握如何保存框架集选择框架 方法之一：打开框架面板， 方法之一：打开框架面板，然后在框架 面板中单击要选择的框架即可选中单个框架。 面板中单击要选择的框架即可选中单个框架。 方法之二：按住“Alt”键，在框架内 方法之二：按住“Alt”键 部单击某个框架，即可选中单个框架。 部单击某个框架，即可选中单个框架。
7.4.2 框架的创建与设置
1．新建网页
（1）在站点“长沙世界之窗”下创建子 在站点“长沙世界之窗” 文件夹“07框架网页 框架网页” 07框架网页 框架网页” 文件夹“07框架网页”，在“07框架网页” 文件夹中创建一个网页文档07.html 07.html， 文件夹中创建一个网页文档07.html，保存 该网页。 该网页。 创建三个网页文件：title.html、 （2）创建三个网页文件：title.html、 navi.html、main.html。 navi.html、main.html。
（2）保存框架 选中整个框架，单击菜单【文件】 选中整个框架，单击菜单【文件】→ 保存全部】 先保存框架集文件， 【保存全部】，先保存框架集文件，然后依 次保存所有的框架文件。 次保存所有的框架文件。
如果只单独保存某一个框架， 如果只单独保存某一个框架，只需先选 中某个需要保存的框架，然后单击菜单【 中某个需要保存的框架，然后单击菜单【文 保存全部】 在弹出的“另存为” 件】→【保存全部】，在弹出的“另存为” 对话框中，选择合适的保存位置，输入合适 对话框中，选择合适的保存位置， 的文件名，然后单击【确定】按钮， 的文件名，然后单击【确定】按钮，即可保 存所选择的框架。 存所选择的框架。 对于包括3个框架的网页，保存时共有4 对于包括3个框架的网页，保存时共有4 个文件，一个是框架集文件， 个文件，一个是框架集文件，另外三个是框 架文件。 架文件。
网页设计与制作cs8第13章精品PPT课件
阶段4：推广和宣传网站。将站点推向市场非常重要， 可以利用的宣传途径有公司印刷器、户外媒体、电视 节目广告、口头传播和搜索引擎等。
第13章 完整制作网站的流程
13.1站点定义和规化 13.2建立Web站点的结构 13.3网页外观的设计制作
设计网站的标志 (logo)
首先需要设计制作一个网站的标志，就如同商标一样， logo是站点特色和内涵的集中体现，看见logo就让大 家联想起你的站点。
设计网站的标准色彩
网站给人的第一印象来自视觉冲击，确定网站的标准 色彩是相当重要的一步，不同的色彩搭配产生不同的 效果，并可能影响到访问者的情绪。
一个杰出的网站，和实体公司一样，也需要整体的形象 包装和设计。准确的，有创意的 CI 设计，对网站的 宣传推广有事半功倍的效果。在您的网站主题和名称 定下来之后，需要思考的就是网站的 CI 形象。
1.设计网站的标志 (logo) 2. 设计网站的标准色彩。 3. 设计网站的标准字体。 4. 设计网站的宣传标语。
第13
Web设计流程
阶段1：站点定义和规则。该阶段包括网站的整体概念、 网站的观众定位、网站的内容和组织方式、网站的视 觉风格、网站的技术要求、网站的预算、网站完成的 时间期限等。
阶段2：建立WEB站点的结构。该阶段要完成站点的外 观草图设计，完成所有的关键页面的整体风格设计以 及这页面的相互关系的设置。
1.不要将所有文件都存放在根目录下。 2.按栏目内容建立子目录。 3.在每个主目录下都建立独立的 images 目录。 4.目录的层次不要太深。
13.2.3网站的链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。 它建立在目录结构基础之上，但可以跨越目录。形象 的说：每个页面都是一个固定点，链接则是在两个固 定点之间的连线。一个点可以和一个点连接，也可以 和多个点连接。更重要的是，这些点并不是分布在一 个平面上，而是存在于一个立体的空间中。
《网页设计与制作》课程标准
《网页设计与制作》课程标准序言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程系统中拥有重要的作用，一、课程的说明：经过本课程的学习，使学生认识网页设计技术的发源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，经过运用Photoshop图像办理软件和Flash动画制作软件，三个软件相互当合，达成网页设计与制作任务的方法。
为此后从事网页设计与制作、网站开发和管理确立基础。
在网页设计的实践中要点培育团队协作、交流交流能力，培育自主学习能力和探究创新能力。
二、课程内容与基本要求：该课程波及的知识是网页设计人员必备的基本技术，职业活动与课程内容的对应关系以下：三、教课目的1、职业要点能力目标(1) 掌握使用Photoshop进行图像办理的基本方法及操作技术(2) 掌握DreamweaverCS5的基本知识及操作技术(3) 掌握成立与管理站点的方法(4) 掌握制作主要内容为文本的网页的方法(5) 掌握在网页中插入与编写图像的方法(6) 掌握在网页中插入多媒体元素的方法(7) 掌握表格办理与网页布局的方法(8) 掌握创立超级链接的方法(9) 掌握使用框架制作旅行网站的方法(10) 掌握创立和使用模板的方法(11) 掌握创立和使用库的方法(12) 掌握在网页中增添AP Div的方法(13) 掌握在网页中使用行为的方法(14) 掌握HTML基础知识及经过代码修饰网页的方法(15) 掌握使用CSS款式表修饰网页的方法(16) 掌握动向网页的观点及简单动向网页的制作方法2、职业特意能力目标(1) 经过达成有关的项目，掌握网页设计的基本工作流程。
(2) 经过达成有关的项目，掌握网页设计常用工具的使用方法。
网页设计与制作cs8第13章
CSS样式规则
由选择器和声明块组成，用于定义元 素的样式，如颜色、字体、布局等。
CSS盒模型
理解盒模型的概念，包括内容、内边 距、边框和外边距，以及它们如何影 响元素的大小和布局。
CSS布局
学习使用浮动（float）、定位 （position）和显示属性（display） 来控制页面布局。
HTML与CSS结合应用
React.js框架介绍及应用示例
React.js框架概述
React.js是一个用于构建用户界面 的JavaScript库，由Facebook开 发并开源。它采用了组件化开发 的思想，通过构建可重用的组件 来构建复杂的Web应用。
React.js核心特性
React.js提供了虚拟DOM、组件 化开发、状态管理和数据流等核 心特性，使得开发者能够高效地 管理和操作Web页面的数据和视 图。
动画库及插件介绍
Animate.css
GreenSock（GSAP）
Velocity.js
Vivify
一个轻量级的CSS动画库，提 供多种预设的动画效果，可通 过添加类名快速应用动画。
一个高性能的JavaScript动画 库，支持CSS3、SVG、 Canvas等多种渲染方式，提供 丰富的API和插件扩展功能。
while）以及异常处理语句（如try...catch）。
DOM操作与事件处理
DOM概述
介绍文档对象模型 （DOM）的基本概念， 包括节点、元素、属性 等。
DOM操作
详细讲解如何通过 JavaScript对DOM进行 操作，如获取元素、修 改元素内容、添加/删除 元素等。
事件处理
介绍JavaScript中的事 件处理机制，包括事件 类型、事件监听器以及 事件对象的属性和方法。
网页设计与制作第13章
第13章 CSS的属性和值一、CSS字体属性1、字体集合(font-family)可以用一个指定的字体名或一个种类的字体集合。
多个集合的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类集合名随后，以防第1个选择不存在。
定义一个字体的集合的时候，就相当于定义了一个字体的控制集合，当浏览器解释执行的时候，会控制集合中所列的字体顺序从前到后的选择字体。
任何包含空格的字体名都必须用单引号引住。
字体集合也可以用字体属性给出。
案例名称：字体集合 l2-1.htm<html><head><title>字体集合</title><style type="text/css">p{font-family:"隶书",times,serif}</style></head><body><p>字体集合</p><p>text/css</p></body></html>■CSS字体■2002:7:25 ·eva(原创)■ FONT-FAMILY属性：每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。
使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。
■ FONT-FAMILY语法实例：h2 {font-family:times,impact,sans-serif}说明如下:helvetica是浏览器首先寻找的字体名称，如果有就使用它。
在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。
如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。
在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。
网页设计与制作基础教程 第3版 第13章-制作ASP动态网页
“删除记录”行为 “登录用户”行为 “限制对页面的访问”行为 “注销用户”行为 “检查新用户名”行为
::::::::::
1.1.2 网页的布局结构
结构化布局是最基本的网页布局之一，其特点是将网页的各种结构模块 进行平面排列，以构成整个网页。在设计网页布局的过程中，应遵循对称平 衡、异常平衡、对比、凝视和空白等原则。一般情况下，网页的常见布局有 以下几种结构。
::::::::::
1.3.2 规划站点
用户在规划网站时，应明确网站的主题，并搜集所需要的相关信息。规 划站点指的是规划站点的结构，完成站点的规划后，在创建站点时用户既可 以创建一个网站，也可以创建一个本地网页文件的存储地址。
Dreamweaver CC工作界面 Dreamweaver CC基本操作
::::::::::
1.2.1 Dreamweaver CC工作界面
Dreamweaver CC的工作界面效果秉承栏Dreamweaver系列软件产品一 贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地 找到。
::::::::::
1.3.1 站点简介
互联网中包括无数的网站和客户端浏览器，网站宿主于网站服务器中， 它通过存储和解析网页的内容，向各种客户端浏览器提供信息浏览服务。通 过客户端浏览器打开网站中的某个网页时，网站服务软件会在完成对网页内 容的解析工作后，将解析的结构回馈给网络中要求访问该网页的浏览器。
Access数据库的基本操作 Access数据库的基础知识
::::::::::
13.1.1 Access数据库的基本操作
Access数据库是目前比较流行的数据库管理系统，它是一个运行在 Windows系统环境下的桌面关系型数据库，也是Office的组件之一。下面将 围绕几个与创建Access数据库相关的问题进行讲述，以便用户对该数据库的 应用有个概括的了解。
网页设计与制作教程第13章
第13章网页编辑与超链接13.1 网页文档的格式化13.1.1用HTML标记格式化文本图13-1 HTML标记格式化文本13.1.2用HTML样式格式化文本·266··267·图13-2 HTML 样式面板图13-3 【定义HTML 样式】对话框13.2 网页图像编辑的基本操作13.2.1 创建鼠标经过图像新建样式删除样式HTML 样式列表自动应用 应用按钮图13-4 【插入鼠标经过图像】对话框13.2.2 建立网站相册图13-5 【创建网站相册】对话框13.2.3利用外部编辑器编辑图像·268·图13-6 【查找源】对话框图13-7 修改前的图片图13-8 修改后的图片图13-9 Fireworks MX位图编辑状态（a）将“东风楼”及阴影擦除（b）改变图片的底色（c）图片出现边框线条（d）设置参数后的效果图13-10 图片编辑过程·269·图13-11 图片的属性面板图13-12 效果参数设置图13-13 图片的属性面板13.3创建超链接13.3.1超链接概述13.3.2创建超链接的方法图13-14 属性面板·270·图13-15 利用【指向文件】按钮创建超链接13.3.3创建锚点链接图13-16 插入【命名锚记】对话框13.3.4创建E-mail链接图13-17 电子邮件链接对话框·271··272·图13-18 在属性面板中设置E-mail 链接13.3.5 创建导航条图13-19 插入导航条对话框13.3.6 创建跳转菜单图13-20 插入跳转菜单对话框图13-21 带跳转按钮的跳转菜单图13-22 跳转菜单的属性面板图13-23 【列表值】对话框·273·图13-24 设计浮动面板组图13-25 跳转菜单对话框13.3.7创建映射图链接图13-26 图像的属性面板·274·图13-27 定义映射图热点区域13.4 应用实例例13.3制作具有下列要求的网页，如图13-28所示。
网页设计与制作报告(优秀3篇)
网页设计与制作报告（优秀3篇）（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如总结报告、心得体会、应急预案、演讲致辞、合同协议、规章制度、条据文书、教学资料、作文大全、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as summary reports, insights, emergency plans, speeches, contract agreements, rules and regulations, documents, teaching materials, complete essays, and other sample essays. If you would like to learn about different sample formats and writing methods, please pay attention!网页设计与制作报告（优秀3篇）在人们越来越注重自身素养的今天，越来越多的事务都会使用到报告，不同的报告内容同样也是不同的。
第13章-CSS-网页设计与制作(第3版)-赵旭霞-清华大学出版社
13.2 CSS 结构和规则
CSS 中的样式由两部分组成：选择器和声明 。选择器是标识已设置格式元素（通常是 HTML标记如P、H1等、类名称、ID）的术语 ，而声明则用于定义样式元素使用的规则。
❖ 样式规则组成如下： 选择器 { 属性: 值 } ❖ 单一选择器的复合样式声明应该用分号隔开：选择
❖ 1．内嵌样式(Inline Style)
内嵌样式是写在HTML标记里面，内嵌样式只对 所在的HTML标记有效。
例如下面的代码：
<p style="font-size:12pt; color:blue">测试文字 </p>
这里的style定义放在标签<p>里面，则只有包含在 此处的<p>里面的文字（测试文字）是12pt大小 ，字体颜色是蓝色，而其他位置的<p>标签不受 影响。
❖ 在一个id属性中不能够设置多个id值，这与class有 所不同。与class用法一样，在HTML文档中，每个 元素都拥有id属性，id值的命名规则与class命名规 则相同。
13.2.1 选择器的类型
参见教材【例13-2】：
❖ 在上面的示例中，newtext 是类别选择器 ，介于大括号 ({}) 之间的所有内容都是声 明。可以看出，声明本身也是由两部分组 成：属性（如font-size）和值（如 “18px”）。上述示例创建了名为 newtext的样式，使用的规则是“字体=幼 圆、字号=18像素，行距=30像素，颜色 =#660033”。
❖ 类别选择器虽然比标签选择器在使用上更精确，但 是必须把类引用到具体的标签上时才有效，标签在 没有设置class属性时，所定义的类样式是无效的 。
13.2.1 选择器的类型
《网页设计与制作案例教程》课后答案
《网页设计与制作案例教程》教材习题答案第2章 网页制作基础1．填空题（1）静态 动态（2）HyperText Markup Lauguage 超文本标记语言（3）文本 图像 动画（4）Dreamwear Frontpage（5）窗口2．选择题（1）C （2）C （3）B （4）D （5）D 第3章 网站的创建与管理1．选择题（1）D （2）A （3）B （4）D （5）C第4章 页面的整体控制 1．选择题（1）B （2）A （3）A （4）C （5）D 第5章 文本操作 1．选择题（1）A （2）D （3）D （4）C （5）C 第7章 网页布局操作 1．选择题 w w w.k h d a w .c o m（1）C （2）A （3）A （4）A （5）B （6）B（7）B （8）B （9）B （10）C （11）C （12）B（13）A （14）A （15）C （16）B （17）A （18）A（19）B （20）D （21）B （22）D （23）D （24）C（25）D （26）C （27）B （28）C （29）D （30）B（31）B （32）C （33）B （34）D （35）A （36）A（37）D （38）C （39）D （40）A第9章 超级链接与导航栏1．选择题（1）A （2）B （3）C （4）A （5）D （6）B（7）D （8）C第10章 创建表单网页1．选择题（1）A （2）D （3）C （4）B （5）C （6）B（7）B （8）A第11章 HTML 语言 （1）<html> </html> <body> </body> （2）<img> <br> （3）bgcolor background （4）<table> <tr> <td> 2．选择题 （1）A （2）A （3）B （4）B （5）C （6）A （7）D （8）B （9）C （10）B （11）A （12）B （13）C （14）Cw ww .k h d a w .c o m第12章 使用CSS 样式美化网页1．选择题（1）D （2）C （3）B （4）B第13章 JavaScript 技术1．选择题（1）D （2）B （3）B （4）D （5）A第14章 网页特效1．选择题（1）A （2）B （3）B （4）D （5）C （6）B第15章 网站规划与网页设计1．选择题（1）C （2）C （3）C （4）A （5）C （6）C（7）A （8）A （9）D （10）C （11）D （12）D （13）A （14）D （15）A （16）B （17）B （18）C第16章 网站的测试、发布与维护 1．选择题 （1）D （2）D （3）D （4）B （5）B （6）C （7）D （8）D w w w .k h d a w .c o m。
网页设计与制作报告
网页设计与制作报告网页设计与制作报告精选8篇在人们越来越注重自身素养的今天，报告与我们的生活紧密相连，我们在写报告的时候要注意逻辑的合理性。
那么报告应该怎么写才合适呢？下面是小编帮大家整理的网页设计与制作报告，欢迎阅读，希望大家能够喜欢。
网页设计与制作报告1毕业后，我来到了社会这个汇集众多江河湖水的大海，感受到了独立生活的好处与艰辛，同时我自己也更深的理解了，家长和学校老师对我们的殷切希望，在社会实习的这段日子，我吃了些苦，受了些罪，可是整个人在肉体上和精神上却升华了很多，也比以前的变得更有自信了。
现将我的实习情况汇报如下：一、实习工作介绍我所在的这家公司，是一家做网上招商的商业网站，公司接收各种厂家提供的信息，然后由网络的技术人员，将商家的信息做成网页广告，然后挂在我们的网站上，以此达到商业推广的目的，类似我们公司的网站在同行业还有u88、28招商网等。
我和其它几位同事做为网络部的技术人员，主要的工作就是接收美工人员的网站模板，将其通过photoshop切片，然后导入dreamweaver进行排版，（排版主要使用css+div），并进一步的加以制作，完善美化，如加入js代码，或透明flash，因为网页是用css+div进行排版的，所以在最后一步的时候，我们还需要进行浏览器测试，因为css+div排版方式有一个最大的缺点就是：浏览器不兼容的问题，典型的如：ie与fireworks，因为各种浏览器使用的协议不同，所以会导致页面在最终浏览的时候有一些小问题，如：页面混乱，图片、文字之间的距离过大或过小，页面不美观等等，做为一个新人，我在有些方面的技术还很不成熟，所以在技术总监张伟的帮助下，解决了很多问题，所在我很感谢他，当每天我们做完网页后，都会在代码页面加入注释代码，在里面写上每个人姓名的汉语拼间和工作日期，这样方便月底做统计工作，公司领导会根据每个人的工作数量进行奖励，每做一个页面会有2块的提成，虽然少点，但是积少成多，也是很可观的。
网页设计与制作报告(6篇)
网页设计与制作报告(6篇)网页设计与制作报告(6篇)网页设计与制作报告1一、实习目的：通过社会实践，可以把我们在学校所学的理论知识，运用到客观实际中去，使自己所有用武之地。
以便能够达到拓展自身的知识面，扩大与社会的接触面。
1、了解平面设计在焦作的市场现状及前景。
2、进一步掌握ps，coreldraw，等设计软件的运用。
3、尝试把学校里学习的平面设计相关理论运用到实习过程中。
4、初探做好平面设计师的方法，熟悉平面设计的方法和程序步骤。
5、培养人际交往与社交能力，为成为平面设计师作准备。
二、实习时间：2023年1月1日―4月30日三、实习地点：威美（上海）金融伟德服务有限公司四、实习内容：平面设计五、实习总结：即将面临大学毕业，因为伟德视觉传达专业，想丰富一下自己的知识，所以我找到了一家互联网金融公司做UI平面设计，虽然和我所学的专业有些差异，但它对于我来说是受益匪浅，我所在的公司威美（上海）金融伟德服务有限公司，主要是网页设计为主，也与绘画有所伟德，既然选择这个公司，我就要好好去学，使自己的基础更牢固，技术更全面，在大学里学的知识却不知道如何运用，想伟德多个伟德，因此我非常珍惜这次实习的机会，在有限的时间里加深对绘画对设计的了解，找出自身的不足。
实习的内容是页设计（Ps，ai，arp等软件的使用）。
在实习过程中，我深深地感受到作为设计师通常缺乏足够的对市场的了解和对管理层领导上的沟通，做出的设计作品经常会与市场经济脱节；而作为管理者通常缺乏设计基础和审美能力，往往为了追求市场效益，过多地拘束设计师的思维与创新，忽略了设计要素的重要性，造成了设计的庸俗化。
来到公司，第一天进公司，与经理进行了简单面谈后，部门总监把我分配给伟德经理，伟德经理是我的直接领导，所有工作由伟德经理分布。
第一天来到公司要赶做两个网页banner，接到文案后就在网络上搜集大量banner素材，找了几个适合这次文案的banner然后用Photoshop简单的修改图片，第一天没有做好，幸好领导说第二天晚上再交给他，于是我就乖乖的回家找图片。
网页设计与制作 (13)
13.3.5 改变属性
【改变属性】行为用来改变网页元素 的属性值，如文本的大小、字体、层的可 见性、背景色、图为可以将一个图片替 换为另一个图片，这是通过改变图像的 “src”属性实现的。在前一小节中可以通 过为图像添加“改变属性”行为来改变图 像的“src”属性，不过【交换图像】行为 更加复杂一些，可以使用这个动作来创建 翻转的按钮以及其他图片效果（包括同时 替换多个图片）。
13.3.7 检查浏览器
设置【检查浏览器】动作可以根据访问者使 用的浏览器版本不同，来决定访问者访问不同的 网页，这样就提高了网页的兼容性。目前网页制 作者们在开发网页的时候，都把网页的兼容性问 题放在第一位，最起码的要求就是让最大数量的 用户能够正常浏览网页，其次才是网页的功能和 外观。但还是有些特殊的功能会受到浏览器版本 的限制，这就需要在包含这些特殊功能的网页中 加入【检查浏览器】动作。首先检查用户的浏览 器版本，然后决定让用户停留在哪一个页面中最 合适。
13.3.10 跳转菜单
跳转菜单就相当于在菜单域的基础上 增加了一个按钮，但是一旦在文档中插入 了跳转菜单，就无法再对其进行修改了。 如果要修改的话，只能是将菜单删除，然 后再重新创建一个。这样做非常麻烦，而 Dreamweaver所设置的【跳转菜单】行为， 其实就是为了弥补这个缺陷。
13.3.11 弹出式菜单
第13章 行为
13.1 【行为】面板
13.2 事件 13.3 动作
13.1 【行为】面板
13.2 事件
当用户在浏览器中触发一个事件时， 事件就会调用与其相关的动作，即一段 JavaScript代码。
13.3 动作
13.3.1 播放声音 13.3.2 打开浏览器窗口 13.3.3 弹出信息 13.3.4 调用JavaScript 13.3.5 改变属性 13.3.6 交换图像 13.3.7 检查浏览器 13.3.8 控制Shockwave或Flash 13.3.10 跳转菜单 13.3.11 弹出式菜单
网页设计与制作
《网页设计与制作》实训十三多媒体与行为的应用预备操作：请将D:\MyWeb文件夹设置为根站点。
内容一：制作多媒体播放网页1、新建HTML空白文档，并切换到“设计”视图；2、选择“插入”菜单“表格”命令，插入一个表格，参数如下：3、选中表格，在“属性”面板设置表格“对齐”为“居中对齐”：4、选中第一行两个单元格，在“单元格”属性面板单击“合并”按钮；并选中所有单元格，设置单元格“水平”为“居中对齐”；5、分别将光标放置在第2行第1列和第4行第1列，在属性面板设置单元格宽度为“448”，高度为“300”，并输入相应文字，效果如下图：6、将光标置于第2行第1列，选择“插入”菜单中“媒体”下的“插件”，打开对话框，选择“Media”文件夹中的“Aigrete.avi”文件：7、选中刚才插入的对象图标，在属性面板设置宽度为“320”，高度为“240”，如下：8、用同样的方法在第2行第2列中插入“bwbl.mp4”，并设置宽度440，高度300；9、在第4行第1列中执行“插入”“媒体”下“SWF”，选择“Media”文件夹中的“tuxiang.swf”文件，并设置宽度440，高度300；10、在第4行第2列执行“插入”“媒体”下“插件”，选择“Media”文件夹中的“zxmzf.mp3”文件，并设置宽度400，高度100；效果如下：11、选中第5行第1列中“播放SWF动画”文字，在属性面板设置“链接”为“Media/bugudan.swf”；12、保存文档，按F12键在浏览器中预览效果如下：内容二：制作应用行为页面：第一部分：创建页面1、新建HTML空白文档，并切换到“设计”视图；2、单击“插入”面板“布局”选项中的“绘制AP Div”按钮，在文档中拖动鼠标绘制层对象“apDiv1”，并在属性面板中设置其属性：3、单击“插入”面板“布局”选项中的“绘制AP Div”按钮，在文档中拖动鼠标绘制层对象“apDiv2”，并在属性面板中设置其属性：5、单击“插入”面板“布局”选项中的“绘制AP Div”按钮，在文档中拖动鼠标绘制层对象“apDiv4”，并在属性面板中设置其属性：7、单击“插入”面板“布局”选项中的“绘制AP Div”按钮，在文档中拖动鼠标绘制层对象“apDiv6”，并在属性面板中设置其属性：9、将光标放入“apDiv6”中，在“apDiv6”中插入一个2行2列的表格，表格宽度为200，边框为1，填充和间距都为0，效果如下：10、选中所有单元格，在属性面板设置单元格高度和宽度都为100，背景颜色为绿色：11、将光标置于“apDiv1”中，选择“插入”菜单中的“图像”命令，将“Images”文件夹中的“T00.jpg”图像插入其中，并选中图片，在属性面板中设置图片宽度和高度都为100；效果如下：12、用同样方法将图片“T21.jpg”插入“apDiv2”中，将图片“T11.jpg”插入“apDiv3”中，将图片“T22.jpg”插入“apDiv4”中，将图片“T12.jpg”插入“apDiv5”中，全部设置高度和宽度为100；将图片“A10.jpg”插入“apDiv7”中，设置高度和宽度为70，效果如下：13、选中“apDiv1”，在属性面板中设置其可见性为“hidden”：第二部分：设置行为：14、在“窗口”菜单中选择“行为”，打开“行为”面板：15、在状态栏标签选择器中选择“body”，在“行为”面板中单击“+”按钮，选择“弹出信息”命令，打开“弹出信息”对话框。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第13章 CSS的属性和值一、CSS字体属性1、字体集合(font-family)可以用一个指定的字体名或一个种类的字体集合。
多个集合的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类集合名随后，以防第1个选择不存在。
定义一个字体的集合的时候，就相当于定义了一个字体的控制集合，当浏览器解释执行的时候，会控制集合中所列的字体顺序从前到后的选择字体。
任何包含空格的字体名都必须用单引号引住。
字体集合也可以用字体属性给出。
案例名称：字体集合l2-1.htm<html><head><title>字体集合</title><style type="text/css">p{font-family:"隶书",times,serif}</style></head><body><p>字体集合</p><p>text/css</p></body></html>■CSS字体■2002:7:25 ·eva(原创)■ FONT-FAMILY属性：每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。
使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。
■ FONT-FAMILY语法实例：h2 {font-family:times,impact,sans-serif}说明如下:helvetica是浏览器首先寻找的字体名称，如果有就使用它。
在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。
如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。
在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。
因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。
如果一种字体的名称中有空格，如"Times New Roman"，在CSS语句中要用引号包含该字体。
例：Body {font-family:"Times New Roman",serif}如果该语句已在双引号里，则字体名降级为单引号。
例：<P style="font-family:'Times New Roman',serif">如果该语句包括其它CSS规则，字体说明应放在最后。
例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}2、字体风格(font-style)该属性以3个方法的其中一个来定义显示的字体：normal（普通）、italic（斜体）或oblique（倾斜）。
案例名称：字体风格l2-2.htm<html><head><title>字体风格</title><style type="text/css">p{font-style:oblique}</style></head><body><p>字体风格</p></body></html>3、字体变形(font-variant)字体变形属性决定了字体的显示是normal（普通）还是small-caps（小型大写字母）。
当设置字体变形为小型大写字母时文字中的所有小写字母会显示比大写字母稍小的大写字母。
案例名称：字体变形l2-3.htm<html><head><title>字体变形</title><style type="text/css">p{font-variant:small-caps}</style></head><body><p>字体变形ABCabc</p></body></html>4、字体加粗(font-weight)字体加粗属性用作说明字体的字重,该属性值可以从100到900，normal相当于400，bold相当于700，bolder是将继承值加上一个等级，lighter是将继承值减上一个等级。
浏览器能不能正确显示要看使用的字体类型支持几种粗细值。
案例名称：字体加粗l2-4.htm<html><head><title>字体加粗</title><style>p{font-family:Verdana;font-size:20pt}</style></head><body><table width="100%" border="1"><tr><td><p style="font-weight:100">font-weight:100</p></td><td><p style="font-weight:600">font-weight:600</p></td></tr><tr><td><p style="font-weight:200">font-weight:200</p></td><td><p style="font-weight:700">font-weight:700</p></td></tr><tr>59<td><p style="font-weight:300">font-weight:300</p></td><td><p style="font-weight:800">font-weight:800</p></td></tr><tr><td><p style="font-weight:400">font-weight:400</p></td><td><p style="font-weight:900">font-weight:900</p></td></tr><tr><td><p style="font-weight:500">font-weight:500</p></td><td> </td></tr></table></body></html>5、字体大小(font-size)字体大小属性用作修改字体显示的大小：xx-small/x-small/small/medium/large/x-large/xx-large /smaller/larger/百分比/高度。
关键字的本级与上级的比是：1:1.5，比如：medium 与large 的比是1:1.5；而larger 是将继承值加上一级，smaller 是将继承值减上一级；百分比是将默认字体扩大或缩小若干倍；高度的单位前面已讲过。
案例名称：字体大小 l2-5.htm<html><head><title>字体大小</title><style>span{font-size:20pt}</style></head><body><table width="100%" border="1"><tr align="center"><td><p style="font-size:xx-small">xx-small</p></td><td><p style="font-size:x-small">x-small</p></td><td><p style="font-size:small">small</p></td></tr><tr align="center"><td colspan=3><p style="font-size:medium">medium</p></td></tr><tr align="center"><td><p style="font-size:large">large</p></td><td><p style="font-size:x-large">x-large</p></td><td><p style="font-size:xx-large">xx-large</p></td></tr><tr align="center"><td><p style="font-size:50%">50%</p></td><td><p style="font-size:100%">100%</p></td><td><p style="font-size:200%">200%</p></td></tr><tr align="center"><td><p style="font-size:5pt">5pt</p></td><td><p style="font-size:10pt">10pt</p></td><td><p style="font-size:20pt">20pt</p></td></tr><tr align="center"><td><span>20pt</span></td><td><span><p style="font-size:smaller">20ptsmaller</p></span></td><td><span><p style="font-size:larger">20ptlarger</p></span></td></tr></table></body></html>6、字体(font)属性值：[<font-style> || <font-variant> || <font-weight> ]<font-size>[/<line-height>]<font-family>该属性可以一次定义前面所提到的所有属性，还有行高。