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

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

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

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

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