網(wǎng)頁(yè)設(shè)計(jì)與制作(dreamwaver版)

1、網(wǎng)頁(yè)設(shè)計(jì)與制作,萬(wàn)寒,1,2,主要內(nèi)容,網(wǎng)頁(yè)相關(guān)知識(shí) 網(wǎng)站的設(shè)計(jì)與規(guī)劃 網(wǎng)頁(yè)基本編輯 網(wǎng)頁(yè)布局的方法 表單設(shè)計(jì)與網(wǎng)頁(yè)交互 網(wǎng)站的發(fā)布與更新,3,1 網(wǎng)頁(yè)相關(guān)知識(shí),1.1 網(wǎng)頁(yè)相關(guān)知識(shí) 1.2 網(wǎng)站建設(shè)的一般過(guò)程 1.3 網(wǎng)站的設(shè)計(jì) 1.4 HTML語(yǔ)言簡(jiǎn)介,1.1 網(wǎng)頁(yè)基本知識(shí),WWW(World Wide Web ) WEB由互相鏈接在一起的網(wǎng)頁(yè)構(gòu)成，這些網(wǎng)頁(yè)是由普通文本、超文本Hypertext，以及圖表、圖片等構(gòu)成。 URL（Uniform Resource Locator） URL（統(tǒng)一資源定位器）是指向網(wǎng)絡(luò)服務(wù)器中某個(gè)資源的地址，用字符串來(lái)表示。其中包括協(xié)議、主機(jī)域名（或IP地址）、

2、文件名等等。 例：72:8080/jsjcz/ ftp:/,4,網(wǎng)頁(yè)基本知識(shí)（續(xù)）,超級(jí)鏈接（Hyperlink）與超文本 超級(jí)鏈接是包含在網(wǎng)頁(yè)中指向其他網(wǎng)頁(yè)的指針。包含超鏈接的文本稱為超文本。有時(shí)圖像或圖像的某部分也可以包含超鏈接。 超媒體 當(dāng)超文本網(wǎng)頁(yè)中包含聲音、動(dòng)畫(huà)、視頻等其它媒體時(shí)，網(wǎng)頁(yè)被稱為是超媒體的。瀏覽器一般通過(guò)外掛的幫助程序來(lái)顯示這些超媒體信息。 瀏覽器 用戶通過(guò)稱為瀏覽器的軟件來(lái)觀看網(wǎng)頁(yè)，瀏覽器取回所請(qǐng)求的網(wǎng)頁(yè)，解釋其中所含的文本和格式命令，并正確的顯示出來(lái)。 網(wǎng)頁(yè)與網(wǎng)站 網(wǎng)頁(yè)由超文本標(biāo)記語(yǔ)言（HTML，HyperText Markup

3、Language）寫(xiě)成，網(wǎng)頁(yè)之間通過(guò)超鏈接相互組織成為反映某個(gè)主題的網(wǎng)站。,5,1.2 WEB 工作模式,6,HTTP協(xié)議,用HTML編寫(xiě),http request,http response,HTTP協(xié)議,用開(kāi)發(fā)工具編寫(xiě) 如FrontPage,瀏覽器,Homepage 主頁(yè),網(wǎng)頁(yè),網(wǎng)頁(yè),1.3 網(wǎng)站建設(shè)的基本過(guò)程,申請(qǐng)域名 建立服務(wù)器主機(jī) 服務(wù)器主機(jī)應(yīng)該能夠提供7*24小時(shí)不間斷聯(lián)網(wǎng)服務(wù)，根據(jù)企業(yè)或個(gè)人的資金、網(wǎng)絡(luò)維護(hù)能力等不同可以選擇不同的服務(wù)方式。 自己建立服務(wù)器主機(jī) 主機(jī)托管模式 虛擬主機(jī)模式 設(shè)計(jì)網(wǎng)站 制作網(wǎng)頁(yè),7,1.4 HTML語(yǔ)言簡(jiǎn)介,HTML是一種簡(jiǎn)單的標(biāo)記語(yǔ)言，它主要用于描

4、述Web文檔的結(jié)構(gòu)。HTML代碼描述超文本文檔的格式。格式由瀏覽器解釋和執(zhí)行。,8,標(biāo)記的一般格式為： 對(duì)象 對(duì)象 例如：我的主頁(yè) 簡(jiǎn)介,超文本文檔的結(jié)構(gòu),例： 我的第一個(gè)主頁(yè) 這是一個(gè)簡(jiǎn)單的例子 ,9,文檔頭部,文檔體,1.5 常用網(wǎng)頁(yè)制作工具,10,網(wǎng)頁(yè)編寫(xiě)軟件 Frontpage 、Dreamwaver 圖形/圖像處理軟件 Photoshop、Fireworks 網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件 Flash 動(dòng)態(tài)交互網(wǎng)頁(yè)編程 Jsp 、asp、php ,2 網(wǎng)站的規(guī)劃與設(shè)計(jì),網(wǎng)站規(guī)劃與設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的一般原則 網(wǎng)頁(yè)的版面設(shè)計(jì) 網(wǎng)頁(yè)的色彩運(yùn)用,網(wǎng)站設(shè)計(jì)之前,你想傳播哪些信息或服務(wù)給訪問(wèn)者？ 誰(shuí)有可能訪問(wèn)你

