網(wǎng)頁設(shè)計(jì)課件-參考

答辯人：王娟

專業(yè)：計(jì)算機(jī)信息管理商務(wù)類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)西安電大蓮湖分校研究概述研究背景網(wǎng)站設(shè)計(jì)方案網(wǎng)站結(jié)構(gòu)分析網(wǎng)站的準(zhǔn)備工作1234實(shí)施步驟測試網(wǎng)站56教育公平科學(xué)發(fā)展機(jī)制研究建筑業(yè)應(yīng)用軟件

計(jì)算機(jī)和計(jì)算機(jī)網(wǎng)絡(luò)的飛速發(fā)展，人們對計(jì)算機(jī)網(wǎng)絡(luò)的依賴是越來越大。人們在網(wǎng)上聊天交友，在網(wǎng)上請教問題，查閱資料，還在網(wǎng)上聽音樂。除此之外，人們還會(huì)在網(wǎng)上進(jìn)行商務(wù)交易、下載信息，有著眾多的使用者。尤其是電子商務(wù)大大的減少了人們對周圍環(huán)境的依賴，無論是哪里的網(wǎng)友，都可以瀏覽到世界各地的各類信息，非常的方便，由于以上的優(yōu)勢，各類網(wǎng)站如雨后春筍般的出現(xiàn)，企業(yè)網(wǎng)站也不例外。

而Web設(shè)計(jì)的健康發(fā)展依靠web標(biāo)準(zhǔn)的采用，沒有web標(biāo)準(zhǔn)就不會(huì)有真正的可訪問性和連貫的設(shè)計(jì)。不用web標(biāo)準(zhǔn)，就跟不上時(shí)代。在這樣的標(biāo)準(zhǔn)時(shí)代，我們需要網(wǎng)頁更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。而css，則實(shí)現(xiàn)了頁面內(nèi)容與樣式分離。鑒于web標(biāo)準(zhǔn)，本論文著重對div+css布局與美化公司網(wǎng)頁進(jìn)行了討論；同時(shí)根據(jù)客戶需求，采用div+css實(shí)現(xiàn)了咨詢公司網(wǎng)頁的設(shè)計(jì)，具體實(shí)現(xiàn)了首頁、設(shè)計(jì)理念、作品展示、企業(yè)文化、關(guān)于我們、聯(lián)系我們等功能，系統(tǒng)符合公司網(wǎng)站的需求。課題的提出.研究背景12.設(shè)計(jì)方案網(wǎng)站主頁（index.html）作品展示---support.html企業(yè)策劃---blog.html聯(lián)系我們---contact.html設(shè)計(jì)理念---about.html3.網(wǎng)站結(jié)構(gòu)分析.準(zhǔn)備工作4技術(shù)要求：1、采用Windows2000以上的操作系統(tǒng)，網(wǎng)頁三劍

