第9章 網(wǎng)頁設(shè)計(jì).ppt

1、第9章 網(wǎng)頁設(shè)計(jì),9.1 網(wǎng)頁設(shè)計(jì)基礎(chǔ),9.1.1 網(wǎng)頁基礎(chǔ)知識(shí),靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁是指Web服務(wù)器中的內(nèi)容是固定的。 動(dòng)態(tài)網(wǎng)頁是指Web服務(wù)器根據(jù)用戶的請(qǐng)求動(dòng)態(tài)生成網(wǎng)頁。 HTML和ASP 對(duì)于靜態(tài)網(wǎng)頁，通常采用HTML（超文本標(biāo)記語言）將靜態(tài)網(wǎng)頁內(nèi)容寫入HTML文件并存放與服務(wù)器中。,9.1.2 網(wǎng)站開發(fā)工具,Dreamweaver MX Dreamweaver MX是Macromedia公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是一套針對(duì)專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的可視化網(wǎng)頁開發(fā)工具。 FrontPage FrontPage是Microsoft公司主推的網(wǎng)站開發(fā)

2、工具，它提供網(wǎng)頁視圖、導(dǎo)航視圖和超鏈接視圖等多種視圖，使得用戶可以直觀查看并管理站點(diǎn)的結(jié)構(gòu)。,9.2 HTML簡介,HTML就是英文hyper text markup language，翻譯成中文就是“超文本標(biāo)示語言”，擴(kuò)展名為.htm或.html;,HTML的編寫工具：可以使用任何文本編輯器進(jìn)行編輯?？梢杂梦覀僕indows自帶的“記事本”程序編寫，啟動(dòng)方法是：開始 附件記事本。,HTML的基本格式：, 網(wǎng)頁的主體內(nèi)容 ,顯示在標(biāo)題欄上的文字,網(wǎng)頁制作基本操作,1. 選擇“文件” “新建” ，單擊“其他網(wǎng)站模板”鏈接，打開“網(wǎng)站模板”對(duì)話框。 2. 單擊“常規(guī)”選項(xiàng)卡，在列表中選擇“個(gè)人網(wǎng)站

3、”，在網(wǎng)站的位置處輸入路徑d:mywebs，單擊“確定”按鈕，則系統(tǒng)將自動(dòng)創(chuàng)建站點(diǎn)保存在指定路徑下。,（1）啟動(dòng)FrontPage,利用個(gè)人網(wǎng)站模板創(chuàng)建站點(diǎn)， 保存在D盤的MYWEBS文件夾下。,文件夾視圖：右邊顯示出左邊選中的當(dāng)前文件夾下包含的子文件夾和網(wǎng)頁文件的一些信息，如名稱、標(biāo)題、大小、類型、最后修改日期、修改者及關(guān)于文件的注釋等。 報(bào)表視圖：顯示當(dāng)前站點(diǎn)的性能的詳細(xì)記錄，以及關(guān)于站點(diǎn)訪問者的活動(dòng)的信息。包括有網(wǎng)站摘要報(bào)表、文件報(bào)表、共享內(nèi)容報(bào)表、問題報(bào)表、工作流報(bào)表和使用率報(bào)表六種類型，可通過下拉列表來切換報(bào)表類型。 導(dǎo)航視圖：顯示網(wǎng)站的網(wǎng)頁層次結(jié)構(gòu)，用戶可以清晰地看到主頁、從頁之間

4、的邏輯關(guān)系。在此視圖下，用戶可以方便地改變網(wǎng)頁的邏輯關(guān)系。 超鏈接視圖：顯示出站點(diǎn)中各個(gè)網(wǎng)頁之間，以及與其他站點(diǎn)的網(wǎng)頁的相互鏈接關(guān)系。,（2）觀察Mywebs站點(diǎn)的各個(gè)視圖。,（3）打開index網(wǎng)頁,觀察網(wǎng)頁的四種視圖。,設(shè)計(jì)視圖：是一種所見即所得的編輯模式，用戶可以象編輯Word文檔一樣編輯網(wǎng)頁，不需考慮代碼，系統(tǒng)會(huì)自動(dòng)將設(shè)計(jì)轉(zhuǎn)換為HTML代碼。,網(wǎng)頁提供了“設(shè)計(jì)”、“代碼”、“拆分”和“預(yù)覽”四種視圖。,代碼視圖：顯示出實(shí)際HTML代碼，熟悉HTML語法的用戶，可以直接編輯代碼。,拆分視圖：把工作區(qū)分成兩部分：一部分顯示代碼，另一部分顯示網(wǎng)頁編輯狀態(tài)。在網(wǎng)頁編輯工作區(qū)中定位鼠標(biāo)，代碼工作

