第1章 網(wǎng)頁(yè)設(shè)計(jì)入

第1章網(wǎng)頁(yè)設(shè)計(jì)入門主講人:1.1關(guān)于網(wǎng)頁(yè)設(shè)計(jì)1.1.1靜態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)的概念是標(biāo)準(zhǔn)的HTML文件，其文件擴(kuò)展名是.htm或.html。它可以包含HTML標(biāo)記、文本、Jave小程序、客戶端腳本、以及客戶端ActiveX控件。靜態(tài)網(wǎng)頁(yè)的工作流程瀏覽器向Web服務(wù)器發(fā)送一個(gè)頁(yè)面請(qǐng)求Web服務(wù)器獲取適當(dāng)?shù)腍TML文件Web服務(wù)器將HTML文件發(fā)送到客戶端的瀏覽器1.1關(guān)于網(wǎng)頁(yè)設(shè)計(jì)1.1.2動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)的概念動(dòng)態(tài)網(wǎng)頁(yè)中包含的某些腳本只能在Web服務(wù)器上運(yùn)行，當(dāng)Web服務(wù)器接收到對(duì)動(dòng)態(tài)網(wǎng)頁(yè)的請(qǐng)求時(shí)，它將做出不同的反映.動(dòng)態(tài)網(wǎng)頁(yè)的工作流程瀏覽器向Web服務(wù)器發(fā)送一個(gè)頁(yè)面請(qǐng)求Web服務(wù)器將該頁(yè)面?zhèn)鬟f給相應(yīng)的應(yīng)用程序服務(wù)器服務(wù)器上執(zhí)行該頁(yè)面的腳本命令最終完成頁(yè)面應(yīng)用程序服務(wù)器將所生成的頁(yè)面?zhèn)鬟f回Web服務(wù)器Web服務(wù)器將該頁(yè)面發(fā)送到瀏覽器1.1關(guān)于網(wǎng)頁(yè)設(shè)計(jì)1.1.3常見(jiàn)的網(wǎng)頁(yè)格式HTML:是用于向網(wǎng)絡(luò)瀏覽器解釋網(wǎng)頁(yè)內(nèi)容的編碼，是網(wǎng)頁(yè)存儲(chǔ)時(shí)所使用的文件格式ASP:動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè),有較高的安全性，控制和使用數(shù)據(jù)庫(kù)更容易.JSP:用于生成動(dòng)態(tài)網(wǎng)頁(yè)CSS:層疊樣式表（CascadingStylesheet）,用于規(guī)范和統(tǒng)一網(wǎng)頁(yè)格式1.1關(guān)于網(wǎng)頁(yè)設(shè)計(jì)1.1.4網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)文字、圖片、符號(hào)是構(gòu)成網(wǎng)頁(yè)的信息要素

點(diǎn)、線、面、色彩是構(gòu)成網(wǎng)頁(yè)的設(shè)計(jì)要素網(wǎng)頁(yè)的整體設(shè)計(jì)就是要綜合考慮各設(shè)計(jì)要素對(duì)立或平衡，將各部分視覺(jué)要素在頁(yè)面內(nèi)進(jìn)行合理規(guī)劃1.2認(rèn)識(shí)DreamweaverDreamweaver是由美國(guó)Macromedia公司開(kāi)發(fā)的一款專業(yè)可視化網(wǎng)頁(yè)開(kāi)發(fā)工具。支持多種瀏覽器，可跨平臺(tái)開(kāi)發(fā)網(wǎng)頁(yè)，實(shí)現(xiàn)了可視化動(dòng)態(tài)HTML編程，具有使用簡(jiǎn)便，可擴(kuò)充性強(qiáng)性的特點(diǎn)，是目前大多數(shù)的網(wǎng)頁(yè)開(kāi)發(fā)人員所使用的網(wǎng)頁(yè)開(kāi)發(fā)工具1.3認(rèn)識(shí)工作區(qū)首次運(yùn)行Dreamweaver會(huì)彈出“工作區(qū)設(shè)置”對(duì)話框，用于選擇工作區(qū)布局的設(shè)置.1.3認(rèn)識(shí)工作區(qū)1.3.1標(biāo)題欄標(biāo)題欄中顯示了當(dāng)前軟件的名稱，即“Dreamweaver”，同時(shí)顯示了當(dāng)前正在編輯的文件名稱。與Windows其他應(yīng)用程序一樣，標(biāo)題欄的右端有3個(gè)按鈕，從左往右分別為：【最小化】按鈕、【最大化】按鈕和【關(guān)閉】按鈕。1.3認(rèn)識(shí)工作區(qū)1.3.2菜單欄菜單欄位于標(biāo)題的下方，提供了全面的Dreamweaver命令包括文件、編輯、查看、插入、修改、文本、命令、站點(diǎn)、窗口和幫助10組不同功能的指令菜單1.3認(rèn)識(shí)工作區(qū)1.3.3“插入”工具欄“插入”工具欄中匯集了網(wǎng)頁(yè)中插入元素時(shí)所需的對(duì)象按鈕，可以很輕松地加入圖像、聲音、多媒體影片、表格、層、框、表單等網(wǎng)頁(yè)元素1.3認(rèn)識(shí)工作區(qū)1.3.4“文檔”工具欄“文檔”工具欄中匯集了各種常用的工具，如視圖切換（如設(shè)計(jì)視圖和代碼視圖）、各種查看選項(xiàng)和一些常用操作（如瀏覽器中預(yù)覽）1.3認(rèn)識(shí)工作區(qū)1.3.5文檔窗口文檔窗口中顯示了當(dāng)前正在編輯的文檔內(nèi)容，這是我們編輯和制作網(wǎng)頁(yè)的主要的工作區(qū)域。Dreamweaver提供了三種視圖方式來(lái)進(jìn)行網(wǎng)頁(yè)的查看，包括:設(shè)計(jì)視圖代碼視圖拆分視圖。1.3認(rèn)識(shí)工作區(qū)1.3.6標(biāo)簽選擇器顯示當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊標(biāo)簽可以選擇該標(biāo)簽及其全部?jī)?nèi)容。用于顯示和選定文本或?qū)ο?。?jiǎn)單地講“標(biāo)簽選擇器”用來(lái)提供便捷地選定HTML標(biāo)簽的方法。1.3認(rèn)識(shí)工作區(qū)1.3.7“屬性”面板“屬性”面板可以用來(lái)檢查和編輯當(dāng)前選定的頁(yè)面元素（如文本和插入的對(duì)象）的最常用屬性?！皩傩浴泵姘逯械膬?nèi)容根據(jù)選定的元素不同而有所不同.1.折疊或展開(kāi)“屬性”面板2.顯示或隱藏“屬性”面板1.3認(rèn)識(shí)工作區(qū)1.3.8面板組Dreamweaver8保留了許多重要的浮動(dòng)控制面板功能，使用了更容易控制、更為方便的顯