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