學號:XXX密級:XXX分類號:XXX編號:XXXXXXX大學XX學院畢業論文題目個人網站的設計與實現期班專業撰寫者指導教師提交日期

個人網站的設計與實現【摘要】本文就個人網站的規劃與建設，以軟件工程的方法對過程進行了分析與研究。本文的主要工作集中在：對Web頁進行概述，主要是對Internet的歷史和開展作了回憶，在Web頁的定義和特性上進行闡述。并對網站開發過程中使用的開發工具和技術作了簡要的介紹。對網站建設中提及到得術語進行了解釋，并對個人網站的由來和開展進行了討論；對自己的個人網站從規劃建設進行了詳細的分析；使用Dreamweaver、Photoshop、Flash等技術實現了個人網站的各種功能并且就網站建設提出了自己的觀點與建議。【關鍵詞】網站DreamweaverHTMLCSS風格創意

PersonalWebsiteDesignandImplementation【Abstract】Thegroundworkofthistextisconcentratedon:Goonbecauseitsumup,whosenameismainlyactasandreviewatdevelopmentsofhistoryagainstInternets,forWebthedefinitionsofpagesgoonandexplainatcharacteristics.Andhasdonebriefintroductiontothedevelopinginstrumentandtechnologythatareusedinthecourseofdevelopingofwebsite.ThegettingundermoreconstructionaboutWebsitementiongoonandexplainforpersonaltheoriginsoftheWebsitegoonanddiscussatdevelopmentsattermthatget.ThegettingWebsitepersonalplanningtobuildingdetailedmoreanalysisabouttheoneone’sown.TheuseofDreamweaver,Photoshop,Flashandothertechnologiestoachieveavarietyofmysitefeature.FromWebsitebuildandproposeone’sownviewandsuggestions.【Keywords】WebsiteDreamweaverHTMLCSSstylecreative

