1、, 第一章 概論 第二章 計(jì)算機(jī)基礎(chǔ)知識(shí) 第三章 中文Windows XP 第四章 中文文字處理系統(tǒng)Word 2003 第五章 中文電子表格處理系統(tǒng)Excel 2003, 第六章 中文幻燈片演示文稿PowerPoint 2003 第七章 多媒體技術(shù)基礎(chǔ) 第八章 計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ) 第九章 網(wǎng)頁(yè)制作初步 第十章 計(jì)算機(jī)信息應(yīng)用技術(shù),21世紀(jì)高等學(xué)校公共課計(jì)算機(jī)教材,計(jì)算機(jī)與信息技術(shù)基礎(chǔ), 第九章 網(wǎng)頁(yè)制作初步, 9.1 網(wǎng)頁(yè)的基本概念 9.2 HTML語(yǔ)言簡(jiǎn)介 9.3 FrontPage 2003簡(jiǎn)介 9.4 使用FrontPage 2003制作網(wǎng)頁(yè) 9.5 網(wǎng)頁(yè)布局 9.6 創(chuàng)建表單頁(yè)面 9.7

2、網(wǎng)頁(yè)動(dòng)態(tài)效果的使用 9.8 網(wǎng)站的發(fā)布與管理,21世紀(jì)高等學(xué)校公共課計(jì)算機(jī)教材,9.1 網(wǎng)頁(yè)的基本概念,9.1.2 網(wǎng)頁(yè),9.1.1 超文本和超媒體,9.1.3 網(wǎng)站與主頁(yè),9.1 網(wǎng)頁(yè)的基本概念,網(wǎng)頁(yè),超文本文件,超媒體,首頁(yè), 9.1.1 超文本和超媒體,WWW的信息組織形式 :超文本和超媒體 超文本（Hypertext）:通過(guò)鏈接關(guān)系，形成復(fù)雜的網(wǎng)狀方式來(lái)組織信息形式，就稱為超文本。 超媒體（Hypermedia）:多種媒體類(lèi)型的信息媒體,如文本、圖像、動(dòng)畫(huà)、聲音或影像等,稱為超媒體。, 9.1.2 網(wǎng)頁(yè),網(wǎng)頁(yè)(Web Page)是通過(guò)WWW發(fā)布的包含有文本、圖片、聲音和動(dòng)畫(huà)等多媒體信息

3、的頁(yè)面。它是一個(gè)文本文件，其擴(kuò)展名通常為.htm或html。 網(wǎng)頁(yè)一般可分為以下兩種： 靜態(tài)網(wǎng)頁(yè)：該網(wǎng)頁(yè)文件中不含程序代碼，只有HTML標(biāo)記，一經(jīng)生成，內(nèi)容就不會(huì)再變化。常利用網(wǎng)頁(yè)制作軟件:如FrontPage 、Dreamweaver等方便地生成。 動(dòng)態(tài)網(wǎng)頁(yè)：該網(wǎng)頁(yè)文件不僅含有HTML標(biāo)記，而且含有程序代碼。動(dòng)態(tài)網(wǎng)頁(yè)能夠根據(jù)不同的時(shí)間、不同的來(lái)訪者而顯示不同的內(nèi)容。常通過(guò)ASP、PHP、JSP、ASP.NET等語(yǔ)言進(jìn)行編程實(shí)現(xiàn)。, 9.1.3 網(wǎng)站與主頁(yè),網(wǎng)站（web site）: 是存儲(chǔ)在Web服務(wù)器的共享目錄中的一系列網(wǎng)頁(yè)文件和其他相關(guān)聯(lián)的網(wǎng)頁(yè)、圖形、文檔、多媒體等文件的集合，實(shí)際它是一

