第2章dreamweaver網(wǎng)頁設(shè)計(jì)技術(shù)(已修改)
2025-08-01 08:29 本頁面
【正文】 第 2章 Dream weaver網(wǎng)頁設(shè)計(jì)技術(shù) 學(xué)習(xí)目標(biāo) u 面板組、插入菜單、屬性面板的使用u 文本的格式化類型u 超鏈接的使用 u 用表格組織網(wǎng)頁 u 框架、表單及層的使用 u 動(dòng)態(tài)網(wǎng)頁技術(shù) 1第 2章 Dream weaver網(wǎng)頁設(shè)計(jì)技術(shù) 教學(xué)內(nèi)容 Dreamweaver基礎(chǔ)知識 創(chuàng)建及設(shè)計(jì)頁面 鏈接與導(dǎo)航 用表格和表格布局模式布局頁面 用框架布局頁面 表單的使用 層的使用 本章小結(jié) 返回總目錄2 Dreamweaver基礎(chǔ)知識 返回目錄Dreamweaver MX 2022工作界面 Dreamweaver 由Micromedia公司出品，是當(dāng)今最流行的專業(yè)網(wǎng)頁設(shè)計(jì)、網(wǎng)站管理、網(wǎng)頁可視化編程應(yīng)用軟件。主要用于制作網(wǎng)站的靜態(tài)網(wǎng)頁，具有跨平臺、跨瀏覽器的特點(diǎn)。左圖為Dreamweaver MX 2022工作界面 。3 Dreamweaver基礎(chǔ)知識 — 菜單欄返回 目錄菜單欄“文件 ”菜單： 包含 “文件 ”菜單的標(biāo)準(zhǔn)菜單項(xiàng)?！熬庉?”菜單 ：包含 “編輯 ”菜單的標(biāo)準(zhǔn)菜單項(xiàng)?！安榭?”菜單 ：可以設(shè)置文檔的各種視圖?！安迦?”菜單 ：與 “插入 ”欄功能相似，用于向文檔插入對象?！靶薷?”菜單 ：可以更改選定項(xiàng)目的屬性?！拔谋?”菜單 ：用于設(shè)置文本的格式?！懊?”菜單 ：提供對各種命令的訪問?！罢军c(diǎn) ”菜單 ：提供用于管理站點(diǎn)、上傳站點(diǎn)和下載文件的菜單項(xiàng)?！按翱?”菜單 ：提供對 Dreamweaver 中的所有面板、檢查器和窗口 的訪問。在窗口菜單中可以設(shè)置面板的打開或關(guān)閉?！皫椭?”菜單 ：提供對 Dreamweaver 文檔訪問的幫助信息，在 Dreamweaver中遇到的大部分問題都可以從 “幫助 ”菜單 中找到答 案。4 Dreamweaver基礎(chǔ)知識 — 插入欄 單擊 “插入 ”欄的下拉按鈕，出現(xiàn)菜單方式的選項(xiàng)卡。 可以根據(jù) 插入對象的不同選擇不同類別的選項(xiàng)卡，不同選項(xiàng)卡 包含創(chuàng)建不同類型對象的按鈕 。單擊 “顯示為制表符 ”可轉(zhuǎn)為常規(guī)樣式的 “插入 ”欄。圖為插入 ”欄的兩種顯示方式：返回目錄“插入 ”欄的兩種顯示方式5 Dreamweaver基礎(chǔ)知識 — 文檔工具欄 文檔工具欄如右圖所示，包含按鈕和彈出式菜單，提供各種 “文檔 ”常用視圖、各種查看選項(xiàng)和一些普通操作。文檔工具欄內(nèi)容從左到右依次為：代碼視圖 ：以代碼的形式顯示頁面，方便文檔代碼編寫。拆分視圖 ：同時(shí)顯示代碼和設(shè)計(jì)視圖，可同時(shí)看到兩種效 果。設(shè)計(jì)視圖 ：以設(shè)計(jì)形式顯示視圖，可看到所見即所得的網(wǎng)頁 效果。標(biāo)題： 可在標(biāo)題文本框中為文檔輸入或修改標(biāo)題。服務(wù)器調(diào)試 ： 顯示一個(gè)調(diào)試現(xiàn)行瀏覽器的報(bào)告。文件管理： 顯示 “文件管理 ”彈出式菜單。在瀏覽器中預(yù)覽 /調(diào)試 ：隨時(shí)預(yù)覽網(wǎng)頁在瀏覽器中的效果。文檔工具欄返回目錄6 Dreamweaver基礎(chǔ)知識 — 文檔窗口 文檔窗口用于顯示文檔，有 “設(shè)計(jì)視圖 ”、 “代碼視圖 ”、 “拆分試圖 ”三種顯示方式。 設(shè)計(jì)視圖： 用于可視化頁面布局、可視化編輯和應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境，此視圖類似在瀏覽器中查看頁面。 代碼視圖 ：用于編寫或編輯 html、 JavaScript、服務(wù)器語言代碼、其他類型代碼的編碼環(huán)境。 拆分視圖 ：可以在單個(gè)窗口中同時(shí)看到同一文檔的 “代碼 ”視圖和 “設(shè)計(jì) ”視圖。返回目錄7 Dreamweaver基礎(chǔ)知識 — 屬性面板 屬性面板 屬性面板用于顯示和修改已選定對象的屬性，可以對文本、圖像、表格、層等進(jìn)行屬性設(shè)置。不同的對像對應(yīng)不同的屬性面板。 打開 “窗口 ”菜單 → 選 “屬性 ”，可以顯示或隱藏屬性面板 返回目錄8 Dreamweaver基礎(chǔ)知識 — 面板組面板組 面板組在工作界面的右邊，如圖 所示。單擊面板窗口左邊的按鈕，可展開或折疊整個(gè)面板窗口。單擊每一個(gè)面板組左上方的按鈕，可展開或折疊該面板組窗口。返回目錄9 創(chuàng)建及設(shè)計(jì)頁面 — 創(chuàng)建文檔 1．創(chuàng)建網(wǎng)頁文件 創(chuàng)建空白網(wǎng)頁可以用兩種方法： 方法 1：在起始頁 “創(chuàng)建新項(xiàng)目 ”列表中單擊 “HTML”，建立一個(gè)空白 頁。 方法 2：在工作窗口打開 “文件 ”菜單 → 選 “新建 ”→“ 類別 ”列表中選“基本頁 ”→“ 基本頁 ”列表中選 “HTML” → 單擊 “創(chuàng)建 ”，建立一個(gè)空白頁。2．利用 Dreamweaver提供的示例文件創(chuàng)建網(wǎng)頁 “文件 ”菜單 →“ 新建 ”→ 在 “類別 ”列表中選一種實(shí)例文檔（如頁面設(shè)計(jì)CSS） → 在 “頁面設(shè)計(jì) CSS”列表中選一種網(wǎng)頁樣式 → 單擊 “創(chuàng)建 ”，網(wǎng)頁中將顯示文字和頁面布局，修改其中的文字及圖像，快速創(chuàng)建所需網(wǎng)頁。 返回目錄10 創(chuàng)建及設(shè)計(jì)頁面 — 創(chuàng)建文檔3．保存新建立的網(wǎng)頁 “文件 ”菜單 →“ 保存 ”→指定保存位置、文件名及保存類型 → 單擊 “保存 ”。4．設(shè)置文檔屬性 “修改 ”菜單 →“ 頁面屬性 ”，打開 “頁面屬性 ”對話框，如圖所示。通過 “頁面屬性 ”對話框可以對頁面基本屬性進(jìn)行設(shè)置 。頁面屬性對話框返回目錄11 創(chuàng)建及設(shè)計(jì)頁面 — 設(shè)置文本 文本是網(wǎng)頁元素中主要部分。1．輸入文本 在文檔窗口單擊，將插入點(diǎn)置于文檔中所需位置，輸入文本或插入其他網(wǎng)頁元素。2．設(shè)置文本格式 文本格式的設(shè)置利用屬性面板完成，屬性面板可以對文字標(biāo)題、字體字號、顏色、對齊方式、列表等作設(shè)置。 返回目錄12 創(chuàng)建及設(shè)計(jì)頁面 — 插入水平線 水平線能將網(wǎng)頁中不同功能的區(qū)域分割開來。插入水平線練習(xí) 位置 →“ 插入 ”菜單 →“ 水平線 ”。
法律信息相關(guān)推薦
鄂ICP備17016276號-1