HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)-第十二章-網(wǎng)站前臺頁面設(shè)計課件

第1頁第12章愛德照明網(wǎng)站前臺頁面本章概述本章的學習目標主要內(nèi)容第1頁第12章愛德照明網(wǎng)站前臺頁面本章概述第2頁本章概述網(wǎng)站設(shè)計中要考慮網(wǎng)頁內(nèi)容的顯示、整體顏色搭配、頁面的排版布局等。本章主要應(yīng)用前面章節(jié)講解的網(wǎng)頁設(shè)計技術(shù)，設(shè)計制作愛德照明材料網(wǎng)站的前臺頁面，進一步鞏固網(wǎng)頁設(shè)計與制作的知識和技術(shù)。第2頁本章概述網(wǎng)站設(shè)計中要考慮網(wǎng)頁內(nèi)容的顯示、整體顏色搭配、第3頁本章的學習目標了解網(wǎng)站的開發(fā)流程掌握網(wǎng)站開發(fā)中需求分析法的方法了解站點規(guī)劃的內(nèi)容和要求掌握用Hbuilder建立站點、設(shè)計網(wǎng)頁的技術(shù)，能夠建立規(guī)范的站點第3頁本章的學習目標了解網(wǎng)站的開發(fā)流程第4頁主要內(nèi)容12.1網(wǎng)站的開發(fā)流程12.2用HBulider創(chuàng)建WEB項目12.3案例：制作愛德照明網(wǎng)站首頁12.4案例：制作公司新聞頁面12.5案例：制作聯(lián)系方式頁面12.6本章小結(jié)第4頁主要內(nèi)容12.1網(wǎng)站的開發(fā)流程第5頁12.1網(wǎng)站的開發(fā)流程本節(jié)主要內(nèi)容：

需求分析

站點規(guī)劃

網(wǎng)站制作

測試發(fā)布第5頁12.1網(wǎng)站的開發(fā)流程本節(jié)主要內(nèi)容：12.1.1需求分析1.建站目的2.目標定位第6頁12.1.1需求分析1.建站目的第6頁12.1.2站點規(guī)劃1.網(wǎng)站結(jié)構(gòu)規(guī)劃

網(wǎng)站結(jié)構(gòu)設(shè)計、文件夾設(shè)計、文件命名要求2.網(wǎng)站內(nèi)容規(guī)劃3.網(wǎng)站界面規(guī)劃4.網(wǎng)站功能設(shè)置第7頁12.1.2站點規(guī)劃1.網(wǎng)站結(jié)構(gòu)規(guī)劃第7頁12.1.3網(wǎng)站制作1.前臺頁面制作

前臺頁面制作包括內(nèi)容收集整理、圖片的處理、背景設(shè)置、頁面布局排版及樣式設(shè)計等。2.后臺程序開發(fā)

后臺程序開發(fā)包括數(shù)據(jù)庫設(shè)計、網(wǎng)站和數(shù)據(jù)庫的連接、動態(tài)網(wǎng)頁編程等。第8頁12.1.3網(wǎng)站制作1.前臺頁面制作第8頁12.1.4測試發(fā)布1.測試站點

檢查是否按照設(shè)計的要求運行，測試系統(tǒng)在不同用戶端的顯示是否合適，進行安全性和可用性測試，包括頁面是否美觀、鏈接是否正確和瀏覽器兼容性是否良好等。2.發(fā)布站點

當完成了網(wǎng)站的設(shè)計、調(diào)試、測試和網(wǎng)頁制作等工作后，需要把設(shè)計好的站點上傳到服務(wù)器來完成整個網(wǎng)站的發(fā)布。

