網(wǎng)頁設(shè)計與美工 說課

>>2023/6/18項目三

制作主要內(nèi)容為文本的的網(wǎng)頁2023/6/18項目導(dǎo)入通過前面的學習和研究，周揚知道了如何策劃和建立自己的站點。但是要制作漂亮的網(wǎng)站主頁，還需要一些網(wǎng)頁元素，例如文字，圖片，F(xiàn)lash動畫等。他在網(wǎng)上準備了一些制作網(wǎng)頁的素材，準備向同學們介紹生態(tài)環(huán)境方面的課外知識。項目導(dǎo)入2023/6/18任務(wù)分析1在學校里聽了有關(guān)環(huán)境保護知識的講座，周揚感到普及環(huán)境保護知識十分重要，于是他想要創(chuàng)建兩個網(wǎng)頁，在新建的網(wǎng)頁中插入有關(guān)環(huán)境保護的文字，向同學們宣傳環(huán)境保護方面的知識，網(wǎng)頁如圖3-1-1、3-1-2所示。在這個過程中，周揚將會學到：（1）制作以文本為主要內(nèi)容的網(wǎng)頁的方法；（2）更改文本的格式；（3）特殊字符的插入方法。任務(wù)分析圖3-1-1index1.html頁面效果任務(wù)分析2023/6/18圖3-1-2huanbao1.html頁面效果2023/6/18相關(guān)知識1相關(guān)知識1．新建網(wǎng)頁方法（1）單擊“文件”→“新建”（基本頁或從模板創(chuàng)建）。方法（2）右擊“站點”選擇“新建網(wǎng)頁”。2．網(wǎng)頁的命名與保存（1）命名規(guī)則①小寫字母、數(shù)字、下劃線，不能以數(shù)字開頭；②不能用空格、標點符號或特殊符號；③主頁一般名為Index.html，首頁為main.html；④文件名不能過長，建議用拼音表示其含義，減少使用中文。（2）保存網(wǎng)頁方法：單擊“保存”按鈕或選擇“文件”→“保存”菜單項。3．文本的輸入：定位光標后，有兩種方法。方法①直接輸入方法②導(dǎo)入Word文檔：單擊“文件”→“導(dǎo)入”→“Word文檔”；再使用“命令”“清理Word的HTML”刪除無關(guān)代碼。方法③“復(fù)制”+“粘貼”（或直接拖動站點內(nèi)的文檔到網(wǎng)頁中，注：復(fù)制前把字體設(shè)為系統(tǒng)默認字體）。4．插入特殊字符包括版權(quán)、商標、左右引號、破折線及其他字符。方法：單擊“插入→HTML→特殊字符→……”相關(guān)知識2023/6/185．插入空格默認編輯情況下只能輸入一個空格，方法①按Ctrl+Shift+Space（空格鍵）；方法②在代碼窗口鍵入“ ”（多個空格則復(fù)制“ ”后粘貼）；方法③轉(zhuǎn)換輸入法為全角狀態(tài)后按空格鍵。6．插入注釋（在瀏覽器中不可見）方法①單擊插入欄中常規(guī)類別的“插入注釋”按鈕；方法②單擊“插入”→“注釋”。7．更新日期步驟：“插入”→“日期”（復(fù)選“存儲時自動更新”）。相關(guān)知識2023/6/18Tips:“保存”與“全部保存”的區(qū)別；未保保存的頁面文件名后有“*”，如圖3-1-3所示。圖3-1-3未保存的文檔相關(guān)知識2023/6/18任務(wù)實施1Step1.設(shè)置站點Step2.新建網(wǎng)頁Step3.添加文字Step4.插入水平線及版權(quán)信息

任務(wù)實施Step5．保存并預(yù)覽網(wǎng)頁index1.htmlStep6．創(chuàng)建huanbao1.html頁面2023/6/18學習評價1學習評價序號評價指標自我評價1能夠獨立完成網(wǎng)站文件夾及子文件夾的創(chuàng)建。（10分）

2能夠創(chuàng)建index1.html網(wǎng)頁。（10分）

3能夠添加文字、插入水平線及版權(quán)信息等元素（30分）

4能夠保存并預(yù)覽index1.html網(wǎng)頁。（10分）

5能夠創(chuàng)建huanbao1.html網(wǎng)頁，在網(wǎng)頁中添加文字、插入水平線及版權(quán)信息等元素，在瀏覽器中預(yù)覽網(wǎng)頁（20）分

6能夠獨立完成任務(wù)（10分）

7學有余力，對小組內(nèi)其他同學進行過輔導(dǎo)。（10分）

2023/6/18任務(wù)分析2

