《第11章 網(wǎng)頁(yè)設(shè)計(jì)》由會(huì)員分享，可在線閱讀，更多相關(guān)《第11章 網(wǎng)頁(yè)設(shè)計(jì)（59頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、第第11章章 網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì) 本章學(xué)習(xí)重點(diǎn) 網(wǎng)站設(shè)計(jì)的基本方法 Dreamweaver的特點(diǎn) Dreamweaver中插入多種媒體的方法，包括文字、圖像、聲音、flash等等 超級(jí)鏈接的設(shè)置 Dreamweaver中表格的基本操作 Dreamweaver中布局表格的使用技巧 Dreamweaver中框架的操作 Dreamweaver的層、行為、時(shí)間軸的概念 Dreamweaver中表單元素的添加方法 11.1網(wǎng)站設(shè)計(jì)方法簡(jiǎn)介網(wǎng)站設(shè)計(jì)方法簡(jiǎn)介 1明確的網(wǎng)站主題 2清晰的網(wǎng)站結(jié)構(gòu) 3風(fēng)格獨(dú)特的網(wǎng)站形象 4有力的網(wǎng)站宣傳 11.2 Dreamweaver簡(jiǎn)介 Dreamweaver是美國(guó)Macro
2、media公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一體的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，它是一套針對(duì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別開(kāi)發(fā)的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。 11.2.1 Dreamweaver的特點(diǎn) 1操作簡(jiǎn)單 2多媒體處理功能強(qiáng) 3靈活輕便 4建站方便 11.2.2 Dreamweaver的安裝 1 系統(tǒng)要求 2 安裝步驟 Dreamweaver工作區(qū) 2站點(diǎn)布局 網(wǎng)站設(shè)計(jì)初始需要設(shè)計(jì)人員對(duì)網(wǎng)站的主題進(jìn)行規(guī)劃，網(wǎng)站必須主題鮮明，有層次感。一般的網(wǎng)站中的網(wǎng)頁(yè)設(shè)計(jì)不多于三層，這樣，用戶可以方便地從主頁(yè)中快速的找到連接網(wǎng)站中的其他網(wǎng)頁(yè)的途徑。 2站點(diǎn)布局
3、 （1）設(shè)置主頁(yè) （2）查看站點(diǎn)地圖 11.2.4 站點(diǎn)的應(yīng)用與管理 在Dreamweaver 中包括兩種站點(diǎn)： 遠(yuǎn)程站點(diǎn)：服務(wù)器上組成 Web 站點(diǎn)的文件，用于個(gè)使用者進(jìn)行網(wǎng)上瀏覽。 本地站點(diǎn)：與遠(yuǎn)程站點(diǎn)上的文件對(duì)應(yīng)的本地磁盤(pán)上的文件。在最常見(jiàn)的 Dreamweaver 工作流程中，用戶在本地磁盤(pán)上編輯文件，然后將它們上傳到遠(yuǎn)程站點(diǎn)。 11.2.4 站點(diǎn)的應(yīng)用與管理 1創(chuàng)建站點(diǎn)11.3.1 新建并保存網(wǎng)頁(yè) 1 新建網(wǎng)頁(yè) 2 打開(kāi)網(wǎng)頁(yè) 3 保存網(wǎng)頁(yè) 11.3.2 設(shè)置頁(yè)標(biāo)題 11.3.3 添加文字及格式設(shè)置 1 添加文字 （1）添加文本文檔 （2）添加Word 或 Excel 文檔 2 文字顏
4、色設(shè)置 3 設(shè)置或更改字體 11.3.4 添加圖像 Web 頁(yè)中通常使用的圖形文件格式只有三種，即 GIF、JPEG 和 PNG 1插入圖像占位符 11.3.4 添加圖像 2、替換占位符，插入圖像 3直接插入圖像 11.3.4 添加圖像 4 調(diào)整圖像 調(diào)整圖像常常是對(duì)圖像進(jìn)行重新取樣、裁剪、亮度/對(duì)比度調(diào)整、銳化等等，這些操作往往可以通過(guò)屬性窗口中的按鈕快速完成。11.3.5 設(shè)置超級(jí)鏈接 1創(chuàng)建鏈接 在一個(gè)文檔中可以創(chuàng)建幾種類(lèi)型的鏈接，其類(lèi)型和創(chuàng)建步驟如下： （1）鏈接到其它文檔 11.3.5 設(shè)置超級(jí)鏈接 （2）命名錨記鏈接 11.3.5 設(shè)置超級(jí)鏈接 （3）電子郵件鏈接 11.3.5 設(shè)
5、置超級(jí)鏈接 （4）空鏈接和腳本鏈接 此類(lèi)鏈接使用戶能夠在對(duì)象上附加行為，或者創(chuàng)建執(zhí)行 JavaScript 代碼的鏈接。 2 鏈接的字體顯示 3 為圖片設(shè)置超級(jí)鏈接 圖像地圖是指已被分為多個(gè)區(qū)域（或稱(chēng)“熱點(diǎn)”）的圖像；當(dāng)用戶單擊某個(gè)熱點(diǎn)時(shí)，會(huì)發(fā)生某種操作（例如，打開(kāi)一個(gè)新文件）。 11.3.6插入flash 1 創(chuàng)建和插入 Flash 按鈕 2插入 Flash 文本對(duì)象 3插入 Flash 影片 （1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在需要插入影片的地方。 （2）在“插入”欄的“常用”類(lèi)別中，選擇“媒體”，然后單擊“插入 Flash”圖標(biāo)?；蛘哌x擇【插入】【媒體】【Flash】。
6、（3）在顯示的對(duì)話框中，選擇需要加入的Flash 文件 (.swf)。Flash 占位符隨即出現(xiàn)在“文檔”窗口中。 （4）在“文檔”窗口中，單擊 Flash 占位符以選擇要預(yù)覽的 Flash 影片。 4插入 Flash 元素 使用 Dreamweaver，設(shè)計(jì)者可以在文檔中插入 Flash 元素。Flash 元素使設(shè)計(jì)者可以快速、方便地使用預(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è)上的應(yīng)用
7、 框架提供將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域、每個(gè)區(qū)域都可以顯示不同 HTML 文檔的方法。使用框架的最常見(jiàn)的情況就是，一個(gè)框架顯示包含導(dǎo)航控件的文檔，而另一個(gè)框架顯示含有內(nèi)容的文檔。 1 創(chuàng)建框架 1 創(chuàng)建框架 （2）設(shè)計(jì)框架集 圖11-35 框架面板 圖11-36 拆分后的框架面板2具有控制鏈接的框架內(nèi)容的設(shè)置 2具有控制鏈接的框架內(nèi)容的設(shè)置 在目標(biāo)的下拉列表框中有以下四個(gè)固有選項(xiàng)，其含義是： _blank 在新的瀏覽器窗口中打開(kāi)鏈接的文檔，同時(shí)保持當(dāng)前窗口不變。 _parent 在顯示鏈接的框架的父框架集中打開(kāi)鏈接的文檔，同時(shí)替換整個(gè)框架集。 _self 在當(dāng)前框架中打開(kāi)鏈接，同時(shí)替換該框架
8、中的內(nèi)容。 _top 在當(dāng)前瀏覽器窗口中打開(kāi)鏈接的文檔，同時(shí)替換所有框架。 11.3.9 層的概念 在Dreamweaver中可以使用層來(lái)設(shè)計(jì)頁(yè)面的布局?？梢詫忧昂蠓胖?，隱藏某些層而顯示其它層，或者在屏幕上用鼠標(biāo)或行為等移動(dòng)層。例如可以在一個(gè)層中放置背景圖像，然后在該層的前面放置第二個(gè)層，它包含帶有透明背景的文本。 2 使用“層”面板 通過(guò)“層”面板可以管理文檔中的層。使用“層”面板可防止重疊，更改層的可見(jiàn)性，將層嵌套或堆疊，以及選擇一個(gè)或多個(gè)層。 3 對(duì)齊層 使用層對(duì)齊命令可按最后一個(gè)選定層的邊框來(lái)對(duì)齊一個(gè)或多個(gè)層。 4 在層和表格之間轉(zhuǎn)換 （1）層轉(zhuǎn)換為表格 （2）表轉(zhuǎn)換為層 11.3.
9、10 利用行為制作動(dòng)態(tài)效果 行為是Dreamweaver中內(nèi)置的JavaScript程序庫(kù)，使用行為可以使網(wǎng)頁(yè)制作人員不用編寫(xiě)腳本程序而實(shí)現(xiàn)一些動(dòng)作，例如，播放聲音、打開(kāi)瀏覽器窗口、彈出消息框、控制Flash播放等等。 1 播放聲音 2 打開(kāi)瀏覽器窗口 3 彈出消息框 4 控制 Shockwave 或 Flash 11.3.11使用時(shí)間軸制作DHTML “時(shí)間軸”是Dreamweaver中的特殊功能，常常用于在網(wǎng)頁(yè)上顯示漂浮的圖片信息，這種漂浮的圖片往往很顯眼，這種漂浮的圖片就可以用“時(shí)間軸”功能現(xiàn)實(shí)。 “時(shí)間軸”只能對(duì)“層”發(fā)生作用。所以，如果要產(chǎn)生動(dòng)畫(huà)效果，首先要?jiǎng)?chuàng)建層，再將圖像、文本等內(nèi)
10、容插入到層中，然后通過(guò)移動(dòng)層來(lái)移動(dòng)這些元素。使用時(shí)間軸的步驟為 圖11-49 時(shí)間軸面板 圖11-50 時(shí)間軸提示框 圖11-51 加入關(guān)鍵幀后的時(shí)間軸面板 圖11-52圖層漂浮路線 11.3.12 使用樣式表CSS 現(xiàn)代網(wǎng)頁(yè)制作的復(fù)雜效果離不開(kāi)CSS技術(shù)，采用CSS技術(shù)可以有效的對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。它不僅可以做出美觀工整令瀏覽者賞心悅目的網(wǎng)頁(yè)，還能給網(wǎng)頁(yè)添加許多特殊的效果。 創(chuàng)建CSS樣式表的過(guò)程就是對(duì)各種CSS屬性的設(shè)置過(guò)程，這些屬性分為：類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展等等八個(gè)部分。 1創(chuàng)建新的 CSS 樣式表 （1）新建CSS樣式
11、圖11-54 編輯樣式表對(duì)話框 圖11-55 新建CSS 樣式表對(duì)話框 彈出式菜單中提供的選擇器 它們的含義是： a:link：未訪問(wèn)的鏈接 a:visited：已訪問(wèn)的鏈接 a:active：激活時(shí)（鏈接獲得焦點(diǎn)時(shí)）的鏈接 a:hover：鼠標(biāo)移到鏈接上時(shí) 2使用CSS改變超級(jí)鏈接的顯示效果 圖11-56 a的CSS樣式定義對(duì)話框 圖11-57 新建CSS 樣式表對(duì)話框 圖11-58 CSS樣式定義對(duì)話框 11.3.13 表單的使用 表單是一種可以使用戶將本身的信息交給Web服務(wù)器的一種頁(yè)面元素。加入表單后，訪問(wèn)者可以使用諸如文本域、列表框、復(fù)選框以及單選按鈕之類(lèi)的表單對(duì)象輸入信息，然后單擊確認(rèn)或提交按鈕提交這些信息。 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)頁(yè)元素的添加，并以華中師范大學(xué)的黨委組織部的網(wǎng)頁(yè)為例簡(jiǎn)要的介紹了一般網(wǎng)頁(yè)的制作方法。 希望通過(guò)本章的學(xué)習(xí)能夠使讀者對(duì)Dreamweaver的使用有一定的了解，并能夠獨(dú)立設(shè)計(jì)并實(shí)現(xiàn)網(wǎng)站的創(chuàng)建工作。
第11章 網(wǎng)頁(yè)設(shè)計(jì)
