網(wǎng)頁設(shè)計(jì)cs課件(1)

1、內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts01教教 師：趙辰龍師：趙辰龍網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)Dreamweaver CS5Dreamweaver CS5內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts02第第1章章 基礎(chǔ)操作基礎(chǔ)操作Dreamweaver CS5是業(yè)界使用最多的Web創(chuàng)作工具。首先我們要了解它的一些概念。網(wǎng)站、網(wǎng)頁、首頁、主頁的概念。網(wǎng)站是指網(wǎng)頁的集合網(wǎng)頁是指網(wǎng)站的其中一個(gè)頁面首頁是指網(wǎng)站的第一個(gè)頁面主頁一般是指個(gè)人站

2、點(diǎn)根據(jù)所采用的技術(shù)不同可以把網(wǎng)站分為兩類靜態(tài)站點(diǎn)：靜態(tài)站點(diǎn)：HTML動(dòng)態(tài)站點(diǎn)：HTML+ASP、ASP 、 NET 、 PHP 、 JSP等內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts03工作流程工作流程1、規(guī)劃和設(shè)置站點(diǎn) 確定將在哪里發(fā)布文件，檢查站點(diǎn)要求、訪問者情況以及站點(diǎn)目標(biāo)。此外，還應(yīng)考慮諸如用戶訪問以及瀏覽器、插件和下載限制等技術(shù)要求。在組織好信息并確定結(jié)構(gòu)后您就可以開始創(chuàng)建站點(diǎn)。2、組織和管理站點(diǎn)文件在“文件”面板中，您可以方便地添加、刪除和重命名文件及文件夾，以便根據(jù)需要更組織結(jié)構(gòu)。在文件面板中還

3、有許多工具，可使用它們管理站點(diǎn)，向從遠(yuǎn)程服務(wù)器傳輸文件，設(shè)置存回取出過程來防止文件被覆蓋，以及同步本地和遠(yuǎn)程站點(diǎn)上的文件。3、設(shè)計(jì)網(wǎng)頁布局選擇您要使用的布局方法，或綜臺(tái)使用Dre州硎“布局選項(xiàng)創(chuàng)建站點(diǎn)的外觀。您可以使用Dreamweaver AP元素css定位樣式或預(yù)先設(shè)計(jì)的css布局來創(chuàng)建布局。利用表格工具，您可以通過繪制并重新安排頁面結(jié)構(gòu)來快速地設(shè)計(jì)頁面。首先購買一塊空間或者一塊域名，如同微博和朋友圈內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts04工作流程工作流程4、向頁面添加內(nèi)容添加資源和設(shè)計(jì)元素，如文本

4、、圖像鼠標(biāo)經(jīng)過圖像、圖像地圖、顏色、影片、聲音、HIML鏈接、跳轉(zhuǎn)菜單等。您可以對(duì)標(biāo)題和背景等使用內(nèi)置的頁面創(chuàng)建功能，在頁面中直接鍵入，或者從其它文檔中導(dǎo)入內(nèi)容。5、通過手動(dòng)編碼創(chuàng)建頁面手動(dòng)編寫WEB頁面的代碼是創(chuàng)建頁面的另種方法。Dreamw eavef提供了易于使用的可視化編輯工具，但同時(shí)也提供了高級(jí)的編碼環(huán)境。6、針對(duì)動(dòng)態(tài)內(nèi)容設(shè)置w eb應(yīng)用程序及動(dòng)態(tài)頁7、測試和發(fā)布測試頁面是在整個(gè)開發(fā)周期中進(jìn)行的一個(gè)持續(xù)的過程。在這一工作流程的最后，在服務(wù)器上發(fā)布該站點(diǎn)，許多開發(fā)人員還會(huì)安排定期的維護(hù)，以確保站點(diǎn)保持最新并且工作正常。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal U

