《《振動(dòng)與波》PPT課件.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《《振動(dòng)與波》PPT課件.ppt（53頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、蘭州大學(xué)信息科學(xué)與工程學(xué)院,第8章 網(wǎng)頁(yè)制作基礎(chǔ),,蘭州大學(xué)信息科學(xué)與工程學(xué)院,蘭州大學(xué)信息科學(xué)與工程學(xué)院,8.1 概述,,back,8.1.1 基本概念,網(wǎng)頁(yè)（Web Page） 網(wǎng)頁(yè)是一種可以在WWW上傳輸，并能被瀏覽器解釋和呈現(xiàn)的文件。 是網(wǎng)站最基本的組成單位。 網(wǎng)頁(yè)可分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。 都可以包含各種視覺動(dòng)態(tài)效果，區(qū)別在于客戶端與服務(wù)器之間是否發(fā)生交互行為 靜態(tài)網(wǎng)頁(yè)的擴(kuò)展名通常為.htm或.html等。 動(dòng)態(tài)網(wǎng)頁(yè)的擴(kuò)展名較多，如.asp、.jsp、.aspx和.php等。,8.1.1 基本概念,網(wǎng)站（Web Site） 網(wǎng)站是相關(guān)網(wǎng)頁(yè)的集合，這些網(wǎng)頁(yè)之間通常具有一定的鏈接關(guān)系。網(wǎng)

2、站由域名、網(wǎng)頁(yè)和主機(jī)空間組成，用戶通過(guò)瀏覽網(wǎng)頁(yè)來(lái)訪問(wèn)網(wǎng)站。 如果訪問(wèn)者在瀏覽器的地址欄里輸入網(wǎng)站的域名或IP地址，瀏覽器將會(huì)自動(dòng)打開網(wǎng)站的默認(rèn)首頁(yè)（又稱主頁(yè)）。,8.1.1 基本概念,統(tǒng)一資源定位地址（Uniform Resource Locator，URL） 統(tǒng)一資源定位地址完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址，主要用于指明通信協(xié)議和地址，例如 URL的一般格式為： 協(xié)議://IP地址或域名/路徑/文件名,8.1.1 基本概念,超鏈接（Hyperlink） 超鏈接是組成網(wǎng)站的基本元素，通過(guò)它可以在網(wǎng)站內(nèi)部網(wǎng)頁(yè)或資源之間建立鏈接，也可以與其他網(wǎng)站的網(wǎng)頁(yè)或資源之間建立鏈接。 超鏈接是

3、網(wǎng)頁(yè)的一部分，它記錄了鏈接目標(biāo)的URL。當(dāng)訪問(wèn)者單擊已經(jīng)創(chuàng)建超鏈接的文字或圖片后，鏈接目標(biāo)將自動(dòng)打開。,8.1.1 基本概念,超文本（Hypertext） 超文本是一種包含網(wǎng)頁(yè)元素和效果，具有超鏈接功能的網(wǎng)狀文本。 超文本通常使用超文本置標(biāo)語(yǔ)言（HTML）進(jìn)行編輯，它能夠?qū)W(wǎng)頁(yè)的內(nèi)容、顯示效果及超鏈接進(jìn)行描述，形成HTML文檔。,8.1.2 常用網(wǎng)頁(yè)制作工具,文本編輯器：Notepad、UltraEdit 可視化網(wǎng)頁(yè)編輯軟件：Dreamweaver、FrontPage 圖像處理軟件：Photoshop、Fireworks 音頻處理軟件：Adobe Audition、GoldWave 視頻處理軟