第9頁12.1.4測試發(fā)布1.測試站點第9頁第10頁12.2用HBulider創(chuàng)建WEB項目啟動HBuilder，創(chuàng)建WEB項目。依次點擊文件→新建→選擇Web項目，彈出“創(chuàng)建Web項目”對話框，在“項目名稱”后的文本框中輸入Web項目的名稱“AladLed”，單擊“瀏覽”按鈕，選擇文件要存放的路徑，如圖12-1所示。css文件夾存放CSS樣式表文件；js文件夾中存放JS腳本文件img文件夾存放圖片資料media文件夾放置音頻和視頻等媒體文件第10頁12.2用HBulider創(chuàng)建WEB項目啟動HB12.3案例：制作愛德照明網(wǎng)站首頁第11頁【案例展示】制作愛德照明網(wǎng)站首頁，本例文件index.html在瀏覽器中的顯示效果如圖12-3所示，頁面結(jié)構(gòu)如圖12-4所示。?！局R要點】頁面布局、文本、圖像、列表、超鏈接、導(dǎo)航、CSS3動畫、多媒體。【學習目標】掌握綜合應(yīng)用頁面元素、布局技術(shù)、CSS樣式等設(shè)計網(wǎng)頁的技術(shù)。12.3案例：制作愛德照明網(wǎng)站首頁第11頁【案例展示】制12.4案例：制作公司新聞頁面第12頁【案例展示】制作公司新聞頁面，本例文件news.html在瀏覽器中的顯示效果如圖12-5所示，頁面結(jié)構(gòu)如圖12-6所示。?！局R要點】圖片、列表和圖文混排技術(shù)?！緦W習目標】掌握圖像、列表和圖文混排等CSS樣式等設(shè)計網(wǎng)頁的技術(shù)。12.4案例：制作公司新聞頁面第12頁【案例展示】制作公12.5案例：制作聯(lián)系方式頁面【案例展示】制作聯(lián)系方式頁面，本例文件contact.html在瀏覽器中的顯示效果如圖12-7所示，頁面結(jié)構(gòu)如圖12-8所示?！局R要點】縱向?qū)Ш讲藛?、新聞列表和翻頁?dǎo)航按鈕設(shè)計。【學習目標】掌握綜合應(yīng)用頁面元素、布局技術(shù)、CSS樣式等設(shè)計網(wǎng)頁的技術(shù)。第13頁12.5案例：制作聯(lián)系方式頁面【案例展示】制作聯(lián)系方式頁第14頁12.6本章小結(jié)本章首先介紹了科學合理的網(wǎng)站開發(fā)流程，然后介紹了用HBulider創(chuàng)建WEB項目的流程，并介紹了網(wǎng)站首頁的設(shè)計方法、企業(yè)新聞的設(shè)計方法和聯(lián)系方式的設(shè)計方法。通過本章的學習，讀者要掌握網(wǎng)站的開發(fā)流程、CSS布局設(shè)計網(wǎng)頁的方法。第14頁12.6本章小結(jié)本章首先介紹了科學合理的網(wǎng)站開第15頁第12章愛德照明網(wǎng)站前臺頁面本章概述本章的學習目標主要內(nèi)容第1頁第12章愛德照明網(wǎng)站前臺頁面本章概述第16頁本章概述網(wǎng)站設(shè)計中要考慮網(wǎng)頁內(nèi)容的顯示、整體顏色搭配、頁面的排版布局等。本章主要應(yīng)用前面章節(jié)講解的網(wǎng)頁設(shè)計技術(shù)，設(shè)計制作愛德照明材料網(wǎng)站的前臺頁面，進一步鞏固網(wǎng)頁設(shè)計與制作的知識和技術(shù)。第2頁本章概述網(wǎng)站設(shè)計中要考慮網(wǎng)頁內(nèi)容的顯示、整體顏色搭配、第17頁本章的學習目標了解網(wǎng)站的開發(fā)流程掌握網(wǎng)站開發(fā)中需求分析法的方法了解站點規(guī)劃的內(nèi)容和要求掌握用Hbuilder建立站點、設(shè)計網(wǎng)頁的技術(shù)，能夠建立規(guī)范的站點第3頁本章的學習目標了解網(wǎng)站的開發(fā)流程第18頁主要內(nèi)容12.1網(wǎng)站的開發(fā)流程12.2用HBulider創(chuàng)建WEB項目12.3案例：制作愛德照明網(wǎng)站首頁12.4案例：制作公司新聞頁面12.5案例：制作聯(lián)系方式頁面12.6本章小結(jié)第4頁主要內(nèi)容12.1網(wǎng)站的開發(fā)流程第19頁12.1網(wǎng)站的開發(fā)流程本節(jié)主要內(nèi)容：

需求分析

