第七章網(wǎng)頁制作電子教案

第七章網(wǎng)頁制作電子教案（計劃8學時）第一次課（2學時）課題：§7.1了解網(wǎng)頁設計與Dreamweaver8課型：理論課、實踐課、任務驅(qū)動多媒體教學教學目的與要求了解：1、了解Dreamweaver8的功能及特點。2、了解網(wǎng)頁、網(wǎng)站和網(wǎng)頁的組成元素。2、了解工作窗口的組成部分；掌握：1、熟練掌握Dreamweaver8軟件的啟動和退出,。2、熟練掌握Dreamweaver8菜單的使用方法，重點與難點重點：1、網(wǎng)頁、網(wǎng)站和網(wǎng)頁的組成元素，Dreamweaver8窗口及菜單的使用方法。難點：1、Dreamweaver8窗口及菜單的使用方法。網(wǎng)頁的設計理念。教學進程組織教學復習提問引入新課講授新課：7.1了解網(wǎng)頁設計與Dreamweaver87.1.1網(wǎng)頁是網(wǎng)站的基本信息單位，通常是由若干網(wǎng)頁組成。網(wǎng)站中主頁是訪問一個網(wǎng)站首先看到的網(wǎng)頁也是所有頁面的鏈接中心。網(wǎng)頁中包含的元素很多，主要包含以下元素：1、文本文本是最重要的信息載體與交流工具，是網(wǎng)頁發(fā)布信息所用的主要形式，利用文本可以準確表達出網(wǎng)頁想要傳達的信息。2、圖形它可以是普通的繪制圖形，可以是各種圖像，還可以是動畫。圖形不僅能提供更多的信息，還可以美化和裝飾頁面。在網(wǎng)頁上最常用的圖像格式有GIF、JPEG等格式。3、超級鏈接是從一個網(wǎng)頁指向另一個目的端的鏈接，這個目的端通常是另一個網(wǎng)頁，也可以是一幅圖片、一個電子郵件地址、一個文件、一個程序或者相同網(wǎng)頁的不同位置。建立超級鏈接的對象可以是文本、圖像、按鈕或熱點標記。瀏覽時鼠標指向超級鏈接時就會變成伸出食指的右手形狀，單擊超級鏈接后即可打開目標對象。超鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一。4、表格 表格不僅用來顯示相關數(shù)據(jù)，而且用來控制網(wǎng)頁中信息的布局方式?？刂茍D形、文字出現(xiàn)的位置，使之規(guī)范整齊、均衡協(xié)調(diào)。5、表單6、聲音 聲音是多媒體網(wǎng)頁的一個重要組成部分。網(wǎng)頁的聲音文件格式很多，常用的有MIDI、WAV、MP3和AIF等。由于MP3是采用MP3壓縮技術的音頻文件，具有壓縮比大，占用空間小的特點，目前比較流行使用MP3音頻文件制作網(wǎng)頁背景音樂。7、動畫與視頻在網(wǎng)頁中添加動畫或視頻元素作為傳播的媒介，增加了頁面的動態(tài)效果和觀賞性。在網(wǎng)頁上可以添加的動畫文件主要是GIF動畫文件(.gif)和FLASH影片文件(.swf）兩種類型。7.1.2網(wǎng)頁的設計理念1、站點內(nèi)容要及時更新瀏覽者之所以訪問你的網(wǎng)站，大多是因為內(nèi)容來的，如果網(wǎng)站內(nèi)容太普通，不專業(yè)，而且又長時間不更新，那么訪問者就不會再有興趣訪問你的網(wǎng)站。2、網(wǎng)頁內(nèi)容便于閱讀要讓瀏覽者容易找到要找的東西，網(wǎng)頁內(nèi)容應當便于閱讀，也就是要有導航功能。一個站點并不是由許多Web主頁簡單地堆砌而成，必須要有一定的組織形式將它們有機地組織起來。3、注重色彩的搭配一個網(wǎng)站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用于網(wǎng)站的標準、標題、主菜單和主色塊，給人以整體統(tǒng)一的感覺，至于其它色彩，也可以使用，只是作為點綴和襯托，決不能喧賓奪主。4、考慮適應不同瀏覽器和分辨率應該站在瀏覽者的角度，考慮方方面面的因素。如果用不同的瀏覽器和不同的分辨率瀏覽網(wǎng)站，結(jié)果雜亂無章、毫無次序，因此在設計好主頁后，要事先將其放到各種操作系統(tǒng)、各種瀏覽器環(huán)境中去試用，以便檢測是否能夠適應不同瀏覽器及不同分辨率。5、提供交互性交互性原則，即界面設計強調(diào)交互過程。一方面是物的信息傳達，另一方面是人的接受與反饋，對任何物的信息都能動地認識與把握。Dreamweaver是Macromedia公司推出的一款大眾化的網(wǎng)頁制作軟件，它具有可視化編輯界面，用戶不必編寫復雜的HTML源代碼就可以生成跨平臺、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時也容易被業(yè)余網(wǎng)頁制作人員所掌握。7.1.3Dreamweaver8簡介Dreamweaver8是制作網(wǎng)頁的工具，用它可以生成.htm或.html文件，而IE是瀏覽網(wǎng)頁的工具，用IE只能看網(wǎng)頁，而不能改網(wǎng)頁，修改網(wǎng)頁還是需要網(wǎng)頁制作工具。1、Dreamweaver8運行環(huán)境Dreamweaver8在Windows平臺和Macintosh平臺都可使用。2、Dreamweaver8啟動與退出使用Dreamweaver8之前，應該先啟動它，其方法主要有以下幾種：擇【開始】/【所有程序】/【Macromedia】/【MacromediaDreamweaver8】命令，如圖7-1所示。●雙擊桌面上的Dreamweaver8快捷方式圖標，如圖7-2所示。●單擊快速啟動欄中的Dreamweaver8快捷方式圖標，如圖7-3所示。圖7-1圖7-1退出Dreamweaver8的操作很簡單，單擊窗口右上角的按鈕或選擇【文件】/【退出】命令即可。7.1.4Dreamweaver8工作界面起始頁在Dreamweave8中首先將顯示一個起始頁，在這個頁面中包括“打開最近項目”、“創(chuàng)建新項目”“從范例創(chuàng)建”3個方便實用的項目?？梢赃M行新建網(wǎng)頁、打開網(wǎng)頁以及查看幫助等操作，其界面如圖7-5所示。圖7-5圖7-5插入欄標簽選擇插入欄標簽選擇文檔編輯窗口屬性欄狀態(tài)欄菜單欄標簽選擇文檔編輯窗口屬性欄菜單欄插入欄標簽選擇文檔編輯窗口屬性欄菜單欄標題欄文件面板圖7-6面板組文檔工具欄Dreamweaver8的標準工作界面包括：標題欄、菜單欄、插入面板組、文檔工具欄、標準工具欄、文檔窗口、狀態(tài)欄、屬性面板和浮動面板組。1、標題欄啟動MacromediaDreamweave8后，標題欄將顯示文字MacromediaDreamweave8，新建或打開一個文檔后，在后面還會顯示該文檔所在的位置和文件名稱如圖7-7所示。圖7-7圖7-7圖7-82、菜單欄Dreamweave8的菜單共有10個，即文件、編輯、視圖、插入、修改、文本、命令、站點、窗口和幫助。其中，編輯菜單里提供了對Dreamweaver8菜單中[首選參數(shù)]的訪問，如圖7-8所示。其中各個菜單作用如下：文件：用來管理文件。例如新建，打開，保存，另存為，導入，輸出打印等。編輯：用來編輯文本。例如剪切，復制，粘貼，查找，替換和參數(shù)設置等。查看：用來切換視圖模式以及顯示、隱藏標尺、網(wǎng)格線等輔助視圖功能。插入：用來插入各種元素，例如圖片、多媒體組件，表格、框架及超級鏈接等。修改：具有對頁面元素修改的功能，例如在表格中插入表格，拆分、合并單元格等。

文本：用來對文本操作，例如設置文本格式等。命令：所有的附加命令項站點：用來創(chuàng)建和管理站點窗口：用來顯示和隱藏控制面板以及切換文檔窗口幫助：聯(lián)機幫助功能。例如按下F1鍵，打開幫助文本3、插入面板組插入面板組集成了可以在網(wǎng)頁中應用的對象。插入面板組其實就是圖像化了的插入指令，通過一個個的按鈕，可以很容易地加入圖像、聲音、多媒體動畫、表格、繪制層、框架、表單、Flash和ActiveX等網(wǎng)頁元素，單擊按鈕，在彈出的下拉菜單中可以選擇要插入的網(wǎng)頁元素的類型如圖7-9所示。4、文檔工具欄圖7-10“文檔”工具欄包含各種按鈕，它們提供各種“文檔”窗口視圖（如“設計”視圖和“代碼”視圖）的選項、各種查看選項和一些常用操作（如在瀏覽器中預覽）。圖7-105、標準工具欄“標準”工具欄包含來自“文件”和“編輯”菜單中的一般操作的按鈕：“新建”、“打開”、“保存”、“保存全部”、“剪切”、“復制”、“粘貼”、“撤銷”和“重做”。如圖7-11所示。圖7-圖7-116、文檔窗口當我們打開或創(chuàng)建一個項目，進入文檔窗口，我們可以在文檔區(qū)域中進行輸入文字、插入表格和編輯圖片等操作，它主要由項目選擇標簽、文檔工具欄、水平標尺、垂直標尺、編輯區(qū)域、狀態(tài)欄、垂直擴展按鈕和水平擴展按鈕構(gòu)成，如圖7-12所示。項目選擇標簽文檔工具欄狀態(tài)欄垂直標尺編輯區(qū)域垂直擴展按鈕水平標尺圖7-12“項目選擇標簽文檔工具欄狀態(tài)欄垂直標尺編輯區(qū)域垂直擴展按鈕水平標尺圖7-12編輯區(qū)域是用于編輯網(wǎng)頁和編寫網(wǎng)頁代碼的區(qū)域，該區(qū)域有代碼、拆分和設計3種視圖模式。設計視圖：單擊文檔工具欄中的按鈕可以將編輯區(qū)域的視圖模式切換到設計視圖模式，在該模式中可以直接對網(wǎng)頁進行編輯。代碼視圖：單擊文檔工具欄中的按鈕可以將編輯區(qū)域的視圖模式切換到代碼視圖模式，在該模式中可以編寫或修改網(wǎng)頁代碼，如圖7-13（a）所示。拆分視圖：單擊文檔工具欄中的按鈕可以將編輯區(qū)域的視圖模式切換到拆分視圖模式，在該模式下整個編輯區(qū)域被分為上下兩個部分，上邊為代碼視圖，下邊為設計視圖，如圖7-13(b)所示。這樣可以在代碼視圖和設計視圖之間進行切換，并可對照編輯。圖7-1圖7-13(a)圖7-13（b）7、狀態(tài)欄“文檔”窗口底部的狀態(tài)欄提供與你正創(chuàng)建的文檔有關的其它信息。圖7-1圖7-148、屬性面板屬性面板并不是將所有的屬性加載在面板上，而是根據(jù)我們選擇的對象來顯示對象的屬性，屬性面板的顯示內(nèi)容完全是隨當前在文檔中選擇的對象來確定的。圖7-圖7-159、標簽選擇器位于“文檔”窗口底部的狀態(tài)欄中，它顯示環(huán)繞當前選定內(nèi)容的標簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標簽可以選擇該標簽及其文檔中標簽的全部內(nèi)容，如圖7-16所示。圖7-1圖7-16圖7-17其他面板為圖7-17例如“文件”面板用于管理Dreamweaver8站點和遠程服務器上的文件和文件夾，它還可以訪問本地磁盤上的全部文件，類似于Windows資源管理器，如圖7-17所示。7.1.5Dreamweaver8幫助1、打開幫助選擇菜單“幫助”→“Dreamweaver8幫助”。搜索幫助（1）可以對Dreamweaver8幫助執(zhí)行全文搜索。在Dreamweaver8幫助中，單擊“搜索”選項卡。（2）在文本框中鍵入一個單詞或短語，然后單擊“列出主題”。（3）雙擊結(jié)果列表中的一個主題，可顯示該主題。若要搜索產(chǎn)品中的幫助(Macintosh)，請執(zhí)行以下操作：（1）在Dreamweaver8幫助中，在“提出問題”文本框中鍵入一個單詞或短語，然后按Enter。（2）雙擊結(jié)果列表中的一個主題，可顯示該主題。2、使用索引使用索引可以快速找到信息。若要使用索引(Windows)，請執(zhí)行以下操作：（1）在Dreamweaver8幫助中，單擊“索引”選項卡。（2）滾動到字母列表中的一個索引項，然后雙擊該項可顯示索引信息。提示：可以在文本框中鍵入一個關鍵字，以快速滾動到某一索引項。若要使用索引(Macintosh)，請執(zhí)行以下操作：（1）在Dreamweaver8幫助中，在目錄中單擊“索引”鏈接。（2）單擊某個字母以滾動到列表中的某一索引項。（3）單擊該項旁邊的數(shù)字，可顯示索引信息。課堂小結(jié)本節(jié)課所學知識點比較多，但應分清主次，應重點復習需掌握的內(nèi)容作業(yè)布置：1、復習今天所講的內(nèi)容，網(wǎng)頁的設計理念。2、做相關的題3、預習新課思考題：如何使用Dreamweaver8幫助第二次課（2學時）課題：§7.2站點的創(chuàng)建與管理課型：理論課、實踐課、任務驅(qū)動多媒體教學教學目的與要求了解：了解站點的設計流程掌握：1、掌握Dreamweaver8建立站點的方法。2、掌握Dreamweaver8管理站點的方法。重點與難點重點：Dreamweaver8站點的設計、創(chuàng)建、管理方法。難點：Dreamweaver8站點的管理方法。教學進程組織教學復習提問引入新課Dreamweaver8的窗口、菜單的組成講授新課：7.2.1站點設計1、認識站點1）本地站點本地站點是用戶工作的目錄，是存放用戶網(wǎng)頁、素材等的本地文件夾。在制作一般網(wǎng)頁時只需建立本地站點即可。（2）遠程站點若需要不連接Internet就能對所建的站點進行測試，可以在本地電腦上創(chuàng)建遠程站點模擬真實的Web服務器環(huán)境進行測試。（3）測試站點測試站點主要是對動態(tài)頁面進行測試時使用，是Dreamweaver8處理動態(tài)頁面的文件夾。Dreamweaver8使用此文件夾生成動態(tài)內(nèi)容并在工作時連接到數(shù)據(jù)庫。2、規(guī)劃站點結(jié)構(gòu)站點是管理網(wǎng)頁與素材的場所。規(guī)劃站點結(jié)構(gòu)是指利用不同的文件夾將不同的網(wǎng)頁內(nèi)容分門別類地保存，合理地組織站點結(jié)構(gòu)，可提高工作效率。應該事先在本地磁盤上創(chuàng)建一個文件夾作為站點的根目錄，然后在文件夾下建若干個子文件夾，形成合理的目錄結(jié)構(gòu)，將不同類型的文件分門別類地存放在不同的目錄中，在網(wǎng)站設計中所有創(chuàng)建和編輯的網(wǎng)頁都應當保存在該文件夾中。在發(fā)布站點時，只需將此文件夾中的所有內(nèi)容上傳到Web服務器上即可。制作網(wǎng)頁所需的圖片或動畫等文件存放的位置也是規(guī)劃站點結(jié)構(gòu)時應考慮的。如果是大型站點，可在站點根目錄下創(chuàng)建一個名稱為images的文件夾，用以存放主頁中用到的圖片和動畫。3、制作導航流程做好站點的規(guī)劃后，就可以根據(jù)規(guī)劃制作一個導航流程圖，以便理清思路，制作時可直接在紙上粗略地繪出導航流程圖。如圖7-18所示是一個班級網(wǎng)站最初的導航草圖。4、繪制頁面草圖制作好導航流程圖后，接下來應確定整個站點的頁面風格，也就是設計站點的樣式和版面草圖。它可以用Photoshop、CorelDRAW和Fireworks等圖形軟件制作。7.2.2創(chuàng)建站點1、進入Dreamweaver8工作界面后，選擇【站點】/【新建站點】命令或【站點】/【管理站點】命令，彈出“管理站點”對話框。單擊按鈕，在彈出的下拉菜單中選擇【站點】命令。3、彈出站點定義對話框，在“您打算為您的站點起什么名字？”文本框中輸入站點名稱，如“班級網(wǎng)站”。4、單擊按鈕，在彈出的對話框中選中單選按鈕。5、單擊按鈕，在彈出的對話框中選擇在開發(fā)過程中如何使用文件，這里選中單選按鈕，在“您將把文件存儲在計算機上的什么位置?”文本框中輸入本地站點存儲的位置，如“f:\dw\”。6、單擊按鈕，在彈出的對話框中的“您如何連接到遠程服務器？”下拉列表框中選擇“無”選項。7、單擊按鈕，單擊按鈕完成本地站點的定義?，F(xiàn)在，你可以試著用上面介紹的方法，使用Dreamweaver8創(chuàng)建一個名為“學校網(wǎng)站”的站點。7.2.3管理站點創(chuàng)建站點完成后，還需要對站點進行管理。這是非常重要的操作，只有將站點管理得井井有條，才能順利進行后面的工作。1．編輯站點（1）選擇【站點】/【管理站點】命令，彈出“管理站點”對話框，選擇需要編輯的站點，這里選擇“班級網(wǎng)站”站點。（2）單擊按鈕，彈出“班級網(wǎng)站的站點定義為”對話框，如圖7-27所示。（3）在該對話框中即可對站點進行編輯，其操作過程和站點的創(chuàng)建方法類似，只需按提示進行操作即可。選擇“班級網(wǎng)站”的站點定義對話框中的“高級”選項卡可對站點進行一些高級設置，如設計備注、站點地圖布局等。2．刪除站點（1）選擇【站點】/【管理站點】命令，彈出如圖7-29(a)所示的“管理站點”對話框，在左側(cè)列表框中選擇要刪除的站點后單擊按鈕。（2）彈出一個警告對話框，提示執(zhí)行本操作后將不能撤銷，如圖7-29(b)所示。單擊按鈕返回“管理站點”對話框，可以看見站點已被刪除，如圖7-29(c)所示。（3）單擊按鈕即可刪除所選的站點。3．管理站點中的文件和文件夾（1）添加文件或文件夾通過“文件”面板可以直接在站點中添加文件或文件夾，如要在站點“班級網(wǎng)站”中添加一個名為images的新文件夾，其具體操作如下：a、單擊“文件”面板左側(cè)的圖標顯示該浮動面板的內(nèi)容。b、在根目錄圖標上單擊鼠標右鍵，在彈出的快捷菜單中選擇【新建文件夾】命令，如圖7-30(a)所示。c、Dreamweaver8將自動在根目錄下創(chuàng)建一個名為untitled的文件夾，如圖7-30(b)所示。d、新建的文件夾名處于改寫狀態(tài)，讀者可根據(jù)需要輸入文件夾名，這里將文件夾命名為images，然后按Enter鍵確認，如圖7-30(c)所示。（2）刪除文件或文件夾如果某個站點下不需要一些文件或文件夾，可以將其刪除。刪除文件或文件夾的方法是：選擇需刪除的文件或文件夾并單擊鼠標右鍵，在彈出的快捷菜單中選擇【編輯】/【刪除】命令，或直接按Del鍵，在彈出的確認對話框中單擊按鈕即可，（3）重命名文件或文件夾為了使文件名或文件夾名更加直觀，常常需要為文件或文件夾重命名，選擇需重命名的文件或文件夾并單擊鼠標右鍵，在彈出的快捷菜單中選擇【編輯】/【重命名】命令如圖7-32所示，使文件或文件夾名進入可改寫狀態(tài)，然后輸入新的名稱，按Enter鍵確認名稱即可。（4）編輯文件如果需要對站點中的文件進行編輯，除了可以使用第2章介紹的打開文件的方法外，還可以直接在“文件”面板中雙擊需要編輯的文件，打開該文件并進入編輯窗口進行編輯。例：在D盤上建立自己姓名為名的文件夾，把這個文件夾定義為站點，站點名的“我的個人網(wǎng)站”操作步驟：a、在D盤上建立文件夾b、在Dreamweaver8中，選擇菜單“站點-新建站點”，可以按向?qū)б徊揭徊讲僮?，也可以直接選“高級”選項卡設置c、在“本地信息”中，填入“站點名稱”，把“本地根文件夾”指定為該目錄4、如何把一個已有目錄定義為一個站點例：首先單擊下載網(wǎng)站，把網(wǎng)站包下載到D盤，并解壓縮，在D盤上會自動生成一個文件夾，按上面所講的步驟，把該目錄定義為一個站點，站點名為”公司網(wǎng)站”5、使用站點管理器例：以學校結(jié)構(gòu)為例，學生自己創(chuàng)建學校網(wǎng)站站點。課堂小結(jié)教師結(jié)合學生完成實例的情況，對本節(jié)課的教學過程進行小結(jié)，指出學生在練習中存在的問題。作業(yè)布置：1、復習今天所講的內(nèi)容，尤其是站點的創(chuàng)建與管理。2、做選擇題第2—4題。3、預習新課思考題：站點地圖的操作方法。第三次課（2學時）課題：§7.3網(wǎng)頁的基本操作課型：理論課、實踐課、任務驅(qū)動多媒體教學教學目的與要求了解：網(wǎng)頁的組成掌握：1、掌握創(chuàng)建網(wǎng)頁的操作方法。2、掌握設置網(wǎng)頁屬性的方法。3、掌握網(wǎng)頁中添加文本和各種符號的方法。重點與難點重點：創(chuàng)建網(wǎng)頁的操作方法，網(wǎng)頁的屬性設置，網(wǎng)頁中添加文本和各種符號的方法。難點：網(wǎng)頁的屬性設置教學進程組織教學復習提問引入新課復習上節(jié)課所學內(nèi)容，為下面要做的實訓做好準備，指出在操作中應注意的問題。7.3.1創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁有如下幾種方法：1、啟動Dreamweaver8的時創(chuàng)建網(wǎng)頁，選擇“創(chuàng)建項目”中的HTML，就可以創(chuàng)建一個新的網(wǎng)頁，如圖7-33所示。圖7-圖7-332、在【文件】菜單中選擇“新建”命令。在彈出的“新建文檔”對話框中“常規(guī)”選項中，選擇“基本頁”，在“基本頁”區(qū)域下選擇“HTML選項”，然后單擊“確定”，即可創(chuàng)建一個新的網(wǎng)頁。4、在站點窗口直接創(chuàng)建網(wǎng)頁。在“文件”面板中打開本地站點，然后單擊右鍵，在彈出的快捷菜單中，選擇“新建文件”命令，即可以創(chuàng)建一個新的網(wǎng)頁。7.3.2設置網(wǎng)頁屬性1．設置網(wǎng)頁外觀在“分類”列表框中選擇“外觀”選項，對話框右側(cè)將顯示“外觀”選項的相應參數(shù)設置，如圖7-36所示。其中各參數(shù)含義如下：●“頁面字體”下拉列表框：用于設置網(wǎng)頁中文字所使用的字體，單擊右側(cè)的和按鈕可設置文本為加粗和斜體格式?！瘛按笮　蔽谋究颍河糜谠O置網(wǎng)頁中文字的大小?！瘛拔谋绢伾蔽谋究颍河糜谠O置網(wǎng)頁中文字的顏色，可以單擊按鈕，在彈出的顏色列表中選擇需要的顏色或直接在后面的文本框中輸入顏色的值?！瘛氨尘邦伾蔽谋究颍河糜谠O置網(wǎng)頁中的背景顏色，可以單擊按鈕，在彈出的顏色列表中選擇需要的顏色或直接在后面的文本框中輸入顏色的值?！瘛氨尘皥D像”文本框：用于設置網(wǎng)頁中的背景圖像，在該文本框中輸入背景圖片的路徑，也可單擊按鈕指定背景圖片的路徑?！瘛爸貜汀毕吕斜砜颍河糜谠O置背景圖像的重復方式?！瘛白筮吘唷蔽谋究颍涸谠撐谋究蛑性O置網(wǎng)頁內(nèi)容與瀏覽器左邊界的距離?！瘛坝疫吘唷蔽谋究颍涸谠撐谋究蛑性O置網(wǎng)頁內(nèi)容與瀏覽器右邊界的距離?！瘛吧线吘唷蔽谋究颍涸谠撐谋究蛑性O置網(wǎng)頁內(nèi)容與瀏覽器上邊界的距離?！瘛跋逻吘唷蔽谋究颍涸谠撐谋究蛑性O置網(wǎng)頁內(nèi)容與瀏覽器下邊界的距離。圖7-圖7-36圖7-圖7-372．設置超級鏈接樣式在“分類”列表框中選擇“鏈接”選項，右側(cè)將顯示鏈接的相應參數(shù)設置選項，如圖7-37所示，其中各參數(shù)的含義如下：●“鏈接字體”下拉列表框：用于設置網(wǎng)頁中超級鏈接的字體，單擊右側(cè)的和按鈕可設置超級鏈接的字體為加粗和斜體格式?！瘛按笮　毕吕斜砜颍涸谠撐谋究蛑性O置超級鏈接字體的大小?！瘛版溄宇伾蔽谋究颍涸O置超級鏈接的基本顏色?！瘛白儞Q圖像鏈接”文本框：設置鼠標指針移動到超級鏈接上時，超級鏈接的顏色?！瘛耙言L問鏈接”文本框：設置訪問后的超級鏈接顏色?！瘛盎顒渔溄印蔽谋究颍涸O置正在訪問的超級鏈接顏色?！瘛跋聞澗€樣式”下拉列表框：設置超級鏈接的下劃線類型。3．設置標題樣式在“分類”列表框中選擇“標題”選項，右側(cè)將顯示“標題”的參數(shù)設置選項，如圖7-38所示，其中各參數(shù)的含義如下：●“標題字體”下拉列表框：在該下拉列表框中設置頁面標題的字體?！駡D7-38“標題1”～“標題6”圖7-38圖7-圖7-394．設置網(wǎng)頁標題和網(wǎng)頁編碼在“分類”列表框中選擇“標題/編碼”選項，右側(cè)將顯示標題/編碼的相應參數(shù)設置選項，如圖7-39所示，其中各參數(shù)的含義如下：●“標題”文本框：在該文本框中輸入網(wǎng)頁標題，該標題將出現(xiàn)在瀏覽器標題欄中?！瘛拔臋n類型”下拉列表框：選擇需要新建的網(wǎng)頁類型。●“編碼”下拉列表框：設置頁面使用的字體編碼類型。5．設置跟蹤圖像圖7-40在“分類”列表框中選擇“跟蹤圖像”圖7-40●“跟蹤圖像”文本框：指定一幅圖像作為設計網(wǎng)頁時的參考圖像。●“透明度”欄：確定跟蹤圖像的不透明度，從左到右表示從完全透明到完全不透明。7.3.3添加文本1、添加普通文本在Dreamweaver8中為網(wǎng)頁添加文本有直接輸入文本、從其他文檔中復制文本和導入文本3種方式，下面分別進行講解。（1）直接輸入文本直接輸入文本的方法較簡單，只需將光標插入點定位在需添加文本的位置，打開所需的輸入法直接輸入文本即可。如圖7-41所示為正在輸入的文本。（2）從其他文檔中復制文本將光標定位在需添加文本的位置，再按Ctrl＋V鍵進行粘貼即可。（3）導入文本1、選擇【文件】/【導入】/【W(wǎng)ord文檔】命令，彈出“導入Word文檔”對話框,如圖7-43所示。2、在“查找范圍”下拉列表框中選擇導入文檔的路徑，然后選擇要導入的文件，這里選擇“webtext.doc”文件，在“格式化”下拉列表框中選擇需要保留的格式，這里選擇“文本、結(jié)構(gòu)、基本格式（粗體、斜體）”選項3、單擊按鈕，系統(tǒng)自動導入“webtext.doc”文件的內(nèi)容如圖7-45所示。圖7-44圖7-圖7-44圖7-43圖7-457.3.4添加特殊字符1、將光標插入點定位到所需位置。2、單擊”插入”欄右邊的按鈕，在彈出的下拉菜單中選擇【文本】命令，如圖7-46(a)所示將“插入”欄切換為“文本”插入欄，如圖7-46(b)所示。3、單擊按鈕右側(cè)的按鈕，彈出如圖7-47所示的菜單，選擇需添加的特殊字符即可。提示：也可以選擇【插入】/【HTML】/【特殊字符】命令下的相應命令插入相應字符。7.3.5添加空格要在文檔中添加連續(xù)空格，可單擊“文本”插入欄的按鈕，然后再連續(xù)按空格鍵，也可以選擇【插入】/【HTML】/【特殊字符】/【不換行空格】命令或按Shift+Ctrl+空格鍵為網(wǎng)頁文本添加空格。7.3.6添加水平線編輯網(wǎng)頁時經(jīng)常需要使用水平線將各種對象分隔開來，如經(jīng)常會在標題和正文之間添加一條水平線，如圖7-48所示。1．添加水平線在編輯窗口中將光標定位到需要插入水平線的位置，選擇【插入】/【HTML】/【水平線】命令即可添加水平線。也可將插入欄切換到HTML插入欄，然后單擊按鈕添加水平線，如圖7-49所示。2．修改水平線屬性選擇要修改屬性的水平線，此時“屬性”面板如圖7-50所示。在“寬”和“高”文本框中可設置水平線的寬度和高度值；在“對齊”下拉列表框中設置水平線的對齊方式，如左對齊、居中對齊、右對齊等；選中復選框，水平線會有陰影效果。7.3.7添加日期有時可能會需要在網(wǎng)頁中插入當前日期或時間，在Dreamweaver8中可以很方便地進行相應操作，1、將光標定位到需要插入日期和時間的位置，選擇【插入】/【日期】命令，彈出如圖7-51所示的“插入日期”對話框。2、在其中可設置星期格式、日期格式和時間格式。3、選中復選框，這樣在每次保存文檔時都將更新插入的日期。4、單擊按鈕在網(wǎng)頁中插入日期和時間，如圖7-52所示。7.3.8設置文本格式圖7-53設置文本的格式需要在文本“屬性”面板中進行，選擇要設置的文本后，“屬性”圖7-531、設置字體格式（1）設置文本的字體1、在文本“屬性”面板的“字體”下拉列表框中選擇“編輯字體列表”選項，彈出“編輯字體列表”對話框，如圖7-54所示。2、在“可用字體”列表框中選擇需要添加的字體，單擊按鈕將其添加到左側(cè)的“選擇的字體”列表框中。如果要添加多種字體，重復操作即可；若需取消某種字體，選擇該字體后單擊按鈕即可。3、選擇一個字體樣式后單擊“字體列表”列表框左上角的按鈕可將該字體添加到“字體”下拉列表框；如果需刪除某個字體樣式，選擇該樣式后單擊按鈕即可。4、單擊按鈕關閉對話框，完成字體的添加。在“大小”下拉列框表中選擇需要的字號即可改變文本的大小?！斑x擇”下拉列表框中除了用數(shù)字表示字號外，還有“極小”、“極大”等選項，其含義如下：較大：表示在原字號的基礎上更大一點。較?。罕硎驹谠痔柕幕A上更小一點。極大：表示介于24～36之間的字號。特大：表示介于16～18之間的字號。大：表示介于14～16之間的字號。中：表示介于12～14之間的字號。小：表示介于10～12之間的字號。特?。罕硎臼褂帽葮O小大一點的字號。極?。罕硎臼褂米钚〉淖痔?。（3）設置文本顏色1、選擇需要設置顏色的文本，單擊“屬性”面板中的按鈕，彈出顏色列表，如圖7-55所示。2、此時鼠標指針變?yōu)樾螤?，單擊需要的顏色，即可將文本設置為該顏色。3、如果列表中沒有需要的顏色，可單擊按鈕，彈出“顏色”對話框，在其中選擇需要的顏色，如圖7-56所示。4、單擊按鈕關閉“顏色”對話框，此時即可將文本設置為該顏色。2、設置段落格式設置文本的段落格式包括設置段落的縮進、對齊方式和列表項等。這些都是網(wǎng)頁文檔的宏觀設置，具有布局網(wǎng)頁文檔的作用。（1）設置段落的縮進設置段落縮進包括增加段落的縮進和減少段落的縮進兩種。將光標插入點定位到需要設置格式的段落中，單擊“文本縮進”按鈕可增加該段落的縮進，單擊“文本凸出”按鈕可減少段落的縮進。（2）設置段落的對齊方式設置段落的對齊方式是網(wǎng)頁布局中必不可少的一個步驟，在Dreamweaver8中可以對文本進行居中、左對齊、右對齊或兩端對齊等操作。例如設置左對齊方法：將光標插入點定位到需要設置對齊方式的段落中，單擊“屬性”面板中的“左對齊”按鈕，將對齊方式設置為左對齊。7.3.9創(chuàng)建列表1．項目列表選擇所需的文本，單擊“屬性”面板中的“項目列表”按鈕即可將文本設置為項目列表樣式，如圖7-57所示。2．編號列表選擇所需的文本，單擊“屬性”面板中的“編號列表”按鈕即可將文本設置為編號列表樣式，如圖7-58所示。圖7-圖7-587.3.10預覽網(wǎng)頁選擇【文件】/【在瀏覽器中預覽】/【iexplore6.0】命令或單擊文檔工具欄中的按鈕，在彈出的下拉菜單中選擇“預覽在Iexplore6.0”命令即可打開IE瀏覽器預覽網(wǎng)頁。7.3.11保存網(wǎng)頁1．直接保存選擇【文件】/【保存】命令即可直接保存當前網(wǎng)頁，如果文檔為新建的文檔，則執(zhí)行保存操作時會彈出如圖7-59所示的“另存為”對話框，在“保存在”下拉列表框中選擇文件需保存的位置，在“文件名”文本框中輸入保存文檔的名稱后，單擊按鈕即可。圖7-圖7-592．另存網(wǎng)頁對打開的網(wǎng)頁，如果想保存為另外的名稱或保存在其他位置，就需要對網(wǎng)頁進行另存操作。其方法是：選擇【文件】/【另存為】命令，彈出“另存為”對話框，然后設置新的文件名或保存位置，再單擊按鈕即可。7.3.12打開網(wǎng)頁選擇【文件】/【打開】命令或在起始頁中單擊“打開最近項目”欄中的“”超級鏈接，在彈出的“打開”對話框中選擇要打開的網(wǎng)頁文件，再單擊按鈕即可?！裨凇疚募?【打開最近的文件】命令的子菜單中選擇一個最近打開的網(wǎng)頁，或在開始頁的“打開最近項目”欄中單擊一個最近使用過的網(wǎng)頁，可以直接打開該網(wǎng)頁?！裨凇拔业碾娔X”窗口中找到需要打開的網(wǎng)頁文件，在該文件上單擊鼠標右鍵，在彈出的快捷菜單中選擇“使用Dreamweaver8編輯”命令即可啟動Dreamweaver8并打開該文件。課堂小結(jié)教師結(jié)合學生完成實例的情況，對本節(jié)課的教學過程進行小結(jié)，指出學生在練習中存在的問題。作業(yè)布置：1、復習今天所講的內(nèi)容，尤其是網(wǎng)站的建設與管理。2、做相關的選擇題3、預習新課思考題：如何設置網(wǎng)頁的屬性。第四次課（2學時）課題：§7.4網(wǎng)站的發(fā)布與維護課型：理論課、實踐課、任務驅(qū)動多媒體教學教學目的與要求了解：測試站點的方法掌握：掌握網(wǎng)站的發(fā)布與網(wǎng)站維護方法。重點與難點重點：網(wǎng)站的發(fā)布方法網(wǎng)站維護方法難點：網(wǎng)站的管理與維護。教學進程組織教學復習提問引入新課創(chuàng)建網(wǎng)頁的步驟講授新課：7.4網(wǎng)站的發(fā)布與維護7.1、檢測無效鏈接對站點中鏈接的測試可以使用【鏈接檢查器】面板步驟如下：(1)在編輯視圖點擊菜單欄的【站點】/【檢查站點范圍的鏈接】，彈出【結(jié)果】對話框，如圖7-60所示：圖7-圖7-60是檢查器檢查出本網(wǎng)站與外部網(wǎng)站的鏈接的全部信息，對于外部鏈接，檢查器不能判斷正確與否，請自行核對。如果不想刪除這些文件，點擊保存報告按鈕，如圖7-63所示，在彈出的對話框中您給報告文件一個保存路徑和文件名即可。該報告文件為一個檢查結(jié)果列表。你可以參照此表，進行處理。圖7-圖7-632、站點報告圖7-64圖7-64單擊左側(cè)【報告】按鈕，彈出【報告】對話框，單擊【報告在】右側(cè)的下拉箭頭，在彈出的下拉列表框中選擇【整個當前本地站點】選項，然后在【選擇報告】項目中選擇要報告的項目，單擊【運行】按鈕，獲得運行報告，圖7-圖7-653、測試瀏覽器的兼容性在【結(jié)果】面板中，單擊【目標瀏覽器檢查】選項卡，然后單擊左側(cè)的【檢查目標瀏覽器】按鈕，在彈出的下拉菜單中單擊【】，將自動檢查瀏覽器的兼容性，圖7-圖7-667.4.2發(fā)布站點使用內(nèi)置上傳功能執(zhí)行【站點】/【管理站點】命令，彈出【管理站點】對話框如圖7-67所示，選擇要上傳的站點，單擊【編輯】按鈕，選擇【高級】選項卡，在左側(cè)的【分類】列表中選擇【遠程信息】，在【訪問】下拉列表中選擇【FTP】彈出擴展設置部分如圖7-68所示，設置部分解釋如下：圖7-68圖7-68圖7-67●FTP主機：上傳站點的目標FTP服務器地址名稱注意：名稱中不能包括協(xié)議，一般格式為：或者IP地址。例如輸入：33?！裨凇啊蔽谋究蛑?，輸入從FTP根文件夾到遠程站點的根文件夾。如果您不確定該路徑，請咨詢您的系統(tǒng)管理員。在許多情況下，此文本框應該留空?！竦顷懀旱顷慒TP的名稱，即你的用戶名?！衩艽a：登陸FTP的密碼，星號顯示以