5、區(qū)會(huì)自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的代碼。在代碼工作區(qū)中定位鼠標(biāo)，網(wǎng)頁編輯工作也區(qū)會(huì)自動(dòng)跳轉(zhuǎn)。,預(yù)覽視圖：用戶可以預(yù)覽在瀏覽器中網(wǎng)頁顯示的效果。,（4）關(guān)閉MYWEBS站點(diǎn)。新建空白站點(diǎn)，保存在D盤 的ME文件夾中。,1. 選擇“文件”|“關(guān)閉網(wǎng)站”命令，關(guān)閉剛建立的站點(diǎn)。 2. 選擇“文件”|“新建”命令，打開“新建”任務(wù)窗格，單擊“其他網(wǎng)站模板”鏈接，打開“網(wǎng)站模板”對(duì)話框。 3. 在“網(wǎng)站模板”對(duì)話框中，在列表中選擇“空白網(wǎng)站”，在網(wǎng)站的位置處輸入路徑d:me,單擊“確定”按鈕，則系統(tǒng)將自動(dòng)創(chuàng)建的站點(diǎn)保存在指定路徑下，并打開文件夾視圖。,（5）新建網(wǎng)頁index.htm，將其標(biāo)題設(shè)為“我的主頁”。,選擇

6、“文件夾列表”窗口的D:me文件 夾，單擊文件夾列表的“新建網(wǎng)頁”按鈕。,2. 系統(tǒng)新建一個(gè)網(wǎng)頁，命名為index.htm,。按Enter鍵表示確認(rèn)。在文件夾視圖的“index”網(wǎng)頁的標(biāo)題列單擊鼠標(biāo)，標(biāo)題處于選中狀態(tài)，輸入“我的主頁”，按Enter鍵表示確認(rèn)。,（6）在index.htm網(wǎng)頁中插入圖片“主頁菜單”。保存網(wǎng)頁，并將圖片保存到站點(diǎn)的images子文件夾。,1. 在文件夾列表中雙擊index.htm網(wǎng)頁，打開此網(wǎng)頁。 2. 選擇“插入”|“圖片”|“來自文件”命令，打開“圖片” ，在“文件”列表中選取“主頁菜單”文件，單擊“插入”按鈕。則圖片插入到文件中。 3. 單擊 “保存”按鈕，

7、對(duì)當(dāng)前編輯的網(wǎng)頁進(jìn)行保存，并打開“保存嵌入式文件”對(duì)話框，如果文件夾不是images,單擊“更改文件夾”按鈕，打開“更改文件夾”對(duì)話框。 4. 在“更改文件夾”對(duì)話框中，雙擊“images”子文件夾，單擊“確定”按鈕，關(guān)閉“更改文件夾”對(duì)話框。 5.在“保存嵌入式文件”對(duì)話框中，單擊“確定”按鈕，則圖片被保存在站點(diǎn)的image子文件夾下。, 頭元素 我的主頁 標(biāo)題元素 體元素 分段元素 ,以下是自動(dòng)生成index.htm網(wǎng)頁的程序代碼：,（7）新建網(wǎng)頁dxsh.htm，標(biāo)題為“我的大學(xué)”。在網(wǎng)頁中輸入如下文字：楷體、14磅、加粗、雙倍行距。,湖南大學(xué)坐落在湖南省長沙市岳麓山下，是由岳麓 書院衍

