基礎(chǔ)建站基礎(chǔ)課程

1、學(xué)習(xí)目標(biāo)：建設(shè)一個(gè)完整的網(wǎng)站（企業(yè)，政府，學(xué)校，個(gè)人）學(xué)習(xí)目標(biāo)：建設(shè)一個(gè)完整的網(wǎng)站（企業(yè)，政府，學(xué)校，個(gè)人）學(xué)習(xí)內(nèi)容：學(xué)習(xí)內(nèi)容：HTMLHTML語言語言 div+css div+css （前臺(tái)建站）網(wǎng)站內(nèi)容管理系統(tǒng)（前臺(tái)建站）網(wǎng)站內(nèi)容管理系統(tǒng) CMS CMS（后臺(tái)系統(tǒng)）（后臺(tái)系統(tǒng)）學(xué)習(xí)時(shí)間：學(xué)習(xí)時(shí)間：5+5+15+5+1（5 5天前臺(tái)建設(shè)，天前臺(tái)建設(shè)，5 5天后臺(tái)管理系統(tǒng)，天后臺(tái)管理系統(tǒng)，1 1天測試）天測試）教學(xué)模式：線上線下結(jié)合教學(xué)模式：線上線下結(jié)合1+11+1。項(xiàng)目教學(xué)法：圍繞建設(shè)一個(gè)網(wǎng)站項(xiàng)目展開教學(xué)。項(xiàng)目教學(xué)法：圍繞建設(shè)一個(gè)網(wǎng)站項(xiàng)目展開教學(xué)課程目標(biāo)：了解熟悉課程目標(biāo)：了解熟悉 HTML

2、 HTML語言語言 為仿站，搜索引擎優(yōu)化做輔助鋪墊，為仿站，搜索引擎優(yōu)化做輔助鋪墊，搜索引擎優(yōu)化（搜索引擎優(yōu)化（SEOSEO）中涉及到很多）中涉及到很多htmlhtml語言語言 相關(guān)術(shù)語，相關(guān)術(shù)語，部分優(yōu)化策略與網(wǎng)站建設(shè)相關(guān)聯(lián)（部分優(yōu)化策略與網(wǎng)站建設(shè)相關(guān)聯(lián)（SEOSEO與網(wǎng)站建設(shè)不可分開）與網(wǎng)站建設(shè)不可分開）學(xué)習(xí)要求：學(xué)生能基本認(rèn)識(shí)常用的學(xué)習(xí)要求：學(xué)生能基本認(rèn)識(shí)常用的HTMLHTML語言，熟悉網(wǎng)站語言，熟悉網(wǎng)站cmscms系統(tǒng)，系統(tǒng)，為理解為理解SEOSEO策略以及策略以及SEOSEO后臺(tái)操作輔墊。后臺(tái)操作輔墊。Page 3HTMLDIVCSS復(fù)原網(wǎng)頁div+cssPage 4Page 5查看

3、源代碼：網(wǎng)頁右鍵選擇查看源代碼查看源代碼：網(wǎng)頁右鍵選擇查看源代碼網(wǎng)頁后綴網(wǎng)頁后綴 / / 格式格式 / / ：. html. htmlPage 6標(biāo)簽主要功能可以定義標(biāo)簽主要功能可以定義網(wǎng)頁的說明，關(guān)鍵字，編碼信網(wǎng)頁的說明，關(guān)鍵字，編碼信息，方便瀏覽器，搜索引擎所息，方便瀏覽器，搜索引擎所搜索等等信息。它的內(nèi)容不顯搜索等等信息。它的內(nèi)容不顯示在瀏覽器的窗口中，只供檢示在瀏覽器的窗口中，只供檢索！也叫做索！也叫做htmlhtml網(wǎng)頁元信息。網(wǎng)頁元信息。Page 7Page 8標(biāo)題標(biāo)標(biāo)題標(biāo) - src（圖片的路徑）（圖片的路徑）段落標(biāo)簽段落標(biāo)簽鏈接標(biāo)簽鏈接標(biāo)簽 href（鏈接地址）（鏈接地址）圖像

4、標(biāo)簽圖像標(biāo)簽加粗標(biāo)簽加粗標(biāo)簽換行標(biāo)簽換行標(biāo)簽 水平線水平線 水平線可以定義長度等屬性水平線可以定義長度等屬性傾斜標(biāo)簽傾斜標(biāo)簽加下劃線加下劃線 上標(biāo)標(biāo)簽上標(biāo)標(biāo)簽 下標(biāo)標(biāo)簽下標(biāo)標(biāo)簽視頻標(biāo)簽視頻標(biāo)簽注釋標(biāo)簽注釋標(biāo)簽無序列表無序列表 有序列表有序列表知識(shí)點(diǎn)：知識(shí)點(diǎn)： 單標(biāo)簽單標(biāo)簽 雙標(biāo)簽；圖片路徑；視頻標(biāo)簽；注釋雙標(biāo)簽；圖片路徑；視頻標(biāo)簽；注釋; ; 列表；列表；Page 9Page 10屬性：屬性值屬性：屬性值語法語法顏色屬性顏色屬性 colorcolor：redred長度屬性長度屬性 widthwidth：5px5px高度屬性高度屬性 heightheight：5px5px對(duì)齊方式對(duì)齊方式 ali

5、gnalign：left(left(左左) ) center center（中）（中） right right（右）（右）字體屬性字體屬性 font font 字體大小字體大小 font-sizefont-size：1818StyleStyle屬性屬性 提供了一種改變所有提供了一種改變所有HTMLHTML元素樣式的通用方法。元素樣式的通用方法。列表適用屬性：列表適用屬性：改變項(xiàng)目符號(hào)改變項(xiàng)目符號(hào):type=”:type=” 黑色實(shí)心圓圈黑色實(shí)心圓圈 “Disc”Disc” 黑色空心圓圈黑色空心圓圈 “Circle”“Circle” 黑色空心方形黑色空心方形 “Square ”“Square ”