4、件：Adobe Premiere、會(huì)聲會(huì)影 動(dòng)畫制作軟件：Flash,8.1.3 Dreamweaver介紹,Dreamweaver是Adobe公司的集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身的可視化網(wǎng)頁(yè)編輯器。,8.1.3 Dreamweaver介紹,工作界面,8.1.4 案例介紹,案例是一個(gè)關(guān)于現(xiàn)代詩(shī)“再別康橋”欣賞的網(wǎng)站，網(wǎng)站名稱為“zbkq”。,8.1.4 案例介紹,蘭州大學(xué)信息科學(xué)與工程學(xué)院,8.2 創(chuàng)建和管理站點(diǎn),,back,8.2.1 創(chuàng)建本地站點(diǎn),站點(diǎn)就是放置網(wǎng)站文件的一個(gè)文件夾，每一個(gè)網(wǎng)站都要有一個(gè)自己的站點(diǎn)，以便方便有效地管理站點(diǎn)中的各種資源。 本地站點(diǎn)：在本地開發(fā)時(shí)使用的文件夾。,8.2

5、.1 創(chuàng)建本地站點(diǎn),創(chuàng)建演示案例的本地站點(diǎn)，操作步驟如下： 選擇菜單命令【站點(diǎn)】【新建站點(diǎn)】，彈出“站點(diǎn)定義向?qū)А睂?duì)話框，輸入站點(diǎn)名稱“zbkq”。 單擊【下一步】按鈕。選擇“否，我不想使用服務(wù)器技術(shù)”。 單擊【下一步】按鈕。選擇第一個(gè)選項(xiàng)，然后指定文件存儲(chǔ)在本地硬盤的位置為“D:zbkq”。 單擊【下一步】按鈕。從下拉列表框中選擇【無(wú)】。 單擊【下一步】按鈕。 單擊【完成】按鈕，站點(diǎn)創(chuàng)建完成，站點(diǎn)zbkq將顯示在“文件”面板中。,8.2.2 向站點(diǎn)中添加內(nèi)容,向站點(diǎn)中添加網(wǎng)頁(yè)文件index.html和zzjs.html 打開站點(diǎn)zbkq，在面板中單擊鼠標(biāo)右鍵，從彈出菜單中選擇【新建文件】命令

6、，新建一個(gè)網(wǎng)頁(yè)文件。 新建網(wǎng)頁(yè)的默認(rèn)名稱是untitled.html，將untitled.html命名為index.html。 使用同樣的方法添加網(wǎng)頁(yè)zzjs.html。 在index.html上單擊鼠標(biāo)右鍵，從彈出菜單中選擇【設(shè)成首頁(yè)】命令，將其設(shè)置成主頁(yè)。 添加文件夾的方法與添加網(wǎng)頁(yè)的方法類似，在站點(diǎn)zbkq中添加兩個(gè)文件夾images和media。,8.2.3 管理本地站點(diǎn),Dreamweaver 8提供了強(qiáng)大的站點(diǎn)編輯和管理功能。 選擇菜單命令【站點(diǎn)】【管理站點(diǎn)】，彈出“管理站點(diǎn)”對(duì)話框。,蘭州大學(xué)信息科學(xué)與工程學(xué)院,8.3 使用表格布局網(wǎng)頁(yè),,back,8.3.1 插入表格,向ind

7、ex.html中插入一個(gè)表格，操作步驟如下： 打開index.html。 選擇菜單命令【插入】【表格】，或者在“插入”工具欄的“常用”選項(xiàng)卡中，單擊“表格”按鈕，彈彈出“表格”對(duì)話框。 在“表格”對(duì)話框設(shè)置行數(shù)為2，列數(shù)為1，表格寬度為300像素，邊框粗細(xì)、單元格邊距和單元格間距均為0。,8.3.1 插入表格,向index.html的表格中嵌入兩個(gè)表格，操作如下： 將光標(biāo)定位到表格的第一個(gè)單元格，插入一個(gè)表格，表格屬性為：行數(shù)1，列數(shù)2，表格寬度100%，邊框粗細(xì)1，單元格邊距0，單元格間距1。 將光標(biāo)定位到表格的第二個(gè)單元格，插入一個(gè)表格，表格屬性為：行數(shù)4，列數(shù)2，表格寬度100%，邊框粗