4、個(gè)文件夾。 主頁(yè)（Home page）又叫首頁(yè)，是指用戶使用WWW瀏覽器訪問(wèn)Internet上的任何WWW服務(wù)器（即Web主機(jī)）所看到的第一個(gè)頁(yè)面。通常將其命名為“index.htm”或“index.html”或“default.htm”或“default.html”。,9.2 HTML語(yǔ)言簡(jiǎn)介,9.2.2 HTML基礎(chǔ),9.2.1 HTML概述, 9.2.1 HTML概述,HTML （HyperText Markup Language超文本標(biāo)記語(yǔ)言）是一種用于網(wǎng)頁(yè)制作的排版語(yǔ)言。 HTML主要功能： 格式化文本。 創(chuàng)建列表。 插入圖像。 創(chuàng)建表格。 加入多媒體。 建立超鏈接。 提供交互式窗體

5、等。 HTML的編輯環(huán)境:用HTML語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)是純文本文件，可以用任何文本編輯器進(jìn)行編輯,存盤(pán)時(shí)，其文件名擴(kuò)展名為.htm或.html, 稱為HTML文件，也稱為Web文件。可以通過(guò)瀏覽器讀取并解釋HTML文件。, 9.2.2 HTML基礎(chǔ), HTML的基本語(yǔ)法,HTML文件由標(biāo)記（Tag） 、文本和URL組成。 HTML的控制標(biāo)記對(duì)大小寫(xiě)不敏感，同時(shí)控制標(biāo)記用“ ”進(jìn)行區(qū)分。大多數(shù)成對(duì)出現(xiàn)。 格式為： 受標(biāo)記影響的內(nèi)容 ,例如: 清華大學(xué)主頁(yè) 清華大學(xué)主頁(yè) 屬性示例 , 9.2.2 HTML基礎(chǔ),2HTML文件的基本結(jié)構(gòu),1 聲明HTML文件的版本信息。 2 網(wǎng)頁(yè)文檔標(biāo)記 3 頭部元素

6、4 標(biāo)題元素 5 文檔正文標(biāo)記,HTML文件的基本結(jié)構(gòu)一般可描述如下： 網(wǎng)頁(yè)的標(biāo)題 網(wǎng)頁(yè)的內(nèi)容 ,演示例9.1,9.3 FrontPage 2003,9.3.1 FrontPage 2003的界面組成,9.3.2 FrontPage 2003的基本視圖,FrontPage 2003是Microsoft公司推出的Office 2003系列辦公套裝軟件之一，使用方便，充分體現(xiàn)了“所見(jiàn)即所得”制作效果，操作簡(jiǎn)單和交互能力強(qiáng)，較之前的版本新增和改進(jìn)了許多功能，如新增了“智能標(biāo)記”、“數(shù)據(jù)庫(kù)接口向?qū)А?、“訪問(wèn)狀況分析報(bào)表”、“發(fā)布單一頁(yè)面”、“SharePoint團(tuán)隊(duì)服務(wù)功能”等。,9.3 FrontP

7、age 2003,菜單欄,工具欄,工作區(qū),標(biāo)題欄,標(biāo)記欄,視圖切換區(qū),狀態(tài)欄, 9.3.1 用戶界面,默認(rèn)文件名,FrontPage 2003提供了7種視圖方式 1.網(wǎng)頁(yè)視圖5.超鏈接視圖 2.文件夾視圖6.任務(wù)視圖 3.報(bào)表視圖 7.遠(yuǎn)程網(wǎng)站 4.導(dǎo)航視圖,網(wǎng)頁(yè)視圖上，有4種頁(yè)面模式 1.設(shè)計(jì)標(biāo)簽 2.代碼標(biāo)簽 3.拆分標(biāo)簽 4.預(yù)覽標(biāo)簽, 9.3.2 FrontPage 2003的基本視圖,9.4 使用FrontPage 2003制作網(wǎng)頁(yè),9.4.1 創(chuàng)建站點(diǎn),9.4.2 基本網(wǎng)頁(yè)編輯,9.4.3 在網(wǎng)頁(yè)中插入圖片,9.4.4 表格處理,9.4.5 創(chuàng)建超鏈接, 9.4.1 創(chuàng)建站點(diǎn),1創(chuàng)

