《Web程序設(shè)計(jì)（第二版）》課件04

第1章Web程序設(shè)計(jì)基礎(chǔ)第2章Web程序及運(yùn)行環(huán)境第3章標(biāo)記語言HTML規(guī)范

第4章網(wǎng)頁設(shè)計(jì)與制作第5章客戶端編程第6章服務(wù)端編程目錄第4章

網(wǎng)頁設(shè)計(jì)與制作4.1網(wǎng)頁設(shè)計(jì)基礎(chǔ)4.2使用FrontPage4.3網(wǎng)頁編輯4.4設(shè)置標(biāo)記屬性4.5定義和使用樣式4.6Frame框架和IFrame框4.1網(wǎng)頁設(shè)計(jì)基礎(chǔ)頁面功能與內(nèi)容設(shè)計(jì)頁面布局設(shè)計(jì)頁面視覺設(shè)計(jì)頁面效果設(shè)計(jì)頁面功能與內(nèi)容設(shè)計(jì)Web應(yīng)用（網(wǎng)站）主目錄，首頁子目錄、網(wǎng)頁文件及各類其他文件數(shù)據(jù)庫Web應(yīng)用==傳統(tǒng)的計(jì)算機(jī)軟件系統(tǒng)軟件系統(tǒng)分析、設(shè)計(jì)和開發(fā)相關(guān)的方法和模式進(jìn)行生命周期法原型法MVC設(shè)計(jì)模式MVC設(shè)計(jì)模式在Web開發(fā)中，模型－視圖－控制器（Model-View-Controller，MVC）設(shè)計(jì)模式是一種比較流行的設(shè)計(jì)模式。MVC設(shè)計(jì)模式Xerox

