網(wǎng)站設(shè)計報告

PAGEPAGE1課程設(shè)計說明書題目：網(wǎng)站設(shè)計——吃喝玩樂網(wǎng)系部：信息管理系專業(yè)：信息管理與信息系統(tǒng)班級：0901班組長：程昆(學(xué)號:20091110102015)組員：汪黃河(學(xué)號:20091110102029)陳瑾(學(xué)號:20091110102022)設(shè)計時間：2012年5月

前言隨著互聯(lián)網(wǎng)的飛速發(fā)展，人類正進入一個前所未有的信息化社會?；ヂ?lián)網(wǎng)已經(jīng)成為世界上覆蓋面最廣、規(guī)模最大、信息資源最豐富的計算機信息網(wǎng)絡(luò)，它不僅給人們提供了一個全新的獲取信息的手段，正在逐步改變我們的生活、學(xué)習(xí)和工作方式。作為互聯(lián)網(wǎng)的主要組成部分，網(wǎng)頁和網(wǎng)站得到了極為廣泛的應(yīng)用，企業(yè)、公司和機構(gòu)通過網(wǎng)站能夠宣傳自己的技術(shù)和產(chǎn)品，個人通過主頁展示自己的風(fēng)采，我們可以從不同的網(wǎng)站獲取需求的信息，掌握網(wǎng)頁制作和網(wǎng)站建設(shè)技術(shù)成為了我們的需求。因此我們學(xué)習(xí)制作了吃喝玩樂這個網(wǎng)站，通過實際操作掌握網(wǎng)站制作的過程。1、設(shè)計準(zhǔn)備(1)開發(fā)環(huán)境搭建：DreamweaverDreamweaver是集網(wǎng)頁制作和網(wǎng)站管理于一身的網(wǎng)頁編輯器，具有“所見即所得”的可視化特點，利用它可以輕而易舉地制作出跨越平臺和瀏覽器限制的網(wǎng)站。Dreamweaver是創(chuàng)建和管理站點的工具，使用它不僅可以創(chuàng)建單獨的文檔，還可以創(chuàng)建完整的Web站點。在Dreamweaver中，站點指某個Web站點的文檔的本地或遠(yuǎn)程存儲位置。(2)知識準(zhǔn)備通過一個學(xué)期的網(wǎng)頁設(shè)計課程的學(xué)習(xí)，掌握了一些網(wǎng)頁制作的技巧，再通過網(wǎng)上信息查找補充知識的空白，達(dá)到完成作業(yè)的知識標(biāo)準(zhǔn)。A、網(wǎng)頁語言

HTML語言（HyperTextMark-upLanguage）超文本標(biāo)記語言；HTML不是程式語言，如C++和Java之類，它只是標(biāo)記語言，基本上只要明白了各種標(biāo)記的用法就是學(xué)懂了HTML，HTML的格式非常簡單，只是由文字及標(biāo)記組合而成，于編輯部方面，任何文字編輯器都可以，只要能將檔案存為文本格式即可，如果你覺得麻煩的話可以使用專門的網(wǎng)頁編輯工具當(dāng)然更好了。

B、網(wǎng)頁工具

MacromediaDreamweaver

Adobe公司的Macromedia公司的Dreamweaver是相當(dāng)優(yōu)秀的網(wǎng)頁制作工具，功能強大，操作方便，代碼簡潔，有強大的動態(tài)網(wǎng)頁設(shè)計能力，與Fireworks、Flash等軟件結(jié)合緊密，受到大多數(shù)專業(yè)網(wǎng)頁設(shè)計者的青睞。C、網(wǎng)頁編輯

將Photoshop設(shè)計的圖，用切片工具，切割好，導(dǎo)出html文件和圖片(可以按Ctrl+Alt+Shift+s組合鍵實現(xiàn)功能);用Dreamweaver打開HTML文件，對它進行重新排版，編輯一下，將多余的圖片和表格刪除；一個網(wǎng)頁文件成功完了。

D、動畫制作

你的網(wǎng)頁做好了，為了更好看，當(dāng)然得做動畫呀；常見的動畫主要有Gif動畫和Flash動畫。你可以用Firework軟件來設(shè)計Gif動畫；用Flash軟件來做Flash動畫。將做完的動畫用Dreamweaver軟件插入到網(wǎng)頁中，替換原來的圖片就行了。

E、在網(wǎng)頁中加入超鏈接