完成了任務(wù)一中的兩張網(wǎng)頁的創(chuàng)建并進行了簡單的編輯后，周揚感到還需要對網(wǎng)頁進行完善，如給網(wǎng)頁添加背景和文字、插入列表元素等，使網(wǎng)頁更加完整和美觀，如圖3-2-1、圖3-2-2所示。在這個過程中，周揚將會學到：（1）網(wǎng)頁背景的設(shè)置方法；（2）Photoshop“套索工具”和“磁性套索工具”的使用；（3）列表元素的使用。任務(wù)分析圖3-2-1index2.html頁面效果圖3-2-2huanbao2.html頁面效果任務(wù)分析2023/6/182023/6/18相關(guān)知識21．Photoshop套索工具對于圖片中一些不規(guī)則區(qū)域的選取操作,Photoshop中有一些專門的工具用來選取這些不規(guī)則的區(qū)域，這就是“套索工具”。右擊Photoshop工具箱中的“套索工具”按鈕，可選擇不同的“套索工具”，如圖3-2-3所示?！疤姿鞴ぞ摺痹赑hotoshop中就是一個自由的選區(qū)筆，用鼠標單擊選取相應(yīng)的“套索工具”之后，在圖像中拖動鼠標，經(jīng)過的路徑就會建立選區(qū)。相關(guān)知識圖3-2-3套索工具2．打開網(wǎng)頁文檔（1）使用“文件”→“打開”命令。（2）使用“文件”面板。3．網(wǎng)頁屬性設(shè)置（1）打開“頁面屬性”對話框。（2）設(shè)置網(wǎng)頁背景及其他項目4.列表列表，是Dreamweaver中定義的一種特殊的符號標簽。它能使用一定的格式來使網(wǎng)頁顯示的各行數(shù)據(jù)開頭形成序號或者項目符號，使得網(wǎng)絡(luò)的數(shù)據(jù)顯示更加清晰。在“插入”面板中單擊下拉按鈕，選擇“文本”項，如圖3-2-4所示，可以顯示出列表工具欄。相關(guān)知識2023/6/18列表工具欄如圖3-2-5所示。相關(guān)知識2023/6/18圖3-2-4選擇“文本”項圖3-2-5列表工具欄相關(guān)知識2023/6/18（1）無序列表ul，也叫項目列表，有序列表ol以有序的數(shù)字或者符號作為列表的開頭，而無序列表ul各種符號開頭。格式如下：<ulTYPE=符號類型><li>內(nèi)容1<li>內(nèi)容2<li>內(nèi)容3…</ul>TYPE的符號類型以及含義如下表所示。TYPE的取值設(shè)置的符號樣式顯示效果Disc默認值，可以缺省時是實心遠點●Circle空心圓點○Square空心方塊□相關(guān)知識2023/6/18（2）有序列表ol，也叫編號列表，格式如下<ol><li>內(nèi)容1<li>內(nèi)容2<li>內(nèi)容3…</ol>（3）列表項li，打開網(wǎng)頁的代碼視圖，頁面變成拆分狀態(tài)2023/6/18任務(wù)實施2Step1.修飾index1.html頁面

Step2.制作背景圖片

任務(wù)實施Step3.插入列表元素

Step5.保存并預(yù)覽網(wǎng)頁

Step4.修飾huanbao1.html頁面

2023/6/18學習評價2學習評價序號評價指標自我評價1能夠打開已保存的網(wǎng)頁文件index1.html。（10分）

2能夠設(shè)置網(wǎng)頁背景、插入列表元素、設(shè)置列表樣式圖像等。（20分）

3能夠在Photoshop中使用“套索工具”和“磁性套索工具”在圖片中建立選區(qū)，對選區(qū)中的內(nèi)容進行復(fù)制和粘貼等操作，完成ico2.jpg的制作。（10分）

4能夠打開的“CSS規(guī)則定義”對話框，選取“列表”選項，設(shè)置ico2.jpg作為列表樣式圖像。（10分）

5能夠?qū)⒕W(wǎng)頁保存為index2.html，在瀏覽器中預(yù)覽網(wǎng)頁。（10分）

6能夠打開已保存的網(wǎng)頁文件huanbao1.html。對文本格式，網(wǎng)頁背景等進行修改，將網(wǎng)頁保存為huanbao2.html，在瀏覽器中預(yù)覽網(wǎng)頁。（20分）

7自己能夠獨立完成任務(wù)（10分）

8學有余力，對小組內(nèi)其他同學進行過輔導(dǎo)。（10分）

2023/6/18項目總結(jié)1.新建網(wǎng)頁及保存網(wǎng)頁到站點根目錄文件夾。2.添加文本，特殊字符等元素到網(wǎng)頁。3.修飾網(wǎng)頁，設(shè)置網(wǎng)頁背景等，使網(wǎng)頁效果更加美觀。4.運用列表使文本更具條理性。5.使用Photoshop的套索工具摳圖，制作素材。項目總結(jié)

通過學習項目三中周揚編輯網(wǎng)頁的方法，3-5人組成一個項目小組，制作一些簡單頁面。具體要求：1．項目組內(nèi)要選出一名組長負責組織、協(xié)調(diào)，通過小組討論，制定出評價量規(guī)，對小組成員進行評價，小組內(nèi)各成員要有具體明確的分工。2．網(wǎng)頁素材可以通過手機、數(shù)碼相機進行拍攝或從網(wǎng)上下載。3．利用Photoshop對素材進行剪切、添加