電子商務(wù)網(wǎng)頁制作-項(xiàng)目七

項(xiàng)目七DIV+CSS布局設(shè)置項(xiàng)目綜述本項(xiàng)目就是基于“DIV+CSS”技術(shù),使用Dreamweaver來實(shí)現(xiàn)“個(gè)人網(wǎng)站”的設(shè)計(jì)與制作。項(xiàng)目目標(biāo)能力目標(biāo)：學(xué)習(xí)完本項(xiàng)目后,學(xué)生應(yīng)當(dāng)能夠依據(jù)前期的網(wǎng)站策劃及效果圖完成整個(gè)創(chuàng)業(yè)園網(wǎng)站的DIV+CSS布局,包括:(1)學(xué)會(huì)利用“DIV+CSS”完成頁面的布局,靈活運(yùn)用該技術(shù)的布局思路及方法。(2)解決“DIV+CSS”的瀏覽器兼容問題。(3)學(xué)會(huì)使用“模板和庫(kù)”進(jìn)行網(wǎng)頁的布局。知識(shí)目標(biāo)：(1)Web標(biāo)準(zhǔn)。(2)XHTML基礎(chǔ)。(3)DIV概念。(4)CSS語法規(guī)則。(5)模板和庫(kù)的概念和應(yīng)用。Part01任務(wù)一·個(gè)人網(wǎng)站首頁的制作任務(wù)引導(dǎo)本任務(wù)的目標(biāo)是依據(jù)“個(gè)人網(wǎng)站”的首頁效果圖,使用DIV+CSS技術(shù),完成網(wǎng)站首頁的制作。任務(wù)實(shí)施1.繪制首頁結(jié)構(gòu)布局草圖2.新建站點(diǎn)3.制作頁面知識(shí)分析1.Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成:結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。2.DIV+CSS與傳統(tǒng)表格布局的區(qū)別大量的表格使HTML內(nèi)部文檔結(jié)構(gòu)復(fù)雜,存在大量為了控制頁面元素位置的表格。特別當(dāng)遇到頁面結(jié)構(gòu)或者風(fēng)格需要整體轉(zhuǎn)變時(shí),基本上需要重新制作整個(gè)網(wǎng)站。使用CSS+DIV布局,網(wǎng)站結(jié)構(gòu)與表現(xiàn)分離。在網(wǎng)站風(fēng)格改變、網(wǎng)站更新時(shí),不需要再關(guān)心任何后臺(tái)的操作,使二次開發(fā)更為便捷和友好,易于維護(hù)。使用CSS+DIV布局,并不是完全排除表格的使用。表格在結(jié)構(gòu)化“顯示數(shù)據(jù)”方面還是有著很大優(yōu)勢(shì)的,可以使數(shù)據(jù)信息更為易讀。只是傳統(tǒng)中使用表格來做頁面布局的方法需要被Web標(biāo)準(zhǔn)化所取代。知識(shí)分析

3.DIV概述DIV(Division)標(biāo)記可以看作是一個(gè)區(qū)塊盒子,即<div>與</div>之間相當(dāng)于一個(gè)盒子,它可以容納文字、段落、圖像等各種網(wǎng)頁元素。它也是為HTML文檔中大塊的內(nèi)容提供結(jié)構(gòu)與背景的元素。<div>與</div>之間的這些元素都是用來構(gòu)成這個(gè)區(qū)塊的,所包含元素的特性由DIV標(biāo)簽的屬性來控制,或者通過CSS樣式來控制。DIV+CSS的布局技術(shù)是網(wǎng)站標(biāo)準(zhǔn)(或稱“Web標(biāo)準(zhǔn)”)中的典型應(yīng)用模式,也是Web標(biāo)準(zhǔn)中的常用術(shù)語之一?；赪eb標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)的核心就是在于使網(wǎng)站實(shí)現(xiàn)表現(xiàn)與內(nèi)容結(jié)構(gòu)的分離。即網(wǎng)站的結(jié)構(gòu)、表現(xiàn)、行為三者分離。而DIV+CSS布局的引入,使網(wǎng)頁結(jié)構(gòu)與表現(xiàn)分離,是實(shí)現(xiàn)Web標(biāo)準(zhǔn)的基礎(chǔ)環(huán)節(jié)。知識(shí)分析