8、細(xì)1，單元格邊距0，單元格間距1。,8.3.2 選擇表格元素,1. 選擇表格 單擊表格中任一單元格，然后在“標(biāo)簽選擇器”中選擇“”標(biāo)簽。 單擊表格中任一單元格，然后選擇菜單命令【修改】【表格】【選擇表格】。 2. 選擇行或列 將鼠標(biāo)指針移動(dòng)到行的左邊緣或列的上邊緣。 當(dāng)鼠標(biāo)指針變?yōu)檫x擇箭頭或時(shí)，單擊以選擇當(dāng)前行或列。 按住鼠標(biāo)左鍵進(jìn)行上下或左右拖動(dòng)，可以選擇相鄰的多個(gè)行或列。 選擇不相鄰的行或列，可以在按住Ctrl鍵的同時(shí)選擇行或列。,8.3.2 選擇表格元素,3. 選擇單元格 選擇單個(gè)單元格，執(zhí)行下列操作之一： 單擊單元格，然后在“標(biāo)簽選擇器”中選擇“”標(biāo)簽。 按住Ctrl鍵，然后單擊單元格

9、。 選擇一行或矩形的單元格塊，執(zhí)行下列操作之一： 從一個(gè)單元格拖到另一個(gè)單元格。 單擊一個(gè)單元格，然后按住Shift鍵單擊另一個(gè)單元格。這兩個(gè)單元格定義的直線或矩形區(qū)域中的所有單元格都將被選中。 選擇不相鄰的單元格，可以在按住Ctrl鍵的同時(shí)單擊要選擇的單元格。,8.3.3 設(shè)置表格屬性,表格和單元格分別有各自的屬性面板，可以分別進(jìn)行參數(shù)設(shè)置。 選擇index.html中第一個(gè)插入的表格。指定表格ID為table0，寬為777像素，對(duì)齊為居中對(duì)齊，背景圖像為images/table_bg.gif。 選擇table0的第一行后。設(shè)置垂直對(duì)齊方式為頂端，高度為162像素。,8.3.3 設(shè)置表格屬性

10、,選擇第一個(gè)嵌套表格，指定ID為table1，高為156像素，邊框顏色為#0099CC。選擇table1的第一個(gè)單元格，指定寬度為568像素。 選擇第二個(gè)嵌套表格，指定表格ID為table2，邊框顏色#0099CC。選擇table2的第一行的兩個(gè)單元格和第三行的兩個(gè)單元格，指定高度為28像素，背景圖像為images/table_title.gif。選擇table2的第二行，指定高度為240像素，第一列寬度468像素。選擇table2的第四行，指定高度為80像素。,8.3.4 添加及刪除行和列,在index.html中table2的最后添加一個(gè)新行，操作步驟如下： 單擊table2的最后一個(gè)單元

11、格。 選擇菜單命令【修改】【表格】【插入行或列】，彈出“插入行或列”對(duì)話框。 選擇“行”，設(shè)置“行數(shù)”為1，位置為“所選之下”，單擊【確定】按鈕，新的一行出現(xiàn)在表格中。 選擇新添加的行，指定高度為36像素。,8.3.4 添加及刪除行和列,刪除某行或列，執(zhí)行下列操作之一： 單擊要?jiǎng)h除的行或列中的一個(gè)單元格，然后選擇菜單命令【修改】【表格】【刪除行】或【修改】【表格】【刪除列】。 選擇完整的一行或列，然后選擇菜單命令【編輯】【清除】或按Delete鍵。,8.3.5 拆分和合并單元格,拆分index.html中table2中的單元格，操作步驟如下： 選定table2的第三行的第一個(gè)單元格。 在“屬性

12、”面板中單擊“拆分單元格”按鈕，或者選擇菜單命令【修改】【表格】【拆分單元格】，彈出“拆分單元格”對(duì)話框。 在“拆分單元格”對(duì)話框中，指定拆分成兩列。 單擊【確定】按鈕，完成單元格的拆分。 使用同樣的方法將table2的第四行的第一個(gè)單元格拆分成兩列。,8.3.5 拆分和合并單元格,合并index.html中table2中的單元格，操作步驟如下： 選定table2的最后一行的兩個(gè)單元格。 在“屬性”面板中單擊“合并單元格”按鈕，或者選擇菜單命令【修改】【表格】【合并單元格】，完成單元格合并。 至此，index.html的結(jié)構(gòu)布局已設(shè)計(jì)完成。,蘭州大學(xué)信息科學(xué)與工程學(xué)院,8.4 編輯網(wǎng)頁(yè),,ba

