第一單元 創(chuàng)建個(gè)人站點(diǎn)之 初識(shí)Dreamweaver8(8)

1、中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室 課堂講解 上機(jī)實(shí)戰(zhàn) 第1章 初識(shí)Dreamweaver 8 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室課堂講解 什么是網(wǎng)頁和網(wǎng)站 網(wǎng)頁的分類 網(wǎng)頁中的常用術(shù)語 網(wǎng)頁設(shè)計(jì)的相關(guān)知識(shí) 認(rèn)識(shí)Dreamweaver 8 Dreamweaver 8的基本操作 Dreamweaver 8工作界面介紹 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室教學(xué)目的：1、認(rèn)識(shí)網(wǎng)頁和網(wǎng)站、網(wǎng)頁的分類、常用術(shù)語及相關(guān)知識(shí) 2、認(rèn)識(shí)Dreamweaver 8教學(xué)安排：理論4節(jié)、上機(jī)4節(jié)中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG

2、工作室第一課時(shí)第一課時(shí)理論教學(xué)中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室一、軟件簡介一、軟件簡介 Macromedia Dreamweaver8.0簡體中文版是一個(gè)可視化的網(wǎng)頁設(shè)計(jì)和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、 HTML格式控制、HTML格式化選項(xiàng)、HomeSite/BBEdit捆綁、可視化網(wǎng)頁設(shè)計(jì)、圖像編輯、全局查找替換、全FTP功能、處理Flash和 Shockwave等富媒體格式和動(dòng)態(tài)HTML、基于團(tuán)隊(duì)的Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室Macromedia

3、 Dreamweaver8.0簡體中文版新增簡體中文版新增更新：更新：放大功能 導(dǎo)引線代碼折疊支持WebDAV編碼工具條文件比較功能編碼功能改進(jìn)插入Flash視頻統(tǒng)一CSS面板中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室DreamweaverCSS可視化布局樣式渲染工具條可視化操作XML數(shù)據(jù)增強(qiáng)XML編輯與驗(yàn)證增強(qiáng)動(dòng)態(tài)跨瀏覽器驗(yàn)證增強(qiáng)手機(jī)內(nèi)容創(chuàng)作能力增強(qiáng)基于CSS的設(shè)計(jì)的渲染增強(qiáng)整合的Accessibility參考更多預(yù)建的Accessibility設(shè)計(jì)與模板中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室二、什么是網(wǎng)頁和網(wǎng)站 什么是網(wǎng)頁什么是網(wǎng)站 中文Dreamwea

4、ver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室1、什么是網(wǎng)頁 網(wǎng)頁是由HTML（超級(jí)文本標(biāo)識(shí)語言）或者其他語言編寫的，通過IE瀏覽器編譯后供用戶獲取信息的頁面，它又稱為Web頁，其中可包含文字、圖像、表格、動(dòng)畫和超級(jí)鏈接等各種網(wǎng)頁元素。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室2、什么是網(wǎng)站 網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面 。門戶網(wǎng)站職能網(wǎng)站專業(yè)網(wǎng)站個(gè)人網(wǎng)站 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室3、網(wǎng)頁的分類 按所處位置分類 按表現(xiàn)形式分類 中文Dreamweave

5、r 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室按所處位置分類 按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室按表現(xiàn)形式分類 按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室第二課時(shí)第二課時(shí)理論教學(xué)中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室網(wǎng)頁中的常用術(shù)語 萬維網(wǎng)（www） 瀏覽器 統(tǒng)一資源定位符（URL） 文件傳輸協(xié)議（FTP） IP地址 域名 超級(jí)鏈接 超級(jí)文本標(biāo)記語言（HTML） 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室萬維網(wǎng)（www） 萬維網(wǎng)（w

6、ww）是World Wide Web的中文簡稱，也稱為3W網(wǎng)，它的本質(zhì)是一種基于超級(jí)文本技術(shù)的交互式信息瀏覽檢索工具，是Internet提供的應(yīng)用最普及、功能最豐富、使用方法最簡便的信息服務(wù)，用戶可通過它在Internet上瀏覽、編輯、傳遞超文本格式的文件（即.html格式文件）。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室瀏覽器 瀏覽器是用于閱讀網(wǎng)頁中信息的一種軟件工具，就像使用電腦必須有操作系統(tǒng)一樣。 Internet Explorer（IE） Netscape Navigator（NE） 騰訊TT瀏覽器 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室統(tǒng)一資源定