8、續(xù)至今、辦學(xué)歷史悠久的全國重點(diǎn)大學(xué)，直屬國 家教育部，已通過國家“211工程”“九五”期間建設(shè)項(xiàng)目 驗(yàn)收。,（8）在dxsh網(wǎng)頁上插入剪貼畫，在剪貼畫上插入到index頁面的鏈接。保存網(wǎng)頁，并保存嵌入的剪貼畫。,1. 選擇“插入”|“圖片”|“剪貼畫”，選擇“箭頭”剪切畫，向右旋轉(zhuǎn)900，使剪貼畫居中顯示。 2. 選定剪切畫，“插入”|“超鏈接”命令，打開“插入超鏈接”對(duì)話框，在“鏈接到”列表中選擇“原有文件或網(wǎng)頁”，在文件列表中選擇“index.htm”,單擊“確定”按鈕。 3. 單擊 “保存”按鈕，對(duì)當(dāng)前編輯的網(wǎng)頁進(jìn)行保存，在“保存嵌入式文件”對(duì)話框中，單擊“確定”按鈕，則剪切畫被保存在站

9、點(diǎn)的image子文件夾下。, 我的大學(xué) 湖南大學(xué)坐落在湖南省長沙市岳麓山下，. ,以下是自動(dòng)生成dxsh.htm網(wǎng)頁的部分程序代碼：,（9）新建一個(gè)普通網(wǎng)頁，將網(wǎng)頁的文件名保存為 wsly.htm，標(biāo)題為“網(wǎng)上樂園”，輸入一個(gè)四行二列表格，表格邊框?qū)挾仍O(shè)為0，表格內(nèi)容如下圖所示。,（10）對(duì)wsly網(wǎng)頁上的圖片設(shè)置超鏈接： googlelogo鏈接到。 baidulogo鏈接到, 新浪鏈接到,網(wǎng)易鏈接到，清華大學(xué)鏈接到 北京大學(xué)鏈接到 湖南大學(xué)鏈接到。,2.選擇“文件”|“在瀏覽器中預(yù)覽”|“Microsoft Internet Explorer6.0”,彈出對(duì)話框詢問是否保存，單擊“是”按鈕

10、，打開對(duì)話框詢問是否保存嵌入式文件，單擊“是”按鈕，打開IE瀏覽器預(yù) 覽網(wǎng)頁。,1. 選中圖片“googleogo”，選擇“插入”|“超鏈接”命令，打開 “插入超鏈接”對(duì)話框, 在“鏈接到”列表中選擇“原有文件或網(wǎng)頁”， 在“地址”文本框中輸入“”,單擊“確定”按鈕。, 網(wǎng)上樂園 表格 表格的行 網(wǎng)絡(luò)是無邊無際的大海，請(qǐng)與我一起沖浪 a元素指向超鏈接 ,以下是自動(dòng)生成Wsly.htm網(wǎng)頁的部分程序代碼：,（11）設(shè)置主頁的超鏈接,1. 單擊“index”標(biāo)簽，切換到index網(wǎng)頁。選中圖片“主頁菜單”，單擊“圖片”工具欄上“長方形熱點(diǎn)” 按鈕，此時(shí),釋放鼠標(biāo)，自動(dòng)打開 “插入超鏈接”對(duì)話框，在

11、“鏈接到”列表 中選擇“原有文件或網(wǎng)頁”，在文件列表中選擇“dxsh.htm”, 單擊“確定”按鈕。,2. 同樣，在 “網(wǎng)上樂園”上建立長方形熱點(diǎn)，插入超級(jí)鏈接，鏈 接到網(wǎng)頁wsly.htm。 3. 在 “聯(lián)系我”上建立長方形熱點(diǎn)，在“插入超鏈接”對(duì)話框中， 在“鏈接到”列表中選擇“電子郵件”，在“電子郵件地址”文本框 中輸入自己的電子郵件地址，在“主題”文本框中輸入“咨詢”， 單擊“確定”按鈕。,按下鼠標(biāo)左鍵不動(dòng)，拖曳鼠標(biāo)形成一矩形區(qū)域。,Index.htm,dxsh.htm,wsly.htm,（1）在網(wǎng)頁dxsh.htm上添加字幕組件，字幕內(nèi)容為“實(shí)事求是、敢為人先”，字幕背景為青色，字體

