向網(wǎng)頁添加內(nèi)容.ppt

1、第8章 向網(wǎng)頁添加內(nèi)容,學(xué)習(xí)如何向網(wǎng)頁中添加圖像、FLASH和文本等,向網(wǎng)頁添加內(nèi)容,向虛構(gòu)餐館 Cafe Townsend 的主頁添加圖像、Macromedia Flash 文件、Macromedia Flash 視頻文件和文本。 完成后的頁面將如圖所示：,替換圖像占位符,雙擊頁面頂部的圖像占位符 banner_graphic。 在“選擇圖像源文件”對(duì)話框中，選擇站點(diǎn)根文件夾的 cafe_townsend images 文件夾下的 banner_graphic.jpg 文件并單擊“確定”。,向網(wǎng)頁添加內(nèi)容,替換圖像占位符,向網(wǎng)頁添加內(nèi)容,Dreamweaver 將圖像占位符替換為 Cafe

2、Townsend 的橫幅圖形,使用“插入”菜單插入圖像,在第一個(gè)表格的第三行（低于剛插入的橫幅圖形兩行，彩色表格單元格之上）內(nèi)單擊一次。 選擇“插入”“圖像”。 在“選擇圖像源文件”對(duì)話框，選擇 cafe_townsend images文件夾下的body_main_header.gif 文件，然后單擊“確定”。 一個(gè)長的彩色圖形出現(xiàn)在該表格行中。它看上去更像表格單元格的背景色，而不是圖形，但如果仔細(xì)看，您將看到該圖形具有圓角。添加完所有資源之后，這種圓角效果將使頁面的下半部分呈現(xiàn)一種有趣的外觀。,向網(wǎng)頁添加內(nèi)容,通過拖動(dòng)插入圖像,在頁面上最后一個(gè)表格的最后一行（彩色表格單元格之下）中單擊一次。

3、 在“文件”面板（“窗口”“文件”）中，找到 body_main_footer.gif 文件（它位于 images 文件夾中），將該文件拖到最后一個(gè)表格的插入點(diǎn)。,向網(wǎng)頁添加內(nèi)容,從“資源”面板插入圖像,單擊第二個(gè)表格的中間一列。 在“屬性”檢查器中，設(shè)置“水平”為“居中對(duì)齊”，“垂直”為“頂端”。 按一次 Enter 鍵 ，創(chuàng)建更多空間。,向網(wǎng)頁添加內(nèi)容,從“資源”面板插入圖像,單擊“文件”面板中的“資源”選項(xiàng)卡，或選擇“窗口”“資源”。 如果未選擇“圖像”視圖，則單擊“圖像”以查看圖像資源。,向網(wǎng)頁添加內(nèi)容,“資源”面板可以使用“資源”面板查看和管理當(dāng)前站點(diǎn)中的資源?！百Y源”面板顯示與文檔

4、窗口中的活動(dòng)文檔相關(guān)聯(lián)的站點(diǎn)資源。,從“資源”面板插入圖像,在“資源”面板中，選擇 street_sign.jpg 文件。 將 street_sign.jpg 文件拖到中心位置的表格單元格中的插入點(diǎn)或單擊“資源”面板底部的“插入”。 street_sign.jpg 圖形即顯示在頁面上,向網(wǎng)頁添加內(nèi)容,插入并播放 Flash 文件,插入一個(gè)播放 Cafe Townsend 的特色食品的照片幻燈片的 Flash 文件 在第一個(gè)表格的第二行內(nèi)單擊一次。 在“屬性”檢查器中，將“水平”和“垂直”均設(shè)為“居中”。 選擇“插入”“媒體”“Flash”。 在“選擇文件”對(duì)話框中，選擇cafe_townsen

5、d 根文件夾中的 flash_fma.swf 文件，然后單擊“確定”。,插入并播放 Flash 文件,在“屬性”檢查器（“窗口”“屬性”）中單擊“播放”。 Dreamweaver 在“文檔”窗口中播放 Flash 文件，顯示站點(diǎn)訪問者在瀏覽器中查看頁面時(shí)將看到的內(nèi)容。,插入 Flash 視頻,單擊第二個(gè)表格中間一列中放置的圖形之上單擊一次。 選擇“插入”“媒體”“Flash 視頻” 在“插入 Flash 視頻”對(duì)話框中，從“視頻類型”彈出式菜單中選擇“漸進(jìn)式下載視頻”。,插入 Flash 視頻,在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相對(duì)路徑 從“外觀”

