2015網(wǎng)站設(shè)計(jì)培訓(xùn)ppt課件

1、神 州 數(shù) 碼 W E B 開 發(fā) 技 術(shù) 培 訓(xùn)基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)WEB2.0標(biāo)準(zhǔn)前端技術(shù)利用DIV+CSS編寫全站CSS網(wǎng)頁布局與定位CSS網(wǎng)站元素設(shè)計(jì)盒模型現(xiàn)代Web網(wǎng)絡(luò)標(biāo)準(zhǔn)（下一代Web網(wǎng)絡(luò)）CSS3.0基礎(chǔ)CSS3.0特性JAVASCRTIPDOM基礎(chǔ)AJAX應(yīng)用JQUERY應(yīng)用ASP基礎(chǔ)語法ASP應(yīng)用SQL SERVER基礎(chǔ)應(yīng)用企業(yè)網(wǎng)站開發(fā)WEB標(biāo)準(zhǔn)的構(gòu)成（WEB標(biāo)準(zhǔn)最理想的技術(shù)結(jié)構(gòu)）結(jié)構(gòu)行為表現(xiàn)Structure: HTML XML XHTMLPresentation: CSSBehavior: DOM ECMASCRIPT基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)HTML基礎(chǔ)HTML 是用

2、來描述網(wǎng)頁的一種語言。HTML =(Hyper Text Markup Language)不是一種編程語言，而是一種標(biāo)記語言，用標(biāo)記標(biāo)簽來描述網(wǎng)頁基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)HTML基礎(chǔ)HTML 文檔 = 網(wǎng)頁（包含 HTML 標(biāo)簽和純文本）Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)XHTML 文檔結(jié)構(gòu)基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì) 聲明幫助瀏覽器正確地顯示網(wǎng)頁 聲明位于文檔中的最前面的位置，處于 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。該標(biāo)簽可聲明三種 DT

3、D 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔?；赪EB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)目前常見的 聲明HTML5HTML 4.01XHTML 1.0基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)HTML-HEAD頭部文件 元素可提供有關(guān)頁面的元信息比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)HTML-BODY主體文件文本控制(P,標(biāo)題)圖片控制（IMG）超鏈接控制(A)布局控制（TABLE,UL,DIV）表單控制(FORM)多媒體控制基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)如何向WEB標(biāo)準(zhǔn)過渡1.從HTML轉(zhuǎn)向XHMTL 2.發(fā)揮CSS2.0的作用基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)如何向WEB標(biāo)準(zhǔn)過渡1.從HTM

4、L轉(zhuǎn)向XHMTLXHTML 是以 XML 格式編寫的 HTML。與 HTML 4.01 幾乎是相同的，是更嚴(yán)格更純凈的 HTML 版本XHTML 是 2001 年 1 月發(fā)布的 W3C 推薦標(biāo)準(zhǔn)XHTML 得到所有主流瀏覽器的支持基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)如何向WEB標(biāo)準(zhǔn)過渡1.從HTML轉(zhuǎn)向XHMTL文檔結(jié)構(gòu) XHTML DOCTYPE 是強(qiáng)制性的 中的 XML namespace 屬性是強(qiáng)制性的、 以及 也是強(qiáng)制性的屬性語法XHTML 屬性必須使用小寫XHTML 屬性值必須用引號包圍XHTML 屬性最小化也是禁止的基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)元素語法XHTML 元素必須正確嵌套XHTML 元素必

5、須始終關(guān)閉XHTML 元素必須小寫XHTML 文檔必須有一個根元素如何向WEB標(biāo)準(zhǔn)過渡2.發(fā)揮CSS2.0的作用合理的CSS文件結(jié)構(gòu)繼承與重用設(shè)計(jì)跨平臺的表現(xiàn)基于DOM的交互Document :HTML 文檔Object :供 JS 操作 DOM 的一些對象Model:對 HTML 文檔建立的一種模型:TreeDOM=Document+Object+ Model基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)CSS基礎(chǔ)基于： 了解HTML和XHTMLCSS 概述層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題

