《計算機應(yīng)用基礎(chǔ)（職業(yè)模塊）》模塊九 個人網(wǎng)絡(luò)空間構(gòu)建

模塊九

個人網(wǎng)絡(luò)空間構(gòu)建

模塊九個人網(wǎng)絡(luò)空間構(gòu)建規(guī)劃網(wǎng)站1制作封面網(wǎng)頁2創(chuàng)建基于表格的頁面布局3發(fā)布網(wǎng)站4任務(wù)導(dǎo)入要制作一個完整的網(wǎng)站，首先要根據(jù)這個網(wǎng)站的主題，確定這個網(wǎng)站由哪些模塊組成，再根據(jù)這些模塊的內(nèi)容去收集各種素材，如文本、圖片、動畫等。本任務(wù)將以制作水果行宣傳網(wǎng)站為例，學(xué)習(xí)規(guī)劃網(wǎng)站的方法。學(xué)習(xí)目標（1）會規(guī)劃網(wǎng)絡(luò)空間。（2）會分類整理使用的素材。規(guī)劃網(wǎng)站11.繪制站點的模塊結(jié)構(gòu)圖“四季春水果行”是一個宣傳水果類商品的網(wǎng)站，它主要包括“公司簡介”、“果品行情”、“產(chǎn)品介紹”和“聯(lián)系方式”模塊，由一個主頁和4個二級頁面組成，二級頁面下再分若干個二級子頁。由于本書只是以該網(wǎng)站做教學(xué)實例，我們只選取有代表性的網(wǎng)頁進行介紹。規(guī)劃網(wǎng)站1任務(wù)實施主頁公司簡介果品行情聯(lián)系方式產(chǎn)品介紹2.畫出站點的文件結(jié)構(gòu)圖為了大家能統(tǒng)一協(xié)作，最好先由策劃者畫出整個網(wǎng)站的文件結(jié)構(gòu)圖，也就是定出站點文件夾的名稱和存放各類素材文件的文件夾名稱，所有參與制作的人員都以這個文件結(jié)構(gòu)為準。規(guī)劃網(wǎng)站1任務(wù)實施D:\fruit_shoppingImages：存放圖片素材Company：存放“公司簡介”模塊的網(wǎng)頁文件News：存放“果品行情”模塊的網(wǎng)頁文件template：存放模塊文件（該文件夾由Dreamweaver自動生成）fw：存放用fireworks直接生成的htm文件（用于制作模板）swf：存放flash動畫素材library：存放定義的庫元素文件（也可由Dreamweaver自動生成）contact：存放“聯(lián)系方式”模塊的網(wǎng)頁文件production：存放“產(chǎn)品介紹”模塊的網(wǎng)頁文件3.建立本地站點根文件夾（主文件夾）由于網(wǎng)站的本地站點根文件夾（站點的主文件夾）對應(yīng)一個正在制作的網(wǎng)站，所以應(yīng)先建立本地站點根文件夾，并將其定義為站點。創(chuàng)建本地站點時，可將需用的現(xiàn)有資源（圖像或其他內(nèi)容）放在本地站點的根文件夾下。當(dāng)用戶向頁面中添加內(nèi)容時，可隨時使用這些資源。在本地硬盤上建立一個用來存放本地站點的根文件夾，其建立方法與建立一般文件夾相同。例如，在D盤根目錄下建立一個文件夾fruit_shopping，將fruit_shopping文件夾作為Dreamweaver站點的根文件夾（主文件夾）。在fruit_shopping下再建立用于保存不同類型文件的子文件夾，如保存圖像文件的文件夾images。規(guī)劃網(wǎng)站1任務(wù)實施4.定義本地站點（1）啟動Dreamweaver，單擊“站點”菜單→“管理站點”命令，在彈出的“管理站點”對話框中單擊“新建”按鈕，然后選擇“站點”。（2）在彈出的“站點定義”對話框中，選擇“高級”選項卡，然后從“分類”列表中選擇“本地信息”。在“站點名稱”文本框中，輸入“水果行”作為站點名稱。規(guī)劃網(wǎng)站1任務(wù)實施4.定義本地站點（3）在“本地根文件夾”文本框中，指定fruit_shopping文件夾。也可以單擊文件夾圖標選擇該文件夾。（4）在“默認圖像文件夾”框中，指定fruit_shopping文件夾中已有的images文件夾。（5）單擊“確定”按鈕返回到“管理站點”對話框。（6）單擊“完成”按鈕，關(guān)閉“管理站點”對話框。規(guī)劃網(wǎng)站1任務(wù)實施你想建立一個自己的網(wǎng)站嗎？請為自己的網(wǎng)站寫出個人網(wǎng)站規(guī)劃書（包括網(wǎng)站的模塊結(jié)構(gòu)圖和文件結(jié)構(gòu)圖），以自己姓名拼音為名稱，在D盤上新建一個文件夾，并在Dreamweaver中創(chuàng)建自己個人網(wǎng)站的站點，將此文件夾制定為該站點的站點文件夾。規(guī)劃網(wǎng)站1技能訓(xùn)練模塊九個人網(wǎng)絡(luò)空間構(gòu)建規(guī)劃網(wǎng)站1制作封面網(wǎng)頁2創(chuàng)建基于表格的頁面布局3發(fā)布網(wǎng)站4任務(wù)導(dǎo)入Dreamweaver采用了多種先進技術(shù)，無論是在可視化編輯環(huán)境中工作，還是手工編寫HTML代碼，都為用戶提供了便捷的工具，使用戶能夠快速、高效地創(chuàng)建高質(zhì)量的網(wǎng)頁。本任務(wù)將為某水果行制作一個封面型網(wǎng)頁。本網(wǎng)頁需要一個背景圖像文件fall.gif和一個公司名稱圖像文件sjcsgh.jpg。學(xué)習(xí)目標（1）熟悉網(wǎng)頁設(shè)計軟件的界面。（2）會設(shè)計并制作一個簡單的網(wǎng)頁。制作封面網(wǎng)頁21.啟動Dreamweaver（1）單擊“開始”菜單→“所有程序”→“Macromedia”→“MacromediaDreamweaver8”項，將顯示“起始頁”對話框。制作封面網(wǎng)頁2任務(wù)實施1.啟動Dreamweaver（2）由于我們現(xiàn)在要創(chuàng)建新的靜態(tài)網(wǎng)頁，在此單擊“創(chuàng)建新項目”下的“HTML”，進入Dreamweaver“設(shè)計”視圖工作區(qū)窗口。制作封面網(wǎng)頁2任務(wù)實施面板組“文件”面板活動面板內(nèi)容“插入”工具欄文檔選項卡“文檔”工具欄“文檔”窗口標尺標簽選擇器“屬性”面板展開或折疊按鈕狀態(tài)欄2.Dreamweaver“設(shè)計”視圖工作區(qū)1）“文檔”窗口（1）“設(shè)計”視圖用于可視化頁面布局、編輯的設(shè)計環(huán)境。在本視圖中，顯示文檔的可視化表示形式，類似于在瀏覽器中查看頁面時看到的內(nèi)容。（2）“代碼”視圖用于編寫和編輯HTML、JavaScript、服務(wù)器語言等代碼的手工編碼環(huán)境。單擊“文檔”工具欄中的，將切換到“代碼”視圖。在“代碼”視圖中，文檔窗口的左側(cè)還將顯示一個“編碼”工具欄。（3）“代碼和設(shè)計”視圖單擊按鈕，或者單擊“查看”菜單→“代碼和設(shè)計”命令，可以在一個窗口中同時看到同一文檔的“代碼”和“設(shè)計”視圖。制作封面網(wǎng)頁2任務(wù)實施2）“文檔”工具欄“文檔”工具欄中包含的按鈕有切換視圖、查看選項和一些常用功能。制作封面網(wǎng)頁2任務(wù)實施顯示代碼視圖顯示代碼視圖和設(shè)計視圖顯示設(shè)計視圖文檔標題沒有瀏覽器/檢查錯誤文件管理驗證標記可視化助理視圖選項刷新設(shè)計視圖在瀏覽器中預(yù)覽/調(diào)試3）“插入”工具欄“插入”工具欄包含用于創(chuàng)建和插入對象（如表格、層和圖像）的按鈕，這些按鈕被組織到了幾個類別中，可以單擊“插入”工具欄左側(cè)的來切換。若要關(guān)閉或打開“插入”工具欄，可執(zhí)行“窗口”菜單→“插入”。制作封面網(wǎng)頁2任務(wù)實施4）狀態(tài)欄“文檔”窗口底部的狀態(tài)欄提供與正編輯的文檔有關(guān)的信息。制作封面網(wǎng)頁2任務(wù)實施標簽選擇器設(shè)置縮放比率縮放工具手形工具選取工具窗口大小文檔大小估計下載時間5）“編碼”工具欄“編碼”工具欄僅在“代碼”視圖中是可見的，它以垂直方式顯示在“文檔”窗口的左側(cè)。“編碼”工具欄包含執(zhí)行多種標準編碼操作的按鈕，例如折疊和展開代碼的選定內(nèi)容、高亮顯示無效代碼、應(yīng)用和刪除注釋、縮進代碼和插入最近使用過的代碼片斷。6）“屬性”面板“屬性”面板可以編輯當(dāng)前選定頁面元素（如文本或插入的對象）的常用屬性。屬性面板根據(jù)選定內(nèi)容的不同而不同。屬性面板默認位于工作區(qū)的底部，也可以將它?？吭诠ぷ鲄^(qū)的頂部，或者將它變?yōu)楣ぷ鲄^(qū)中的浮動面板。在不需要顯示“屬性”面板時，可單擊其上邊的“展開或折疊”按鈕，以擴大編輯區(qū)。7）面板組面板組中包括CSS、應(yīng)用程序、標簽檢查器和文件面板。單擊面板標題，可以展開或折疊該面板。每個面板又包含多個選項卡，可鼠標單擊切換。制作封面網(wǎng)頁2任務(wù)實施3.創(chuàng)建靜態(tài)網(wǎng)頁（1）單擊“文件”菜單→“新建”命令，彈出“新建文檔”對話框，選擇“常規(guī)”選項卡，選中“基本頁”→“HTML”項，單擊“創(chuàng)建”按鈕，即可在文檔窗口創(chuàng)建一個空白網(wǎng)頁。（2）單擊“文件”菜單→“另存為”命令，在彈出的“另存為”對話框中，在“保存在”下拉框中選定保存文件的文件夾，在“文件名”框中輸入“index”。制作封面網(wǎng)頁2任務(wù)實施

