【文章內(nèi)容簡介】 用于定義代碼表現(xiàn)形式的 CSS 規(guī)則駐留在另一個文件（外部樣式表）或 HTML 文檔的另一部分（通常為文件頭部分）中。使用 CSS 可以非常靈活并更好地控制具體的頁面外觀，從精確的布局定位到特定的字體和樣式。CSS 允許控制 HTML 無法獨自控制的許多屬性。除設置文本格式外，還可以使用 CSS 控制 Web 頁面中塊級別元素的格式和定位。CSS 的主要優(yōu)點是: 它提供了便利的更新功能；更新一處的 CSS 規(guī)則時，使用該已定義樣式的所有文檔的格式都會自動更新為新樣式。外部 CSS 樣式表是一系列存儲在一個單獨的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 規(guī)則。利用文檔文件頭部分中的鏈接，該文件被鏈接到 Web 站點中的一個或多個頁面。 內(nèi)部（或嵌入式）CSS 樣式表是一系列包含在 HTML 文檔文件頭部分的 style 標簽內(nèi)的 CSS 規(guī)則字體大小的 css 的代碼如下：Html 文檔部分代碼：htmlheadmeta equiv=ContentType content=text/html。 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)的良好風氣。同時通過本次比賽，向同學們展示網(wǎng)絡的優(yōu)勢，為活動增添懸殊般的色彩。我們協(xié)會在本次電...../p/div/div/body /html與上面 html 文檔匹配的部分外部 CSS 代碼：body {fontfamily: 宋體,Arial, Helvetica, sansserif。fontsize: 13px。color: 333333。backgroundcolor:FFFFFF。width:1000px。lineheight: 。background:url(../images/)。 padding:0。margin: 0。}.zi{ fontsize: 18px。 fontweight: bold。 }.zi1{color: FF0000。}.zi2{fontsize: 16px 。}三、網(wǎng)站總體分析與設計 網(wǎng)站系統(tǒng)分析根據(jù)前面的設計思想進行分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進行分解，從內(nèi)容上可對網(wǎng)站作如下劃分：? 協(xié)會簡介：主要介紹協(xié)會簡述、協(xié)會章程、管理制度、指導老師相關(guān)內(nèi)容。? 協(xié)會概況：主要介紹現(xiàn)任學生干部、技術(shù)交流科目、娛樂活動形式、協(xié)會品牌活動等。? 機構(gòu)設置：主要介紹協(xié)會各部門的職能和技術(shù)交流方向。? 新聞動態(tài)：報道協(xié)會近期活動或技術(shù)交流動態(tài)，現(xiàn)象的介紹協(xié)會日常工作。? 技術(shù)園地：聚集各種計算機相關(guān)的技術(shù)知識，以便計算機愛好者學習。? I T 動態(tài)：跟蹤近期 IT 行業(yè)的最新技術(shù)和新聞等相關(guān)內(nèi)容。? 活動風采：直觀的展現(xiàn)協(xié)會豐富多彩的活動相關(guān)效果圖。? 生活娛樂：相關(guān)笑話和美文以便大家在學習累時放松，調(diào)節(jié)情緒。? 資源共享：協(xié)會成員收集的好資料，資源共享，以便大家一起學習。? 協(xié)會視頻：協(xié)會相關(guān)活動或者技術(shù)視頻。 主頁設計網(wǎng)站主頁采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的圖片相結(jié)合，體現(xiàn)社團的勃勃生氣。在主頁的最下面我們還弄了許多的友情鏈接圖標，這樣用戶可以有更多的選擇性。不會讓用戶感到本網(wǎng)站的單調(diào)。我們還設計了視頻圖片和娛樂美文專區(qū)，用來增加網(wǎng)站的娛樂性，可以讓網(wǎng)友能輕松愉快地欣賞本網(wǎng)站，這樣也能讓網(wǎng)友們能更喜歡本網(wǎng)站。在最下面我們還制作了一些友情連接的圖片，可以讓網(wǎng)站不單調(diào)，使得網(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)頁中載入擴充高級功能） 。 網(wǎng)頁設計的色彩人們常常感受到色彩對自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，左右我們的情緒。色彩的心理效應發(fā)生在不同層次中。有些屬直接的刺激，有些要通過間接的聯(lián)想，更高層次則涉及到人的觀念，信仰，對于藝術(shù)家和設計者來說，無論哪一層次的作用都是不可忽視的。對于網(wǎng)頁設計者來說，色彩的心理作用尤其重要，因為用網(wǎng)絡是在一種特定的歷史與社會條件的環(huán)境下，即高效率，快節(jié)奏的現(xiàn)代生活方式的條件，這需要做網(wǎng)頁時把握人們在這種生活方式用網(wǎng)絡的一種心理需求。針對不同的主題來布置色彩，如健康類的網(wǎng)頁就不能采用較為刺激的大紅和黃，以及象征死亡和神秘的黑色和紫色，這樣會造成一種緊張和某種程度的恐慌，所以我們所選的顏色是——統(tǒng)一“青綠”色，給網(wǎng)民們清爽舒服地感覺。四、為什么選擇 DreamweaverDreamweaver 是制作主頁的好工具 .Dreamweaver 是可視化的網(wǎng)頁制作工具，很容易上手，可以讓你輕松地制作出自己的網(wǎng)頁。Dreamweaver 在多媒體方面頗有建樹的 Macromedia 公司推出的可視化網(wǎng)頁制作工具，它與 Flash、Fireworks 合在一起被稱為網(wǎng)頁制作三劍客，這三個軟件相輔相承，是制作網(wǎng)頁的最佳選擇。其中，Dreamweaver 主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高，F(xiàn)lash 用來制作精美的網(wǎng)頁動畫，而 Fireworks 用來處理網(wǎng)頁中的圖形。復雜的說：Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。 Dreamweaver 特點：（1）最佳的制作效率Dreamweaver 可以用最快速的方式將 Fireworks，或 Photoshop 等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網(wǎng)頁色調(diào)。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dreamweaver 能與您喜愛的設計工具，如 Flash 等搭配，不需離開 Dreamweaver 便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使 Dreamweaver 自動開啟 Firework 或 Photoshop 來進行編輯與設定圖檔的最佳化。（2）網(wǎng)站管理使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver 會自動更新所有連結(jié)。使用支援文字、HTML 碼、HTML 屬性標簽和一般語法的搜尋及置換功能使得復雜的網(wǎng)站更新變得迅速又簡單。 （3）無可比擬的控制能力Dreamweaver 是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具。它包含Home Site 和 BBEdit 等主流文字編輯器。幀(frames) 和表格的制作速度快的令您無法想象。對于 CSS 的動態(tài) HTML 支援和鼠標換圖效果，聲音和動畫的 DHTML 效果資料庫可在 Netscape 和 Microsoft 瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。當有新的瀏覽器上市時，只要從 Dreamweaver 的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報告。五、詳細設計方案 設置站點Web 站點是一組具有如相關(guān)主題、類似的設計、鏈接文檔和資源。 是一個站點創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建單獨的文檔，還可以創(chuàng)建完整的 Web 站點。創(chuàng)建 Web 站點的第一步是規(guī)劃。為了達到最佳效果，在創(chuàng)建任何 Web 站點頁面之前，應對站點的結(jié)構(gòu)進行設計和規(guī)劃。決定要創(chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及頁是如何互相連接起來的。 執(zhí)行以下操作：（1）啟動 Dreamweaver ：（2）選擇“站點”“新建站點” （即，從“站點”菜單選擇“管理站點” ） 。出現(xiàn)“站點定義”對話框。如圖 51：（3）如果對話框顯示的是“基本”選項卡，則單擊“高級” 。 出現(xiàn)“站點定義向?qū)А钡牡谝粋€界面，要求您為站點輸入一個名稱。圖 51（4）在文本框中，輸入一個名稱以設計課題名稱英文縮寫“CEH_Site ”。該名稱可以是任何所需的名稱。（5）然后在下面的“本地根目錄文件夾”和“默認圖像文件夾”文本框中輸入本地網(wǎng)站預保存的路徑，單擊“確認”按鈕。（6）隨即在組合面板中彈出“站點”面板，現(xiàn)在可以在其中添加頁面了。（7）右鍵單擊“站點” 面板中的根目錄，在彈出菜單中選擇“新建文件”命令，把新建文件的名稱改為“”。（8）雙擊 ，進入頁面編輯狀態(tài)。 頁面制作 創(chuàng)建主頁頁面 在全面考慮好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風格之后，就可以正式動手制作首頁了。有一句俗語：良好的開端是成功的一半。在網(wǎng)站設計上也是如此，首頁的設計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁就已經(jīng)有一個整體的感覺。是不是能夠促使瀏覽者繼續(xù)點擊進入，是否能夠吸引瀏覽者留在站點上，全憑首頁的設計。所以，首頁的設計和制作是絕對要重視和花心思的。首頁設計大致如下：? 整個網(wǎng)站版面布局都是用 div+css 布局的，有較好的靈活性；? 色彩的搭配主要統(tǒng)一用了“青綠”色調(diào)給人以清爽的感覺；? div 布局的主要架構(gòu)：htmlheadmeta equiv=ContentType content=text/html。 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é)會概要及機構(gòu)具體內(nèi)容 div id=news_gy div id=pho_gy div id=photo_News/div //新聞幻燈圖片 div id=overview/div //協(xié)會概要及機構(gòu)具體內(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 //技術(shù)園地、娛樂和 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 層疊樣式表的定義格式，結(jié)合 div 布局架構(gòu)經(jīng)行合理的編寫 CSS 樣式表? 頁面中的相關(guān)特效可以結(jié)合下文經(jīng)行對位填充，字體和邊框都在 CSS 經(jīng)行了詳細的編制。? 最后首頁基本就形成了（如：圖 52）圖 52 其它頁面的制作其他頁面是在此主頁面設計好的框架上加以修改，訂好的 css 樣式，添加一些內(nèi)容和各頁面該有的內(nèi)容。分頁導航頁（如：圖 53，IT 動態(tài)頁面）圖 53具體內(nèi)容頁（如：圖 54）圖 54這樣計算機協(xié)會的網(wǎng)頁就制作完成。 網(wǎng)站布局技術(shù)本站主要使用 div+css 布局。 DIV 本身就是容