家居設(shè)計(jì)說明書

家居網(wǎng)站設(shè)計(jì)說明書2014-2015第1學(xué)期題目：家居設(shè)計(jì)院（系、部）：工商管理學(xué)院指導(dǎo)教師：張文元學(xué)生姓名：宋丹丹0811120218宋艷曉0811120219范玲玲0811120206楊逸旭0811120223侯妍菲0811120105邵美瑤0811120217網(wǎng)站規(guī)劃1.1設(shè)計(jì)目的我們讀書就是為了獲得知識(shí),現(xiàn)在我們學(xué)習(xí)了Dreanweaver網(wǎng)頁設(shè)計(jì),當(dāng)然就是要能做一個(gè)精美的網(wǎng)頁。在此次網(wǎng)頁設(shè)計(jì)中,我們要能更加的了解動(dòng)態(tài)網(wǎng)頁強(qiáng)大的功能和更好的使用它。通過此次設(shè)計(jì)我們還要能夠知道靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)也的區(qū)別。當(dāng)然,次此設(shè)計(jì)的企業(yè)網(wǎng)站,一方面是為了完成我們的任務(wù)，但更重要的是把我們所學(xué)到的東西用在具體的實(shí)踐之中。所以，這次設(shè)計(jì)的目的也是要我們更好的掌握和使用好動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)，以便提高對(duì)網(wǎng)頁知識(shí)的更深層了解。第三點(diǎn)也是最要的一點(diǎn)是把我們?cè)跁旧蠈W(xué)到的知識(shí)充分運(yùn)用到此次設(shè)計(jì)之中。使我們的在書上學(xué)到的東西不僅僅停留在表面上，把這些東西都用在所要做的網(wǎng)頁上面。以達(dá)到老師要求的效果和學(xué)以致用。1.2系統(tǒng)的背景我們組做的是關(guān)于家居的網(wǎng)站，此次的網(wǎng)站設(shè)計(jì)使用的模版是網(wǎng)上搜到了。這個(gè)網(wǎng)站是一家專門針對(duì)各大小網(wǎng)站提供技術(shù)及資源服務(wù)的網(wǎng)站，現(xiàn)擁有國(guó)內(nèi)最大的源碼發(fā)布下載中心以及站長(zhǎng)、網(wǎng)管聚集的站長(zhǎng)社區(qū)，下載中心已經(jīng)成為國(guó)內(nèi)大型的同類下載站之一，每日的下載量達(dá)十萬次以上，提供下載的文件儲(chǔ)量達(dá)60G以上；它是一家專門針對(duì)中文站點(diǎn)提供資訊、技術(shù)、資源、服務(wù)的網(wǎng)站，網(wǎng)站現(xiàn)有上百萬用戶，擁有最專業(yè)的行業(yè)資訊頻道、國(guó)內(nèi)最大的建站源碼下載中心、站長(zhǎng)聚集的交流社區(qū)、最大的建站素材庫、最實(shí)用的站長(zhǎng)工具，除此之外還提供了很多專門針對(duì)網(wǎng)站建設(shè)的特色服務(wù)。這個(gè)網(wǎng)站為我這次作業(yè)的完成提供了很大的方便。正是有了這個(gè)網(wǎng)站提供的模板。我此次網(wǎng)站設(shè)計(jì)的作業(yè)才得以通過對(duì)這個(gè)模版的修改來完成。1.3對(duì)象需求我所設(shè)計(jì)的網(wǎng)站是“家居設(shè)計(jì)網(wǎng)”此次設(shè)計(jì)就圍繞家居裝飾品來展開的。家居裝飾主要是通過擺設(shè)、粘貼、懸掛、鋪墊一些物品，讓居室增添美感。這些物品包括：盆景、花瓶、墻紙、珠簾、字畫、布藝及其它飾物等。隨著時(shí)代的發(fā)展，家飾、家裝之間越來越多融合。例如：燈飾、窗飾、升降晾衣架等，既有實(shí)用功能，又兼顧裝飾效果。近年來，隨著經(jīng)濟(jì)的不斷發(fā)展，越來越多的人們對(duì)家居環(huán)境的要求越來越高，家庭生活舒適化、安全化成為現(xiàn)代人家居新選擇。特別是近些年，國(guó)內(nèi)的家居市場(chǎng)發(fā)展迅猛且產(chǎn)品日新月異，逐漸滲透到人們?nèi)粘Ｉ钪?。既改變了人們的生活?xí)慣，也提高了生活質(zhì)量。家居裝飾設(shè)計(jì)作為裝修的一部分今后比重將會(huì)越來越大。家居裝飾產(chǎn)業(yè)前景依然廣闊。但產(chǎn)品需要整合提升、消費(fèi)需要引導(dǎo)推動(dòng)、渠道需要建立完善、營(yíng)銷方式需要開拓創(chuàng)新。作為電子商務(wù)專業(yè)的學(xué)生。我們?cè)O(shè)計(jì)這個(gè)網(wǎng)站的目的就是通過網(wǎng)絡(luò)來實(shí)現(xiàn)更大的營(yíng)銷目的。1.4電子商務(wù)網(wǎng)站設(shè)計(jì)的原則和發(fā)展前景電子商務(wù)網(wǎng)站設(shè)計(jì)的原則是：以人為本、整體平衡統(tǒng)一、視覺形神合一、更新維護(hù)方便、頁面最佳優(yōu)化、終端兼容匹配、信息安全保障、功能可擴(kuò)展定位等。電子商務(wù)網(wǎng)站的設(shè)計(jì)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑。因此電子商務(wù)網(wǎng)站的目的性一定要定義明確，從實(shí)際出發(fā)，主次分明、循序漸進(jìn)。另外，總體的設(shè)計(jì)方案要遵循主題鮮明原則。在目的性明確的基礎(chǔ)上，完成電子商務(wù)網(wǎng)站的構(gòu)思創(chuàng)意，對(duì)網(wǎng)站整體風(fēng)格和特色做出定位。我國(guó)電子商務(wù)正由起步邁入繁榮發(fā)展的階段。行業(yè)化的、精細(xì)化的電子商務(wù)平臺(tái)正逐漸成為直接實(shí)現(xiàn)行業(yè)用戶價(jià)值的合作伙伴。而電子商務(wù)網(wǎng)站是企業(yè)開展電子商務(wù)的交互窗口和綜合信息平臺(tái)，在電子商務(wù)活動(dòng)中扮演著重要的角色，有著十分重要的意義。也和電子商務(wù)的發(fā)展一樣，有著光明的發(fā)展前景。1.5網(wǎng)站未來的運(yùn)作模式分析和建議電子商務(wù)從上世紀(jì)末到現(xiàn)在已經(jīng)走過十幾個(gè)春秋，國(guó)內(nèi)經(jīng)歷了從無到有，從小到大的成長(zhǎng)過程，發(fā)展速度是喜人的。但是電子商務(wù)不可能取代傳統(tǒng)銷售渠道而一家獨(dú)大。未來的電子商務(wù)，不再是純粹的單一網(wǎng)絡(luò)銷售，它是與傳統(tǒng)渠道模式的有機(jī)結(jié)合，優(yōu)勢(shì)相補(bǔ)，而絕不是相互排拆。低價(jià)不再是未來電子商務(wù)唯一的利器，它會(huì)給消費(fèi)者網(wǎng)購帶來方便、安全和舒適的全面體驗(yàn)。這才是未來電子商務(wù)的方向，才是真正的電子商務(wù)網(wǎng)站。網(wǎng)站的設(shè)計(jì)不只是設(shè)計(jì)師的設(shè)計(jì)技術(shù)問題，也是商家的實(shí)用要求問題，更是消費(fèi)者是否滿意的問題。不只要充分考慮到常規(guī)電子商務(wù)網(wǎng)站設(shè)計(jì)的實(shí)用原則，更應(yīng)是不斷創(chuàng)新、與時(shí)俱進(jìn)、實(shí)事求是的實(shí)踐性問題。2．可行性分析2.1技術(shù)可行性分析1.在限制條件下，功能目標(biāo)是否能達(dá)到：如果硬件設(shè)備跟不上，將會(huì)嚴(yán)重影響開發(fā)的進(jìn)度。也會(huì)嚴(yán)重影響部署之后系統(tǒng)的整體性能。2.利用現(xiàn)有技術(shù)，功能目標(biāo)能否達(dá)到：目前Dreamweaver技術(shù)與WEB技術(shù)已經(jīng)非常成熟，結(jié)合JSP及相關(guān)的關(guān)系數(shù)據(jù)庫技術(shù)，完全能夠?qū)崿F(xiàn)并達(dá)到上述功能目標(biāo)。3.在規(guī)定的期限內(nèi)，開發(fā)能否完成：從人員的水平和所能支出的開發(fā)時(shí)間來看，開發(fā)能夠按時(shí)完成。服務(wù)端可以在任何符合IIS規(guī)范的Web服務(wù)器上運(yùn)行；只要符合本系統(tǒng)的數(shù)據(jù)庫結(jié)構(gòu)的要求，凡是能提供ODBC驅(qū)動(dòng)程序的數(shù)據(jù)庫；客戶端是能運(yùn)行或解釋HTML代碼、WEB代碼的任何瀏覽器。就目前使用的開發(fā)技術(shù)來說建議系統(tǒng)的功能目標(biāo)應(yīng)該能夠達(dá)到；利用現(xiàn)有的技術(shù)在規(guī)定的期限內(nèi)開發(fā)工作基本能夠完成。4.用戶使用：本系統(tǒng)自主商品管理，通過IE瀏覽器即可管理整個(gè)網(wǎng)站。俱備完整的購物網(wǎng)站功能、結(jié)構(gòu)簡(jiǎn)單、容易使用、并設(shè)有促銷廣告和店標(biāo)自定義功能，操作簡(jiǎn)單，不需懂得太多的計(jì)算機(jī)知識(shí)，也無需制作復(fù)雜網(wǎng)頁，只需訂購這套系統(tǒng)，隨后，登錄到后臺(tái)，點(diǎn)點(diǎn)鼠標(biāo)，在線設(shè)置輕松設(shè)置各項(xiàng)功能及添加要出售的商品，家居網(wǎng)上商店就這樣輕松建設(shè)成功了。2.2經(jīng)濟(jì)可行性分析2.2.1投資狀況1.基建投資一臺(tái)P4服務(wù)器作為網(wǎng)站服務(wù)器一些配套設(shè)備環(huán)境保護(hù)設(shè)備2.其他一次性支出開發(fā)費(fèi)調(diào)查費(fèi)用人工費(fèi)用其他不可知額外支出研究（需求的研究和設(shè)計(jì)的研究）檢查費(fèi)用和技術(shù)管理性費(fèi)用3.經(jīng)常性支出網(wǎng)絡(luò)通訊費(fèi)設(shè)備使用及維護(hù)費(fèi)日常維護(hù)費(fèi)2.2.2系統(tǒng)收益1.一次性收益：節(jié)省了家居網(wǎng)上購物的現(xiàn)缺商品的開發(fā)2.經(jīng)常性收益節(jié)省人工購物的時(shí)間，人工費(fèi)網(wǎng)上代理廣告費(fèi)用3.不可定量收益網(wǎng)站的廣告效應(yīng)送貨服務(wù)費(fèi)用4.非一次性支出設(shè)備的租金和維護(hù)費(fèi)用軟件的租金和維護(hù)費(fèi)用數(shù)據(jù)通訊方面的租金和維護(hù)費(fèi)用人員的工資、獎(jiǎng)金房屋、空間的使用開支公用設(shè)施方面的開支保密安全方面的開支其他經(jīng)常性的支出等2.2.3收益/投資比資本周轉(zhuǎn)速度快，回收期短，風(fēng)險(xiǎn)小，盈利多。不足的是，投資回收期沒有全面地考慮投資方案整個(gè)計(jì)算期內(nèi)的現(xiàn)金流量，即：忽略在以后發(fā)生投資回收期的所有好處,對(duì)總收入不做考慮。只考慮回收之前的效果，不能反映投資回收之后的情況，即無法準(zhǔn)確衡量方案在整個(gè)計(jì)算期內(nèi)的經(jīng)濟(jì)效果。2.3可操作性分析2.3.1法律因素1.考慮到可能使用到的軟件產(chǎn)品的版權(quán)問題，軟件服務(wù)器所使用的軟件，應(yīng)該盡量使用正版軟件。如果正版價(jià)格高得難以接受，可以采用一些能滿足系統(tǒng)運(yùn)行的免費(fèi)軟件來替代。開發(fā)階段可以使用試用版軟件，但正式發(fā)布時(shí)建議操作系統(tǒng)采用正版軟件。2.《消費(fèi)者保護(hù)法》3.所有技術(shù)資料都由提出方保管。4.該平臺(tái)是是自主開發(fā)設(shè)計(jì)，因此不會(huì)構(gòu)成侵權(quán)，在法律上是可行的。2.3.2道德可行性1.盡量使用正版軟件。2.遵守網(wǎng)上購物的法律規(guī)定，不做違法亂紀(jì)的操作。3.不窺探他人隱私，尊重商家權(quán)利，同時(shí)學(xué)會(huì)保護(hù)自己的購物合法權(quán)益，遇到侵權(quán)問題，利用合法武器保護(hù)自己。2.3.4社會(huì)可行性本系統(tǒng)自主商品管理，通過IE瀏覽器即可管理整個(gè)網(wǎng)站。俱備完整的購物網(wǎng)站功能、結(jié)構(gòu)簡(jiǎn)單、容易使用、并設(shè)有促銷廣告和店標(biāo)自定義功能，操作簡(jiǎn)單，不需懂得太多的計(jì)算機(jī)知識(shí)，也無需制作復(fù)雜網(wǎng)頁，只需訂購這套系統(tǒng)，隨后，登錄到后臺(tái)，點(diǎn)點(diǎn)鼠標(biāo)，在線設(shè)置輕松設(shè)置各項(xiàng)功能及添加要出售的商品，家居網(wǎng)上商店就這樣輕松建設(shè)成功了，適合大眾的應(yīng)用。3．網(wǎng)站的需求分析3.1結(jié)構(gòu)化分析3.1.1數(shù)據(jù)流程在數(shù)據(jù)流程圖中，家居設(shè)計(jì)企業(yè)后臺(tái)處于頂層數(shù)據(jù)流程最高級(jí)。其次是該網(wǎng)站的前臺(tái)，前臺(tái)為消費(fèi)者提供各類信息。頂層數(shù)據(jù)流圖如圖所示。家居設(shè)計(jì)家居設(shè)計(jì)企業(yè)后臺(tái) 提供信息 提供服務(wù)企業(yè)后臺(tái)消費(fèi)者 消費(fèi)者3.2業(yè)務(wù)需求分析隨著整個(gè)社會(huì)的發(fā)展步伐，人們的生活在快節(jié)奏的基礎(chǔ)上越來越豐富和多元化。對(duì)于家居裝修，也提出了越來越多的需求。如今，時(shí)尚、個(gè)性、環(huán)保、舒適等等，這些詞已頻頻出現(xiàn)在住房裝修裝飾現(xiàn)場(chǎng)。但同時(shí)我們也看到，住房裝修裝飾對(duì)于一般大眾消費(fèi)者來說，是一項(xiàng)費(fèi)工、費(fèi)時(shí)、耗資巨大的工程而且絕大多數(shù)消費(fèi)者，對(duì)于住房的裝修、裝飾并無經(jīng)驗(yàn)可尋。如何既能購買到自己滿意的裝修裝飾材料，又能符合自己對(duì)住房裝修裝飾的品味，還能保證質(zhì)量與合理的價(jià)格，要做到同時(shí)滿足這些需求，對(duì)大部分人來說都不容易。而對(duì)于企業(yè)而言，要將這些市場(chǎng)潛力巨大的消費(fèi)需求變?yōu)橄M(fèi)現(xiàn)實(shí)，也始終是件費(fèi)思量的事。目前、各式各樣的專業(yè)在吸引著大學(xué)生，但是，要想真正了解一個(gè)專業(yè)的特點(diǎn)及其特色，必須要掌握一些具體、詳實(shí)的數(shù)據(jù)資料。我覺得電子商務(wù)特色專業(yè)網(wǎng)站就可以為那些對(duì)電子商務(wù)專業(yè)感興趣的人提供很好的資料。學(xué)校面對(duì)招生問題，也可以通過網(wǎng)站來大力宣傳電子商務(wù)專業(yè)特色。吸引更多的學(xué)子來選擇我們電子商務(wù)專業(yè)，在一定程度上為學(xué)院的招生提供了很好的幫助，更大力度的宣傳了我們電子商務(wù)特色專業(yè)。4.網(wǎng)站設(shè)計(jì)4.1概要設(shè)計(jì)1．確定網(wǎng)站主題及主頁面網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。這次的主題是我們組通過討論在老師題目中選擇的。主頁面緊緊結(jié)合家居用品這一主題，選擇清新色調(diào)。我們結(jié)合了自身的水平，能很好的檢驗(yàn)自己的優(yōu)缺點(diǎn)。2．搜集材料明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為網(wǎng)站制作的素材。我們從網(wǎng)上搜集了有關(guān)家居的圖片和視頻，及一些供參考家居網(wǎng)站。在淘寶、天貓、京東網(wǎng)站上做各種比較，選擇資料。3．規(guī)劃系統(tǒng)一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個(gè)性、有特色，具有吸引力。我們是家具用品購物系統(tǒng)，圍繞家具用品的方方面面，我們?cè)O(shè)計(jì)了家具系統(tǒng)的前臺(tái)操作。4．選擇制作工具這個(gè)網(wǎng)站我們選擇了課上學(xué)習(xí)的三個(gè)軟件，DreanmweaverCS3、DreanmweaverCS5與FlashPaper。5．制作系統(tǒng)材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個(gè)復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡(jiǎn)單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)站時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡(jiǎn)單后復(fù)雜，就是先設(shè)計(jì)出簡(jiǎn)單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問題時(shí)好修改。在制作網(wǎng)頁時(shí)要多靈活運(yùn)用模板，這樣可以大大提高制作效率。我們組應(yīng)用了網(wǎng)上的一個(gè)網(wǎng)站系統(tǒng)，對(duì)它進(jìn)行刪改，建設(shè)成一個(gè)家具購物系統(tǒng)，從而達(dá)到自己的要求。6．上傳測(cè)試網(wǎng)站制作完畢，最后要發(fā)布到Web服務(wù)器上，才能夠讓用戶觀看使用，現(xiàn)在上傳的工具有很多，有些網(wǎng)頁制作工具本身就帶有FTP功能，利用這些FTP工具，把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁存放服務(wù)器上。網(wǎng)站上傳以后，要在瀏覽器中打開自己的網(wǎng)站，逐頁逐個(gè)鏈接的進(jìn)行測(cè)試，發(fā)現(xiàn)問題，及時(shí)修改，然后再上傳測(cè)試。我們主要在IE上進(jìn)行測(cè)試，直至成功。4.4詳細(xì)設(shè)計(jì)4.4.1登錄版式登錄版式是一個(gè)用戶登錄和注冊(cè)的頁面，背景是一個(gè)家居圖片，通過輸入用戶名和密碼登錄到首頁頁面，新用戶先注冊(cè)再登錄。4.4.2首頁版式左上角有一個(gè)網(wǎng)站標(biāo)志家居設(shè)計(jì)，主頁面上有一個(gè)搜索條目，下方是各個(gè)風(fēng)格產(chǎn)品的鏈接，下邊主頁面是一個(gè)網(wǎng)站產(chǎn)品的圖片，用Flashpaper介紹了家居設(shè)計(jì)的發(fā)展，加了一個(gè)視頻關(guān)于網(wǎng)站產(chǎn)品理念環(huán)境的設(shè)計(jì)，整體色調(diào)是以清新淡雅為主4.4.3內(nèi)頁版式第一個(gè)頁面是家居圖片為背景，點(diǎn)擊下方的聯(lián)系我們進(jìn)入產(chǎn)品展示頁面用表格把各個(gè)產(chǎn)品展列，并標(biāo)明價(jià)格以及購買鏈接4.4.4網(wǎng)站首頁整體框架Logo搜索條目和導(dǎo)航鏈接鏈接導(dǎo)航鏈接產(chǎn)品系列產(chǎn)品系列視頻圖片展示Flashpaper關(guān)于商城發(fā)展的介紹5．實(shí)現(xiàn)（以代碼、圖的形式）5.1登錄頁面<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標(biāo)題文檔</title><styletype="text/css">#box{width:1308px;height:1000px;background:url(login-beijing.jpg)}*{margin:0;padding:0}li{list-style:none}a{text-decoration:none;}#li01{width:200px;height:276px;float:left;margin-left:213px;margin-top:156px;}#li01li{margin-bottom:44px;clear:left}#li01lia{display:block;text-align:right;color:#0FF;font-size:42px;font-family:"微軟雅黑";}#form{width:426px;height:323px;float:left;margin-top:221px;margin-left:13px;}#text{width:406px;height:42px;margin-top:44px;margin-bottom:55px;background:#FFF}#password{width:406px;height:42px;margin-top:px;margin-left:px;background:#FFF}.tijiao{display:block;margin-top:10px;margin-left:px;background:#FFF;font-size:30px;color:#C3F;widows:60px;height:30px;float:left;margin-right:20px}.zhuce{display:block;margin-top:10px;margin-left:px;background:#FFF;font-size:30px;color:#C3F;width:60px;height:30px;float:left}</style></head><body><divid="box"> <ulid="li01"> <li><a>用戶登錄</a></li> <li><a>姓名：</a></li><li><a>密碼：</a></li></ul> <formid="form"> <inputtype="text"id="text"><inputtype="password"id="password"><aclass="tijiao"href="首頁.html">提交</a><aclass="zhuce"href="zhuce.html">注冊(cè)</a></form></div></body></html>5.2注冊(cè)頁面<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標(biāo)題文檔</title><styletype="text/css">*{margin:0;padding:0;}a{text-decoration:none}li{list-style:none;}#box{width:1308px;height:1000px;background:url(login-beijing.jpg)}#li01{width:210px;height:px;float:left;margin-left:178px;margin-top:226px;}#li01li{margin-bottom:10px;text-align:right;}#li01lia{color:#0FF;font-family:"宋體";font-size:30px;}#form{width:210px;height:px;float:left;margin-left:px;margin-top:226px;}#text{width:210px;height:30px;margin-bottom:10px;}#number{width:210px;height:30px;margin-bottom:10px;}#password01{width:210px;height:30px;margin-bottom:10px;}#password02{width:210px;height:30px;margin-bottom:10px;}.tijiao{font-size:30px;font-family:"宋體";background:#FFF;display:block;width:60px;height:30px;margin-top:20px;color:#C3F;}#li02{width:px;height:px;float:left;margin-left:10px;margin-top:226px;}#li02li{width:px;margin-bottom:68px;margin-top:7px;}#li02lia{font-family:"宋體";font-size:16px;color:#000}</style></head><body><divid="box"><ulid="li01"> <li><a>請(qǐng)輸入用戶名：</a></li><li><a>輸入電話號(hào)碼：</a></li><li><a>請(qǐng)輸入密碼：</a></li><li><a>再次輸入密碼：</a></li></ul><formid="form"> <inputtype="text"id="text"><inputtype="text"id="number"><inputtype="password"id="password01"><inputtype="password"id="password02"><aclass="tijiao"href="login.html">提交</a></form><ulid="li02"> <li><a>*6~12位數(shù)字，字母，下劃線，漢字</a></li><li><a>*6~12位數(shù)字，字母，下劃線</a></li></ul></div></body></html>5.3首頁頁面<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標(biāo)題文檔</title><styletype="text/css">*{margin:0;padding:0}li{list-style:none}a{text-decoration:none}#box{width:1308px;height:715px;background:#ffffff;}#nav{width:1308px;height:35px;background:#ffffff}#nav.nav-left{width:205px;height:35px;float:left;margin-left:65px;background:url(images/left-beijing.jpg)}#nav.nav-leftul{width:205px;height:35px;clear:both;}#nav.nav-leftulli{font-family:"宋體";font-size:11px;}#nav.nav-leftullia{font-size:11px;font-family:"宋體"}#nav.nav-leftullia:hover{color:#ff4400}#nav.nav-left.user{width:51px;height:35px;line-height:35px;float:left;overflow:hidden;margin-right:16px;}#nav.nav-left.user.user01{clear:left;}#nav.nav-left.inf{width:42px;height:35px;line-height:35px;float:left;overflow:hidden;margin-right:16px;padding-left:21px;}#nav.nav-left.inf.inf01{clear:left}#nav.nav-left.phone{width:59px;height:35px;line-height:35px;float:left}#nav.nav-left.phone:hover{color:#ff4400}#nav.nav-right{width:570px;height:35px;float:left;margin-left:399px;background:url(images/rightbeijing_01.jpg)}#nav.nav-rightulli{width:px;height:35px;float:left;font-size:11px;font-family:"宋體";overflow:hidden}#nav.nav-rightullia{font-size:11px;font-family:"宋體"}#nav.nav-rightullia:hover{color:#ff4400}#nav.nav-right.right01{width:47px;height:35px;float:left;margin-right:33px;line-height:35px;}#nav.nav-right.right02{width:35px;height:35px;float:left;margin-right:48px;line-height:35px;padding-left:16px;}#nav.nav-right.right03{width:35px;height:35px;float:left;margin-right:32px;line-height:35px;padding-left:16px}#nav.nav-right.right04{width:47px;height:35px;float:left;margin-right:35px;line-height:35px;}#nav.nav-right.right05{width:47px;height:35px;float:left;margin-right:32px;line-height:35px;}#nav.nav-right.right06{width:47px;height:35px;float:left;margin-right:23px;line-height:35px;}#nav.nav-right.right07{width:47px;height:35px;float:left;line-height:35px;padding-left:14px;}#banner{width:1308px;height:656px;background:#ffffff;clear:both}.banner-left{width:249px;height:656px;float:left;}#banner.banner-lefta:hover{color:#ff4400}.left-01{width:190px;height:96px;background:url(logo.jpg);margin-left:59px;}.left-02{width:188px;height:487px;border:1pxsolid#C3F;margin-left:59px;margin-top:34px;}.left-02-01{width:188px;height:34px;background:#d7fdf0}h4{font-family:"宋體";font-size:15px;color:#30302e;display:block;width:94px;height:34px;margin-left:15px;line-height:34px;font-weight:normal;}.left-02-02{width:188px;height:23px;margin-top:7px;background:url(images/left-02-02-beijing.jpg)}.theam{display:block;width:57px;height:23px;float:left;margin-right:41px;margin-left:41px;font-family:"宋體";font-size:14px;color:#333331;line-height:23px;}.more{display:block;width:39px;height:21px;float:left;border:1pxsolid#e5e5e5;font-family:"宋體";font-size:11px;color:#333331;line-height:21px;text-align:center;}.left-02-03{width:188px;height:113px;clear:both;margin-top:11px;}.left-02-03.left-02-03-01{width:48px;height:106px;float:left;margin-left:14px;margin-right:20px;}.left-02-03.left-02-03-01a{font-family:"宋體";font-size:12px;color:#30302e;display:block;margin-bottom:12px;}.left-02-03.left-02-03-02{width:36px;height:106px;float:left;margin-right:22px;}.left-02-03.left-02-03-02a{font-family:"宋體";font-size:12px;color:#30302e;display:block;margin-bottom:12px;}.left-02-03.left-02-03-03{width:24px;height:106px;float:left}.left-02-03.left-02-03-03a{font-family:"宋體";font-size:12px;color:#30302e;display:block;margin-bottom:12px;}.left-02-04{width:188px;height:19px;background:url(images/02-03beijing.jpg);margin-top:25px;}.left-02-04a{font-family:"宋體";font-size:14px;color:#333331;display:block;width:57px;height:19px;line-height:19px;margin-left:41px}.left-02-05{width:188px;height:113px;clear:both;margin-top:11px;}.left-02-05.left-02-05-01{width:48px;height:106px;float:left;margin-left:14px;margin-right:20px;}.left-02-05.left-02-05-01a{font-family:"宋體";font-size:12px;color:#30302e;display:block;margin-bottom:12px;}.left-02-05.left-02-05-02{width:36px;height:106px;float:left;margin-right:22px;}.left-02-05.left-02-05-02a{font-family:"宋體";font-size:12px;color:#30302e;display:block;margin-bottom:12px;}.left-02-05.left-02-05-03{width:24px;height:106px;float:left}.left-02-05.left-02-05-03a{font-family:"宋體";font-size:12px;color:#30302e;display:block;margin-bottom:12px;}.left-03{width:188px;height:29px;border:1pxsolid#d4e3f8;margin-left:59px;margin-top:4px;}.banner-right{width:990px;height:626px;margin-left:10px;float:left;margin-top:30px;}.right-top{width:990px;height:134px;clear:both;border-bottom:2pxsolid#C3F;}.wangzhan{width:150px;height:px;clear:both;margin-left:50px;}.wangzhanulli{width:50px;height:25px;float:left;line-height:25px;}.wangzhanullia{font-family:"宋體";font-size:12px;color:#2f2f2f;display:block;width:50px;height:25px;text-align:center}.wangzhanullia:hover{background:#ff5601;color:#f1d4c4;}.sousuo{width:709px;height:34px;border:3pxsolid#C3F;clear:both;background:#C3F;}#input{width:618px;height:34px;float:left;border:none}.right{width:46px;height:19px;float:left;margin-top:7px;}.righta{display:block;color:#f7ffff;font-size:19px;font-family:"宋體";}.li01{width:669px;height:12px;margin-left:50px;margin-top:8px;}.li01li{margin-right:9px;float:left}.li01lia{font-family:"宋體";font-size:12px;color:#686667;}.li01lia:hover{color:#ff3a00;}.li02{width:779px;height:16px;margin-left:23px;margin-top:24px;clear:both}.li02li{float:left;margin-right:28px;}.li02lia{font-size:16px;color:#323232;font-family:"宋體";}.li02lia:hover{color:#e94b04;}.right-bottom{width:990px;height:480px;clear:both;}.right-01{width:400px;height:480px;float:left;}.right-01-01{width:400px;height:240px;clear:both}.right-01-02{width:400px;height:240px;clear:both}.right-02{width:590px;height:480px;float:left;}.right-02ul{width:590px;height:480px;clear:both;overflow:hidden;position:relative}.right-02ulli{float:left}.right-02ulliimg{position:absolute;}#footor{width:1308px;height:24px;background:#ffffff;clear:both}.in{width:140px;height:24px;float:right;}.ina{width:140px;height:24px;line-height:24px;display:block;font-family:"宋體";font-size:20px;color:#C3F}</style><scriptsrc="Scripts/swfobject_modified.js"type="text/javascript"></script><scripttype="text/javascript"src="jquery-1.11.1.js"></script><scripttype="text/javascript">$(function(){ setInterval(b,2000); varn=0; functionb(){ $("#banner.right-02img:eq("+n+")").fadeIn().siblings().fadeOut(); n++; n=n<4?n:0; }})</script></head><body><divid="box"><divid="nav"><divclass="nav-left"><ul><liclass="user"><ulclass="user01"><li>切換賬戶</li><li>退出</li></ul></li><liclass="inf"><a>消息</a><ulclass="inf01"><li>未讀新消息</li></ul></li><liclass="phone">手機(jī)逛淘寶</li></ul></div><divclass="nav-right"> <ul> <liclass="right01"> <a>我的淘寶</a> <ulclass="right01-"> <li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li></ul></li><liclass="right02"> <a>購物車</a> <ulclass="right02-"> <li>查看購物車</li><li>用戶</li></ul></li><liclass="right03"> <a>收藏夾</a> <ulclass="right03-"> <li>我的收藏</li><li>用戶</li></ul></li><liclass="right04"> <a>商品分類</a></li><liclass="right05"> <a>賣家中心</a> <ulclass="right05-"> <li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li></ul></li><liclass="right06"> <a>聯(lián)系客服</a></li><liclass="right07"> <a>網(wǎng)站導(dǎo)航</a> <ulclass="right07-"> <li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li><li>我的淘寶</li></ul></li></ul></div></div><divid="banner"> <divclass="banner-left"> <divclass="left-01"></div><divclass="left-02"> <divclass="left-02-01"> <h4>特色家居設(shè)計(jì)</h4></div><divclass="left-02-02"> <aclass="theam">家居風(fēng)格</a><aclass="more">更多</a></div><divclass="left-02-03"> <ulclass="left-02-03-01"> <li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li></ul><ulclass="left-02-03-02"> <li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li></ul><ulclass="left-02-03-03"> <li><ahref="#">燈具</a></li><li><ahref="#">餐桌</a></li><li><ahref="#">沙發(fā)</a></li><li><ahref="#">茶幾</a></li><li><ahref="#">書架</a></li></ul></div><divclass="left-02-04"> <a>特色家居</a></div><divclass="left-02-05"> <ulclass="left-02-05-01"> <li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li><li><ahref="#">現(xiàn)代風(fēng)格</a></li></ul><ulclass="left-02-05-02"> <li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li><li><ahref="#">歐美風(fēng)</a></li></ul><ulclass="left-02-05-03"> <li><ahref="#">燈具</a></li><li><ahref="#">餐桌</a></li><li><ahref="#">沙發(fā)</a></li><li><ahref="#">茶幾</a></li><li><ahref="#">書架</a></li></ul></div></div><divclass="left-03"></div></div><divclass="banner-right"> <divclass="right-top"> <divclass="wangzhan"><divclass="sousuo"><inputtype="text"id="input"><divclass="right"> <a>搜索</a></div></div> </div><divclass="li02"><ul> <li><a>燈具</a></li> <li><a>現(xiàn)代風(fēng)</a></li> <li><a>沙發(fā)</a></li> <li><a>歐式風(fēng)格</a></li><li><a>現(xiàn)代風(fēng)格</a></li><li><a>餐桌</a></li><li><a>田園風(fēng)</a></li><li><a>英氏風(fēng)</a></li><li><a>古典風(fēng)</a></li><li><a>床上用品</a></li></ul></div></div><divclass="right-bottom"> <divclass="right-01"> <divclass="right-01-01"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="400"height="240"id="FLVPlayer"><paramname="movie"value="FLVPlayer_Progressive.swf"/><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><paramname="scale"value="noscale"/><paramname="salign"value="lt"/><paramname="FlashVars"value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=%E5%AE%B6%E5%B1%85%E8%AE%BE%E8%AE%A1&autoPlay=false&autoRewind=false"/><paramname="swfversion"value="8,0,0,0"/><!--此param標(biāo)簽提示使用FlashPlayer6.0r65和更高版本的用戶下載最新版本的FlashPlayer。如果您不想讓用戶看到該提示，請(qǐng)將其刪除。--><paramname="expressinstall"value="Scripts/expressInstall.swf"/><!--下一個(gè)對(duì)象標(biāo)簽用于非IE瀏覽器。所以使用IECC將其從IE隱藏。--><!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="FLVPlayer_Progressive.swf"width="400"height="240"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><paramname="scale"value="noscale"/><paramname="salign"value="lt"/><paramname="FlashVars"value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=%E5%AE%B6%E5%B1%85%E8%AE%BE%E8%AE%A1&autoPlay=false&autoRewind=false"/><paramname="swfversion"value="8,0,0,0"/><paramname="expressinstall"value="Scripts/expressInstall.swf"/><!--瀏覽器將以下替代內(nèi)容顯示給使用FlashPlayer6.0和更低版本的用戶。--><div><h4>此頁面上的內(nèi)容需要較新版本的AdobeFlashPlayer。</h4><p><ahref="/go/getflashplayer"><imgsrc="/images/shared/download_buttons/get_flash_player.gif"alt="獲取AdobeFlashPlayer"/></a></p></div><!--[if!IE]>--></object><!--<![endif]--></object> </div><divclass="right-01-02"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="400"height="240"id="FlashID"title="jiaju"><paramname="movie"value="家居設(shè)計(jì).swf"/><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><paramname="swfversion"value=""/><!--此param標(biāo)簽提示使用FlashPlayer6.0r65和更高版本的用戶下載最新版本的FlashPlayer。如果您不想讓用戶看到該提示，請(qǐng)將其刪除。--><paramname="expressinstall"value="Scripts/expressInstall.swf"/><!--下一個(gè)對(duì)象標(biāo)簽用于非IE瀏覽器。所以使用IECC將其從IE隱藏。--><!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="家居設(shè)計(jì).swf"width="800"height="600"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><paramname="swfversion"value=""/><paramname="expressinstall"value="Scripts/expressInstall.swf"/><!--瀏覽器將以下替代內(nèi)容顯示給使用FlashPlayer6.0和更低版本的用戶。--><div><h4>此頁面上的內(nèi)容需要較新版本的AdobeFlashPlayer。</h4><p><ahref="/go/getflashplayer"><imgsrc="/images/shared/download_buttons/get_flash_player.gif"alt="獲取AdobeFlashPlayer"width="112"height="33"/></a></p></div><!--[if!IE]>--></object><!--<![endif]--></object></div></div><divclass="right-02"> <ul> <li><imgsrc="image22.jpg"/></li><li><imgsrc="image23.jpg"/></li><li><imgsrc="image24.jpg"/></li><li><imgsrc="image25.jpg"/></li><li><imgsrc="image26.jpg"/></li></ul></div></div></div></div></div></div></div><divid="footor"> <divclass="in"> <ahref="index.html">點(diǎn)擊進(jìn)入...</a></div></div></div><scripttype="text/javascript">swfobject.registerObject("FLVPlayer");swfobject.registerObject("FlashID");</script></body></html>5.4<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標(biāo)題文檔</title><styletype="text/css">*{margin:0;padding:0;}a{text-decoration:none;}li{list-style:none;}#box{width:1600px;height:2021px;background:#f9f6ef;}#nav{width:975px;height:142px;background:#0C0;margin-left:309px;}#nav.nav-top{width:975px;height:29px;border-bottom:1pxsolid#cbcbcb;background:#f6f6f6;}#nav.nav-topul{width:319px;height:20px;margin-left:px;margin-top:4px;/*border:1pxsolid#000;*/margin-left:600px;}#nav.nav-topulli{float:left;height:20px;margin-right:10px;}#nav.nav-topullia{font-family:"微軟雅黑";color:#828282;font-size:11px;}#nav.nav-topullia:hover{color:#730109;}#nav.nav-topulli.qin{padding-left:px;background:leftno-repeat;width:82px;}#nav.nav-topulli.qina{display:block;width:82px;height:15px;}#nav.nav-topulli.che{width:62px;height:15px;padding-left:20px;background:leftno-repeaturl(images/nav-li-beijing01_03.gif)}#nav.nav-topulli.chea{display:block;width:62px;height:12px;}#nav.nav-topulli.yonghu{width:53px;height:15px;padding-left:10px;backg