12、為楷體，24磅，加粗，白色。,常用組件和共享邊框,1. 打開網(wǎng)頁“dxsh.htm”，將光標(biāo)定位到網(wǎng)頁的第一行，選擇 “插入”|“Web組件”命令，打開“插入Web組件”對(duì)話框。 2. 在“插入Web組件”對(duì)話框中，在“組件類型”列表中選擇“動(dòng)態(tài) 效果”，在“選擇一種效果”列表中選擇“字幕”，單擊“完成”按鈕， 打開“字幕屬性”對(duì)話框。,3. 在“字幕”對(duì)話框中，在“文本”文本框表中輸入“實(shí)事求是，敢為 人先”，在“背景色”下拉列表框中選擇“青色”，單擊“確定”按鈕。,（2）在網(wǎng)頁dxsh.htm的文字后插入一青色水平線。,1. 將光標(biāo)定位到網(wǎng)頁“dxsh.htm”文字的最后，按回車鍵插入一空

13、行。 2. 選擇“插入”|“水平線”命令，在文字后面插入一水平直線。 3. 選中水平線，按鼠標(biāo)右鍵，彈出快捷菜單，選擇“水平線屬性”命令，打開“水平線屬性”對(duì)話框。 4. 在“水平線屬性”對(duì)話框中，在“高度”數(shù)值框中輸入“3”像素，在“顏色”下拉列表中選擇“青色”，單擊“確定”按鈕。,（3）在網(wǎng)頁dxsh.htm上插入一個(gè)圖片庫，將圖片“東方紅廣場(chǎng)”、“復(fù)臨舍”、“十七舍”“和平齋”加入進(jìn)去。,1. 將光標(biāo)定位到網(wǎng)頁“dxsh.htm” 水平線的后面，選擇“插入” |“圖片”|“新建圖片庫”命令，打開“圖片庫屬性”對(duì)話框。 2. 在“圖片庫屬性”對(duì)話框中，選擇“圖片”選項(xiàng)卡，單擊“添加” 按鈕

14、，在其下拉菜單中選擇“圖片來自文件”，分別將圖片 “岳麓書院”、“東方紅廣場(chǎng)”、“復(fù)臨舍”、“十七舍”、“和平齋”添加到圖片庫中，插入到圖片庫中。在“標(biāo)題”文本框中分別輸入“岳麓書院”、 “東方紅廣場(chǎng)”、“復(fù)臨舍教學(xué)樓”、“學(xué)生第十七宿舍”、“和平齋教工樓”。 3. 在“圖片庫屬性”對(duì)話框中，選擇“布局”選項(xiàng)卡，在“布局方式”列表中選擇“水平型布局”，在“每行的圖片數(shù)”下拉列表中選擇“5”，單擊“確定”按鈕。,（4）在網(wǎng)頁wsly.htm上插入一交互式按鈕，其文本為返回，鏈接到index頁面。,打開網(wǎng)頁“wsly.htm”，將光標(biāo)定位到表格的后面，選擇“插 入”|“交互式按鈕”命令，打開“交互

15、式按鈕”對(duì)話框。 2. 在“交互式按鈕”對(duì)話框中，選擇“按鈕”選項(xiàng)卡，在“按鈕”列 表框中選擇“發(fā)光標(biāo)簽1”，在“文本”文本框中輸入“返回”，在“ 鏈接”文本框輸入“index.htm”或單擊“瀏覽”按鈕，打開“編輯 超鏈接”窗口，定位到“index.htm”。 在“交互式按鈕”對(duì)話框中，選擇“字體”選項(xiàng)卡，在“字體”列 表中選擇“幼園”，“字號(hào)”列表中選擇“12”，“懸停時(shí)字體顏色” 下拉列表中選擇“藍(lán)色”，“按下時(shí)字體顏色”下拉列表中選擇“ 紫色”。將按鈕“居中”。,（5）為網(wǎng)頁wsly.htm設(shè)置網(wǎng)頁過渡效果：橫向棋盤式。,1. 選擇“格式”|“網(wǎng)頁過渡”命令，打開“網(wǎng)頁過渡”對(duì)話框。

