1、.網(wǎng)頁設(shè)計(jì)與制作報(bào)告書 課程名稱:網(wǎng)頁設(shè)計(jì)與制作 專業(yè)班級(jí)：電子商務(wù)2班學(xué) 號(hào):201341440213 姓 名：孫巖 指導(dǎo)教師：王康哲 目錄一概要 3二網(wǎng)站開發(fā) 3三應(yīng)用工具方案 5四欄目劃分 6五代碼表. 7六截圖 13七結(jié)論 14摘要：在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。一、網(wǎng)頁制作開發(fā)背景Dreamweaver以其功能強(qiáng)大、容易上手、界面親切而著稱。它采用所見即所得

2、的方式編輯網(wǎng)頁，利用它可以輕松的組織、編輯網(wǎng)頁并將其發(fā)布到指定的站點(diǎn)上，而且在發(fā)布之后還能對(duì)更新情況進(jìn)行監(jiān)控以更新站點(diǎn)的內(nèi)容?，F(xiàn)在流行的網(wǎng)頁制作軟件有很多，如Macromedia公司的Dreamweaver、微軟公司的Dreamweaver、還有Adobe Pagemill 3.0-制作多框架，表單和Image map 圖像的網(wǎng)頁工具、Netscape等等。其中Dreamweaver更以其功能強(qiáng)大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網(wǎng)頁，利用它可以輕松的組織、編輯網(wǎng)頁并將其發(fā)布到指定的站點(diǎn)上，而且在發(fā)布之后還能對(duì)更新情況進(jìn)行監(jiān)控以更新站點(diǎn)的內(nèi)容。工具準(zhǔn)備好了，可根據(jù)你的個(gè)人喜

3、好來選擇一些素材，如圖片、喜歡的文章等。二、網(wǎng)頁制作設(shè)計(jì)技巧首先，我們來看一下創(chuàng)建一個(gè)只包含一個(gè)網(wǎng)頁的站點(diǎn)。 選擇“文件”菜單的“新建”選項(xiàng)，單擊“站點(diǎn)”命令，這時(shí)新建站點(diǎn)對(duì)話框就彈出來了，在“指定新站點(diǎn)位置”文本框中輸入新站點(diǎn)的位置，單擊“只有一個(gè)網(wǎng)頁的站點(diǎn)” 圖標(biāo)，單擊“確定”按鈕。這就建立好站點(diǎn)了，我們現(xiàn)在來看一下新的站點(diǎn)里有什么，單擊“視圖”工具條的“文件夾”按鈕。 在文件夾列表里有一個(gè)網(wǎng)頁文件，名字叫做“index.htm”。我們知道，每一個(gè)站點(diǎn)都要有一個(gè)主頁，這個(gè)主頁也是一個(gè)網(wǎng)頁文件。瀏覽者訪問站點(diǎn)時(shí)首先進(jìn)入的就是站點(diǎn)的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是

4、說我們新建只包含一個(gè)網(wǎng)頁的站點(diǎn)時(shí)，DREAMWEAVER就自動(dòng)為我們創(chuàng)建了站點(diǎn)的主頁了。這個(gè)新建的站點(diǎn)主頁時(shí)空的，我們可以向里面添加內(nèi)容。在文件列表里除了主頁之外，還有文件夾。新建站點(diǎn)時(shí)，DREAMWEAVER都會(huì)在站點(diǎn)所在位置下新建兩個(gè)文件夾，一個(gè)是“images”另一個(gè)是“_private”。我們?cè)诰庉嬚军c(diǎn)時(shí)可以在“image”文件夾里放置站點(diǎn)用到的圖片。 “private”文件夾比較特殊，其中的文件對(duì)瀏覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網(wǎng)頁文件放在這個(gè)文件夾里，比如：我們可以在這個(gè)文件夾里存放注冊(cè)用戶的個(gè)人信息。盡管每一個(gè)站點(diǎn)都要有一個(gè)主頁，不過創(chuàng)建站點(diǎn)時(shí)我們?nèi)匀豢梢詮囊?/p>

