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

1,179 views

Published on

网页设计及制作(DIV+CSS)石油局培训

Published in: Design, Technology
  • Be the first to comment

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

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

×