PARC在20世紀(jì)80年代為編程語言Smalltalk－80發(fā)明的一種軟件設(shè)計(jì)模式核心思想是在系統(tǒng)開發(fā)中把商業(yè)邏輯，界面顯示和數(shù)據(jù)進(jìn)行分離，強(qiáng)制性的使應(yīng)用程序的輸入、處理和輸出分開，分成相對獨(dú)立而又能協(xié)同工作的3個組成部分：模型（Model）、視圖（View）、控制器（Controller），它們各自處理自己的任務(wù)。模型，表示企業(yè)數(shù)據(jù)和業(yè)務(wù)規(guī)則，在MVC的三個部件中，模型擁有最多的處理任務(wù)，實(shí)現(xiàn)具體的業(yè)務(wù)邏輯、狀態(tài)管理的功能。視圖，是用戶看到并與之交互的界面，通常實(shí)現(xiàn)數(shù)據(jù)的輸入和輸出功能?？刂破鳎刂普麄€業(yè)務(wù)流程，實(shí)現(xiàn)View層跟Model層的協(xié)同工作?？刂破鹘邮苡脩舻妮斎氩⒄{(diào)用模型和視圖去完成用戶的需求。網(wǎng)頁功能進(jìn)行分類根據(jù)MVC設(shè)計(jì)模式，可以將網(wǎng)頁功能進(jìn)行分類用于輸入輸出的頁面（視圖）；服務(wù)端腳本程序頁面（模型），這類頁面不在瀏覽器中顯示，主要是負(fù)責(zé)數(shù)據(jù)的查詢、存儲等；導(dǎo)航頁面，類似MVC中的控制器，也類似于傳統(tǒng)程序中的菜單，實(shí)現(xiàn)頁面之間的調(diào)用和導(dǎo)航，典型的導(dǎo)航頁面就是站點(diǎn)首頁。將網(wǎng)頁按照MVC設(shè)計(jì)模式進(jìn)行分類可以更好的規(guī)劃一個Web站點(diǎn)，保證站點(diǎn)的可擴(kuò)展性、靈活性和可維護(hù)性，這也是所有的軟件設(shè)計(jì)模式所追求的目標(biāo)。網(wǎng)頁內(nèi)容與表現(xiàn)形式網(wǎng)頁內(nèi)容網(wǎng)站標(biāo)志，導(dǎo)航，菜單，圖片按鈕，表單樣式，表格數(shù)據(jù)文字表現(xiàn)，新聞，公告，討論區(qū)，blogs，友情鏈接，廣告條，版權(quán)信息等。表現(xiàn)形式文本、圖片、動畫等不同的媒體形式來展示，以產(chǎn)生更好的用戶體驗(yàn)頁面布局設(shè)計(jì)網(wǎng)頁布局設(shè)計(jì)方法頁面布局的草圖加工定稿影響因素頁面尺寸，頁面尺寸和顯示器大小及分辨率有關(guān)系整體造型政府網(wǎng)頁商業(yè)站點(diǎn)游戲場景時尚站點(diǎn)頁頭頁腳菜單超鏈接常見頁面布局-1基于欄目的頁面布大部分的門戶網(wǎng)站首頁即采用基于欄目的頁面布局形式，例如，sina，yahoo，163，265上網(wǎng)導(dǎo)航等優(yōu)點(diǎn)，基于欄目的頁面布局主要應(yīng)用于一些商業(yè)網(wǎng)站的首頁。為吸引用戶，增加用戶訪問量，從商業(yè)運(yùn)營的目的出發(fā)，網(wǎng)站的內(nèi)容很多，分成了不同的超鏈接區(qū)域（版塊）。為節(jié)省屏幕空間，在欄目內(nèi)往往還使用標(biāo)簽，以組織更多的內(nèi)容。常見頁面布局-2整幅效果型布局頁面采用大幅圖片或Flash動畫，在底部加一“登錄”按鈕，通常用于站點(diǎn)首頁。特點(diǎn)，頁面美觀，可以較好的展示企業(yè)形象。缺點(diǎn)，登錄速度較慢。常見頁面布局-3“口”型頁面布局頁面一般上下各有一個廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容，這種頁面布局也經(jīng)常用于一些站點(diǎn)的首頁設(shè)計(jì)。優(yōu)點(diǎn)，充分利用版面，信息量大。缺點(diǎn)，頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計(jì)。常見頁面布局-4“工”型結(jié)構(gòu)布局所謂“工”型結(jié)構(gòu)布局，是指將頁面分成上、中、下三個部分，頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下面是版權(quán)等信息，中間為主要內(nèi)容，又分為左右兩個部分，左面為主菜單，右面顯示內(nèi)容的頁面布局形式。優(yōu)點(diǎn)“工”型頁面布局是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式，這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。缺點(diǎn)規(guī)矩呆板，如果細(xì)節(jié)和色彩上搭配不好，很難讓人留下印象，不適宜做前衛(wèi)的和個性化強(qiáng)的站點(diǎn)。常見頁面布局-5自頂向下層次結(jié)構(gòu)布局將頁面自頂向下分成幾個平行的區(qū)域，頂部是頁頭，接下來的區(qū)域分別放置超鏈接塊，最下面的區(qū)域顯示具體的文章正文內(nèi)容。一些文章頁面或注冊頁面等經(jīng)常采用這種類型的頁面布局。常見頁面布局-6自由式結(jié)構(gòu)布局頁面結(jié)構(gòu)布局打破了傳統(tǒng)的頁頭、頁尾、菜單、欄目、超鏈接區(qū)域等布局模式，把頁面設(shè)計(jì)成一張極具創(chuàng)意的廣告作品特點(diǎn)自由式結(jié)構(gòu)布局的優(yōu)點(diǎn)是頁面靚麗、現(xiàn)代、輕松、節(jié)奏明快，很容易讓訪問者駐足欣賞。缺點(diǎn)，下載速度緩慢，文字信息量少，信息的邏輯表達(dá)能力弱，瀏覽者不易直奔主題，信息查找麻煩。應(yīng)用自由式結(jié)構(gòu)布局一般用在時尚類站點(diǎn)上，如時裝、化妝品等以崇尚現(xiàn)代、美感為主題的站點(diǎn)，專業(yè)性的商務(wù)站點(diǎn)不宜采用。頁面視覺設(shè)計(jì)頁面視覺視覺設(shè)計(jì)是指利用視覺符號來傳遞各種信息的設(shè)計(jì)，其應(yīng)用的范疇很廣，可以包括工業(yè)產(chǎn)品設(shè)計(jì)，廣告設(shè)計(jì)，新媒體設(shè)計(jì)，服飾設(shè)計(jì)等等。頁面視覺設(shè)計(jì)分成圖形、字體和色彩幾個方面色彩設(shè)計(jì)不同功能的網(wǎng)站，其顏色的主色調(diào)設(shè)計(jì)也不相同。其次是顏色的搭配。圖形的應(yīng)用用于信息反饋增加趣味性文字的字體大號字空白，提高頁面的易讀性和易用性，空白可以分離出重要信息，使眼睛得到休息，并給人以冷靜和有秩序的感覺。頁面效果設(shè)計(jì)效果設(shè)計(jì)效果設(shè)計(jì)就是利用Photoshop等圖形圖像處理工具，按照頁面的布局設(shè)計(jì)，來設(shè)計(jì)頁面的完整圖片然后對圖片進(jìn)行切圖，為下面的頁面html代碼編寫準(zhǔn)備images。4.2使用FrontPage制作網(wǎng)頁FrontPage的功能網(wǎng)站的新建與維護(hù)網(wǎng)頁制作網(wǎng)頁編輯設(shè)置標(biāo)記屬性定義和使用樣式Frame框架和IFrame框架FrontPage的功能FrontPage的功能網(wǎng)站的新建與維護(hù)網(wǎng)頁制作FrontPage主界面設(shè)計(jì)模式拆分模式代碼模式預(yù)覽模式網(wǎng)站的新建與維護(hù)站點(diǎn)管理創(chuàng)建、刪除、打開、發(fā)布站點(diǎn)。站點(diǎn)的文件和文件夾進(jìn)行操作站點(diǎn)進(jìn)行安全性管理新建網(wǎng)站創(chuàng)建一個Web站點(diǎn)，本質(zhì)上就是建立一個主目錄，然后在主目錄下創(chuàng)建子目錄和網(wǎng)頁文件。任意的一個物理目錄，都可以作為站點(diǎn)打開新建站點(diǎn)操作步驟執(zhí)行“文件”菜單中的“新建…”命令，顯示“新建”任務(wù)窗格，在“新建網(wǎng)站”區(qū)域，點(diǎn)擊其中的任何一個超鏈接，都打開“網(wǎng)站模版”對話框單擊“個人站點(diǎn)”，在指定新網(wǎng)站位置文本框中，輸入一個文件夾名，該文件夾即為站點(diǎn)主目錄，單擊“確定”按鈕。先導(dǎo)則自動創(chuàng)建一個站點(diǎn)主目錄，并根據(jù)模版，創(chuàng)建相應(yīng)的子文件夾和網(wǎng)頁文件，新建網(wǎng)頁在“文件”菜單中，執(zhí)行“打開網(wǎng)站…”命令，選擇要打開的網(wǎng)站主目錄。在“文件”菜單中，執(zhí)行“新建…”命令，在客戶區(qū)右側(cè)顯示“新建”任務(wù)窗格。在網(wǎng)站文件夾列表中，單擊要新建網(wǎng)頁的文件夾。在“新建”任務(wù)窗格中，單擊“空白網(wǎng)頁”超鏈接，將新建一個空白網(wǎng)頁。單擊“其他網(wǎng)頁模版”，則打開“網(wǎng)頁模版”對話框，顯示FrontPage提供的默認(rèn)模版4.3網(wǎng)頁編輯輸入文本內(nèi)容插入圖片建立超鏈接或書簽圖像地圖插入表格插入表單輸入文本內(nèi)容輸入文本內(nèi)容格式化生成HTML代碼插入圖片插入圖片將插入點(diǎn)定位到要插入圖片的地方（本例定位到文字的開始）選擇菜單“插入”、“圖片”、“來自文件”，打開“圖片”對話框。設(shè)置圖片屬性。設(shè)置圖片由于圖片的高度和文字不一致，接下來應(yīng)該設(shè)置圖片的環(huán)繞方式。右單擊圖片，在快捷菜單中，執(zhí)行“圖片屬性”命令，打開圖片屬性對話框，設(shè)置圖片環(huán)繞樣式。格式化生成HTML代碼建立超鏈接或書簽標(biāo)記超鏈接選定超鏈接的文本或圖片單擊工具欄上的“超鏈接”按鈕定義書簽在網(wǎng)頁中選定文字，然后在“插入”菜單中，執(zhí)行“書簽…”命令，打開“書簽”對話框在“書簽”對話框中，顯示書簽名稱和網(wǎng)頁中已經(jīng)定義的書簽列表，輸入書簽名，然后單擊“確定”按鈕建立圖像地圖在“插入”菜單中，指向“圖片”，執(zhí)行“來自文件…”命令，插入一幅圖片單擊圖片，則在FrontPage窗口的底部顯示圖片工具欄。定義書簽在網(wǎng)頁中選定文字，然后在“插入”菜單中，執(zhí)行“書簽…”命令，打開“書簽”對話框在“書簽”對話框中，顯示書簽名稱和網(wǎng)頁中已經(jīng)定義的書簽列表，輸入書簽名，然后單擊“確定”按鈕建立圖像地圖（Cont.）圖像地圖圖像地圖HTML代碼HTML代碼<mapname="FPMap0"><areahref="city/beijing.htm"shape="circle"coords="286,100,17"><areahref="city/jinan.htm"shape="polygon"coords="279,129,295,111,323,122,305,136,287,145"></map><imgborder="0"src="chinamap.gif"width="433"height="270"usemap="#FPMap0">插入表格在網(wǎng)頁中插入表格，選擇菜單“表格”，指向“插入”，打開“插入表格”對話框表格編輯，插入到網(wǎng)頁上的表格，可以進(jìn)行一系列的編輯操作設(shè)置表格屬性在表格上右單擊表格屬性單元格屬性生成HTML代碼插入表單在“插入”菜單中，指向“表單”，執(zhí)行“表單”，插入一個表單，然后依次執(zhí)行要插入的控件（表單元素）命令，以便在表單中插入需要的表單元素。調(diào)整表單布局。表單一般和表格聯(lián)合使用，通過表格設(shè)置表單布局。在“拆分”或“代碼”視圖中，手工調(diào)整代碼。設(shè)置表單屬性，在表單上右單擊，在快捷菜單中，執(zhí)行“表單屬性…”命令設(shè)置表單域?qū)傩裕诒韱斡蛏嫌覇螕簦诳旖莶藛沃?，?zhí)行“表單域?qū)傩浴泵钌蒆TML代碼4.4設(shè)置標(biāo)記屬性IntelliSense技術(shù)是指當(dāng)用戶編輯到一個對象時，系統(tǒng)能動態(tài)的顯示當(dāng)前對象的方法、屬性名列表，從而保證用戶輸入的正確性，或從中選擇輸入。使用行為面板標(biāo)記事件屬性，行為標(biāo)記中的事件屬性對應(yīng)的事件，又稱為行為，即用戶對所標(biāo)記對象的操作行為。行為函數(shù)要設(shè)置標(biāo)記的行為，首先選擇“設(shè)計(jì)”視圖，在“格式”中，執(zhí)行“行為…”命令，打開“行為”任務(wù)面板。單擊“插入”，在下拉列表中，可以選擇一個行為。則在下面的事件列表中，顯示行為對應(yīng)的默認(rèn)事件。如果需要修改行為對應(yīng)的事件，可以點(diǎn)擊事件，則顯示當(dāng)前對象的可選事件列表，選擇一個事件作為當(dāng)前行為的激活事件即可。4.5定義樣式執(zhí)行“格式”菜單中的“樣式…”菜單命令，打開“樣式”對話框在左下側(cè)列表中，可以選擇“用戶自定義樣式”或者“HTML標(biāo)記”修改html標(biāo)記默認(rèn)樣式新建用戶樣式類在文檔的<head>..</head>內(nèi)部生成類似如下的代碼新建樣式表文件在“新建”任務(wù)窗格中，點(diǎn)擊“其他網(wǎng)頁模版”超鏈接，打開“網(wǎng)頁模版”對話框，選擇“樣式表”選項(xiàng)卡，然后選擇一個樣式表模板，從而建立一個樣式表文件。通過執(zhí)行“格式”菜單中的“樣式…”菜單命令來編輯樣式即可。使用樣式表文件在“格式”菜單中，執(zhí)行“樣式表鏈接…”命令，打開“連接樣式表”對話框，選擇一個.css文件，例如mystyles1.css，則在該網(wǎng)頁的<head>…</head>內(nèi)增加下述語句：<linkrel="stylesheet"type="text/css"href="mystyles1.css">4.6Frame框架新建框架網(wǎng)頁在“文件”菜單中，執(zhí)行“新建”命令，打開“新建”任務(wù)窗格，在新建網(wǎng)頁區(qū)域，單擊“其他網(wǎng)頁模版”超鏈接，打開“網(wǎng)頁模板”對話框選擇“框架網(wǎng)頁”選項(xiàng)卡Frame框架設(shè)屬性設(shè)置拆分與刪除框架改變框架窗格的大小設(shè)置框架屬性Frame框架舉例定義樣式表文件a{font-size:11pt;color:#0000FF;text-decoration:none;}a:hover{color:#FF0000;font-weight:bold