6、Title:Title:圖片提示文字的意思圖片提示文字的意思altalt關(guān)鍵詞關(guān)鍵詞 img src=/Page 11分類分類: :第一類第一類: :無序列表無序列表文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題第二類第二類: :有序列表有序列表文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題文章的一個(gè)標(biāo)題列表文件可以進(jìn)行設(shè)置，列表文件可以進(jìn)行設(shè)置，屬性改變項(xiàng)目符號(hào)屬性改變項(xiàng)目符號(hào) disc disc表示屬性特點(diǎn)是黑色實(shí)心圓圈，表示屬性特點(diǎn)是黑色實(shí)心圓圈，Disc Disc 項(xiàng)目

7、符號(hào)項(xiàng)目符號(hào)列表：列表：蘋果蘋果香蕉香蕉檸檬檸檬桔子桔子Circle Circle 項(xiàng)目符項(xiàng)目符號(hào)列表：號(hào)列表：o o蘋果蘋果o o香蕉香蕉o o檸檬檸檬o o桔子桔子Square Square 項(xiàng)目符項(xiàng)目符號(hào)列表：號(hào)列表：蘋果蘋果香蕉香蕉檸檬檸檬桔子桔子Page 12Page 13聲明網(wǎng)頁標(biāo)準(zhǔn)；聲明網(wǎng)頁標(biāo)準(zhǔn)；meta http-equiv=Content-Type content=text/html; charset=utf-8/聲明網(wǎng)頁的編碼格式為聲明網(wǎng)頁的編碼格式為utf-8;utf-8;網(wǎng)頁的編碼格式我們相關(guān)的有兩種：網(wǎng)頁的編碼格式我們相關(guān)的有兩種：一種是國際標(biāo)準(zhǔn)一種是國際標(biāo)準(zhǔn)utf-

8、8utf-8，它支持，它支持英文，中文，日語，韓語等等英文，中文，日語，韓語等等另一種是另一種是 Gb2312/gbk Gb2312/gbk 國標(biāo)中文；國標(biāo)中文；Page 14表格最外層是標(biāo)簽表格最外層是標(biāo)簽 行用行用 單元格用單元格用 borderborder邊框邊框 alignalign表格對(duì)其方式表格對(duì)其方式水平方向跨列：水平方向跨列：Colspan=”2” Colspan=”2” 單元格擴(kuò)大為兩倍單元格擴(kuò)大為兩倍垂直方向跨行：垂直方向跨行：Rowpan=”2” Rowpan=”2” 選定單元格后面全部單元格統(tǒng)一后移一個(gè)單元格。選定單元格后面全部單元格統(tǒng)一后移一個(gè)單元格。單元格與單元格之

9、間的間距：單元格與單元格之間的間距：sellspacing=”sellspacing=”單元格內(nèi)部文字與單元格之間的空隙：單元格內(nèi)部文字與單元格之間的空隙：cellpadding=” cellpadding=” BgcoloBgcolor r=” =” 顏色屬性顏色屬性Page 151 1、符合、符合W3CW3C標(biāo)準(zhǔn)。微軟等公司均為標(biāo)準(zhǔn)。微軟等公司均為W3CW3C支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。2 2、支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是、支持瀏

10、覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7IE7或者是火狐，您或者是火狐，您的網(wǎng)站都能很好的兼容。的網(wǎng)站都能很好的兼容。 3 3、搜索引擎更加友好。相對(duì)與傳統(tǒng)的、搜索引擎更加友好。相對(duì)與傳統(tǒng)的table,table, 采用采用DIV+CSSDIV+CSS技術(shù)的網(wǎng)頁，對(duì)于搜索引擎的技術(shù)的網(wǎng)頁，對(duì)于搜索引擎的收錄更加友好。收錄更加友好。 4 4、樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。、樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。 現(xiàn)在現(xiàn)在YAHOO,MSNYAHOO,MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的等

11、國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的WEB2.0WEB2.0網(wǎng)站，均采用網(wǎng)站，均采用DIV+CSSDIV+CSS的框架模式，更加印證了的框架模式，更加印證了 DIV+CSSDIV+CSS是大勢所趨。是大勢所趨。 現(xiàn)很多個(gè)人站長新建站點(diǎn)都采用現(xiàn)很多個(gè)人站長新建站點(diǎn)都采用了了DIV+CSSDIV+CSS來構(gòu)建自己的網(wǎng)站頁面，可見來構(gòu)建自己的網(wǎng)站頁面，可見DIV+CSSDIV+CSS替代替代tabletable已經(jīng)不是遙遠(yuǎn)夢想。已經(jīng)不是遙遠(yuǎn)夢想。5 5、通過制作發(fā)行同樣的頁面使用、通過制作發(fā)行同樣的頁面使用TABLETABLE做的頁面與做的頁面與DIV+CSSDIV+CSS制作的頁面大小

12、對(duì)比，制作的頁面大小對(duì)比，DIV+CSSDIV+CSS的的XHTMLXHTML頁面大小至少小頁面大小至少小TABLETABLE制作頁面制作頁面1/41/4。從而使的瀏覽。從而使的瀏覽DIV+CSSDIV+CSS的頁面更加快捷快速。的頁面更加快捷快速。Page 16Page 17CSSCSS是層疊樣式表的簡稱是層疊樣式表的簡稱層疊樣式表層疊樣式表( (英文全稱：英文全稱：Cascading Cascading StyleStyle Sheets) Sheets)是一種用來表現(xiàn)是一種用來表現(xiàn)HTMLHTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XMLXML（標(biāo)準(zhǔn)通用標(biāo)記（

