企業(yè)網(wǎng)頁設(shè)計報告

..2017—2018學(xué)年第一學(xué)期期末考試"網(wǎng)頁設(shè)計與制作"實(shí)踐考核企業(yè)設(shè)計說明書工程名稱：萬豪裝飾企業(yè)設(shè)計專業(yè)：網(wǎng)絡(luò)工程學(xué)號：***********姓名：******任課教師：艷2017年12月26日考核工程及要求工程：萬豪裝飾企業(yè)設(shè)計考核要點(diǎn)系統(tǒng)設(shè)計：完成完整的靜態(tài)主題明確、容安康；頁面布局合理，視覺效果好；網(wǎng)頁容樣式設(shè)計合理；代碼書寫符合標(biāo)準(zhǔn)規(guī)；具備實(shí)際應(yīng)用價值與創(chuàng)新。2．作品要求學(xué)生根據(jù)自選的主題完成設(shè)計，并撰寫設(shè)計說明書。目錄185931選題的目的與意義 1117091.1選題目的 1297291.2選題意義 154402選用的技術(shù)及技術(shù)背景 152952.1選用的技術(shù) 1284002.2技術(shù)背景 150443網(wǎng)頁首頁的構(gòu)造設(shè)計 249304詳細(xì)設(shè)計 3291144.1首頁設(shè)計 369504.2子網(wǎng)頁設(shè)計 12189135工程測試與瀏覽器兼容性 1350746總結(jié) 1319617附錄 14..1選題的目的與意義1．1選題目的制作一個好的網(wǎng)頁需要經(jīng)過這些步驟：確定主題和功能、搜集材料、規(guī)劃、選擇適宜的制作工具、制作網(wǎng)頁。為了可以檢驗(yàn)自己和提高對頁面設(shè)計的認(rèn)識以及對根底知識的掌握和綜合利用，我選擇了萬豪裝飾企業(yè)的設(shè)計。1.2選題意義網(wǎng)頁設(shè)計與制作是一門動手能力很強(qiáng)的課程，掌握知識的關(guān)鍵在于實(shí)踐，這次選題，最重要的意義在于走出書本，通過一個小工程，培養(yǎng)我們的具有一定的專業(yè)素質(zhì)，和綜合應(yīng)用的能力。現(xiàn)如今很多網(wǎng)頁都具有商業(yè)價值，因此一個好的網(wǎng)頁必須給人舒適的感覺，通過自己的設(shè)計和制作，不僅讓我們發(fā)現(xiàn)自己專業(yè)知識上的缺乏，也能加強(qiáng)我們對網(wǎng)頁各個細(xì)節(jié)的優(yōu)化，以到達(dá)更加好的效果，加強(qiáng)我們的專業(yè)設(shè)計能力。2選用的技術(shù)及技術(shù)背景2.1選用的技術(shù)HTML、CSS、JavaScript、PS2.2技術(shù)背景HTML:又叫超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用。從HTML被創(chuàng)造開場，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制。超級文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，擁有：簡易性、可擴(kuò)展性、平臺無關(guān)性、通用性等特點(diǎn)。是一種標(biāo)記語言。CSS:層疊樣式表(英文全稱：CascadingStyleSheets)是一種用來表現(xiàn)HTML〔標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用〕或XML〔標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集〕等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)展格式化。JavaScript：JavaScript是一種直譯式腳本語言，是一種動態(tài)類型、弱類基于原型的語言，置支持類型。是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。PS:AdobePhotoshop，簡稱"PS〞，是由Adobe

