Dreamweaver 入門:創(chuàng)建基于表格的頁(yè)面布局_Dreamweaver教程
本文章介紹如何在 Macromedia Dreamweaver 8 中創(chuàng)建基于表格的頁(yè)面布局。頁(yè)面布局將確定您的頁(yè)面在瀏覽器中會(huì)如何顯示,例如,顯示菜單、圖像和 Macromedia Flash 內(nèi)容將如何放置。表格是用于在 HTML 頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具。您可以使用表格快速輕松地創(chuàng)建布局。在本教程中,您將在一個(gè)新的 Dreamweaver 文檔中創(chuàng)建若干表格。這些表格的行和單元格實(shí)際上用作您將在以后添加的內(nèi)容的"容器框"。
檢查設(shè)計(jì)草樣
通常,創(chuàng)建 Web 站點(diǎn)并不是以打開 Dreamweaver 并立即對(duì)頁(yè)面進(jìn)行布局開始的。創(chuàng)建 Web 站點(diǎn)的初始工作從紙張或圖形編輯應(yīng)用程序(如 Macromedia Fireworks)開始。圖形設(shè)計(jì)人員通常會(huì)畫出 Web 站點(diǎn)綜合圖形的草圖(也稱為"草樣"),以便向客戶展示并確保站點(diǎn)的初始構(gòu)思能讓客戶滿足。
設(shè)計(jì)草樣由客戶要求其 Web 站點(diǎn)具有的任意數(shù)目的頁(yè)面元素組成。例如,客戶可能會(huì)提出:"頁(yè)面頂端要有徽標(biāo),要有能鏈接到其它頁(yè)面的導(dǎo)航功能,有用于聯(lián)機(jī)存儲(chǔ)的部分和可以插入視頻剪輯的位置。"根據(jù)這些討論,設(shè)計(jì)人員開始對(duì)站點(diǎn)布局進(jìn)行規(guī)劃,并制作滿足客戶要求的示例頁(yè)面草圖。
本教程向您提供為 Cafe Townsend(一個(gè)需要制作 Web 站點(diǎn)的虛構(gòu)餐館)設(shè)計(jì)的、完整的和符合要求的設(shè)計(jì)草樣。作為 Web 設(shè)計(jì)人員,您需要對(duì)草樣進(jìn)行轉(zhuǎn)換,使之最終形成可以使用的 Web 頁(yè)面(通常需要其他圖形設(shè)計(jì)人員與 Flash 開發(fā)人員的幫助)。

您可以看到,圖形設(shè)計(jì)人員已經(jīng)向您提供了 Web 頁(yè)面設(shè)計(jì)草樣,其中包括一些內(nèi)容區(qū)域和圖形方案。在下面的部分,您將使用 Dreamweaver 展示此設(shè)計(jì)。
您也可以打開原始草樣文件以便在計(jì)算機(jī)屏幕上查看該設(shè)計(jì)草樣�?梢栽� cafe_townsend 文件夾(在教程:設(shè)置站點(diǎn)和項(xiàng)目文件中已將該文件夾復(fù)制到了硬盤上)的 fireworks_assets 文件夾中找到設(shè)計(jì)草樣 homepage-mockup.jpg。在創(chuàng)建頁(yè)面時(shí),還可以打印草樣以便隨時(shí)查看。
創(chuàng)建并保存新頁(yè)面
建立站點(diǎn)并檢查設(shè)計(jì)草樣后,您就可以開始創(chuàng)建 Web 頁(yè)面了。首先您將創(chuàng)建一個(gè)新頁(yè)面,并將它保存到您的 Web 站點(diǎn)的本地根文件夾 cafe_townsend 中。該頁(yè)面最終將成為虛構(gòu)餐館 Cafe Townsend 的主頁(yè)。
假如您尚未創(chuàng)建本地根文件夾 cafe_townsend,則必須先完成創(chuàng)建,然后再繼續(xù)。
在 Dreamweaver 中,選擇"文件">"新建"。
在"新建文檔"對(duì)話框的"常規(guī)"選項(xiàng)卡上,從"類別"列表中選擇"基本頁(yè)",從"基本頁(yè)"列表中選擇"HTML",然后單擊"創(chuàng)建"。
選擇"文件">"另存為"。
在"另存為"對(duì)話框中,瀏覽至定義為站點(diǎn)的本地根文件夾的 cafe_townsend 文件夾并打開該文件夾。
在教程:設(shè)置站點(diǎn)和項(xiàng)目文件中,您在名為 local_sites 的文件夾中創(chuàng)建了此文件夾。
在"文件名"文本框中輸入 index.html,然后單擊"保存"。
文件名即出現(xiàn)在應(yīng)用程序窗口頂部的標(biāo)題欄中。
在新文檔頂部的"文檔標(biāo)題"文本框中,鍵入 Cafe Townsend。

這就是頁(yè)面的標(biāo)題(與文件名不同)。站點(diǎn)訪問者在 Web 瀏覽器中查看頁(yè)面時(shí)將在瀏覽器窗口的標(biāo)題欄中看到此標(biāo)題。
選擇"文件">"保存"來保存該頁(yè)面。
插入表格
接下來,您將添加一個(gè)表格,用于放置文本、圖形和 Macromedia Flash 資源。
在頁(yè)面上單擊一次,在頁(yè)面左上角放置插入點(diǎn)。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver MX進(jìn)階教程(十八)使用css樣式制作細(xì)線表格
- Dreamweaver 入門:創(chuàng)建基于表格的頁(yè)面布局
- Dreamweaver的應(yīng)用源格式技巧
- Dreamweaver開發(fā)ASP實(shí)例視頻教程表單驗(yàn)證
- Dreamweaver生成新頁(yè)面css的類失效
- 充分利用Dreamweaver CS3的代碼片斷功能面板
- Dreamweaver開發(fā)ASP實(shí)例視頻教程顯示數(shù)據(jù)庫(kù)記錄
- DW MX實(shí)例:極酷的鼠標(biāo)外觀
- Dreamweaver 基礎(chǔ):了解DW的狀態(tài)欄
- 構(gòu)建開發(fā)環(huán)境-Dreamweaver構(gòu)建Blog
猜你也喜歡看這些
- 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)視頻全教程
- Dreamweaver MX 2004 官方簡(jiǎn)體中文版教程
- GoLive視頻教程(趙鵬主講)
- Dreamweaver 8 完美網(wǎng)頁(yè)設(shè)計(jì)—CSS網(wǎng)頁(yè)設(shè)計(jì)篇
- java實(shí)例教程在線支付系統(tǒng)制作
- 精通Javascript+jQuery
- Dreamweaver 8 大師系列教程- 高級(jí)篇
- Xhtml全套課程(含項(xiàng)目案例,李炎恢主講)
- 美工之路系列視頻
- Dreamweaver 8.0網(wǎng)頁(yè)設(shè)計(jì)
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver 入門:創(chuàng)建基于表格的頁(yè)面布局
。