網(wǎng)頁開發(fā)技術(shù)課程設(shè)計說明書

1、網(wǎng)頁開發(fā)技術(shù)課程設(shè)計說明書摘 要 信息技術(shù)是一個劃時代的技術(shù)革命，它正在對整個社會各方面的發(fā)展起著深刻的影響。這個遍地是黃金的互聯(lián)網(wǎng)里，每一類型的網(wǎng)站都是富礦，個人網(wǎng)站也不例外。為了更好地利用網(wǎng)絡(luò)資源，使我們的信息電子化也為了能與世界各地進(jìn)行廣泛地交流豐富我們的知識和視野。隨著社會觀念的更新，個人網(wǎng)站也隨之以不可思議的速度出現(xiàn)在Internet之上，很多電腦愛好者根據(jù)自己的情況和愛好做出了個人網(wǎng)站。個人網(wǎng)站以后就成為了我們個人身份證件，特別是我們在去找工作，就沒有必要帶厚厚的簡歷，只要把我們自己的網(wǎng)站平時維護(hù)好。記錄了我們平時的學(xué)習(xí)成績、個人獎勵情況、個人的工作經(jīng)驗還有自己的特長介紹和自己的作

2、品，讓人知道我們的網(wǎng)址就把所有的事情辦了。隨著現(xiàn)代計算機(jī)科學(xué)的發(fā)展，網(wǎng)絡(luò)已經(jīng)越來越普及，如今網(wǎng)絡(luò)已經(jīng)成為每個人生活的一部分。同時網(wǎng)絡(luò)也提供了一種很好的信息交換平臺，而個人主頁是一個可以在網(wǎng)絡(luò)上展示個人信息的方便手段。本文通過使用Dreamrweaver CS5開發(fā)個人網(wǎng)站。建立了一個以NBA為主要內(nèi)容的信息網(wǎng)站，供廣大網(wǎng)友檢索瀏覽NBA相關(guān)信息。關(guān)鍵字: Dreamrweaver；NBA；網(wǎng)站；CSS樣式目錄一、網(wǎng)站建設(shè)意義和目的3二、網(wǎng)站規(guī)劃42.1網(wǎng)站主題風(fēng)格4（1）頁面整體布局4（2）導(dǎo)航條的設(shè)置4（3）正文的框架設(shè)置42.2網(wǎng)站標(biāo)志52.3網(wǎng)站特點52.4 網(wǎng)站工具5三、網(wǎng)站建設(shè)步驟6

3、3.1網(wǎng)站目錄結(jié)構(gòu)63.2網(wǎng)站鏈接結(jié)構(gòu)83.3網(wǎng)站首頁93.4.數(shù)據(jù)頁面93.3資訊頁面10四、網(wǎng)站測試10五、參考文獻(xiàn)11六、課程設(shè)計總結(jié)11一、網(wǎng)站建設(shè)意義和目的網(wǎng)絡(luò)在中國的發(fā)展是非常迅猛的，隨著信息網(wǎng)絡(luò)技術(shù)的應(yīng)用，我們每一個人都感應(yīng)到了網(wǎng)絡(luò)給我們的工作、學(xué)習(xí)、生活等許多方面都帶來了更多的方便、快捷，對于人性化的詮釋達(dá)到了淋漓盡致，企業(yè)的經(jīng)營觀念、個人的生活觀念都在發(fā)生著根本的變化。目前許多政府機(jī)關(guān)、學(xué)校、企事業(yè)單位已建立自己的網(wǎng)站。為了宣傳自己和傳遞信息，建設(shè)自己部門的網(wǎng)站已經(jīng)是迫切需要。因此，需要通過一個有著界面友好，視覺效果美觀，方便易用的網(wǎng)站來宣傳網(wǎng)頁，方便他人了解查閱。通過網(wǎng)站，