13、標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSSCSSSTYSTYLELECSS CSS 的作用：的作用：有利于有利于SEOSEO，修飾文字段落，定位布局。，修飾文字段落，定位布局。一一 行內(nèi)表行內(nèi)表現(xiàn)式現(xiàn)式二二 內(nèi)部嵌內(nèi)部嵌入式入式三三 外部鏈外部鏈接式接式補(bǔ)充：首行縮進(jìn)補(bǔ)充：首行縮進(jìn) text-indent:2em; text-indent:2em;第三種：外部鏈接式第三種：外部鏈接式把把css css 樣式文件單獨(dú)放在樣式文件單獨(dú)放在一個(gè)樣式文件夾里，然后一個(gè)樣式文件夾里，然后再再htmlhtml文件中來調(diào)用這個(gè)文件中來調(diào)用這個(gè)csscs

14、s樣式的文件。樣式的文件。如何調(diào)用如何調(diào)用csscss文件文件在右面找到在右面找到csscss文件拖動(dòng)文件拖動(dòng)到到頭部標(biāo)題頭部標(biāo)題/title下面下面第一種行內(nèi)式：第一種行內(nèi)式：行內(nèi)式，是寫在行內(nèi)式，是寫在HTML HTML 標(biāo)簽的開始標(biāo)簽的開始標(biāo)簽里面的標(biāo)簽里面的p style=”第二種內(nèi)部嵌入式：第二種內(nèi)部嵌入式：在在區(qū)區(qū)域?qū)懮嫌驅(qū)懮蟬tytype=next/ cssPcolor:red;font-Pcolor:red;font-size:20px;line-size:20px;line-height:25px;height:25px;第二種嵌入式：第二種嵌入式： 內(nèi)容內(nèi)容style ty

15、pe=”text/css”P color:red;P color:red;這是一段話這是一段話第三種外鏈?zhǔn)剑旱谌N外鏈?zhǔn)剑篽tml:html:牛逼哄哄想嫩啥牛逼哄哄想嫩啥css:css:p color:red;ront-p color:red;ront-size:20px size:20px html:html:class=”xpf”class=”xpf”css:css:.xpfcolor:red;ron.xpfcolor:red;ront-size:20px t-size:20px html:html:id=”xpf”id=”xpf”css:css:#xpf#xpfcolor:red;ron

16、color:red;ront-size:20px t-size:20px 第一種行內(nèi)式：第一種行內(nèi)式：p style= 段落段落擴(kuò)展：擴(kuò)展：font-size:20pxfont-size:20px表示字體大小表示字體大小20px20px，color:red color:red 字體顏色紅色字體顏色紅色 line-height:25px line-height:25px 表示行間距行高表示行間距行高1.1.行內(nèi)式的優(yōu)先級(jí)高于內(nèi)嵌式。行內(nèi)式的優(yōu)先級(jí)高于內(nèi)嵌式。（屬性選擇取決于就近原則）（屬性選擇取決于就近原則）2.2.三種表現(xiàn)形式三種表現(xiàn)形式 萬網(wǎng)萬網(wǎng)w3c w3c 標(biāo)準(zhǔn)推標(biāo)準(zhǔn)推薦使用薦使用 第三

17、種形式第三種形式 也就是外鏈也就是外鏈?zhǔn)?。式。為什么使用第三種，百度這種搜為什么使用第三種，百度這種搜索引擎更喜歡簡潔的網(wǎng)頁文件。索引擎更喜歡簡潔的網(wǎng)頁文件。復(fù)雜的頁面不利于搜索引擎的抓復(fù)雜的頁面不利于搜索引擎的抓取。取。什么是選擇器：什么是選擇器：1.1.在在HTMLHTML中中 等等叫標(biāo)簽，在等等叫標(biāo)簽，在csscss中中pcolorpcolor：redred是選擇器是選擇器 2.2.一個(gè)選擇工具一個(gè)選擇工具作用：作用：指定樣式它所控制的對(duì)象指定樣式它所控制的對(duì)象 選擇對(duì)象改變屬性選擇對(duì)象改變屬性分類：常用的三類選擇器分類：常用的三類選擇器第一類：是標(biāo)簽選擇器第一類：是標(biāo)簽選擇器直接把直接

18、把htmlhtml作為選擇器的作為選擇器的, ,如：如：pcolorpcolor：redred第二類：第二類：ClassClass類選擇器類選擇器在在HTMLHTML段落中寫段落中寫 在在csscss中寫中寫.quangecolor:blue.quangecolor:blue（取名：英文（取名：英文小寫小寫 不能用數(shù)字開頭不能用數(shù)字開頭 ）（以點(diǎn)開頭）（以點(diǎn)開頭.quangecolor:blue .quangecolor:blue ）第三類：第三類：IDID選擇器選擇器 注意：注意：idid號(hào)也是用英文小寫開頭，不能以數(shù)字開頭，并且號(hào)也是用英文小寫開頭，不能以數(shù)字開頭，并且idid號(hào)具有唯一性

19、，你的號(hào)具有唯一性，你的idid號(hào)，號(hào)，不能跟我的不能跟我的id id 號(hào)一樣；號(hào)一樣；不管不管classclass類名稱，還是類名稱，還是idid號(hào)，都不能用數(shù)字開頭，一般以小寫字母開頭；號(hào)，都不能用數(shù)字開頭，一般以小寫字母開頭； 標(biāo)簽選擇器：標(biāo)簽選擇器：直接以標(biāo)簽做為選擇器直接以標(biāo)簽做為選擇器 直接以標(biāo)簽作為選擇器直接以標(biāo)簽作為選擇器 例如：例如：【html:html:neirong neirong css:css:.p color:red;ront-size:20px .p color:red;ront-size:20px 】類選擇器：類選擇器：（classclass）取名）取名 【ht

