• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
网页设计及制作(Div+css)
 

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

on

  • 986 views

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

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

Statistics

Views

Total Views
986
Views on SlideShare
986
Embed Views
0

Actions

Likes
1
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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