當(dāng)你做了很多個頁面后，你在Dreamweaver中選擇關(guān)鍵字，插入超鏈接，鏈到相應(yīng)的網(wǎng)頁中就可以了；那么你的一個靜態(tài)網(wǎng)站就做成了。F、音樂添加(3)人員分工本網(wǎng)站分為首頁、旅游風(fēng)光、假日小憩、特色小吃、小吃街、娛樂休閑、購物導(dǎo)航七個欄目，其中程昆負(fù)責(zé)主頁、娛樂休閑和購物導(dǎo)航三個欄目的相關(guān)網(wǎng)頁制作，汪黃河負(fù)責(zé)特色小吃和小吃街兩個欄目的相關(guān)網(wǎng)頁制作，陳瑾負(fù)責(zé)旅游風(fēng)光和假日小憩兩個欄目的相關(guān)網(wǎng)頁制作。(4)時間安排2012年4月28-5月2日網(wǎng)站主題確定及相關(guān)任務(wù)分配2012年5月3日-5月20日2012年5月21日-5月31日2012年6月1日-6月5日將各部分報告進行總結(jié)合并2、需求分析(1)網(wǎng)站開發(fā)目的旅游風(fēng)光主要是讓有旅游計劃的人更方便、更全面的了解到武漢的旅游景點，讓他們感受到各景區(qū)的文化與環(huán)境，讓他們的旅途會更愉快。有了快樂的旅行，但是在玩累了的時候是需要休息的。假日小憩將幫助我們找到適合我們的旅館，了解各方面的信息，同時還可以網(wǎng)上訂購。一個地方的文化最好的體現(xiàn)就是在古建筑以及小吃兩個方面，為了更好的向大家介紹武漢當(dāng)?shù)靥厣幕?，所以介紹武漢有哪些著名的本土小吃以及有哪些外來小吃并且逐漸形成了武漢的當(dāng)?shù)靥厣亲钅軌蛑苯臃磻?yīng)武漢這個城市的面貌以及歷史文化。武漢的“過早”文化早已深入人心，開發(fā)這個網(wǎng)站目的是為了向旅客朋友們介紹武漢獨特的“過早”文化，還有這里最正宗的特色小吃以及在哪里能遲到這些最正宗的小吃，以減少來武漢游玩的朋友們一些不必要的麻煩，例如，除了熱干面和鴨脖子以外，來到武漢還應(yīng)該吃些什么，去哪個地方吃什么東西才能既劃算又美味呢？去哪里吃東西環(huán)境優(yōu)美又比較有情調(diào)呢？我們這個網(wǎng)站就可以滿足顧客不同的需求，達(dá)到方便快捷、滿意服務(wù)的效果。一個地方的娛樂文化能反映地方特色，因此了解這一點也成為了必要，而購物方面，大家的生活都離不開購物，在購物中可以感受到快樂(2)功能簡介“特色小吃”主要介紹了武漢本地各種美味的早點，品種豐富，樣式齊全，匯集美食的各種烹飪方法烹飪而成的各式美味以及部分食物的制作過程；“小吃街”主要介紹的是在武漢本地哪些地方可以吃到這些美食，又可以根據(jù)自身的需求決定到哪種環(huán)境里去品嘗武漢的美食，享受武漢獨特的風(fēng)味，欣賞武漢獨特的歷史文化古韻。旅游風(fēng)光：收集了武漢各旅游景點的圖片以及文化背景，還介紹了各景點的特點以及一些旅游路線介紹，讓旅客們在出游之前更好的了解自己即將去的目的地，讓整個旅途更輕松更愉快。娛樂休閑向大家展示了武漢的各色文化活動，激勵了大家參與文化活動的決心；購物導(dǎo)航為大家提供了最好最方便的購物信息，有效的避免了在購物時盲目購物，費時費力的情形。3、技術(shù)分析(1)網(wǎng)站名稱吃喝玩樂網(wǎng)(2)網(wǎng)站欄目劃分A.首頁B.旅游風(fēng)光：分為三個子欄目，山水古跡、商業(yè)街和游樂園。主要介紹武漢市內(nèi)的所有旅游景點，讓游客體驗武漢的自然風(fēng)情。C.特色小吃：向大家介紹武漢各式各樣的小吃，讓人不禁想要嘗試一番。D.小吃街：向大家介紹在武漢有名的小吃街，讓大家能夠有機會在一個地方集中的吃到武漢的各種美食。E.假日小憩：為大家提供旅行中的住宿介紹，讓你在玩得開心的同時能夠好好休息，養(yǎng)足精神。F.娛樂休閑：向大家提供各種文化活動和都市休閑的信息，讓大家在忙碌的工作之余也能感受到文化的氣息和都市生活的繁華與歡樂。G.購物導(dǎo)航：當(dāng)你想要購買某件產(chǎn)品卻不知道該到何處時，通過購物導(dǎo)航查找你所需要的商品在哪里出售，既省時又省力，還可以感受到購物的歡樂。(3)網(wǎng)站風(fēng)格與目錄選擇網(wǎng)站的風(fēng)格為簡單介紹相關(guān)內(nèi)容.目錄選擇為層次式目錄。層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu)（如DOS的目錄結(jié)構(gòu)）。它是按照網(wǎng)頁之間的包含關(guān)系組織而成。層次結(jié)構(gòu)采用一對一的形式，首頁鏈接指向一級頁面，一級鏈接指向二級等等，其結(jié)構(gòu)看起來就像蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進入，一級級退出。層次型結(jié)構(gòu)簡單而且直觀，條理清晰，能將所有的內(nèi)容劃分得非常清晰且便于理解。訪問者明確知道自己在什么位置，不容易“迷路”。所以幾乎所有的網(wǎng)站都采用這種結(jié)構(gòu)來進行總體的欄目規(guī)劃，即將所有的內(nèi)容先分成若干個大欄目，然后再將每個大欄目細(xì)分成若干個小欄目，以此類推直到不用再細(xì)分為止。層次型結(jié)構(gòu)也有不好的地方，就是效率較低。用戶如果要訪問最底層的網(wǎng)頁不得不按照層次從上到下一級一級地訪問，必須繞經(jīng)首頁，最終到達(dá)想要訪問的網(wǎng)頁。(4)網(wǎng)站目錄結(jié)構(gòu)設(shè)計首頁購物導(dǎo)航娛樂休閑小吃街特色小吃假日小憩旅游風(fēng)光購物導(dǎo)航娛樂休閑小吃街特色小吃假日小憩旅游風(fēng)光商業(yè)街商業(yè)區(qū)特色文化精彩娛樂小吃街介紹飲品小貼士小吃簡介紀(jì)念館游樂園山水古跡商業(yè)街商業(yè)區(qū)特色文化精彩娛樂小吃街介紹飲品小貼士小吃簡介紀(jì)念館游樂園山水古跡各旅游景點詳細(xì)介紹各旅游景點詳細(xì)介紹4、制作過程及要點(1)首頁的制作過程A．確定首頁的功能模塊。包括網(wǎng)站名稱和LOGO，主菜單，搜索，郵件列表，導(dǎo)航，版權(quán)，基本框架，主要子欄目等。B.設(shè)計首頁的版面在功能模塊確定后，開始設(shè)計首頁的版面。a.對首頁的基本內(nèi)容布局進行規(guī)劃b.設(shè)計網(wǎng)站的主框架，采用表格技術(shù),添加網(wǎng)站LOGO和符合網(wǎng)站特點的圖片。c.設(shè)計導(dǎo)航條，將網(wǎng)站的主要欄目呈現(xiàn)在導(dǎo)航條中。d.對每個欄目在首頁上進行簡單的內(nèi)容呈現(xiàn)，采用表格布局的方法。e.設(shè)計用戶注冊和登錄頁面f.添加友情鏈接C.處理技術(shù)和頁面上的細(xì)節(jié)a.設(shè)置字體和鏈接顏色;b.調(diào)節(jié)圖片和背景顏色；c.調(diào)節(jié)首頁中內(nèi)容的布局；d.進行細(xì)節(jié)上的修復(fù)。(2)關(guān)鍵頁面的制作旅游風(fēng)光頁面：利用表格給整個頁面布局，從上到下主要分為三部分，分別表示的內(nèi)容是：山水古跡、商業(yè)街和游樂園。而且每個部分的鏈接都分別鏈接到：山水古跡、商業(yè)街和游樂園的頁面。主導(dǎo)航欄下方有一個滾動的子導(dǎo)航欄，其右邊是一個排列的圖片組合（同時這些圖片都具有各不相同的行為，再點擊，會顯示出晃動、顯示/漸隱、擴大/縮小等效果）；在這排圖片下方是插入的一行四列的嵌入式表格，用來描述各個圖片；再下方的左邊是兩張具有放大效果的圖片，右邊的圖片可以直接連接到商業(yè)街欄目；最下方的一排圖片都具有晃動行為，其描述文字也是用嵌入式表格實現(xiàn)的而且都可以鏈接到相應(yīng)的頁面。山水古跡頁面：利用表格布局后，應(yīng)用表單元素的各種方法可以制成一個新用戶注冊的表單，同樣可以制成一個用戶登錄的表單，分別采用插入嵌入式表格的方法安放在主導(dǎo)航欄下方的左邊和右邊；用戶登錄表單下又利用插入嵌入式表格的方法設(shè)置一個一行三列的文本欄，一共有若干個鏈接，在“更多…”中，有形成另一個子鏈接，下面會有描述；最下面的一排圖像和氣描述文字都可以直接鏈接到木蘭天池、武漢植物園、湖北省博物館、落雁島這些頁面。木蘭天池頁面：利用表格布局后，用圖文混排的方式排列了主圖和氣主要描述文字；在其下方有若干圖片形成了圖片放大效果，鼠標(biāo)移至上面就會有放大的動態(tài)；同時對整個頁面設(shè)置有動感模糊的效果，有向右上飄的模糊的陰影。武漢植物園、湖北省博物館、落雁島頁面：利用表格布局后，采用了圖文混排的方式，然后制造了圖片放大效果。Tesexiaochi.htm的制作：總體采用的是表格布局方式，亮點在于頁面左側(cè)中間部分的‘熱點推薦’以及左下部分的‘美食小貼士’、‘美食推薦’。這兩部分的圖片都是利用其它軟件進行截圖和添加文字的操作，進行表格布局然后添加超鏈接來實現(xiàn)的。左側(cè)圖片自動播放是通過插入制作的圖片查看器來實現(xiàn)，而右側(cè)的圖片自左向右循環(huán)滾動式通過代碼來實現(xiàn)，右中下部分實際就是利用div對圖片進行布局。Xiaochijie.html的制作：利用其它軟件制作一個動態(tài)Flash網(wǎng)頁，在其中添加圖片和文字，進行格式和效果的編排，添加超鏈接等便制作完成這一頁面。Tesexiaochi.html的制作：這一頁面主要由左側(cè)導(dǎo)航列表和右側(cè)的圖文混合排列構(gòu)成，當(dāng)然用到的最基礎(chǔ)的東西還是表格布局。頁面正中間采用了一個‘鼠標(biāo)經(jīng)過圖片’圖片變換的效果，整個正文部分則是采用文-圖-文由上而下排列的布局格式，使冗長的文字不會顯得單調(diào)，該頁面還是用的網(wǎng)頁的外部鏈接，可以通過互聯(lián)網(wǎng)來訪問更多關(guān)于小吃的信息。Xiaotieshi.html的制作：采用分界線將每一項小貼士分割開來，使容易區(qū)分并且頁面美觀。先是圖片在左文字在右，往下接著是圖片在上文字居中在下，然后往下是文字在左圖片在右，交叉布局是頁面看起來簡潔舒服。并且文字部分是采用的文本框的形式，可以自由滾動滾動條來查看文字信息。Yinpin.html的制作：頁面布局簡單溫和，主要將頁面分為左右兩部分。左側(cè)部分利用代碼實現(xiàn)文字自下而上滾動，右側(cè)利用圖片查看器功能實現(xiàn)。在頁面中還添加了背景音樂設(shè)置為自動播放，添加背景顏色并且利用色差效果來實現(xiàn)板塊內(nèi)部區(qū)域的劃分。Xcjjieshao.html的制作：這一頁面只是簡單的將圖片文字進行混合排列，左側(cè)部分為鏈接列表，主要采用的是錨點鏈接技術(shù)，右側(cè)添加錨點標(biāo)記，左側(cè)鏈接至對應(yīng)的錨點處，省去了長時間滾動的麻煩。娛樂休閑頁面：利用表格給整個頁面布局，網(wǎng)頁最上方是網(wǎng)頁LOGO和導(dǎo)航條，然后中間分為左右兩個部分，左邊是娛樂休閑內(nèi)容的總體總結(jié)，包括文化休閑、精彩娛樂、動感健身、休閑公園等板塊，文化活動又包括特色文化活動和主要文化場館等方面，精彩娛樂包括KTV和酒吧兩個方面，底下有三張代表網(wǎng)站其它欄目的圖片用來連接到本網(wǎng)站的其他欄目，使得能更方便地瀏覽本網(wǎng)站的其他網(wǎng)頁，右邊分為三個方面的內(nèi)容，介紹特色文化活動、文化場所和精彩娛樂三個板塊，采用了圖片滾動技術(shù)，作為娛樂休閑欄目的分主頁，主要介紹這一部分主要包括了哪些內(nèi)容，全面的介紹了娛樂休閑方面的內(nèi)容，方便了大家尋找娛樂休閑方面的內(nèi)容。特色文化活動頁面：本網(wǎng)頁采用表格布局，首先用了一個圖片查看器，然后整個頁面分為六個板塊，分別為演出、展覽、社會文化活動、電影、講座/論壇、每周新書等六個板塊，在每個板塊都列舉了相對應(yīng)的活動信息，清晰明了地向網(wǎng)友展示了各種活動的信息，如2012年武漢市公益文化項目（演出）、蘭江山第.傾國傾城費玉清2012武漢演唱會、迎風(fēng)飄揚的旗——姚峰合唱作品音樂會、2012年武漢市公益文化項目（展覽）、“新吳門•六月風(fēng)——蘇州美術(shù)作品邀請展”...、美術(shù)館舉辦“生活中的羅漢”韋智仁作品展、十一日談——楊詰蒼個展、美術(shù)館舉辦“第三屆全國旅游紀(jì)念品設(shè)...、美術(shù)館舉辦“倫敦2012——奧運海報展...等內(nèi)容，為大家更好地集中了解各種活動信息提供了便利。精彩娛樂頁面：本網(wǎng)頁利用表格給整個頁面布局，網(wǎng)頁最上方是網(wǎng)頁LOGO和導(dǎo)航條，然后中間分為左右兩個部分，左邊是娛樂休閑內(nèi)容的總體總結(jié)，包括文化休閑、精彩娛樂、動感健身、休閑公園等板塊，方便在瀏覽的時候直接點擊跳躍到其他頁面，文化活動又包括特色文化活動和主要文化場館等方面，精彩娛樂包括KTV和酒吧兩個方面，底下有三張代表網(wǎng)站其它欄目的圖片用來連接到本網(wǎng)站的其他欄目，使得能更方便地瀏覽本網(wǎng)站的其他網(wǎng)頁，右邊主要介紹精彩娛樂方面的詳細(xì)信息，插入了體現(xiàn)文化的Flash視頻，介紹了武漢市內(nèi)的KTV和酒吧的相關(guān)信息，為大家提供了享受武漢的都市生活的途徑，在介紹時用到了表單文本框，避免了整個網(wǎng)頁頁面文字過多的局面。如“武漢市歡樂空間投資管理有限公司成立于2005年，是一家集投資和經(jīng)營管理為一體的綜合性娛樂投資管理公司。我們秉承"以人為本、永續(xù)經(jīng)營"的經(jīng)營理念，名下經(jīng)營的歡樂空間量販?zhǔn)終TV遍布武漢三鎮(zhèn)，總占地面積2萬平方米，各類豪華KTV包廂共有300余間，設(shè)計風(fēng)格大氣、時尚、前衛(wèi)，展現(xiàn)給您一種全新的大眾娛樂和健康時尚的消費形象……”這一段文字如果在網(wǎng)頁上直接全部顯示的話會顯得文字過多，整個版面都是文字，不夠美觀，但是用了文本框之后文字只占到幾行板塊，既美觀又能完整地展現(xiàn)所需要表達(dá)的內(nèi)容。購物導(dǎo)航方面：利用表格給整個頁面布局，網(wǎng)頁最上方是網(wǎng)頁LOGO和導(dǎo)航條，然后中間分為左右兩個部分，左邊是購物導(dǎo)航內(nèi)容的總體總結(jié)，包括武漢商業(yè)區(qū)和武漢商品導(dǎo)航兩個方面的內(nèi)容，武漢商業(yè)區(qū)又包括航空路商業(yè)區(qū)、街道口商業(yè)區(qū)、中南商業(yè)區(qū)、江漢路商業(yè)區(qū)、光谷商業(yè)區(qū)、司門口商業(yè)區(qū)等方面的內(nèi)容，武漢商品導(dǎo)航又包括皮革、金飾珠寶、鐘表、數(shù)碼產(chǎn)品、農(nóng)產(chǎn)品、手工藝品、服飾、參茸海味等方面的內(nèi)容，底下有三張代表網(wǎng)站其它欄目的圖片用來連接到本網(wǎng)站的其他欄目，使得能更方便地瀏覽本網(wǎng)站的其他網(wǎng)頁，右邊分為兩個部分，分別用文字和圖片介紹武漢商業(yè)區(qū)的詳細(xì)內(nèi)容和武漢商品導(dǎo)航方面的詳細(xì)內(nèi)容。向大家展示了武漢商業(yè)區(qū)的特點和武漢商品的分類。商業(yè)區(qū)方面：利用表格給整個頁面布局，網(wǎng)頁最上方是網(wǎng)頁LOGO和導(dǎo)航條，然后中間分為左右兩個部分，左邊是購物導(dǎo)航內(nèi)容的總體總結(jié)，包括武漢商業(yè)區(qū)和武漢商品導(dǎo)航兩個方面的內(nèi)容，右邊詳細(xì)介紹了武漢商業(yè)區(qū)中航空路商業(yè)區(qū)、街道口商業(yè)區(qū)、中南商業(yè)區(qū)、江漢路商業(yè)區(qū)、光谷商業(yè)區(qū)、司門口商業(yè)區(qū)等的詳細(xì)介紹，向大家介紹了各商業(yè)區(qū)的具體情況，展示了武漢商業(yè)區(qū)的風(fēng)采，并且在此網(wǎng)頁中添加了導(dǎo)航搜索欄，運用到了列表菜單、文本框、按鈕等內(nèi)容。（3）關(guān)鍵技術(shù)的制作過程1.圖片查看器：①新建一個文檔xc.html，選擇[插入]\[媒體]\[圖像查看器]菜單命令，在彈出的“保存Flash元素”對話框中“文件名”輸入任意數(shù)字或字符，“保存類型“：FlashMovie（*.swf）。②在如圖1的浮動面板中進行設(shè)置。圖1“Flash元素”面板圖2“編輯ingURLs數(shù)組”對話框③單擊“imgURLs”后面的“編輯”按鈕，彈出如圖2所示的“編輯imgURLs數(shù)組”對話框，單擊“img1.jpg”后面的“打開文件”按鈕，選擇一張圖像，同理往下添加④分別對“showControls”、“slideAutoPlay”、“slideDelay”、“transitionsType”進行屬性設(shè)置，最后進行保存操作即可。2.圖片（或文字）循環(huán)滾動：首先，在該圖片（或文字）板塊中添加所需要的所有圖片（或文字），然后調(diào)整表格大小。進入代碼部分，在整個<table>外部添加實現(xiàn)滾動效果的代碼，保存運行即可。3.圖像輪換：輪換圖像即鼠標(biāo)經(jīng)過圖像，是一種在瀏覽器中查看并使用鼠標(biāo)指針移過它時發(fā)生變化的圖像。鼠標(biāo)經(jīng)過圖像由兩個圖像組成，主圖像（首次載入頁時顯示的圖像）和次圖像（當(dāng)鼠標(biāo)指針移過主圖像時顯示的圖像）。鼠標(biāo)經(jīng)過圖像中的兩個圖像其大小應(yīng)相等，如果兩個圖像大小不同，Dreamweaver將自動調(diào)整第二個圖像的大小以匹配第一個圖像的大小。將插入點放置在要顯示鼠標(biāo)經(jīng)過圖像的位置②在“插入欄”中單擊“常用”選項卡，然后單擊“圖像\鼠標(biāo)經(jīng)過圖像”按鈕③打開“插入鼠標(biāo)經(jīng)過圖像”對話框，在該對話框中完成各項參數(shù)的設(shè)置操作：a)在“圖像名稱”文本框中輸入圖像的名稱。b)在“原始圖像”文本框后單擊按鈕并選擇載入頁面時顯示的圖像，或直接在文本框中輸入圖像文件的路徑。c)在“鼠標(biāo)經(jīng)過圖像”文本框后單擊按鈕并選擇鼠標(biāo)指針滑過原始圖像時顯示的圖像即可。4.文本框：選擇“插入記錄/表單/文本域”，設(shè)置文本域的屬性值，然后將需要顯示的文本插入顯示區(qū)域內(nèi)，保存即可。5.錨點標(biāo)記：創(chuàng)建命名錨記：將插入點放在需要命名錨記的地方，選擇[插入][命名錨記]菜單命令；在打開的“命名錨記”對話框的“錨記名稱”文本框中，輸入錨記名稱，如a，并單擊“確定”按鈕，錨記標(biāo)記出現(xiàn)在插入點處。選擇要創(chuàng)建命名錨記的文本或圖像，在屬性面板的“鏈接”文本框中，輸入一個數(shù)字符號“#”和錨記名稱，如“#a”。選擇“插入”>“媒體”>“Flash視頻”。6、Flash視頻:在“插入Flash視頻”對話框中，從“視頻類型”彈出式菜單中選擇“漸進式下載視頻”。關(guān)于Flash視頻使用Dreamweaver中的“插入Flash視頻”命令，可將Flash視頻內(nèi)容插入Web頁面，而無需使用Flash創(chuàng)作工具。該命令可以插入Flash組件；當(dāng)您在瀏覽器中查看它時，它顯示您選擇的Flash視頻內(nèi)容以及一組播放控件?！安迦隖lash視頻”命令提供以下選項，用于將視頻內(nèi)容發(fā)送給站點訪問者：累進式下載視頻將Flash視頻（FLV）文件下載到站點訪問者的硬盤上，然后播放。但是，與傳統(tǒng)的“下載并播放”視頻傳送方法不同，累進式下載允許在下載完成之前就開始播放視頻文件。7、跑馬燈技術(shù)：Flash做的一種效果，先建一層（取名為文字層），在這層中輸入文字，再建一層（圖片層），導(dǎo)入一幅圖片，把圖片設(shè)置在文字下方從左向右運動（漸變動畫），最后在文字層上點擊右鍵，選擇遮罩，按Ctrl+Enter即可觀看效果。8、鏈接：鏈接也稱超級鏈接，是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，所指向的目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是圖片、電子郵件地址、文件、甚至是應(yīng)用程序。圖片放大：使圖樣、圖像、聲音、功能等在鼠標(biāo)停留的時候變大，以方便觀看。9、spry選項卡式面板：有了Spry就可以使用HTML、CSS和極少量的JavaScript將XML數(shù)據(jù)合并到HTML文檔中，創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜單欄），向各種頁面元素中添加不同種類的效果。10、用戶注冊表：記錄用戶的相關(guān)信息，使用戶在今后訪問此網(wǎng)站時更方便。(4)關(guān)鍵代碼的實施1.滾動代碼實現(xiàn)：<marqueedirection=leftscrollamount=10scrolldelay=200onmouseover='this.stop()'onmouseout='this.start()'height=20><tablewidth="245"height="232"border="0"><tr><thheight="31"scope="row"><spanclass="STYLE7"><ahref="yinpin.html">飲品專區(qū)</a></span></th></tr><tr><thheight="195"scope="row"><ahref="yinpin.html"onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image18','','img/5193164c-45ab-4d3a-bde7-cab5fdfb6a26.jpg',1)"><imgsrc="img/cartoon_mother_day_lovely_children_illustraion_60394_m.jpg"name="Image18"width="242"height="230"border="0"id="Image18"/></a></th></tr></table></marquee>2.div標(biāo)簽舉例：<divalign="center"><ahref="tesexiaochi.html"><imgsrc="img/09311933J-0.jpg"width="164"height="167"border="0"/></a><br/><br/>[生煎包]<br/></div>3.動態(tài)Flash網(wǎng)頁部分代碼：<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="776"height="350"align="top"><paramname="wmode"value="transparent"><paramname="movie"value="images/flash.swf"/><paramname="quality"value="high"/><embedsrc="images/flash.swf"width="776"height="350"align="top"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"wmode="transparent"></embed></object>4.無顯示背景音樂自動播放：<embedsrc="images/南拳媽媽-再見小時候.wma"width="0"height="0"></embed>5.跑馬燈標(biāo)記：<marqueebehavior="scroll"direction="up"scrolldelay="200"onmouseover="stop()"onmouseout="start()"></marquee>6、圖片鏈接：<imgsrc="image/donghuhaiyangshijie.jpg"width="200"height="200"/><imgsrc="image/jiangtangongyuan.jpg"width="200"height="200"onclick="MM_effectShake(this)"/><imgsrc="image/zhongshangongyuan.jpg"width="200"height="200"onclick="MM_effectShake(this)"/><imgsrc="image/wuhandongwuyuan.jpg"width="200"height="200"onclick="MM_effectShake(this)"/>7、圖片放大效果：<ulid="lib"><li><ahref="#"><imgsrc="商品/2.jpg"name="lib"width="180"height="200"id="lib"/></a></li><li><ahref="#"><imgsrc="商品/3.jpg"name="lib"width="180"height="200"id="lib"/></a></li></ul>8、spry選項卡式面板：<divid="TabbedPanels1"class="TabbedPanels"><ulclass="TabbedPanelsTabGroup"><liclass="TabbedPanelsTab"tabindex="0">馬哥孛羅酒店</li><liclass="TabbedPanelsTab"tabindex="0">江城明珠豪生大酒店</li></ul><divclass="TabbedPanelsContentGroup"><divclass="TabbedPanelsContent"><p><imgsrc="馬哥貝羅酒店/1.jpg"width="700"height="318"/></p><p><imgsrc="馬哥貝羅酒店/2.jpg"width="700"height="466"/></p><p><imgsrc="馬哥貝羅酒店/3.jpg"width="700"height="452"/></p></div><divclass="TabbedPanelsContent"><p><imgsrc="江城明珠豪生大酒店/1.jpg"width="525"height="700"/></p><p><imgsrc="江城明珠豪生大酒店/3.jpg"width="480"height="640"/></p><p><imgsrc="江城明珠豪生大酒店/4.jpg"width="700"height="460"/></p></div><divclass="TabbedPanelsContent"><p><imgsrc="錦江國際大酒店/1.jpg"width="600"height="450"/></p><p><imgsrc="錦江國際大酒店/2.jpg"width="490"height="275"/></p><p><imgsrc="錦江國際大酒店/5.jpg"width="700"height="933"/></p><p> </p><p> </p></div><divclass="TabbedPanelsContent"><p> </p><p> </p></div><divclass="TabbedPanelsContent">內(nèi)容5</div><divclass="TabbedPanelsContent">內(nèi)容6</div><divclass="TabbedPanelsContent">內(nèi)容7</div></div></div>9、文字滾動效果；<marqueebehavior="scroll"direction="up"scrolldelay="200"onmouseover="stop()"onmouseout="start()"><ul><li><ahref="shanshuiguji.html"target="_blank">山水古跡</a></li><li><ahref="shangyejie.html"target="_blank">商業(yè)街</a></li><li><ahref="youleyuan.html"target="_blank">游樂園</a></li></ul></marquee>10、行為里面的增大/收縮、顯示/漸隱、晃動等效果；<imgsrc="image/huanghelou.jpg"width="150"height="200"onclick="MM_effectShake(this)"/><imgsrc="image/donghu.jpg"width="180"height="200"onclick="MM_effectAppearFade(this,1,100,0,true)"/><imgsrc="image/hubeishengbowuguan.jpg"width="180"height="200"onclick="MM_effectGrowShrink(this,1000,'100%','50%',true,false,true)"/><imgsrc="image/mulantianchi.jpg"width="180"height="200"onclick="MM_effectGrowShrink(this,1000,'50%','100%',true,false,true)"/>11、圖片放大效果；<ulid="lib"><li><ahref="#"><imgsrc="image/jianghanlubuxingjie.jpg"width="150"height="200"/></a></li><li><ahref="#"><imgsrc="image/hubuxiang.jpg"width="180"height="200"/></a></li></ul>12、圖片鏈接；<imgsrc="image/donghuhaiyangshijie.jpg"width="200"height="200"/><imgsrc="image/jiangtangongyuan.jpg"width="200"height="200"onclick="MM_effectShake(this)"/><imgsrc="image/zhongshangongyuan.jpg"width="200"height="200"onclick="MM_effectShake(this)"/><imgsrc="image/wuhandongwuyuan.jpg"width="200"height="200"onclick="MM_effectShake(this)"/>13、文本鏈接。<tdwidth="191"><ahref="youleyuan.html">東湖海洋世界</a></td><tdwidth="195"><ahref="youleyuan.html">漢口江灘</a></td><tdwidth="196"><ahref="youleyuan.html">中山公園</a></td><tdwidth="190"><ahref="youleyuan.html">武漢動物園</a></td></tr></table></td>14、用戶注冊表（表單、文本框、單選框、復(fù)選框、按鈕等）；<h1align="center">新用戶注冊</h1><formname="frminfor"method="post"action="">姓名:<inputtype="text"name="name"/><br/><p></p>性別:<inputtype="radio"name="sex"value="1"checked="checked"/>男<inputtype="radio"name="sex"value="0"/>女<br/><p></p>愛好:<inputtype="checkbox"name="hobby"value="美食"/>美食<inputtype="checkbox"name="hobby"value="音樂"/>音樂<inputtype="checkbox"name="hobby"value="旅游"/>旅游<br/><p></p>職業(yè):<selectname="career"><optionvalue="教師">教師</option><optionvalue="廚師">廚師</option><optionvalue="導(dǎo)游">導(dǎo)游</option><optionvalue="白領(lǐng)">白領(lǐng)</option></select><br/><p></p>個性簽名:<textareaname="intro"rows="2"cols="20"></textarea><br/><p></p><inputtype="submit"value="提交"/></form>15、用戶登錄表；<formmethod="post"action="">用戶名:<inputtype="text"name="username"size="12"/>密碼:<inputtype="text"name="ps"size="10"/><inputname="提交"type="submit"value="登錄"/></form>16、圖片鏈接；<tdwidth="200"valign="top"><p><ahref="mulantianchi.html"><imgsrc="image/mulantianchi.jpg"width="200"height="200"/></a></p><p><ahref="mulantianchi.html">木蘭天池</a></p></td><tdwidth="200"valign="top"><p><ahref="wuhanzhiwuyuan.html"><imgsrc="image/wuhanzhiwuyuan.jpg"width="200"height="200"/></a></p><p><ahref="wuhanzhiwuyuan.html">武漢植物園</a></p></td><tdwidth="200"valign="top"><p><ahref="hubeishengbowuguan.html"><imgsrc="image/hubeishengbowuguan.jpg"width="200"height="200"/></a></p><p><ahref="hubeishengbowuguan.html">湖北省博物館</a></p></td><tdwidth="1020"valign="top"><p><ahref="luoyandao.html"><imgsrc="image/luoyandao.jpg"width="200"height="200"/></a></p><p><ahref="luoyandao.html">落雁島</a></p></td>17、文本鏈接。<tdwidth="189"height="210"align="center"valign="middle"><p><ahref="mulantianchi.html">木蘭天池</a></p><p><ahref="wuhanzhiwuyuan.html">武漢植物園</a></p><p><ahref="huanghelou.html">黃鶴樓</a></p></td><tdwidth="186"align="center"valign="middle"><p><ahref="moshan.html">磨山</a></p><p><ahref="mulanshan.html">木蘭山</a></p><p><ahref="qingchuange.html">晴川閣</a></p></td><tdwidth="218"align="center"valign="middle"><p><ahref="xinhaigemingbowuguan.html">辛亥革命博物館</a></p><p><ahref="hubeishengbowuguan.html">湖北省博物館</a></p><p><ahref="luoyandao.html">落雁島</a></p><p><ahref="tupian.html">更多...</a></p></td>18、圖文混排；<styletype="text/css">p{text-indent:29px;float:left;}img{float:left;}table{filter:Blur(Add=true,Direction=2,Strength=5);}#lib{ margin:0px;padding:0px;list-style-type:none;}#libli{margin:4px;float:left;height:154px;width:164px;}#libimg{border:1pxsolid#333;padding:6px;}#liba:hover{border:1pxsolid#ccc;z-index:1000;}#liba:hoverimg{width:300px;height:280px;position:absolute;left:-50px;top:-40px;clip:rect(-40px,auto,auto,-50px);}#liba{position:relative;}</style>19、動感模糊屬性（Blur屬性）；table{filter:Blur(Add=true,Direction=2,Strength=5);}20、文字滾動欄效果；<tdalign="left"valign="bottom"nowrap="nowrap"><marqueebehavior="scroll"direction="up"scrolldelay="200"onmouseover="stop()"onmouseout="start()"></marquee><p> </p></td>21、圖片錨點連接。<ul><li><ahref="#a1">東湖</a></li><li><ahref="#a1">古德寺</a></li><li><ahref="#a1">歸元寺</a></li><li><ahref="#a1">古琴臺</a></li><li><ahref="#a2">黃鶴樓</a></li><li><ahref="#a2">華中師范大學(xué)</a></li><li><ahref="#a2">湖北省博物館</a></li><li><ahref="#a2">落雁島</a></li><li><ahref="#a3">磨山</a></li><li><ahref="#a3">木蘭山</a></li><li><ahref="#a3">木蘭天池</a></li><li><ahref="#a3">晴川閣</a></li><li><ahref="#a4">青龍山森林公園</a></li><li><ahref="#a4">石榴紅村</a></li><li><ahref="#a4">武漢長江大橋</a></li><li><ahref="#a4">武漢大學(xué)</a></li><li><ahref="#a5">武漢植物園</a></li><li><ahref="#a5">辛亥革命博物館</a></li></ul>22、郵箱連接<divalign="right"><ahref="mailto:4234223@">聯(lián)系我們</a></div>23、Flash視頻：<scripttype="text/javascript">AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','600','height','300','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=../%E5%BD%A9%E4%BA%91%E8%BF%BD%E6%9C%88%E5%8F%A4%E7%AD%9D%E8%87%AA%E5%88%B6%E4%BD%9C%E5%93%81.flv.&autoPlay=false&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive');//endACcode</script><noscript><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"width="600"height="300"id="FLVPlayer">