20、ml:html:class=”class=”名稱名稱” ” css:css:. .名稱名稱color:red;ront-size:20px color:red;ront-size:20px 】不同的對(duì)象可以有相同的類名稱，同一個(gè)對(duì)象可以有多個(gè)名字不同的對(duì)象可以有相同的類名稱，同一個(gè)對(duì)象可以有多個(gè)名字IdId選擇器（符）：選擇器（符）：唯一性唯一性 id id選擇器的書寫形式：【選擇器的書寫形式：【htmlhtml：id=”id=”名稱名稱” ” css css：# #名稱名稱color:red;ront-size:20px color:red;ront-size:20px 】通配符選擇符：通配

21、符選擇符：用用* *表示表示 * * 表示所有的表示所有的HTMLHTML元素【元素【* *color:red;ront-color:red;ront-size:20pxsize:20px】并列選擇器并列選擇器: :群組選擇器群組選擇器 并列選擇器可以把不同的選擇器并列一起來控制，每個(gè)并列選擇器可以把不同的選擇器并列一起來控制，每個(gè)選擇器中間可以用英文都好隔開。選擇器中間可以用英文都好隔開。并列選擇器是以三種基礎(chǔ)選擇器為基礎(chǔ)的?！静⒘羞x擇器是以三種基礎(chǔ)選擇器為基礎(chǔ)的。【H1,h2,h3,.fei,#fei H1,h2,h3,.fei,#fei 】/ 無意義標(biāo)簽，可以從當(dāng)選擇器做到精確控制對(duì)象。

22、無意義標(biāo)簽，可以從當(dāng)選擇器做到精確控制對(duì)象。我是我是肖鵬飛肖鵬飛，來自美麗的，來自美麗的安徽安徽，歡迎到我的家鄉(xiāng)做客歡迎到我的家鄉(xiāng)做客css注釋：注釋：/* 這里這里是注釋內(nèi)是注釋內(nèi)容容 */*表示通配符：可表示通配符：可以代表任意元素以代表任意元素并列選擇器可以同并列選擇器可以同時(shí)選擇多種元素內(nèi)時(shí)選擇多種元素內(nèi)容容span精確選擇到精確選擇到某個(gè)字某個(gè)字亂碼：亂碼：檢檢查一下指查一下指定編碼格定編碼格式式Page 25作用：作用：用來網(wǎng)頁布局用來網(wǎng)頁布局border border 用來指邊框用來指邊框 border border 里面有三個(gè)屬性值。分別是：粗細(xì)（里面有三個(gè)屬性值。分別是：粗細(xì)

23、（2px 2px 兩個(gè)像素兩個(gè)像素）；）； 顏色（顏色（red red 紅色紅色）；線型（）；線型（solid solid 實(shí)線實(shí)線）（）（dotted dotted 虛線虛線）；）；書寫形式：書寫形式：HTMLHTML：內(nèi)容內(nèi)容 CSS CSS ：.xpfborder:red 2px solid;.xpfborder:red 2px solid;內(nèi)容內(nèi)容1.1.改變四個(gè)方向的邊框?qū)傩愿淖兯膫€(gè)方向的邊框?qū)傩陨线吙颍荷线吙颍篵order-top下邊框：下邊框：border-bottom左邊框：左邊框：left右邊框：右邊框：right改變?nèi)我庖粋€(gè)方向的書寫形式：改變?nèi)我庖粋€(gè)方向的書寫形式：HTM

24、L：內(nèi)容內(nèi)容CSS：.xpfborder-left:2px red solid;可以同時(shí)改變四個(gè)方向的屬性，兩個(gè)屬性之間用很好隔開可以同時(shí)改變四個(gè)方向的屬性，兩個(gè)屬性之間用很好隔開默認(rèn)布局：默認(rèn)布局：在在divdiv布局里面默認(rèn)的布局方式布局里面默認(rèn)的布局方式 為上下布局（文檔流）為上下布局（文檔流）擴(kuò)展：擴(kuò)展：相對(duì)值絕對(duì)值相對(duì)值絕對(duì)值Width:200px絕對(duì)值絕對(duì)值Width：50%相對(duì)值相對(duì)值200%200%在瀏覽器中默認(rèn)大小擴(kuò)大兩倍（相對(duì)值）在瀏覽器中默認(rèn)大小擴(kuò)大兩倍（相對(duì)值）Font-size Font-size 字體的大小字體的大小BackgroungBackgroung：red

25、red 背景顏色背景顏色 【URLURL（）（）】背景圖片背景圖片backgroundbackground：背景背景 URL URL：路徑路徑 補(bǔ)充：補(bǔ)充：href href 鏈接鏈接 src src ；url url 路徑路徑默認(rèn)情況下圖片會(huì)在水平垂直方向平鋪，如果要取消用默認(rèn)情況下圖片會(huì)在水平垂直方向平鋪，如果要取消用repeatrepeat。他有三個(gè)常用。他有三個(gè)常用值，分別為：值，分別為：no-repeatno-repeat禁止平鋪禁止平鋪 repeat-xrepeat-x水平平鋪水平平鋪 repeat-yrepeat-y垂直平鋪垂直平鋪 。Position Position 定位定位

