項(xiàng)目7個(gè)人網(wǎng)站

1、 宣漢職中現(xiàn)代信息技術(shù)專業(yè)平面廣告實(shí)訓(xùn)教案 第 PAGE 17 頁 項(xiàng)目10：個(gè)人網(wǎng)站設(shè)計(jì)一、任務(wù)單項(xiàng)目任務(wù)學(xué)習(xí)目標(biāo)1、啟動photoshop。2、學(xué)會在網(wǎng)面中插入圖片。3、輸入和美化文字。4、網(wǎng)頁按鈕的制作。5、超鏈接的插入。6、退出程序。技能目標(biāo)：1、制作網(wǎng)頁要應(yīng)用到多方面的知識，培養(yǎng)學(xué)生的知識遷能力，同時(shí)給學(xué)生提供了自由發(fā)揮的空間，學(xué)生可以充分發(fā)揮自身的創(chuàng)造力與想象力，培養(yǎng)學(xué)生綜合運(yùn)用知識的能力知識目標(biāo)：熟悉photoshop cs3的軟件環(huán)境，掌握該環(huán)境下的文字處理方法；（2）掌握使用網(wǎng)站內(nèi)部的超鏈接，應(yīng)用掌握的知識制作表達(dá)一定主題、包含文字、圖片的個(gè)人網(wǎng)站。任務(wù)引入師：我們常常暢游在

2、網(wǎng)絡(luò)世界里，欣賞圖片、下載歌曲，甚至可以及時(shí)地與人聊天、視頻。網(wǎng)絡(luò)給我們提供了豐富的資源，成了我們與別人交流的重要手段。我們也可以利用網(wǎng)頁展示自我，與更多的朋友交流。 以學(xué)校要建校園網(wǎng)站為引言，校園網(wǎng)站下掛有教師個(gè)人網(wǎng)站、班級網(wǎng)站、學(xué)生個(gè)人網(wǎng)站等，激發(fā)學(xué)生要自己制作個(gè)人主頁的興趣，然后給學(xué)生布置任務(wù)，要求網(wǎng)站必須有同學(xué)們親手制作的網(wǎng)頁，才能真正成為的校園網(wǎng)站，提供大量的制作網(wǎng)頁的素材（如圖片、聲音、動畫、視頻等），同學(xué)們可以自由地發(fā)表自己的想法和觀點(diǎn)，開闊學(xué)生的思路，同時(shí)激發(fā)學(xué)生的創(chuàng)造欲望。網(wǎng)頁制作也是一個(gè)比較吃香的行業(yè)，要真正做一個(gè)好的網(wǎng)站，還必須有良好的設(shè)計(jì)功底。所以還得學(xué)很多邊緣性的軟件

3、，例如photoshop、flash等。任務(wù)實(shí)施: (個(gè)人網(wǎng)頁概述) 1制作網(wǎng)頁背景效果步驟1 新建一副RGB模式的空白圖像，設(shè)置其寬度和高度分別為26厘米和24厘米、分辨率為300像素/英寸、背景內(nèi)容為白色。步驟2 分別單擊工具箱中的前景色和背景色色塊，設(shè)置前景色為綠色（RGB參數(shù)值分別為41、175、0）、背景色為白色。步驟3 按【Ctrl+R】組合鍵顯示標(biāo)尺，分別將鼠標(biāo)指針移動至垂直標(biāo)尺和水平標(biāo)尺，拖曳鼠標(biāo)創(chuàng)建垂直參考線和水平參考線，如圖7-1所示。 圖7-1步驟4 按【Ctrl+R】組合鍵隱藏標(biāo)尺，按【Shift+Ctrl+N】組合鍵，新建圖層1。步驟5 選區(qū)工具箱中的矩形工具，單擊工

4、具屬性欄中的填充像素按鈕，然后在圖像編輯窗口中沿參考線拖曳鼠標(biāo)，繪制一個(gè)矩形，效果如圖7-2所示。 圖7-2步驟6 按【Ctrl+O】組合鍵，打開一副花素材圖像，如圖115-4所示。 圖7-3步驟7 選區(qū)工具箱中的移動工具，將打開的素材圖像移至原圖像編輯窗口中，此時(shí)圖層調(diào)板中將自動生成圖層2，調(diào)整移入的圖像的大小及位置，效果如圖7-4所示。 圖7-4步驟8 選取工具箱中的矩形選框工具，在圖像編輯窗口中拖曳鼠標(biāo)，創(chuàng)建一個(gè)矩形選區(qū)，如圖115-6所示。 圖7-5步驟9 單擊選擇反向命令反選選區(qū)，按【Delete】鍵刪除選區(qū)內(nèi)的圖像，然后按【Ctrl+D】組合鍵取消選區(qū)，效果如圖7-6所示。 圖7-

