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

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

2. 大纲 <ul><li>Web 图形处理知识 </li></ul><ul><li>Web 标准网页制作知识 </li></ul><ul><li>实例操作 </li></ul>

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

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

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

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

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

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

10. Web 标准网页制作

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

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 : "Lucida Grande", 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="menubar"></div> #menubar {} </li></ul><ul><li>类别选择器 :. <span class="14px"></span> .14px{} </li></ul><ul><li>链接的样式 : a:link a:visited a:hover a:active </li></ul>

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. Web 标准网页制作实例操作

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

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

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

Plus De Contenu Connexe

Diaporamas pour vous (12)

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

Plus récents (20)

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