2011最新Dreamweaver_8課件.ppt

課堂講解 什么是網(wǎng)頁和網(wǎng)站網(wǎng)頁的分類網(wǎng)頁中的常用術(shù)語網(wǎng)頁設(shè)計的相關(guān)知識認識Dreamweaver8Dreamweaver8的基本操作Dreamweaver8工作界面介紹 什么是網(wǎng)頁和網(wǎng)站 什么是網(wǎng)頁什么是網(wǎng)站 什么是網(wǎng)頁 網(wǎng)頁是由HTML 超級文本標識語言 或者其他語言編寫的 通過IE瀏覽器編譯后供用戶獲取信息的頁面 它又稱為Web頁 其中可包含文字 圖像 表格 動畫和超級鏈接等各種網(wǎng)頁元素 什么是網(wǎng)站 網(wǎng)站就是一個或多個網(wǎng)頁的集合 從廣義上講 網(wǎng)站就是當網(wǎng)頁發(fā)布到Internet上以后 能通過瀏覽器在Internet上訪問的頁面 門戶網(wǎng)站職能網(wǎng)站專業(yè)網(wǎng)站個人網(wǎng)站 網(wǎng)頁的分類 按所處位置分類按表現(xiàn)形式分類 按所處位置分類 按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類 按表現(xiàn)形式分類 按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 網(wǎng)頁中的常用術(shù)語 萬維網(wǎng) www 瀏覽器統(tǒng)一資源定位符 URL 文件傳輸協(xié)議 FTP IP地址域名超級鏈接超級文本標記語言 HTML 萬維網(wǎng) www 萬維網(wǎng) www 是WorldWideWeb的中文簡稱 也稱為3W網(wǎng) 它的本質(zhì)是一種基于超級文本技術(shù)的交互式信息瀏覽檢索工具 是Internet提供的應(yīng)用最普及 功能最豐富 使用方法最簡便的信息服務(wù) 用戶可通過它在Internet上瀏覽 編輯 傳遞超文本格式的文件 即 html格式文件 瀏覽器 瀏覽器是用于閱讀網(wǎng)頁中信息的一種軟件工具 就像使用電腦必須有操作系統(tǒng)一樣 InternetExplorer IE NetscapeNavigator NE 騰訊TT瀏覽器 統(tǒng)一資源定位符 URL URL UniformResourceLocator 主要是用來指定協(xié)議 如HTTP或FTP 以及對象 文檔 萬維網(wǎng)網(wǎng)頁或其他目標在Internet的位置和存取方式 通信協(xié)議主機名所要訪問的網(wǎng)頁路徑及名稱 文件傳輸協(xié)議 FTP FTP FileTransferProtocol 是一種廣泛使用的文件傳輸協(xié)議 是快速 高效和可靠的信息傳輸方法 FTP是基于客戶 服務(wù)器模型的TCP IP的應(yīng)用 所以只要在客戶端和服務(wù)器之間建立了TCP IP連接 無論兩臺電腦的位置遠近 連接方式的異同以及使用的操作系統(tǒng)的異同 都能通過FTP協(xié)議進行文件的傳輸 IP地址 IP地址用來標識連接到Internet上電腦的指定編號 每一個IP地址對應(yīng)一臺電腦 這與用電話號碼標識電話網(wǎng)絡(luò)中的電話相同 電腦識別的IP地址由32位二進制數(shù)值組成 電腦上以十進制數(shù)值來顯示 一組數(shù)值分為4部分 每一部分均不能大于255 中間用 分隔 如61 139 2 69 域名 域名就是常說的網(wǎng)址 它也具有惟一性 如百度的網(wǎng)址 網(wǎng)易的網(wǎng)址等就是一個域名 域名由漢語拼音或英文字符加上數(shù)字表示 在訪問網(wǎng)絡(luò)時 域名將通過域名服務(wù)器轉(zhuǎn)換成IP地址 這種轉(zhuǎn)換是在后臺完成的 超級鏈接 超級鏈接是網(wǎng)頁中最常用的元素之一 網(wǎng)頁就是通過無數(shù)的超級鏈接才能組成一個網(wǎng)站 超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面 對象 也可以鏈接到其他網(wǎng)站 大大方便了用戶在各個頁面對象之間實現(xiàn)跳轉(zhuǎn) 超級文本標記語言 HTML HTML HyperTextMarkupLanguage 是一種用戶與電腦之間進行交流的文本技術(shù) 各種網(wǎng)頁均是用HTML語言來描述的 用HTML語言編寫的網(wǎng)頁文件的擴展名一般為 htm 或 html 網(wǎng)頁設(shè)計的相關(guān)知識 設(shè)計網(wǎng)頁的原則網(wǎng)頁設(shè)計的一般步驟網(wǎng)頁制作的常用工具 設(shè)計網(wǎng)頁的原則 整體規(guī)劃鮮明的主題善用圖像醒目的導航及時更新易記的網(wǎng)站名稱通用網(wǎng)頁動畫適量 網(wǎng)頁設(shè)計的一般步驟 規(guī)劃網(wǎng)站收集整理資源配置站點創(chuàng)建頁面測試站點發(fā)布站點維護 更新站點 網(wǎng)頁制作的常用工具 網(wǎng)頁設(shè)計軟件Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計軟件 圖像處理軟件制作網(wǎng)頁圖像的軟件種類繁多 大多數(shù)網(wǎng)頁設(shè)計人員選擇的是Fireworks或Photoshop 動畫制作軟件網(wǎng)頁動畫制作中最常用的軟件非Flash莫屬 認識Dreamweaver8 使用Dreamweaver8制作網(wǎng)頁之前 需先將該軟件安裝到電腦中 其方法與安裝其他軟件相似 用戶可根據(jù)提示操作 Dreamweaver8的基本操作 啟動Dreamweaver8新建空白HTML網(wǎng)頁保存網(wǎng)頁文檔預(yù)覽網(wǎng)頁效果退出Dreamweaver8 啟動Dreamweaver8 選擇 開始 所有程序 Macromedia MacromediaDreamweaver8菜單命令 新建空白HTML網(wǎng)頁 選擇 文件 新建 菜單命令 打開 新建文檔 對話框 在 分類 欄中選擇 基本頁 選項 在 基本頁 欄中選擇 HTML 選項 單擊 創(chuàng)建 按鈕 保存網(wǎng)頁文檔 選擇 文件 保存 菜單命令 打開的 另存為 對話框 在 保存在 下拉列表框中選擇文件的保存路徑 在 文件名 文本框中輸入保存的文件名 單擊 保存 按鈕 預(yù)覽網(wǎng)頁效果 選擇 文件 在瀏覽器中預(yù)覽 IExplore6 0 菜單命令在IE瀏覽器中預(yù)覽網(wǎng)頁文檔的效果 退出Dreamweaver8 單擊Dreamweaver8窗口右上角的 關(guān)閉 按鈕 單擊Dreamweaver8窗口左上角的圖標 在彈出的下拉菜單中選擇 關(guān)閉 命令 在Dreamweaver8窗口中選擇 文件 退出 菜單命令 在當前窗口為Dreamweaver8工作界面時 按 Alt F4 鍵退出Dreamweaver8 Dreamweaver8工作界面介紹 插入欄文檔工具欄文檔編輯區(qū)網(wǎng)頁標簽擴展按鈕浮動面板組屬性面板標簽選擇器水平標尺和垂直標尺 上機實戰(zhàn) 本課上機實戰(zhàn)將練習在Dreamweaver8中新建一個只包含文本的簡單網(wǎng)頁 并使用IE瀏覽器預(yù)覽其效果 其中主要練習Dreamweaver8的啟動 新建文檔 保存網(wǎng)頁 預(yù)覽網(wǎng)頁和退出Dreamweaver8的操作 課堂講解上機實戰(zhàn) 第2課站點的基本操作 課堂講解 站點的規(guī)劃創(chuàng)建本地站點創(chuàng)建遠程站點管理本地站點管理站點地圖頁面設(shè)置 站點的規(guī)劃 Dreamweaver8的站點類型規(guī)劃站點結(jié)構(gòu)繪制網(wǎng)站結(jié)構(gòu)草圖 Dreamweaver8的站點類型 本地站點遠程站點測試站點 規(guī)劃站點結(jié)構(gòu) 規(guī)劃站點結(jié)構(gòu)是設(shè)計站點的必要前提 其操作是將不同的文件分類存放在文件夾中以便于設(shè)計者管理 合理地組織站點結(jié)構(gòu) 可提高工作效率 加快對站點的設(shè)計 繪制網(wǎng)站結(jié)構(gòu)草圖 站點規(guī)劃好之后 就可以根據(jù)規(guī)劃繪制出一個網(wǎng)站結(jié)構(gòu)草圖 以便于有一個清晰的思路 創(chuàng)建本地站點 新建站點新建文件夾新建網(wǎng)頁文件 新建站點 通過 站點 新建站點 菜單命令或 文件 面板新建站點 新建站點 新建文件夾 建立好站點后就可以在站點中新建文件夾 該文件夾主要用來存儲這個網(wǎng)站中用到的網(wǎng)頁元素 如圖片 音樂等 新建網(wǎng)頁文件 新建網(wǎng)頁文件的方法與新建文件夾的方法相同 創(chuàng)建遠程站點 創(chuàng)建遠程站點的方法與創(chuàng)建本地站點的方法類似 只是無需在站點文件夾下再新建文件夾或網(wǎng)頁文件 管理本地站點 編輯本地站點刪除本地站點 編輯本地站點 選擇本地站點刪除站點中的文件和文件夾更改站點信息 刪除本地站點 如果不需要某個站點時 可以將其從站點列表中刪除 管理站點地圖 定義主頁查看站點地圖在站點地圖中管理頁面文件 定義主頁 在使用站點地圖查看站點時必須保證這個站點已定義了一個主頁 因為主頁是一個站點的根節(jié)點 必須有根節(jié)點才有各個支節(jié)點 也就是各個子頁 查看站點地圖 查看站點地圖是在Dreamweaver8的 文件 面板的 視圖 下拉列表框中選擇 地圖視圖 選項 在站點地圖中管理頁面文件 選擇頁面文件打開頁面文件新建頁面文件更改頁面標題 選擇頁面文件 在站點地圖中的某個頁面文件上單擊鼠標即可選擇該文件 按住 Shift 鍵的同時單擊需要選取的文件 可選擇多個連續(xù)的頁面文件 按住 Ctrl 鍵的同時單擊需要選取的文件 可選擇多個不連續(xù)的頁面文件 打開頁面文件 在頁面文件上雙擊鼠標即可打開該文件 在選擇頁面之后 選擇 文件 打開 菜單命令打開頁面 選擇頁面后單擊鼠標右鍵 在彈出的快捷菜單中選擇 打開 命令可打開頁面 新建頁面文件 在建立好站點地圖之后 如果還需要在其中添加新的網(wǎng)頁文件 可以在站點地圖中新建一個頁面文件 更改頁面標題 在站點地圖中可對頁面標題進行更改 以方便絕對站點的管理 頁面設(shè)置 當站點建立好之后 就可以進行具體的網(wǎng)頁編輯操作了 但在編輯網(wǎng)頁之前 還需要對頁面進行一些簡單的屬性設(shè)置以方便以后的工作 上機實戰(zhàn) 本課上機實戰(zhàn)將練習創(chuàng)建一個名為 國畫欣賞 的站點 將其中的本地站點保存在 D guohua 文件夾下 遠程站點保存在 E guohua 文件夾下 然后為 國畫欣賞 網(wǎng)站建立一個存放圖片的文件夾 pic 并新建名為 index html ghzs html jrmh html ghds html flxs html ghlt html 和 lxwm html 的網(wǎng)頁文件 最后設(shè)置 index html 的頁面屬性 課堂講解上機實戰(zhàn) 第1課為網(wǎng)頁添加文本 課堂講解 插入文本格式化文本項目列表的應(yīng)用標尺和網(wǎng)格 插入文本 插入普通文本插入特殊字符在字符之間添加空格插入其他文本 插入普通文本 將插入點定位在文檔編輯區(qū)中 直接輸入文本即可 在Word等文本編輯軟件中編輯好文本之后 將其復制到剪貼板上 然后在Dreamweaver8中將插入點定位到文檔編輯區(qū)中 粘貼剪貼板中的文本即可 插入特殊字符 在Dreamweaver8中編輯文本時 往往會遇到一些無法通過鍵盤直接輸入的特殊字符 如版權(quán)符號 注冊商標符號 等 這時可通過Dreamweaver8插入特殊字符的功能進行插入 在字符之間添加空格 Dreamweaver8中的文檔格式都是以HTML編碼形式存在的 而HTML編碼中只允許字符之間包含一個空格 所以在Dreamweaver8中無論按多少次空格鍵都只會輸入一個空格 插入其他文本 插入水平線添加水平線修改水平線插入日期 添加水平線 在文檔編輯區(qū)將插入點定位到所需位置 選擇 插入 HTML 水平線 菜單命令或單擊 插入 欄中的 HTML 選項卡在其中單擊按鈕即可添加水平線 修改水平線 初始繪制的水平線的格式往往不能滿足實際需要 此時可通過屬性面板對其進行修改 插入日期 在制作網(wǎng)頁時 有時需要插入當前的日期 Dreamweaver8提供了快速插入日期和時間的功能 格式化文本 設(shè)置字體外觀設(shè)置字體大小設(shè)置顏色設(shè)置字體樣式設(shè)置對齊方式設(shè)置標題格式設(shè)置樣式 設(shè)置字體外觀 用戶也可對屬性面板的 字體 下拉列表框中的字體列表重新編輯 設(shè)置字體大小 在屬性面板的 大小 下拉列表框中選擇相應(yīng)的選項 并選擇其后的 單位 下拉列表框中相應(yīng)的單位選項 即可設(shè)置所選文本的字體大小 其中字體的度量單位有像素 px 厘米 cm 等 可根據(jù)具體情況進行選擇 但一般都以像素為單位 設(shè)置顏色 單擊屬性面板中的按鈕 在彈出的顏色列表框中選擇相應(yīng)的選項可設(shè)置所選文本的字體顏色 在其后的文本框中直接輸入顏色的英文名 如Red Green等 或以 開頭的十六進制顏色代碼 如 ff0000 00ff00 設(shè)置所選文本的顏色 設(shè)置字體樣式 粗體根據(jù)在 首選參數(shù) 對話框的 常規(guī) 選項中設(shè)置的樣式參數(shù)選擇 將或標簽應(yīng)用于選定的文本 即對所選文本加粗 單擊按鈕即可設(shè)置 加粗 設(shè)置 再次單擊按鈕可取消 加粗 設(shè)置 斜體根據(jù)在 首選參數(shù) 對話框的 常規(guī) 選項中設(shè)置的樣式參數(shù)選擇 將或標簽應(yīng)用于選定的文本 即對所選文本進行傾斜設(shè)置 選中按鈕即可將所選的文本應(yīng)用 傾斜 再次單擊按鈕可取消 傾斜 設(shè)置 設(shè)置對齊方式 通過屬性面板中的 左對齊 按鈕 居中對齊 按鈕 右對齊 按鈕和 兩端對齊 按鈕可設(shè)置文本的對齊方式 設(shè)置標題格式 在屬性欄的 格式 下拉列表框中可設(shè)置標題格式 其中 段落 是應(yīng)用標簽的默認格式 標題1 選項應(yīng)用標簽 設(shè)置該選項可以將所選的文本設(shè)置成各種標題 標題號越小 字體越大 設(shè)置樣式 屬性面板中的 樣式 下拉列表框可用于顯示當前應(yīng)用于所選文本的樣式 項目列表的應(yīng)用 有序列表無序列表定義列表為現(xiàn)有文本創(chuàng)建列表創(chuàng)建嵌套列表設(shè)置項目列表屬性 有序列表 有序列表又稱為編號列表 是有一定排列順序的列表 一般前面有數(shù)字前導字符 其中前導字符可以是阿拉伯數(shù)字 英文字母或羅馬數(shù)字等 無序列表 無序列表又稱為項目列表 是一系列無順序級別關(guān)系的項目文本組成的列表 一般前面是用項目符號作為前導字符 定義列表 定義列表不使用項目符號或數(shù)字這樣的前導字符 通常用在詞匯表或說明書中 為現(xiàn)有文本創(chuàng)建列表 除了先創(chuàng)建列表項再輸入文本外 還可以先輸入文本 然后再設(shè)置列表項 創(chuàng)建嵌套列表 嵌套列表是包含在其他列表中的列表 設(shè)置項目列表屬性 使用 列表屬性 對話框可以設(shè)置列表項的外觀 包括編號樣式 項目符號樣式等 標尺和網(wǎng)格 標尺網(wǎng)格 標尺 標尺分為水平標尺和垂直標尺 分別顯示在Dreamweaver8文檔編輯區(qū)的上方和左側(cè) 標尺的單位包括像素 厘米和英寸 在默認狀態(tài)下使用像素為單位 網(wǎng)格 網(wǎng)格與標尺都是定位工具 但在網(wǎng)頁布局中使用網(wǎng)格更方便 文檔編輯區(qū)中顯示了網(wǎng)格后 就可以對網(wǎng)頁元素進行準確的定位了 上機實戰(zhàn) 在本課的上機實戰(zhàn)中 將在已有基本框架 相關(guān)知識將在后面幾課詳細講解 的 風行天科技 網(wǎng)站的首頁頁面中添加文本 項目列表 并對它們進行設(shè)置 如縮進 加粗 傾斜 大小 顏色等 課堂講解上機實戰(zhàn) 第4課為網(wǎng)頁添加圖像 課堂講解 網(wǎng)頁圖像的格式及來源插入圖像設(shè)置圖像屬性圖像高級設(shè)置 網(wǎng)頁圖像的格式及來源 GIF格式JPEG格式PNG格式網(wǎng)頁圖像來源 GIF格式 GIF全稱為 GraphicsInterchangeFormat 意為可交換圖像格式 它是第一個支持網(wǎng)頁的圖像格式 在PC機和蘋果機上都能被正確識別 它最多支持256種顏色 可以使圖像變得容量相當小 GIF圖像可以在網(wǎng)頁中以透明方式顯示 還可以包含動態(tài)信息 即GIF動畫 JPEG格式 JPEG全稱為 JointPhotographicExpertsGroup 意為聯(lián)合圖像專家組 它可以高效地壓縮圖片 丟失人眼不易察覺的部分圖像 使文件容量在變小的同時基本不失真 通常用來顯示顏色豐富的精美圖像 PNG格式 PNG全稱為 PortableNetworkGraphics 意為便攜網(wǎng)絡(luò)圖像 它是逐漸流行的網(wǎng)絡(luò)圖像格式 PNG格式既融合了GIF能透明顯示的特點 又具有JPEG處理精美圖像的優(yōu)勢 且可以包含圖層等信息 常常用于制作網(wǎng)頁效果圖 網(wǎng)頁圖像來源 網(wǎng)頁圖像的素材有很多來源 如可以使用圖形處理軟件 如Photoshop Fireworks和FreeHand等軟件 制作 可以購買網(wǎng)頁素材光盤 可以從網(wǎng)絡(luò)上下載等 插入圖像 直接插入占位符插入圖像的放大顯示 直接插入 選擇 插入 圖像 菜單命令 單擊插入欄的 常用 選項卡中的按鈕 按 Ctrl Alt I 鍵 占位符插入 制作網(wǎng)頁時還未選定需插入的圖像 但確定了圖像大小的時候 可以使用占位符來代替圖像的方式插入到文檔中 將圖像確定后雙擊占位符 在打開的對話框中設(shè)置后插入即可 圖像的放大顯示 Dreamweaver8新增的放大鏡功能可以讓用戶更方便地進行對齊圖像 選擇較小的對象以及查看較小的文本 動畫或網(wǎng)頁元素等操作 設(shè)置圖像屬性 在網(wǎng)頁中插入圖像后可通過屬性面板對其屬性進行修改等設(shè)置 圖像命名圖像大小編輯圖片源文件設(shè)置 文本說明圖像與文本的對齊圖像邊距圖像邊框 圖像命名 為了在使用Dreamweaver行為 如交換圖像 或腳本撰寫語言 如JavaScript或VBScript 時可以引用該圖像 可在屬性面板的 圖像 文本框中為圖像命名 圖像大小 在Dreamweaver8中插入圖像后系統(tǒng)會自動將圖像的原始大小顯示在 寬 和 高 文本框 以像素為單位 中 編輯圖片 在網(wǎng)頁中選擇圖像之后 單擊屬性面板中的按鈕 打開圖像處理軟件 對圖像進行處理 如果安裝了Fireworks 那么Fireworks將被默認為圖像處理軟件 如果沒有安裝 用戶也可自己設(shè)置使用其他軟件中處理圖像 源文件設(shè)置 在屬性面板的 源文件 文本框中顯示了圖像的保存路徑 如果要重新插入一幅新圖像 可以在選取圖像后的屬性面板中的 源文件 文本框中重新輸入要插入圖像的地址 或單擊右側(cè)后的按鈕 在打開的 選擇圖像源文件 對話框中重新選擇需要的圖像 文本說明 在選取圖像后的屬性面板的 替換 下拉列表框中可以輸入圖像的文本說明 圖像與文本的對齊 選取圖像后 在屬性面板的 對齊 下拉列表框中可設(shè)置處于同一行上的圖像與文本的對齊方式 圖像邊距 選取圖像在屬性面板的 垂直邊距 和 水平邊距 文本框中可以設(shè)置圖像與頁面上方和左側(cè)之間的距離 也可以設(shè)置圖像與其他網(wǎng)頁元素之間的距離 圖像邊框 選取圖像后 在屬性面板的 邊框 文本框中可以設(shè)置圖像邊框的寬度 單位為像素 0 表示無邊框 圖像高級設(shè)置 鼠標經(jīng)過圖像設(shè)置插入FireworksHTML對象 鼠標經(jīng)過圖像設(shè)置 鼠標經(jīng)過圖像是一種在瀏覽器中查看網(wǎng)頁時 鼠標光標經(jīng)過該圖像時 圖像發(fā)生變化的動態(tài)圖像 插入FireworksHTML對象 Macromedia公司的圖形處理軟件Fireworks優(yōu)化后的圖像和HTML文件 使用Dreamweaver可直接插入保存到所需的Dreamweaver站點文件夾中 上機實戰(zhàn) 本課上機實戰(zhàn)主要練習在網(wǎng)頁中插入圖像并對其進行屬性設(shè)置 在練習過程中 將用到課堂講解中所學的插入圖像的方法 圖像屬性設(shè)置的方法 熱點鏈接的設(shè)置及鼠標經(jīng)過圖像的創(chuàng)建方法等知識 課堂講解上機實戰(zhàn) 第5課創(chuàng)建超級鏈接 課堂講解 超級鏈接概念超級鏈接分類創(chuàng)建文本超級鏈接創(chuàng)建錨鏈接創(chuàng)建空鏈接創(chuàng)建電子郵件超級鏈接創(chuàng)建圖像超級鏈接創(chuàng)建導航條 超級鏈接概念 超級鏈接是指頁面對象之間的鏈接關(guān)系 它網(wǎng)頁的靈魂 能合理 協(xié)調(diào)地把網(wǎng)站中的各個元素 頁面通過超級鏈接構(gòu)成了一個有機整體 使瀏覽者能快速地訪問到想要訪問的頁面 超級鏈接分類 絕對超級鏈接文檔相對路徑站點根目錄相對路徑 絕對超級鏈接 絕對超級鏈接就是形如 http www china zh cn 的超級鏈接地址 它給出了超級鏈接目標端點完整的URL地址 包括使用的協(xié)議 http 一般用于創(chuàng)建站外具有固定地址的超級鏈接 文檔相對路徑 使用文檔相對路徑不需要給出完整的URL地址 可省去URL地址的協(xié)議 只需保留不同的部分 如pic logo gif 這是本地站點超級鏈接中最常用的鏈接形式 由于相對超級鏈接的文件之間相互關(guān)系并沒有發(fā)生變化 因此使用文檔相對路徑創(chuàng)建的超級鏈接在上傳時可以不用更新各個超級鏈接 站點根目錄相對路徑 站點根目錄相對路徑是形如 help help html 的超級鏈接地址 它基于站點根目錄 在同一個站點中網(wǎng)頁的超級鏈接也可采用這種方法 創(chuàng)建文本超級鏈接 文本超級鏈接是最常見的超級鏈接 通過使用鼠標點擊文本即可從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁 創(chuàng)建錨鏈接 創(chuàng)建命名錨記鏈接命名錨記 創(chuàng)建命名錨記 在制作網(wǎng)頁時 為了達到跳轉(zhuǎn)到網(wǎng)頁固定位置的目的 可以使用錨鏈接 通過對網(wǎng)頁中指定位置的命名 利用超級鏈接打開目標網(wǎng)頁時可直接跳轉(zhuǎn)到相應(yīng)的命名位置上 鏈接命名錨記 創(chuàng)建好錨記之后 必須創(chuàng)建對應(yīng)的超級鏈接源端點 創(chuàng)建空鏈接 要想對文本設(shè)置行為 首先必須為文本建立空超級鏈接 空超級鏈接是一個未指派目標的超級鏈接 這樣行為才會有效 為文本建立空超級鏈接時 只要先在文檔窗口中選中需要建立空超級鏈接的文本 然后在屬性面板的 鏈接 文本框中輸入一個 符號即可 建立空超級鏈接的目的只是為了應(yīng)用行為 其他情況下不必建立 創(chuàng)建電子郵件超級鏈接 電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛 在網(wǎng)頁中建立電子郵件超級鏈接可方便網(wǎng)頁瀏覽者與設(shè)計者之間的聯(lián)系 創(chuàng)建圖像超級鏈接 為一般圖像創(chuàng)建超級鏈接創(chuàng)建圖像熱點超級鏈接 為一般圖像創(chuàng)建超級鏈接 創(chuàng)建圖像熱點超級鏈接 要在一幅比較大的圖片中添加許多超級鏈接時 應(yīng)該將圖片化整為零 分割成較小的圖片 然后分別為這些小圖像上建立超級鏈接來達到目的 但這時整幅圖片就不能對齊 利用Dreamweaver8的圖像熱點超級鏈接功能就能避免這個問題 創(chuàng)建導航條 插入導航條編輯導航條 插入導航條 導航條一般由圖像或圖像組組成 這些圖像的顯示內(nèi)容隨用戶的操作不同而進行相應(yīng)的變化 導航條為訪問者瀏覽不同網(wǎng)頁提供了一條捷徑 編輯導航條 上機實戰(zhàn) 本課上機實戰(zhàn)制作過程可分為左側(cè)導航圖像超級鏈接的創(chuàng)建 主要內(nèi)容區(qū)文本和圖像超級鏈接的創(chuàng)建 公司Logo下方的圖像熱點超級鏈接的創(chuàng)建及底部版權(quán)信息區(qū)電子郵件超級鏈接的創(chuàng)建4部分進行 課堂講解上機實戰(zhàn) 第7課在網(wǎng)頁中應(yīng)用框架 課堂講解 認識框架和框架集框架和框架集的創(chuàng)建框架和框架集的選擇和刪除框架和框架集的保存框架和框架集的屬性設(shè)置處理不能顯示框架的瀏覽器框架的鏈接 認識框架和框架集 框架是將一個頁面劃分成不同的文檔區(qū) 每個文檔區(qū)顯示獨立的內(nèi)容 其效果是在瀏覽網(wǎng)頁時 網(wǎng)頁中一部分區(qū)域 如公司Logo 導航條 內(nèi)容不改變 而其他區(qū)域內(nèi)容在不斷發(fā)生改變 框架集是HTML文件 它定義一組框架的布局和屬性 包括框架的數(shù)目 大小 位置以及在框架中初始顯示頁面的地址 框架集文件本身不包含要在瀏覽器中顯示的網(wǎng)頁內(nèi)容 對不能顯示框架的瀏覽器進行的處理除外 即部分 框架集文件只是向瀏覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些網(wǎng)頁的有關(guān)信息 框架和框架集的創(chuàng)建 在 插入 欄插入預(yù)定義的框架集創(chuàng)建預(yù)定義框架集手動設(shè)計框架 在 插入 欄插入預(yù)定義的框架集 在Dreamweaver8中預(yù)定義了一些框架集樣式 需要使用時直接插入即可 創(chuàng)建預(yù)定義框架集 手動設(shè)計框架 框架和框架集的選擇和刪除 認識 框架 面板選擇框架與框架集刪除框架 認識 框架 面板 框架 面板中顯示所創(chuàng)建的框架結(jié)構(gòu) 并在不同的框架區(qū)域中顯示框架的名稱 當在框架網(wǎng)頁中新建 刪除框架 或修改框架的尺寸 名稱等時 框架 面板中的示意圖會跟隨變化 選擇框架與框架集 在編輯窗口中選擇在 框架 面板中選擇 在編輯窗口中選擇 在編輯窗口中選擇框架的方法很簡單 按住 Alt 鍵 在要選擇的框架內(nèi)單擊鼠標左鍵即可 被選取的框架邊框呈虛線顯示 選擇框架集時 單擊框架邊框即可 選取的所有框架邊框呈虛線 在 框架 面板中選擇 在 框架 面板中單擊框架區(qū)域中的任意位置即可選擇框架 選中的框架以粗黑框顯示 在 框架 面板中單擊框架邊框即可選擇框架集 如果要選擇整個框架集 只需單擊框架最外面的邊框即可 刪除框架 如果窗口中有不需要的框架 可將其刪除 用鼠標將要刪除框架的邊框拖到父框架邊框上或拖離頁面即可 框架和框架集的保存 保存框架與框架集之后才能在瀏覽器中瀏覽用框架布局的網(wǎng)頁 每個框架包含一個網(wǎng)頁 一個框架集則包含多個網(wǎng)頁 在保存時應(yīng)保存所有的框架與框架集 保存框架保存框架集保存框架集中的所有網(wǎng)頁 保存框架 將插入點定位到要保存的框架中 選擇 文件 保存框架 菜單命令 在打開的 另存為 對話框中像保存其他網(wǎng)頁一樣指定保存路徑和文件名 然后單擊 保存 按鈕即可 保存框架集 選中要保存的框架集 選擇 文件 保存框架頁 菜單命令 打開 另存為 對話框 在 保存在 下拉列表框中選擇框架集的保存路徑 在 文件名 文本框中為框架集命名 單擊 保存 按鈕即可保存框架集 保存框架集中的所有網(wǎng)頁 框架和框架集的屬性設(shè)置 框架集的屬性設(shè)置框架集文檔標題的設(shè)置框架的屬性設(shè)置 框架集的屬性設(shè)置 使用框架集屬性面板可以查看和設(shè)置大多數(shù)框架集屬性 框架集文檔標題的設(shè)置 當訪問者在瀏覽器中查看該框架集時 標題將顯示在瀏覽器的標題欄中 框架的屬性設(shè)置 處理不能顯示框架的瀏覽器 由于在低版本的瀏覽器中不能正確顯示使用了框架的網(wǎng)頁和框架中的內(nèi)容 因此在Dreamweaver8中允許指定在不支持框架的基于文本的瀏覽器和較舊的圖形瀏覽器中顯示內(nèi)容 此類內(nèi)容存儲在框架集文件中 用標簽括起來 當不支持框架的瀏覽器加載該框架集文件時 瀏覽器只顯示用標簽括起來的內(nèi)容 框架的鏈接 在使用了框架技術(shù)文檔中的鏈接與一般文檔中的鏈接不同 增加了與框架有關(guān)的鏈接目標 可以在一個框架內(nèi)使用鏈接改變另一個框架的內(nèi)容 上機實戰(zhàn) 本課上機實戰(zhàn)主要練習個人網(wǎng)頁的頁面制作 在練習過程中 主要用到框架的創(chuàng)建 框架和框架集的屬性設(shè)置 框架和框架集的保存 不能顯示框架的處理等知識 本頁面分為上中下3個框架來制作 在制作之前應(yīng)先制作好各框架中要顯示的網(wǎng)頁 課堂講解上機實戰(zhàn) 第8課在網(wǎng)頁中應(yīng)用層 課堂講解 創(chuàng)建層認識 層 面板選擇 移動和對齊層層大小和屬性設(shè)置層的顯示和隱藏層名的變更層的堆疊和刪除層與表格的相互轉(zhuǎn)換 創(chuàng)建層 層的首選參數(shù)設(shè)置層的建立層的嵌套 層的首選參數(shù)設(shè)置 在新建層之前 通過 首選參數(shù) 對話框中的 層 選項來設(shè)置層的默認屬性 層的建立 將插入點放置在 文檔 編輯窗口中 然后選擇 插入 布局對象 層 菜單命令將自動在插入點插入一個層 在 插入欄 的 布局 插入欄中單擊 繪制層 按鈕 拖動鼠標繪制一個層 在 插入欄 的 布局 插入欄中單擊 繪制層 按鈕 在文檔編輯窗口中單擊鼠標可繪制一個層 在 插入欄 的 布局 插入欄中單擊 繪制層 按鈕 按住 Ctrl 鍵并拖動即可連續(xù)繪制多個層 層的嵌套 層與表格相似 可進行嵌套 在某層內(nèi)新創(chuàng)建的層稱為嵌套層或子層 嵌套層外部的層稱為父層 子層可浮動于文本編輯窗口的任何位置 子層的大小也可以大于父層 可根據(jù)實際需要嵌套多個層 認識 層 面板 層 面板是對層進行管理的場所 可以方便地查看層的結(jié)構(gòu) 要顯示或隱藏 層 面板 可選擇 窗口 層 菜單命令或按 F2 鍵 選擇 移動和對齊層 選擇層選擇單個層選擇多個層移動層對齊層 選擇單個層 在文檔編輯區(qū)中單擊層邊框 在層中單擊鼠標左鍵 再單擊該層的選擇柄 在 層 面板中單擊要選擇的層的名稱 按住 Ctrl Shift 鍵并在層中單擊即可選擇層 選擇多個層 按住 Shift 鍵 在需要選擇的多個層中單擊 同時 層 面板中選擇的層以反白顯示 按住 Shift 鍵 在 層 面板中單擊要選擇的多個層的名稱 移動層 在網(wǎng)頁制作中往往需要精確定位層的位置 這就需要對創(chuàng)建的層進行移動 對齊層 在網(wǎng)頁制作中常常需要將某些層按照一定的規(guī)定對齊 在進行層的對齊操作時 嵌套層中所有子層并不參與層的對齊操作 它們只隨父層的移動而移動 并始終與父層保持相對的固定位置 層大小和屬性設(shè)置 層大小的設(shè)置設(shè)置單個層的大小設(shè)置多個層的大小層屬性的設(shè)置設(shè)置單個層的屬性設(shè)置多個層的屬性 設(shè)置單個層的大小 在文檔編輯區(qū)選擇一個層 在出現(xiàn)的調(diào)整柄上按住鼠標左鍵不放并拖動 當調(diào)整到適當?shù)拇笮r釋放鼠標即可 在文檔編輯區(qū)選擇一個層 按住 Ctrl 鍵的同時再按鍵盤上的方向鍵即可按一次1個像素的步幅來調(diào)整層大小 在文檔編輯區(qū)選擇一個層 按住 Shift Ctrl 鍵的同時再按鍵盤上的方向鍵即可按一次10個像素的步幅來調(diào)整層大小 在文檔編輯區(qū)選擇一個層 以像素為單位在屬性面板中輸入寬度和高度的值 設(shè)置多個層的大小 在文檔編輯區(qū)選擇兩個或多個層 選擇 修改