Systems開發(fā)和發(fā)行的圖像處理軟件。主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)展圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。從功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及功能色效制作局部等。圖像編輯是圖像處理的根底，可以對圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等；也可進(jìn)展復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等。3網(wǎng)頁首頁的構(gòu)造設(shè)計網(wǎng)頁構(gòu)造設(shè)計是設(shè)計的重要組成局部。這次萬豪裝飾企業(yè)的網(wǎng)頁的首頁構(gòu)造設(shè)計采用扁平構(gòu)造的物理構(gòu)造，因?yàn)檫@是個小型的網(wǎng)頁設(shè)計。對于裝飾公司的首頁，最重要的是吸引瀏覽者的眼球，把公司的最新動態(tài)、聯(lián)系方式、優(yōu)秀作品、優(yōu)秀團(tuán)隊(duì)都展現(xiàn)出來。還要能夠公司方方面面的具體信息：首頁、關(guān)于我們、新聞中心、裝飾實(shí)例、萬豪團(tuán)隊(duì)、裝飾指南、一品管家、宅急修、裝修訂單。一個企業(yè)的首頁設(shè)計，需要將最新的產(chǎn)品放在網(wǎng)頁中最顯眼的位置，還要將特色地成品設(shè)計輪流展播，以便訪客能夠很好地了解企業(yè)的文化。網(wǎng)頁上一定要明確的標(biāo)注聯(lián)系方式。網(wǎng)頁還添加購物車功能，方便客戶收藏自己喜歡的設(shè)計。先用PS進(jìn)展網(wǎng)頁模塊的規(guī)劃，選定好顏色地搭配，測量好各個模塊的大小。接下來再用HTML設(shè)計網(wǎng)頁。通過分析，我規(guī)劃出模塊大致分為以下四局部：如圖1.1圖1.1萬豪企業(yè)網(wǎng)頁的構(gòu)造設(shè)計4詳細(xì)設(shè)計4.1首頁設(shè)計首頁圖片效果圖：1、第一局部：網(wǎng)頁的頂部，包含企業(yè)logo，頂部導(dǎo)航，把他們放在一個head盒子里面大小為：1366*85局部css樣式：.head{width:1366px;height:85px;background:url(../img/topimg.jpg)no-repeatcentertop;position:relative; }.head.right-link{width:260px;height:85px;margin-bottom:4px;position:absolute;top:0;right:0;}效果如以下圖：圖4.12、第二局部：企業(yè)的導(dǎo)航設(shè)計一個nava盒子，為每個小li標(biāo)簽設(shè)置大小134*40：局部css樣式：#nava{ width:1366px; height:40px;}#nava#nav{ width:1366px; height:40px; margin:0; margin-bottom:4px; font-family:"微軟雅黑";}#nava#navulli{ float:left;/*//讓他們橫排*/ position:relative; width:134.6px; height:40px; margin-top:0px; margin-left:2px; background-color:#ccc;}#nava#navullia{ display:block;/*//超a是行元素,沒寬高什么的*//*padding:013.92578px;*/ /*width:90px;*/ text-align:center; height:40px; line-height:40px;/*行高和line-height相等那么居中*/ text-decoration:none; color:#000; /*font-size:14px;*/}#nava#navullia:hover{ background-color:#fff; color:#000;}#nava#navulli:hovera{ background-color:#fff; color:#000;}#nava#navulliulli{ width:89px; float:none;/*不讓他們橫排*/ background-color:#fff; /*margin-top:2px;*/}效果圖如下：圖4.23、第三局部：容由于容比擬多，而且大局呈現(xiàn)左右分布，所以先建立一個content的大盒子，再建立一個conleft和一個conright的盒子，通過子決父相，讓conright盒子在content盒子的右局部。局部css樣式：#content{width:1366px;position:relative;height:1300px;}#content#conleft{position:absolute;left:0;}#content#conright{width:340px;height:1280px;/*border:1pxsoliddarkgreen;*/margin-left:30px;border-left:1pxsolid#ccc;position:absolute;right:0;top:10px;}〔1〕Conleft包含成功案例、新聞中心、團(tuán)隊(duì)風(fēng)采三局部：成功案例局部：寫在success盒子，大小為：957*483，文字局部放在盒子sc1中，圖片放在scimg盒子里面效果圖如下：圖4.3新聞中心局部：是左右布局，先用css固定news盒子大?。?75*376，再將盒子news_left、news_right放在盒子里面。news_left里面有輪播圖，通過css樣式和js實(shí)現(xiàn)輪播，而且這局部展出兒童房設(shè)計，再添加一個盒子寫出相應(yīng)文字。news_right，為了實(shí)現(xiàn)比擬好的效果，我在里面建立兩個盒子一個放標(biāo)題，一個方容，通過css實(shí)現(xiàn)比擬美觀的效果。輪播js代碼見附錄，效果圖如下：圖4.4團(tuán)隊(duì)風(fēng)采局部：我設(shè)計了兩個大盒子：conleft_bet和tem，conleft_bet主要寫團(tuán)隊(duì)風(fēng)采，和實(shí)現(xiàn)盒子的圓弧角度。為了實(shí)現(xiàn)左右分布，tem里面存在三個大盒子，前兩個盒子在左邊上下分布，在tem的左邊，右邊通過子決父相放另外裝有容的兩個盒子。最終實(shí)現(xiàn)效果如下:圖4.5實(shí)現(xiàn)上面效果的局部css樣式：#content#news#news_left{position:absolute;width:476px;margin-left:14px;margin-top:13px;}#content#news#news_right{ position:absolute; right:0; width:445px; margin-top:40px;}#content.conleft_bet{width:957px;position:relative;border-bottom:1pxsolid#ccc;height:30px;margin-left:14px;}.name{margin-top:5px;}.tem{width:1000px;height:380px;/*border:1pxsolid#0000FF;*/position:relative;}〔2〕Conright包含裝修須知、在線調(diào)查、聯(lián)系我們、友情四部。這局部左右布局比擬少，因此大局部都是上下構(gòu)造，命名也是直接以top1-8。裝修須知：有兩個盒子—top1大小320*44，top2大小320*190，在線調(diào)查：top3大小320*37，top4大小340*52.67，top5大小340*146.67，top6大小280*30.67,效果分別如下：圖4.6局部代碼css樣式如下：#content#conright.top1{width:320px; height:40px;margin-left:10px;margin-top:20px;border-bottom:1pxdashed#CCCCCC;padding-bottom:3px;}.t1{font-size:19px;font-weight:bold;}聯(lián)系我們：將圖片設(shè)為背景圖，圖面容為聯(lián)系我們及聯(lián)系方式、、。將這一模塊放到網(wǎng)頁左側(cè)明顯的位置，以便訪客能夠及時聯(lián)系我們。效果圖如下：圖4.7局部代碼如下：.top6{width:280px;margin-top:30px;margin-left:80px;}.top6input{width:80px;height:30px;border-radius:6px;}.top7{width:300px;margin-top:60px;margin-left:10px;}友情：建立一個top8盒子，盒子里面是友情局部，將其他企業(yè)圖片附上，放置到盒子中，右半局部的四個盒子運(yùn)用子絕父相方式。效果圖如下：圖4.8局部代碼如下：.top8{width:320px;margin-top:50px;margin-left:15px;}.top8.log{margin-top:40px;margin-bottom:30px;}建立一個fo_con盒子，里面容為信息，和其他事項(xiàng)。效果圖如下：Css樣式：#fo_con{height:150px;width:1366px;text-align:center;}#fo_con.middle1{margin-top:10px;color:#797979;font-size:8px;}圖4.94.2子網(wǎng)頁設(shè)計子網(wǎng)頁，我認(rèn)為可以更文藝一些，可能會引起顧客共鳴，點(diǎn)擊首頁中的關(guān)于我們，觀看優(yōu)秀作品和它們背后的故事。效果圖如下：圖4.105工程測試與瀏覽器兼容性工程測試：通過在谷歌測試，縮小67%以上各個功能正常，但是縮小50%以后，工程發(fā)生重疊。通過火狐瀏覽器測試，縮放100%以上及以下都顯示正常。用IE縮放顯示也正常。瀏覽器兼容性：瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。在的設(shè)計和制作中，做好瀏覽器兼容，才能夠讓在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發(fā)和設(shè)計，瀏覽器對標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗(yàn)。本工程網(wǎng)絡(luò)兼容性較好，在主流瀏覽器均能正常顯示。但是谷歌瀏覽器測試時縮小時會顯示不正常。6總結(jié)通過這次企業(yè)的設(shè)計，剛開場有點(diǎn)無從下手，后來靜下心來，我把設(shè)計的網(wǎng)頁圖片好好看了看，仔細(xì)分析了一下。開場給網(wǎng)頁大致固定幾個大盒子。網(wǎng)頁版面的設(shè)計各個局部用什么實(shí)現(xiàn)、位置放在哪里都是寫網(wǎng)頁的時候的很重要也是很需要解決的事情。我的網(wǎng)頁左右布局大大小小的很多，如果里面的盒子太大了，就會顯示不正常，放不到右邊。在我的網(wǎng)頁中還有三局部上下有一定間距的文字，剛開場，我直接用p標(biāo)簽寫的，但是，上下間距不是想要的效果，后來我改為了盒子實(shí)現(xiàn)。因?yàn)楹凶訉τ谠O(shè)置位置，距離等都是很方便的。再做輪播的時候這是我的弱項(xiàng)，后來經(jīng)過慢慢看以前的知識，實(shí)現(xiàn)了輪播。這個輪播處理比擬困難的是圖片和輪播塊都能正常輪播。到最后還是樣式的事，我的輪播塊寫的太小了，而每一個li和間距加起來超過了輪播塊的大小，因此被弄到了下面一行。總之我認(rèn)為樣式的設(shè)置是需要仔細(xì)分析的問題，不能想到什么就寫什么，否那么可能不只是頁面不好看，有可能也會影響到別的容。另外，我認(rèn)為我們制作網(wǎng)頁的時候最好是把每個模塊分開寫，因?yàn)閯傞_場我沒有分開寫，后面自己開場感覺代碼很亂，而且網(wǎng)頁也看著沒那么好看，后來我每局部都寫了大盒子，調(diào)節(jié)每個模塊之間關(guān)系的時候，只需要動大盒子就好了，這樣不僅提高效率，也讓我自己容易理解。附錄1、HTML代碼<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"type="text/css"href="css/wanhao.css"/> <linkrel="stylesheet"type="text/css"href="css/whright.css"/> <linkrel="stylesheet"type="text/css"href="css/lunbo.css"/> <scriptsrc="js/lunbo.js"type="text/javascript"charset="utf-8"></script> </head> <body> <divclass="head"><!--<divid="img1">--><!--<imgsrc="img/topimg.jpg"width="1366px"height="85px"/>--><divclass="right-link";><ahref='#'>參加收藏</a><span>|</span><ahref="#none">投訴建議</a><span>|</span><ahref="#">聯(lián)系我們</a></div> </div> <divid="nava"> <divid="nav"> <ul> <li><ahref="#">首頁</a></li> <li><ahref="introduction.html">關(guān)于我們</a></li> <li><ahref="#">新聞中心</a></li> <li><ahref="#">裝飾實(shí)例</a></li> <li><ahref="#">萬豪團(tuán)隊(duì)</a></li> <li><ahref="#">裝飾指南</a> </li> <li><ahref="#">一品管家</a></li> <li><ahref="#">宅急修</a></li> <li><ahref="#">裝修訂單</a></li> <li></li> </ul> </div> </div> <divid="content"> <divid="conleft"> <divid="success"> <divclass="sc1"><spanclass="sucf1">成功案例</span><span>  </span><spanclass="sucf2">SuccessCase</span></div><divclass="scimg"><imgsrc="img/succ.jpg"width="915px"height="432px"/></div></div><divid="news"><divid="news_left"><divclass="news_left_img"><divclass="banner"><divclass="banner_pic"id="banner_pic"> <divclass="current"><imgsrc="img/ertong.jpg"width="454px"height="314"/></div><divclass="pic"><imgsrc="img/lunbo2.jpg"width="454px"height="314"/></div><divclass="pic"><imgsrc="img/lunbo3.jpg"width="454px"height="314"/></div><divclass="pic"><imgsrc="img/lunbo4.jpg"width="454px"height="314"/></div><divclass="pic"><imgsrc="img/lunbo5.jpg"width="454px"height="314"/></div> </div><olid="button"> <liclass="crurrent">1</li> <liclass="but">2</li> <liclass="but">3</li> <liclass="but">4</li><liclass="but">5</li></ol></div><divclass="news_left_word">萬振逍遙苑"蝶戀花〞樣板房——兒童房</div> </div></div><divid="news_right"><divid="news_right_center"><divclass="xinwen"><imgsrc="img/jiantou.jpg"/></div><divclass="news_right_center_up"><span>  新聞中心</span></div> <divclass="xinwenmore"><ahref="#">>MORE</a></div></div><divclass="news_right_content"><divclass="newbox">><ahref="#">萬豪空間裝飾榮獲市裝協(xié)多項(xiàng)榮譽(yù) 〔03-25〕</a></div><divclass="newbox">><ahref="#">萬豪裝飾安康裝飾講堂首戰(zhàn)告捷 〔03-24〕</a></div><divclass="newbox">><ahref="#">安康裝飾有知可識 〔03-18〕</a></div><divclass="newbox">><ahref="#">文化與設(shè)計 〔03-13〕</a></div><divclass="newbox">><ahref="#">宋春紅應(yīng)邀中科大09家居學(xué)術(shù)報告 〔03-12〕</a></div><divclass="newbox">><ahref="#">中國科學(xué)技術(shù)大學(xué)09家居學(xué)術(shù)報告 〔03-25〕</a></div><divclass="newbox">><ahref="#">中國科學(xué)技術(shù)大學(xué)09家居學(xué)術(shù)報告 〔03-25〕</a></div> </div> </div> </div><divclass="conleft_bet"><divclass="conleft_bet_left">團(tuán)隊(duì)風(fēng)采</div><divclass="teammore"><ahref="#">>MORE</a></div></div><divclass="tem"><divclass="box1"><divclass="bimg"> <imgsrc="img/pople.jpg"/></div><divclass="bwrd"><divclass="name">：龔成慧</p></div><divclass="name">職務(wù)：首席設(shè)計師</p></div><divclass="name">主要作品：都市豪庭、柏景灣、中</div><divclass="name">央花園、蜀山明筑別墅、東?；▓@空中</div><divclass="name">別墅</div> </div></div> <divclass="box2"> <divclass="bimg"><imgsrc="img/pople.jpg"/> </div><divclass="bwrd"><divclass="name">：龔成慧</p></div><divclass="name">職務(wù)：首席設(shè)計師</p></div><divclass="name">主要作品：都市豪庭、柏景灣、中</div><divclass="name">央花園、蜀山明筑別墅、東海花園空中</div><divclass="name">別墅</div></div></div><divclass="temr"><divclass="boxr"><divclass="bimg"><imgsrc="img/pople.jpg"/> </div><divclass="bwrd"><divclass="name">：龔成慧</p></div><divclass="name">職務(wù)：首席設(shè)計師</p></div><divclass="name">主要作品：都市豪庭、柏景灣、中</div><divclass="name">央花園、蜀山明筑別墅、東海花園空中</div><divclass="name">別墅</div></div></div><divclass="boxr"> <divclass="bimg"><imgsrc="img/pople.jpg"/> </div><divclass="bwrd"><divclass="name">：龔成慧</p></div><divclass="name">職務(wù)：首席設(shè)計師</p></div><divclass="name">主要作品：都市豪庭、柏景灣、中</div><divclass="name">央花園、蜀山明筑別墅、東?；▓@空中</div><divclass="name">別墅</div></div></div></div></div></div><divid="conright"><divclass="top1"><imgsrc="img/conrig1.jpg"/><spanclass="t1">裝修須知</span></div><divclass="top2"><divclass="whwd">> <ahref="#">萬豪空間裝飾榮獲市裝協(xié)多項(xiàng)榮譽(yù)</a></div><divclass="whwd">> <ahref="#">萬豪裝飾安康裝飾講堂首戰(zhàn)告捷</a></div><divclass="whwd">> <ahref="#">安康裝飾有知可識</a></div><divclass="whwd">> <ahref="#">文化與設(shè)計</a></div><divclass="whwd">> <ahref="#">宋春紅應(yīng)邀中科大09家居學(xué)術(shù)報告</a></div><divclass="more">>><ahref="#">更多</a></div></div><divclass="top3"><imgsrc="img/con2.jpg"width="40px"height="27px"/> 在線調(diào)查</div><divclass="top4"><divclass="tpo">請問通過什么途徑訪問到我們</div><divclass="tpo">的？ </div></div><divclass="top5"><divclass="inp1"><inputtype="radio"/>網(wǎng)絡(luò)搜索</div><divclass="inp1"><inputtype="radio"/>友情</div><divclass="inp1"><inputtype="radio"/>新聞報紙等媒體</div><divclass="inp1"><inputtype="radio"/>通過別人介紹</div><divclass="inp1"><inputtype="radio"/>其他</div></div> <divclass="top6"><inputtype="submit"value="投票"/> <inputtype="button"value="查看"/></div><divclass="top7"><imgsrc="img/lianxi.jpg"width="330px"/></div><divclass="top8"><divclass="log"><ahref="#"><imgsrc="img/iulog1.jpg"/></a><ahref="#"><imgsrc="img/iulog2.jpg"/></a></div> <divclass="log"><ahref="#"><imgsrc="img/iulog3.jpg"/></a><ahref="#"><imgsrc="img/iulog4.jpg"/></a></div><divclass="log"><ahref="#"><imgsrc="img/iulog5.jpg"/></a><ahref="#"><imgsrc="img/iulog6.jpg"/></a></div><divclass="log"><ahref="#"><imgsrc="img/iulog7.jpg"/></a><ahref="#"><imgsrc="img/iulog8.jpg"/></a> </div> </div> </div> </div> <divid="fo_con"> <imgsrc="img/midd.jpg"height="60px"/> <divclass="middle1"> Copyright ?2009 .wanhao.. ALLRightsReserved所有 · 萬豪裝飾 </div> <divclass="middle1">建議使用1024*768以上的屏幕分辨率和6.0以上的IE來訪問本站 技術(shù)支持：創(chuàng)想網(wǎng)絡(luò) </div> </div> </body></html>2、Js代碼：window.onload=function(){ varcurrent_index=0; vartimer=setInterval(autoChange,1000); varbutton_lis=document.getEleme