8、建站點(diǎn),站點(diǎn)是一個(gè)文件夾，通常所有要發(fā)布的網(wǎng)頁(yè)文件和相互鏈接的共享文件、圖像等均要放入站點(diǎn)內(nèi)。,建立站點(diǎn)的方法： 使用向?qū)Ы⑿碌恼军c(diǎn) “文件”菜單 / 新建 / 由一個(gè)網(wǎng)頁(yè)組成的站點(diǎn)/ “常規(guī)”選項(xiàng)卡/ 向?qū)?使用模板創(chuàng)建新的站點(diǎn) “文件”菜單 / 新建 / 其他模板 自定義站點(diǎn) “文件”菜單 / 新建 /由一個(gè)網(wǎng)頁(yè)組成的站點(diǎn) / “常規(guī)”選項(xiàng)卡 / 空白網(wǎng)站 更改站點(diǎn)的名稱和設(shè)置 “工具”菜單/“網(wǎng)站設(shè)置”命令 刪除站點(diǎn) “編輯”菜單/刪除命令, 9.4.1 創(chuàng)建站點(diǎn),2創(chuàng)建網(wǎng)頁(yè),創(chuàng)建網(wǎng)頁(yè)的方法有三種: 建立空白網(wǎng)頁(yè) 單擊常用工具欄中的“新建”按鈕， 使用現(xiàn)有網(wǎng)頁(yè)來(lái)建立新的網(wǎng)頁(yè) 單擊“文件

9、”菜單“新建”“新建網(wǎng)頁(yè)”“根據(jù)現(xiàn)有網(wǎng)頁(yè)”命令 使用模板來(lái)建立新的網(wǎng)頁(yè) 單擊“文件”菜單“新建”命令“新建網(wǎng)頁(yè)”“其他網(wǎng)頁(yè)模板”,網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是信息的主要載體，可以作為網(wǎng)站的一部分存在，也可以獨(dú)立存在。,保存網(wǎng)頁(yè) “文件”菜單保存文件或常用“工具”欄中的“保存”按鈕 注意：如果網(wǎng)頁(yè)中含有圖片，在保存網(wǎng)頁(yè)時(shí)將彈出“保存嵌入文件”對(duì)話框，指定圖片保存到站點(diǎn)的位置和文件名。, 9.4.2 基本網(wǎng)頁(yè)編輯,演示例9.2, 9.4.2 基本網(wǎng)頁(yè)編輯,3設(shè)置網(wǎng)頁(yè)屬性,設(shè)置網(wǎng)頁(yè)標(biāo)題 單擊“文件”菜單“屬性” “常規(guī)”選項(xiàng)卡標(biāo)題文本框中輸入網(wǎng)頁(yè)的標(biāo)題 設(shè)置網(wǎng)頁(yè)背景 單擊“文件”菜單“屬性” “格式

10、”選項(xiàng)卡 “背景” 選擇顏色或“背景圖片” 設(shè)置背景音樂(lè) 單擊“文件”菜單“屬性” “常規(guī)”選項(xiàng)卡背景音樂(lè), 9.4.3 在網(wǎng)頁(yè)中插入圖片,1在網(wǎng)頁(yè)中插入圖像,網(wǎng)頁(yè)中可用的圖像類(lèi)型：Gif格式、Swf 格式、Jpeg格式、Png格式 在網(wǎng)頁(yè)中插入圖像： “插入”菜單“圖片”“來(lái)自文件”或“剪切畫(huà)”,2圖片屬性設(shè)置,選中圖片，單擊“格式”菜單“屬性”命令“外觀”選項(xiàng)卡, 9.4.3 在網(wǎng)頁(yè)中插入圖片, 9.4.4 表格處理,在Web中，表格可以有效的組織、規(guī)劃和布局頁(yè)面。表格是有效地組織和處理數(shù)據(jù)的一種形式 。, 9.4.5 超鏈接,在FrontPage 2003中，將鏈接被定義為兩部分組成：超