6、彈出式菜單中選擇 Halo Skin 2。 “寬度” 180， “高度” 135,插入文本,現(xiàn)在向網(wǎng)頁添加一些文本。 可以在 Dreamweaver 文檔窗口中直接鍵入文本，也可以從其它源（如 Microsoft Word 或純文本文件）復(fù)制并粘帖文本。 然后，使用層疊樣式表 (CSS) 設(shè)置文本格式。,插入正文文本,在“文件”面板中，找到 sample_text.txt 文件（在 cafe_townsend 根文件夾中）并雙擊該文件的圖標(biāo)，在 Dreamweaver 中打開它。 此窗口處于“代碼”視圖中，并且不能切換到“設(shè)計(jì)”視圖，因?yàn)樵撐募皇?HTML 文件。,插入正文文本,在 samp

7、le_text.txt“文檔”窗口中，按 Ctrl+A 組合鍵選擇所有文本，然后按Ctrl+C復(fù)制所有文本。 關(guān)閉 sample_text.txt 文件。 單擊index.html中第二個(gè)表格中的第三個(gè)單元格，按Ctrl+V，將sample_text.txt中的文本粘貼至此。,在“屬性”檢查器中，從“垂直”彈出式菜單中選擇“頂端”。,插入導(dǎo)航條文本,接下來插入導(dǎo)航條文本。在后續(xù)課程中學(xué)習(xí)如何利用CSS設(shè)置這些文本格式之后，它們看上去才會(huì)像導(dǎo)航條。 單擊第二個(gè)表格的第一列（紅棕色的列） 鍵入單詞 Cuisine。 按空格，并鍵入 Chef Ipsum。 重復(fù)前面的步驟， 依次輸入Articles

8、、Special Events、Location、Menu、Contact Us。,鍵入時(shí)不要按 Enter 鍵，只使用空格鍵分隔單詞，并使這些單詞自然換行,插入導(dǎo)航條文本,在插入點(diǎn)仍舊處于第二個(gè)表格的第一個(gè)單元格時(shí)，在標(biāo)簽選擇器中單擊 標(biāo)簽。 在“屬性”檢查器，從“垂直”彈出式菜單中選擇“頂端”。 這會(huì)將您剛剛鍵入的文本沿表格單元格的頂端對(duì)齊。,創(chuàng)建鏈接,選擇Cuisine， 在屬性檢查器中單擊“鏈接”文本框旁的文件夾圖標(biāo)。,在“選擇文件”對(duì)話框中，選擇 menu.html 文件（與 index.html 文件處于同一個(gè)文件夾中） Cuisine 文本出現(xiàn)下劃線并變成藍(lán)色，表示它現(xiàn)在是一個(gè)鏈

9、接。 重復(fù)上述步驟，為導(dǎo)航欄中的每個(gè)單詞或一組單詞建立鏈接。,在瀏覽器中預(yù)覽頁面,要查看確切的最終結(jié)果，必須在瀏覽器中預(yù)覽網(wǎng)頁。 保存index.html文件，按 F12 鍵。 瀏覽器啟動(dòng)，并顯示該網(wǎng)頁。,補(bǔ)充,表單,表單,菜單“插入”-“表單” 表單是一個(gè)包含表單元素的區(qū)域。 表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。 表單使用表單標(biāo)簽（）定義 . ,表單元素,文本域(Text fields) 單選按鈕（Radio Buttons） 復(fù)選框（Checkboxes） 表單的動(dòng)作屬性（Action）和確認(rèn)按鈕 下拉列表,表單元素文本域,當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。, 名： 姓： ,顯示器瀏覽結(jié)果, 男 女 ,顯示器瀏覽結(jié)果,表單元素單選鈕,當(dāng)用戶從若干給定的選擇中選取其一個(gè)時(shí)，就會(huì)用到單選框。,表單元素復(fù)選框,當(dāng)用戶從若干給定的選擇中選取一個(gè)或若干選項(xiàng)時(shí)，就會(huì)用到復(fù)選框。, 我喜歡自行車： 我喜歡汽車： ,顯示器瀏覽結(jié)果,表單元素表單的動(dòng)作屬性（Action）和確認(rèn)按鈕, 輸入用戶姓名和密碼 請(qǐng)輸入你的姓名： 請(qǐng)輸入你的密碼： ,表單元素userpw.asp的源碼, 用戶信息 你的姓名是： 你的密碼是： ,ASP代碼在服務(wù)器端運(yùn)行,表單例2, 選擇 請(qǐng)選擇你最喜歡的水果： 蘋果 桔子 芒果 ,表單元素驗(yàn)證表單