5、6步驟10 新建圖層3，選區(qū)工具箱中的鋼筆工具，在工具屬性欄中單擊路徑按鈕，然后在圖像編輯窗口中單擊鼠標(biāo)左鍵，創(chuàng)建第1個(gè)錨點(diǎn)和第2個(gè)錨點(diǎn)，如圖115-8所示。圖7-7步驟11 參照上述操作方法，依次創(chuàng)建其他錨點(diǎn)，最后將鼠標(biāo)指針移動至第1點(diǎn)上，當(dāng)鼠標(biāo)指針下方出現(xiàn)一個(gè)小圓圈時(shí)單擊鼠標(biāo)左鍵，創(chuàng)建一條閉合路徑，如圖7-8所示。 圖7-8 步驟12 按住【Ctrl】鍵的同時(shí)在圖像編輯窗口中單擊左側(cè)下方的錨點(diǎn)，激活該錨點(diǎn)，然后按住【Alt】鍵的同時(shí)拖曳鼠標(biāo)即可創(chuàng)建如圖7-9所示的控制柄。 圖7-9 步驟13 按住【Alt】鍵的同時(shí)在圖像編輯窗口中拖曳右側(cè)的控制柄，至合適位置，如圖7-10所示。 圖7-10

6、步驟14 按住【Alt】鍵的同時(shí)在圖像編輯窗口中拖曳左側(cè)的控制柄，將其向下移至合適的位置，效果如圖7-11所示。 圖7-11步驟15 參照步驟（12）（14）的操作，依次調(diào)整其他錨點(diǎn)及控制柄至合適位置，效果如圖7-12所示。 圖7-12步驟16 在路徑調(diào)板中，用鼠標(biāo)右鍵單擊工作路徑，在彈出的快捷菜單中選擇建立選區(qū)選項(xiàng)，彈出建立選區(qū)對話框，保持默認(rèn)設(shè)置，單擊確定按鈕，將路徑轉(zhuǎn)換為選區(qū)，效果如圖7-13所示。 圖7-13步驟17 選取工具箱中的漸變工具，在工具屬性欄中設(shè)置漸變類型為線性漸變，然后單擊點(diǎn)按可編輯漸變圖標(biāo)，彈出漸變編輯器窗口，設(shè)置漸變矩形條下方的兩個(gè)色標(biāo)的RGB參數(shù)值從左到右依次為（2

7、55、216、32）和（252、244、202），單擊確定按鈕。、 步驟18 在圖像編輯窗口中的選區(qū)內(nèi)從左到右拖曳鼠標(biāo)，填充漸變色。單擊選擇取消選擇命令取消選區(qū)，效果如圖7-14所示。 圖7-14步驟19 按【Ctrl+】組合鍵，將圖層3置于圖層2的下方，此時(shí)圖像效果如圖7-15所示。 圖7-15步驟20 單擊圖層調(diào)板底部的添加圖層樣式按鈕，在彈出的下拉菜單中選擇投影選項(xiàng)，然后在彈出的圖層樣式對話框中設(shè)置混合模式為正片疊底、顏色為黑色、不透明度為14%、角度為120、距離為14、擴(kuò)展為8、大小21，單擊確定按鈕，為圖層添加投影效果，如圖7-16所示。 圖7-16 步驟21 新建圖層4，選取工具

8、箱中的鋼筆工具，在工具屬性欄中單擊路徑按鈕，在圖像編輯窗口中單擊鼠標(biāo)左鍵，創(chuàng)建第1個(gè)錨點(diǎn)。移動鼠標(biāo)指針至另以位置，單擊鼠標(biāo)左鍵并拖曳鼠標(biāo)，繪制一條曲線，效果如圖7-17所示。參照上述操作，繪制一條如圖7-18所示的閉合路徑。 圖7-17 圖7-18步驟22 切換至路徑調(diào)板，然后單擊調(diào)板底部的將路徑作為選區(qū)載入按鈕，將繪制的路徑轉(zhuǎn)換為選區(qū)，如圖7-19所示。 圖7-19步驟23 參照步驟（17）和（18）的操作方法，運(yùn)用漸變工具對選區(qū)填充漸變色，效果如圖115-21所示。 圖7-20步驟24 新建圖層5，選區(qū)工具箱中的橢圓選框工具，在按住【Shift】鍵的同時(shí)拖曳鼠標(biāo)，創(chuàng)建一個(gè)正圓選區(qū)，如圖7-

