2015网站设计培训.ppt
神州数码WEB开发技术培训,基于WEB标准的网站设计,WEB2.0标准前端技术利用DIV+CSS编写全站CSS网页布局与定位CSS网站元素设计盒模型现代Web网络标准（下一代Web网络）CSS3.0基础CSS3.0特性,JAVASCRTIPDOM基础AJAX应用JQUERY应用ASP基础语法ASP应用SQL SERVER基础应用企业网站开发,WEB标准的构成（WEB标准最理想的技术结构）,Structure:HTML XML XHTMLPresentation:CSSBehavior:DOM ECMASCRIPT,基于WEB标准的网站设计,HTML基础HTML 是用来描述网页的一种语言。HTML=(HyperTextMarkupLanguage)不是一种编程语言，而是一种标记语言，用标记标签来描述网页,基于WEB标准的网站设计,HTML基础HTML 文档=网页（包含 HTML 标签和纯文本）Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容,基于WEB标准的网站设计,XHTML 文档结构,基于WEB标准的网站设计,声明帮助浏览器正确地显示网页 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。,基于WEB标准的网站设计,目前常见的 声明HTML5HTML 4.01XHTML 1.0,基于WEB标准的网站设计,HTML-HEAD头部文件,元素可提供有关页面的元信息比如针对搜索引擎和更新频度的描述和关键词。,基于WEB标准的网站设计,HTML-BODY主体文件文本控制(P,标题)图片控制（IMG）超链接控制(A)布局控制（TABLE,UL,DIV）表单控制(FORM)多媒体控制,基于WEB标准的网站设计,如何向WEB标准过渡1.从HTML转向XHMTL 2.发挥CSS2.0的作用,基于WEB标准的网站设计,如何向WEB标准过渡1.从HTML转向XHMTLXHTML 是以 XML 格式编写的 HTML。与 HTML 4.01 几乎是相同的，是更严格更纯净的 HTML 版本XHTML 是2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持,基于WEB标准的网站设计,如何向WEB标准过渡1.从HTML转向XHMTL文档结构 XHTML DOCTYPE 是强制性的 中的 XML namespace 属性是强制性的、以及 也是强制性的属性语法XHTML 属性必须使用小写XHTML 属性值必须用引号包围XHTML 属性最小化也是禁止的,基于WEB标准的网站设计,元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素,如何向WEB标准过渡2.发挥CSS2.0的作用合理的CSS文件结构继承与重用设计跨平台的表现基于DOM的交互,Document:HTML 文档Object:供 JS 操作 DOM 的一些对象Model:对 HTML 文档建立的一种模型:Tree,DOM=Document+Object+Model,基于WEB标准的网站设计,CSS基础基于：了解HTML和XHTMLCSS 概述层叠样式表(CascadingStyleSheets)样式定义如何显示HTML 元素把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率,CSS2.0 基础应用,CSS作用：实现内容与表现分离的结合HTML引用方式：,CSS2.0 基础应用,CSS 基础语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。selector declaration1;declaration2;.declarationN,CSS2.0 基础应用,CSS对HTML标签的重定义与格式化页面基本元素的重定义如A，BODY,UL,OL,P,H1,CSS2.0 基础应用,CSS选择器控制两个最重要的选择器ID&CLASS id:id 选择器以#来定义 class:class 选择器以“.”来定义,CSS2.0 基础应用,CSS布局定位的核心：浮动与定位浮动与定位的基本控制标签：DIVW3C的官方说法：div是一个block对象（块对象或块级元素）XHTML中的所有对象几乎都默认为两种对象类型：Block（块状对象）:占整行in-line（行间对象/内联元素）:不占整行,CSS2.0 基础应用,DIV+CSS布局的工作1 用div把内容标记出来2 为div编写对应的css,CSS2.0 基础应用,DIV+CSS通用网页布局一列固定宽度布局内容#layoutbackground-color:#ff0000;Border:2px solid#343434;Width:400px;Height:300px;,CSS2.0 基础应用,DIV+CSS通用网页布局一列自适应宽度布局内容#layoutbackground-color:#ff0000;Border:2px solid#343434;Width:80%;Height:300px;,CSS2.0 基础应用,DIV+CSS通用网页布局一列固定宽度居中(应用于网站大框架的设置)布局内容#layoutbackground-color:#ff0000;Border:2px solid#343434;Width:400px;Height:300px;Margin:0px auto;,CSS2.0 基础应用,DIV+CSS通用网页布局二列固定宽度布局左侧内容布局右侧内容,#rightbackground-color:#00ff00;Border:2px solid#343434;Width:400px;Height:300px;Float:left;,#leftbackground-color:#ff0000;Border:2px solid#343434;Width:400px;Height:300px;Float:left;,CSS2.0 基础应用,DIV+CSS通用网页布局二列宽度自适应布局左侧内容布局右侧内容,#rightbackground-color:#00ff00;Border:2px solid#343434;Width:65%;Height:300px;Float:left;,#leftbackground-color:#ff0000;Border:2px solid#343434;Width:30%;Height:300px;Float:left;,CSS2.0 基础应用,DIV+CSS通用网页布局二列布局右侧宽度自适应(右侧不浮动，没有宽度值)布局左侧内容布局右侧内容,#rightbackground-color:#00ff00;Border:2px solid#343434;Height:300px;,#leftbackground-color:#ff0000;Border:2px solid#343434;Width:140px;Height:300px;Float:left;,CSS2.0 基础应用,DIV+CSS通用网页布局二列固定宽度居中布局左侧内容布局右侧内容,#rightbackground-color:#00ff00;Border:2px solid#343434;Height:300px;Width:400px;float:left;,#leftbackground-color:#ff0000;Border:2px solid#343434;Width:140px;Height:300px;Float:left;,#layoutMargin:0px auto;Width:600,CSS2.0 基础应用,DIV+CSS通用网页布局三列浮动中间列宽度自适应布局左侧内容布局中间内容布局右侧内容,#rightbackground-color:#00ff00;Border:2px solid#343434;Height:300px;Width:100px;Position:absolute;Top:0px;right:0px;,#leftbackground-color:#ff0000;Border:2px solid#343434;Width:100px;Height:300px;Position:absolute;Top:0px;Left:0px;,#centerbackground:#ff0000;Border:2px solid#000;Heigth:300px;Margin-left:104px;margin-right:104px;bodymargin:0px;padding:0px;,CSS2.0 基础应用,DIV+CSS通用网页布局高度自适应,CSS2.0 基础应用,#leftbackground-color:#ff0000;Border:2px solid#343434;Width:100px;Height:100%;Float:left;,Html,bodyMargin:0px;Height:100%;,CSS的核心概念W3C的定义：CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。理解：任何一个CSS布局的网页，都是由许多大小不同，位置不同的盒子组成。,CSS2.0 基础应用-盒模型(box model),盒模型的描述细节width,height,padding,margin,border,CSS2.0 基础应用-盒模型(box model),深入浮动CSS网页布局的两种方式：浮动布局，定位布局皆脱离于文档流的控制。文档流是浏览器的默认呈现规则。,CSS2.0 基础应用-浮动布局的秘密,浮动布局FLOAT定位，清理 clear:both定位技术position:static|relative|absolute|fixed|inherit绝对定位与相对定位Position:absolute;Top,right,bottom,left,z-indexPosistion:relative;,CSS2.0 基础应用-定位技术,div.clear background:none;border:0;clear:both;display:block;float:none;font-size:0;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0;,常见网站导航条的设计横向导航-纵向导航-下拉导航,CSS2.0 基础应用-实战,盒模型背景的控制Background:设置背景的所有控制选项背景颜色（background-color）背景图片(background-image)背景定位（background-position）背景滚动(background-attachment)背景属性缩写基于背景控制的导航优化csssprites技术,CSS2.0 基础应用-背景控制,盒模型背景的控制背景颜色（background-color）十六进制表示法光学三元色表示法名称表示法透明表示法Bodybackground:#ededed;H1background:#6e87ff;H2background:#rgb(53,200,30);H3background:red;H4background:transparent;,CSS2.0 基础应用-背景控制,盒模型背景的控制背景图片(background-image)Background-image:url(url);Background-repeat,CSS2.0 基础应用-背景控制,盒模型背景的控制背景定位（background-position）background-position：左对齐方式 上对齐方式,CSS2.0 基础应用-背景控制,盒模型背景的控制背景属性缩写,CSS2.0 基础应用-背景控制,盒模型背景的控制基于背景控制的导航优化,CSS2.0 基础应用-背景控制,csssprites技术网页中一些背景图片整合到一张图片中利用CSS的背景属性进行背景定位,CSS2.0 基础应用-背景控制,文本控制字体设计段落样式设计行高与文本换行间距控制与首字下沉,color|font-family|font-sizeFont-size-adjust|font-style Font-weight|font-variant Text-transform|text-decoration,Line-height|letter-spacingWord-spacing|text-indentText-overflow|vertical-alignText-align|layout-flowWord-break|White-spaceWord-warp|overflow,CSS2.0 基础应用-文本控制,图片控制图片作为主体的控制技术图片定位 两种方式：使用margin进行外边界的控制；通过top和right进行位置的相对定位#logofloat:left;margin-top:20px;margin-left:30px;#logofloat:left;posistion:relative;top:20px;left:30px;图片剪切Clip:rect(n1,n2,n3,n4);图片替代文本（SEO）标题样式#titlewidth:200px;height:80px;background:url(title.jpg)no-repeat;#title spandisplay:none;,CSS2.0 基础应用-图片控制,Div与spandiv的默认显示模式是：display:block;span的默认显示模式是：display:inline;,CSS2.0 高级应用,编码统一为utf-8;协作开发及分工：共用css文件base.cssclass与id的使用:id是唯一的并是父级的 id原则上统一命名,为JavaScript预留索引的除外;底部样式,不可随意修改;为JavaScript使用的命名,以 js_ 起始,比如:js_hide,js_show;大的框架统一命名.由小写英文,CSS2.0 高级应用-CSS书写规范,7.css属性书写顺序：布局定位属性自身属性文本属性其他属性.8.png图片：要求图片格式为png-8格式，ie6单独定义背景:_background:none;_filter:progid:DXImageTransForm.Microsoft.AlphaImageLoader(sizingMethod=crop,src=img/bg.png);9.充分利用html自身属性及样式继承原理减少代码量,比如:这里是新闻 标题2013-10-23ul.list liposition:relative ul.list li spanposition:absolute;right:010.背景图片请尽可能使用sprite技术,sprite按模块制作;11.样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码;,CSS2.0 高级应用-CSS书写规范,切换样式表（网站换皮肤的技术技巧）1.通过JS脚本来实现2.定义设置好结构3.为结构准备多个样式表文件JS中使用DOM方法来访问控制csstype这个对象，并改变其属性。Function changetype(name)Css=document.getElementById(“csstype”);Css.href=name+“.css”;,CSS2.0 高级应用-实战,CSS HACK技术IE条件注释功能盒模型的HACK,CSS2.0 高级应用-多浏览器兼容与解析问题,