4.設(shè)置網(wǎng)頁屬性1）設(shè)置“外觀”（1）單擊“屬性”面板中的“頁面屬性”按鈕。（2）在彈出的“頁面屬性”對話框中，單擊“分類”列表中的“外觀”選項。（3）單擊“文本顏色”后的按鈕，在顏色選擇面板中單擊一種顏色。（4）單擊“背景圖像”后的“瀏覽”按鈕，選擇“查找范圍”列表框中保存圖像的文件夾，單擊背景圖像名fall.gif，單擊“確定”。（5）返回到“頁面屬性”對話框，這時選定圖像的相對路徑（MyPicture/fall.gif）被填寫到該文本框中。最后，單擊“應(yīng)用”按鈕。制作封面網(wǎng)頁2任務(wù)實施

4.設(shè)置網(wǎng)頁屬性2）設(shè)置“鏈接”（1）在“頁面屬性”對話框中，單擊“分類”列表中的“鏈接”選項。（2）在“鏈接顏色”和“已訪問鏈接”中分別選定綠色（#00FF66）。制作封面網(wǎng)頁2任務(wù)實施

4.設(shè)置網(wǎng)頁屬性3）設(shè)置“標題/編碼”（1）在“頁面屬性”對話框中，單擊“分類”列表中的“標題/編碼”選項。（2）在“標題”文本框中輸入“歡迎您來到四季春水果行”。（3）單擊“確定”按鈕回到網(wǎng)頁編輯窗口。制作封面網(wǎng)頁2任務(wù)實施