目錄第一章緒言5第一節Web頁概述5第二節開發工具的介紹6第二章個人網站設計分析9第一節相關術語9第二節個人網站的由來和開展11第三節個人網站的設計和規劃11第三章個人網站的設計過程14第一節創立站點14第二節列出表格、框架、層14第三節網頁文字、圖像及多媒體元素的添加15第四節關于錨鏈接和CSS樣式17第四章網站設計的心得18第一節關于網站的質量18第二節網頁中的色彩搭配18第三節圖像、著名插件、導航按鈕的使用19第五章局部源代碼21第六章結束語23致謝24參考文獻25第一章緒言在已跨入21世紀的今天，人類使用和學習信息的方式以及信息的包裝方式正在進行著不可阻擋的革命，這次革命將比印刷術的出現所產生的影響以及對社會開展的推動遠為復雜而巨大。目前，我國上網的人口已超過1億，成為世界上網民最多的國家，許多人在需要查詢信息，首先想到的就是上網。網站的迷人之處在于綜合使用文本、圖像、聲音、動畫和視頻信息及內容，具有豐富的多媒體表現與互動特點，無可置疑，網站已成為最吸引人的也是最有效的信息傳遞手段和方式。隨著網絡技術的開展，各類網站紛紛出現。個人網站也成為一種時尚。越來越多的人希望擁有自己的網站，開辟網絡世界的一片天地，展示自己的才華和風格。第一節Web頁概述一、Web根本知識Web〔WorldWideWeb,簡稱WWW，又稱萬維網〕是目前Internet上應用最廣泛也是最重要的信息效勞類型，它的影響已經進入了Internet上的廣告、新聞、電子商務和展示信息等各個效勞領域。Web采用瀏覽器/效勞器〔B/S〕工作模式，其運作模式可以描述為：請求→處理→應答。Web以超文本標記語言HTML〔HyperTextMarkupLanguage〕與超文本傳輸協議〔HyperTextTransferProtocol〕為根底，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。Web將位于全世界互聯網上不同網址的相關信息有機地編織在一起。在Web效勞方式中，信息以頁面〔或稱Web頁〕的形式存儲在Web效勞器中，這些頁面采用超文本的方式對信息進行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些到頁面的鏈接信息由統一資源定位器URL(UniformResourceLocator)維持。用戶通過客戶端應用程序〔即瀏覽器〕向Web效勞器發出請求，效勞端根據客戶端的請求將保存在效勞器中的某個頁面返回給客戶端，瀏覽器接收到頁面后對其進行解釋，最終將信息以圖、文、聲并茂的形式呈現給用戶。Web效勞的特點在于高度的集成性，它能夠實現不同類型的信息〔如文本、圖像、聲音、動畫和視頻等〕和效勞〔如New、FTP、Telnet、Gopher及Mail等〕的無縫鏈接，特別適合于廣域網中的信息組織、檢索與顯示。二、Web關鍵技術在信息技術領域中Web技術幾乎聚集了當前信息處理的所有技術手段，以求最大限度地滿足人性化的特點，Web界面五顏六色，既有文字、彩圖、動畫、聲音、視頻和一些相關信息或目錄摘要，還可根據需要進入你想去的任何地方。只要你愿意或是你能想到的效勞，Web幾乎都能實現。Web技術涉及諸多技術領域：〔一〕網絡硬件技術從兩臺或多臺機器組成的對等網，到主機控制的以太網，再到活潑生動的因特網，每一處都需要有特定的硬件支持。1968年，當“LOGIN〞的“LO〞從美國加州洛杉磯分校的電腦屏幕跳到斯坦福大學的電腦屏幕上時，標志著人類首次組網成功。組網技術經過幾十年的錘煉，而今已經相當成熟了。網絡硬件技術包括很多方面，其主要的作用就是把網絡中的各種資源通過相關網絡連接設備連接起來，實施網絡通信和到達共享網絡資源的目的。〔二〕Web管理技術網絡管理技術是一個永久的話題。網絡管理的難點是平安性問題，涉及到防止來自內部和外部的攻擊，這對管理員自身的技術是一個嚴峻的考驗。一個合格的網管人員，除了管好網絡，還得和黑客做技術上的較量。網絡管理涉及的方面可謂種類繁多，簡單地說，網絡管理就是為保證網絡系統能夠持續、穩定、平安、可靠和高效地運行，不受外界干擾，而維持網絡系統設施所采取的一系列方式和措施。網絡管理由網管員通過駕馭網絡操作系統和網絡管理軟件來實現。Web管理那么是在網絡管理的根底上，針對網絡建設和維護所進行的一系列管理。諸如架設Web效勞器、文件傳輸效勞器、郵件效勞器、域名效勞器、代理效勞器以及用戶管理和計費管理等等。

第二節開發工具的介紹一、Dreamweaver8.0———夢幻網頁的編制者Dreamweaver是創立和管理網頁的專業化可視編輯器。使用Dreamweaver可以輕松創立跨平臺、跨瀏覽器的頁面。Macromedia的RoundtripHTML技術允許用戶隨意導入HTML文檔而無需重新設置代碼格式。Dreamweaver可以為用戶做到：使用動態HTML功能〔例如具有動態效果的層和行為〕而不用寫一行代碼。它甚至可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發生地錯誤。Dreamweaver還是一個完全自定義的應用程序。用戶可以創立自己的對象和命令修改菜單和快捷鍵，設置編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區組件有以下假設干種：〔一〕文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。〔二〕裝載器中包含一些翻開和關閉常用檢查器和模板的按鈕。〔三〕對象工具欄包含創立不同類型的對象〔例如圖像、表格和層等〕的按鈕。〔四〕屬性檢查器顯示選定對象的屬性。〔五〕快捷菜單可以使用戶對當前選擇或區域快速執行某些命令。〔六〕可固定的浮開工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中二、MicromediaFlash8.0———網頁動畫的制作軟件MicromediaFlash8.0用于web站點的交互式的矢量圖形和動畫的制作，它可制作出用于瀏覽時的導航控制、制作動畫圖標、帶同步聲音的大段的動畫，創立出生動的富于表現力的網頁。Flash中的圖形都是矢量的，占據存儲空間較少，因而下載時間短，且能很好地適應瀏覽者不同尺寸的屏幕。Flash的交互性的大局部設置就在Action和FsCommand里，通過對Action和FsCommand的設置，你可以隨意的設置各事件發生的效果，還有對變量及函數的設置。Flash以流控制技術和矢量技術等為核心，制作出的動畫具有短小精悍的特點，被廣泛用于網頁動畫的設計，成為當今網頁動畫制作最為流行的軟件。Flash具有操作方便、簡單易懂的優點。初學者通過學習，可發揮他無限的想象力。三、AdobePhotoshopCS3———圖像與動畫的制作軟件PhotoshopCS3是目前最流行的圖形、圖像編輯設計軟件，在數碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網頁設計等領域都被廣泛地應用。〔一〕文字處理更加方便〔二〕增加的圖層集使用層管理更有序。〔三〕新增圖像功能：圖像的剪切和剪裁更加方便。〔四〕將所有工具的選項板改良為工具選項欄放置在工作區頂部方便先項參數的設置。〔五〕為了更方便地用路徑繪畫，改良增加了幾何形狀工具，通過選擇工具的不同工作模式，可創立路徑、幾何形狀或幾何填充區，使得矢量功能得到了加強。

