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

根據(jù)你的理解，

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

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

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

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

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

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

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

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

（25分鐘）完成時(shí)間：40分鐘1、分析局部布局大div塊中套上、下兩個(gè)div塊演示示例3：制作貴美中部?jī)?nèi)容下方為多個(gè)dl-dt/dt實(shí)現(xiàn)，左浮動(dòng)。dt（標(biāo)題）：dd（描述）：文字2、確定各塊寬高及填充等區(qū)塊銜接原則：一般是在大區(qū)塊的右邊或下方來(lái)實(shí)現(xiàn)，所以中間的空白作為上方div的下填充，左邊的空白作為商品分塊的右填充演示示例3：制作貴美中部?jī)?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需求說(shuō)明：在上一練習(xí)基礎(chǔ)上，根據(jù)提供的素材，重新實(shí)現(xiàn)貴美的中部版塊實(shí)現(xiàn)局部結(jié)構(gòu)（20分鐘）實(shí)現(xiàn)CSS

（25分鐘）完成時(shí)間：45分鐘簡(jiǎn)述開發(fā)流程說(shuō)明

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