11、鏈接主體和超鏈接目標(biāo)地址。超鏈接主體是指引導(dǎo)超鏈接的部分（包含文本和圖像）,超鏈接的目標(biāo)包括網(wǎng)頁(yè)、頁(yè)面中的書(shū)簽、文件或電子郵件等。,當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接的主體上時(shí)，鼠標(biāo)指針將會(huì)變成一個(gè)手的形狀。超鏈接目標(biāo)地址是指鼠標(biāo)單擊后，將要顯示內(nèi)容，即切換對(duì)象。,1創(chuàng)建超鏈接,在網(wǎng)頁(yè)中，超鏈接分為外部超鏈接和內(nèi)部超鏈接兩種。,書(shū)簽用來(lái)標(biāo)記網(wǎng)頁(yè)中的信息位置，因而建立頁(yè)內(nèi)超鏈接。當(dāng)一個(gè)頁(yè)面文件很大或者要定位光標(biāo)位置時(shí)，書(shū)簽超鏈發(fā)揮積極的作用。創(chuàng)建書(shū)簽超鏈接時(shí)，首先必須定義書(shū)簽，然后再把超鏈接指向書(shū)簽。, 9.4.5 超鏈接,2書(shū)簽鏈接, 9.4.5 超鏈接,將光標(biāo)移到文本載體的內(nèi)部或是單擊選定圖片 利用“常

12、用”工具欄中的“插入超鏈接” 按鈕, 編輯超鏈接 單擊鼠標(biāo)右鍵快捷菜單編輯超鏈接,3編輯超鏈接,4超鏈接管理,查看站點(diǎn)中的超鏈接結(jié)構(gòu)，了解站點(diǎn)的結(jié)構(gòu)和各個(gè)文件的超鏈接是否正確。 “視圖”菜單“超鏈接”命令,9.5 網(wǎng)頁(yè)布局,FrontPage 2003提供了表格和框架兩種頁(yè)面布局的方法 ，其中框架技術(shù)可以將頁(yè)面分成若干個(gè)子窗格，總體上有一個(gè)總控HTML文件將各個(gè)窗格聯(lián)系起來(lái)，同時(shí)每個(gè)窗格里單獨(dú)放置一個(gè)HTML文件。,注意：多框架網(wǎng)頁(yè)的保存中，每個(gè)框架都將單獨(dú)生成一個(gè)文件，包含框架的網(wǎng)頁(yè)也將生成一個(gè)文件，因此，含n個(gè)框架的網(wǎng)頁(yè)將產(chǎn)生n+1個(gè)文件 。,9.6 制作交互式表單網(wǎng)頁(yè),表單提供了交互傳遞

13、信息的方法，為用戶提供了將信息傳送回web站點(diǎn)創(chuàng)建者和管理者的可能性。如果沒(méi)有表單，Web就是一條單程的街道。 表單在Web上有很多用途，包括調(diào)查、電子商務(wù)、客戶訂單、民意調(diào)查甚至實(shí)時(shí)自定義圖形創(chuàng)建。每個(gè)表單都需要到Web服務(wù)器上的連接，這種連接常采用CGI(公共網(wǎng)關(guān)接口)腳本的形式，但也可使用JSP,VSP。當(dāng)然程序員還常常需要編寫(xiě)對(duì)表單信息進(jìn)行收集和處理的程序。,9.6 制作交互式表單網(wǎng)頁(yè),3自定義表單 “插入”/“表單”/ 利用“表單”工具欄,演示例9.3,創(chuàng)建表單的方法常有：表單模板、表單向?qū)?、自定義表單,1利用模板創(chuàng)建表單 單擊“文件”菜單“新建”命令“其他網(wǎng)頁(yè)模板”選項(xiàng)“常規(guī)”選項(xiàng)