4.盒子模型盒子模型是CSS布局中非常重要的概念。所有網(wǎng)頁中的元素可以被看作一個(gè)盒子,它在頁面中的位置可以看作盒子所占據(jù)的位置。這個(gè)盒子由4部分組成,最外面是邊界(margin);第二部分是邊框(border);第三部分是填充(padding),也就是內(nèi)容區(qū)域與邊框之間的空白;第四部分就是存放東西的內(nèi)容區(qū)域(content)。知識(shí)分析

5.CSS與HTML的結(jié)合CSS是“CascadingStyleSheet”的縮寫,稱為層疊樣式表,一般簡(jiǎn)稱為樣式表,層疊是指多個(gè)樣式可以同時(shí)應(yīng)用于同一個(gè)頁面或網(wǎng)頁中的同一個(gè)元素。通常情況下,有三種方法可以將CSS樣式應(yīng)用到HTML頁面中。(1)標(biāo)簽樣式。通過style屬性直接嵌入到HTML中去。(2)內(nèi)部樣式。把CSS樣式單獨(dú)地包含在頭部標(biāo)簽內(nèi)。(3)外部鏈接式。外部鏈接式的應(yīng)用前提是需要將CSS樣式存儲(chǔ)為一個(gè)獨(dú)立的文件,此文件可以為整個(gè)網(wǎng)站的多個(gè)頁面服務(wù)。知識(shí)分析

6.CSS的語法規(guī)則通常在代碼中添加CSS樣式可按照以下的語法規(guī)則進(jìn)行:選擇器{屬性1:屬性值;

…屬性n:屬性值;}這里選擇器主要包括三種類型:(1)類別選擇器。類別選擇器是以“.”開始的,名稱可以自定義,但是必須由小寫或者大寫字母開始,后面可以使用任意的字母、數(shù)字、連接線或者下劃線。知識(shí)分析(2)標(biāo)記選擇器。選擇器可以是HTML包含的所有標(biāo)簽。(3)ID選擇器。ID選擇器都是以“#”開始,名字可以自定義,其命名規(guī)則和類別選擇器相同。和類別選擇器的區(qū)別在于,每個(gè)被套用了id名稱的對(duì)象,其id名字在每個(gè)頁面中只允許出現(xiàn)一次。拓展練習(xí)采用DIV+CSS的布局方式完成如圖的頁面。習(xí)題1.CSS+DIV布局的優(yōu)勢(shì)有哪些?2.簡(jiǎn)述Web標(biāo)準(zhǔn)及其發(fā)展趨勢(shì)。Part02任務(wù)二·個(gè)人網(wǎng)站子頁面的制作任務(wù)引導(dǎo)本任務(wù)的目標(biāo)是使用模板以及DIV+CSS完成個(gè)人網(wǎng)站中“美文欣賞”子頁面的制作。任務(wù)實(shí)施1.創(chuàng)建網(wǎng)站與頁面模板2.通過模板生成“店鋪公告”頁面知識(shí)分析

1.<div>與<span>的區(qū)別<div>是塊一級(jí)元素,可以包含段落、標(biāo)題、表格、章節(jié)、圖片等,它包圍的元素會(huì)自動(dòng)換行。而<span>也和<div>一樣,可以容納各種網(wǎng)頁元素而被廣泛應(yīng)用。但是<span>是一個(gè)行內(nèi)元素,在它的前后是不會(huì)換行的,它沒有結(jié)構(gòu)的含義,只是運(yùn)用樣式。<span>可以包含在<div>中,反之則不行。知識(shí)分析2.float屬性的使用float屬性在DIV+CSS的布局模式中使用頻率非常高,主要用于設(shè)置對(duì)象是否浮動(dòng)顯示,并設(shè)置其具體的浮動(dòng)方式,其屬性值包括:none、left以及right。浮動(dòng)是一種經(jīng)常使用的布局方式,它能夠改變頁面中對(duì)象的前后排列順序,這樣使得DIV+CSS的布局更加方便。知識(shí)分析3.利用模板來創(chuàng)建網(wǎng)頁(1)創(chuàng)建模板(2)編輯模板(3)修改并更新模板(4)從模板中分離4.“庫(kù)”元素在網(wǎng)頁中的應(yīng)用