第二章個人網站設計分析第一節相關術語一、InternetInternet，中文正式譯名為因特網，又叫做國際互聯網。它是由那些使用公用語言互相通信的計算機連接而成的全球網絡，是一項正在向縱深開展的技術，是人類進入網絡文明階段或信息社會的標志。對Internet將來的開展給以準確的描述是十分困難的。但目前的情形使互聯網早已突破了技術的范疇，正在成為人類向信息文明邁進的紐帶和載體。Internet的全稱是InterNetwork，譯為“因特網〞，也稱國際互聯網，簡稱互聯網。它是世界上最大的互聯網絡，它本身不是一種具體的物理網絡，是人們為了更好地理解Internet，而給它加上了一個虛擬的概念——網絡。實際上，Internet是把世界各地已有的各種網絡(包括計算機網、數據通信網以及公用交換網等)互聯起來，組成一個跨越國界的龐大互聯網，因此也稱為“網絡的網絡〞(NetworkofNetwork)。(1)TCP/IP協議是Internet的核心。網絡互聯離不開協議，Internet正是依靠TCP/IP協議實現各種網絡互聯的；沒有TCP/IP協議，就沒有如今的Internet。因此，TCP/IP協議是Internet的根底和核心。(2)Internet實現了與公用交換網的互聯。由于Internet實現了與公用交換網的互聯，使全世界眾多的個人用戶可以很方便地入網。用戶只要有一臺PC機、一條線和一個Modem(調制解調器)，就可以連入Internet。這是Internet迅速普及的重要原因之一。我們認為在新世紀，全球化、信息化、網絡化是世界經濟和社會開展的必然趨勢，Internet的迅猛開展正是順應了這個趨勢。它實現了在任何地點、任何時間進行全球個人通信，使社會的運作方式、人類的學習、生活工作方式發生了巨大的變化。二、HTMLHTML〔HyperTextMark-upLanguage〕即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。它主要是在原來文本文件的根底上，加一系列的標識符號描述其格式，形成網絡文件。當用戶使用瀏覽器下載文件時，就把這些標識解釋成它應有的含義，按照一定的格式，將這些被標識的文件，顯示在屏幕上。而HTML的標識符號并不顯示在屏幕上。利用標識語言，可以將INTERNET上連接的不同地區的效勞器上的信息文件連接起來；有的標識是去連接另一個文件，有的是形成表格，有的是接受用戶信息等等。有了這些標識，用戶在瀏覽器中看到的不再是呆板的純文本，而是五彩繽紛的畫面。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部〔Head〕、主體〔Body〕兩大局部，其中頭部描述瀏覽器所需的信息，而主體那么包含所要說明的具體內容。此外，還可以與數據庫中的數據連接，滿足讀者的查詢要求以及與用戶交互的功能等等。三、站點 所謂站點，就是將網頁文件和素材文件，有條理地放置站點文件夾里，這些文件與文件夾就構成了網站的實質內容。站點文件夾里除了網頁文件還有素材文件，所謂素材文件就是網頁中所用到的圖像、聲音、視頻等，這些內容是以單獨文件的形式存在。四、超鏈接超鏈接在本質上屬于一個網頁的一局部，它是一種允許我們同其他網頁或站點之間進行連接的元素。各個網頁鏈接在一起后，才能真正構成一個網站。所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后,鏈接目標將顯示在瀏覽器上，并且根據目標的類型來翻開或運行。人們通過超鏈接可以很方便很迅速地訪問分布于全球計算機上的海量資源，實現在互聯網中的漫游。五、URLURL〔UniformResourceLocator的縮寫〕，統一資源定位器，用來指明主機或文件在Internet上的位置。互聯網中某種信息資源以某種方式存儲在網絡中的某處，必須用一個惟一的URL來進行標識，這樣才能方便查找。對于Web來說，可以簡單并通俗把URL理解為網址。每個Web網頁都有自己的網址，在瀏覽器地址欄里輸入網頁的URL，就可以訪問這個網頁。例如，://yahoo./index.html，其意思就是采用超文本傳輸協議訪問雅虎網的首頁，由于網頁均是通過超文本傳輸協議進行訪問，默認下，“：//〞可以省略不輸。URL能以惟一且一致的方式定義每個資源在Internet上的位置，一個URL就是一個資源在Internet上的具體位置。六、IP地址從網絡互聯的角度來看，Internet的目標是將不同的網絡互聯起來，實現廣泛的資源共享。網絡互聯的第一步是物理連接，由于信息傳輸的起點和終點都是對象(即各類計算機)，因此在物理連接中，首先必須解決對象的識別問題。在網絡中，一般可以依靠地址識別對象，所以，Internet在統一全網的過程中，首先要解決地址的統一問題。為了使連入Internet的眾多計算機主機在通信時能夠相互識別，Internet中的每一臺主機都分配有一個惟一的標識--32位二進制地址，該地址稱為IP(InternetProtocol)地址，也稱作網際地址。使互聯網上的電腦主機在通信時能夠相互識別，每臺主機都分配一個能表示其位置的IP〔InternetProtocol〕地址，這如同公用網中的號碼一樣。IP地址是由專門的互聯網機構來分配。IP地址具有惟一性，是由32位二進制數組成，分為四組，每組8位，每組之間用小數點分隔，在實際之中常轉換成十進制數表示。由于Internet實際上是由假設干個網絡所組成的一個網際網，因此，IP地址又可認為是由網絡號和主機號(連接在Internet上，并有獨立IP地址的計算機稱為主機)組成的，網絡號說明主機所連接的網絡，主機號標識該網絡上特定的某臺主機。七、CSSCSS〔CascadingStyleSheets〕，即層疊樣式表的縮寫。它能夠對網頁的字體、背景、顏色和特殊效果以更精確的控制，便于您更輕松地設計頁面的布局。它具有對瀏覽器良好的兼容性、能夠替代一些之前只有圖像才能實現的效果。修改CSS代碼，可以迅速更新同一頁面的不同區域，甚至應用該CSS的眾多網頁外觀和格式。第二節個人網站的由來和開展互聯網在中國的出現只有十幾年時間，1986年，中科院一些科研單位通過長途撥號到一些歐洲國家，進行國際聯機數據庫檢索，這可以說是我國使用Internet的開始。1990年，中科院高能所、北京計算機應用研究所、原電子部華北計算所、石家莊54所等單位，先后將自己的計算機與CNPAC(X.25)相連接，利用歐洲國家的計算機作為網關，在X.25網與Internet之間進行轉接，實現了中國CNPAC科技用戶與Internet用戶之間的E-mail通信等。1993年3月，中科院高能所為了支持國外科學家使用北京正負電子對撞機做高能物理實驗，開通了一條64kb/s國際數據信道，使高能所與美國斯坦福線性加速器中心連接起來。1994年4月，中科院計算機網絡信息中心用64kb/s國際線路連到美國，開通路由器，正式接入Internet網，成為Internet的第71個成員單位。該網絡信息中心于1990年開始，主持一項世界銀行貸款和國家科委共同投資工程——中國國家計算與網絡設施，在北京中關村地區建設了一個超級計算中心；為了便于各單位使用超級計算機，將中關村地區的30多個研究所以及北大、清華兩所高校，全部用光纜連在一起。這時期，個人網站出現的條件還很不成熟，國內上網的人數很少，也缺乏支持個人建站的環境，用戶很難找到理想的個人主頁存放地。個人網站開展的第二階段是從1997年初到1998年，這段期間，中國網民數量飛速增長，個人網站日漸繁榮，個人主頁的數量急劇增加。同時，越來越多的商業網站開始免費提供個人主頁空間，這些良好的外部極大地促進了個人網站的開展，涌現了一批很著名的個人網頁，從1998年下半年開始，隨著互聯網應用的深入的普及，隨著眾多主頁制作工具的出現，使得建站成為一件非常容易的事，創立一個能充分表達自我風格和特色的個人網站已經成為互聯網用戶的新追求。第三節個人網站的設計和規劃一、明確架設網站的目的及客戶要求通常情況下，架設個人網站主要是為了通過互聯網表達個人在商業、科技、交際、生活等方面的信息需求或者進行信息的交流，具有較強的目的性，個人網站一般表達在：為了展現自己的風采，讓大家一起分享個人的心得和經驗，使其有共同愛好的朋友有一個可以傾訴的地方。二、個人網站概貌因為是個人網站，所以只是選擇了自己擅長和喜愛的內容，在突出自己的風格和特點的同時，還應用了現在流行的網站技術設計，并盡可能地從訪問者角度來編排欄目以方便訪問者的瀏覽，而輔助內容，如站點簡介、版權信息、個人信息等也未放在主欄目里，以免沖淡主題。三、功能劃分在網站設計中確定首頁的功能模塊瀏覽者可以在首頁瀏覽自己喜歡的內容，并且可以通過郵件的形式和大家交流，站內所有的頁面設計、構思，包括圖片的處理都是借助各種軟件獨立完成，并且很多的文章都是自己的精心收藏，與大家一起分享。四、功能描述個人網站設計的主頁如下列圖所示：〔一〕日志——銘記在其中展示自己喜愛的東西、包括日志、精品文章和一些雜七雜八的文章。奇文共欣賞，疑義相與析。利用拋磚引玉的作用，讓瀏覽者可以從中認識和了解自己，使大家共同欣賞美好的事物。〔二〕足跡——游走時光利用編輯CSS各種樣式，使圖片和文字相得益彰，充分表達文章所要表達的風采，個別文章用錨標記的方法，方便瀏覽者更好地閱讀文章。〔三〕相冊——亙古思念主版面用flash的元素功能，提升網頁的整體效果，進入次版面采取幻燈形式以大學同學和生活作為相冊展示。〔四〕寫信——分享你我的故事一個靜態網頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網站上提供一些答復下列問題的工具以及其他具有交互性能的設計，使得訪問者能從網站上獲得交互的信息，從而使訪問者有一種參與網絡建設的新鮮感和成就感，像是網頁中的E-mail鏈接來以此分享各自的心情，利用郵件方式，彼此可以暢所欲言，就感興趣的話題展開討論，和瀏覽者進行溝通。〔五〕音樂每一個版面都利用FLASH插件來設置個人喜歡的音樂〔六〕頁面設計在明確了個人網站的風格和定位后，就是網站的材料組織以及網站頁面設計和代碼處理。建立一個網站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網站結構不清晰，目錄龐雜，內容東一塊西一塊，結果不是讓瀏覽者看得糊涂，自己擴充和維護網站相當困難。網站的題材確定后，并且收集和組織了許多相關的資料內容，但如何組織內容才能吸引更多的瀏覽者來瀏覽網站呢？欄目的實質是一個網站的大綱索引，索引應該將網站的主題明確顯示出來。因此將自己的網站分為個五欄目，分別是日志、足跡、相冊、隨意的涂鴉設計以及寫信留言。