14、卡表單模板選項(xiàng),2利用表單網(wǎng)頁(yè)向?qū)?chuàng)建表單 單擊“文件”菜單“新建”命令“其他網(wǎng)頁(yè)模板”選項(xiàng)“常規(guī)”選項(xiàng)卡 “表單網(wǎng)頁(yè)向?qū)А边x項(xiàng)。,9.7.1 字幕,9.7.2 站點(diǎn)計(jì)數(shù)器,9.7.4 交互式按鈕,9.7.3 網(wǎng)頁(yè)過(guò)渡效果,9.7 網(wǎng)頁(yè)動(dòng)態(tài)效果的使用,9.7 網(wǎng)頁(yè)動(dòng)態(tài)效果的使用,在網(wǎng)上瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)?？梢钥吹接行┰卦谶\(yùn)動(dòng)，為了能夠容易制作網(wǎng)頁(yè)的動(dòng)態(tài)效果，F(xiàn)rontPage 2003提供了13類(lèi)動(dòng)態(tài)效果制作技術(shù)，并把這些動(dòng)態(tài)元素作為組件集中在一起，通過(guò)“插入”菜單中“Web組件”選項(xiàng)（或工具欄中的組件按鈕）可以插入動(dòng)態(tài)元素。 動(dòng)態(tài)元素只有在IE瀏覽器中，其動(dòng)態(tài)效果才能正常地顯示。,可以滾動(dòng)的文

15、字一般稱為字幕。在很多網(wǎng)頁(yè)中都可以看到滾動(dòng)字幕，特別醒目，經(jīng)常用來(lái)發(fā)布一些站點(diǎn)的通知或提示信息等。滾動(dòng)字幕在網(wǎng)頁(yè)中的效果是：包含一些文字或小圖片的一個(gè)方框沿著一個(gè)方向滾動(dòng)或來(lái)回滾動(dòng)。,演示例9.4, 9.7.1 字幕,站點(diǎn)計(jì)數(shù)器的主要功能是顯示被訪問(wèn)的次數(shù)。瀏覽者訪問(wèn)網(wǎng)頁(yè)時(shí)，站點(diǎn)計(jì)數(shù)器中的數(shù)字就會(huì)增加，就可以實(shí)現(xiàn)訪問(wèn)統(tǒng)計(jì)的目的。只有將包含計(jì)數(shù)器的網(wǎng)頁(yè)從Web服務(wù)器進(jìn)行發(fā)布后，站點(diǎn)計(jì)數(shù)器才能正常工作。, 9.7.2 站點(diǎn)計(jì)數(shù)器,站點(diǎn)計(jì)數(shù)器操作方法如下： “插入” 菜單“Web組件”命令； 在“組件類(lèi)型”域中選擇“計(jì)數(shù)器” ； 打開(kāi)“計(jì)數(shù)器屬性”對(duì)話框進(jìn)行設(shè)置；,網(wǎng)頁(yè)過(guò)渡效果是指當(dāng)瀏覽者進(jìn)入或離開(kāi)

16、網(wǎng)頁(yè)時(shí)所產(chǎn)生的效果。, 9.7.3 網(wǎng)頁(yè)過(guò)渡效果,懸停按鈕是一個(gè)動(dòng)感按鈕，如果把鼠標(biāo)移到該按鈕上，就會(huì)它會(huì)改變顏色和亮度，如果單擊該按鈕時(shí)，就會(huì)鏈接到另一個(gè)頁(yè)面。缺省情況下，懸停按鈕是一個(gè)彩色方框的文字按鈕。, 9.7.4 交互式按鈕,9.8 網(wǎng)站的發(fā)布與管理,9.8.1 管理站點(diǎn),9.8.2 測(cè)試站點(diǎn),9.8.4 發(fā)布站點(diǎn),9.8.3 維護(hù)站點(diǎn), 9.8.1 管理站點(diǎn),網(wǎng)站中各個(gè)任務(wù)的具體情況可以通過(guò)網(wǎng)站的“任務(wù)”視圖進(jìn)行查看。 “任務(wù)”視圖下，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中，我們可“編輯任務(wù)”、“添加新任務(wù)”、“標(biāo)記任務(wù)完成”和“刪除任務(wù)” 。, 9.8.2 測(cè)試站點(diǎn),測(cè)試站點(diǎn)是為了及時(shí)

