网页设计
刘力溯
2008.8备
1．XHTML页面结构
HTML = Hyper Text Mark-up Language 超文本标记语言
XHTML=Extensible Hyper Text Mark-up Language 可扩展标识语言
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1996年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准 ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准
XHTML 1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
XHTML 1.1, 于2001年5月31日发布
HTML只不过是一系列标签组合成的一个文本文件。
我们的课程以xhtml1-transitional为准，可兼容HTML 4的元素，又包含新解析规则。
（1）文档类型定义元素
* 名称大写
* DTD是文档规则文件
HTML 4.01规范：
XHTML 1.0规范：
XHTML 1.1 DTD
（2）标签
* 在根元素中必须使用xmlns属性声明文档的命名空间（XHTML NameSpace）
目前在XHTML1.0中,所有的该属性值都相同即"http://www. https://www.doczj.com/doc/3215241405.html,/1999/xhtml"
该地址是收集元素类型和属性名字的一个详细DTD，使得所有用户使用的标签元素统一。* 页面内容总容器,它的样式对页面内容有着广泛影响
（3）
标签* head 元素可包含关于文档的信息。浏览器不会向用户显示这些头部信息（"head information"）。下面这些标签可用在head 部分：
Javascript要放在Div后面才能被解析，而CSS可以放在页面任何地方。最终谁优先权更大？
class选择符
公共样式，它的样式可以被任何元素引用。定义class时的格式是在class名称前面加.
例. 在两个列表的列表项里分别引用不同的class.
a{color:greem;} .red{color:red;} .blue{color:blue;}
利用.classname来为某群元素定义CSS属性，主要优点是提高了样式代码的重用性，另外其为样式提供了分类，便于修改。
除了一个公共样式可被用于多个元素，一个元素也可以被定义多个公共样式，各个公共样式之间用空格隔开。
如果同一个属性的被两个公共样式分别定义，实际会发生什么？
通用选择符
定义所有元素的样式
*{margin:0;}
伪类、伪对象
虚拟对象和类，对未发生的情况进行预定义。定义伪类、伪对象的格式是在名称前边加:
常用伪对象有:first-letter :first-line :after :before
例.首字下沉
常用伪类有:link :visited :hover :active
分组选择符
当多个对象需要定义相同样式时，可以写在一起
h1,h2,h3,p{color:red;}
包含选择符
前后两个对象之间空格，第一个对象在XHTML中包含第二个对象时使用。
.class1 h2{color:#333;}
div span p{ color:#333;}
元素指定选择符
控制某种元素在一定范围内的样式,可把元素与class或id结合书写。
span.red{width:100px;}
div#01{width:100px;}
（2）属性
CSS的信心，CSS2中定义了150多个属性。
（3）属性值
包括数值加单位（或百分比）或预定义值。
应用CSS到网页
（1）元素声明样式
用元素自身的style属性来设置样式,与HTML中各元素设置的描述属性没有本质区别。
（2）内部声明样式
把CSS装在
（3）外部链接样式
把CSS代码放在单独CSS文件中，在页面中链接引用。
CSS继承性
不具备继承性的有以下属性：边框，补白，边界，背景，定位，布局，高宽
CSS层叠
对同一个元素或网页应用多个样式表。
重要性：作者定义样式>用户样式>浏览器默认样式，写在靠后面的同一声明优先前一声明。
CSS特殊性
id>class>类型选择符，当属性被子元素继承时，特殊性为0;相同特殊性情况下，就近原则。
CSS文字样式
（1）字体
CSS定义字体的声明如下：
font-family:“Times New Roman”,Times,serif;
浏览器执行这跳声明时，首先会寻找系统中安装的Times New Roman字体，如果没有找到，则寻找Times字体，如果没有就使用serif通用字体。
通用字体包括以下5类：
serif成比例有衬线的字体。成比例是指字体中字母会根据他们不同的尺寸占据不同的宽度，如i和m所占的宽度不同。衬线是字体上附加的装饰细线，如l顶部和底部的细线。此类常用字体有Times.
sans-serif有字母比例区别没有衬线的字体。如Arial.
cursive模拟人笔迹的字体，一般这些字体是由曲线和比衬线字体更强的笔画修饰组成。常用字体有Comic Sans.
fantasy特殊字体，如western,klingon.
monospace无比例的字体，模拟打字机字体，每个字符都有占相同的宽度，如Courier.
大家可以定义不同的字体并比较。要在不同的浏览器中测试。
#serif {font-family:"Times New Roman", Times, serif;}
#sans {font-family:Arial, Helvetica, sans-serif;}
#mono {font-family:"Courier New", Courier, monospace;}
#cursive {ont-family:author, "Comic Sans", "Zapf Chancery", Cursive;}
#fantasy {font-family:Western, Klingon, fantasy;}
例.通用字体显示比较
使用原则：
使用中文宋体或英文Arial，可以保证所有浏览者都能正确显示；
通用字体是一种类别，如果直接使用，浏览器会在该类中任选其一，无法精确控制，所以通用字体一般作为字体列表中最后一项备选。
通用字体针对英文，但是对汉字也存在影响，并且浏览器间存在差异。汉字需单独定义。
像Times New Roman等字体名称，中间空格不要忽略。
（2）文字大小
设计类网页喜欢用12px大小，新闻多为14px，浏览器默认都为16px.
CSS定义方法font-size:12px;
绝对单位：mm（毫米）cm (厘米) in (英尺) pt (磅MAC中与px接近，WIN中略大) 相对单位：em（相对于父元素的文字倍数）ex（相对于本字体中的字母X的高度）px (像素)
关键字:
Larger smaller
一个增强字体大小灵活性的方案
因为浏览器默认字体大小为16px，在窗口中1em =16px,
那么我们常用的字体尺寸可以换算为：
14px=0.875em, 13px=0.812em, 12px=0.75em……这种带小数点的em值很不好记。如果我们预先设置body的font-size=63%,就使em值变为16*62.5%=10px,,这样12px=1.2em,10px=1em,14px=1.4em.
这样做的好处是：
em的值不是固定的，具有可调性，更符合CSS网页设计所提倡的可读性原则。
想调整页面所有字体大小时，只需要调整body的字体大小就可以了（父元素）网页浏览者也可以调整浏览器的默认字体大小来调整显示。
这样做要避免在元素中再重复定义字体大小
（3）文字颜色
设置前景色（即文字颜色）
body{color:#333}
h1{color:black}
（4）文字特殊样式
粗体
font-weight:bold;
font-weight:100~900;九个粗细等级，仅部分字体具备。
斜体
font-style:italic;
font-style:oblique;
英文小型大写
font-variant:small-caps;
（5）文本下划线
Text-decoration: none 无装饰线
blink文字自身闪烁（IE不支持）
underline下划线
line-through文字中心贯穿线
overline上划线
段落版式
（1）首行缩进
例.首行缩进
关键代码: text-indent:2em;
注意事项: 适用于块状元素如p,div,pre,h1~h6等，不适用内联元素中的文字,如span,a,em等。
可以取负值，并应与补白或边界配合使用，避免凸出文字被遮盖。
只对第一行起作用，如果第一行只有一个换行符，对空白起作用，无任何效果。
（2）行距
line-height:1.2em;
一行文字上下的高度，包括上空白+字体高度+下空白，组成一个完整的内容框。其中上下空白相等。在网页中比较合理的行距应该是字体大小的1.2~2倍，可以直接用em这个单位。
当插入图片或内联元素时，文字行上面的空白会被撑开，但是行距值是不受影响的。
（3）字距
英文单词字距：word-spacing:2em;
英文字母和汉字字距：letter-spacing:2em;
都有继承性，因此要小心控制其子元素的段落样式。
（4）对齐
水平对齐text-align: left / center / right / justify
用法注释: justify是通过分散字距来实现两端对齐，仅英文适用。
要实现块状元素的居中对齐，应在父元素中声明text-align:center;(IE浏览器)
非IE浏览器则必须要用这样的声明: margin-left:auto;margin-right:auto;
垂直对齐
在非IE浏览器中，我们可以使用垂直对齐的样式，但同时必须要配合display:table-cell属性。vertical-align:middle;
display:table-cell;
例.垂直居中对齐
vertical-align的其它取值：baseline(基线对齐)、sub(下对齐)、super(上对齐)、top(对象顶端对齐)、text-top(文本顶端对齐)、middle(中间)、text-bottom(文本底部对齐)bottom(地步)、
IE浏览器目前不支持垂直对齐属性，只能：
单行文本可以将其行高设为容器高度，使文字居中。
或者在父元素高度固定的前提下设置父元素的补白，把内容往中间压。
《网页设计与制作》复习资料 一、单项选择题 1. 下列文件属于静态网页的是( C ) A.Index.asp B.index.jsp C.index.html D.index.php 2. 在网页中常用的图像格式是（ D ） A. .bmp和.jpg B..gif和.bmp C. .png和.bmp D..gif和.jpg 3. 保存网页文档，可以按（ B ）组合键 A. Ctrl+A B . Ctrl+S C. Ctrl+W D.Ctrl+N 4. 定义站点时，存放网页的默认文件夹为（ D ） A. C 盘根目录 B. D盘根目录 C. 我的文档 D. 用户指定 5.要打开“页面属性”对话框，可以按（ B ）快捷键 A．Ctrl+K B. Ctrl+J C. Ctrl+M D.Ctrl+F 6. 在Dreamweaver 中，调整图像属性按下什么键，拖动图像右 下方的控制点，可以按比例调整图像大小（ A ） A.Shift B. Ctrl C. Alt D. Shift+Alt 7.下列属于网页制作工具的是（ C ） A.Photoshop B.Flash C.Dreamweaver D.CuteFTP 8．在Dream weaverCS4中设计表单时，要求用户名能超过14个字符应设置文本域是（ B ）A．将文本域的字符宽度设置为14 B. 将文本域的最大字符宽度设置为14 C. 将文本域的初始值设置为14个字符 D．将文本域的名称设置为14个字符 9. 模板文件的扩展名为（ C ） A .lbi B .html C .dwt D .aspx 10．要指定表格单元中的内容与表格单元边框之间的空间大小，需要设置表格“属性”面板中的（ A ） A．单元格填充 B. 单元格间距 C 宽度 D 边框
《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
第四章网站的开发 1.在建立网站站点的过程中，下列行为恰当的是（A）。 A、建立自己的主题站点，首先需要创建一个WEB站点，用子保存和调试创建的网页 B、制作网页之前，不需要对版面进行设计 C、图片总是比文字更多地受浏览者的欢迎，因此网页中图片越多越好 D、建立站点，就是制作一个个网页，不需要先创建一个站点 情况下，一个网站可以包括的主页数是（ C ）一般2.A、 2个 B、 3个 C、 1个 D、无数个 3.下列关于网站制作的评价指标中，你认为哪些是必要的（ABCD）。 A、各种媒体处理和运用恰当 B、界面友好，结构清晰 C、链接正确，各主要页面能相互返回 D、主题明确，内容有意义 4.图片在网页中起到美化网页的作用，在网页中常用的几种图像格式是（ BD） A、MP3 B、GIF C、DOC D、JPEG
5.以下扩展名中不表示网页文件的是（AB）? A、 .doc B、 .txt C、 .html D、 .htm 6.以下可以代表WWW页面文件的类型的是（BC）。 A、 wav B、 htm C、 html gif 、D． 7.在制作网页中的表格时，如果要想在浏览时看不到表格的边框，则应将（C )调整为0。 A、单元格的间距 B、宽度与茼度 C、边框的粗细 D、单元格的边框 8.下列关于网页制作中收集索材的描述，正确的是（CD）? A、收集来的索材无需分类，集中在一个文件夹中存放较好 B、收集来的索材因为是准备制作网页给大家看的，所以不存在版权的问题 C、收集来的索材应该分类，不同类索材最好用不同的文件突_
D、收集来的索材文件名要易懂易记，便于调用 9.下列关于网站的说法中，正确的有（ABC ）? A、网站的起始网页称为主页 B、一个网站通常包含多个网页 C、网站是由一些互相关联的网页构成的一个整体 D、网贡一定是动态网页 10.一个网站的起始网页被称为（ B ） A、文档 B、主页 C、网站 D、网页 11.在Frontpage中，用来控制网页布局的工具是（D) A、书签 B、超链接 C、图片 D、表格 12.网页制作时，为了增强页面的整体吸引力，以下观点恰当的有（ABC） A、合理地使用滚动的字幕、变换的选择框以及持续的动画，为用户创造一种平和安静的坏境 B、力求精简，不要使用太多的动画 C、过度的闪烁让人头痛，一般页面中最多不能有三处闪烁 动态效果越多越好、D．
2017秋春兰大《网页与网站设计》17春平时作业3 一、单选题（共10 道试题，共40 分。） 1. 在
标记中控制链接的颜色的属性是( )。 A. bgcolor B. 1ink C. vlink D. text 正确答案： 2. 在网络配置管理的功能描述中，下列哪种说法是错误的？（） A. 识别网络中的各种设备，记录并维护设备参数表 B. 用适当的软件设置参数值和配置设备 C. 初始化、启动和关闭网络或网络设备 D. 自动检测网络硬件和软件中的故障并通知用户 正确答案： 3. 下面哪种不是CSS的嵌人形式( )。 A. 内联式样式单 B. 嵌入式样式单 C. 外部式样式单 D. 索引式样式单 正确答案： 4. 下面哪个说法是正确的( )。 A. 站点内所有的文件都应该放在一个目录下 B. 在制作站点时采用的颜色越多越好 C. 在站点的三级结构中，二级页面之间、三级页面之间应保持风格一致 D. 为了使目录名明确，应该采用中文目录名 正确答案： 5. 在因特网的域名体系中，域名缩写.edu是指（）。 A. 教育机构 B. 商业机构 C. 政府部门 D. 军事部门 正确答案： 6. 在Flash MX中主要用来观察制作的影片预览效果的工具栏是（）？ A. 状态栏 B. 绘图工具栏 C. 主要栏D. 控制栏 正确答案： 7. 在浏览器中图像出现抖动是因为浏览器只能够显示( )种色彩的原因而造成的。 A. 256 B. 216 C. 16 D. 16M 正确答案： 8. 在下列任务中，哪些是网络操作系统的基本任务？（）①屏蔽本地资源与网络资源之间的差异②为用户提供基本的网络服务功能③管理网络系统的共享资源④提供网络系统的安全服务 A. ①② B. ①③ C. ①②③ D. ①②③④ 正确答案： 9. 调制解调器的功能是实现()。 A. 数字信号的编码 B. 数字信号的整形 C. 模拟信号的放大 D. 数字信号与模拟信号的转换 正确答案： 10. “HTML”的中文含义是（） A. 文件传输协议 B. 超文本传输协议 C. 超文本标记语言 D. 以上都不是 正确答案： 《网页与网站设计》17春平时作业3 二、多选题（共10 道试题，共40 分。） 1. 在Fireworks中，利用切片，主要有以下那些优点()? A. 加快下载速度 B. 减少重复图像，减小图像文件的大小 C. 便于局部更新、优化 D. 可以构建轮替效果 正确答案：
软件名称功能 photoshop Photoshop是一种可以帮助我们迅速有效地完成各种图形处理工作的电脑软件,它能帮助我们完成图像处理、编辑、通道、图层、路径综合运用;图像色彩的校正;各种特效滤镜的使用;特效字的制作;图像输出与优化等,灵活运用图层风格,流体变形及褪底和蒙板,制作出千变万化的 图像特效。 DreamWeaver Dreamweaver 8、是一款优秀的所见即所得式网页编辑器,功能强大,是制作、美化、维护网站,开发多种语言应用程序的专业工具。 Fireworks A dobe Fireworks是A dobe推出的一款网页作图软件,软件可以加速Web设计与开发,是一款创建与优化Web 图像和快速构建网站与 Web界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性,还提供了一个预先构建资源的公用库, 并可与Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Flash软件省时集成。在Fireworks 中将设计迅速转变为模型,或利用来自Illustrator、Photoshop和F lash的其它资源。然后直接置入D reamweaver中轻松地进行开发与部 署。 绘声绘影(Ulead VideoStudio 绘声绘影(Ulead VideoStudio是友立公司出品。是一个功能强大的视频编辑 软件,具有图像抓取和编修功能,可以抓取,转换MV、DV、V8、TV 和实时记录抓取画面文件,并提供有超过100 多种的编制功能与效果,可制作DVD,VCD光盘。支持各类
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
一CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/
2017秋17春东财《网页制作：DreamWeaver网页制作》在线作业三 一、单选题（共10 道试题，共40 分。） 1. 常见的世界性的域名中,( )表示教育机构 A. .edu B. .org C. .com D. .cn 正确答案： 2. 关于文本对齐，源代码设置不正确的一项是 A. 居中对齐：