客+Photoshop+div+css開發(fā)；2、采用div+css布局和美化網(wǎng)頁；設(shè)計(jì)內(nèi)容：1.整個(gè)網(wǎng)站風(fēng)格定位及各頁面布局設(shè)計(jì)。2.網(wǎng)頁整體圖形的制作。3.div+css布局。4.網(wǎng)站測試與后期優(yōu)化。.具體操作步驟5網(wǎng)站的頁頭主要分為兩個(gè)部分。一是Logo，logo使一張準(zhǔn)備好的圖片，直接放置在頭部容器左側(cè)，調(diào)整好位置；二是導(dǎo)航條，網(wǎng)站導(dǎo)航條因?yàn)橛辛Ⅲw感效果，因此它需要脫離文本流，因此在控制樣式的時(shí)候要用定位，相對于文本流的定位。網(wǎng)站的導(dǎo)航欄目可以讓用戶對網(wǎng)站的內(nèi)容及信息一目了然。導(dǎo)航分為：首頁、作品展示、設(shè)計(jì)理念、企業(yè)策劃、關(guān)于我們、聯(lián)系我們。導(dǎo)航采用的是ulli布局，然后再用a標(biāo)簽對其他相關(guān)網(wǎng)頁進(jìn)行鏈接，設(shè)計(jì)和操作上都非常簡單。相關(guān)代碼如下：<divclass="menu"><ul><liclass="left"></li><liclass="break"></li><liclass="select"><ahref="index.html">首頁</a></li><liclass="break"></li><li><ahref="support.html">作品展示</a></li><liclass="break"></li><li><ahref="about.html">設(shè)計(jì)理念</a></li><liclass="break"></li><li><ahref="blog.html">企業(yè)策劃</a></li><liclass="break"></li><li><ahref="contact.html">聯(lián)系我們</a></li><liclass="break"></li></ul></div>5.1頭部效果圖5.2中間內(nèi)容頁設(shè)計(jì)根據(jù)瀏覽者在閱讀時(shí)經(jīng)常采用從上到下，從左到右的習(xí)慣，主體內(nèi)容中，將“優(yōu)秀網(wǎng)站案例”靠左邊放，這樣能更好地吸引瀏覽者的眼球，同時(shí)也體現(xiàn)公司的專業(yè)、能力等。優(yōu)秀網(wǎng)站案例采用網(wǎng)頁圖片切換的形式展現(xiàn)在首頁中，使整個(gè)首頁處于于靜于動(dòng)的畫面。右邊則是創(chuàng)意設(shè)計(jì)公司的設(shè)計(jì)理念。設(shè)計(jì)效果圖如下5.3頁腳設(shè)計(jì)5.4.1作品展示頁設(shè)計(jì)一、設(shè)計(jì)理念設(shè)計(jì)理念界面展示了公司設(shè)計(jì)的理念，同時(shí)還附帶了公司設(shè)計(jì)的一些行業(yè)案例，讓客戶體會(huì)到本公司的專業(yè)。左邊的鏈接為以后的編輯奠定基礎(chǔ)。效果圖如下5.4.1作品展示頁設(shè)計(jì)作品展示模版可以介紹公司的特色，讓游客更充分的了解公司、公司業(yè)務(wù)所面向地方對象。左邊列舉了公司業(yè)務(wù)項(xiàng)目，左邊的鏈接為以后的編輯奠定基礎(chǔ)。效果圖如下圖

5.4.2企業(yè)文化頁設(shè)計(jì)此頁面的的設(shè)計(jì)為左邊是代表流程的圖片，右邊詳細(xì)介紹了公司的企業(yè)文化等信息，讓客戶清晰的了解公司的文化，服務(wù)信息等等。效果圖如下圖5.4.3聯(lián)系我們頁設(shè)計(jì)聯(lián)系我們板塊能實(shí)現(xiàn)交流的目的，讓客戶對公司的發(fā)展，公司的業(yè)務(wù)流程提出寶貴的意見和建議，這樣公司才能更好的為自己定位，才能根據(jù)客戶提出的意見來完善自身。聯(lián)系我們頁面主要介紹公司所在地、公司聯(lián)系電話、公司地圖等信息。網(wǎng)站的聯(lián)系我們界面效果，如下圖5.5網(wǎng)站最終效果圖編碼完成后，就要對源程序進(jìn)行測試。軟件測試的目的在于爭取在第一時(shí)間發(fā)現(xiàn)程序中的錯(cuò)誤，以便于及時(shí)糾錯(cuò)，增加軟件可靠性。它在整個(gè)系統(tǒng)設(shè)計(jì)實(shí)施過程中占有相當(dāng)?shù)姆至?。測試是軟件開發(fā)時(shí)期的最后一個(gè)階段，也是軟件質(zhì)量保證中至關(guān)重要的一個(gè)環(huán)節(jié)。測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯(cuò)誤，其任務(wù)就是消除網(wǎng)站故障，保證程序的可靠運(yùn)行，最終把一個(gè)高質(zhì)量的網(wǎng)站系統(tǒng)交給用戶使用。一般來說在每個(gè)模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網(wǎng)站生命周期的同一階段。這個(gè)階段結(jié)束之后，對網(wǎng)站系統(tǒng)還應(yīng)該進(jìn)行各種綜合測試，這是網(wǎng)站生命周期的另一個(gè)獨(dú)立的階段，由專門的測試人員承擔(dān)。在網(wǎng)頁中的測試階段主要是對網(wǎng)站進(jìn)行瀏覽器兼容性測試。在網(wǎng)頁測試的階段我分別安裝了IE8、火狐等瀏覽器，并且進(jìn)行了逐個(gè)測試。在多次實(shí)踐中或多或少都遇到了不可調(diào)節(jié)的DIV浮動(dòng)問題，