1、用html和css開發(fā)站點tp09

1、 貴美商城（一）第九章回顧與作業(yè)點評根據(jù)你的理解，什么是盒子模型？頁面布局通常用盒子模型的屬性？局部布局div-ul-li 結(jié)構(gòu)的應(yīng)用場合？ 局部布局div-dl-dt-dd結(jié)構(gòu)的應(yīng)用場合？ 預(yù)習(xí)檢查網(wǎng)站的開發(fā)流程有哪幾步？樣式表有哪三類應(yīng)用方式？頁面布局的大致思路？本章任務(wù)制作貴美商城首頁本章目標使用DIV+CSS制作簡單的頁面布局根據(jù)網(wǎng)站開發(fā)流程制作網(wǎng)站1、需求分析 （1）網(wǎng)站想實現(xiàn)什么目標？（2）誰來訪問？ （3）訪問者需要什么？ （4）用多少時間，預(yù)算是多少，完成的質(zhì)量？ （5）網(wǎng)站內(nèi)容是什么？ 網(wǎng)站開發(fā)流程5-1 1、時刻記住：以客戶需求為導(dǎo)向2、形成需求文檔：網(wǎng)站需求規(guī)劃說明書客戶

2、 2、偽界面設(shè)計 網(wǎng)站開發(fā)流程5-2 美工做靜態(tài)Demo，反復(fù)確認客戶的需求3、網(wǎng)站制作 網(wǎng)站開發(fā)流程5-3 應(yīng)用HTML+CSS技術(shù)，根據(jù)美工效果圖制作*.html頁面可選用Dreamweaver輔助工具4、測試網(wǎng)頁 網(wǎng)站開發(fā)流程5-4 1、測試網(wǎng)頁是否滿足客戶需求2、根據(jù)客戶瀏覽器種類，測試瀏覽器的兼容性5、發(fā)布網(wǎng)站網(wǎng)站開發(fā)流程5-5 發(fā)布需要申請：1、網(wǎng)站空間 2、域名 Internet常見的WEB服務(wù)器：IIS、Tomcat、Apache域名方便訪問，例如： 使用Dreamweaver創(chuàng)建站點創(chuàng)建站點演示操作：用Dreamweaver創(chuàng)建貴美站點注意：1、通用的文件夾命名2、文件、文件

3、夾命名：小寫、有語義中小型網(wǎng)站的目錄結(jié)構(gòu)常用的三種頁面布局技術(shù)三種頁面布局技術(shù)框架布局：1、優(yōu)點：簡潔、多窗口查看2、缺點：分多文件保存，不利于搜索引擎搜索3、適用場合：論壇、社區(qū)表格布局：1、優(yōu)點：設(shè)計簡單、瀏覽器兼容性好2、缺點：表格嵌套導(dǎo)致結(jié)構(gòu)冗余、整個表格下載完才開始顯示數(shù)據(jù)，影響訪問速度3、適用場合：不符合W3C，逐漸淡出DIV+CSS布局：1、優(yōu)點：符合W3C內(nèi)容和結(jié)構(gòu)分離的思想、層次結(jié)構(gòu)簡單、利用搜索引擎搜索2、缺點：布局稍微復(fù)雜、存在瀏覽器兼容問題3、適用場合：主流的布局方式1、劃分頁面結(jié)構(gòu)制作貴美首頁布局3-1根據(jù)效果圖，劃分為哪幾個大塊？ 典型的3行3列結(jié)構(gòu)，如何用HTML

4、實現(xiàn)？2、編寫HTML內(nèi)容結(jié)構(gòu)制作貴美首頁布局3-21、推薦加頂級容器，方便統(tǒng)一設(shè)置2、中間三塊放入main容器塊中main（頁面主體）container（頂級容器）注意命名規(guī)范1、各塊的業(yè)界習(xí)慣的命名2、注意最外面的大塊用ID，其他用class或ID均可演示示例1：首頁布局3、編寫CSS控制各塊的布局（layout.CSS ）制作貴美首頁布局3-31、可用具體數(shù)值或百分比設(shè)置寬高2、不需要設(shè)置各塊坐標3、注意使用float浮動4、代碼按塊體現(xiàn)層次 演示示例1：首頁布局1、分析局部布局制作頂部的思路2-12、實現(xiàn)各塊內(nèi)容制作頂部的思路2-2用背景圖方式實現(xiàn)，不要作為image內(nèi)容，更符合W3C

5、推薦的內(nèi)容語義用div-ul-li，各li浮動。小圖標用背景圖偏移截取填入內(nèi)容并設(shè)置顏色等修飾類似頂部菜單的實現(xiàn)演示操作：用Dreamweaver輸入列表、Hypersnap的使用利用Hypersnape等工具獲取尺寸（Ctrl+Shift+R）練習(xí)貴美首頁的整體布局 需求說明：重新實現(xiàn)貴美首頁的整體布局（頂部課下完成） 完成時間：25分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解制作商品分類版塊的思路3-11、分析局部布局典型的div內(nèi)套多個ul-li多個ul-li塊并列，“商品類別”字體為h1號標題演示示例2：制作貴美商品分類制作商品分類版塊的思路3-22、確定各塊

6、寬高及填充等設(shè)置整個div塊的背景圖設(shè)置左填充設(shè)置上填充內(nèi)容寬度width設(shè)為189px，實際寬度為margin+padding+width=204px清除塊級標簽?zāi)J值演示示例2：制作貴美商品分類制作商品分類版塊的思路3-33、確定各行行高及列寬 設(shè)置行高lineheightWidth=內(nèi)容總寬度/總列數(shù)演示示例2：制作貴美商品分類各項的間距，通過設(shè)置寬度width實現(xiàn)練習(xí)貴美商品分類版塊 需求說明：在上一練習(xí)基礎(chǔ)上，根據(jù)提供的素材，重新實現(xiàn)貴美左邊的商品分類版本（1）實現(xiàn)頁面HTML結(jié)構(gòu)（15分鐘）（2）實現(xiàn)CSS （25分鐘）完成時間：40分鐘制作瘋狂購物版塊的思路3-11、分析局部布局

7、大div塊中套上、下兩個div塊演示示例3：制作貴美中部內(nèi)容下方為多個dl-dt/dt實現(xiàn)，左浮動。dt（標題）：圖片dd（描述）：文字制作瘋狂購物版塊的思路3-22、確定各塊寬高及填充等區(qū)塊銜接原則：一般是在大區(qū)塊的右邊或下方來實現(xiàn)，所以中間的空白作為上方div的下填充，左邊的空白作為商品分塊的右填充演示示例3：制作貴美中部內(nèi)容設(shè)置下方div塊的上填充制作瘋狂購物版塊的思路3-33、確定各行行高及列寬 將外邊距和填充清零，設(shè)置dl-dt/dd塊的寬（內(nèi)容總寬度/總列數(shù)）、高（內(nèi)容總高度/總行數(shù)）控制dt（圖片）高度確保每幅圖片高度一致演示示例3：制作貴美商品分類設(shè)置圖片的行高lineheight和高度一致設(shè)置border為1px solid #ccc 練習(xí)貴美瘋狂購物版塊需求說明：在上一練習(xí)基礎(chǔ)上，根據(jù)提供的素材，重新實現(xiàn)貴美的中部版塊（1）實現(xiàn)局部結(jié)構(gòu)（20分鐘）（2）實現(xiàn)CSS （25分鐘）完成時間：45分鐘總結(jié) 簡述網(wǎng)站開發(fā)流程說明網(wǎng)站各版塊實現(xiàn)的思