【正文】 寫英文字母，這直接關系到頁面上的連接。這就意味著,你必須花點心思來規(guī)劃文字與背景顏色的搭配方案。一般來說，淺色背景下的深色文字為佳。按當代中文的閱讀習慣，文本大都居左的。（4）少用特殊字體雖然你可以在你的 HTML 中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什么。一些網(wǎng)站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。（5）考慮瀏覽器的兼容性當然現(xiàn)在 IE 所占的市場份額越來越大，但是我們?nèi)匀恍枰紤]到 Mozilla Firefox、Netscape 以及Opera 這些瀏覽器用戶。要時刻為用戶著想，必須最少在幾種不同類型的瀏覽器下測試網(wǎng)站，看看兼容性如何。這樣子用戶看起來舒服、順暢，會對你的網(wǎng)站留下一個“很專業(yè)”的印象。同樣的尺寸的 LOGO，GIF 動畫的容量有 5K，而靜止 LOGO 的只有 3K。（8）善用圖像用戶在網(wǎng)上四處漫游，你必須設法吸引和維護他們對你的主頁的注意力。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。制作主頁時，必須注意將圖像所連接的重要信息或聯(lián)接其他頁面的指示用文字重復表達幾次，同時要注意避免使用過大的圖像。最好在網(wǎng)站上提供一些回答問題的工具以及其他具有交互性能的設計，使得訪問者能從網(wǎng)站上獲得交互的信息，從而使訪問者有一種參與網(wǎng)絡建設的新鮮感和成就感。 開發(fā)工具 網(wǎng)頁制作工具 Dreamweaver 簡介Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver 的介入，使得網(wǎng)頁一些部分的實現(xiàn)變得更加直觀簡便。他不僅提供強大的繪圖工具，可以直接繪制藝術圖形，還能直接從掃描儀，數(shù)碼相機等設備中采集圖像，并對他們進行編輯、修復、以及調(diào)整效果，同時可以改變圖像的顏色模式，并能在圖像中制作藝術文字等。強大的彩色校正工具——修復畫筆，可在消除瑕疵的同時保留色調(diào)和紋理圖層。對于設計網(wǎng)頁，Photoshop 是不可或缺的工具，是強大的圖片處理工具，可謂是平面設計方面的老大。Fireworks是用來設計和制作專業(yè)化網(wǎng)頁圖形的應用軟件，它提供了一個制作環(huán)境，可以在一個專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁圖形，對其進行動畫處理，添加高級交互功能以及優(yōu)化圖像。 動畫制作軟件動畫制作肯定是 Flash ，它是 Macromedia 公司出品的 Flash 是制作網(wǎng)頁動畫的利器。F1ash 是制作動感網(wǎng)頁的權威。可以讓制作者隨心所欲地實現(xiàn)各種創(chuàng)意，并且可以和 JavaScript 一起創(chuàng)作出具有強大交互性的網(wǎng)頁動畫。用 flash 制作出來的動化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 交互性更是 flash 動畫的迷人之處，可以通過點擊按鈕、選擇菜單來控制動畫的播放。使網(wǎng)頁的效果更加完美。 開發(fā)技術 網(wǎng)頁和 Html 語言我們的網(wǎng)頁是用 html 語言編寫的一個網(wǎng)站，html 中文翻譯為“超文本標記語言” ，所謂“超文本”就是指頁面內(nèi)可以包含圖片，鏈接，多媒體等非問字的元素，通過 html 語言將這些元素表示出來，就形成了 html 代碼。HTML 的結構包括頭部（Head） 、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。它允許網(wǎng)頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。（2）可擴展性，HTML 語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML 采取子類元素的方式，為系統(tǒng)擴展帶來保證。雖然 PC 機大行其道，但使用 MAC 等其他機器的大有人在，HTML 可以使用在廣泛的平臺上。 charset=gb2312 /title計協(xié)之家 /title style type=text/css ! Layer1 { position: absolute。 top:67px。 height:188px。 } /style /head body div id=Layer1/div /body /html CSS 簡介CSS (層疊樣式表) 是一系列格式設置規(guī)則，它們控制 Web 頁面內(nèi)容的外觀。頁面內(nèi)容（即 HTML 代碼）駐留在 HTML 文件自身中，而用于定義代碼表現(xiàn)形式的 CSS 規(guī)則駐留在另一個文件（外部樣式表）或 HTML 文檔的另一部分（通常為文件頭部分）中。CSS 允許控制 HTML 無法獨自控制的許多屬性。CSS 的主要優(yōu)點是: 它提供了便利的更新功能；更新一處的 CSS 規(guī)則時，使用該已定義樣式的所有文檔的格式都會自動更新為新樣式。利用文檔文件頭部分中的鏈接，該文件被鏈接到 Web 站點中的一個或多個頁面。 charset=gb2312 /title計協(xié)之家新聞 /titlelink rel=stylesheet type=text/css href=../../css//headbody div id=containerdiv id=newsp align=left class=zi2為豐富校園生活，提高學生的游戲體育競技水平，培養(yǎng)學生健康上網(wǎng)、文明上網(wǎng)的良好風氣。我們協(xié)會在本次電...../p/div/div/body /html與上面 html 文檔匹配的部分外部 CSS 代碼：body {fontfamily: 宋體,Arial, Helvetica, sansserif。color: 333333。width:1000px。background:url(../images/)。margin: 0。 fontweight: bold。}.zi2{fontsize: 16px 。? 協(xié)會概況：主要介紹現(xiàn)任學生干部、技術交流科目、娛樂活動形式、協(xié)會品牌活動等。? 新聞動態(tài)：報道協(xié)會近期活動或技術交流動態(tài)，現(xiàn)象的介紹協(xié)會日常工作。? I T 動態(tài)：跟蹤近期 IT 行業(yè)的最新技術和新聞等相關內(nèi)容。? 生活娛樂：相關笑話和美文以便大家在學習累時放松，調(diào)節(jié)情緒。? 協(xié)會視頻：協(xié)會相關活動或者技術視頻。在主頁的最下面我們還弄了許多的友情鏈接圖標，這樣用戶可以有更多的選擇性。我們還設計了視頻圖片和娛樂美文專區(qū)，用來增加網(wǎng)站的娛樂性，可以讓網(wǎng)友能輕松愉快地欣賞本網(wǎng)站，這樣也能讓網(wǎng)友們能更喜歡本網(wǎng)站。 背景分析想要在視覺化環(huán)境下制作復雜網(wǎng)頁的專業(yè)網(wǎng)頁制作，Dreamweaver 已經(jīng)漸漸在網(wǎng)頁編輯工具中嶄露頭角，成為專業(yè)人士編寫網(wǎng)頁的最佳選擇。分別是：? 設計網(wǎng)頁頁面（Dreamweaver 里具有彈性的頁面設計功能） ；? 搭配 Macromedia 其它產(chǎn)品一起使用 Dreamweaver（制作動畫和圖片不求人） ；? 自定義使用界面（享受個性化的使用經(jīng)驗） ；? 最后的加入 Dreamweaver 擴充程序（在網(wǎng)頁中載入擴充高級功能） 。色彩的心理效應發(fā)生在不同層次中。對于網(wǎng)頁設計者來說，色彩的心理作用尤其重要，因為用網(wǎng)絡是在一種特定的歷史與社會條件的環(huán)境下，即高效率，快節(jié)奏的現(xiàn)代生活方式的條件，這需要做網(wǎng)頁時把握人們在這種生活方式用網(wǎng)絡的一種心理需求。四、為什么選擇 DreamweaverDreamweaver 是制作主頁的好工具 .Dreamweaver 是可視化的網(wǎng)頁制作工具，很容易上手，可以讓你輕松地制作出自己的網(wǎng)頁。其中，Dreamweaver 主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高，F(xiàn)lash 用來制作精美的網(wǎng)頁動畫，而 Fireworks 用來處理網(wǎng)頁中的圖形。 Dreamweaver 特點：（1）最佳的制作效率Dreamweaver 可以用最快速的方式將 Fireworks，或 Photoshop 等檔案移至網(wǎng)頁上。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。除此之外，只要單擊便可使 Dreamweaver 自動開啟 Firework 或 Photoshop 來進行編輯與設定圖檔的最佳化。改變網(wǎng)頁位置或檔案名稱，Dreamweaver 會自動更新所有連結。 （3）無可比擬的控制能力Dreamweaver 是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具。幀(frames) 和表格的制作速度快的令您無法想象。使用不同瀏覽器檢示功能，Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。五、詳細設計方案 設置站點Web 站點是一組具有如相關主題、類似的設計、鏈接文檔和資源。創(chuàng)建 Web 站點的第一步是規(guī)劃。決定要創(chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及頁是如何互相連接起來的。出現(xiàn)“站點定義”對話框。 出現(xiàn)“站點定義向導”的第一個界面，要求您為站點輸入一個名稱。該名稱可以是任何所需的名稱。（6）隨即在組合面板中彈出“站點”面板，現(xiàn)在可以在其中添加頁面了。（8）雙擊 ，進入頁面編輯狀態(tài)。有一句俗語：良好的開端是成功的一半。人們往往看到第一頁就已經(jīng)有一個整體的感覺。所以，首頁的設計和制作是絕對要重視和花心思的。 charset=gb2312 /title計協(xié)之家首頁 /titlelink rel=stylesheet type=text/css href=css/ //外部 CSS 鏈接路徑/headbody div id=container div id=headdiv id=logo/divdiv id=banner/div /divdiv id=nav_time/div //導航欄 div id=mid //網(wǎng)頁中心部分（核心和內(nèi)容）div id=work div id=work_left //新聞動態(tài)和協(xié)會概要及機構具體內(nèi)容 div id=news_gy div id=pho_gy div id=photo_News/div //新聞幻燈圖片 div id=overview/div //協(xié)會概要及機構具體內(nèi)容 /div div id=news_gg //新聞動態(tài) div id=news/div div id=newsfla/div /div /div /div div id=work_right //公告和資源共享 div class=right_boxdiv id=pro_newsdiv id=pro/div //公告版div id=pro/div //資源共享/div /div /div/divdiv id=tec //技術園地、娛樂和 IT 信息板塊 div id=tecleft div id=teclefttext/divdiv id=teclefttext/div /divdiv id=tecright div id=tecrighttext/div div id=tecrighttext/div/div/divdiv id=photo /div //流動圖片/divdiv id=link/div //友情鏈接div id=footer /div //頁腳內(nèi)容/div/body/html? 然后根據(jù)上文中 CSS 層疊樣式表的定義格式，結合 div 布局架構經(jīng)行合理的編寫 CSS 樣式表? 頁面中的相關特效可以結合下文經(jīng)行對位填充，字體和邊框都在 CSS 經(jīng)行了詳細的編制。分頁導航頁（如：圖 53，IT 動態(tài)頁面）圖 53具體內(nèi)容頁（如：圖 54）圖 54這樣計算機協(xié)會的網(wǎng)頁就制作完成。 DIV 本身就是容器性質的,你不但可以內(nèi)嵌 table 還可以內(nèi)嵌文本和其它的 HTML 代碼；CSS 是 Cascading style Sheets 的簡稱，中文譯作“層疊樣式表單”，在主頁制作時采用 CSS 技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。Div+CSS 標準具有以下優(yōu)點:? 因為采用 CSS 布局，不像表格布局充滿各種各樣的屬性和數(shù)字，而且很多 CSS 文件通常是共用的，從而大大縮減頁面代碼，提高頁面瀏覽速度。更容易被搜索引擎收錄，具備搜索引擎 SEO 的先天條件，配合優(yōu)秀的內(nèi)容和一些 SEO 處理，可以獲得更好的網(wǎng)站排名。? 縮短改版時間，因為網(wǎng)站的布局都是通過外部的 CSS 文件來控制，只要簡單的修改幾個 CSS 文件就可以將許多網(wǎng)頁的風格格式同時更新，不用再一頁一頁地更新了。?