web标准页面布局应用(一)

－高级平面网页设计人才培训专家!标准页面布局应用第一课主讲：刘静邮箱：[e-mail]－高级平面网页设计人才培训专家!目标一．认识什么是HTML二．标记的语法三．掌握常用的HTML标记的应用－高级平面网页设计人才培训专家!•全球范围内网络的网络•Internet的一部分•由包含各种信息的文档组成－高级平面网页设计人才培训专家!服务器客户端协议•用于访问Web上资源的一组规则•HTTP是Web协议站点地址或URLHTMLHEAD…………/HEADBODY…………/BODY/HTMLHTML语言用于制作网页－高级平面网页设计人才培训专家!负责请求和响应－高级平面网页设计人才培训专家!相关术语：WorldWideWeb万维网,基于Internet提供信息服务，用于检索连接到Internet上服务器的有关内容。HTTP：HypertextTransferProtocol超文本传输协议网站：万维网上相关网页的集合网页：文件后缀名通常为*.html或*.htm的页面HTML：用于制作网页的超文本标记语言(HypertextMark-upLanguage)6－高级平面网页设计人才培训专家!网页是用什么制作出来的－高级平面网页设计人才培训专家!简介HTML（HyperTextMark-upLanguage超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。Html文档的创建方式：用html语言创建的文档•手工直接编写（例如记事本）。•通过图形化的HTML开发软件Dreamweaver。•由Web服务器上的动态网页程序生成。－高级平面网页设计人才培训专家!最基本的语法就是标记符内容/标记符，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如：hrwidth=”80%”/例如：fontsize=”7”文字内容/font－高级平面网页设计人才培训专家!标记的类型：单标记与双标记一、单标记(1).标记名称单一型,无属性值。如：br/(2).标记名称属性=”属性值”单一型，有属性值。如：hrwidth=”80%”/－高级平面网页设计人才培训专家!标记的语法二、双标记(3).标记名称…/标记名称没有属性值。如：title…/title(4).标记名称属性=”属性值”…/标记名称有属性值。如：bodybgcolor=”red”…/bodyfontsize=”7”…/font－高级平面网页设计人才培训专家!标记语法总结：1、双标记：开始标记内容/结束标记2、单标记：标记3、标记的属性：标记属性1=参数1属性2=参数2…内容/标记说明：A、标记与属性、属性之间以空格分隔B、属性不区分先后顺序；且属性不是必需的重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标记都采用小写。－高级平面网页设计人才培训专家!、文档结构所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：htmlheadtitle标题/title/headbody正文/body/htmlhtml……/html标识网页文件的开始与结束，所有的html元素都要放在这对标记中head……/head标识网页文件的头部信息，如标题、搜索引擎关键字等title……/title标识网页文件的标题body……/body标识网页文件的主体部分－高级平面网页设计人才培训专家!标记用于定义文件信息meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于head/head之间设置关键字：metaname=”keywords”content=”value”多个关键字内容之间可以用“，”分隔设置描述：metaname=”description”content=”value”设置作者：metaname=”author”content=”作者名”设置字符集：metahttp-equiv=”content-type”content=”text/html;charset=gb2312”设置页面定时跳转：metahttp-equiv=“refreshcontent=2;URL=－高级平面网页设计人才培训专家!（1）、注释!--注释内容--（2）、body属性bodybgcolor=“背景颜色”background=“背景图像”text=“文本颜色”link=“链接文本颜色”vlink=“访问过的文本颜色”alink=“激活的链接文本颜色”leftmargin=“左边界”rightmargin=“右边界”topmargin=“上边界”bottommargin=“下边界”网页主体标记body－高级平面网页设计人才培训专家!字体修饰(1)、font标记语法：fontcolor=文本颜色size=字号face=字体文本/font注：网页中的文本字体、字号一般通过CSS修饰颜色英文名称十六位进制颜色英文名称十六位进制白色White#FFFFFF黑色Black#000000红色Red#FF0000绿色Green#00FF00蓝色Blue#0000FF灰色Gray#999999－高级平面网页设计人才培训专家!(2)、字符格式功能标记加粗b文本/b倾斜i文本/i加强语气(加粗)strong文本/strong加强语气(倾斜)em文本/em下划线u文本/u推荐ins/ins删除线s文本/s推荐del/del上标sup文本/sup下标sub文本/sub－高级平面网页设计人才培训专家!（3）、段落标记：格式：palign=”对齐方式“…/p属性名称属性值说明alignleft左对齐（默认）center居中right右对齐段落控制标记－高级平面网页设计人才培训专家!（4）、段落标题hxalign=”对齐方式“…/hx：段落标题说明：X取值[1~6]hx内的文本会自动加粗显示。hx针对的对象是段落，而font针对的对象的任意文本。（5）、br/：换行（换行不换段）段落控制标记－高级平面网页设计人才培训专家!修饰标记(6).水平直线hr/属性名称属性值说明size像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗width像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade=noshade实体线