第02章html、javascript簡介-1用和css開發(fā)站點

根據(jù)你的理解，

盒子模型？頁面布局通常用盒子模型的屬性？局部布局div-ul-li

結(jié)構(gòu)的應(yīng)用場合？局部布局div-dl-dt-dd結(jié)構(gòu)的應(yīng)用場合？的開發(fā)流程有哪幾步？樣式表有哪三類應(yīng)用方式？頁面布局的大致思路？制作貴美商城首頁使用DIV+CSS制作簡單的頁面布局根據(jù)

開發(fā)流程制作1、需求分析（1）（2）（3）想實現(xiàn)什么目標(biāo)？？者需要什么？（4）用多少時間，

是多少，完成的質(zhì)量？（5）內(nèi)容是什么？1、時刻記住：以客戶需求2、形成需求文檔：《需求規(guī)劃說明書》客戶2、偽界面設(shè)計美工做靜態(tài)Demo，反復(fù)確認客戶的需求3、制作應(yīng)用HTML+CSS技術(shù)，根據(jù)美工效果圖制作*.html頁面可選用Dreamweaver輔助工具4、測試網(wǎng)頁1、測試網(wǎng)頁是否滿足客戶需求2、根據(jù)客戶瀏覽器種類，測試瀏覽器的兼容性5、發(fā)布Internet常見的WEB服務(wù)器：IIS、Tomcat、Apache發(fā)布需要申請：1、 空間2、方便，例如：h使用Dreamweaver創(chuàng)建站點演示操作：用Dreamweaver創(chuàng)建貴美站點注意：1、通用的文件夾命名2、文件、文件夾命名：小寫、有語義中小型的結(jié)構(gòu)常用的三種頁面布局技術(shù)框架布局表格布局1 DIV+CSS布局：1、優(yōu)點：符合W3C內(nèi)容和結(jié)構(gòu)分離的思想、層次結(jié)構(gòu)簡單、利用搜索引擎搜索2、缺點：布局稍微復(fù)雜、存在瀏覽器兼容問題3、適用場合：主流的布局方式1、劃分頁面結(jié)構(gòu)典型的3行3列結(jié)構(gòu)，如何用HTML實現(xiàn)？2、編寫HTML內(nèi)容結(jié)構(gòu)1、 加頂級容器，方便 設(shè)置2、中間三塊放入main容器塊中container（頂級容器）main（頁面主體）注意命名規(guī)范1、各塊的業(yè)界

名2、注意最外面的大塊用ID，其他用class或ID均可演示示例1：首頁布局3、編寫CSS控制各塊的布局（layout.CSS

）1、可用具體數(shù)值或百分比設(shè)置寬高2、不需要設(shè)置各塊坐標(biāo)3、注意使用float浮動

4、代碼按塊體現(xiàn)層次演示示例1：首頁布局1、分析局部布局2、實現(xiàn)各塊內(nèi)容用背景圖方式實現(xiàn)，不要作為image內(nèi)容，更符合W3C的內(nèi)容語義用div-ul-li，各li浮動。小圖標(biāo)用背景圖偏移截取填入內(nèi)容并設(shè)置顏色等修飾類似頂部菜單的實現(xiàn)利用Hypersn

等工具獲取尺寸（Ctrl+Shift+R）演示操作：用Dreamweaver輸入列表、Hypersnap的使用需求說明：重新實現(xiàn)貴美首頁的整體布局（頂部課下完成）完成時間：25分鐘常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解1、分析局部布局典型的div內(nèi)套多個ul-li多個ul-li塊并列，“商品類別”字體為h1號標(biāo)題演示示例2：制作貴美商品分類2、確定各塊寬高及填充等設(shè)置左填充設(shè)置上填充內(nèi)容寬度width設(shè)為189px，實際寬度為margin+padding+width=204px清除塊級默認值設(shè)置整個div塊的背景圖演示示例2：制作貴美商品分類3、確定各行行高及列寬設(shè)置行高lineheight各<li>項的間距，通過設(shè)置寬度width實現(xiàn)Width=內(nèi)容總寬度/總列數(shù)演示示例2：制作貴美商品分類需求說明：在上一練習(xí)基礎(chǔ)上，根據(jù)提供的素材，重新實現(xiàn)貴美左邊的商品分類版本實現(xiàn)頁面HTML結(jié)構(gòu)（15分鐘）實現(xiàn)CSS

（25分鐘）完成時間：40分鐘1、分析局部布局大div塊中套上、下兩個div塊演示示例3：制作貴美中部內(nèi)容下方為多個dl-dt/dt實現(xiàn)，左浮動。dt（標(biāo)題）：dd（描述）：文字2、確定各塊寬高及填充等區(qū)塊銜接原則：一般是在大區(qū)塊的右邊或下方來實現(xiàn)，所以中間的空白作為上方div的下填充，左邊的空白作為商品分塊的右填充演示示例3：制作貴美中部內(nèi)容設(shè)置下方div塊的上填充3、確定各行行高及列寬將<dl><dd>外邊距和填充清零，設(shè)置dl-dt/dd塊的寬（內(nèi)容總寬度/總列數(shù)）、高（內(nèi)容總高度/總行數(shù)））高高控制dt（度確保每幅度一致演示示例3：制作貴美商品分類設(shè)置

<img>的行高lineheight和<dt>高度一致設(shè)置border為1px

solid

#ccc需求說明：在上一練習(xí)基礎(chǔ)上，根據(jù)提供的素材，重新實現(xiàn)貴美的中部版塊實現(xiàn)局部結(jié)構(gòu)（20分鐘）實現(xiàn)CSS

（25分鐘）完成時間：45分鐘簡述開發(fā)流程說明

各版塊實現(xiàn)的思路頁面實際寬高和width、hei