13、ck,8.4.1 新建網(wǎng)頁(yè),Dreamweaver 8還提供了一種使用菜單命令創(chuàng)建網(wǎng)頁(yè)文件的方法。 選擇菜單命令【文件】【新建】，彈出“新建文檔”對(duì)話框中。在“新建文檔”對(duì)話框中選擇“基本頁(yè)”類別，從“基本頁(yè)”列表中選擇“HTML”，點(diǎn)擊【創(chuàng)建】按鈕，創(chuàng)建一個(gè)網(wǎng)頁(yè)文件。 選擇菜單命令【文件】【保存】，將網(wǎng)頁(yè)文件保存到站點(diǎn)zbkq下，文件名xzbj.html。,8.4.2 設(shè)置網(wǎng)頁(yè)屬性,網(wǎng)頁(yè)的基本屬性包括網(wǎng)頁(yè)中的默認(rèn)字體、網(wǎng)頁(yè)的背景顏色或背景圖像、頁(yè)邊距、網(wǎng)頁(yè)的標(biāo)題、網(wǎng)頁(yè)編碼等。 可以使用“頁(yè)面屬性”對(duì)話框設(shè)置網(wǎng)頁(yè)的屬性。 打開index.html，選擇菜單命令【修改】【頁(yè)面屬性】，或者單擊屬性

14、面板中的【頁(yè)面屬性】按鈕均可打開“頁(yè)面屬性”對(duì)話框。 選擇“分類”中的“外觀”類別，在外觀選項(xiàng)中指定頁(yè)面字體為“宋體”，大小為12，背景圖像為images/bg.gif。 按F12鍵在IE瀏覽器中打開網(wǎng)頁(yè)。,8.4.2 設(shè)置網(wǎng)頁(yè)屬性,再次打開“頁(yè)面屬性”對(duì)話框，設(shè)置背景顏色為#DEEBF3，重復(fù)為“橫向重復(fù)”，上邊距0像素。 再次在IE瀏覽器中打開index.html網(wǎng)頁(yè)。 使用同樣的方法設(shè)置zzjs.html和xzbj.html的背景圖片為images/bg.gif，重復(fù)為“橫向重復(fù)”，背景顏色為#DEEBF3，字體為“宋體”，大小為12。,8.4.3 添加文本,文本是網(wǎng)頁(yè)設(shè)計(jì)最常用的元素，

15、是網(wǎng)站內(nèi)容的集中體現(xiàn)。 添加文字 在Dreamweaver中有兩種換行方式：“分段換行”和“段內(nèi)換行”。 添加特殊字符 如版權(quán)符號(hào)、注冊(cè)商標(biāo)符號(hào)，以及一些特殊的數(shù)學(xué)符號(hào)等。 添加空格 Dreamweaver默認(rèn)不支持連續(xù)輸入多個(gè)空格，可以將輸入法切換到全角狀態(tài)輸入。 添加水平線 水平線有利于組織信息，可以使用一條或多條水平線以分隔文本和對(duì)象。,8.4.3 添加文本,設(shè)置文本屬性 選擇zzjs.html中的“徐志摩介紹”，設(shè)置格式為“標(biāo)題1”，字體顏色為#FFFFFF，居中對(duì)齊。 選擇xzbj.html中的“再別康橋?qū)懽鞅尘啊?，設(shè)置格式為“標(biāo)題1”，字體顏色為#FFFFFF，居中對(duì)齊。 設(shè)置in