5、的網(wǎng)站？ 他們想知道什么？ 他們的閱讀習(xí)慣是什么？,12,網(wǎng)站設(shè)計(jì)流程,13,2.1 網(wǎng)站設(shè)計(jì)遵循的一般原則,14,網(wǎng)頁(yè)的版面設(shè)計(jì),15,網(wǎng)頁(yè)的版面設(shè)計(jì)原則,主次分明，中心突出 大小搭配，相互呼應(yīng) 圖文并茂，相得益彰 動(dòng)靜有度，平衡對(duì)稱,2.3 頁(yè)面的色彩處理,總體協(xié)調(diào) 局部對(duì)比,暖色調(diào)：紅、橙、黃、褐色等搭配，可使頁(yè)面呈現(xiàn)溫馨、和煦、熱情的氛圍。 冷色調(diào)：青、綠、紫色等搭配，可使頁(yè)面呈現(xiàn)寧?kù)o、清涼、高雅的氛圍。 對(duì)比色調(diào)：紅與綠、黃與紫、橙與藍(lán)等色調(diào)完全相反的顏色搭配，可以產(chǎn)生強(qiáng)烈的視覺(jué)效果，呈現(xiàn)亮麗、鮮艷、喜慶的感覺(jué)。,頁(yè)面的色彩處理,紅色象征熱情、奔放、生命 黃色象征華麗、高貴、明快 綠

6、色象征純自然、生長(zhǎng)、安寧、和平、安全 紫色象征高貴、莊重 白色象征和平、圣潔,總體協(xié)調(diào) 局部對(duì)比,頁(yè)面的色彩處理舉例,總體協(xié)調(diào) 局部對(duì)比,3 網(wǎng)頁(yè)制作,網(wǎng)頁(yè)的布局 向網(wǎng)頁(yè)中添加文本 向網(wǎng)頁(yè)中添加圖像 向網(wǎng)頁(yè)中添加SWF動(dòng)畫(huà)和FLV視頻 向網(wǎng)頁(yè)中添加聲音 為網(wǎng)頁(yè)元素添加Javascript行為,20,Dreamwaver界面,屬性檢查器,文檔工具欄,面板組,網(wǎng)頁(yè)視圖切換,文件面板,從站點(diǎn)開(kāi)始,22,新建網(wǎng)頁(yè),23,設(shè)置網(wǎng)頁(yè)屬性,24,3.1 網(wǎng)頁(yè)布局,可視化助理 標(biāo)尺 輔助線 網(wǎng)格 跟蹤圖像 表格 框架 CSS布局,25,網(wǎng)頁(yè)的布局,表格 表格在網(wǎng)頁(yè)制作中的作用已經(jīng)超越了傳統(tǒng)意義上的存放數(shù)據(jù)，表

7、格已成為組織數(shù)據(jù)、排列網(wǎng)頁(yè)元素空間位置最為靈活的方法。 框架 框架也是一種常用的網(wǎng)頁(yè)布局方法，它將瀏覽器窗口劃分為功能獨(dú)立的多個(gè)區(qū)域，每個(gè)框架顯示一個(gè)網(wǎng)頁(yè)內(nèi)容，并且通過(guò)框架中的超鏈接可以更改顯示在另一個(gè)框架中的網(wǎng)頁(yè)文件。 CSS布局 標(biāo)示出文檔塊，對(duì)文檔塊應(yīng)用CSS定位網(wǎng)頁(yè)元素。,26,布局表格,27,在布局模式下，單擊繪制布局表格、繪制布局單元格可以在頁(yè)面中繪制出網(wǎng)頁(yè)的布局。,框架布局,框架將瀏覽器窗口分隔成若干個(gè)獨(dú)立區(qū)域，每個(gè)區(qū)域分別顯示不同的網(wǎng)頁(yè)。,28,框架之間的超鏈接,在框架網(wǎng)頁(yè)中，單擊某框架內(nèi)網(wǎng)頁(yè)上的超鏈接時(shí)，被超鏈接所指定的網(wǎng)頁(yè)通常在另一個(gè)框架中打開(kāi)，這個(gè)框架稱為目標(biāo)框架。,29