第三章個人網站的具體設計過程第一節創立站點1.在Dreamweaver中，執行【站點】|【新建站點】命令。在彈出的【HTML的站點定義為】對話框中，輸入站點名稱；2.選擇【否，我不想使用效勞器技術】單項選擇按鈕；3.選擇【在本地進行編輯和測試〔我的測試效勞器是這臺計算機〕】單項選擇按鈕，并在【您將把文件存儲在計算機上的什么位置】文本框中修改當前需要存放文件的目錄；4.修改站點的根目錄。第二節列出表格、框架、層1.表格在網上做表格，簡稱“網表〞或“在線表格〞，是一個網頁中用來進行網頁布局的，在它的單元格中可以放置具體的內容，網頁導出的表格形式為.csv格式，其中<tr>為行，<td>為單元格表格一行的代碼表示形式：<body><table><tr><td>輸入內容<td><td>輸入內容<td>注：代碼增加單元行時，復制即可……</tr></table>利用在代碼<tr>中回車可以更換顏色，選擇“bgcolor〞,對齊選擇“align〞，合并單元格為“colspan〞、單元行為“rowspan〞等，而設置標題時<tr>→<th>。與此同時，右側的標簽設置具有frame和rules屬性的值也可以調整表格,其中〔1〕Frame屬性Above顯示上邊框Below顯示下邊框Border,box顯示上下左右邊框LHS,RHS顯示左邊框/顯示右邊框Hside,Vside顯示上下邊框/顯示左右邊框Void不顯示〔2〕Rules屬性All顯示所有內部邊框Cols僅顯示行邊框Groups介于行列間邊框None不顯示內部邊框Rows僅顯示列邊框2.框架在制作一個網站的所有頁面時，并不是每個頁面的所有內容都需要改變，比方個人的LOGO、導航條和版權信息等局部在每個網頁中都是一樣，所以將這些不變的內容放在框架內作為單獨的文檔，需要改變的內容放在另外的框架中。要創立預定義框架集并在某一框架中顯示當前網頁，其具體操作如下：將插入點定位到要插入框架集的網頁中。選擇[插入]——[HTML]——[框架]菜單命令，在彈出的子菜單中選擇預定義的框架集或在插入欄的“布局〞選項卡單擊框架按鈕中的向下按鈕，然后選擇預定義的框架集。完成以上操作后即可插入預定義的框架集。3.層繪制層，用顯示網格方式，跟隨層可以到達精確定位的效果，在其中可插入的圖像，并且圖像用快捷鍵的方式可以隨時增大或縮小，直至自己滿意為止，其中在層的屬性中，右尺寸=左尺寸+寬尺寸，下尺寸=上尺寸+高尺寸第三節網頁文字、圖像及多媒體元素的添加1.網頁文字的添加在表格內輸入文字，由于設置問題，表格會自動地向右擴展，這時需設置表格自動增大，并將其屬性改變，對于文字中的段落和不同的標題，可以通過頁面屬性進行修改來符合自己設計版面的要求。2.網頁圖像的添加要想使圖片到達最正確效果，并不是一件容易的事，很多人往往喜歡在網頁上添加很多的圖像，造成網頁頁面雜亂，主題不突出。其實網頁中的圖像不是越多越好。網頁中使用的圖片不要太大，一般情況最好單張不要超過25-30K，每頁圖片總量不要超過60K這樣站用的磁盤空間較少，網上傳輸時間較短。圖像也可在表格中做背景，固定表格的大小，然后在背景上寫文字，增添頁面的美觀3.多媒體元素的添加〔1〕設置滾動文字使用marquee標記可以將文字設置為動態滾動的效果，語法：<marquee>滾動文字</marquee>；文字滾動方向——direction〔默認從右向左left〕；文字的滾動方式——behavior，語法：<marqueebehavior="滾動方式">滾動文字</marquee>，滾動方式取值3個：scroll循環滾動，默認效果；slide只滾動一次就停止；alternate來回交替進行滾動。比方，進入主頁“記憶城池〞的設置。〔2〕添加背景音樂使用常用中Flash中的插件、shockwave插入背景音樂，文件類型為.swf、.avi等，并可調節播放音樂文件的寬、高。〔3〕添加flash視頻插入文件格式為.flv、.rm等，限制高寬比，涉及了播放器的外觀以此配合網頁的內容，像是亙古思念里的?再見?的插入。〔4〕添加flash的按鈕以及文字按鈕：增添的按鈕有耳目一新的感覺，并可以鏈接到與按鈕上輸入文字相一的網頁上。文字：flash文字，可以變幻文字的顏色，并參加相關的鏈接。〔5〕關于Flash元素可以用來對圖片進行編輯，制作成為網頁上的相冊，在Dreamweaver右側有其編輯器，其中imageURLs為插入圖片，captioncolor為圖片標題，link為鏈接到某些網站，imagelinktarket為目標等。在屬于我們純真年代中，相冊的制作是一個很好的示范。第四節關于錨鏈接和CSS樣式一、錨鏈接錨鏈接實際上就是鏈接文本，又叫錨文本。在游走時光中，青島一網頁的三個內容采用了錨鏈接的手法，增加的錨鏈接都和頁面本身的內容有一定的必然聯系，它能精確的描述所指向頁面的內容。二、CSS樣式CSS就是一種叫做樣式表〔stylesheet〕的技術。也有的人稱之為層疊樣式表〔CascadingStylesheet〕。在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制，游走時光中三個版面的設計都有采用CSS樣式，只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同局部，或者頁數不同的網頁的外觀和格式它的作用可以到達：〔1〕在幾乎所有的瀏覽器上都可以使用。〔2〕以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕松實現，從而更快地下載頁面。〔3〕使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。〔4〕可以輕松地控制頁面的布局。〔5〕可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發生變動。式樣單放在頁面中，通過瀏覽器的解釋執行，是完全的文本，非常的容易掌握，針對一些非常老的瀏覽器，頁不會產生頁面混亂的現象。