16、2. 在“網(wǎng)頁過渡”對(duì)話框中，在“過渡效果”列表框中 選擇“橫向棋盤式”，在“周期”文本框中輸入“1”，單擊“確定”按鈕。,（6）在網(wǎng)頁dxsh.htm、wsly.htm上插入一導(dǎo)航欄，設(shè)置到同級(jí)頁面和主頁的超級(jí)鏈接,1. 要插入導(dǎo)航欄，首先要設(shè)置網(wǎng)頁間的導(dǎo)航關(guān)系。選擇“視圖” |“導(dǎo)航”命令，切換到導(dǎo)航視圖。 2. 在導(dǎo)航視圖中，只有一個(gè)主頁。在文件夾列表中選中 “dxsh.htm”，按住鼠標(biāo)左鍵不動(dòng)，拖曳鼠標(biāo)到“主頁”的下方， 釋放鼠標(biāo)。同樣，將“wsly.htm”也拖曳到主頁的下方。 3. 打開網(wǎng)頁“dxsh.htm”，將光標(biāo)定位到網(wǎng)頁的第一行，選擇 “插入”|“導(dǎo)航”命令，打開“插入W

17、eb組件”對(duì)話框。 4. 在“插入Web組件”對(duì)話框中，在“組件類型”列表中選擇“鏈接 欄”，在“選擇欄類型”列表中選擇“基于導(dǎo)航結(jié)構(gòu)的鏈接欄”，單 擊“下一步”按鈕。,在“選擇欄樣式”列表中選擇基于“使用頁面主題”，單擊“下 一步”按鈕。 在“選擇方向”列表中選擇“橫向連接的鏈接欄”，單擊“完成” 按鈕。 在“鏈接欄屬性”對(duì)話框中，選擇“同一層”單選按鈕，選中 “主頁”復(fù)選框。單擊“確定”按鈕。dxsh網(wǎng)頁上加入到了到同 層網(wǎng)頁wsly和主頁index的鏈接。 8. 選中新建的導(dǎo)航欄，選擇“編輯”|“復(fù)制”命令，將導(dǎo)航欄復(fù)制 到剪貼板上。打開網(wǎng)頁“wsly.htm”,定位到網(wǎng)頁的起始處，選

18、擇“編輯”|“粘貼”命令，則wsly網(wǎng)頁上也加入到了到同層網(wǎng)頁 dxsh和主頁index的鏈接。,（7）打開共享邊框支持。,1. 選擇“工具”|“網(wǎng)頁選項(xiàng)”，打開“網(wǎng)頁選項(xiàng)”對(duì)話框。 2. 在“網(wǎng)頁選項(xiàng)”對(duì)話框中，選擇“創(chuàng)作”選項(xiàng)卡，選中“創(chuàng)作時(shí) Web組件”下的“共享邊框”復(fù)選框，單擊“確定”按鈕。,（8）在網(wǎng)頁的下方設(shè)置一共享邊框，在共享邊框中輸 入文字：“通信地址：湖南大學(xué)計(jì)算機(jī)通訊學(xué)院 郵編 410082”。在共享邊框中輸入圖片letter.gif。,1. 打開“dxsh”或“wsly”網(wǎng)頁，選擇“格式”|“共享邊框”，打開 “共享邊框”對(duì)話框。 2. 在“共享邊框”對(duì)話框中，選中應(yīng)用

19、于“所有網(wǎng)頁”單選按鈕， 選中“下”復(fù)選框，單擊“確定”按鈕。,3. 在當(dāng)前網(wǎng)頁的下部出現(xiàn)共享邊框，鼠標(biāo)指向共享邊框的注釋 處，鼠標(biāo)指針變?yōu)?單擊選中注釋文字。輸入文字：“通信 地址：湖南大學(xué)計(jì)算機(jī)與通信學(xué)院郵編：410082”。,4. 在共享邊框中，將鼠標(biāo)定位到文字之后，選擇“插入”|“圖片” |“來自文件”命令，選取“l(fā)etter.gif”文件。,（9）為網(wǎng)頁dxsh.htm應(yīng)用彩條主題。,Index.htm,dxsh.htm,wsly.htm,框架網(wǎng)頁,（1）新建“橫幅和目錄”的框架網(wǎng)頁wdah.htm，將其標(biāo)題設(shè)為“我的愛好”。,1. 在“新建”任務(wù)窗格中單擊“其他網(wǎng)頁模板”鏈接，打開