8、,填入框架的名字，鏈接的網(wǎng)頁(yè)顯示在目標(biāo)框架中,CSS布局,用DIV標(biāo)簽和層，應(yīng)用CSS的定位屬性進(jìn)行布局。,30,31,舉例,3.2 向頁(yè)面添加文本,標(biāo)題文本,列表,字體、字號(hào),顏色,如果有超鏈接，輸入U(xiǎn)RL,3.3 插入和修改圖像,33,插入鼠標(biāo)經(jīng)過(guò)圖像,當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí)，更換為另一幅圖像。,在Dreamwaver中編輯圖像,在Dreamwaver中直接對(duì)圖像進(jìn)行裁剪、亮度/對(duì)比度調(diào)節(jié)、銳化等編輯。更多的編輯要在專業(yè)的圖像處理軟件中。,設(shè)置圖像與文本的對(duì)齊方式,3.4 添加SWF影片和FLV視頻,SWF文件是用Flash制作的動(dòng)畫(huà)影片。 FLV是一種視頻文件，它包含經(jīng)過(guò)編碼的音頻和視頻數(shù)據(jù)，

9、用于通過(guò) Flash Player 傳送。,3.5 添加聲音,鏈接到聲音文件 嵌入聲音文件-插件,3.6 設(shè)置網(wǎng)頁(yè)格式,HTML格式 CSS樣式,38,文本及段落的格式化,39,樣式表CSS,樣式表定義應(yīng)用到網(wǎng)頁(yè)或網(wǎng)頁(yè)元素的樣式。樣式表可以設(shè)定： 改變文本行間距，字間距和字符間距 設(shè)置元素的左右上下邊距 設(shè)置元素的縮進(jìn) 改變?cè)刂形谋镜淖煮w大小、格式和其他屬性 設(shè)置元素邊框，并指定邊框的大小和各種屬性 設(shè)置元素的背景顏色和背景圖案 ,40,創(chuàng)建樣式表,類(lèi)樣式自定義CSS樣式規(guī)則，應(yīng)用于任何文本或區(qū)塊 HTML 標(biāo)簽規(guī)則重定義特定標(biāo)簽的格式 CSS 選擇器規(guī)則重定義特定元素組合的格式,應(yīng)用樣式表

10、,鏈接外部樣式表 內(nèi)聯(lián)樣式表 樣式表的定義內(nèi)容,42,規(guī)劃網(wǎng)站,建立站點(diǎn)-新建網(wǎng)頁(yè)-管理鏈接,4.1 資源,資源 重復(fù)使用的對(duì)象，如圖像、影片、顏色、腳本和鏈接等?？梢灾苯訉①Y源拖動(dòng)到網(wǎng)頁(yè)中加以應(yīng)用。 兩種特殊的資源 庫(kù)項(xiàng)目 包含一組單個(gè)資源或資源副本的文件，可在庫(kù)中存儲(chǔ)的項(xiàng)目包括圖像、表格、聲音和使用 Adobe Flash 創(chuàng)建的文件 模板 模板是一種特殊類(lèi)型的文檔，用于設(shè)計(jì)“ 固定的” 頁(yè)面布局?；谀０鍎?chuàng)建的文檔繼承模板的頁(yè)面布局,4.2 創(chuàng)建和管理模板,可編輯區(qū)域 基于模板的文檔中未鎖定的區(qū)域，也就是模板用戶可以編輯的部分。 重復(fù)區(qū)域 文檔布局的一部分，設(shè)置該部分可以使模板用戶必要時(shí)

11、在基于模板的文檔中添加或刪除重復(fù)區(qū)域的副本?？梢栽谀０逯胁迦氲闹貜?fù)區(qū)域有兩種：重復(fù)區(qū)域和重復(fù)表格。 可選區(qū)域 模板中放置內(nèi)容（如文本或圖像）的部分，該部分在文檔中可以出現(xiàn)也可以不出現(xiàn)。在基于模板的頁(yè)面上，模板用戶通常控制是否顯示內(nèi)容。 可編輯標(biāo)簽屬性 用于對(duì)模板中的標(biāo)簽屬性解除鎖定，這樣便可以在基于模板的頁(yè)面中編輯相應(yīng)的屬性。,模板的應(yīng)用,可編輯區(qū)域是可以修改的，其他區(qū)域不能修改,4.3 網(wǎng)頁(yè)的鏈接與導(dǎo)航,文本 圖像 導(dǎo)航條 跳轉(zhuǎn)菜單 圖像地圖,網(wǎng)頁(yè)路徑的表示,絕對(duì)路徑（例如 文檔相對(duì)路徑（例如 dreamweaver/contents.html）。 站點(diǎn)根目錄相對(duì)路徑（例如 /support

