Dreamweaver 入門:創(chuàng)建基于表格的頁面布局(4)_Dreamweaver教程
保存頁面。
插入圖像占位符
圖像占位符是在預(yù)備好將最終圖形添加到 Web 頁面之前使用的圖形。在對(duì) Web 頁面進(jìn)行布局時(shí)圖像占位符很有用,因?yàn)橥ㄟ^使用圖像占位符,您可以在真正創(chuàng)建圖像之前確定圖像在頁面上的位置。
在文檔窗口中,在第一個(gè)表格的第一行內(nèi)單擊一次。
選擇"插入">"圖像對(duì)象">"圖像占位符"。
在"圖像占位符"對(duì)話框中,執(zhí)行下面的操作:
在"名稱"文本框中,鍵入 banner_graphic。
在"寬度"文本框中,輸入 700。
在"高度"文本框中,輸入 90。
單擊顏色框并從顏色選擇器中選擇一種顏色。在本教程中,我們選擇了紅棕色 (#993300)。
保留"替換文本"文本框?yàn)榭铡?關(guān)于…關(guān)于替換文本的說明 替換文本是 Web 頁面上的圖像的文字描述。它屬于 HTML 代碼,不會(huì)顯示在頁面上。對(duì)于大多數(shù)圖像,提供替換文本是很重要的,這樣使用屏幕閱讀器或只顯示文本的瀏覽器用戶就可以訪問這些圖像所提供的文本信息。而對(duì)于僅顯示 Web 站點(diǎn)徽標(biāo)的橫幅圖形,無需提供替換文本。將"圖像占位符"對(duì)話框中的"替換文本"文本框保留為空時(shí),Dreamweaver 會(huì)在 img 標(biāo)簽中添加一個(gè) alt="" 屬性。以后,假如您要向某個(gè)圖像添加替換文本,就可以選擇該圖像并在"屬性"檢查器中輸入替換文本。例如,假如以后您想更改徽標(biāo)以包括電話號(hào)碼或地址,則能夠以替換文本方式提供此信息。
單擊"確定"。
圖像占位符出現(xiàn)在第一個(gè)表格內(nèi)。圖像占位符顯示最終放置于此處的圖像的標(biāo)簽和大小屬性。

注重當(dāng)在瀏覽器中查看時(shí),不顯示圖像占位符的標(biāo)簽文字和大小文本。
保存頁面。 關(guān)于…關(guān)于圖像占位符 圖像占位符是在將最終圖形添加到 Web 頁面之前使用的臨時(shí)圖形;它不是顯示在瀏覽器中的圖形圖像。在您發(fā)布站點(diǎn)之前,應(yīng)該用適用于 Web 的圖形文件(例如 GIF 或 JPEG)替換所有添加的圖像占位符。
假如您有 Macromedia Fireworks,則可以根據(jù) Dreamweaver 圖像占位符創(chuàng)建新的圖形。當(dāng)您選擇圖像占位符并在"屬性"檢查器中單擊"創(chuàng)建"按鈕時(shí),F(xiàn)ireworks 將打開并呈現(xiàn)一個(gè)新的畫布。新圖像的尺寸設(shè)置為與占位符圖像相同的大小。接著,您可以隨意創(chuàng)建并編輯圖像,并替換 Dreamweaver 中的占位符圖像。
向頁面添加顏色
現(xiàn)在,您將通過設(shè)置某些表格單元格以及頁面背景的顏色,向頁面添加更多顏色。
在上述包含三列的表格的第一個(gè)單元格內(nèi)單擊一次。
單擊標(biāo)簽選擇器中的 標(biāo)簽(單元格標(biāo)簽)以選擇該單元格。

在"屬性"檢查器("窗口">"屬性")中,在"背景顏色"文本框內(nèi)單擊一次。
"背景顏色"文本框位于"背景顏色"(Bg) 顏色框旁。
注重假如未出現(xiàn)"背景顏色"文本框,請(qǐng)單擊"屬性"檢查器右下角的展開箭頭。
在"背景顏色"文本框中,輸入十六進(jìn)制值 #993300,然后按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

表格單元格的顏色即變?yōu)榧t棕色。
在上述包含三列的表格的第二個(gè)單元格內(nèi)單擊一次。
單擊標(biāo)簽選擇器中的 標(biāo)簽(單元格標(biāo)簽)以選擇該單元格。
在"屬性"檢查器中,在"背景顏色"文本框內(nèi)單擊一次,輸入十六進(jìn)制值 #F7EEDF,然后按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver MX進(jìn)階教程(十八)使用css樣式制作細(xì)線表格
- Dreamweaver 入門:創(chuàng)建基于表格的頁面布局
- Dreamweaver的應(yīng)用源格式技巧
- Dreamweaver開發(fā)ASP實(shí)例視頻教程表單驗(yàn)證
- Dreamweaver生成新頁面css的類失效
- 充分利用Dreamweaver CS3的代碼片斷功能面板
- Dreamweaver開發(fā)ASP實(shí)例視頻教程顯示數(shù)據(jù)庫記錄
- DW MX實(shí)例:極酷的鼠標(biāo)外觀
- Dreamweaver 基礎(chǔ):了解DW的狀態(tài)欄
- 構(gòu)建開發(fā)環(huán)境-Dreamweaver構(gòu)建Blog
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver 入門:創(chuàng)建基于表格的頁面布局(4)
。