第11章 網(wǎng)頁設(shè)計

《第11章 網(wǎng)頁設(shè)計》由會員分享，可在線閱讀，更多相關(guān)《第11章 網(wǎng)頁設(shè)計（59頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、第第11章章 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計 本章學(xué)習(xí)重點 網(wǎng)站設(shè)計的基本方法 Dreamweaver的特點 Dreamweaver中插入多種媒體的方法，包括文字、圖像、聲音、flash等等 超級鏈接的設(shè)置 Dreamweaver中表格的基本操作 Dreamweaver中布局表格的使用技巧 Dreamweaver中框架的操作 Dreamweaver的層、行為、時間軸的概念 Dreamweaver中表單元素的添加方法 11.1網(wǎng)站設(shè)計方法簡介網(wǎng)站設(shè)計方法簡介 1明確的網(wǎng)站主題 2清晰的網(wǎng)站結(jié)構(gòu) 3風(fēng)格獨特的網(wǎng)站形象 4有力的網(wǎng)站宣傳 11.2 Dreamweaver簡介 Dreamweaver是美國Macro

2、media公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一體的所見即所得網(wǎng)頁編輯器，它是一套針對專業(yè)網(wǎng)頁設(shè)計師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。 11.2.1 Dreamweaver的特點 1操作簡單 2多媒體處理功能強 3靈活輕便 4建站方便 11.2.2 Dreamweaver的安裝 1 系統(tǒng)要求 2 安裝步驟 Dreamweaver工作區(qū) 2站點布局 網(wǎng)站設(shè)計初始需要設(shè)計人員對網(wǎng)站的主題進行規(guī)劃，網(wǎng)站必須主題鮮明，有層次感。一般的網(wǎng)站中的網(wǎng)頁設(shè)計不多于三層，這樣，用戶可以方便地從主頁中快速的找到連接網(wǎng)站中的其他網(wǎng)頁的途徑。 2站點布局

3、 （1）設(shè)置主頁 （2）查看站點地圖 11.2.4 站點的應(yīng)用與管理 在Dreamweaver 中包括兩種站點： 遠程站點：服務(wù)器上組成 Web 站點的文件，用于個使用者進行網(wǎng)上瀏覽。 本地站點：與遠程站點上的文件對應(yīng)的本地磁盤上的文件。在最常見的 Dreamweaver 工作流程中，用戶在本地磁盤上編輯文件，然后將它們上傳到遠程站點。 11.2.4 站點的應(yīng)用與管理 1創(chuàng)建站點11.3.1 新建并保存網(wǎng)頁 1 新建網(wǎng)頁 2 打開網(wǎng)頁 3 保存網(wǎng)頁 11.3.2 設(shè)置頁標題 11.3.3 添加文字及格式設(shè)置 1 添加文字 （1）添加文本文檔 （2）添加Word 或 Excel 文檔 2 文字顏

4、色設(shè)置 3 設(shè)置或更改字體 11.3.4 添加圖像 Web 頁中通常使用的圖形文件格式只有三種，即 GIF、JPEG 和 PNG 1插入圖像占位符 11.3.4 添加圖像 2、替換占位符，插入圖像 3直接插入圖像 11.3.4 添加圖像 4 調(diào)整圖像 調(diào)整圖像常常是對圖像進行重新取樣、裁剪、亮度/對比度調(diào)整、銳化等等，這些操作往往可以通過屬性窗口中的按鈕快速完成。11.3.5 設(shè)置超級鏈接 1創(chuàng)建鏈接 在一個文檔中可以創(chuàng)建幾種類型的鏈接，其類型和創(chuàng)建步驟如下： （1）鏈接到其它文檔 11.3.5 設(shè)置超級鏈接 （2）命名錨記鏈接 11.3.5 設(shè)置超級鏈接 （3）電子郵件鏈接 11.3.5 設(shè)

5、置超級鏈接 （4）空鏈接和腳本鏈接 此類鏈接使用戶能夠在對象上附加行為，或者創(chuàng)建執(zhí)行 JavaScript 代碼的鏈接。 2 鏈接的字體顯示 3 為圖片設(shè)置超級鏈接 圖像地圖是指已被分為多個區(qū)域（或稱“熱點”）的圖像；當用戶單擊某個熱點時，會發(fā)生某種操作（例如，打開一個新文件）。 11.3.6插入flash 1 創(chuàng)建和插入 Flash 按鈕 2插入 Flash 文本對象 3插入 Flash 影片 （1）在“文檔”窗口的“設(shè)計”視圖中，將插入點放置在需要插入影片的地方。 （2）在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“插入 Flash”圖標?；蛘哌x擇【插入】【媒體】【Flash】。

6、（3）在顯示的對話框中，選擇需要加入的Flash 文件 (.swf)。Flash 占位符隨即出現(xiàn)在“文檔”窗口中。 （4）在“文檔”窗口中，單擊 Flash 占位符以選擇要預(yù)覽的 Flash 影片。 4插入 Flash 元素 使用 Dreamweaver，設(shè)計者可以在文檔中插入 Flash 元素。Flash 元素使設(shè)計者可以快速、方便地使用預(yù)置元素構(gòu)建豐富的 Internet 應(yīng)用程序。 11.3.7 表格的應(yīng)用 1 插入表格 3 拆分和合并單元格 （1）合并操作 （2）拆分單元格 4布局模式 （1）切換到“布局”模式 （2）繪制布局表格 （3）繪制布局單元格 11.3.8 框架在網(wǎng)頁上的應(yīng)用