16、dex.html中表格標(biāo)題文字為“粗體”，顏色為#FFFFFF，版權(quán)符號(hào)為Arial字體，版權(quán)文字居中對(duì)齊，設(shè)置table2第二行第一個(gè)單元格中的“再別康橋”為“標(biāo)題1”格式。,8.4.3 添加文本,為實(shí)現(xiàn)index.html中“再別康橋”詩(shī)詞內(nèi)容的自下向上滾動(dòng)效果，可進(jìn)行如下操作： 選中table2的第二行的第一個(gè)單元格，將文檔窗口切換到“拆分”視圖。 在代碼窗口當(dāng)前選中的內(nèi)容中找到“”，在其后輸入“” 從當(dāng)前位置向下，找到第一個(gè)“”，在其之前輸入文字滾動(dòng)的結(jié)束標(biāo)記“”。滾動(dòng)效果要在瀏覽器中打開網(wǎng)頁(yè)時(shí)才能看到。,8.4.4 添加超鏈接,1. 超鏈接分類 內(nèi)部鏈接：同一站點(diǎn)內(nèi)資源之間的鏈接。

17、外部鏈接：不同站點(diǎn)資源之間的鏈接。 錨記鏈接：同一網(wǎng)頁(yè)或不同網(wǎng)頁(yè)指定位置的鏈接。 Email鏈接：發(fā)送電子郵件的鏈接。,8.4.4 添加超鏈接,2. 絕對(duì)路徑和相對(duì)路徑 （1）絕對(duì)路徑 “ （2）文檔相對(duì)路徑 “gaoji/preferences.html”是一個(gè)文檔相對(duì)路徑，它省略了當(dāng)前文檔和所鏈接文檔URL的相同部分。（3）站點(diǎn)根目錄相對(duì)路徑 “/gaoji/preferences.html”是一個(gè)站點(diǎn)根目錄相對(duì)路徑，它表示網(wǎng)頁(yè)“preferences.html”位于站點(diǎn)根目錄（/）下的“gaoji”子文件夾中。,8.4.4 添加超鏈接,3. 網(wǎng)頁(yè)超鏈接 網(wǎng)頁(yè)超鏈接就是指向其他網(wǎng)頁(yè)或資源的

18、超鏈接，訪問(wèn)者單擊這樣的超鏈接時(shí)將跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁(yè)或資源。 4. 錨記鏈接 錨記鏈接常用于包含大量文字的網(wǎng)頁(yè)，通過(guò)點(diǎn)擊錨記鏈接，能夠快速跳轉(zhuǎn)到網(wǎng)頁(yè)的特定位置，便于訪問(wèn)者查看網(wǎng)頁(yè)內(nèi)容。 5. 電子郵件鏈接 在網(wǎng)頁(yè)上創(chuàng)建電子郵件鏈接，當(dāng)訪問(wèn)者單擊該鏈接時(shí)，可打開瀏覽器默認(rèn)的電子郵件處理程序。,8.4.5 添加圖像,圖像是一種重要的網(wǎng)頁(yè)素材，網(wǎng)頁(yè)中常用的圖像格式是GIF、JPEG和PNG。 在index.htm中table1的第二個(gè)單元格中插kangqiao.jpg，設(shè)置圖像的寬為200像素，高為150像素。,8.4.6 添加音頻和視頻,常用的音頻文件有WAV、MIDI和MP3，常用的視頻文件有MP

19、EG、WMV、RMRMVB、ASF等。 1. 嵌入視頻文件 在index.html的table2的第二行的第二個(gè)單元格中嵌入“男聲朗誦.wmv”。 2. 鏈接到音頻文件 在index.html的table2的第四行的第三個(gè)單元格中鏈接“林宥嘉-再別康橋.mp3”。,8.4.7 添加Flash動(dòng)畫,添加Flash動(dòng)畫就是將Flash動(dòng)畫直接嵌入到網(wǎng)頁(yè)中，要求訪問(wèn)者安裝有相應(yīng)瀏覽器的Flash播放插件，才能播放Flash文件。 在index.html中的table1的第一個(gè)單元格中插入head.swf。 在“屬性”面板中設(shè)置Flash插件的寬度為568像素，高度為150像素。,蘭州大學(xué)信息科學(xué)與工