5.編輯頁面內(nèi)容（1）在文檔窗口中輸入“歡迎您來到四季春水果行”。（2）選中要設(shè)置的文本，單擊“屬性”面板中“大小”右側(cè)下拉按鈕，選擇字體大小為24，單擊居中按鈕。制作封面網(wǎng)頁2任務(wù)實施

5.編輯頁面內(nèi)容（3）在“設(shè)計”視圖中，按Enter鍵產(chǎn)生段落標記<p></p>。按Shift+Enter鍵產(chǎn)生換行標簽<br/>。按幾次Enter鍵，把光標移到文檔窗口中部位置。（4）單擊“插入”菜單→“圖像”命令，在彈出的“選擇圖像源文件”對話框，選擇圖像文件名sjcsgh.jpg，單擊“確定”。制作封面網(wǎng)頁2任務(wù)實施

5.編輯頁面內(nèi)容（5）在出現(xiàn)的“圖像標簽輔助功能屬性”對話框中，在“替換文本”框中輸入“四季春”，若不輸入可直接單擊“確定”按鈕。（6）選中圖像，拖動圖像邊框?qū)D像調(diào)整到合適大小，單擊“屬性”面板中的“居中”按鈕。（7）在頁面中輸入其他文字，并設(shè)置顏色、大小和排列方式。制作封面網(wǎng)頁2任務(wù)實施

6.在瀏覽器中預(yù)覽網(wǎng)頁由于在文檔窗口中看到的效果往往與在瀏覽器中的效果不同，所以在編輯過程中要多次在瀏覽器中查看制作效果?？砂碏12鍵，或單擊“文檔”工具欄中的“在瀏覽器中預(yù)覽/調(diào)試”按鈕，從下拉菜單中選擇“預(yù)覽在IExplore6.0”。制作封面網(wǎng)頁2任務(wù)實施

1.上網(wǎng)搜集有關(guān)素材，自己設(shè)計并制作一個封面型網(wǎng)頁。2.建一個文件夾為sanmao的本地站點，上網(wǎng)搜集有關(guān)素材，參照圖示制作網(wǎng)頁文件。制作封面網(wǎng)頁2技能訓(xùn)練