7、 框架提供將一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯示不同 HTML 文檔的方法。使用框架的最常見的情況就是，一個框架顯示包含導(dǎo)航控件的文檔，而另一個框架顯示含有內(nèi)容的文檔。 1 創(chuàng)建框架 1 創(chuàng)建框架 （2）設(shè)計框架集 圖11-35 框架面板 圖11-36 拆分后的框架面板2具有控制鏈接的框架內(nèi)容的設(shè)置 2具有控制鏈接的框架內(nèi)容的設(shè)置 在目標的下拉列表框中有以下四個固有選項，其含義是： _blank 在新的瀏覽器窗口中打開鏈接的文檔，同時保持當前窗口不變。 _parent 在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集。 _self 在當前框架中打開鏈接，同時替換該框架

8、中的內(nèi)容。 _top 在當前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架。 11.3.9 層的概念 在Dreamweaver中可以使用層來設(shè)計頁面的布局?？梢詫忧昂蠓胖?，隱藏某些層而顯示其它層，或者在屏幕上用鼠標或行為等移動層。例如可以在一個層中放置背景圖像，然后在該層的前面放置第二個層，它包含帶有透明背景的文本。 2 使用“層”面板 通過“層”面板可以管理文檔中的層。使用“層”面板可防止重疊，更改層的可見性，將層嵌套或堆疊，以及選擇一個或多個層。 3 對齊層 使用層對齊命令可按最后一個選定層的邊框來對齊一個或多個層。 4 在層和表格之間轉(zhuǎn)換 （1）層轉(zhuǎn)換為表格 （2）表轉(zhuǎn)換為層 11.3.

9、10 利用行為制作動態(tài)效果 行為是Dreamweaver中內(nèi)置的JavaScript程序庫，使用行為可以使網(wǎng)頁制作人員不用編寫腳本程序而實現(xiàn)一些動作，例如，播放聲音、打開瀏覽器窗口、彈出消息框、控制Flash播放等等。 1 播放聲音 2 打開瀏覽器窗口 3 彈出消息框 4 控制 Shockwave 或 Flash 11.3.11使用時間軸制作DHTML “時間軸”是Dreamweaver中的特殊功能，常常用于在網(wǎng)頁上顯示漂浮的圖片信息，這種漂浮的圖片往往很顯眼，這種漂浮的圖片就可以用“時間軸”功能現(xiàn)實。 “時間軸”只能對“層”發(fā)生作用。所以，如果要產(chǎn)生動畫效果，首先要創(chuàng)建層，再將圖像、文本等內(nèi)

10、容插入到層中，然后通過移動層來移動這些元素。使用時間軸的步驟為 圖11-49 時間軸面板 圖11-50 時間軸提示框 圖11-51 加入關(guān)鍵幀后的時間軸面板 圖11-52圖層漂浮路線 11.3.12 使用樣式表CSS 現(xiàn)代網(wǎng)頁制作的復(fù)雜效果離不開CSS技術(shù)，采用CSS技術(shù)可以有效的對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。它不僅可以做出美觀工整令瀏覽者賞心悅目的網(wǎng)頁，還能給網(wǎng)頁添加許多特殊的效果。 創(chuàng)建CSS樣式表的過程就是對各種CSS屬性的設(shè)置過程，這些屬性分為：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展等等八個部分。 1創(chuàng)建新的 CSS 樣式表 （1）新建CSS樣式

11、圖11-54 編輯樣式表對話框 圖11-55 新建CSS 樣式表對話框 彈出式菜單中提供的選擇器 它們的含義是： a:link：未訪問的鏈接 a:visited：已訪問的鏈接 a:active：激活時（鏈接獲得焦點時）的鏈接 a:hover：鼠標移到鏈接上時 2使用CSS改變超級鏈接的顯示效果 圖11-56 a的CSS樣式定義對話框 圖11-57 新建CSS 樣式表對話框 圖11-58 CSS樣式定義對話框 11.3.13 表單的使用 表單是一種可以使用戶將本身的信息交給Web服務(wù)器的一種頁面元素。加入表單后，訪問者可以使用諸如文本域、列表框、復(fù)選框以及單選按鈕之類的表單對象輸入信息，然后單擊確認或提交按鈕提交這些信息。 11.3.13 表單的使用 （1）文本字段 （2）隱藏域 （3）按鈕 （4）復(fù)選框 （5）單選按鈕 （6）列表/菜單 （7）跳轉(zhuǎn)菜單 （8）文件域 （9）圖像域 11.3.13 表單的使用 本章小結(jié) 本章介紹了使用Dreamweaver的基本操作方法，包括安裝，網(wǎng)站的創(chuàng)建，網(wǎng)頁元素的添加，并以華中師范大學(xué)的黨委組織部的網(wǎng)頁為例簡要的介紹了一般網(wǎng)頁的制作方法。 希望通過本章的學(xué)習(xí)能夠使讀者對Dreamweaver的使用有一定的了解，并能夠獨立設(shè)計并實現(xiàn)網(wǎng)站的創(chuàng)建工作。