7、位符（URL） URL（Uniform Resource Locator）主要是用來指定協(xié)議（如HTTP或FTP）以及對(duì)象、文檔、萬維網(wǎng)網(wǎng)頁或其他目標(biāo)在Internet的位置和存取方式。 通信協(xié)議 主機(jī)名所要訪問的網(wǎng)頁路徑及名稱 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室文件傳輸協(xié)議（FTP） FTP（File Transfer Protocol）是一種廣泛使用的文件傳輸協(xié)議，是快速、高效和可靠的信息傳輸方法。 FTP是基于客戶/服務(wù)器模型的TCP/IP的應(yīng)用，所以只要在客戶端和服務(wù)器之間建立了TCP/IP連接，無論兩臺(tái)電腦的位置遠(yuǎn)近、連接方式的異同以及使用的操作系統(tǒng)的異同，都

8、能通過FTP協(xié)議進(jìn)行文件的傳輸。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室IP地址 IP地址用來標(biāo)識(shí)連接到Internet上電腦的指定編號(hào)，每一個(gè)IP地址對(duì)應(yīng)一臺(tái)電腦，這與用電話號(hào)碼標(biāo)識(shí)電話網(wǎng)絡(luò)中的電話相同。 電腦識(shí)別的IP地址由32位二進(jìn)制數(shù)值組成，電腦上以十進(jìn)制數(shù)值來顯示，一組數(shù)值分為4部分，每一部分均不能大于255，中間用“.”分隔，如9。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室域名 域名就是常說的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)址、網(wǎng)易的網(wǎng)址等就是一個(gè)域名，域名由漢語拼音或英文字符加上數(shù)字表示，在訪問網(wǎng)絡(luò)時(shí)，域名將通過域名服務(wù)器

9、轉(zhuǎn)換成IP地址，這種轉(zhuǎn)換是在后臺(tái)完成的。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室超級(jí)鏈接 超級(jí)鏈接是網(wǎng)頁中最常用的元素之一，網(wǎng)頁就是通過無數(shù)的超級(jí)鏈接才能組成一個(gè)網(wǎng)站。 超級(jí)鏈接可以鏈接到網(wǎng)站內(nèi)部頁面、對(duì)象，也可以鏈接到其他網(wǎng)站，大大方便了用戶在各個(gè)頁面對(duì)象之間實(shí)現(xiàn)跳轉(zhuǎn)。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室超級(jí)文本標(biāo)記語言（HTML） HTML（Hyper Text Markup Language）是一種用戶與電腦之間進(jìn)行交流的文本技術(shù)，各種網(wǎng)頁均是用HTML語言來描述的，用HTML語言編寫的網(wǎng)頁文件的擴(kuò)展名一般為“*.htm”或“*.html”。中文

10、Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室第三課時(shí)第三課時(shí)理論教學(xué)中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室網(wǎng)頁設(shè)計(jì)的相關(guān)知識(shí) 設(shè)計(jì)網(wǎng)頁的原則 網(wǎng)頁設(shè)計(jì)的一般步驟 網(wǎng)頁制作的常用工具 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室設(shè)計(jì)網(wǎng)頁的原則整體規(guī)劃 鮮明的主題善用圖像醒目的導(dǎo)航及時(shí)更新易記的網(wǎng)站名稱通用網(wǎng)頁動(dòng)畫適量 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室網(wǎng)頁設(shè)計(jì)的一般步驟 規(guī)劃網(wǎng)站收集整理資源配置站點(diǎn)創(chuàng)建頁面測試站點(diǎn)發(fā)布站點(diǎn) 維護(hù)、更新站點(diǎn)中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室網(wǎng)頁制作的常用工具 網(wǎng)頁設(shè)計(jì)軟件