5、niversity Academy of Fine Arts05第第 2 章章 規(guī)規(guī) 劃劃 站站 點(diǎn)點(diǎn)1、站 點(diǎn) 規(guī) 劃 的 規(guī) 則 2、建 立 本 地 站 點(diǎn) 3、站點(diǎn)導(dǎo)入導(dǎo)出復(fù)制刪除 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts06一、站點(diǎn)規(guī)劃的規(guī)則1.一般來說，在規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)，應(yīng)該遵循以下一些規(guī)則。 (1).文檔分類保存 如果一個(gè)復(fù)雜站點(diǎn)，它有很多文件，我們必須使用分類保存是它更清晰。 (2).合理地命名文件名稱 為了方便管理，文件夾和文件的名稱最好要有具體的含義。 (3).本地站點(diǎn)與遠(yuǎn)程站點(diǎn)結(jié)構(gòu)統(tǒng)一

6、為了方便管理，在設(shè)置本地站點(diǎn)時(shí)，應(yīng)該將本地站點(diǎn)與遠(yuǎn)程站點(diǎn)的結(jié)構(gòu)設(shè)計(jì)保持一致。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts07二、建立本地站點(diǎn)二、建立本地站點(diǎn) 在建立站點(diǎn)之前，我們要知道所有的文件夾、資源和特定的文件都包含在站點(diǎn)中。因此，首先在硬盤上建立一個(gè)新文件夾作為本地根文件夾，用來存放相關(guān)文檔。如在F盤根目錄下創(chuàng)建一個(gè)名為MyWeb的文件夾，在MyWeb文件夾里再創(chuàng)建一個(gè)名為images的文件夾，用來存放網(wǎng)站中甬道的圖象文件。 (1).給站點(diǎn)起個(gè)名字，網(wǎng)址無所謂 (2).不適用任何服務(wù)器端技術(shù) (3).選擇

7、本地的副本 (4).網(wǎng)絡(luò)連接不需要 (5).完成站點(diǎn)定義 (8).定義默認(rèn)圖像文件夾 (以后的圖片均會(huì)自動(dòng)存在這里) 也可以使用高級(jí)定義站點(diǎn)，更加的方便。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts08二、導(dǎo)入和導(dǎo)出與復(fù)制刪除站點(diǎn)導(dǎo)入和導(dǎo)出與復(fù)制刪除站點(diǎn) (1).站點(diǎn)導(dǎo)入、導(dǎo)出 (2).站點(diǎn)復(fù)制、刪除 (3).注意：不要?jiǎng)h除了站點(diǎn)源副本內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts09第第 3 章章 創(chuàng)建網(wǎng)頁的基本對(duì)象創(chuàng)建網(wǎng)頁的基

8、本對(duì)象1、網(wǎng)頁的創(chuàng)建與存儲(chǔ)2、網(wǎng)頁 的 組成 元素 3、文 本 操 作內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts010一、網(wǎng)頁的創(chuàng)建和存儲(chǔ)一、網(wǎng)頁的創(chuàng)建和存儲(chǔ) 1.創(chuàng)建網(wǎng)頁 a).第一次啟動(dòng)Dreamweaver CS4的時(shí)候，會(huì)讓你選擇“編碼區(qū)”和“設(shè)計(jì)區(qū)”，這里我們選擇“設(shè)計(jì)區(qū)”。 b).啟動(dòng)界面有四個(gè)功能：1.打開最近的項(xiàng)目 2.新建 3.主要功能 4.快速入門 c).勾起“不再顯示”，那么下次打開，就不再顯示啟動(dòng)界面了。(如果要顯示，在首選項(xiàng)里有顯示歡迎畫面)2.保存頁面 編輯好的網(wǎng)頁需要保存，我們可

9、以執(zhí)行“文件-保存”，或者按下Ctrl+S組合鍵，打開“另存為”對(duì)話框，在保存的時(shí)候選擇保存的位置。也可以直接在文檔工具上訪選中需要保存的網(wǎng)頁文檔，然后單擊鼠標(biāo)右鍵，在彈出的快捷鍵菜單中選擇“保存”3.打開和關(guān)閉頁面 a).如果要打開電腦中存有的網(wǎng)頁文件，則執(zhí)行“文件-打開”命令，在彈出的對(duì)話框中選擇需要打開的文件。標(biāo)準(zhǔn)工具欄上的圖標(biāo)，也可以打開頁面。 b).單擊文檔窗口右上方的關(guān)閉網(wǎng)頁按鈕?；蛘咴谖臋n工具條上選擇你要關(guān)閉的網(wǎng)頁，或者執(zhí)行“文件關(guān)閉”。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts011二、網(wǎng)頁的