17、發(fā)現(xiàn)存在問(wèn)題、完善站點(diǎn)。 1.設(shè)置站點(diǎn)兼容性 如果用戶在設(shè)置站點(diǎn)時(shí)，站點(diǎn)中包含多個(gè)動(dòng)態(tài)或交互的網(wǎng)頁(yè)，就必須考慮它們能否在瀏覽器中正常顯示或運(yùn)行。Frontpage2003允許用戶指定站點(diǎn)與哪些瀏覽器兼容或使用哪些技術(shù)。在Frontpage2003中，用戶可以指定Microsoft Internet Explorer或Netscape Navigator等瀏覽器或是自己設(shè)定可采用的技術(shù)。 選擇 “工具”/ “網(wǎng)頁(yè)選項(xiàng)”/“創(chuàng)作”標(biāo)簽命令 2.測(cè)試下載速度 測(cè)試網(wǎng)頁(yè)下載速度：在“視圖”菜單/ “報(bào)表”視圖/ “問(wèn)題”/ “慢速網(wǎng)頁(yè)” 中，用戶可對(duì)整個(gè)站點(diǎn)的大小及其中慢速網(wǎng)頁(yè)的一覽無(wú)余。 注意：如果

18、用戶將站點(diǎn)中的某些文件或文件夾隱藏了起來(lái)，這些文件將不統(tǒng)計(jì)在內(nèi)。 可選擇 “工具”/“網(wǎng)站設(shè)置”/“高級(jí)”標(biāo)簽/勾選“顯示隱藏文件或文件夾”。 “慢速網(wǎng)頁(yè)”的設(shè)置：“工具”/“選項(xiàng)”命令/“報(bào)表視圖”對(duì)話框, 9.8.3 維護(hù)站點(diǎn),維護(hù)站點(diǎn)我們常進(jìn)行以下操作:,1.檢查網(wǎng)頁(yè)中的拼寫(xiě)錯(cuò)誤： 設(shè)置默認(rèn)的拼寫(xiě)語(yǔ)言: 選擇“工具”菜單/”網(wǎng)頁(yè)選項(xiàng)”/“常規(guī)”選向卡/默認(rèn)的拼寫(xiě)檢查語(yǔ)言命令 進(jìn)行拼寫(xiě)檢查： 選擇“工具”菜單/“拼寫(xiě)檢查”命令 2.重命名站點(diǎn)：站點(diǎn)名稱是指向站點(diǎn)服務(wù)器或文件系統(tǒng)的一個(gè)目錄名。 選擇“工具”/”網(wǎng)站設(shè)置”/“常規(guī)”選向卡/“網(wǎng)站名稱”命令 注意：如果站點(diǎn)發(fā)布后對(duì)其重命名，則需要重新發(fā)布整個(gè)站點(diǎn)。重命名站點(diǎn)后鏈接自其他網(wǎng)站地址的超鏈接將不能正常工作 3.設(shè)置站點(diǎn)語(yǔ)言：用戶可以自行設(shè)定用于站點(diǎn)服務(wù)器向?yàn)g覽器返回錯(cuò)誤信息時(shí)所使用的語(yǔ)言。 選擇“工具”/”網(wǎng)站設(shè)置”/“語(yǔ)言”命令, 9.8.4 發(fā)布站點(diǎn),1發(fā)布前