2015网站设计培训

神州数码WEB开发技术培训基于WEB标准的网站设计WEB2.0标准前端技术利用DIV+CSS编写全站CSS网页布局与定位CSS网站元素设计盒模型现代Web网络标准（下一代Web网络）CSS3.0基础CSS3.0特性JAVASCRTIPDOM基础AJAX应用JQUERY应用ASP基础语法ASP应用SQLSERVER基础应用企业网站开发WEB标准的构成（WEB标准最理想的技术结构）结构行为表现Structure:HTMLXMLXHTMLPresentation:CSSBehavior:DOMECMASCRIPT基于WEB标准的网站设计HTML基础HTML是用来描述网页的一种语言。HTML=(HyperTextMarkupLanguage)不是一种编程语言，而是一种标记语言，用标记标签来描述网页基于WEB标准的网站设计HTML基础HTML文档=网页（包含HTML标签和纯文本）Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容基于WEB标准的网站设计XHTML文档结构基于WEB标准的网站设计!DOCTYPE声明帮助浏览器正确地显示网页!DOCTYPE声明位于文档中的最前面的位置，处于html标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。基于WEB标准的网站设计目前常见的!DOCTYPE声明HTML5!DOCTYPEhtmlHTML4.01!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN基于WEB标准的网站设计HTML-HEAD头部文件titlemetastylescriptnoscriptmeta元素可提供有关页面的元信息比如针对搜索引擎和更新频度的描述和关键词。metaname=keywordscontent=HTML,ASP,PHP,SQLmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8基于WEB标准的网站设计HTML-BODY主体文件文本控制(P,标题)图片控制（IMG）超链接控制(A)布局控制（TABLE,UL,DIV）表单控制(FORM)多媒体控制基于WEB标准的网站设计如何向WEB标准过渡1.从HTML转向XHMTL2.发挥CSS2.0的作用基于WEB标准的网站设计如何向WEB标准过渡1.从HTML转向XHMTLXHTML是以XML格式编写的HTML。与HTML4.01几乎是相同的，是更严格更纯净的HTML版本XHTML是2001年1月发布的W3C推荐标准XHTML得到所有主流浏览器的支持基于WEB标准的网站设计如何向WEB标准过渡1.从HTML转向XHMTL文档结构XHTMLDOCTYPE是强制性的html中的XMLnamespace属性是强制性的html、head、title以及body也是强制性的属性语法XHTML属性必须使用小写XHTML属性值必须用引号包围XHTML属性最小化也是禁止的基于WEB标准的网站设计元素语法XHTML元素必须正确嵌套XHTML元素必须始终关闭XHTML元素必须小写XHTML文档必须有一个根元素如何向WEB标准过渡2.发挥CSS2.0的作用合理的CSS文件结构继承与重用设计跨平台的表现基于DOM的交互Document:HTML文档Object:供JS操作DOM的一些对象Model:对HTML文档建立的一种模型:TreeDOM=Document+Object+Model基于WEB标准的网站设计CSS基础基于：了解HTML和XHTMLCSS概述层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率CSS2.0基础应用CSS作用：实现内容与表现分离的结合HTML引用方式：CSS2.0基础应用CSS基础语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。selector{declaration1;declaration2;...declarationN}CSS2.0基础应用CSS对HTML标签的重定义与格式化页面基本元素的重定义如A，BODY,UL,OL,P,H1CSS2.0基础应用CSS选择器控制两个最重要的选择器ID&CLASSid:id选择器以#来定义class:class选择器以“.”来定义CSS2.0基础应用CSS布局定位的核心：浮动与定位浮动与定位的基本控制标签：DIVW3C的官方说法：div是一个block对象（块对象或块级元素）XHTML中的所有对象几乎都默认为两种对象类型：Block（块状对象）:占整行in-line（行间对象/内联元素）:不占整行CSS2.0基础应用DIV+CSS布局的工作1用div把内容标记出来2为div编写对应的cssCSS2.0基础应用DIV+CSS通用网页布局一列固定宽度divid=“layout”布局内容/div#layout{background-color:#ff0000;Border:2pxsolid#343434;Width:400px;Height:300px;}CSS2.0基础应用DIV+CSS通用网页布局一列自适应宽度divid=“layout”布局内容/div#layout{background-color:#ff0000;Border:2pxsolid#343434;Width:80%;Height:300px;}CSS2.0基础应用DIV+CSS通用网页布局一列固定宽度居中(应用于网站大框架的设置)divid=“layout”布局内容/div#layout{background-color:#ff0000;Border:2pxsolid#343434;Width:400px;Height:300px;Margin:0pxauto;}CSS2.0基础应用DIV+CSS通用网页布局二列固定宽度divid=“left”布局左侧内容/divdivid=“right”布局右侧内容/div#right{background-color:#00ff00;Border:2pxsolid#343434;Width:400px;Height:300px;Float:left;}#left{background-color:#ff0000;Border:2pxsolid#343434;Width:400px;Height:300px;Float:left;}CSS2.0基础应用DIV+CSS通用网页布局二列宽度自适应divid=“left”布局左侧内容/divdivid=“right”布局右侧内容/div#right{background-color:#00ff00;Border:2pxsolid#343434;Width:65%;Height:300px;Float:left;}#left{background-color:#ff0000;Border:2pxsolid#343434;Width:30%;Height:300px;Float:left;}CSS2.0基础应用DIV+CSS通用网页布局二列布局右侧宽度自适应(右侧不浮动，没有宽度值)divid=“left”布局左侧内容/divdivid=“right”布局右侧内容/div#right{background-color:#00ff00;Border:2pxsolid#343434;Height:300px;}#left{background-color:#ff0000;Border:2pxsolid#343434;Width:140px;Height:300px;Float:left;}CSS2.0基础应用DIV+CSS通用网页布局二列固定宽度居中divid=“layout”divid=“left”布局左侧内容/divdivid=“right”布局右侧内容/div/div#right{background-color:#00ff00;Border:2pxsolid#343434;Height:300px;Width:400px;float:left;}#left{background-color:#ff0000;Border:2pxsolid#343434;Width:140px;Height:300px;Float:left;}#layout{Margin:0pxauto;Width:600}CSS2.0基础应用DIV+CSS通用网页布局三列浮动中间列宽度自适应divid=“left”布局左侧内容/divdivid=“center”布局中间内容/divdivid=“right”布局右侧内容/div#right{background-color:#00ff00;Border:2pxsolid#343434;Height:300px;Width:100px;Position:absolute;Top:0px;right:0px;}#left{background-color:#ff0000;Border:2pxsolid#343434;Width:100px;Height:300px;Position:absolute;Top:0px;Left:0px;}#center{background:#ff0000;Border:2pxsolid#000;Heigth:300px;Margin-left:104px;margin-right:104px;}body{margin:0px;padding:0px;}CSS2.0基础应用DIV+CSS通用网页布局高度自适应CSS2.0基础应用#left{background-color:#ff0000;Border:2pxsolid#343434;Width:100px;Height:100%;Float:left;}Html,body{Margin:0px;Height:100%;}CSS的核心概念W3C的定义：CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。理解：任何一个CSS布局的网页，都是由许多大小不同，位置不同的盒子组成。CSS2.0基础应用-盒模型(boxmodel)盒模型的描述细节width,height,padding,margin,borderCSS2.0基础应用-盒模型(boxmodel)深入浮动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;visi