10、組成元素網(wǎng)頁主要由三部分組成：文本、圖象和超鏈接 1.文本 a).文本就是網(wǎng)頁是的文字，一般文本占用的空間很?。ㄒ粋€(gè)中文字符只占2字節(jié)）2.圖片 a).圖片會(huì)讓我們的網(wǎng)站變的生動(dòng)有趣，一般網(wǎng)站上的圖片格式有這幾種，JPG、BMP b).GIF、PNG等。一般用的比較多的是JPG、GIF兩種。 c).GIF是圖形交換格式，這種格式的特點(diǎn)就是小巧，更重要的是，它可以做為小動(dòng)畫，在網(wǎng)絡(luò)上傳播。 d).JPG圖片格式是在網(wǎng)絡(luò)上被廣泛采用的圖片格式。 e).PNG是用Macromedia公司推出的網(wǎng)頁圖片處理軟件生成的格式。 3.超級(jí)鏈接 一個(gè)網(wǎng)站由很多的網(wǎng)頁組成，而這些網(wǎng)頁之間通常是通過超級(jí)鏈接的方式

11、進(jìn)行連接的。 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts012三、文本操作文本操作包括文本的插入、特殊符號(hào)的插入、日期以及文本列表的插入等。1、插入文本 a).直接在文檔窗口中輸入文本，將光標(biāo)放置在文檔窗口中要插入文本的位置，然后直接輸入。如果需要跳段，可以按ENTER鍵。如果是換行，則是Shift+Enter. b).粘貼其他編輯器中生成的文本，首先要將光標(biāo)插入文本的位置，然后執(zhí)行“編輯-粘貼”，就能完成文本的插入。也可以直接使用標(biāo)準(zhǔn)工具欄上的“粘貼”按鈕。2、調(diào)整文本 a).如果要調(diào)整文本大小，則選定文本

12、，在屬性面板的“大小”下拉列表框中選擇合適的大小。 b).如果需要改變文本字體，則先選定文本，在屬性面板上“字體”下拉列表中選擇字體樣式。 c).如果“字體”下拉列表中沒有需要的字體，則執(zhí)行“文本-字體-編輯字體列表”進(jìn)行操作。 d).可以將字體設(shè)置為標(biāo)題字體，格式：段落，Hx。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0133、特殊字符 a).在文檔窗口中，將光標(biāo)定位在需要插入特殊字符的位置。 b).執(zhí)行“插入-HTML-特殊字符”，在子菜單選擇合適的字符命令?；蛘咴诳旖輽谥羞x擇文本，特殊字符。 c).如果

13、在下拉菜單中沒有找到需要的字符，那么可以選擇“其他字符”。4、插入日期 a).將光標(biāo)放置到要插入日期的位置。 b).執(zhí)行“插入日期”，或者在插入面板上點(diǎn)日期按鈕，便可以。5、插入文本列表 a).用鼠標(biāo)選定要插入的項(xiàng)目的文本內(nèi)容 b).切換成文本面板，然后單擊項(xiàng)目列表ul/ol內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts014第第 4 章章 插插 入入 圖圖 片片 1、插 入 圖 像 2、圖 像 占 位 符 3、交 互 式 圖 像 4、圖 像 背 景 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Norma

