XHTML网页设计制作(配合李炎恢xhtml 视频教程).doc

第2 章HTML 基本结构2.1 HTML 的基本结构 -根控制标记 -头控制标记标题 -标题标记 -头控制标记（尾）-网页显示区域 -根控制标记(尾)(1).根控制标记开头和结尾成对出现，双标签(2).头控制标记1.很单纯的文件标题声明2.控制标记的动态文件转换声明3.超链接网址基准参考点4.Javascript 和VBScript 程序5.stylesheet 可用来设置排版来的声明6.可引用外部文件，如CSS 排版样本(3).设置浏览器的视窗标题(4).页面可见内容2.2 HTML 控制标记的格式(1).单一型,无设置值的。如：(2).单一型，有设置值的。如：(3).对称型，无设置值。如：(4).对称型，有设置值。如：2.3 最常用的控制标记(1).跳行格式：无属性设置(2).段落格式：属性名称属性值说明align left 往左靠（默认）center 往中靠right 往右靠(3).水平直线格式：属性名称属性值说明size 像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗width 像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade 实体线(4).向中对齐 (被废弃的标签)格式：(5).背景色与文字设置格式：整体页面的边距，行距(6).标题文字设置格式：属性名称属性值说明align left 靠左center 靠中right 靠右(7).特殊字符设置格式： gt;& amp;“ quot;(8).在HTML 备注格式：(9).实体字符控制标记1. 粗2. 斜3. 删4. 下划5. 电报6. 下标7. 上标(10).语意字符控制1. 地址2. 大字3. 删除4. 修改5. 小字6. 加强语气(加粗)7. 加强语气(倾斜)(11).字体控制(被废弃的标签)格式：属性名称属性值说明size 0-7 字体大小color 英文或十六颜色face 字体字体(12).格式化格式：让书写的文字格式化！(13).引用文本格式：.属性名称属性值说明cite url 被引用的地址第3 章排列清单控制标记排列清单控制标记可以创建一般的列表、编号列表或加着重号列表，以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容，列表是非常方便的。3.1 无序号条例式清单与格式:功能: 无序条列清单的开始.表示结束.表示一个项目.的属性属性名称属性值说明type dise 实心圆(默认值)circle 空心圆square 实心方块3.2 有序号条例式清单与格式:功能: 有序条列清单的开始.表示结束.表示一个项目.的属性属性名称属性值说明type 1 表示以1,2,3,4 来表示a 表示以a,b,c,d 来表示A 表示以A,B,C,D 来表示i 表示以i,ii ,iii 来表示I 表示以I,II,III 来表示3.3 无序列表和有序列表的结合应用格式:.3.4 叙述式清单(定义列表)格式:功能: 叙述清单的开始表示一个项目表示一个项目下的更详细的内容第4 章表格在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML 中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多。4.1 表格的基本格式格式: 功能: 用来声明表格开始与结束.用来设置表格的行.用来设置标题栏位.用来设置数据栏位.4.2 标签下的属性属性名称属性值说明border 像素设置表格的边线cellspacing 像素绝对设置,存储格框线宽度百分比相对设置,存储格框线宽度cellpadding 像素绝对设置,数据与框线的距离百分比相对设置,数据与框线的距离width 像素绝对设置,像素表示表格宽度百分比相对设置,百分比表表格宽度height 像素绝对设置,像素表示表格宽度百分比绝对设置,百分比表表格宽度align left 表格往左靠(默认)center 表格往中靠right 表格网右靠bgcolor 英文/十六表格的背景颜色background URL 表格的背景图片summary 字符串用来描述表格数据说明bordercolor 英文/十六边框的颜色bordercolorlight 同上边框的亮色bordercolordark 同上边框的暗色4.3 标签下的边框设置属性名称属性值说明frame void 不要显现表格的边线above 只要显现出表格的上边线below 只显现出表格的下边线hsides 只显示表格的上下边线vsides 只显现表格的左右边线lhs 只显现表格的左边线rhs 只显现表格的右边线border/box 会显现出表格的所有边线rules rows 只显示出横行的格框线cols 只显示出直行的格框线all 显示全部格框线groups 表示列组合水平部分none 不显示任何格框线4.4 标签下的常用属性该属性必须在border的属性值不为0 的状态下!属性名称属性值说明width 像素绝对设置,以像素值设置宽百分比相对设置,以百分比设置宽height 像素绝对设置,以像素值设置高百分比相对设置,以百分比设置宽bgcolor 英文/十六数据栏的颜色设置align(水平方向) left 数据靠左center 数据靠中right 数据靠右valign(垂直方向) top 数据靠上middle 数据靠中bottom 数据靠下nowrap 无在单元格中换行4.5 拆分与合并单元格属性名称属性值说明colspan 数字向两边扩展栏位rowspan 数字向下扩展栏位4.6 表格的结构化、直列化、标题(1).结构化格式： -表头区 -表体区 -表尾区(2).直列化格式：.属性名称属性值说明align left 靠左center 靠中right 靠右valign top 靠上middle 靠中bottom 靠下span 数字直列数目width 像素/百分比宽度个别直列设置格式:功能完全和一样.(3).表格的标题：.下的属性值有:属性名称属性值说明align top 标题在表格上方bottom 标题在表格下方第5 章图像5.1 背景图案的设置格式：5.2 将图片插入到网页中去格式:功能:将图片插入到网页中去,单一标签下的属性属性名称属性值说明src URL 图片的路径图片的注解属性名称属性值说明alt 字符串给图片做注解图象大小的设置属性名称属性值说明width 像素绝对设置,宽百分比相对设置,宽height 像素绝对设置,高百分比相对设置,高图象边框的设置属性名称属性值说明border 数字图象边框文字图象的排列属性名称属性值说明align left 图象靠左,文字靠右right 图片靠右,文字靠左top 文字往上靠middle 文字靠中bottom 文字靠下空隙的设置属性名称属性值说明vspace 像素垂直上下两端与物件的距离hspace 像素水平左右两段与物件的距离5.3 用图像作为超链接格式:注意点:边框的问题.5.4 地图索引格式:声明整张图使用地图链接方式进行连接.name,id指此图的名称.表示我们所要链接其中一点的区快shape表示我们所选择的形状,如:rect矩形circle圆poly多边形coords 表示地图的坐标位置!5.5 切片索引使用Firework来进行!用表格进行定位!5.6 为网站添加图标第6 章超链接超链接也叫URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。6.1 超链接的基本格式格式:scheme:/host:post/path/filenamescheme 指的是http,ftp,file,mailto,news,gopher,telnet 七种host 指的是IP 地址或计算机名称post 指的是服务器端口path 指的是文件路径filename 指的是文件名6.2 超链接的种类一般常用的分为四种:1. http声明网易logo2. file声明图片3. ftp声明进入4. mailto E-MAIL6.3 相对链接和绝对链接1. index.htm2. page/index.htm3. page/top/index.htm4. ./index.htm5. ././index.htm6. ./page/index.htm6.4 书签的链接下的属性属性名称属性值说明name 字符串设置超链接的标记基本格式：瞄点链接点链接到别的网页的书签项目：基本格式：瞄点链接点6.5 基准参考点基本格式：6.6 超链接事件LINK 颜色的设置基本格式：link 超链接尚被选中的文字alink 超链接点选但未被放开的颜色vlink 超链接已被点选过的颜色6.7 为链接创建键盘快捷键accesskey=w (Alt+w) (Ctrl+w)6.8 为链接设置制表符次序tabindex=n第7 章表单表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。7.1 表单的功能结构：主标记结构：属性值说明name 字符串给这个表单起个名字method get/post 表单的传输方式action url 传输目标7.2 文本栏、密码栏、隐藏栏文本栏：密码栏：隐藏性栏位：7.3 复选栏、单选栏多重勾选栏位： 单选栏位:7.4 窗体栏位、区块栏位窗体选项栏位设置:/分组/多选multiple文字区块的设置:7.5 按钮、图像按钮按钮设置: 按钮图像:图像按钮:7.6 允许上传文件上传栏位:7.7 表单加上外框和标题外边框:.标题:.7.8 元件的次序和快捷键accesskey=w (Alt+w) (Ctrl+w)tabindex=n第8 章框架在前面几章中，大家应该可以发现浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，本章将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。8.1 多窗框的基本结构格式：功能说明:用来设置多窗框结构的声明下的属性：属性名称属性值说明cols 像素设置直排的多窗框环境百分比同上rows 像素设置横排的多窗框环境百分比同上border 像素边框的宽度framespacing 像素页面与页面的边距属性格式：下的属性：属性名称属性值说明src URL 链接的页面noresize true 允许浏览器自行改变框架大小false 不允许scrolling yes 不管网页内容的大小，都出现滚动条no 不管网页内容的大小，都不现滚动条auto 浏览器自动判断，是否需要滚动条marginheight 像素设置垂直方向，窗体内容与边界的距离marginwidth 像素设置水平方向，窗体内容与边界的距离frameborder 01 不出现框体边/出现窗体边线属性格式：8.2 嵌套多窗体设置：格式：8.3 多框架与超链接框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。相关属性说明：的命名属性：格式：超链接多窗体链接的属性：属性名称属性值说明target _blank 打开一个新建的页面8.4 悬浮窗体的设置格式:功能:设置悬浮窗框属性名称属性值说明height 像素/% 绝对/相对高度width 像素/% 绝对/相对宽度其余属性除了noresize 外,其他都和frameset 一样.第9 章多媒体使用Web 如此流行的原因之一是可以再网页上加入图像、声音、动画和电影文件。虽然过去对这些文件大小的限制局限了它们的作用，但是新技术（比如流技术及宽带）已经使多媒体网页成为了可能。9.1 FLASH 动画的插入使用.标记插入FLASH 动画属性值说明src url flash 路径width 像素/百分比flash 宽度height 像素/百分比flash 高度wmode window 使flash 自身的矩形窗口来播放opaque 使flash 隐藏页面上位于它后面transparent 使flash 某一部分透明使用.标记插入flash 动画属性值说明type application/x-shockwave-flash flash 类型data url flash 路径width 像素/百分比flash 宽度height 像素/百分比flash 高度注意：必须再使用子标签完成flash 插入属性值说明name 属性flash 属性value 值flash 值9.3 MP3 音频及WMV 视频的插入使用.标记插入FLASH 动画属性值说明autostart true/false 自动/非自动播放loop 数字音乐循环的次数它的前身是使用.标记插入MP3 音乐属性值说明name src(路径) 音乐路径autoplay(true/false) 是否自动播放9.4 网络流媒体视频的插入主流视频流：优酷网、土豆网、我乐网第10 章其他标记10.1 自动展示网页内容：格式