20、“網(wǎng)頁模板”對(duì)話框。在“網(wǎng)頁模板”對(duì)話框中，選擇“框架網(wǎng)頁”選項(xiàng)卡，選擇列表中的“橫幅和目錄”框架，單擊“確定”按鈕。,2. 單擊“常用”工具欄的“保存”按鈕，打開“另存為”對(duì)話框，在“文件名”文本框輸入“wdah”，單擊“更改標(biāo)題”按鈕，打開 “設(shè)置網(wǎng)頁標(biāo)題”對(duì)話框。在“網(wǎng)頁標(biāo)題”文本框輸入“我的愛好”，單擊“確定”按鈕。再單擊“另存為”對(duì)話框的“保存”按鈕，保存此框架網(wǎng)頁。,（2）在導(dǎo)航視圖中將“我的愛好”加入為主頁的下一級(jí)，并在其下面建立標(biāo)題為“唐詩宋詞”的tssc.htm和標(biāo)題為“校園歌曲”的“xygq.htm”兩個(gè)網(wǎng)頁。,1. 選擇“視圖”|“導(dǎo)航”命令，切換到導(dǎo)航視圖。在導(dǎo)航視圖中

21、， 在文件夾列表中選中“wdah.htm”，按住鼠標(biāo)左鍵不動(dòng)，拖曳 鼠標(biāo)到“主頁”的下方，釋放鼠標(biāo)。則“wdah.htm”成了主頁的 下級(jí)網(wǎng)頁。,2. 選中代表“我的愛好”網(wǎng)頁的標(biāo)簽，單擊“導(dǎo)航”窗格的“新建網(wǎng) 頁”按鈕，則在“我的愛好”下面建立了一個(gè)標(biāo)題為“新建網(wǎng)頁1”的 網(wǎng)頁。 3. 選中代表“新建網(wǎng)頁1”網(wǎng)頁的標(biāo)簽，單擊網(wǎng)頁標(biāo)題，則網(wǎng)頁 標(biāo)題處于選中狀態(tài)，輸入新的網(wǎng)頁標(biāo)題“唐詩宋詞”，按Enter鍵 確認(rèn)。用同樣的方法，在“我的愛好”網(wǎng)頁下面建立一個(gè)標(biāo)題為 “校園歌曲”的網(wǎng)頁。,4. 雙擊標(biāo)題為“唐詩宋詞”的網(wǎng)頁，打開文件名為“new _page_1” 的網(wǎng)頁，單擊文件夾列表窗口的“ne

22、w _page_1.htm”,按鼠標(biāo)右 鍵，在快捷菜單中選擇“重命名”，則文件名處于選中狀態(tài)，輸入 文件名“tssc.htm”，按Enter鍵確認(rèn)。用同樣的方法， 將“new _page_2.htm”的網(wǎng)頁保存為“xygq.htm”。,（3）設(shè)置tssc.htm網(wǎng)頁的背景為“宋詞背景”圖片文件，背景音樂為“夢(mèng)里水鄉(xiāng).mid”。保存網(wǎng)頁，將圖片保存到站點(diǎn)的images子文件夾，將背景音樂保存到站點(diǎn)下新建的music文件夾下。,1. 在導(dǎo)航欄視圖，雙擊“tssc.htm”圖標(biāo)，打開“唐詩宋詞”網(wǎng)頁。在工作區(qū)上按右鍵，彈出快捷菜單，選擇“網(wǎng)頁屬性”命令，打開“網(wǎng)頁屬性” 對(duì)話框。 2. 在“網(wǎng)頁屬性” 對(duì)話框中，選擇“常規(guī)”選項(xiàng)卡，單擊“瀏覽” 按鈕，打開“背景音樂”對(duì)話框。在“查找范圍”下拉列表中切換到背景音樂所在的文件夾，在“文件”列表中選取作為背景的文件，單擊“打開”按鈕。 3. 在“網(wǎng)頁屬性” 對(duì)話框，選擇“格式”選項(xiàng)卡，選中“背景圖片”和“使其成為水印”復(fù)選框，單擊“瀏覽”按鈕，打開“選擇背景圖片”對(duì)話框。在“查找范圍”下拉列表中