11、Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計(jì)軟件。圖像處理軟件 制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設(shè)計(jì)人員選擇的是Fireworks或Photoshop。動(dòng)畫制作軟件 網(wǎng)頁動(dòng)畫制作中最常用的軟件非Flash莫屬。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室第四課時(shí)第四課時(shí)理論教學(xué)中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室認(rèn)識(shí)Dreamweaver 8 使用Dreamweaver 8制作網(wǎng)頁之前，需先將該軟件安裝到電腦中，其方法與安裝其他軟件相似，用戶可根據(jù)提示操作。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室Dreamweaver 8的基本

12、操作 啟動(dòng)Dreamweaver 8 新建空白HTML網(wǎng)頁 保存網(wǎng)頁文檔 預(yù)覽網(wǎng)頁效果 退出Dreamweaver 8 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室啟動(dòng)Dreamweaver 8 選擇開始所有程序MacromediaMacromedia Dreamweaver 8菜單命令 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室新建空白HTML網(wǎng)頁 選擇文件 新建菜單命令，打開“新建文檔”對(duì)話框，在“分類”欄中選擇“基本頁”選項(xiàng)，在“基本頁”欄中選擇“HTML”選項(xiàng)，單擊“創(chuàng)建”按鈕。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室保存網(wǎng)頁文檔 選擇

13、文件保存菜單命令，打開的“另存為”對(duì)話框，在“保存在”下拉列表框中選擇文件的保存路徑，在“文件名”文本框中輸入保存的文件名，單擊“保存”按鈕。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室預(yù)覽網(wǎng)頁效果 選擇文件 在瀏覽器中預(yù)覽IExplore 6.0菜單命令在IE瀏覽器中預(yù)覽網(wǎng)頁文檔的效果。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室退出Dreamweaver 8 單擊Dreamweaver 8窗口右上角的“關(guān)閉”按鈕。單擊Dreamweaver 8窗口左上角的圖標(biāo)，在彈出的下拉菜單中選擇“關(guān)閉”命令。在Dreamweaver 8窗口中選擇文件退出菜單命令。在當(dāng)前

14、窗口為Dreamweaver 8工作界面時(shí)，按【Alt+F4】鍵退出Dreamweaver 8。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室Dreamweaver 8 工作界面介紹 首先，啟動(dòng)Dreamweaver 8軟件，創(chuàng)建新項(xiàng)目，這時(shí)Dreamweaver 8的工作界面就展現(xiàn)在面前了。Dreamweaver 8的工作界面主要包括標(biāo)題欄、菜單欄、插入欄、文檔工具欄、文檔窗口、狀態(tài)欄、屬性面板、面板組和文件面板組成的，如下圖所示。 中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室標(biāo)題欄標(biāo)題欄 左邊顯示應(yīng)用程序和

15、正在編輯的文檔名稱，右邊為最小化按鈕、最大化按鈕和關(guān)閉按鈕，如下圖所示。菜單欄菜單欄 菜單欄包括10個(gè)菜單，如下圖所示。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室插入欄插入欄插入欄包含用于將各種類型的對(duì)象（如圖像、表格和層）插入到文檔中的按鈕，如下圖所示。文檔工具欄文檔工具欄 包含按鈕和彈出式菜單，提供代碼視圖、拆分視圖和設(shè)計(jì)視圖，還有驗(yàn)證標(biāo)記、文件管理、在瀏覽器中預(yù)覽/調(diào)試、刷新設(shè)計(jì)視圖、視圖選項(xiàng)和可視化助理這些按鈕，如下圖所示。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室文檔窗口文檔窗口顯示當(dāng)前創(chuàng)建和編輯的文檔，如下圖所示。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室狀態(tài)欄狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息，如下圖所示。 屬性面板屬性面板用于查看和更改所選對(duì)象或文本的各種屬性。對(duì)象不同，屬性面板的包含信息也不同。如下圖所示。中文Dreamweaver 8網(wǎng)頁設(shè)計(jì)培訓(xùn)教程LYG工作室面板組面板組面板組是分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合。單擊所需要的圖標(biāo) ，可展開該面板。面板展開后，原來的圖標(biāo)變?yōu)?，單擊該圖標(biāo)，則收回該面板，并只顯示浮動(dòng)面板的名稱，如下圖所