20、程學(xué)院,8.5 發(fā)布站點(diǎn),,back,8.5.1 測(cè)試站點(diǎn),Dreamweaver的站點(diǎn)測(cè)試功能可以檢查站點(diǎn)中是否存在孤立文件，是否有斷掉的鏈接，以及存在的外部鏈接等。 測(cè)試站點(diǎn)zbkq，操作方法如下： 在“文件”面板中打開站點(diǎn)zbkq，在站點(diǎn)文件夾上單擊鼠標(biāo)右鍵。 從彈出快捷菜單中選擇【檢查鏈接】【整個(gè)本地站點(diǎn)】命令，打開“結(jié)果”面板。 修復(fù)錯(cuò)誤的鏈接，刪除孤立文件。,8.5.2 設(shè)置遠(yuǎn)程信息,將站點(diǎn)發(fā)布到Internet上，供人們?yōu)g覽觀看，就必須有可訪問(wèn)的域名和主機(jī)空間。 完成站點(diǎn)的測(cè)試之后，還需要設(shè)置站點(diǎn)的遠(yuǎn)程信息，之后才可以上傳站點(diǎn)。,8.5.3 上傳站點(diǎn),上傳站點(diǎn)可以利用Dreamw

21、eaver 8自帶的上傳功能，也可以用相應(yīng)的FTP工具。,8.5.4 瀏覽網(wǎng)頁(yè),站點(diǎn)上傳完畢后，打開IE瀏覽器，在地址欄中輸入站點(diǎn)遠(yuǎn)程主機(jī)的域名或IP地址，瀏覽器將自動(dòng)打開站點(diǎn)的主頁(yè)。,蘭州大學(xué)信息科學(xué)與工程學(xué)院,8.6 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)介紹,,back,8.6.1 表單,表單是實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的一種主要網(wǎng)頁(yè)元素，是HTML網(wǎng)頁(yè)與瀏覽器實(shí)現(xiàn)交互的重要手段。 表單在網(wǎng)頁(yè)中供訪問(wèn)者輸入信息，然后將信息提交服務(wù)器處理，實(shí)現(xiàn)網(wǎng)頁(yè)交互功能。 Dreamweaver 8提供了大量的表單元素，如按鈕、文本框、下拉列表框、單選按鈕、復(fù)選框。 可以使用“插入”工具欄的“表單”選項(xiàng)卡，或者選擇菜單命令【插入】【表單】插入

22、表單元素。,8.6.2 腳本語(yǔ)言,腳本語(yǔ)言是一種描述性語(yǔ)言，用于編寫嵌入到網(wǎng)頁(yè)中的腳本程序，既可以用于靜態(tài)網(wǎng)頁(yè)，也可以用于動(dòng)態(tài)網(wǎng)頁(yè)。 腳本程序由瀏覽器負(fù)責(zé)解釋和執(zhí)行，可以在網(wǎng)頁(yè)上產(chǎn)生動(dòng)態(tài)的顯示效果和實(shí)現(xiàn)與用戶交互的功能。 腳本程序代碼放置在HTML文檔的和標(biāo)記之間。 最常用的兩種腳本語(yǔ)言是VBScript和JavaScript，,8.6.3 服務(wù)器端處理程序,服務(wù)器端處理程序就是在服務(wù)器端執(zhí)行數(shù)據(jù)處理的腳本程序，在形式上與客戶端腳本程序沒(méi)有太大的差別，常用的服務(wù)器端處理語(yǔ)言有PHP、ASP和JSP。 PHP（PHP: Hypertext Preprocessor）具有開源、跨平臺(tái)、簡(jiǎn)單易學(xué)、性能優(yōu)越等特點(diǎn)，是目前十分流行的服務(wù)器端編程語(yǔ)言之一。 ASP（Active Server Pages）是微軟的開發(fā)的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，它沒(méi)有提供自己的編程語(yǔ)言，默認(rèn)使用VBScript腳本語(yǔ)言，也可以使用JavaScript語(yǔ)言。 JSP（Java Server Pages）是Sun公司推出的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)。JSP技術(shù)以Java語(yǔ)言作為腳本語(yǔ)言，普遍認(rèn)為JSP的執(zhí)行效率比PHP和ASP都高。,蘭州大學(xué)信息科學(xué)與工程學(xué)院,第8章 網(wǎng)頁(yè)制作基礎(chǔ),The end Thank you,