26、 位置有兩個(gè)字位置有兩個(gè)字 ( (距離左側(cè)一個(gè)值；距離右側(cè)一個(gè)個(gè)值距離左側(cè)一個(gè)值；距離右側(cè)一個(gè)個(gè)值 兩個(gè)數(shù)值兩個(gè)數(shù)值直接寫屬直接寫屬性值，當(dāng)只有一個(gè)的時(shí)候距離上方；左邊的距離都是由這一個(gè)值決定的性值，當(dāng)只有一個(gè)的時(shí)候距離上方；左邊的距離都是由這一個(gè)值決定的) )BackgroungBackgroung和和BorderBorder一樣有多個(gè)值，可以同時(shí)寫在屬性的一樣有多個(gè)值，可以同時(shí)寫在屬性的 后面用空格分開，不后面用空格分開，不同的屬性同的屬性要用分號(hào)分開。要用分號(hào)分開。背景圖片在背景圖片在DIV元素里的位置有元素里的位置有9種分別是：種分別是： 水平：水平： left center righ

27、t 垂直：垂直：top center bottom浮動(dòng)：浮動(dòng)：float float ； floatfloat：left left 左浮動(dòng)左浮動(dòng) ； floatfloat：rightright右浮動(dòng)右浮動(dòng)浮動(dòng)：浮動(dòng)：就是讓就是讓DIVDIV在頁面飄起來，像飄在水上一樣在頁面飄起來，像飄在水上一樣所謂的向所謂的向左浮動(dòng)左浮動(dòng)，就是先浮起來，然后向左漂移。，就是先浮起來，然后向左漂移。所謂所謂先浮起來先浮起來，就是從第一層背景色的位置向上浮動(dòng)到第二層的背景圖片；，就是從第一層背景色的位置向上浮動(dòng)到第二層的背景圖片；我們給紅色的盒子向左浮動(dòng)之后，藍(lán)色的盒子不見了；因?yàn)椋杭t色盒子從第一層到我們給紅色的

28、盒子向左浮動(dòng)之后，藍(lán)色的盒子不見了；因?yàn)椋杭t色盒子從第一層到了第二層，第一層空出來了；按照瀏覽器的規(guī)則，空出來的第一層由后面相鄰的元了第二層，第一層空出來了；按照瀏覽器的規(guī)則，空出來的第一層由后面相鄰的元素來補(bǔ)充。素來補(bǔ)充。要同時(shí)實(shí)現(xiàn)多個(gè)元素在水平方向排列，我們可以給每個(gè)元素同時(shí)加上左浮動(dòng)，或者要同時(shí)實(shí)現(xiàn)多個(gè)元素在水平方向排列，我們可以給每個(gè)元素同時(shí)加上左浮動(dòng)，或者右浮動(dòng)。右浮動(dòng)。兩個(gè)小盒子在大盒子內(nèi)部兩個(gè)小盒子在大盒子內(nèi)部父子選擇器：父子選擇器：在大標(biāo)簽下面的幾個(gè)小標(biāo)簽可以同時(shí)選擇，從而改變屬性。在大標(biāo)簽下面的幾個(gè)小標(biāo)簽可以同時(shí)選擇，從而改變屬性。例如：例如：.div1 ul li acol

29、or:red;.div1 ul li acolor:red;他表示他表示div div 這個(gè)元素下面的這個(gè)元素下面的ul ul 下面的下面的li li 下面的下面的a a .div1,.div2color:red;.div1,.div2color:red;他表示他表示 div1 div1和和div2 div2 兩個(gè)對(duì)應(yīng)的對(duì)象兩個(gè)對(duì)應(yīng)的對(duì)象外邊距：外邊距：以盒子的邊框?yàn)榻?；兩以盒子的邊框?yàn)榻?；兩個(gè)盒子向外的距離。個(gè)盒子向外的距離。外邊距我們用外邊距我們用margin margin 表示，外表示，外邊距有四個(gè)方向，邊距有四個(gè)方向，分別為：分別為：Margin-top Margin-top 上外邊距

30、上外邊距Margin-bottomMargin-bottom下外邊距下外邊距Margin-leftMargin-left左外邊距左外邊距Margin-rightMargin-right右外邊距右外邊距補(bǔ)充：補(bǔ)充：marginmargin：100px100px 表示上下表示上下左右四個(gè)方向外邊距都是一百左右四個(gè)方向外邊距都是一百內(nèi)邊距：內(nèi)邊距：以盒子的邊框?yàn)榻纾幌騼?nèi)以盒子的邊框?yàn)榻?；向?nèi)與內(nèi)容之間的距離，內(nèi)容可以是文與內(nèi)容之間的距離，內(nèi)容可以是文字圖片盒子等元素。字圖片盒子等元素。內(nèi)邊距用內(nèi)邊距用 padding padding 來表示；內(nèi)邊距來表示；內(nèi)邊距也有四個(gè)方向，也有四個(gè)方向，分別為：分

31、別為：padding-toppadding-top上內(nèi)邊距上內(nèi)邊距Padding-bottomPadding-bottom下內(nèi)邊距下內(nèi)邊距Padding-leftPadding-left左內(nèi)邊距左內(nèi)邊距Padding-rightPadding-right右內(nèi)邊距右內(nèi)邊距補(bǔ)充：補(bǔ)充：paddingpadding：100px 100px 表示上下左表示上下左右四個(gè)方向外邊距都是一百，內(nèi)邊右四個(gè)方向外邊距都是一百，內(nèi)邊距給了多少，盒子對(duì)應(yīng)的寬度高度距給了多少，盒子對(duì)應(yīng)的寬度高度就相應(yīng)的增加了多少。就相應(yīng)的增加了多少。擴(kuò)展知識(shí)：擴(kuò)展知識(shí)：盒子居中把盒子的外邊距設(shè)置為自動(dòng)盒子居中把盒子的外邊距設(shè)置為自動(dòng)