4、全面宣傳，展示網(wǎng)頁的風(fēng)采與特色，給用戶提供需要的內(nèi)容、而且還應(yīng)該做更多的事情、完成比頁面瀏覽更高層次的需求，例如收集信息，數(shù)據(jù)存儲,數(shù)據(jù)修改以及數(shù)據(jù)刪除等。二、網(wǎng)站規(guī)劃2.1網(wǎng)站主題風(fēng)格（1）頁面整體布局首先要考慮整個網(wǎng)頁的長和寬，以及長度和寬度之間的比例。本次設(shè)計中網(wǎng)頁寬1024像素，長由每個部分的內(nèi)容不同而設(shè)置。表格三行一列，居中設(shè)置，第一行放頭圖片，第二行是導(dǎo)航欄，第三行主頁內(nèi)容，第四行放置版權(quán)和地址等內(nèi)容。（2）導(dǎo)航條的設(shè)置導(dǎo)航欄的設(shè)置既是在上面第二行出插入一個一行十三列的表格，內(nèi)容包括首頁、動態(tài)、健身、文章欣賞等。（3）正文的框架設(shè)置在瀏覽了很多精美網(wǎng)站之后，再結(jié)合自己的想法，先在草

5、紙上畫出了大體的欄目和板塊。網(wǎng)站的整體風(fēng)格和創(chuàng)意：建立一個清新、樸素的網(wǎng)站，目的是使瀏覽者留下映像。2.2網(wǎng)站標(biāo)志2.3網(wǎng)站特點(1）討論網(wǎng)站主題：建立一個關(guān)于NBA的網(wǎng)站，其中有關(guān)于NBA賽事、明星、球隊等信息。（2）定位網(wǎng)站CI形象：網(wǎng)站最重要的就是與瀏覽者產(chǎn)生共鳴。于是在網(wǎng)頁設(shè)計上面，要淡到瀏覽者最關(guān)心的話題。（3）材料收集，網(wǎng)上搜一些網(wǎng)頁背景，F(xiàn)IASH源代碼、小圖標(biāo)和一些gif的動畫等。2.4 網(wǎng)站工具Dreamweaver、 Photoshop、Flash、Fireworks等。實現(xiàn)本設(shè)計已具備的條件(說明已具備的軟硬件設(shè)備,包括計算機(jī)和軟件相關(guān)技術(shù)資料)CPU：Intel Pen

6、tium4或AMD Athlon 64處理器內(nèi)存：512MB內(nèi)存，推薦使用1GB以上內(nèi)存。硬盤空間：1GB可用硬盤空間用于安裝；安裝過程中需要額外的可用空間（無法安裝在可移動閃存設(shè)備上）。顯示器16位顯卡，1280800像素的顯示分辨率。光盤驅(qū)動器： DVD-ROM驅(qū)動器。計算機(jī)：Microsoft Windows XP（帶有Service Pack2，推薦Service Pack3）；Windows Vista Home Premium、Business、Ultimate或Enterprise（帶有Service Pack1）；或Windows 7。軟件：Dreamweaver MX 200

7、4、Photoshop CS3、Flash CS3、Fireworks CS3，使用IIS瀏覽網(wǎng)頁效果。技術(shù)資料：使用Dreamweaver MX 2004編寫ASP VBScript動態(tài)網(wǎng)站，來確定網(wǎng)頁的布局、欄目和板塊，編寫后臺管理的一系列的代碼，后面有相關(guān)的代碼介紹。Photoshop CS3用來制作及修改圖片，通常與FireworksCS3、Flash CS3結(jié)合使用，F(xiàn)ireworksCS3只要是用來制作gif格式的動畫，而Flash CS3完成動畫更完美一些。在編寫網(wǎng)頁時通常用到JavaScript腳本和VBScript腳本，是為了網(wǎng)頁的美觀或要實現(xiàn)某種特殊功能，編寫代碼時可也采用

8、記事本，然后在網(wǎng)頁代碼相應(yīng)的位置插入。 三、網(wǎng)站建設(shè)步驟3.1網(wǎng)站目錄結(jié)構(gòu)圖1 導(dǎo)航結(jié)構(gòu)圖定義站點的操作步驟如下： （1）在Dreamweaver 8主窗口中，單擊菜單【站點】【新建站點】，將彈出如圖17-6所示站點定義對話框。在該對話框中先輸入站點的名稱，然后輸入網(wǎng)址，如圖17-6所示。接著單擊【下一步】按鈕，進(jìn)入到下一步操作。 （2）選擇“否，我不想使用服務(wù)器技術(shù)”單選按鈕，然后單擊【下一步】按鈕，進(jìn)入到下一步操作。 （3）選擇“編輯我的計算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）”單選按鈕，接著在下面的文本框中輸入站點文件在本地計算機(jī)上的存放位置，也可以選擇存儲位置，然后單擊【下一步

9、】按鈕，進(jìn)入到下一步操作。 （4）選擇連接到遠(yuǎn)程服務(wù)器的方式為“FTP”,然后分別輸入Web服務(wù)器的主機(jī)名、在服務(wù)器上文件的存儲位置、FTP用戶名、FTP密碼等參數(shù)，如圖17-7所示。然后單擊【下一步】按鈕。 （5）選擇“否，不啟用存回和取出”單選按鈕，如圖17-8所示。接著單擊【下一步】按鈕，此時會顯示所定義的站點信息。如果發(fā)現(xiàn)有誤可以單擊【上一步】按鈕，返回到上一步操作的對話框中重新修改。如果站點定義信息符合要求，可以單擊【完成】按鈕，完成站點的定義。 此時會自動顯示“文件”面板，并且會自動切換到新創(chuàng)建的網(wǎng)站。3.2網(wǎng)站鏈接結(jié)構(gòu)圖1 鏈接結(jié)構(gòu)3.3網(wǎng)站首頁圖3 首頁框架結(jié)構(gòu)圖3.4.數(shù)據(jù)頁

10、面圖4 數(shù)據(jù)頁面框架結(jié)構(gòu)圖3.3資訊頁面（文本、圖像插入、音樂插入、動畫多媒體插入頁面鏈接、表格頁面布局、CSS樣式、層、框架、模版和庫、表單）圖5 資訊頁面框架結(jié)構(gòu)圖四、網(wǎng)站測試測試網(wǎng)站：一個網(wǎng)站包含很多鏈接，可能會出現(xiàn)鏈接錯誤或斷鏈現(xiàn)象，在發(fā)布站點前有必要檢查整個站點的鏈接，以避免站點發(fā)布之后出現(xiàn)無效鏈接情形。利用Dreamweaver 8提供的“檢查鏈接”可以檢查網(wǎng)站中存在斷鏈、孤立文件等。 鏈接檢查無誤后，可以在瀏覽器中瀏覽各個網(wǎng)頁，檢查文字、圖片、鏈接是否有誤、是否會出現(xiàn)亂碼，網(wǎng)頁元素定位是否準(zhǔn)確，瀏覽速度和視覺效果是否滿意。經(jīng)過測試、修改、再測試、再修改，反復(fù)多次循環(huán)，直到各方面都

11、合格方可發(fā)布網(wǎng)站。 3.10 發(fā)布網(wǎng)站 發(fā)布網(wǎng)站就是把網(wǎng)頁文件上傳到Web服務(wù)器，發(fā)布網(wǎng)站之前先必須申請一個主頁空間，擁有網(wǎng)頁空間的訪問域名、FTP用戶名和密碼。如果主頁空間已成功申請，可以先與遠(yuǎn)程Web服務(wù)器進(jìn)行連接，連接成功后，再通過單擊“文件”面板上的【上傳文件】按鈕，往遠(yuǎn)程Web服務(wù)器中上傳本地站點，上傳成功后，就可以在瀏覽器中輸入正確的網(wǎng)址訪問網(wǎng)站了。網(wǎng)站整體流程：一、 制作者測試：頁面和功能二、 全面測試 三、 發(fā)布測試測試的主要方面： 一、功能測試 1、鏈接測試 測試所有鏈接是否按指示的那樣確實鏈接到了該鏈接的頁面 測試所鏈接的頁面是否存在測試鏈接的正確性的工具 2、表單測試 3

12、、Cookies測試 4、設(shè)計語言測試 5、數(shù)據(jù)庫測試 二、性能測試：連接速度測試、負(fù)荷測試(Load)和壓力測試(Stress)1、連接速度測試 2、負(fù)載測試 3、壓力測試 三、接口測試 1、 服務(wù)器接口 2、 外部接口 3、錯誤處理 四、可用性測試 1、導(dǎo)航測試 2、圖形測試 3、內(nèi)容測試 4、整體界面測試 五、兼容性測試 1、平臺測試 2、瀏覽器測試 3、視頻測試 4、Modem/連接速率測試 5、打印機(jī)測試 6、組合測試 六、安全測試 Web應(yīng)用系統(tǒng)的安全性測試區(qū)域1、 目錄設(shè)置 2、登錄 3、Session 4、日志文件 5、加密 6、安全漏洞 七、代碼合法性測試 1、程序代碼合法性

13、檢查 2、顯示代碼合法性檢查 八、 文檔測試：能夠測試多種數(shù)據(jù)庫的性能五、參考文獻(xiàn)1胡崧. HTML 從入門到精通M.北京：中國青年出版社，2007. 2楊選輝.網(wǎng)頁設(shè)計與制作教程M.北京：清華大學(xué)出版社，2009.3王誠君，劉振華，郭竑暉，高中山.Dreamweaver 8 網(wǎng)頁設(shè)計應(yīng)用教程M.北京：清華大 學(xué)出版社，2007. 4李光明，曹蕾，余輝.中文Dreamweaver 8 網(wǎng)頁設(shè)計與實訓(xùn)教程M.北京：冶金工業(yè)出版 社，2006. 5趙銘建，趙慧，喬孟麗，康梅娟.網(wǎng)頁設(shè)計與制作M.東營：中國石油大學(xué)出版社，2007. 6趙祖蔭，王云翔，胡耀芳.網(wǎng)頁設(shè)計與制作教程M.北京：清華大學(xué)出版

14、社，2008. 7曹雁青，楊聰. Photoshop 經(jīng)典作品賞析M.北京：北京海洋智慧圖書有限公司，2002. 7張怒濤. Photoshop 平面設(shè)計圖像處理技法M.北京：清華大學(xué)出版社，2003. 8 陳笑. Dreamweaver 8，Photoshop CS 2，F(xiàn)lash 8 網(wǎng)頁制作實用教程M.北京：清華大 學(xué)出版社，2006. 9孫強(qiáng)，李曉娜，黃艷.JavaScript 從入門到精通M.北京：清華大學(xué)出版社，2008. 六、課程設(shè)計總結(jié)生活中我每天上網(wǎng)都要接觸到網(wǎng)頁，原來沒有留意過網(wǎng)頁的設(shè)計，但是經(jīng)過這段時間的學(xué)習(xí)了解，現(xiàn)在我打開一個網(wǎng)頁都會習(xí)慣性的先看看排版、布局和色彩運用，

15、以及網(wǎng)站里的特效代碼。漸漸的我覺得這也沒有多神奇了。通過半年的課堂學(xué)習(xí)，我大體掌握了網(wǎng)頁設(shè)計的基本方法，例如：1、命名站點或者文件夾的的時候一定要注意，最好用相應(yīng)的英語或者漢語拼音，要見名知意，如圖片文件夾用images，這樣可以避免頁面調(diào)用時不正確的現(xiàn)象發(fā)生。2、雖然不同的方法達(dá)到的效果看似一樣，但實際上產(chǎn)生的HTML代碼則完全不同。在這個過程中，我同樣認(rèn)識到網(wǎng)頁設(shè)計不是一門學(xué)科的獨秀，而是多種課程的綜合，它是Flash、Photoshop等網(wǎng)頁軟件的綜合應(yīng)用。例如Swftext軟件提供了功能齊全的flash制作工具。3、網(wǎng)頁設(shè)計布局一般為三行一列，主題955600像素，導(dǎo)航欄200像素，版權(quán)聲明部分占50-70像素。這樣網(wǎng)頁設(shè)計部較合適，符合人們的審美觀。針對我所學(xué)的網(wǎng)頁設(shè)計，網(wǎng)頁布局、圖形創(chuàng)意等方面都很重要，對于網(wǎng)