畢業(yè)答辯網(wǎng)頁設(shè)計(jì)

畢業(yè)答辯匯報(bào)人：匯報(bào)日期：目錄Part01/網(wǎng)頁設(shè)計(jì)緒論

Part02/網(wǎng)站的總體設(shè)計(jì)

Part03/網(wǎng)頁的具體設(shè)計(jì)Part04/兼容性測(cè)試和維護(hù)

01·網(wǎng)頁設(shè)計(jì)緒論相對(duì)傳統(tǒng)的平面設(shè)計(jì)來說，網(wǎng)頁設(shè)計(jì)具有更多的新特性和更多的表現(xiàn)手段，借助網(wǎng)絡(luò)這一平臺(tái)，將傳統(tǒng)設(shè)計(jì)與電腦、互聯(lián)網(wǎng)技術(shù)相結(jié)合，實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)的創(chuàng)新應(yīng)用與技術(shù)交流。網(wǎng)頁設(shè)計(jì)是傳統(tǒng)設(shè)計(jì)與信息、科技和互聯(lián)網(wǎng)結(jié)合而產(chǎn)生的，是交互設(shè)計(jì)的延伸和發(fā)展，是在新媒介和新技術(shù)支持下的一個(gè)全新的設(shè)計(jì)創(chuàng)作領(lǐng)域。課題研究分析定義網(wǎng)站(Website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（標(biāo)準(zhǔn)通用標(biāo)記語言）等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。網(wǎng)站是在互聯(lián)網(wǎng)上擁有域名或地址并提供一定網(wǎng)絡(luò)服務(wù)的主機(jī)，是存儲(chǔ)文件的空間，以服務(wù)器為載體。人們可通過瀏覽器等進(jìn)行訪問、查找文件，也可通過遠(yuǎn)程文件傳輸(FTP)方式上傳、下載網(wǎng)站文件。網(wǎng)站是一種溝通工具，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站簡(jiǎn)述我的網(wǎng)站由主頁以及子網(wǎng)頁構(gòu)成，我的網(wǎng)頁不需要高深的技術(shù)，意在了解一下智能家居安防系統(tǒng)的構(gòu)成以及一些生活中常見的傳感器的介紹。網(wǎng)站簡(jiǎn)述首頁 智能家居一個(gè)簡(jiǎn)單的介紹智能家居部分產(chǎn)品 展示傳感器新聞中心 物聯(lián)網(wǎng)的相關(guān)知識(shí)起源關(guān)于我們 信息聯(lián)系我 方便聯(lián)系到我眾所周知，當(dāng)前的生活之中傳感器處處可見，智能家居這個(gè)詞也在各個(gè)領(lǐng)域之中出現(xiàn)的次數(shù)越來越頻繁，不論在家庭還是企業(yè)方便快捷一直是所要追求的目標(biāo)，智能家居順應(yīng)時(shí)代的要求出現(xiàn)了，讓更多的人了解何為智能家居，為生活創(chuàng)造方便。智能家居網(wǎng)頁的功能首頁智能家居一個(gè)簡(jiǎn)單的介紹智能家居部分產(chǎn)品展示傳感器新聞中心物聯(lián)網(wǎng)的相關(guān)知識(shí)起源關(guān)于我們信息聯(lián)系我方便聯(lián)系到我02·網(wǎng)站的總體設(shè)計(jì)AdobeDreamweaver2018簡(jiǎn)稱“DW”，利用對(duì)HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計(jì)師和程序員可以在幾乎任何地方快速制作和進(jìn)行網(wǎng)站建設(shè)。AdobePhotoshopCS5只要涉及到圖像，就會(huì)用到圖像處理軟件，Photoshop理所當(dāng)然就會(huì)成為網(wǎng)頁設(shè)計(jì)中的一員。使用Photoshop不僅可以將圖像進(jìn)行精確的加工，還可以將圖像制作成網(wǎng)頁動(dòng)畫上傳到網(wǎng)頁中。AdobeFlashProfessionalCS6用于創(chuàng)建動(dòng)畫和多媒體內(nèi)容的強(qiáng)大的創(chuàng)作平臺(tái)。它的設(shè)計(jì)身臨其境、在臺(tái)式計(jì)算機(jī)和平板、智能手機(jī)和電視等多種設(shè)備中都能呈現(xiàn)一致效果的互動(dòng)體驗(yàn)。網(wǎng)站所需軟件介紹css語言層疊樣式表(英文全稱：CascadingStyleSheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。。div+csDIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。JavaScript用于創(chuàng)建動(dòng)畫和多媒體內(nèi)容的強(qiáng)大的創(chuàng)作平臺(tái)。它的設(shè)計(jì)身臨其境、在臺(tái)式計(jì)算機(jī)和平板、智能手機(jī)和電視等多種設(shè)備中都能呈現(xiàn)一致效果的互動(dòng)體驗(yàn)。網(wǎng)頁設(shè)計(jì)制作需要的專業(yè)語言我所設(shè)計(jì)的網(wǎng)頁所需要的材料，大部分來自于百度圖片，部分進(jìn)行過photoshop制作修剪而來的。主要實(shí)現(xiàn)以下目標(biāo)：網(wǎng)頁設(shè)計(jì)所需要的材料1.系統(tǒng)架構(gòu)清晰、界面友好美觀。2.清晰地條理是一個(gè)網(wǎng)頁成功的重要條件之一，只有清楚的展示出自己網(wǎng)頁的線索，才能讓用戶在使用時(shí)準(zhǔn)確快速地得到想要的信息。當(dāng)然，界面是給人的第一感覺，界面美觀與否直接影響到網(wǎng)頁的質(zhì)量，所以網(wǎng)頁一定要實(shí)現(xiàn)界面友好美觀。3.文字圖片介紹詳細(xì)。4.這個(gè)網(wǎng)頁重要的作用是展示介紹，所以只有詳細(xì)的介紹才能盡可能地完善信息。文字圖片是網(wǎng)頁必不可少的兩部分，這兩部分至關(guān)重要，圖片文字的混搭更具有一定的效果。5.提供多種信息搜索方式，用戶可根據(jù)需要方便、快捷地查找到所需信息。6.在互聯(lián)網(wǎng)發(fā)達(dá)的今天，信息量復(fù)雜繁多，想要得到更多信息，不僅局限于一個(gè)網(wǎng)頁，還可以選擇訪問其他網(wǎng)頁，友情鏈接到其他相關(guān)網(wǎng)站，給用戶更多渠道來了解智能家居。超鏈接本質(zhì)上屬于一個(gè)網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。圖片圖片是指由圖形、圖像等構(gòu)成的平面媒體。圖片的格式很多，但總體上可以分為點(diǎn)陣圖和矢量圖兩大類，我們常用BMP、JPG等格式都是點(diǎn)陣圖形，而SWF、CDR、AI等格式的圖形屬于矢量圖形。文本指書面語言的表現(xiàn)形式，從文學(xué)角度說，通常是具有完整、系統(tǒng)含義（Message）的一個(gè)句子或多個(gè)句子的組合。一個(gè)文本可以是一個(gè)句子（Sentence）、一個(gè)段落（Paragraph）或者一個(gè)篇章（Discourse）。網(wǎng)頁組成網(wǎng)頁設(shè)計(jì)原則1.目的性任何一個(gè)網(wǎng)站，必須首先具有明確的目的和目標(biāo)群體。2.實(shí)用性網(wǎng)站提供的功能服務(wù)應(yīng)該是切合瀏覽者實(shí)際需求的且符合企業(yè)特點(diǎn)的。例如網(wǎng)上銀行提供免費(fèi)電子郵件和個(gè)人主頁空間就既不符合瀏覽者對(duì)網(wǎng)上銀行網(wǎng)站的需求也不是銀行的優(yōu)勢(shì)，這樣的功能服務(wù)提供不但會(huì)削弱瀏覽者對(duì)網(wǎng)站的整體印象，還浪費(fèi)了企業(yè)的資源投入，有弊無利。3.層次性條理清晰的結(jié)構(gòu)，表現(xiàn)為網(wǎng)站的板塊劃分的合理性，信息內(nèi)容的獲取和功能服務(wù)的過程都應(yīng)該盡量將所需要進(jìn)行的步驟控制在3-5步以內(nèi)，不得不需要更多的步驟的時(shí)應(yīng)該有明確的提示。所以導(dǎo)航條起到了至關(guān)重要的作用，本網(wǎng)頁的有點(diǎn)也就是條理清晰，但同時(shí)也是一處缺點(diǎn)，因?yàn)樽龅臅r(shí)間匆忙，導(dǎo)航的有些是圖片跟蹤鏈接，但不影響整體效果。4.一致性設(shè)計(jì)一個(gè)網(wǎng)頁時(shí)，規(guī)劃一個(gè)統(tǒng)一的主題與風(fēng)格可以使所有的頁面緊緊聯(lián)系在一起，保持頁面的一致性，既能強(qiáng)化風(fēng)格定位所帶來的作用，又能在瀏覽體驗(yàn)上給瀏覽者帶來方便和順暢。（1）頁面整體設(shè)計(jì)風(fēng)格的一致性我采用的網(wǎng)頁整個(gè)針對(duì)一個(gè)模板，在模板的基礎(chǔ)上進(jìn)行修改，而且每個(gè)分頁面里面各個(gè)小組也用同樣的技術(shù)，具有很好的一致性。（2）界面元素的命名的一致性比如導(dǎo)航欄里元素命名簡(jiǎn)單明了一致，在各個(gè)分頁面，里面各種產(chǎn)品的一致性等，每個(gè)網(wǎng)頁的界面元素大都是導(dǎo)航、圖片、文字。（3）功能一致性完成同樣的功能應(yīng)該盡量使用同樣的元素，本網(wǎng)頁主要以介紹為主，所以其功能就是給用戶文字圖片等瀏覽信息，唯一的不同就是各種文字圖片展現(xiàn)的方式不同有動(dòng)有靜。（4）元素風(fēng)格一致性界面元素的美觀風(fēng)格、擺放位置在同一個(gè)界面和不同界面之間都應(yīng)該是一致的。03·網(wǎng)頁的具體設(shè)計(jì)制作一個(gè)網(wǎng)站，首先第一步必須做的就是創(chuàng)建站點(diǎn)，但在創(chuàng)建站點(diǎn)前應(yīng)該合理地規(guī)劃站點(diǎn)的目標(biāo)、結(jié)構(gòu)、內(nèi)容、導(dǎo)航機(jī)制以及站點(diǎn)的整體風(fēng)格等，這樣在后期的制作網(wǎng)站過程中才不會(huì)盲目，從而縮短網(wǎng)站設(shè)計(jì)的時(shí)間提高效率。打開AdobeDreamweaverCS6從菜單中點(diǎn)擊“站點(diǎn)/管理站點(diǎn)”在彈出的下拉菜單中選擇“新建站點(diǎn)”，這時(shí)會(huì)彈出一個(gè)對(duì)話框，給自己的站點(diǎn)名稱取名為：“畢業(yè)設(shè)計(jì)”，創(chuàng)建站點(diǎn)文件：D\畢業(yè)設(shè)計(jì)\。最后單擊“保存”，如圖3.1所示：站點(diǎn)的設(shè)計(jì)站點(diǎn)創(chuàng)建完成后，就可以創(chuàng)建Web頁來填充站點(diǎn)了。用鼠標(biāo)右擊面板中的站點(diǎn)文件夾，在彈出的菜單中選擇“新建文件”，新建一個(gè)文件后將其命名為“index.html”的Web頁作為本網(wǎng)站的主頁。再依次建立meijing.html、ailao.html、huxian.html、nieer.html等四個(gè)Web頁，他們分別對(duì)應(yīng)：美景頁、哀牢頁、撫仙頁、聶耳頁。接下來在站點(diǎn)文件夾上右擊，新建文件夾images、flash，用來存放圖片與動(dòng)畫圖像。創(chuàng)建站點(diǎn)內(nèi)容css代碼@charset"utf-8";/*CSSDocument*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-family:"MicrosoftYaHei";}設(shè)置字體格式body{ font:12px/1.5arial,\5b8b\4f53;}table{ border-collapse:collapse; border-spacing:0;}body,input,textarea{ color:#666;}ul{ list-style:none;}img{ border:0; vertical-align:bottom;}a{ text-decoration:none; color:#666; cursor:pointer;}i,em{ font-style:normal;}.clearfix:after{ clear:both; content:""; display:table;}.clearfix{ clear:both;}a{ transition:all2s; -moz-transition:all2s; /*Firefox4*/ -webkit-transition:all2s; /*Safari和Chrome*/ -o-transition:all2s;}/*endYUIreset*/.fl{ float:left; _display:inline;}.fr{ float:right; _display:inline;}body{ background-color:#fff;color:#040404;}.container{width:1024px;height:768px;margin:0auto;}.header{padding-top:20px;padding-bottom:20px;}.logo{padding-bottom:20px;}.nav{background-color:#f9f9f9;height:64px;line-height:64px;text-align:center;}.nava{color:#333;font-size:16px;padding:064px;}.nava:hover,.nava.on{color:#cc9832;}.banner{ width:1024px; height:558px; position:relative; margin:0auto; overflow:hidden}.banner.bd{ position:relative; z-index:0;}.banner.bdul{ width:100%!important;}.banner.bdli{ width:100%!important; position:relative;}.banner.bdlia{ height:auto; display:block;}.banner.bdliimg{ width:100%; display:block;}.banner.hd{ width:100%; position:absolute; z-index:1; bottom:10px; right:0px; height:13px; text-align:center;}.banner.hdulli{ cursor:pointer; display:inline-block; *display:inline; zoom:1; text-align:center; width:13px; height:13px; margin:3px; overflow:hidden; line-height:9999; background-color:#5d5e60; border-radius:50%;}.banner.hdulli.on{background-color:#cc9832;}.list{padding:20px0;}.title{height:50px;line-height:50px;font-size:18px;border-bottom:1pxsolid#cc9832}.titlea{float:right;font-size:14px;} .titlea:hover{color:#cc9832} .listul{overflow:hidden} .listulli{float:left;width:240px;margin-right:16px;} .listulliimg{width:100%;display:block;} .listullip{background-color:#f9f9f9;height:64px;line-height:64px;text-align:center;font-size:16px;} .footer{height:100px;line-height:100px;text-align:center;background-color:#f1f1f1}.newbanner{}.newbannerimg{display:block;width:1024px;}

.news{} .newsul{padding-top:20px;}.newsulli{border-bottom:1pxsolid#f1f1f1;margin-bottom:20px;padding-bottom:20px;font-size:14px;}.newsullip{height:40px;line-height:40px;}.newsullipspan{float:right;}.newsulliem{line-height:24px;}.aboutcon{padding:20px0;}.aboutconp{line-height:24px;font-size:14px;margin-bottom:10px;}.con-top{overflow:hidden;background-color:#f9f9f9;margin-top:20px;margin-bottom:20px;}.con-topimg{float:left;width:500px;}.con-right{float:right;width:500px;padding-top:50px;}.con-rightp{line-height:30px;font-size:16px;}.con{margin-bottom:20px;}.con-righta{display:inline-block;width:150px;height:30px;background-color:#cc9832;color:#fff;font-size:16px;border-radius:2px;line-height:30px;text-align:center;margin-top:50px;}.con-bottom{border:2pxsolid#cc9832}.con-bottomimg{width:100%;}這里為所有的css引入的東西，整個(gè)網(wǎng)頁以css為根本進(jìn)行的設(shè)計(jì)。首頁的設(shè)計(jì)每個(gè)網(wǎng)頁都會(huì)有一個(gè)首頁，它代表著一個(gè)網(wǎng)站的風(fēng)格與特色，它也代表著網(wǎng)站的第一層架構(gòu)，至于網(wǎng)站上的其他Web頁，原則上都必須越過首頁來連接播撒出去，可想而知，首頁是多么的重要。首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個(gè)頁面，因此取名字也是非常重視的，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm。首頁代碼<divclass="banner"> <divclass="bd"> <ul> <li><imgsrc="images/banner1.jpg"alt=""/></li> <li><imgsrc="images/banner2.jpg"alt=""/></li><li><imgsrc="images/banner3.jpg"alt=""/></li> </ul> </div> <divclass="hd"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div><aclass="prev"href="javascript:void(0)"></a> <aclass="next"href="javascript:void(0)"></a>（上下都引進(jìn)js文件實(shí)現(xiàn)動(dòng)態(tài)效果） </div> <scripttype="text/javascript">jQuery(".banner").slide({titCell:".hdul",mainCell:".bdul",effect:"fold",autoPlay:true,autoPage:true,trigger:"click"});</script> <!--bannerend--></div>首頁代碼<ul> <li> <ahref="con1.html"><imgsrc="images/1709004.jpg"></a><p>產(chǎn)品1</p></li><li> <ahref="con2.html"><imgsrc="images/1709005.jpg"></a><p>產(chǎn)品2</p></li><li> <imgsrc="images/1709007.jpg"><p>產(chǎn)品4</p></li><li> <imgsrc="images/1709009.jpg"><p>產(chǎn)品5</p></li></ul>在此引入了js文件實(shí)現(xiàn)滑動(dòng)門效果，背景底色在css文件之中進(jìn)行了設(shè)計(jì)。<divclass="footer"> <divclass="w1182"> 云南國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院 物聯(lián)網(wǎng)應(yīng)用技術(shù)班 趙楊鍇</div></div>這里為網(wǎng)頁之中文本的設(shè)計(jì)，以及插入一個(gè)文本的方式。導(dǎo)航欄<divclass="header"><divclass="logo"><imgsrc="images/logo.jpg"></div><divclass="nav"><ahref="index.html"class="on">網(wǎng)站首頁</a><ahref="product.html">產(chǎn)品中心</a><ahref="new.html">新聞中心</a><ahref="about.html">關(guān)于我們</a><ahref="contact.html">聯(lián)系我們</a></div></div>導(dǎo)航欄的設(shè)置，以及為導(dǎo)航欄的選項(xiàng)設(shè)置一個(gè)超鏈接。04·兼容性測(cè)試和維護(hù)服務(wù)器穩(wěn)定性、安全性服務(wù)器的穩(wěn)定性和安全性不容忽視，在服務(wù)器測(cè)試方面我們主要從產(chǎn)品滿足用戶應(yīng)用的角度出發(fā)，對(duì)功能和性能兩個(gè)方面來分析。在不同服務(wù)器上穩(wěn)定性安全性良好。網(wǎng)頁兼容性測(cè)試網(wǎng)站兼容性測(cè)試主要檢驗(yàn)網(wǎng)站能否在不同的客戶瀏覽器中正常瀏覽。不同的瀏覽器對(duì)同一頁面顯示的效果會(huì)有出入。不同操作系統(tǒng)下的瀏覽器對(duì)同一頁面的瀏覽效果會(huì)有出入。經(jīng)測(cè)試在ie8上顯示正常，在360瀏覽器上顯示有偏差，在2345智能瀏覽器上顯示也正常。根據(jù)需要的其他測(cè)試如可用性測(cè)試、安全測(cè)試、代碼合法性測(cè)試等代碼合法性測(cè)試主要包括2個(gè)部分：程序代碼合法性檢查與顯示代碼合法性檢查。網(wǎng)站的兼容性測(cè)試制作者功能模塊測(cè)試包括美工測(cè)試頁面、程序員測(cè)試功能。在做完后第一時(shí)間內(nèi)有制作者本人進(jìn)行測(cè)試。第一：頁面包括首頁、二級(jí)頁面、三級(jí)頁面的頁面在各種常用分辨率下有無錯(cuò)位;圖片上有沒有錯(cuò)別字；各連接是否是死連接；各欄目圖片與內(nèi)容是否對(duì)應(yīng)等。第二：功能達(dá)到客戶要求；數(shù)據(jù)庫(kù)連接是否正確；各個(gè)動(dòng)態(tài)生成連接是否正確；傳遞參數(shù)格式、內(nèi)容是否正確；試填測(cè)試內(nèi)容沒有報(bào)錯(cuò)；頁面是否顯示正確。全面測(cè)試根據(jù)要求，由專人進(jìn)行全面測(cè)試包括頁面和程序兩方面，而且要結(jié)合起來測(cè)，保證填充足夠的內(nèi)容后不會(huì)導(dǎo)致頁面變形。另外要檢查是否有錯(cuò)別字，文字內(nèi)容是否有常識(shí)錯(cuò)誤。發(fā)布測(cè)試網(wǎng)站發(fā)布到主服務(wù)器之后的測(cè)試，主要是防止環(huán)境不同導(dǎo)致的錯(cuò)誤。網(wǎng)站的發(fā)布一個(gè)網(wǎng)站基本完工后，需要通過下面三步測(cè)試才可以服務(wù)器及相關(guān)軟硬件的維護(hù)對(duì)可能出現(xiàn)的問題進(jìn)行評(píng)估，制定響應(yīng)時(shí)間。計(jì)算機(jī)硬件在使用中常會(huì)出現(xiàn)一些問題，同樣，網(wǎng)絡(luò)設(shè)備也同樣影響企業(yè)網(wǎng)站的工作效率，網(wǎng)絡(luò)設(shè)備管理屬于技術(shù)操作，非專業(yè)人員的誤操作有可能導(dǎo)致整個(gè)企業(yè)網(wǎng)站癱瘓。沒有任何操作系統(tǒng)是絕對(duì)安全