12、/dreamweaver/contents.html）。,鏈接目標(biāo)的類(lèi)型,其他網(wǎng)頁(yè)文檔 圖像 多媒體文件 可下載軟件 文檔內(nèi)任意位置,生成代碼： 鏈接文本 鏈接文本 鏈接文本,將Javascript腳本附加到鏈接上,跳轉(zhuǎn)菜單,將Javascript腳本附加到鏈接上,導(dǎo)航條,圖像地圖,圖像地圖就是包含超鏈接的圖像。創(chuàng)建圖像地圖的最常用方法就是在圖片上放入熱點(diǎn)。熱點(diǎn)是一個(gè)不可見(jiàn)的區(qū)域，單擊后可以將站點(diǎn)訪問(wèn)者帶到用戶定義的URL中。,53,熱點(diǎn)工具,5 網(wǎng)頁(yè)交互與表單設(shè)計(jì),5.1 靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè) 5.2 為網(wǎng)頁(yè)元素添加行為 5.3 網(wǎng)頁(yè)腳本語(yǔ)言Javascript與網(wǎng)頁(yè)動(dòng)態(tài)效果 5.4 創(chuàng)建表單

13、收集用戶信息,54,5.1 靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè),靜態(tài)網(wǎng)頁(yè)-網(wǎng)頁(yè)的內(nèi)容是靜態(tài)的 動(dòng)態(tài)網(wǎng)頁(yè)-網(wǎng)頁(yè)的內(nèi)容隨著用戶的交互動(dòng)作而動(dòng)態(tài)生成,55,靜態(tài)網(wǎng)頁(yè),動(dòng)態(tài)網(wǎng)頁(yè),5.2 為網(wǎng)頁(yè)元素添加行為,事件 用戶與網(wǎng)頁(yè)交互時(shí)，鼠標(biāo)或鍵盤(pán)的操作生成事件 行為 事件發(fā)生所調(diào)用的Javascript函數(shù),5.3 網(wǎng)頁(yè)腳本語(yǔ)言Javascript,網(wǎng)頁(yè)動(dòng)態(tài)效果,常用網(wǎng)頁(yè)腳本語(yǔ)言 Javascript 、Vbscript Java applet小程序 動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)工具 Asp、Jsp、Php,58,JavaScript實(shí)例1,JavaScript實(shí)例2,要使網(wǎng)站具有某些功能，就需要在網(wǎng)頁(yè)中加入實(shí)現(xiàn)動(dòng)態(tài)交互功能的程序代碼。,

14、JavaScript實(shí)例3,實(shí)例1 -口算練習(xí)界面, 出題 ,59,實(shí)例1口算練習(xí)代碼, function kk() ff.T1.value=Math.round(Math.random()*10); ff.T2.value=Math.round(Math.random()*10); ff.T3.focus(); function jj() a=parseInt(ff.T1.value); b=parseInt(ff.T2.value); c=parseInt(ff.T3.value); if (eval(a+b)=c) alert(哇噻！好棒??！); else alert(很遺憾！不對(duì).加油

15、哦！) ,60,實(shí)例2動(dòng)畫(huà)界面, ,61,實(shí)例2動(dòng)畫(huà)代碼, var intTimeout; var intx;intx=80; var inty;inty=350; function window_onload() document.all.img1.style.top=50; document.all.img1.style.left=10; document.all.img2.style.top=inty; document.all.img2.style.left=intx; intTimeout=setTimeout(“go(),1000); function go() intx=intx

16、+10; if (intx600) intx=10; document.all.img2.style.left=intx; setTimeout(“go(),1000); ,62,實(shí)例3隱藏頁(yè)面元素界面, 單擊下面紅色的字，圖片會(huì)隱藏起來(lái) 隱藏圖象 ,實(shí)例3隱藏頁(yè)面元素代碼, function toggle(e) if (e.style.display =none) e.style.display = else e.style.display= none ,5.4 交互界面的設(shè)計(jì)-表單,65,設(shè)計(jì)表單,創(chuàng)建表單 文本字段 text 文本區(qū)域 textarea 列表/菜單 select 復(fù)選框 checkbox 單選按鈕 radio 文件域 圖像域 按鈕 ,66,表單的處理,67,一個(gè)表單必須有一個(gè)提交按鈕。單擊提交按鈕后，表單的結(jié)果l可以送到一個(gè)文件、電子郵件地址、數(shù)據(jù)庫(kù)、表單處理程序以及自定義（ISAPI、CGI、ASP等）表單處理程序。,處理表單數(shù)據(jù)的程序,表單數(shù)據(jù)的讀出, function get_value() var a,b,c,d,e,f,g; a=form1.textfield.