5、個(gè)空站點(diǎn)開始：選擇“文件”菜單的“新建”命令，單擊“站點(diǎn)”選項(xiàng)，在“新建站點(diǎn)”對(duì)話框里，我們可以選擇“空站點(diǎn)”圖標(biāo)來創(chuàng)建一個(gè)空站點(diǎn)。“新建站點(diǎn)”對(duì)話框中還有許多其他圖標(biāo)，這是DREAMWEAVER提供的用來創(chuàng)建站點(diǎn)模板或向?qū)АＮ覀儎?chuàng)建只有一個(gè)網(wǎng)頁的站點(diǎn)或者創(chuàng)建空站點(diǎn)，都是從頭開始來創(chuàng)建一個(gè)站點(diǎn)，這就好像蓋房子一樣，首先畫圖紙。然而，有許多的房子都具有相似的結(jié)構(gòu)和用途，所以我們可以用一張圖紙蓋很多相似的房子，這樣就節(jié)省了許多工作?；诒砀竦脑O(shè)計(jì)：表格布局使網(wǎng)頁設(shè)計(jì)師制作網(wǎng)站時(shí)有了更多選擇。在 HTML 中表格標(biāo)簽的本意是為了顯示表格化的數(shù)據(jù)，但是設(shè)計(jì)師很快意識(shí)到可以利用表格來構(gòu)造他們?cè)O(shè)計(jì)的網(wǎng)頁，

6、這樣就可以制作較以往作品更加復(fù)雜的，多欄目的網(wǎng)頁。表格布局就這樣流行了起來，融合了背景圖片切片技術(shù)，常給人以看起來較實(shí)際布局簡潔得多的結(jié)構(gòu)。結(jié)構(gòu)設(shè)計(jì)：這個(gè)時(shí)期的網(wǎng)頁設(shè)計(jì)還不太關(guān)注語義化和可用性方面的問題，主要還在追求良好的結(jié)構(gòu)美學(xué)。同一時(shí)期也是大量應(yīng)用 GIF 占位圖片控制留白的時(shí)期。一些主流的公司甚至訓(xùn)練設(shè)計(jì)師如何使用 GIF 占位;如微軟的“關(guān)于 HTML 表格中的 GIF 占位”。第一批主要應(yīng)用表格布局的“所見即所得”網(wǎng)頁設(shè)計(jì)軟件的發(fā)展助長了表格的應(yīng)用。另外，某些軟件自動(dòng)生成的表格如此復(fù)雜以至于許多設(shè)計(jì)師不可能從頭手寫代碼(例如每行只有 1px 高卻包含了幾百列的表格)。即使是稍微復(fù)雜一

7、點(diǎn)兒的網(wǎng)頁(比如多欄目頁面)，設(shè)計(jì)師們都要依賴于表格來創(chuàng)建。三、網(wǎng)站結(jié)構(gòu)網(wǎng)站結(jié)構(gòu)是指網(wǎng)站中頁面間的層次關(guān)系;按性質(zhì)可分為邏輯結(jié)構(gòu)及物理結(jié)構(gòu)。網(wǎng)站結(jié)構(gòu)對(duì)網(wǎng)站的搜索引擎友好性及用戶體驗(yàn)有著非常重要的影響。 （一）網(wǎng)站結(jié)構(gòu)整體先用DIV和CSS來進(jìn)行構(gòu)造，對(duì)整個(gè)網(wǎng)站進(jìn)行布局， (二)網(wǎng)站結(jié)構(gòu)是衡量網(wǎng)站用戶體驗(yàn)好壞的重要指標(biāo)之一。清晰的網(wǎng)站結(jié)構(gòu)可以幫助用戶快速獲取所需信息;相反，如果一個(gè)網(wǎng)站的結(jié)構(gòu)極其糟糕的話，用戶在訪問時(shí)就猶如走進(jìn)了一座迷宮，最后只會(huì)選擇放棄瀏覽。 （三）網(wǎng)站結(jié)構(gòu)還直接影響搜索引擎對(duì)頁面的收錄，一個(gè)合理的網(wǎng)站結(jié)構(gòu)可以引導(dǎo)搜索引擎從中抓取更多有價(jià)值的頁面。 網(wǎng)站結(jié)構(gòu)對(duì)網(wǎng)站及網(wǎng)站中頁面的

