《網(wǎng)頁(yè)制作》模塊面的基本操作課件

模塊2頁(yè)面的基本操作模塊2頁(yè)面的基本操作站點(diǎn)管理。頁(yè)面的基本操作。設(shè)置頁(yè)面屬性。了解頁(yè)面中的HTML代碼。設(shè)置頁(yè)面的頭部?jī)?nèi)容。知識(shí)目標(biāo)模塊2頁(yè)面的基本操作能創(chuàng)建本地站點(diǎn)。能創(chuàng)建基本頁(yè)面。能夠?qū)?yè)面進(jìn)行基本設(shè)置。能力目標(biāo)模塊2頁(yè)面的基本操作任務(wù)1：站點(diǎn)的創(chuàng)建與設(shè)置。任務(wù)2：站點(diǎn)文件管理。任務(wù)3：了解網(wǎng)頁(yè)中的HTML代碼。任務(wù)4：設(shè)置頁(yè)面頭部?jī)?nèi)容。具體任務(wù)任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置2.1.1任務(wù)分析為了管理和使用站點(diǎn)，需要掌握如下內(nèi)容。創(chuàng)建站點(diǎn)操作站點(diǎn)任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置2.1.2相關(guān)知識(shí)1.創(chuàng)建新站點(diǎn)任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置14“站點(diǎn)”選項(xiàng)“服務(wù)器”選項(xiàng)“版本控制”選項(xiàng)23“高級(jí)設(shè)置”選項(xiàng)任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置2.站點(diǎn)操作查看站點(diǎn)管理站點(diǎn)任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置(2)(3)(4)(5)(1)(6)“新建”按鈕“復(fù)制”按鈕“導(dǎo)出”按鈕“編輯”按鈕“刪除”按鈕“導(dǎo)入”按鈕對(duì)“管理站點(diǎn)”對(duì)話(huà)框中各按鈕的說(shuō)明如下任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置2.1.3任務(wù)實(shí)施1.具體任務(wù)（1）創(chuàng)建一個(gè)名為study的本地站點(diǎn)，在本地計(jì)算機(jī)的任一分區(qū)中創(chuàng)建一個(gè)名為study的文件夾，將站點(diǎn)文件保存在該文件夾中。（2）創(chuàng)建站點(diǎn)后，導(dǎo)出該站點(diǎn)，導(dǎo)出文件名與站點(diǎn)名相同。任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置2.實(shí)施步驟（1）執(zhí)行“站點(diǎn)”→“新建站點(diǎn)”命令，在彈出的對(duì)話(huà)框中默認(rèn)選中“站點(diǎn)”選項(xiàng)，在“站點(diǎn)名稱(chēng)”文本框中輸入study，設(shè)置“本地站點(diǎn)文件夾”為已經(jīng)新建的study文件夾，如圖2-7所示。完成后單擊“保存”按鈕。任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置（2）執(zhí)行“站點(diǎn)”→“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話(huà)框，在列表框中選擇study站點(diǎn)，如圖2-8所示。單擊“導(dǎo)出”按鈕，將導(dǎo)出文件以study.ste為文件名保存在站點(diǎn)文件夾中，如圖2-9所示。任務(wù)1站點(diǎn)的創(chuàng)建與設(shè)置2.1.4任務(wù)小結(jié)創(chuàng)建本地站點(diǎn)是網(wǎng)頁(yè)制作的基礎(chǔ)步驟，熟練、正確地對(duì)站點(diǎn)進(jìn)行操作是網(wǎng)頁(yè)制作的保障，應(yīng)熟練掌握對(duì)站點(diǎn)的各項(xiàng)操作。任務(wù)2站點(diǎn)文件管理2.2.1任務(wù)分析(1)(2)

(3)創(chuàng)建新文件利用“文件”面板處理文件頁(yè)面的屬性設(shè)置站點(diǎn)中的文件管理主要包括以下內(nèi)容任務(wù)2站點(diǎn)文件管理2.2.2相關(guān)知識(shí)1.創(chuàng)建新文件2)創(chuàng)建新文件1)3)新建文件夾新建網(wǎng)頁(yè)文件文件命名規(guī)則任務(wù)2站點(diǎn)文件管理在DreamweaverCS5中新建文件有很多方法，常用的有以下3種(1)(2)