6、外部樣式表可以極大提高工作效率CSS2.0 基礎(chǔ)應(yīng)用CSS作用：實(shí)現(xiàn)內(nèi)容與表現(xiàn)分離的結(jié)合HTML引用方式：CSS2.0 基礎(chǔ)應(yīng)用CSS 基礎(chǔ)語法CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。selector declaration1; declaration2; . declarationN CSS2.0 基礎(chǔ)應(yīng)用CSS對HTML標(biāo)簽的重定義與格式化頁面基本元素的重定義如A，BODY,UL,OL,P,H1CSS2.0 基礎(chǔ)應(yīng)用CSS選擇器控制兩個最重要的選擇器ID & CLASS id: id 選擇器以 # 來定義 class: class 選擇器以 “.” 來定義CS

7、S2.0 基礎(chǔ)應(yīng)用CSS布局定位的核心：浮動與定位浮動與定位的基本控制標(biāo)簽：DIVW3C的官方說法：div是一個block對象（塊對象或塊級元素）XHTML中的所有對象幾乎都默認(rèn)為兩種對象類型：Block（塊狀對象）:占整行in-line（行間對象/內(nèi)聯(lián)元素）:不占整行CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS布局的工作1 用div把內(nèi)容標(biāo)記出來2 為div編寫對應(yīng)的cssCSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局一列固定寬度布局內(nèi)容#layoutbackground-color:#ff0000;Border:2px solid #343434;Width:400px;Height:300px

8、;CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局一列自適應(yīng)寬度布局內(nèi)容#layoutbackground-color:#ff0000;Border:2px solid #343434;Width:80%;Height:300px;CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局一列固定寬度居中(應(yīng)用于網(wǎng)站大框架的設(shè)置)布局內(nèi)容#layoutbackground-color:#ff0000;Border:2px solid #343434;Width:400px;Height:300px;Margin:0px auto;CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局二列固定寬度布局左側(cè)內(nèi)容布

9、局右側(cè)內(nèi)容#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 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局二列寬度自適應(yīng)布局左側(cè)內(nèi)容布局右側(cè)內(nèi)容#rightbackground-color:#00ff00;Border:2px solid #343434;Width:65%;Hei

10、ght:300px;Float:left;#leftbackground-color:#ff0000;Border:2px solid #343434;Width:30%;Height:300px;Float:left;CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局二列布局右側(cè)寬度自適應(yīng)(右側(cè)不浮動，沒有寬度值)布局左側(cè)內(nèi)容布局右側(cè)內(nèi)容#rightbackground-color:#00ff00;Border:2px solid #343434;Height:300px;#leftbackground-color:#ff0000;Border:2px solid #343434;Width:

11、140px;Height:300px;Float:left;CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局二列固定寬度居中布局左側(cè)內(nèi)容布局右側(cè)內(nèi)容#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:600CSS2.0 基礎(chǔ)應(yīng)用

12、DIV+CSS通用網(wǎng)頁布局三列浮動中間列寬度自適應(yīng)布局左側(cè)內(nèi)容布局中間內(nèi)容布局右側(cè)內(nèi)容#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:#ff000

13、0;Border:2px solid #000;Heigth:300px;Margin-left:104px;margin-right:104px;bodymargin:0px;padding:0px;CSS2.0 基礎(chǔ)應(yīng)用DIV+CSS通用網(wǎng)頁布局高度自適應(yīng)CSS2.0 基礎(chǔ)應(yīng)用#leftbackground-color:#ff0000;Border:2px solid #343434;Width:100px;Height:100%;Float:left;Html,bodyMargin:0px;Height:100%;CSS的核心概念W3C的定義：CSS布局中的每一個元素，在瀏覽器的解釋中，

14、都被當(dāng)作一個盒狀物。理解：任何一個CSS布局的網(wǎng)頁，都是由許多大小不同，位置不同的盒子組成。CSS2.0 基礎(chǔ)應(yīng)用-盒模型(box model)盒模型的描述細(xì)節(jié)width,height,padding,margin,borderCSS2.0 基礎(chǔ)應(yīng)用-盒模型(box model)深入浮動CSS網(wǎng)頁布局的兩種方式：浮動布局，定位布局皆脫離于文檔流的控制。文檔流是瀏覽器的默認(rèn)呈現(xiàn)規(guī)則。CSS2.0 基礎(chǔ)應(yīng)用-浮動布局的秘密浮動布局FLOAT定位，清理 clear:both定位技術(shù)position:static | relative | absolute | fixed | inherit絕對定位與