8、影響。搜索引擎對(duì)重要頁面的抓取 由于互聯(lián)網(wǎng)中信息量極其龐大，為了向用戶展示更多有價(jià)值的信息，搜索引擎會(huì)優(yōu)先抓取每個(gè)網(wǎng)站中相對(duì)重要的頁面(即權(quán)重較高的頁面),然而，搜索引擎是怎樣發(fā)現(xiàn)這些重要頁面的呢?根據(jù)重要頁面的鏈接指向的頁面可能是重要頁面的思路;搜索引擎首先會(huì)從權(quán)重相對(duì)較高的頁面(即源頁面)出發(fā)跟蹤其中的鏈接，從而抓取其他相對(duì)重要的頁面(即目標(biāo)頁面)。網(wǎng)頁設(shè)計(jì)的要素四、應(yīng)用工具方案DreamWeaver自制動(dòng)態(tài)HTML動(dòng)畫的網(wǎng)頁。DreamWeaver是一個(gè)很酷的網(wǎng)頁設(shè)計(jì)軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、Sho

9、ckWave等特性，而且它還能通過拖拽從頭到尾制作動(dòng)態(tài)的HTML動(dòng)畫，支持動(dòng)態(tài)HTML(Dynamic HTML)的設(shè)計(jì)，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動(dòng)畫。同時(shí)它還提供了自動(dòng)更新頁面信息的功能。DreamWeaver還采用了Roundtrip HTML技術(shù)。這項(xiàng)技術(shù)使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計(jì)者可以在不改變?cè)芯庉嬃?xí)慣的同時(shí)，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰(zhàn)性和生命力的是它的開放式設(shè)計(jì)，這項(xiàng)設(shè)計(jì)使任何人都可以輕易擴(kuò)展它的功能。

10、版面布局：在你開始設(shè)計(jì)之前，你必須仔細(xì)地為站點(diǎn)挑選色彩組合。千萬不要出現(xiàn)紫色的背景加上黑藍(lán)色的文字的組合。要使整個(gè)站點(diǎn)保持同一種色彩組合，因?yàn)椴煌伾M合的背景或字體可能會(huì)是非常令人討厭的。你也可以選用一個(gè)背景圖，而不是僅用一種顏色。背景圖案可以自己繪制，也可以從因特網(wǎng)上下載。通過模糊背景圖案，就可以使文字更容易被閱讀。要記住的是，圖片不會(huì)被瀏覽器重畫的，而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢查不同的瀏覽器是如何顯示這些網(wǎng)頁的。當(dāng)增加文字時(shí)，盡量設(shè)置容易被閱讀的字體和大小。如果你使用背景圖片，那么，當(dāng)網(wǎng)頁被瀏覽時(shí)，背景色和字體將會(huì)先于背景圖片被下載，因此，如果背景色和文本

11、的顏色沒有鮮明的對(duì)照的話，那么瀏覽者會(huì)有幾秒鐘的時(shí)間看到一個(gè)充滿了不可閱讀的文本的網(wǎng)頁。解決這個(gè)問題的簡單的方法就是，使背景色與背景圖的顏色相類似。瀏覽導(dǎo)航：站點(diǎn)的瀏覽導(dǎo)航必須被設(shè)計(jì)成非常容易。如果需要，把站點(diǎn)分割為幾個(gè)部分。最容易的方法，就是在整個(gè)網(wǎng)站的所有的網(wǎng)頁的左邊放置一個(gè)菜單條。當(dāng)然，除此以外，還有許多可選的方法。對(duì)于具有大量信息的站點(diǎn)，使用一個(gè)可擴(kuò)展的菜單條會(huì)是一個(gè)不錯(cuò)的選擇。無論你使用何種導(dǎo)航模式，在每一頁都放置一個(gè)主頁鏈接，那會(huì)是一種不錯(cuò)的設(shè)計(jì)思想；瀏覽者必須知道，無論何時(shí)，當(dāng)他們迷失在你的站點(diǎn)瀏覽中時(shí)，都可以通過簡單的一次點(diǎn)擊就能準(zhǔn)確地知道目前所處的位置。Frame(幀,框架)

