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

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

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

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

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

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

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

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

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

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

11、在基于模板的文檔中添加或刪除重復區(qū)域的副本。可以在模板中插入的重復區(qū)域有兩種：重復區(qū)域和重復表格。 可選區(qū)域 模板中放置內容（如文本或圖像）的部分，該部分在文檔中可以出現(xiàn)也可以不出現(xiàn)。在基于模板的頁面上，模板用戶通?？刂剖欠耧@示內容。 可編輯標簽屬性 用于對模板中的標簽屬性解除鎖定，這樣便可以在基于模板的頁面中編輯相應的屬性。,模板的應用,可編輯區(qū)域是可以修改的，其他區(qū)域不能修改,4.3 網(wǎng)頁的鏈接與導航,文本 圖像 導航條 跳轉菜單 圖像地圖,網(wǎng)頁路徑的表示,絕對路徑（例如 文檔相對路徑（例如 dreamweaver/contents.html）。 站點根目錄相對路徑（例如 /support

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

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

14、JavaScript實例3,實例1 -口算練習界面, 出題 ,59,實例1口算練習代碼, 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(很遺憾！不對.加油

15、哦！) ,60,實例2動畫界面, ,61,實例2動畫代碼, 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,實例3隱藏頁面元素界面, 單擊下面紅色的字，圖片會隱藏起來 隱藏圖象 ,實例3隱藏頁面元素代碼, function toggle(e) if (e.style.display =none) e.style.display = else e.style.display= none ,5.4 交互界面的設計-表單,65,設計表單,創(chuàng)建表單 文本字段 text 文本區(qū)域 textarea 列表/菜單 select 復選框 checkbox 單選按鈕 radio 文件域 圖像域 按鈕 ,66,表單的處理,67,一個表單必須有一個提交按鈕。單擊提交按鈕后，表單的結果l可以送到一個文件、電子郵件地址、數(shù)據(jù)庫、表單處理程序以及自定義（ISAPI、CGI、ASP等）表單處理程序。,處理表單數(shù)據(jù)的程序,表單數(shù)據(jù)的讀出, function get_value() var a,b,c,d,e,f,g; a=form1.textfield.