14、l University Academy of Fine Arts0151、插插 入入 圖圖 像像 a).在常用工具欄點(diǎn)擊圖象按鈕，插入?；蛘卟藛尾迦雸D象 b).點(diǎn)擊屬性設(shè)置圖象屬性2、插插 入入 圖圖 像像 當(dāng)用戶制作網(wǎng)頁時(shí)，在頁面某個(gè)位置需要插入一幅圖片。但一時(shí)找不到自己喜歡合適的圖片，這就需要用到Dreamweaver的占位符功能。 圖象占位符并不是在瀏覽器中顯示的最終圖象，它知識(shí)一種臨時(shí)的、替補(bǔ)的圖形。用戶不僅可以設(shè)置圖象占位符的大小和顏色，還可以為圖象占位符號(hào)提供文本標(biāo)簽。 插入圖像占位符 - 找到替換的替換掉內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal Univ

15、ersity Academy of Fine Arts0163、交互式圖像、交互式圖像 用于創(chuàng)建交互式圖象的兩幅圖象大小必須相同。否則交換的圖象再顯示時(shí)會(huì)進(jìn)行壓縮或展開以適應(yīng)原有圖象的大小，這樣容易造成圖象的失真。在網(wǎng)頁中使用交互式圖象，可是網(wǎng)頁更生動(dòng)。 插入鼠標(biāo)經(jīng)過圖像 - 選擇原始圖像和經(jīng)過圖像4、圖像背景、圖像背景 在Dreamweaver中，設(shè)置網(wǎng)頁背景有兩種方法：一種時(shí)設(shè)置背景顏色，另一種時(shí)設(shè)置背景圖象。 修改-頁面屬性 （Ctrl+J） 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts017第第 5 章

16、章 表表 格格 應(yīng)應(yīng) 用用 1. 創(chuàng)建表格2. 表格的應(yīng)用 3. 選定表格、行、列、單元格元素4. 設(shè)置表格、行列、單元格屬性5. 添加和刪除行或列6. 單元格的合并及拆分內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts018在Dreamweaver CS4中，創(chuàng)建一個(gè)表格可執(zhí)行以下操作：(1).插入-表格?；?常用里的表格圖標(biāo)(2).行數(shù)和列數(shù)文本框分別輸入表格的行數(shù)和列數(shù)(3).表格寬度(4).邊框粗細(xì)(5).單元格邊距(6).單元格間距(6).頁眉：無，左，頂部，兩者(7).標(biāo)題(8).對(duì)齊(10).摘要1.

17、 創(chuàng)建表格內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0192、表格的應(yīng)用 3、選定表格、行、列、單元格元素(1).存放文本(2).存放圖片在對(duì)表格元素進(jìn)行操作之前，必須先選定表格元素。(1).選定整行(2).選定整列(3).選定整個(gè)表格；修改-表格-選擇表格，左上右下角，點(diǎn)擊標(biāo)簽內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts020設(shè)置表格屬性(1).表格ID(2).行列：(3).寬高(4).填充(5).間距(6).對(duì)齊(7).邊

18、框(8).背景顏色(9).背景圖象(10).邊框顏色4、設(shè)置表格、行列、單元格屬性內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts021在表格的操作過程中，可以很方便地添加和刪除表格的行或列。(1).在表格添加一行 光標(biāo)放在單元格內(nèi) 修改-表格-插入行(2).在表格中添加一列 同上提示：按下組合鍵能添加一行，按下能添加一列。(3).在表格添加多行或多列 光標(biāo)放在單元格內(nèi) 表格-插入行列(4)刪除行或列 5、添加和刪除行或列內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Aca

19、demy of Fine Arts0226、單元格的合并及拆分在制作網(wǎng)頁的過程中，有時(shí)需要合并或拆分單元格。(1).單元格的合并 表格-合并單元格(2).單元格的拆分 表格-拆分單元格內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts023第第 6 章章 超超 級(jí)級(jí) 鏈鏈 接接 1. 什么是什么是URL2. 路徑路徑3. 創(chuàng)建各種超鏈接創(chuàng)建各種超鏈接內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts024 超級(jí)鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間，站