9、21所示。 圖7-21步驟25 選區(qū)工具箱中的漸變工具，在工具屬性欄中設(shè)置漸變類型為徑向漸變，然后單擊點(diǎn)按可編輯漸變圖標(biāo)，彈出漸變編輯器窗口，設(shè)置漸變矩形條下方兩個(gè)色標(biāo)的RGB參數(shù)值從左到右依次為（255、216、32）和（0、0、0）設(shè)置完成后單擊確定按鈕。步驟26 在圖像編輯窗口中的選區(qū)內(nèi)從選區(qū)中心向外側(cè)拖曳鼠標(biāo)，填充漸變色，然后單擊選擇取消選擇命令取消選區(qū)，效果如圖7-22所示。 圖7-22步驟27 選區(qū)工具箱中的移動工具，按住【Shift+Alt】組合鍵，在圖像編輯窗口中向右拖曳鼠標(biāo)，復(fù)制并調(diào)整圖像，效果如圖7-23所示。 圖7-23步驟28 參照上述操作方法復(fù)制其他圖像，并調(diào)整圖像的

10、位置，效果如圖7-24所示。 圖7-24步驟29 按住【Shift】鍵，在圖層調(diào)板中的圖層5上單擊鼠標(biāo)左鍵，選中連續(xù)的副本圖層，單擊圖層合并圖層命令，將選中的圖層合并到圖層5中。步驟30 新建圖層6，選區(qū)工具箱中的直線工具，單擊工具屬性欄中的填充像素按鈕，然后在圖像編輯窗口中拖曳鼠標(biāo)，繪制一條直線，如圖7-25所示。 圖 7-25步驟31 參照上述操作方法，在圖像編輯窗口中繪制其他直線，效果如圖7-26所示。 圖7-26步驟32 按【Ctrl+O】組合鍵，打開一副蝴蝶素材圖像，如圖7-27所示。 圖7-27步驟33 選取工具箱中的移動工具，將打開的素材圖像移至原圖像編輯窗口中，此時(shí)圖層調(diào)板中將

11、自動生成圖層7，調(diào)整圖像的大小及位置，效果如圖7-28所示。 圖7-28步驟34 選區(qū)工具箱中的移動工具，按住【Shift+Alt】組合鍵，在圖像編輯窗口中向右拖曳鼠標(biāo)，復(fù)制圖像，并適當(dāng)調(diào)整圖像的大小，效果如圖7-29所示。 圖7-29步驟35 單擊圖像調(diào)整色相/飽和度對話框中設(shè)置色相為+26、飽和度為+31，然后單擊確定按鈕，效果如圖7-30所示。 圖7-30步驟36 參照步驟（34）的操作方法，運(yùn)用移動工具復(fù)制并調(diào)整圖像，效果如圖7-31所示。 圖7-312.制作導(dǎo)航條和按鈕步驟1 按【Ctrl+O】組合鍵，打開一副導(dǎo)航條素材圖像，如圖7-32所示。 圖7-32步驟2 選取工具箱中的移動工

12、具，打開一副導(dǎo)航條素材圖像，如圖7-33所示。 圖7-33步驟3 新建圖層9，選取工具箱中的矩形工具，單擊工具箱屬性欄中的路徑按鈕，在圖像編輯窗口中拖曳鼠標(biāo)，繪制一條矩形路徑，效果如圖7-34所示。圖7-34步驟4 選區(qū)工具箱中的直接選擇工具，在圖像編輯窗口中用鼠標(biāo)拖曳矩形路徑右上角和左上角的錨點(diǎn)，效果如圖7-35所示。 圖7-35步驟5 按【Ctrl+Enter】組合鍵，將繪制的路徑轉(zhuǎn)換為選區(qū)。單擊編輯填充命令，彈出填充對話框，在使用下拉列表框中選擇前景色選項(xiàng)，單擊確定按鈕。按【Ctrl+D】組合鍵取消選區(qū)，效果如圖7-36所示。 圖7-36步驟6 新建圖層10，設(shè)置前景色為黃色（RGB參數(shù)