站點規(guī)劃

網(wǎng)站制作

測試發(fā)布第5頁12.1網(wǎng)站的開發(fā)流程本節(jié)主要內(nèi)容：12.1.1需求分析1.建站目的2.目標定位第20頁12.1.1需求分析1.建站目的第6頁12.1.2站點規(guī)劃1.網(wǎng)站結(jié)構(gòu)規(guī)劃

網(wǎng)站結(jié)構(gòu)設(shè)計、文件夾設(shè)計、文件命名要求2.網(wǎng)站內(nèi)容規(guī)劃3.網(wǎng)站界面規(guī)劃4.網(wǎng)站功能設(shè)置第21頁12.1.2站點規(guī)劃1.網(wǎng)站結(jié)構(gòu)規(guī)劃第7頁12.1.3網(wǎng)站制作1.前臺頁面制作

前臺頁面制作包括內(nèi)容收集整理、圖片的處理、背景設(shè)置、頁面布局排版及樣式設(shè)計等。2.后臺程序開發(fā)

后臺程序開發(fā)包括數(shù)據(jù)庫設(shè)計、網(wǎng)站和數(shù)據(jù)庫的連接、動態(tài)網(wǎng)頁編程等。第22頁12.1.3網(wǎng)站制作1.前臺頁面制作第8頁12.1.4測試發(fā)布1.測試站點

檢查是否按照設(shè)計的要求運行，測試系統(tǒng)在不同用戶端的顯示是否合適，進行安全性和可用性測試，包括頁面是否美觀、鏈接是否正確和瀏覽器兼容性是否良好等。2.發(fā)布站點

當完成了網(wǎng)站的設(shè)計、調(diào)試、測試和網(wǎng)頁制作等工作后，需要把設(shè)計好的站點上傳到服務(wù)器來完成整個網(wǎng)站的發(fā)布。

第23頁12.1.4測試發(fā)布1.測試站點第9頁第24頁12.2用HBulider創(chuàng)建WEB項目啟動HBuilder，創(chuàng)建WEB項目。依次點擊文件→新建→選擇Web項目，彈出“創(chuàng)建Web項目”對話框，在“項目名稱”后的文本框中輸入Web項目的名稱“AladLed”，單擊“瀏覽”按鈕，選擇文件要存放的路徑，如圖12-1所示。css文件夾存放CSS樣式表文件；js文件夾中存放JS腳本文件img文件夾存放圖片資料media文件夾放置音頻和視頻等媒體文件第10頁12.2用HBulider創(chuàng)建WEB項目啟動HB12.3案例：制作愛德照明網(wǎng)站首頁第25頁【案例展示】制作愛德照明網(wǎng)站首頁，本例文件index.html在瀏覽器中的顯示效果如圖12-3所示，頁面結(jié)構(gòu)如圖12-4所示。。【知識要點】頁面布局、文本、圖像、列表、超鏈接、導(dǎo)航、CSS3動畫、多媒體?！緦W習目標】掌握綜合應(yīng)用頁面元素、布局技術(shù)、CSS樣式等設(shè)計網(wǎng)頁的技術(shù)。12.3案例：制作愛德照明網(wǎng)站首頁第11頁【案例展示】制12.4案例：制作公司新聞頁面第26頁【案例展示】制作公司新聞頁面，本例文件news.html在瀏覽器中的顯示效果如圖12-5所示，頁面結(jié)構(gòu)如圖12-6所示。?！局R要點】圖片、列表和圖文混排技術(shù)。【學習目標】掌握圖像、列表和圖文混排等CSS樣式等設(shè)計網(wǎng)頁的技術(shù)。12.4案例：制作公司新聞頁面第12頁【案例展示】制作公12.5案例：制作聯(lián)系方式頁面【案例展示】制作聯(lián)系方式頁面，本例文件contact.html在瀏覽器中的顯示效果如圖12-7所示，頁面結(jié)構(gòu)如圖12-8所示?！局R要點】縱向?qū)Ш讲藛?、新聞列表和翻頁?dǎo)航按鈕設(shè)計?！緦W習目標】掌握綜合應(yīng)用頁面元素、布局技術(shù)、CSS樣式等設(shè)計網(wǎng)