《網(wǎng)頁設(shè)計(jì)與制作教程HTML+CSS+Bootstrap》課件 項(xiàng)目四創(chuàng)建網(wǎng)站古詩文網(wǎng)

項(xiàng)目四

創(chuàng)建古詩文網(wǎng)項(xiàng)目簡介用CSS+DIV進(jìn)行網(wǎng)頁布局與設(shè)置樣式是兩個(gè)不同的思維過程，CSS樣式主要是實(shí)現(xiàn)各種具體效果，而網(wǎng)頁布局更關(guān)注的是整個(gè)頁面的呈現(xiàn)效果。通過前面的學(xué)習(xí)，了解到DreamweaverCC2015支持HTML5語言。本項(xiàng)目中還將引入HTML5中的新語義元素來定義Web頁面的不同部分。項(xiàng)目目標(biāo)本項(xiàng)目以《古詩文網(wǎng)》網(wǎng)站首頁頁面設(shè)計(jì)為例，初步掌握基于HTML5的CSS+DIV的頁面布局方法。了解網(wǎng)頁標(biāo)準(zhǔn)化的基本思想，理解CSS盒模型，學(xué)會(huì)使用HTML5中的新語義元素定義Web頁面的不同部分，掌握CSS+DIV進(jìn)行網(wǎng)頁布局的一般流程和方法。工作任務(wù)根據(jù)《古詩文網(wǎng)》首頁頁面設(shè)計(jì)與制作的要求，基于工作過程，以任務(wù)驅(qū)動(dòng)的方式，掌握基于HTML5的CSS+DIV的頁面布局方法。（1）構(gòu)建網(wǎng)頁結(jié)構(gòu)（2）定義網(wǎng)頁布局樣式任務(wù)一構(gòu)建網(wǎng)頁結(jié)構(gòu)通過創(chuàng)建《古詩文網(wǎng)》網(wǎng)站首頁結(jié)構(gòu)的操作實(shí)踐來掌握基于HTML5構(gòu)建網(wǎng)頁結(jié)構(gòu)的方法：1、建立站點(diǎn)2、構(gòu)建首頁結(jié)構(gòu)；

任務(wù)目標(biāo)按照網(wǎng)站需求分析，建立站點(diǎn)文件夾，并在DreamweaverCC2015中設(shè)計(jì)制作網(wǎng)站首頁頁面結(jié)構(gòu)。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一了解Web標(biāo)準(zhǔn)化

知識(shí)準(zhǔn)備二認(rèn)識(shí)DIV和DIV布局知識(shí)準(zhǔn)備三理解CSS盒模型知識(shí)準(zhǔn)備四認(rèn)識(shí)HTML5中結(jié)構(gòu)化元素任務(wù)實(shí)施步驟一

創(chuàng)建站點(diǎn)和首頁步驟二

構(gòu)建網(wǎng)頁結(jié)構(gòu)任務(wù)二

定義網(wǎng)頁布局樣式通過以下七個(gè)步驟的操作實(shí)踐來掌握DIV+CSS布局的一般流程和方法，完成《古詩文網(wǎng)》首頁的制作：1．定義網(wǎng)頁基本屬性；2．定義標(biāo)題塊樣式；3．定義導(dǎo)航樣式；4．布局main、aside和footer；5．制作main部分；6．定義aside樣式；7．定義腳注塊樣式。任務(wù)目標(biāo)構(gòu)建出網(wǎng)頁的基本結(jié)構(gòu)以后，就可以開始進(jìn)行網(wǎng)頁布局。通過本任務(wù)掌握網(wǎng)頁布局的一般流程和方法，熟悉網(wǎng)頁布局中的常用CSS樣式屬性，初步掌握float屬性的使用技巧。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一了解CSS的繼承性知識(shí)準(zhǔn)備二

熟悉網(wǎng)頁布局中的常用CSS樣式屬性Width/Height（寬度/高度）Border（邊框）Margin（外邊距）知識(shí)準(zhǔn)備三

網(wǎng)頁布局的基本形式自然布局浮動(dòng)布局定位布局知識(shí)準(zhǔn)備四float屬性任務(wù)實(shí)施步驟一定義網(wǎng)頁基本屬性1．設(shè)置頁面屬性。2．定義Div#container樣式。步驟二

構(gòu)建網(wǎng)頁結(jié)構(gòu)步驟二

定義網(wǎng)頁標(biāo)題樣式步驟三

定義導(dǎo)航樣式步驟四

布局main、as