(3)使用“文件”面板創(chuàng)建新文件使用歡迎界面新建文件使用“新建文檔”對(duì)話(huà)框新建文件任務(wù)2站點(diǎn)文件管理網(wǎng)站中的文件命名規(guī)則如下（1）最好使用小寫(xiě)英文名稱(chēng)（或漢語(yǔ)拼音）。（2）盡量不要大小寫(xiě)混用。（3）不要使用中文文件名。（4）可以使用數(shù)字、下劃線(xiàn)或分割線(xiàn)。（5）不允許使用特殊字符。任務(wù)2站點(diǎn)文件管理（6）網(wǎng)頁(yè)的擴(kuò)展名既可以是.htm，也可以是.html，但一定要選定其中一種，而不要兩種交叉使用，否則很容易造成混亂。（7）需要特別強(qiáng)調(diào)的是，不論是文件、文件夾還是其他網(wǎng)站文件的命名，一定要讓其名稱(chēng)具有清楚明確的含義，而不要用一些無(wú)法理解其含義的字符序列。任務(wù)2站點(diǎn)文件管理2.利用“文件”面板處理文件在“文件”面板中可以方便地利用鼠標(biāo)右鍵快捷菜單進(jìn)行文件相關(guān)操作，如剪切、復(fù)制、刪除、重命名等。也可以使用鼠標(biāo)拖動(dòng)文件的方式來(lái)實(shí)現(xiàn)文件夾的移動(dòng)。任務(wù)2站點(diǎn)文件管理3.頁(yè)面的屬性設(shè)置1）設(shè)置CSS頁(yè)面的字體、背景顏色和背景圖像屬性任務(wù)2站點(diǎn)文件管理2）設(shè)置CSS鏈接屬性任務(wù)2站點(diǎn)文件管理3）設(shè)置CSS頁(yè)面標(biāo)題屬性任務(wù)2站點(diǎn)文件管理4）設(shè)置標(biāo)題和編碼頁(yè)面屬性任務(wù)2站點(diǎn)文件管理5）設(shè)置HTML頁(yè)面屬性任務(wù)2站點(diǎn)文件管理6）使用跟蹤圖像設(shè)計(jì)頁(yè)面任務(wù)2站點(diǎn)文件管理2.2.3任務(wù)實(shí)施1.具體任務(wù)（1）在站點(diǎn)study中創(chuàng)建一個(gè)名為images的文件夾，并在站點(diǎn)中創(chuàng)建頁(yè)面soft.html。（2）設(shè)置頁(yè)面soft.html的屬性，“頁(yè)面字體”默認(rèn)為“宋體”，“大小”為12px，黑色字，上、下、左、右頁(yè)面邊距均為0px；網(wǎng)頁(yè)標(biāo)題為“軟件介紹”，“編碼”為“簡(jiǎn)體中文（GB2312）”。任務(wù)2站點(diǎn)文件管理2.實(shí)施步驟任務(wù)2站點(diǎn)文件管理2.2.4任務(wù)小結(jié)對(duì)站點(diǎn)中各類(lèi)文件的操作是指對(duì)站點(diǎn)管理的基本內(nèi)容、規(guī)范的定義和管理站點(diǎn)中的各類(lèi)文件的操作，是開(kāi)發(fā)符合Web標(biāo)準(zhǔn)網(wǎng)站的基礎(chǔ)。任務(wù)3了解網(wǎng)頁(yè)中的HTML代碼2.3.1任務(wù)分析(1)(2)

(3)HTML的基本概念HTML的基本結(jié)構(gòu)DreamweaverCS5的“代碼”視圖模式掌握HTML，需要首先掌握以下內(nèi)容任務(wù)3了解網(wǎng)頁(yè)中的HTML代碼2.3.2相關(guān)知識(shí)1.HTML的基本概念HTML（hypertextmarkuplanguage，超文本標(biāo)記語(yǔ)言）是用來(lái)描述網(wǎng)頁(yè)的一種標(biāo)記語(yǔ)言。用HTML編寫(xiě)的超文本文檔稱(chēng)為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX、Windows等）。任務(wù)3了解網(wǎng)頁(yè)中的HTML代碼2.HTML的基本結(jié)構(gòu)任務(wù)3了解網(wǎng)頁(yè)中的HTML代碼3.DreamweaverCS5的“代碼”視圖模式使用“代碼”視圖使用快速標(biāo)簽編輯器2.3.3任務(wù)小結(jié)HTML是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)語(yǔ)言之一，當(dāng)在可視化環(huán)境中遇到無(wú)法解決的問(wèn)題時(shí)，就需要轉(zhuǎn)換到“代碼”視圖中進(jìn)行設(shè)計(jì)。因此，認(rèn)識(shí)和學(xué)習(xí)HTML有助于用戶(hù)學(xué)習(xí)和使用DreamweaverCS5進(jìn)行網(wǎng)頁(yè)制作。任務(wù)3了解網(wǎng)頁(yè)中的HTML代碼2.4.1任務(wù)分析任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容(2)(3)(4)(5)(1)(6)插入META插入說(shuō)明插入基礎(chǔ)URL地址插入關(guān)鍵字插入自動(dòng)刷新插入頁(yè)面鏈接關(guān)系設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容，需要掌握以下內(nèi)容2.4.2相關(guān)知識(shí)任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容1.插入META2.插入關(guān)鍵字任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容3.插入說(shuō)明4.插入刷新任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容5.插入基礎(chǔ)URL地址6.插入鏈接任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容2.4.3任務(wù)實(shí)施1.具體任務(wù)（1）設(shè)置前面制作的soft.html頁(yè)面的頭部?jī)?nèi)容，添加頁(yè)面作者信息，作者為“王丹”。（2）插入頁(yè)面關(guān)鍵字“軟件，Adobe”。（3）給頁(yè)面添加內(nèi)容為“網(wǎng)頁(yè)制作軟件介紹”的說(shuō)明。（4）設(shè)置頁(yè)面每間隔5s自動(dòng)刷新一次。任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容2.實(shí)現(xiàn)步驟任務(wù)4設(shè)置頁(yè)面頭部?jī)?nèi)容2.4.4任務(wù)小結(jié)頁(yè)面文件頭內(nèi)容包括作者、關(guān)鍵字、刷新等內(nèi)容，正確設(shè)置頁(yè)面文件頭內(nèi)容是制作網(wǎng)頁(yè)的必要前提。文件頭部分包含在頁(yè)