模塊九個人網(wǎng)絡(luò)空間構(gòu)建規(guī)劃網(wǎng)站1制作封面網(wǎng)頁2創(chuàng)建基于表格的頁面布局3發(fā)布網(wǎng)站4任務(wù)導(dǎo)入在網(wǎng)頁設(shè)計中，經(jīng)常使用表格進行頁面的設(shè)計和排版，控制文本和圖像在頁面上的位置，另外使用表格可以使頁面看起來更加直觀，條理更加清晰。例如，許多大型網(wǎng)站（如網(wǎng)易、新浪、搜狐、雅虎中國等）都是利用表格來進行頁面布局的，只要將這些網(wǎng)站中的網(wǎng)頁保存下來，再在Dreamweaver中打開，就可以看到表格的應(yīng)用。本任務(wù)將設(shè)計四季春水果行“公司簡介”網(wǎng)頁，如圖所示。學(xué)習(xí)目標（1）會使用表格功能進行頁面布局。（2）會在表格中定位文本和圖形。（3）會設(shè)計分欄頁面。創(chuàng)建基于表格的頁面布局3創(chuàng)建基于表格的頁面布局31.創(chuàng)建并保存新頁面（1）在Dreamweaver中，單擊“文件”菜單→“新建”命令。（2）在“新建文檔”對話框的“常規(guī)”選項卡上，從“類別”列表中選擇“基本頁”，從“基本頁”列表中選擇“HTML”，然后單擊“創(chuàng)建”。（3）單擊“文件”菜單→“另存為”命令，在“另存為”對話框中，瀏覽至定義為站點的本地根文件夾fruit_shopping，打開company文件夾。（4）在“文件名”中輸入instruction.html，然后單擊“保存”。文件名即出現(xiàn)在應(yīng)用程序窗口頂部的標題欄中。（5）在新文檔頂部的“文檔標題”文本框中，鍵入頁面的標題“水果行公司簡介”。創(chuàng)建基于表格的頁面布局3任務(wù)實施2.插入表格（1）在頁面上單擊，此時頁面左上角出現(xiàn)閃爍的插入點圖標。（2）單擊“插入”菜單→“表格”命令，彈出“插入表格”對話框。在“行數(shù)”文本框中，輸入3；在“列數(shù)”文本框中輸入1；在“表格寬度”文本框中輸入700；在“表格寬度”彈出式菜單中選擇“像素”；在“邊框粗細”文本框中輸入0；在“單元格邊距”文本框中輸入0；在“單元格間距”文本框中，輸入0。創(chuàng)建基于表格的頁面布局3任務(wù)實施2.插入表格（3）單擊“確定”按鈕，這時一個三行一列的表格出現(xiàn)在文檔中。該表格的寬度為700像素，邊框、單元格邊距和單元格間距均為0。插入表格后，可看到由綠色線條指示的表格選擇器。如果單擊表格外部，可以隱藏表格選擇器。創(chuàng)建基于表格的頁面布局3任務(wù)實施黑框表示選中了該表格2.插入表格（4）單擊表格右側(cè)外部，取消對表格的選中狀態(tài)。此時，閃爍的插入點光標出現(xiàn)在表格右邊框外。表格處于未選中狀態(tài)表格外的閃爍光標（5）再次單擊“插入”菜單→“表格”命令，在彈出的“插入表格”對話框中，設(shè)置第二個表格的內(nèi)容：在“行數(shù)”文本框中輸入1；在“列數(shù)”文本框中輸入3；在“表格寬度”文本框中輸入700；在“表格寬度”彈出式菜單中選擇“像素”；在“邊框粗細”文本框中輸入0；在“單元格邊距”文本框中輸入0；在“單元格間距”文本框中輸入0。創(chuàng)建基于表格的頁面布局3任務(wù)實施表格處于未選中狀態(tài)表格外的閃爍光標2.插入表格（6）單擊“確定”按鈕后，第二個表格（該表格具有一行三列）出現(xiàn)在第一個表格下方。（7）單擊該表格右側(cè)外部取消對它的選擇。此時，閃爍的插入點光標出現(xiàn)在第二個表格右邊框外。創(chuàng)建基于表格的頁面布局3任務(wù)實施表格標題菜單列標題菜單2.插入表格（8）繼續(xù)單擊“插入”菜單→“表格”命令，在“插入表格”對話框中輸入以下值來插入第三個表格：在“行數(shù)”文本框中輸入1；在“列數(shù)”文本框中輸入1；在“表格寬度”文本框中輸入700；在“表格寬度”彈出式菜單中選擇“像素”；在“邊框粗細”文本框中輸入0；在“單元格邊距”文本框中輸入0；在“單元格間距”文本框中輸入0。（9）單擊“確定”。第三個表格（該表格具有一行一列）即出現(xiàn)在第二個表格下方。單擊該表格右側(cè)取消對它的選擇。創(chuàng)建基于表格的頁面布局3任務(wù)實施3.設(shè)置表格屬性（1）單擊“查看”菜單→“表格模式”→“擴展表格模式”。此時可能會出現(xiàn)“擴展表格模式入門”對話框以提示用戶，單擊“確定”。（2）單擊第一個表格的第一行內(nèi)部，在“屬性”面板的單元格高度文本框中輸入90，然后按Enter鍵。創(chuàng)建基于表格的頁面布局3任務(wù)實施3.設(shè)置表格屬性（3）單擊第一個表格的第二行內(nèi)部，在“屬性”面板的單元格高度文本框中輸入160，然后按Enter鍵。（4）單擊第一個表格的第三行內(nèi)部，在“屬性”面板的單元格高度文本框中輸入25，然后按Enter鍵。現(xiàn)在第一個表格中的三行應(yīng)具有不同的高度。創(chuàng)建基于表格的頁面布局3任務(wù)實施3.設(shè)置表格屬性（5）單擊第二個表格的第一列內(nèi)部，在“屬性”面板的單元格寬度文本框中輸入135，然后按Enter鍵。（6）單擊第二個表格的第二列內(nèi)部，在“屬性”面板的單元格寬度文本框中輸入180，然后按Enter鍵。同樣地，將第三列的寬度設(shè)置為330。如果已打開表格選擇器（“查看”菜單→“可視化助理”→“表格寬度”），將能看到設(shè)置的各列像素值。創(chuàng)建基于表格的頁面布局3任務(wù)實施3.設(shè)置表格屬性（7）單擊第三個表格內(nèi)部，在“屬性”面板的單元格高度中輸入22，然后按Enter鍵。（8）單擊“文檔”窗口頂部的“退出”，返回到“標準”模式。（9）單擊“文件”菜單→“保存”命令保存頁面。創(chuàng)建基于表格的頁面布局3任務(wù)實施4.插入圖像占位符（1）在文檔窗口中，單擊第一個表格的第一行內(nèi)部。（2）單擊“插入”菜單→“圖像對象”→“圖像占位符”項。創(chuàng)建基于表格的頁面布局3任務(wù)實施4.插入圖像占位符（3）在“圖像占位符”對話框中，在“名稱”文本框中鍵入zwf；在“寬度”文本框中輸入700；在“高度”文本框中輸入90；單擊顏色框并從顏色選擇器中選定黃色；保留“替換文本”文本框為空。（4）單擊“確定”。圖像占位符出現(xiàn)在第一個表格內(nèi)。圖像占位符顯示最終放置于此處的圖像的標簽和大小屬性。（5）單擊“文件”菜單→“保存”命令保存頁面。創(chuàng)建基于表格的頁面布局3任務(wù)實施5.設(shè)置單元格背景（1）單擊表格右側(cè)外部取消對表格的選擇。（2）在第二個表格中，單擊第一個單元格內(nèi)部。（3）單擊標簽選擇器中的<td>標簽（單元格標簽）以選定該單元格。創(chuàng)建基于表格的頁面布局3任務(wù)實施5.設(shè)置單元格背景（4）在“屬性”面板中，單擊“背景顏色”后的文本框，輸入十六進制值#FFFF66，然后按Enter鍵。這時，該單元格的顏色變?yōu)辄S色。（5）單擊第二個表格的第二個單元格，單擊標簽選擇器中的<td>標簽選中該單元格，在“屬性”面板中設(shè)置“背景顏色”為#6666CC，然后按Enter鍵。表格單元格的顏色變?yōu)樽仙?。?）同樣地，將第二個表格的第三個單元格的顏色也更改為#6666CC。（7）設(shè)置完這三個單元格顏色后，單擊表格的外部，取消選擇該表格。創(chuàng)建基于表格的頁面布局3任務(wù)實施6.設(shè)置頁面背景（1）單擊“屬性”面板上的“頁面屬性”按鈕。（2）在“頁面屬性”對話框中，選擇“外觀”類別，單擊“背景顏色”顏色框，然后從顏色選擇器中選擇淺灰色。（3）單擊“確定”，頁面的背景變?yōu)闇\灰色。創(chuàng)建基于表格的頁面布局3任務(wù)實施7.向頁面插入圖像1）替換圖像占位符（1）打開在已創(chuàng)建的instruction.html文件。（2）雙擊頁面頂部的圖像占位符，彈出“選擇圖像源文件”對話框，查找到定義為站點根文件夾的fruit_shopping文件夾中的images文件夾。（3）選中top1.jpg，單擊“確定”按鈕，top1.jpg文件將圖像占位符替換。（4）單擊表格外部取消圖像的選中狀態(tài)。創(chuàng)建基于表格的頁面布局3任務(wù)實施7.向頁面插入圖像2）使用“插入”菜單插入圖像（1）單擊第一個表格的第三個單元格內(nèi)部。（2）單擊“插入”菜單→“圖像”命令。（3）在“選擇圖像源文件”對話框中，選擇fruit_shopping文件夾中的images文件夾，雙擊選定082.gif文件。如果出現(xiàn)“圖像標簽輔助功能屬性”對話框，則單擊“確定”。一個長條淺綠色圖形（分隔條）出現(xiàn)在該表格行中。創(chuàng)建基于表格的頁面布局3任務(wù)實施7.向頁面插入圖像3）通過拖動插入圖像（1）單擊表格外部取消選中表格，單擊第三個表格內(nèi)部。（2）打開“文件”面板，在images文件夾中找到082.gif文件，將該文件拖到最后一個表格的插入點。（3）在表格外單擊一次，并保存該頁面。創(chuàng)建基于表格的頁面布局3任務(wù)實施4）從“資源”面板插入圖像（1）單擊第二個表格的第二個單元格內(nèi)容。（2）在“屬性”面板中，從“水平”下拉列表中選擇“居中對齊”，從“垂直”下拉列表中選擇“頂端”。該操作將表格單元格的內(nèi)容對齊到單元格的中間，并使單元格的內(nèi)容從單元格頂端開始。（3）按一次Enter鍵，以創(chuàng)建更多空間。創(chuàng)建基于表格的頁面布局3任務(wù)實施4）從“資源”面板插入圖像（4）單擊“文件”面板中的“資源”選項卡，或選擇“窗口”菜單→“資源”。如果未選中“圖像”視圖，則單擊“圖像”以查看圖像資源。（5）在“資源”面板中選擇fruits.jpg文件，單擊“資源”面板底部的“插入”按鈕，或?qū)ruits.jpg文件直接拖到表格插入點，這時fruits.jpg圖像即顯示在頁面上。（6）在表格外單擊，以取消圖像的選中狀態(tài)。創(chuàng)建基于表格的頁面布局3任務(wù)實施8.插入Flash文件（1）單擊第一個表格的第二個單元格，即緊接上一節(jié)中插入的橫幅圖形的表格行。（2）在“屬性”面板中，從“水平”下拉列表中選擇“居中對齊”，然后從“垂直”下拉列表中選擇“居中”，以使插入的內(nèi)容放置到單元格的中間。（3）在“文件”面板中，選擇本站點下swf文件夾中的knowfruit.swf文件，將其拖到單元格中。此時，F(xiàn)lash內(nèi)容占位符將顯示在文檔窗口中。創(chuàng)建基于表格的頁面布局3任務(wù)實施9.插入Flash視頻（1）在第二個表格的第二個單元格中，單擊已放置圖形的上面位置。（2）單擊“插入”菜單→“媒體”→“Flash視頻”項，將彈出“插入Flash視頻”對話框。創(chuàng)建基于表格的頁面布局3任務(wù)實施9.插入Flash視頻（3）在“視頻類型”下拉列表中，選擇“累進式下載視頻”。（4）在“URL”文本框中，單擊“瀏覽”按鈕，選擇站點根文件夾中的video.flv文件。（5）“外觀”選項指定將包含F(xiàn)lash視頻內(nèi)容的Flash視頻組件的外觀。（6）“寬度”和“高度”文本框中的值以像素為單位指定FLV文件的寬度和高度?？梢匀我庹{(diào)整這些值以更改頁面上Flash視頻的大小。增加視頻尺寸時，視頻的圖片品質(zhì)通常會下降。在此，分別鍵入160和140。（7）“限制高寬比”表示是否保持Flash視頻組件的寬度和高度之間的高寬比不變。默認情況下會選擇此選項。（8）選中“自動播放”，以便在打開本網(wǎng)頁時自動播放視頻。（9）“自動重新播放”指定播放控件在視頻播放完之后是否返回起始位置。默認情況下取消選擇該選項。（10）單擊“確定”關(guān)閉對話框，F(xiàn)lash視頻內(nèi)容將添加到Web頁面。創(chuàng)建基于表格的頁面布局3任務(wù)實施10.插入正文文本（1）在“文件”面板中，找到j(luò)ianjie.txt文件，雙擊該文件圖標，在Dreamweaver中打開它。可以看到，此文檔處于“代碼”視圖中，并且不能切換到“設(shè)計”視圖（前面一直在使用設(shè)計視圖），因為該文件不是HTML文件。（2）在jianjie.txt“文檔”窗口中，按Ctrl+A選中所有文本。（3）單擊“編輯”菜單→“拷貝”復(fù)制該文本后，單擊文檔右上角中的“關(guān)閉”按鈕關(guān)閉文件。創(chuàng)建基于表格的頁面布局3任務(wù)實施10.插入正文文本（4）在instruction.html“文檔”窗口中，單擊第二個表格的第三個單元格（5）單擊“編輯”菜單→“粘貼”命令。（6）選中文本內(nèi)容，設(shè)置字體顏色為“白色”，字體大小為18。（7）在“屬性”面板中，從“垂直”下拉列表中選擇“頂端”，這時剛粘貼的文本沿表格單元格的頂端對齊。創(chuàng)建基于表格的頁面布局3任務(wù)實施11.插入導(dǎo)航條文本（1）單擊第二個表格的第一個單元格內(nèi)部。（2）鍵入“公司簡介”，按一下空格鍵并鍵入“果品行情”。（3）重復(fù)前面的步驟，輸入標題“產(chǎn)品介紹”和“聯(lián)系方式”，并且在每個標題之間留一個空格。（4）在標簽選擇器中單擊<td>標簽，在“屬性”檢查器中，從“垂直”下拉列表中選擇“頂端”，使鍵入的文本沿表格單元格的頂端對齊。創(chuàng)建基于表格的頁面布局3任務(wù)實施