20、點(diǎn)與Web之間的鏈接關(guān)系。它可以使站點(diǎn)內(nèi)的網(wǎng)頁成為有機(jī)的整體，還能夠使不同站點(diǎn)之間建立聯(lián)系。超級(jí)鏈接由兩部分組成：鏈接載體(源端點(diǎn))和鏈接目標(biāo)（目標(biāo)端點(diǎn)）。 一個(gè)完整的主頁是由多網(wǎng)頁文檔構(gòu)成的，這些網(wǎng)頁文檔是分別獨(dú)立的，而將這些獨(dú)立的網(wǎng)頁文檔聯(lián)系起來的組帶，就是超級(jí)鏈接。超級(jí)鏈接的目標(biāo)可以是另外一個(gè)網(wǎng)頁，頁可以是同一網(wǎng)頁的不同位置。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts025 URL中文翻譯為統(tǒng)一資源定位器。URL是Internet上用來描述信息資源的字符串。一個(gè)URL分為3個(gè)部分：協(xié)議代碼，裝由所需文件

21、的計(jì)算機(jī)地址和主機(jī)資源的具體位置。 scheme:/host:post/path/filenamescheme指的是 http,ftp,file,mailto,news,gopher,telnet七種host指的是IP地址或計(jì)算機(jī)名稱post指的是服務(wù)器端口path指的是文件路徑filename指的是文件名 http:/:80/index.php1. 什么是什么是URL內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts026 創(chuàng)建超級(jí)鏈接時(shí)必須了解鏈接與被鏈接的路徑。在一個(gè)網(wǎng)站中，路徑通常由3種表達(dá)方式：絕對(duì)路徑，根

22、目錄相對(duì)路徑，文檔目錄相對(duì)路徑。絕對(duì)路徑: http:/ c:/windows/index.htm跟目錄相對(duì)路徑： /web/index.htm文檔目錄相對(duì)路徑：index.htm2、路徑、路徑內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts027 (1).網(wǎng)頁與網(wǎng)頁的連接。(2).與互鏈網(wǎng)鏈接(3).電子郵件鏈接(7).FTP鏈接(4).創(chuàng)建空鏈接(5).下載鏈接(6).錨記鏈接3、創(chuàng)建各種超鏈接、創(chuàng)建各種超鏈接內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy

23、 of Fine Arts028第第 7 章章 表表 單單1. 表單的創(chuàng)建及修改表單的創(chuàng)建及修改2. 創(chuàng)建表單對(duì)象創(chuàng)建表單對(duì)象內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts029 表單由兩個(gè)重要組成部分組成：一時(shí)描述表單的HTML源代碼；二時(shí)用于處理用戶在表單中輸入信息的服務(wù)器應(yīng)用程序客戶端腳本，如ASP，ASP.net等。本章主要向大家介紹了表單的使用，希望讀者通過對(duì)本章內(nèi)容的學(xué)習(xí)，了解表單的組成，掌握表單與表單對(duì)象的創(chuàng)立。(1).執(zhí)行 插入-表單或者表單快捷面板(2).修改表單1. 表單的創(chuàng)建及修改表單的創(chuàng)建

24、及修改內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts030 Dreamweaver表單可以包括標(biāo)準(zhǔn)表單對(duì)象。Dreamweaver中的表單對(duì)象有文本域，文本區(qū)域，輸入框，按紐，圖象域，復(fù)選框，跳轉(zhuǎn)彩單等等。在創(chuàng)建表單之前，必須創(chuàng)建表單區(qū)域，將所有的表單對(duì)象放入其中(1).文本域 插入文本域(2).插入多行文本域(3).插入密碼域(4).復(fù)選框(5).單選按紐(6).列表和菜單(7).圖象域(8).表單按紐(9).標(biāo)簽(10).字段集2、創(chuàng)建表單對(duì)象、創(chuàng)建表單對(duì)象內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia

25、Normal University Academy of Fine Arts031第第 8 章章 預(yù)預(yù) 設(shè)設(shè) 參參 數(shù)數(shù)1. 頁面設(shè)置頁面設(shè)置2. 首選項(xiàng)首選項(xiàng)3. HEAD內(nèi)容內(nèi)容內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts032為了在設(shè)計(jì)網(wǎng)頁的過程中更加的能夠隨著自己的想法創(chuàng)建，我們?cè)谠O(shè)計(jì)前期必須做頁面做一些設(shè)置。(1)執(zhí)行“修改-頁面屬性”打開頁面屬性對(duì)話框或者Ctrl+J外觀設(shè)置:頁面字體，大小，文本顏色，背景顏色，背景圖象等。鏈接設(shè)置:鏈接字體，大小，鏈接顏色，變換圖象鏈接，已訪問鏈接，活動(dòng)鏈接標(biāo)題選

26、項(xiàng)設(shè)置:標(biāo)題字體設(shè)置編碼設(shè)置:設(shè)置網(wǎng)頁的信息跟蹤圖象選項(xiàng):設(shè)置跟蹤圖象。1. 頁面設(shè)置頁面設(shè)置內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0332、首選項(xiàng)、首選項(xiàng)3、HEAD內(nèi)容內(nèi)容a).常規(guī)b).字體a).關(guān)鍵字b).作者信息c).說明信息內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts034第第 9 章章 框框 架架 集集1. 預(yù)設(shè)框架預(yù)設(shè)框架2. 自定義框架自定義框架3. 嵌入式框架嵌入式框架內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner

27、Mongolia Normal University Academy of Fine Arts035 利用框架技術(shù)可以把瀏覽器的現(xiàn)實(shí)空間分割為幾個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁，而且替換窗口中的內(nèi)容時(shí)，各個(gè)窗口之前沒有影響。Dreamweaver使用了一個(gè)點(diǎn)擊界面管理器框架。用戶可以很輕松地使用、修改整個(gè)框架結(jié)構(gòu)和每個(gè)框架的屬性的命令。 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0361、使用預(yù)設(shè)的框架集、使用預(yù)設(shè)的框架集a).插入 - HTML - 框架b).快捷面板 - 布局 - 框架2、使用自定義

28、框架、使用自定義框架a).查看 - 可視化助理 - 框架邊框3、框架的基本操作、框架的基本操作a).直接拖動(dòng)邊框即可實(shí)現(xiàn)增加框架頁面b).反之也可以刪除框架頁面c).按住Alt+Shift可以可以選擇其中一個(gè)框架頁操作內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0374、實(shí)現(xiàn)框架的內(nèi)部鏈接、實(shí)現(xiàn)框架的內(nèi)部鏈接a).給主要的框架頁起名字b).超鏈接跳轉(zhuǎn)的目標(biāo)為名字目標(biāo)5、插入嵌入式框架、插入嵌入式框架a).快捷面板 - 布局 - iframe內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal Uni

29、versity Academy of Fine Arts038第第 10 章章 模模 板板 與與 庫庫1. 創(chuàng)建自定義模版創(chuàng)建自定義模版2. 創(chuàng)建模版可編輯區(qū)域創(chuàng)建模版可編輯區(qū)域3. 編輯和更新模版編輯和更新模版4. 庫項(xiàng)目庫項(xiàng)目 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts039 用戶在制作網(wǎng)頁的時(shí)候，一些網(wǎng)頁元素通常會(huì)被多個(gè)頁面加以使用，如果每次都重新制作這些相同的部分，會(huì)浪費(fèi)很多的時(shí)間，而且在后期的維護(hù)和修改時(shí)也會(huì)非常的費(fèi)力。對(duì)于這個(gè)問題。Dreamweaver已經(jīng)有了自己的解決方案。用戶可以通過模版和庫

30、就能輕松地解決這個(gè)問題，從而可以減輕重復(fù)的工作，提高網(wǎng)頁的制作效率。 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0401、創(chuàng)建自定義模版、創(chuàng)建自定義模版2、創(chuàng)建模版可編輯區(qū)域、創(chuàng)建模版可編輯區(qū)域a)空模版 HTML模版 無b)將文檔另存為模版 c)使用資源面板創(chuàng)建新模板a)插入可編輯區(qū)域 插入 模版對(duì)象 可編輯區(qū)域b)常用 模版 可編輯區(qū)域c)右擊 新建可編輯區(qū)域d)右擊 刪除模版標(biāo)記內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Art