15、相對定位Position:absolute;Top,right,bottom,left,z-indexPosistion:relative;CSS2.0 基礎(chǔ)應(yīng)用-定位技術(shù)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; 常見網(wǎng)站導(dǎo)航條的設(shè)計(jì)橫向?qū)Ш?- 縱向?qū)Ш?- 下拉導(dǎo)航CSS2.0 基礎(chǔ)應(yīng)用-實(shí)戰(zhàn)盒模型背景的控制Background

16、:設(shè)置背景的所有控制選項(xiàng)背景顏色（background-color）背景圖片(background-image)背景定位（background-position）背景滾動(background-attachment)背景屬性縮寫基于背景控制的導(dǎo)航優(yōu)化css sprites技術(shù)CSS2.0 基礎(chǔ)應(yīng)用-背景控制盒模型背景的控制背景顏色（background-color）十六進(jìn)制表示法光學(xué)三元色表示法名稱表示法透明表示法Bodybackground:#ededed;H1background:#6e87ff;H2background:#rgb(53,200,30);H3background:red;H

17、4background:transparent;CSS2.0 基礎(chǔ)應(yīng)用-背景控制盒模型背景的控制背景圖片(background-image)Background-image:url(url);Background-repeatCSS2.0 基礎(chǔ)應(yīng)用-背景控制盒模型背景的控制背景定位（background-position）background-position：左對齊方式 上對齊方式CSS2.0 基礎(chǔ)應(yīng)用-背景控制盒模型背景的控制背景屬性縮寫CSS2.0 基礎(chǔ)應(yīng)用-背景控制盒模型背景的控制基于背景控制的導(dǎo)航優(yōu)化CSS2.0 基礎(chǔ)應(yīng)用-背景控制css sprites技術(shù)網(wǎng)頁中一些背景圖片整合到一

18、張圖片中利用CSS的背景屬性進(jìn)行背景定位CSS2.0 基礎(chǔ)應(yīng)用-背景控制文本控制字體設(shè)計(jì)段落樣式設(shè)計(jì)行高與文本換行間距控制與首字下沉color | font-family | font-sizeFont-size-adjust | font-style Font-weight | font-variant Text-transform | text-decorationLine-height | letter-spacingWord-spacing | text-indentText-overflow | vertical-alignText-align | layout-flowWord-b

19、reak | White-spaceWord-warp | overflowCSS2.0 基礎(chǔ)應(yīng)用-文本控制圖片控制圖片作為主體的控制技術(shù)圖片定位 兩種方式：使用margin進(jìn)行外邊界的控制；通過top和right進(jìn)行位置的相對定位#logofloat:left;margin-top:20px;margin-left:30px;#logofloat:left;posistion:relative;top:20px;left:30px;圖片剪切Clip:rect(n1,n2,n3,n4);圖片替代文本（SEO）標(biāo)題樣式#titlewidth:200px;height:80px;backgroun

20、d:url(title.jpg) no-repeat;#title spandisplay:none;CSS2.0 基礎(chǔ)應(yīng)用-圖片控制Div與spandiv的默認(rèn)顯示模式是：display:block;span的默認(rèn)顯示模式是：display:inline;CSS2.0 高級應(yīng)用編碼統(tǒng)一為utf-8;協(xié)作開發(fā)及分工： 共用css文件base.cssclass與id的使用: id是唯一的并是父級的 id原則上統(tǒng)一命名, 為JavaScript預(yù)留索引的除外;底部樣式, 不可隨意修改;為JavaScript使用的命名, 以 js_ 起始, 比如: js_hide, js_show;大的框架統(tǒng)一命名. 由小寫英文 & 數(shù)字 & _ 來組合命名, 避免使用中文拼音, 命名要語義化, 簡明化.如i_comment, fontred, width200規(guī)避class與id命名規(guī)則：a, 通過從屬寫法規(guī)避;b, 取父級元素id/class命名部分命名 c,