12.創(chuàng)建鏈接（1）打開index.html文件，選中“進入主頁”文字內(nèi)容，在“屬性”面板中，單擊“鏈接”旁的文件夾圖標，打開“選擇文件”對話框。（2）在“選擇文件”對話框中，查找到instruction.html文件，單擊“確定”按鈕。這時，選中的文件出現(xiàn)在“鏈接”框中。也可以在鏈接框中直接輸入鏈接到的文件名。創(chuàng)建基于表格的頁面布局3任務(wù)實施

12.創(chuàng)建鏈接（3）進入instruction.html文檔頁面。（4）選中導(dǎo)航條中的“公司簡介”。由于本網(wǎng)頁自身就是“公司簡介”內(nèi)容，所以在“屬性”面板的“鏈接”框中直接輸入instruction.html，這時“公司簡介”文本出現(xiàn)下劃線并變?yōu)樗{色，表示它現(xiàn)在是一個鏈接。（5）重復(fù)上述步驟，為導(dǎo)航條中的每個標題建立鏈接。作為練習(xí)，都鏈接到instruction.html頁面。創(chuàng)建基于表格的頁面布局3任務(wù)實施

13.在瀏覽器中預(yù)覽頁面效果（1）在文檔窗口中打開index.html文件。（2）單擊文檔工具欄上的下列表中選“預(yù)覽在IExplore6.0”，或單擊“文件”菜單→“在瀏覽器中預(yù)覽”→“IExplore6.0”。這時將啟動主瀏覽器。（3）單擊已建立的鏈接可進入相應(yīng)的頁面。創(chuàng)建基于表格的頁面布局3任務(wù)實施

14.設(shè)置導(dǎo)航欄文本格式1）為導(dǎo)航創(chuàng)建新規(guī)則（1）打開fr1.css文件，或單擊其選項卡來顯示該文件。（2）在該文件的.bd類樣式后面鍵入以下代碼：.navigation{}這是一個空規(guī)則。（3）保存fr1.css文件。創(chuàng)建基于表格的頁面布局3任務(wù)實施

14.設(shè)置導(dǎo)航欄文本格式1）為導(dǎo)航創(chuàng)建新規(guī)則（4）打開instruction.html文件，在面板中，選擇“全部”模式的.navigation規(guī)則，然后單擊面板右下角的“編輯樣式”圖標。（5）在彈出的“CSS規(guī)則定義”對話框的“類型”中，在“字體”框中輸入“宋體”；在“大小”下拉列表和單位中分別選擇“18”和“像素”；在“樣式”下拉列表中選擇“正常”；在“修飾”中選擇“無”，在“粗細”中選擇“粗體”；在“顏色”框中輸入#FF0000。創(chuàng)建基于表格的頁面布局3任務(wù)實施

14.設(shè)置導(dǎo)航欄文本格式1）為導(dǎo)航創(chuàng)建新規(guī)則（6）在“CSS規(guī)則定義”對話框的“區(qū)塊”項中，在“文本對齊”下拉列表中選擇“居中”，然后單擊“確定”。（7）在“CSS樣式”面板中，選中.navigation規(guī)則，單擊“顯示列表視圖”按鈕。列表視圖可使“屬性”窗格按字母順序顯示所有可用屬性。創(chuàng)建基于表格的頁面布局3任務(wù)實施

14.設(shè)置導(dǎo)航欄文本格式1）為導(dǎo)航創(chuàng)建新規(guī)則（8）單擊background-color屬性右邊的列，輸入十六進制值#00CCFF，然后按Enter鍵。（9）找到display屬性，在右邊的列中單擊一次，然后從下拉列表中選擇block。（10）找到padding屬性，在右邊的列中單擊一次，輸入值8px，然后按Enter鍵。（11）找到width屬性，在右邊的列中單擊一次，在文本框中輸入140，從下拉列表中選擇像素，然后按Enter鍵。（12）單擊“顯示設(shè)置屬性”按鈕，在“屬性”窗格中顯示出用戶設(shè)置的屬性。在fr1.css文件的“文檔”窗口中，可看到Dreamweaver已經(jīng)把指定的所有屬性添加到該文件中。創(chuàng)建基于表格的頁面布局3任務(wù)實施

14.設(shè)置導(dǎo)航欄文本格式1）為導(dǎo)航創(chuàng)建新規(guī)則創(chuàng)建基于表格的頁面布局3任務(wù)實施

2）應(yīng)用規(guī)則（1）在“文檔”窗口中打開instruction.html頁。（2）單擊“公司簡介”將插入點置于該詞中的某個位置，單擊標簽選擇器中的<a>標簽。此時，將選中“公司簡介”文本內(nèi)容。創(chuàng)建基于表格的頁面布局3任務(wù)實施

2）應(yīng)用規(guī)則（3）在“屬性”面板中，從“樣式”下拉列表中選擇“navigation”。此時，在“文檔”窗口中“公司簡介”文本的外觀完全發(fā)生了變化。根據(jù)在上面為.navigation規(guī)則所定義的屬性，該文本的格式現(xiàn)在已被設(shè)置為導(dǎo)航欄按鈕。（4）為導(dǎo)航欄中的每個鏈接“果品行情”、“產(chǎn)品介紹”、“聯(lián)系方式”均應(yīng)用該規(guī)則。創(chuàng)建基于表格的頁面布局3任務(wù)實施

1.在網(wǎng)頁中插入7行6列、寬度為100%的表格。分別練習(xí)選取表格、選取其中1行或1列、選取某一單元格或幾個單元格。2.參照圖示，使用表格格式在單元格中插入圖片制作網(wǎng)頁。創(chuàng)建基于表格的頁面布局3技能訓(xùn)練

模塊九個人網(wǎng)絡(luò)空間構(gòu)建規(guī)劃網(wǎng)站1制作封面網(wǎng)頁2創(chuàng)建基于表格的頁面布局3發(fā)布網(wǎng)站4任務(wù)導(dǎo)入制作網(wǎng)站的目的就是讓人們能夠訪問到我們的網(wǎng)頁。前面我們學(xué)習(xí)了網(wǎng)頁的制作方法，現(xiàn)在我們要把制作好的網(wǎng)站發(fā)布到因特網(wǎng)上。本任務(wù)將學(xué)習(xí)申請主頁空間和上傳網(wǎng)頁的方法。學(xué)習(xí)目標（1）會申請和使用網(wǎng)站提供的網(wǎng)絡(luò)空間。（2）會發(fā)表作品并管理網(wǎng)絡(luò)空間。發(fā)布網(wǎng)站4任務(wù)實施1.申請域名申請并使用一個域名必須定期向域名管理機構(gòu)支付相應(yīng)費用。通常在申請免費的個人主頁時，提供免費個人主頁的機構(gòu)會同時提供一個免費的域名及相應(yīng)的免費空間。但由于這種免費的域名一般是二級域名或帶免費域名機構(gòu)相應(yīng)信息的一個鏈接目錄，其服務(wù)沒有必要的保證，隨時可能被刪除或停止。如果是專業(yè)性網(wǎng)站、大中型公司網(wǎng)站或有大量訪問客戶的網(wǎng)站則需要申請專用的域名；若是個人網(wǎng)站則不一定非要申請專用的域名。在申請域名前，應(yīng)根據(jù)網(wǎng)站性質(zhì)確定域名名稱及后綴。公司、網(wǎng)絡(luò)組織、教育機構(gòu)及行業(yè)協(xié)會等不同性質(zhì)單位的網(wǎng)站可用不同的后綴，如學(xué)校或教育機構(gòu)網(wǎng)站的后綴通常為edu。發(fā)布網(wǎng)站4任務(wù)實施1.申請域名確定域名名稱應(yīng)注意以下兩點：（1）確定域名的原則是易于記憶、易于識別及能代表網(wǎng)站的個體特征。（2）確定了域名后，還需確認域名未被注冊才能在網(wǎng)上申請注冊，并向域名注冊機構(gòu)支付相應(yīng)域名注冊使用費，才可以向代理機構(gòu)申請域名空間及域名注冊，通常在網(wǎng)站上可查詢要申請的域名是否已被注冊。發(fā)布網(wǎng)站4任務(wù)實施2.主頁空間的類型若要發(fā)布網(wǎng)站，需要先申請一個主頁存放空間，將完成的網(wǎng)頁上傳到這個空間里，然后申請一個域名，瀏覽者即可通過該域名訪問到站點。主頁空間通常有免費和收費兩種。在申請主頁空間時，應(yīng)根據(jù)網(wǎng)站性質(zhì)、網(wǎng)頁文件大小、網(wǎng)站運行的操作系統(tǒng)、網(wǎng)站運行的技術(shù)條件等因素選擇相應(yīng)的空間大小及類型。免費主頁空間：其空間大小和運行的支持條件會受一定限制。適用于一般的個人網(wǎng)站。收費主頁空間：一般由網(wǎng)站托管機構(gòu)提供，其空間大小及支持條件可供用戶根據(jù)需要進行選擇。適用于商業(yè)網(wǎng)站、公司網(wǎng)站、專業(yè)性網(wǎng)站和行業(yè)性網(wǎng)站，或者運行環(huán)境需要較穩(wěn)定的網(wǎng)站。發(fā)布網(wǎng)站4任務(wù)實施3.申請免費主頁空間（1）啟動IE瀏覽器，在“地址”欄中輸入，按Ente