32、 auto; auto;Margin:auto;Margin:auto;盒子里面的文字居中盒子里面的文字居中Text-alignText-align：left/center/right;left/center/right;盒子內(nèi)部文字垂直方向居中；盒子內(nèi)部文字垂直方向居中；讓文字的行高與盒子的高度保持一致；行高用讓文字的行高與盒子的高度保持一致；行高用line-heightline-height表示；表示；偽類選擇器：偽類選擇器：當(dāng)鼠標(biāo)放上去改變字體顏色，增加下劃線；當(dāng)鼠標(biāo)放上去改變字體顏色，增加下劃線；Text-decoration Text-decoration 有下劃線有下劃線 none

33、 none 無下劃線無下劃線HoverHover相當(dāng)于鼠標(biāo)；基礎(chǔ)選擇器相當(dāng)于鼠標(biāo)；基礎(chǔ)選擇器+hover+hover .div1 ul li a:color:red;text-decoration:none; .div1 ul li a:color:red;text-decoration:none; 藍(lán)色字體表示把列表文字的下劃線去掉藍(lán)色字體表示把列表文字的下劃線去掉 .div1 ul li a:hovercolor:red;text-decoration:underline; .div1 ul li a:hovercolor:red;text-decoration:underline; 藍(lán)色

34、字體表示把列表文字有下劃線藍(lán)色字體表示把列表文字有下劃線 List-style:none; List-style:none; 藍(lán)色字體表示把列表前面的園點(diǎn)去掉。藍(lán)色字體表示把列表前面的園點(diǎn)去掉。Page 33盒子原來的高度為盒子原來的高度為300px300px，給了，給了100px100px上上內(nèi)邊距之后，高度也內(nèi)邊距之后，高度也增加相應(yīng)的距離成了增加相應(yīng)的距離成了400px;400px;要保持原來盒子的總要保持原來盒子的總高度不變，我們需要高度不變，我們需要在盒子高度里面減去在盒子高度里面減去相應(yīng)的值；相應(yīng)的值；Text-decorationText-decoration 有下劃線有下劃線

35、none none 無下劃線無下劃線DivDiv：寬度：寬度 高度高度 背景顏背景顏色色 邊框邊框 浮動(dòng)浮動(dòng) 內(nèi)外邊距內(nèi)外邊距文字水平垂直居中，以上文字水平垂直居中，以上屬性屬性 在在 li li 里面一樣適應(yīng)。里面一樣適應(yīng)。* *margin:0;padding:0;margin:0;padding:0; 把內(nèi)外邊距全部清除，把內(nèi)外邊距全部清除，讓他方便漂浮。讓他方便漂浮。水平居中：水平居中：text-aligntext-align：centercenter垂直居中：垂直居中：行高等于元素高度。行高等于元素高度。行高用行高用line-heightline-height表示；表示；文字加粗：文

36、字加粗：Font-weightFont-weight：boldbold；文字定位：文字定位：水平：水平：left center rightleft center right；垂直：行高垂直：行高 具體數(shù)值：具體數(shù)值：123px 456px123px 456px切換面板：切換面板：插入插入spryspry選項(xiàng)卡式面板，選項(xiàng)卡式面板，去掉列表符號(hào)：去掉列表符號(hào)：自定義列表符號(hào)：自定義列表符號(hào)：list-style-image:URL“”list-style-image:URL“”Page 34Page 36下載網(wǎng)頁，新建文件夾，在文件夾中建立幾個(gè)文件夾，將源代碼復(fù)制到下載網(wǎng)頁，新建文件夾，在文件夾

37、中建立幾個(gè)文件夾，將源代碼復(fù)制到dwdw上，在上，在dwdw上修上修改路徑。修改的路徑包括圖片改路徑。修改的路徑包括圖片imgimg；jsjs；style ,cssstyle ,css； 輪播圖；輪播圖；導(dǎo)入視頻導(dǎo)入視頻網(wǎng)站復(fù)制還原具體步驟：網(wǎng)站復(fù)制還原具體步驟：首頁還原：首頁還原：1.1.下載網(wǎng)頁到電腦上，下載網(wǎng)頁到電腦上，2 2新建文件夾修改名字，新建文件夾修改名字，3.3.在新建文件夾中新建三個(gè)文在新建文件夾中新建三個(gè)文件夾分別為件夾分別為images cssimages css（stylestyle） js js（scriptscript）文件。）文件。4.4.將網(wǎng)頁中的文件分類拉近新

38、將網(wǎng)頁中的文件分類拉近新建的不同文件夾中。建的不同文件夾中。5 5打開網(wǎng)頁查找源代碼，打開網(wǎng)頁查找源代碼，6.6.將源代碼復(fù)制，粘貼到將源代碼復(fù)制，粘貼到dwdw上，上，7.7.把網(wǎng)頁保把網(wǎng)頁保存在新建文件夾中要求與新建的存在新建文件夾中要求與新建的css js imagescss js images在同一路徑下。在同一路徑下。8.8.在在dwdw中查看剛保存的中查看剛保存的網(wǎng)頁文件，網(wǎng)頁文件，9.9.修改保存的網(wǎng)頁路徑，修改保存的網(wǎng)頁路徑，10.10.再一次保存全部。再一次保存全部。11.11.打開網(wǎng)頁查看效果。打開網(wǎng)頁查看效果。模板：模板：文章詳情頁和圖片詳情頁用的是一個(gè)模板。文章詳情頁和