31、s0413、編輯和更新模版、編輯和更新模版4、庫項(xiàng)目、庫項(xiàng)目a)編輯后會(huì)自動(dòng)更新各個(gè)基于模版的網(wǎng)頁編輯后會(huì)自動(dòng)更新各個(gè)基于模版的網(wǎng)頁a)創(chuàng)建庫項(xiàng)目創(chuàng)建庫項(xiàng)目b)分離庫項(xiàng)目分離庫項(xiàng)目內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts042第第 11 章章 層層 疊疊 樣樣 式式 表表1. 創(chuàng)建層疊樣式表創(chuàng)建層疊樣式表2. 樣式表的規(guī)則樣式表的規(guī)則3. 樣式表常用標(biāo)簽樣式表常用標(biāo)簽4. CSS樣式樣式內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine A

32、rts043 CSS技術(shù)在網(wǎng)頁制作中是必不可少的部分。采用CSS技術(shù)可以有效地對(duì)頁面布局、字體、顏色、背景以及一些特殊效果的實(shí)現(xiàn)進(jìn)行更加精確的控制。使用CSS技術(shù)不僅可以使網(wǎng)頁在外觀上更精美，還能夠?yàn)榫W(wǎng)頁添加許多特效。內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0441. 創(chuàng)建層疊樣式表創(chuàng)建層疊樣式表2. 樣式表的規(guī)則樣式表的規(guī)則a)創(chuàng)建一個(gè)CSS層疊樣式表b)附加鏈接到一個(gè).html文件上c)或者直接通過CSS面板添加a)標(biāo)簽型b)類型 .class c)ID型 #id內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mon

33、golia Normal University Academy of Fine Arts045a)、* (通用標(biāo)簽，即表示所有標(biāo)簽通用標(biāo)簽，即表示所有標(biāo)簽)b)、body （父標(biāo)簽，大部分標(biāo)簽繼承于此）（父標(biāo)簽，大部分標(biāo)簽繼承于此）c)、p (段落標(biāo)簽段落標(biāo)簽)d)、hr (水平線標(biāo)簽水平線標(biāo)簽)e)、table,tr,td,th (表格標(biāo)簽，行標(biāo)簽，單元格標(biāo)簽表格標(biāo)簽，行標(biāo)簽，單元格標(biāo)簽)f)、div (區(qū)塊標(biāo)簽區(qū)塊標(biāo)簽)g)、span (內(nèi)聯(lián)標(biāo)簽內(nèi)聯(lián)標(biāo)簽) 更多標(biāo)簽，請(qǐng)學(xué)習(xí)更多標(biāo)簽，請(qǐng)學(xué)習(xí)XHTML課程課程3、樣式表常用標(biāo)簽、樣式表常用標(biāo)簽內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia

34、 Normal University Academy of Fine Arts046a)、類型、類型b)、背景、背景c)、區(qū)塊、區(qū)塊d)、方塊、方塊e)、邊框、邊框f)、列表、列表g)、定位、定位h)、擴(kuò)展、擴(kuò)展 4、 CSS樣式樣式內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts047第第 12 章章 個(gè)個(gè) 人人 博博 客客1. 效果圖效果圖2. 布局圖布局圖3. 知識(shí)點(diǎn)知識(shí)點(diǎn) 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0481

35、. 效果圖效果圖內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0492、布局圖、布局圖內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0503、知識(shí)點(diǎn)、知識(shí)點(diǎn) a)、模版的運(yùn)用b)、CSS的運(yùn)用內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts051第第 13 章章 新綠環(huán)保網(wǎng)新綠環(huán)保網(wǎng)1. 效果圖效果圖2. 布局圖布局圖3. 知識(shí)點(diǎn)知識(shí)點(diǎn) 內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy of Fine Arts0521. 效果圖效果圖內(nèi)蒙古師范大學(xué)美術(shù)學(xué)院Inner Mongolia Normal University Academy