12、的問題：Frame 你也許會(huì)喜歡它，也許不喜歡。如果你在你的網(wǎng)站上使用幀，你很可能使一個(gè)幀用于導(dǎo)航目的，另一個(gè)幀用于放置內(nèi)容。你可以看見在同一頁上有兩個(gè)被分割的瀏覽窗口，你點(diǎn)擊左邊的幀，只會(huì)改變右邊的內(nèi)容。用幀來組織網(wǎng)站的內(nèi)容，顯然是非常容易的。檢驗(yàn)?zāi)愕腍TML代碼 ：不要在你的網(wǎng)站上放置瀏覽計(jì)數(shù)器。計(jì)數(shù)器會(huì)讓你的網(wǎng)站看起來不夠?qū)I(yè)化，如果瀏覽量不夠的話，還會(huì)起到相反的宣傳作用。最后，內(nèi)容是金，如果能給的瀏覽者一些有價(jià)值的東西，如，信息，建議，或軟件，那么就能吸引瀏覽者經(jīng)常光顧你的網(wǎng)站。為你的站點(diǎn)增加消息板和聊天室，從而提高網(wǎng)站的交互性，使你和你的訪問者交流，讓訪問者彼此交流。 五、頻道欄目劃

13、分 圖1六、代碼段火影忍者function MM_CheckFlashVersion(reqVerStr,msg) with(navigator) var isIE = (appVersion.indexOf(MSIE) != -1 & userAgent.indexOf(Opera) = -1); var isWin = (appVersion.toLowerCase().indexOf(win) != -1); if (!isIE | !isWin) var flashVer = -1; if (plugins & plugins.length 0) var desc = pluginsS

14、hockwave Flash ? pluginsShockwave Flash.description : ; desc = pluginsShockwave Flash 2.0 ? pluginsShockwave Flash 2.0.description : desc; if (desc = ) flashVer = -1; else var descArr = desc.split( ); var tempArrMajor = descArr2.split(.); var verMajor = tempArrMajor0; var tempArrMinor = (descArr3 !=

15、 ) ? descArr3.split(r) : descArr4.split(r); var verMinor = (tempArrMinor1 0) ? tempArrMinor1 : 0; flashVer = parseFloat(verMajor + . + verMinor); / WebTV has Flash Player 4 or lower - too low for video else if (userAgent.toLowerCase().indexOf(webtv) != -1) flashVer = 4.0; var verArr = reqVerStr.spli

16、t(,); var reqVer = parseFloat(verArr0 + . + verArr2); if (flashVer reqVer) if (confirm(msg) window.location = /shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash;   首頁火影介紹角色資料精選壁紙動(dòng)畫選播     火影忍者主題曲 壁紙預(yù)覽     八、截圖首頁圖2照片圖3美文圖4九、結(jié)論(一)網(wǎng)頁設(shè)計(jì)制作需要我們明

17、白:1.簡潔實(shí)用: 這是非常重要的，網(wǎng)絡(luò)特殊環(huán)境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。 2.使用方便: 同第一個(gè)是相一致的，滿足使用者的要求，網(wǎng)頁做得越適合使用，就越顯示出其功能美。3.整體性好: 一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的。 4.網(wǎng)站形象突出: 一個(gè)符合美的標(biāo)準(zhǔn)的網(wǎng)頁是能夠使網(wǎng)站的形象得到最大限度的提升的。 5.頁面用色協(xié)調(diào)，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網(wǎng)頁富有可欣賞性，提高檔次，當(dāng)然雅俗共賞是人人都追求的。 6.交互式強(qiáng): 發(fā)揮網(wǎng)絡(luò)的優(yōu)勢(shì)，是每個(gè)使用者都參與到其中來，這樣的設(shè)計(jì)才能算成功的設(shè)計(jì)。這樣的網(wǎng)頁才算真正的美的設(shè)計(jì)。不知不覺網(wǎng)頁設(shè)計(jì)的課程將要結(jié)束了，這門課程所包含內(nèi)容的豐富是讓我從沒有想到的。你也許會(huì)認(rèn)為所有的這些都會(huì)是一種限制；不錯(cuò)，如果運(yùn)用不當(dāng)，它們確實(shí)是會(huì)成為一種約束。不管怎樣，當(dāng)你開始設(shè)計(jì)你的網(wǎng)站時(shí)，要努力去這樣做。不要跟隨上述所有的規(guī)則，