网页设计及制作(Div+css)

网页设计及制作主讲：李汝康

大纲 Web 图形处理知识 Web 标准网页制作知识实例操作

Web 图形处理知识主要软件介绍制作与编辑切片优化输出网页图像图片格式

Web 标准网页制作基本知识 Web 标准是什么？结构、表现、行为好处是什么？对开发者而言，对浏览者而言

Web 标准网页制作页面中还有些看不见的东西 DOCTYPE 过渡型 (Transitional ) 、严格型（ Strict ）框架型（ Frameset ）名字空间（ Namespace ） <html XMLns="http://www.w3.org/1999/xhtml" > 编码语言：如 :charset=GB2312

Web 标准网页制作基本的网页优化 robots.txt <meta Content="all" name="robots" /> 版权信息 <meta name="Description" content=“web 知识培训 " /> 关键词 <meta Keywords=“web, 知识 , 培训 " />

Web 标准网页制作基本 web 标准小写字母书写所有的标签图片 alt 属性关闭标签属性必须用引号 "" 括起来 <alt="say'hello'"> < 和 & 特殊符号用编码 < =& l t ;, > =& g t ;, & =& a m p ; 所有属性赋值 <td nowrap> 正确为 <td nowrap="nowrap"> 不要在注释内容中使“ --”  无效

Web 标准网页制作 Web 网页常用标签 div : 大范围布局定位，如盒子（包含全部），头部、中部、底部 h1-h6 : 标题标签，一个页面尽可能只出现一个标题标签 ul+li ， ol+li ： ul+li, 是无序排列列表， ol+li 标签有序排列 p : 段落标签 a : 链接 span ：无特定作用 img : 页面引入图片的标签 title : 页面标题标签

Web 标准网页制作 CSS 重要知识：盒子模型内容 (content) 、填充 (padding) 、边框 (border) 、边界 (margin) ， CSS 盒子模式都具备这些属性

Web 标准网页制作样式表的调用网页内使用： <style type="text/css">  </style> 外部调用： <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

Web 标准网页制作 CSS 样式基本语法 : p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 颜色值 : color : rgb(255,0,0 ） color:#FF0000 color:red; 定义字体 body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体 ,sans-serif; } 群选择器 : p, td, li { font-size : 12px ; } 派生选择器 : li strong { font-style : italic; font-weight : normal ； } id 选择器 : <div id="menubar"></div> #menubar {} 类别选择器 :. <span class="14px"></span> .14px{} 链接的样式 : a:link a:visited a:hover a:active

Web 标准网页制作 CSS 实例 # sample { MARGIN : 10px 10px 10px 10px; PADDING :20px 10px 10px 20px; BORDER-TOP : #CCC 2px solid; BORDER-RIGHT : #CCC 2px solid; BORDER-BOTTOM : #CCC 2px solid; BORDER-LEFT : #CCC 2px solid; BACKGROUND : url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR : #666; TEXT-ALIGN : center; LINE-HEIGHT : 150%; WIDTH:60%; }

Web 标准网页制作实例操作

网页设计及制作(Div+css)

Recommended

More Related Content

What's hot (11)

Similar to 网页设计及制作(Div+css) (20)

网页设计及制作(Div+css)