39、圖片詳情頁用的是一個(gè)模板。文章詳情頁圖片詳情頁模板，文章列表頁模板，圖片列表頁模板，頻道封面頁模板文章詳情頁圖片詳情頁模板，文章列表頁模板，圖片列表頁模板，頻道封面頁模板其他網(wǎng)頁從第五步開始與首頁一樣其他網(wǎng)頁從第五步開始與首頁一樣Page 371.1.綁定域名綁定域名+ +空間空間 2.2.修改路徑修改路徑 ，修改導(dǎo)航，修改導(dǎo)航 3.3. 添加調(diào)用列表頁模板添加調(diào)用列表頁模板+ + 導(dǎo)航導(dǎo)航4.4.添加調(diào)用文章列表添加調(diào)用文章列表5.5.調(diào)用詳情頁內(nèi)容調(diào)用詳情頁內(nèi)容6.6.修改列表頁和列表標(biāo)題修改列表頁和列表標(biāo)題7.7.培訓(xùn)視頻，學(xué)院圖集培訓(xùn)視頻，學(xué)院圖集 / / 換導(dǎo)航換模板內(nèi)容換導(dǎo)航換模板

40、內(nèi)容8.8. 當(dāng)前位置調(diào)用當(dāng)前位置調(diào)用9.9.調(diào)用圖列中模板內(nèi)容調(diào)用圖列中模板內(nèi)容10.10.調(diào)用分頁標(biāo)簽調(diào)用分頁標(biāo)簽 上一篇下一篇上一篇下一篇1111修改調(diào)用首頁文章圖片列表內(nèi)容修改調(diào)用首頁文章圖片列表內(nèi)容12.12.調(diào)用所有網(wǎng)頁中最新圖文熱點(diǎn)推薦調(diào)用所有網(wǎng)頁中最新圖文熱點(diǎn)推薦13.13.聯(lián)系我們，在線報(bào)名，證書查詢聯(lián)系我們，在線報(bào)名，證書查詢020Page 381.1.注冊域名并解析注冊域名并解析2.2.登錄主機(jī)控制面板登錄主機(jī)控制面板 （）3.3.打開打開flashxpflashxp連接主控面，連接主控面， （FT

41、BFTB地址，用戶名，密碼）地址，用戶名，密碼）4.4.將復(fù)原的網(wǎng)頁文件夾移動(dòng)將復(fù)原的網(wǎng)頁文件夾移動(dòng) 到到uploadsuploads下面的下面的templetstemplets5.5.壓縮壓縮uploadsuploads文件夾文件夾6.6.上傳上傳uploadsuploads到到flashxpflashxp7.7.安裝網(wǎng)站程序（域名安裝網(wǎng)站程序（域名/install/install /index.php /index.php）7.7.主控面主控面-文件管理文件管理-壓縮包（壓縮包（uploadsuploads）-解壓解壓 -安裝網(wǎng)站程序安裝網(wǎng)站程序-設(shè)置配置參數(shù)設(shè)置配置參數(shù)-安裝后登錄后臺(tái)安

42、裝后登錄后臺(tái) （域名（域名/dede/dede）擴(kuò)展：擴(kuò)展：1.1.添加導(dǎo)航欄目添加導(dǎo)航欄目 2.2.修改網(wǎng)頁標(biāo)題修改網(wǎng)頁標(biāo)題 3.3.換模板（自定義替換默認(rèn)）換模板（自定義替換默認(rèn)） 4.4.修改格式修改格式擴(kuò)展：擴(kuò)展：換模板：系統(tǒng)換模板：系統(tǒng)-系統(tǒng)基本參數(shù)系統(tǒng)基本參數(shù)-默認(rèn)網(wǎng)站風(fēng)格默認(rèn)網(wǎng)站風(fēng)格- 選擇自定義模板名稱選擇自定義模板名稱 生成生成-更新主頁更新主頁-選擇主頁模板選擇主頁模板-開始生成開始生成 -瀏覽瀏覽-OK-OK修改網(wǎng)頁格式：修改網(wǎng)頁格式：html-htmhtml-htm : :模塊模塊-文管器文管器-templets-templets-自定義模板自定義模板 名稱名稱-選擇網(wǎng)

43、頁選擇網(wǎng)頁-改名改名-OK-OKPage 39Page 40Page 41Page 42Page 43都有哪些模板：都有哪些模板：1.1.主頁模板（主頁模板（index.htmindex.htm）2.2.文章頻道封面（文章頻道封面（index-article.htmindex-article.htm）3.3.默認(rèn)文列模板（默認(rèn)文列模板（list-article.htmlist-article.htm）4.4.文章內(nèi)容頁模板（文章內(nèi)容頁模板（article-article.htmarticle-article.htm）5.5.圖列模板（圖列模板（list-img.htmlist-img.htm）

44、6.6.導(dǎo)入的頭部模板（導(dǎo)入的頭部模板（head.htmhead.htm）要修改的幾種路徑：要修改的幾種路徑：1.style 1.style 路徑路徑2.srcipt 2.srcipt 路徑路徑3.images 3.images 路徑路徑4.embed 4.embed （swfswf）5.5.iframeiframePage 44Page 451.1.刪除模板源代碼中首頁導(dǎo)航刪除模板源代碼中首頁導(dǎo)航2.2.在網(wǎng)欄管中增加導(dǎo)航欄目在網(wǎng)欄管中增加導(dǎo)航欄目3.3.調(diào)用織夢到模板中調(diào)用織夢到模板中1.1.刪除源代碼中導(dǎo)航的時(shí)候留下首頁和第二個(gè)導(dǎo)航不刪刪除源代碼中導(dǎo)航的時(shí)候留下首頁和第二個(gè)導(dǎo)航不刪2.2

