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

模塊九

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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