网页设计及制作(Div+css)
- 2. 大纲 Web 图形处理知识 Web 标准网页制作知识 实例操作
- 3. Web 图形处理知识 主要软件介绍 制作与编辑切片 优化输出网页图像 图片格式
- 4. Web 标准网页制作 基本知识 Web 标准是什么？ 结构、表现、行为 好处是什么？对开发者而言，对浏览者而言
- 5. Web 标准网页制作 页面中还有些看不见的东西 DOCTYPE 过渡型 (Transitional ) 、严格型（ Strict ）框架型（ Frameset ） 名字空间（ Namespace ） <html XMLns="http://www.w3.org/1999/xhtml" > 编码语言：如 :charset=GB2312
- 6. Web 标准网页制作 基本的网页优化 robots.txt <meta Content="all" name="robots" /> 版权信息 <meta name="Description" content=“web 知识培训 " /> 关键词 <meta Keywords=“web, 知识 , 培训 " />
- 7. Web 标准网页制作 基本 web 标准 小写字母书写所有的标签 图片 alt 属性 关闭标签 属性必须用引号 "" 括起来 <alt="say'hello'"> < 和 & 特殊符号用编码 < =& l t ;, > =& g t ;, & =& a m p ; 所有属性赋值 <td nowrap> 正确为 <td nowrap="nowrap"> 不要在注释内容中使“ --” <!-- 这里是注释 ----------- 这里是注释 --> 无效
- 8. Web 标准网页制作 Web 网页常用标签 div : 大范围布局定位，如盒子（包含全部），头部、中部、底部 h1-h6 : 标题标签，一个页面尽可能只出现一个标题标签 ul+li ， ol+li ： ul+li, 是无序排列列表， ol+li 标签有序排列 p : 段落标签 a : 链接 span ：无特定作用 img : 页面引入图片的标签 title : 页面标题标签
- 9. Web 标准网页制作 CSS 重要知识： 盒子模型 内容 (content) 、填充 (padding) 、边框 (border) 、边界 (margin) ， CSS 盒子模式都具备这些属性
- 10. Web 标准网页制作
- 11. Web 标准网页制作 样式表的调用 网页内使用： <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style> 外部调用： <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
- 12. 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
- 13. 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%; }
- 14. Web 标准网页制作 实例操作