45、.最后一個(gè)列表下面的最后一個(gè)列表下面的里面的百度統(tǒng)計(jì)也刪除里面的百度統(tǒng)計(jì)也刪除如何調(diào)用織夢首頁導(dǎo)航：如何調(diào)用織夢首頁導(dǎo)航：1.1.開始結(jié)束標(biāo)簽放在導(dǎo)航開始結(jié)束標(biāo)簽放在導(dǎo)航前面和后面前面和后面2.2.站點(diǎn)根網(wǎng)址替換源代碼中首頁前面的鏈接站點(diǎn)根網(wǎng)址替換源代碼中首頁前面的鏈接3.3.欄目名稱替換源代碼中對(duì)應(yīng)的名稱欄目名稱替換源代碼中對(duì)應(yīng)的名稱4.4.欄目鏈接對(duì)應(yīng)源代碼中名稱前的鏈接欄目鏈接對(duì)應(yīng)源代碼中名稱前的鏈接擴(kuò)展：擴(kuò)展：1.1.調(diào)用頂級(jí)欄目在調(diào)用的開始標(biāo)簽里面寫上調(diào)用頂級(jí)欄目在調(diào)用的開始標(biāo)簽里面寫上 type=”top”type=”top”2.2.添加二級(jí)欄目添加二級(jí)欄目-調(diào)用二級(jí)欄目調(diào)用二級(jí)欄

46、目 調(diào)用二級(jí)欄目在開始標(biāo)簽中寫調(diào)用二級(jí)欄目在開始標(biāo)簽中寫type=”son”type=”son”并且要指定并且要指定 一級(jí)欄目的一級(jí)欄目的id id 號(hào)號(hào) 書寫方式：在開始標(biāo)簽后面寫上書寫方式：在開始標(biāo)簽后面寫上 type=”son” typeid=”type=”son” typeid=”數(shù)字?jǐn)?shù)字”3.3.調(diào)用指定欄目調(diào)用指定欄目 首先要把開始結(jié)束標(biāo)簽中的首先要把開始結(jié)束標(biāo)簽中的 channel channel 更換成更換成 type type ，然后直接指定要，然后直接指定要 調(diào)取欄目的調(diào)取欄目的idid號(hào)，書寫方式號(hào)，書寫方式 ：在開始里面寫上：在開始里面寫上typeid=”typeid=

47、”數(shù)字?jǐn)?shù)字”Page 46核心核心-網(wǎng)欄管網(wǎng)欄管-選擇欄目選擇欄目-更改更改-高級(jí)選項(xiàng)高級(jí)選項(xiàng)-列表模板列表模板-瀏覽瀏覽-選擇模板選擇模板-確定確定-OK-OK生成生成-更新欄目更新欄目-選擇欄目選擇欄目-開始生成開始生成-瀏覽瀏覽-OK-OK1.1.文列和圖列添加模板步驟相同，只是需要在對(duì)應(yīng)的欄目里去添加不同的列表模板，文列和圖列添加模板步驟相同，只是需要在對(duì)應(yīng)的欄目里去添加不同的列表模板，2.2.詳情頁步驟和詳情頁步驟和文列文列 圖列相似，不同之處在于詳情頁要在文章模板中選擇瀏覽模板，圖列相似，不同之處在于詳情頁要在文章模板中選擇瀏覽模板，3.3.封面模板首先在更改后面選擇常規(guī)選項(xiàng)，在欄

48、目屬性里選擇頻道封面，然后在高級(jí)封面模板首先在更改后面選擇常規(guī)選項(xiàng)，在欄目屬性里選擇頻道封面，然后在高級(jí) 選項(xiàng)封面模板中選擇瀏覽模板，最后在欄目內(nèi)容里添加內(nèi)容。選項(xiàng)封面模板中選擇瀏覽模板，最后在欄目內(nèi)容里添加內(nèi)容。Page 47Page 481.1.建立新的頭部導(dǎo)航模板建立新的頭部導(dǎo)航模板2.2.調(diào)用頭部標(biāo)簽調(diào)用頭部標(biāo)簽1.1.首頁首頁-找到頭部內(nèi)容找到頭部內(nèi)容-剪切剪切-打開打開DW-DW-粘貼到粘貼到DWDW中中-修改編碼格式修改編碼格式-保存（保存（htmhtm格式）格式） 模板模板-默模管默模管-上傳上傳 -在列表模板中頭部調(diào)用在列表模板中頭部調(diào)用2.2.如何頭部調(diào)用：模板如何頭部調(diào)用：模板-默模管默模管-列表模板列表模板-修改修改-刪除頭部刪除頭部-打開織夢打開織夢-系統(tǒng)標(biāo)簽系統(tǒng)標(biāo)簽- 頭部調(diào)用頭部調(diào)用-粘貼在刪除的頭部位置粘貼在刪除的頭部位置-保存保存-OK-OK3.3.生成生成-更新主頁更新主頁-開始更新開始更新-瀏覽瀏覽-OK-OK其他模板在進(jìn)行頭部調(diào)用只需進(jìn)行三個(gè)步驟：其他模板在進(jìn)行頭部調(diào)用只需進(jìn)行三個(gè)步驟：刪除頭部刪除頭部-頭部調(diào)用頭部調(diào)用-生成生成-OK-OKPage 49Page 501.1.添加文章添加文章2.2.調(diào)用文檔調(diào)用文檔1.1.添加文章：添加文章：核心核心-網(wǎng)欄管網(wǎng)欄管-選擇欄目選擇欄目-內(nèi)容內(nèi)容-添加文檔添加文檔-填寫內(nèi)容填寫內(nèi)容