第四章網站設計的心得第一節關于網頁的質量〔1〕明確網站的主題和規劃確定網站的主題，也就是確定所開發網站的類型，如教育類網站、房地產類網站、服飾類網站等。不同的網站確定的主題都有一定的歸屬，從而確定主題與設計風格。名稱要切題，題材要專而精，并且要兼顧商家和客戶的利益.網站規劃是指在網站建設前對市場進行分析、確定網站的目的和功能，并根據需要對網站建設中的技術、內容、費用、測試、維護等做出規劃。網站規劃對網站建設起到方案和指導的作用，對網站的內容和維護起到定位的作用。網站規劃書應該盡可能涵蓋網站規劃中的各個方面，網站規劃書的寫作要科學、認真、實事求是。在設計之前，需先畫出網站結構圖，其中包括網站欄目、結構層次、連接內容〔2〕網頁設計總體方案主題鮮明在目標明確的根底上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。Web站點應針對所效勞對象〔機構或人〕的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些那么采用多媒體表現手法，提供華美的圖像、閃爍的燈光、復雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現手法和有效的組織與通信結合起來。〔3〕網站的版式設計網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處。版式設計通過文字圖形的空間組合，表達出和諧與美。多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系。為了到達最正確的視覺表現效果，將反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。〔4〕網頁結構的清晰性使用一些醒目的標題或文字來突出網站的特點。如果瀏覽者從您的網站上不清楚您在介紹什么，他們是不會喜歡您的網站的，這就是網頁設計的失敗。〔5〕導向清晰。設置前進或后退，而不會在其使用瀏覽器時造成不必要的麻煩，可以回退到前頁或是前進到后一頁。第二節網頁中的色彩搭配〔1〕白紙黑字是永遠的主題，誰都說不出不好來。(2〕網頁最常用流行色·蘭色——藍天白云，沉靜整潔的顏色。·綠色——綠白相間，雅致而有生氣。·橙色——活潑熱烈，標準商業色調。·暗紅——寧重、嚴肅、高貴，需要配黑和灰來壓制刺激(3〕用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。(4)用兩種色彩。先選定一種色彩，然后選擇它的比照色。(5)用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。在網頁配色中，切記一些誤區：(1)不要將所有顏色都用到，盡量控制在三至五種色彩以內。(2)背景和前文的比照盡量要大(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。第三節圖像、著名插件、導航按鈕的使用一、圖像的使用用戶在網上四處漫游，必須設法吸引和維護他們對你的主頁的注意力。萬維網的其中一個最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。圖像的內容應有一定的實際作用，切忌虛飾浮夸。注意圖畫可以彌補文字之缺乏，網頁設計中導航使用超文本鏈接或圖片鏈接，使人們能夠在您的網站上自由前進或但并不能夠完全取代文字。很多用戶把瀏覽軟件設定為略去圖像，以求節省時間他們只看文字。因此，制作主頁時，必須注意將圖像所連接的重要信息或聯接其他頁面的指示用文字重復表達幾次，同時要注意防止使用過大的圖像，如果不得不放置大的圖像在網站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預覽效果顯示出來，這樣用戶就不必浪費金錢和時間去下載他們根本不想看的大圖像。二、著名插件的使用如果網站上有聲音或視頻，要保證使用者通過使用某個知名的插件，能夠聽到或看到。如果訪問者沒有所要求的插件，將不得不到其它站點去下載，這樣訪問者有可能就不會返回了。許多站點使用QuickTime、RealPlay和Shockwave插件。因為，許多訪問者并不愿意浪費很多時間和金錢去下載可能僅使用一次的插件。三、導航按鈕的使用應當防止強迫用戶使用工具欄中的向前和向后按鈕。你的設計應當使用戶能夠很快地找到他們所要的東西。絕大多數好的站點在每一頁同樣的位置上都有相同的導航條，使瀏覽者能夠從每一頁上訪問網站的任何局部。

第五章局部源代碼一、每個頁面的代碼中都設有解除網頁阻止flash播放的代碼其設置為在<head></head>中間插入：<!—savedfromurl=(0013)about:internet-->二、主頁導航條代碼<td><divalign="center"><ahref="銘記.html"><imgsrc="images/a.gif"width="111"height="37"border="0"/></a></div></td><td><divalign="center"><ahref="游走時光.html"><imgsrc="images/88logo1028.gif"width="120"height="36"border="0"/></a></div></td><td><divalign="center"><ahref="亙古思念.html"><imgsrc="images/76.gif"width="121"height="36"border="0"/></a></div></td><td><divalign="center"><ahref="發現&靈感.html"><imgsrc="images/765.gif"width="117"height="36"border="0"lowsrc="發現&靈感.html"/></a></div></td>三、主頁滾動字條代碼<meta-equiv="Content-Type"content="text/html;charset=gb2312"/>四、按鈕設置代碼銘記中“被點名了〞的按鈕代碼：<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="://download.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"width="100"height="23"><paramname="BGCOLOR"value="#C3CB82"/><paramname="movie"value="button3.swf"/><paramname="quality"value="high"/><embedsrc="button3.swf"width="100"height="23"quality="high"pluginspage="://macromedia/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash"bgcolor="#C3CB82"</embed></object>五、青島頁面的圖片地圖以及css樣式的類和標簽處理的代碼<ahref="花石樓.html"><imgsrc="images/jjl.jpg"name="花石樓"width="758"height="568"border="0"usemap="#花石樓Map"class="image2"id="花石樓"/><mapname="花石樓Map"id="花石樓Map"><areashape="rect"coords="6,3,195,196"href="花石樓.html"/></map></