13、值分別為254、214、21）。選取工具箱中的矩形工具，單擊工具屬性欄中的填充像素按鈕，然后在圖像編輯窗口中拖曳鼠標(biāo)，繪制一個(gè)矩形，效果如圖7-37所示。 圖7-37步驟7 選取工具箱中的橫排文字工具，在工具屬性欄中設(shè)置字體為華文中宋、字號為14點(diǎn)、顏色為黑色，在圖像編輯窗口中輸入文字，如圖7-38所示。 圖7-38步驟8 參照上述操作，輸入其他文字，并設(shè)置合適的字體、字號及顏色，效果如圖7-39所示。 圖7-39 3.制作網(wǎng)站的Logo步驟1 選取工具箱中的橫排文字工具，在工具屬性欄中設(shè)置字體為方正粗倩簡體、字號為31.76點(diǎn)、顏色為紅色（RGB參數(shù)值分別為230、0、17），然后在圖像編輯

14、器窗口中輸入文字蝶戀花，如圖7-40所示。 圖7-40步驟2 單擊文件打開命令，打開一副素材圖像，如圖7-41所示。圖7-41步驟3 選取工具箱中的移動工具，將打開的素材圖像移至原圖像編輯窗口中，此時(shí)在圖層調(diào)板中將自動生成圖層11調(diào)整圖像的大小及位置，效果如圖7-42 圖7-424.制作網(wǎng)站其他元素步驟1 按【Ctrl+O】組合鍵兩次，先后打開兩幅素材圖像，如圖7-43所示。圖7-43步驟2 選取工具箱中的移動工具，將打開的素材圖像移至原圖像編輯窗口中，此時(shí)在圖層調(diào)板中將自動生成圖層14，調(diào)整圖像的大小及位置，效果如圖7-44所示。 圖7-44步驟3 參照步驟（2）的操作方法打開一副素材圖像，

15、如圖7-45所示。 圖7-45 步驟4 選區(qū)工具箱中的移動工具，將打開的素材圖像移至原圖像編輯窗口中，此時(shí)在圖層調(diào)板中自動生成圖層14，調(diào)整圖像的大小及位置，效果如圖7-46所示。圖7-46 步驟5 選取工具箱中的移動工具，在圖像編輯窗口中按住【Alt】鍵的同時(shí)拖曳鼠標(biāo)，復(fù)制生成新的圖層圖層14副本，并調(diào)整圖像至合適的位置，效果如圖7-47所示。 圖7-47步驟6 新建圖層15，選區(qū)工具箱中的矩形工具，單擊工具屬性欄中填充像素按鈕，然后在圖像編輯窗口中拖曳鼠標(biāo)，繪制一個(gè)矩形，效果如圖7-48所示。 圖7-48 步驟7 參照步驟（4）的操作方法，運(yùn)用移動工具移動并復(fù)制剛繪制的矩形，效果如圖7-4

16、9所示。 圖7-49步驟8 新建圖層16，選區(qū)工具箱中的矩形工具，單擊工具屬性欄中路徑按鈕，在圖像編輯窗口中拖曳鼠標(biāo)，繪制矩形路徑，如圖7-50所示。 圖7-50步驟9 選取工具箱中的畫筆工具，在工具屬性欄中設(shè)置畫筆類型為尖角2像素、不透明度和流量均為100%.步驟10 設(shè)置前景色為黑色，切換至路徑調(diào)板，單擊調(diào)板底部的用畫筆描邊路徑按鈕，為路徑填充前景色，在調(diào)板底部的灰色空白處單擊鼠標(biāo)左鍵，隱藏繪制的路徑，效果如圖7-51所示。圖7-51步驟11 選取工具箱中的橫排文字工具，在工具屬性欄中設(shè)置字體為華文中宋、字號為16點(diǎn)、顏色為綠色（RGB參數(shù)值分別為41、175、0），在圖像編輯窗口中輸入文字個(gè)人資料，效果如圖7-52所示。 圖7-52步驟12 選取工具箱中的橫排文字工具，在工具屬性欄中設(shè)置字體為楷體