第一篇：ps課程作業(yè)二：制作網(wǎng)頁效果圖
課程作業(yè)2（圖層的應(yīng)用）：
通過以下指導步驟，學會如何在photoshop中制作網(wǎng)頁效果圖。
最終效果圖
在photoshop中新建文檔
1在photoshop中新建一個文檔，尺寸為980px × 830px.如果你在photoshop軟件界面中，沒有看到在畫布的周圍看到標尺，點擊試圖>標尺（Ctrl + R）可以顯示標尺。在畫布的四個邊，分別拖拽四條標尺線。在這四條線中間，我們將繪制我們的頁面。
創(chuàng)建頁面背景
-***3141516
你可能注意到，我們剛剛創(chuàng)建的矩形并沒有圓角。為了糾正這個小的細節(jié)，我們應(yīng)用剪輯蒙板（clipping mask）這個概念。右鍵點擊圖層 “navigation bar” layer, 選擇創(chuàng)建剪切蒙版。
好了，我們接下來要做的是，創(chuàng)建當前頁的按鈕。選擇矩形工具(U), 設(shè)置顏色為#A6A43F, 創(chuàng)建一個高為60px的矩形。
設(shè)置透明度為15%，命名該圖層為”current page button“.36 然后向下設(shè)置剪輯蒙板。
選擇剛剛的四個圖層，點中ctrl然后分別在圖層面板中點擊這四個圖層，然后點擊 Ctrl + G群組。設(shè)置這個群組名為 “bg & navigation bar“.38 選擇文字工具(T)，給導航添加一些文字，用顏色#A6A43F.在這次的設(shè)計中，我用的字體是 Avenir LT 65 Medium。如果你沒有這個字體，可以用你喜歡的字體代替。（可以借助標準線來制作）
五、給“特色項目”部分，自定義一個圖案
好了，我們要創(chuàng)建一個圖案。新建一個文檔，文件>新建(Ctrl + N), 尺寸是 5px * 5px, 透明背景。
設(shè)置前景色為 #2A2009, 在工具欄中選擇鉛筆工具(B)，在你的畫布中間，畫一個1px大小的方框。
點擊編輯>定義圖案。命名這個圖案，然后點擊ok。好了，你可以關(guān)閉這個文件了。
六、創(chuàng)建“特色項目”區(qū)域
選擇矩形工具(U),創(chuàng)建一個高為330px的任何顏色的矩形。
在圖層面板上，雙擊該圖層，打開圖層屬性面板。按照下圖進行參數(shù)設(shè)定。
命名這個圖層為 “pattern“.45 選擇圓角矩形工具(U), 設(shè)置圓角半徑8px, 顏色 #A6A43F, 創(chuàng)建一個寬 940px 高240px的圓角矩形。
設(shè)置圖層透明度為50%，命名該圖層為 “featured project bg“.47 選擇矩形工具(U), 設(shè)置顏色#A6A43F, 創(chuàng)建一個尺寸為 610px * 220px 的矩形。這個將會是“特色項目”的圖片的位置。，命名該圖層為 “image bg.”
導入任何你喜歡的圖片。
把圖片放在你剛剛創(chuàng)建的矩形的上面，在圖層面板上單擊創(chuàng)建圖層剪切蒙版。命名這個圖層為 “image“.50 選擇文字工具(T)，在右邊添加一些文字。按照下圖進行書寫。群組這些文字，命名該群組為 “text“.七、創(chuàng)建按鈕call-to-action
好了，我們要在“特色項目”的底部創(chuàng)建兩個按鈕。選擇圓角矩形工具(U), 設(shè)置半徑為8px，顏色為#A6A42F, 創(chuàng)建一個小矩形。命名該圖層為 “button 1“.52我們希望按鈕的上面不是圓角。按照下面的操作進行：
A.B.確定圖層”button 1″的蒙版是選中的。
選擇直接選擇工具(A)，在你看到的路徑上單擊。好了，這時候你將看到在每個圓角上都有兩個錨點。
C．選擇轉(zhuǎn)換點工具(默認圖標是個小鋼筆頭，在這一組工具中可以找到)，單擊這四個錨點。
D 再次選擇直接選擇工具(A)，按住shift鍵創(chuàng)建直角邊。
設(shè)置該圖層透明度為30%.54 然后用文字工具l(T)添加一些文字。設(shè)置顏色為 #EAEAB7.55 你也可以添加一些小圖標。文件—置入，導入圖片。
群組所有的文字和圖標圖層，命名太群組為”button 1“.57 創(chuàng)建另一個按鈕。（可復制第一個button，然后逐層修改）
為了方便管理，群組所有關(guān)于”特色相聚”的圖層和群組層，命名這個大的群組為”featured project“.七、創(chuàng)建3D絲帶
選擇矩形(U)創(chuàng)建一個高為130px的顏色為#A6A43F的矩形，如下圖。命名該圖層為 “ribbon background“.60 選擇圓角矩形(U), 設(shè)置半徑為10px，在你剛剛創(chuàng)建的矩形的左邊的位置，拖拽一個矩形。在這一步，你可以拖拽一些標尺線作為輔助。
點擊你之前創(chuàng)建的圓角矩形的矢量蒙版，讓它被選中。然后選擇圓角矩形(U), 在屬性欄中點擊從形狀減去區(qū)的按鈕，創(chuàng)建一個圓角矩形。按照下面的截圖進行操作。
創(chuàng)建一個新的圖層，右鍵點擊設(shè)置為創(chuàng)建剪貼蒙版。
選擇漸變工具(G)，按照下面的截圖拖拽一個白色到透明的漸變。
設(shè)置該圖層渲染模式為疊加，透明度為30%，命名為 “highlight“.65 選擇圓角矩形工具(U), 設(shè)置顏色為 #878533，在圖層”ribbon background”上創(chuàng)建一個圓角矩形。
選擇矩形工具(U), 在屬性欄中點擊從形狀減去區(qū)按鈕要的那部分。，然后創(chuàng)建一個矩形。如圖。剪切掉我們不
雙擊圖層，打開圖層屬性面板。按照下面的截圖進行參數(shù)設(shè)置。
重復以上步驟，不過這一次是在絲帶的右邊?？梢詮椭啤皥D層”（注意是圖層）進行操作，然后通過ctrl+t進行拖動變形等轉(zhuǎn)換。
群組所有關(guān)于絲帶的圖層，命名該群組為”ribbon“.70 在圖層”ribbon background”上創(chuàng)建一個新圖層。然后按照之前的操作，創(chuàng)建一個陰影。
選擇圓角矩形工具(U), 設(shè)置半徑為8px，顏色為#E1E0C1，創(chuàng)建四個圓角矩形，大小為220px * 110px.72 設(shè)置透明度為50%，然后群組他們。命名該群組為”images“.73 在工具欄中選擇文字工具(T)，在你的布局下面添加一些文字。也可以添加一些圖標。
應(yīng)用文字工具(T)，顏色為 #E0E0AC。在文檔的頂端，寫上整個站點的名字。
雙擊該圖層，打開圖層屬性面板。按照下圖進行參數(shù)設(shè)定。
然后寫標語。
為了讓效果圖更完整，你可以選擇四個圖片，導入到你的文檔中。放在你的絲帶上。
好了，完成了！
如果你按照該教程進行學習，你應(yīng)該能得到下面的效果。單擊這里查看完整效果。
546-
第二篇：網(wǎng)頁效果圖的制作公開課教案
網(wǎng)頁效果圖的制作
——制作網(wǎng)頁標志橫幅
課程：電子商務(wù)網(wǎng)頁制作
班
級：09電商3+2 時間：12月16日第三節(jié)
授課教師：李曉琳
教學目標：知識目標：
1、能描述創(chuàng)建網(wǎng)站主頁的目的
2、能列舉網(wǎng)頁應(yīng)包含的內(nèi)容
3、了解網(wǎng)頁標志橫幅的作用
技能目標：
1、能繪制網(wǎng)站主頁的網(wǎng)頁標志橫幅
2、掌握fireworks工具屬性的設(shè)置方法
情感目標：對操作過程中遇到的問題能主動思考具有較強的網(wǎng)頁設(shè)計
創(chuàng)意思維、藝術(shù)設(shè)計素質(zhì)。
教學重點：
1、Firewoks中矩形工具、文字工具、直線工具、庫命令的使用
2、Firewoks中元件轉(zhuǎn)換為按鈕的操作
難 點： 元件轉(zhuǎn)換為按鈕及庫命令的使用 教學方法： 任務(wù)驅(qū)動教學法
一、導入
提問：同學們平時的休閑方式有哪些呢？——影視文化通常是我們茶余飯后的談資，平時也會去電影院看電影是吧？特別是大片，往往去了電影院要排長隊，而且還不一定買的到票，在電子商務(wù)迅速發(fā)展的推動下，網(wǎng)上訂票為我們消除了排隊買票的煩惱。那網(wǎng)上訂票是基于什么樣的平臺呢？下面我們來看下我們德清的大地數(shù)字影院的網(wǎng)絡(luò)平臺——“哈票網(wǎng)”。
二、新授
任務(wù)一：網(wǎng)頁橫幅的制作——
1、“哈票網(wǎng)”網(wǎng)站的展示，分析引出一個網(wǎng)頁應(yīng)包含哪些內(nèi)容。
提問：看了這個頁面，請你說出一個網(wǎng)頁包含哪些元素呢？
（學生回答，教師補充）——引出網(wǎng)頁橫幅的重要性
2、為什么要制作網(wǎng)頁橫幅？
在一個簡單的網(wǎng)頁中，上方的橫幅是最重要的視覺元素。在很多博客網(wǎng)頁中，它甚至是唯一的視覺元素。所以它的作用可以說是相當大的。它必須能夠與網(wǎng)站的風格配合，并能傳達視覺上的信息。它必須讓人看上一眼就讓人知道這個網(wǎng)站是屬于什么類型，風格是什么。（展示不同網(wǎng)站的不同網(wǎng)頁橫幅效果圖，說明網(wǎng)頁橫幅是可以多種形式展現(xiàn)的。）
3、提出任務(wù)，教師演示：效果圖展示，操作示范
（1）新建一個文檔：寬1200像素，高為600像素。
（2）矩形工具、圓角矩形工具、橢圓工具、文字工具、直線工具的使用及屬性設(shè)置
4、學生活動：按所給效果圖及素材制作網(wǎng)頁橫幅（根據(jù)男女生興趣偏好不同，男女分組操練：男生做NBA網(wǎng)頁橫幅、女生做淘寶門戶網(wǎng)的網(wǎng)頁橫幅）
操作步驟:（1）新建一個文檔：新建一個文檔：寬1200像素，高為600像素。
（2）用矩形工具繪制兩個矩形：可與畫布同長，寬度根據(jù)需要自定，大矩形的顏色設(shè)為“#333333”,小矩形的顏色設(shè)為“#666666”（3）在小矩形右側(cè)添加文字，選擇“文字工具”，添加文字，其屬性設(shè)置為：字體——宋體，顏色——“#66FF00”，字號——“15”（4）用橢圓矩形工具在畫布的左側(cè)繪制兩個圓形，一大一小，填充顏色漸變，顏色為“#FFFF00”至“#00CC00”,如圖所示（5）用文字工具，在大圓上添加文字“哈”，文字屬性設(shè)置為：“白色”“隸書”“90”；小圓上添加文字“票”，屬性設(shè)置為“白色”“幼圓”“30”；再用文字工具在“哈票”右側(cè)添加文字“快速訂票 輕松觀影”，屬性設(shè)置為“白色”“幼圓”“24”，緊接著下方添加網(wǎng)址，屬性設(shè)置為“#66FF00”“Century Gothic”“22”
5、教師巡回指導，發(fā)現(xiàn)問題，個別輔導
任務(wù)
二、美化橫幅——添加陰影、元件轉(zhuǎn)換為按鈕
6、提出任務(wù)，教師演示：效果網(wǎng)頁橫幅展示，操作示范
（1）添加陰影
（2）元件轉(zhuǎn)換為按鈕的操作（3）“庫”命令的操作 學生活動：按所給效果網(wǎng)頁制作
操作步驟：（1）選中要添加陰影的對象“哈”，選擇“命令” ——“創(chuàng)意”——“添加陰影”，調(diào)整到所需要的位置
（2）選擇“圓角矩形工具”繪制一個圓角矩形，顏色填充為“#333333”描邊選擇“鉛筆”，筆尖大小和邊緣都為“3”，顏色為“#66FF00” 按
（3）打開“庫”面板,將元件拖動到網(wǎng)頁中，排列對其，選中對象，選擇文字工具，添加文字“選影院訂票”“選影片訂票”（4）按
教師巡回指導
三、點評：對學生上傳的作品進行點評，學生互評。
四、課堂小結(jié)：
本節(jié)課我們學習了網(wǎng)頁標志橫幅的制作，學習FIREWORKS中矩形工具、圓角 矩形工具、文字工具、直線工具及庫命令的操作，重點掌握元件轉(zhuǎn)換為按鈕的操作及庫命令的使用。
五、作業(yè)：完成實驗指導練習的操作練習和實驗報告
第三篇：網(wǎng)頁設(shè)計與制作課程作業(yè)任務(wù)書
廣新09級《網(wǎng)頁設(shè)計與制作》課程作業(yè)任務(wù)書
一、目的與任務(wù)
《網(wǎng)頁設(shè)計與制作》課程作業(yè)是《網(wǎng)頁設(shè)計與制作》課程教學中的一個重要的環(huán)節(jié)，是對學生進行的一次較為全面的網(wǎng)頁設(shè)計與制作的訓練和考核。其基本目的是：
（1）培養(yǎng)學生理論聯(lián)系實際的設(shè)計思想，訓練綜合運用所學的基礎(chǔ)理論知識，結(jié)合生產(chǎn)實際分析和解決網(wǎng)頁設(shè)計與制作中問題的能力，從而使基礎(chǔ)理論知識得到鞏固和加深。
（2）學習掌握網(wǎng)站的一般設(shè)計過程和方法。
（3）對學生所學知識的程度進行考核。
二、教學基本要求
（1）確定設(shè)計網(wǎng)站的主題和風格。
（2）合理設(shè)計網(wǎng)站結(jié)構(gòu)圖。
（3）根據(jù)網(wǎng)站結(jié)構(gòu)圖，對各個頁面進行布局和樣式設(shè)計。
（4）完成課程作業(yè)報告。
三、課程作業(yè)題目具體要求
1、網(wǎng)站有一個主題，比如：個人網(wǎng)站、購物網(wǎng)站等；
2、每個網(wǎng)站至少包含5個以上的html文件；（網(wǎng)站的首頁統(tǒng)一名稱為:index.html）
3、最后提交兩個內(nèi)容：
1)打印紙質(zhì)報告（具體要求見報告模板）；
2)網(wǎng)站源文件。
做完后找老師驗收通過后發(fā)到365109338@qq.com。郵件主題上一定要寫明：學號+班級+姓名+網(wǎng)頁設(shè)計與制作
第四篇：網(wǎng)頁制作課程知識點歸納范文
《網(wǎng)頁制作》復習題）
第1章 網(wǎng)頁制作概況 網(wǎng)頁的概念
網(wǎng)頁是用HTML（超文本編輯語言）語言編寫，通過WWW傳播，并被WEB瀏覽器翻譯成為可以顯示出來的集文本、超鏈接、圖片、聲音和動畫、視頻等信息元素為一體的頁面文件。
網(wǎng)頁HTML文件與web瀏覽器間的關(guān)系理 參照P5
首頁和主頁的異同點
首頁與主頁的區(qū)別:瀏覽網(wǎng)站時最先訪問的頁為首頁，一般為歡迎信息，通過鏈接再進入主頁（例如：榕樹下網(wǎng)站）。主頁是整個網(wǎng)站的導航中心（例如：163網(wǎng)站）。有些網(wǎng)站首頁即主頁。
網(wǎng)頁制作的常用工具軟件有哪些
FrontPage、網(wǎng)頁制作三劍客（Dreamweaver與Flash、Fireworks并稱為Macromedia的網(wǎng)頁制作三劍客）、Photoshop ??
網(wǎng)頁正文區(qū)
第五篇：網(wǎng)頁制作大作業(yè)要求
網(wǎng)頁制作大作業(yè)要求
1、根據(jù)所學知識制作*****主題網(wǎng)站；
2、至少應(yīng)該有主頁、注冊頁面及其他。主頁要求有導航欄區(qū)、登陸注冊區(qū)、以及其他主題
功能圖片預覽區(qū)；
3、完成注冊、登陸功能，后臺腳本采用PHP（或其他如ASP等）、數(shù)據(jù)庫采用MySQL(或
其他)，注冊及登陸成功后應(yīng)該有提示成功信息；
4、注冊用戶登陸后可以上傳本地其他圖片到某某文件夾中，并提示上傳成功信息；未登陸
用戶無此功能；
5、注冊用戶登陸后的其他功能可以根據(jù)自己能力水平進行其他方面設(shè)計，功能越多者結(jié)課
成績會越高；
6、完成系統(tǒng)后，書寫1000字以上課程報告，格式不限，將自己所做網(wǎng)站各個功能跑一遍
并截圖到報告中，圖的上下方要有相應(yīng)文字解釋；
7、最后提交作業(yè)包括：網(wǎng)站源碼和數(shù)據(jù)庫（HTML、CSS、JavaScript、PHP 以及所安裝
WAMP目錄中 MySQLdata*****文件夾），以及課程報告，三部分壓縮成一個文件，命名為同學的學號姓名，于2011年1月18日晚12點之前發(fā)到老師郵箱（guo_lijie163@163.com），過期沒有結(jié)課成績；
8、每位同學都要按要求完成大作業(yè)，逾期未能上交作業(yè)者無最后結(jié)課成績；
9、考慮到學校文科類學生以前沒有C語言基礎(chǔ)，相應(yīng)課程中的PHP 及MySQL比較難掌
握，所做大作業(yè)只需完成前臺頁面部分，要求至少3級頁面鏈接、頁面導航、注冊登陸功能區(qū)（點擊注冊 或登陸可以沒有反應(yīng)的）圖片展示等功能區(qū)，頁面布局顏色等要求高質(zhì)量，質(zhì)量低劣者給予較低分數(shù)；文科類學生若完成同其他專業(yè)學生作業(yè)要求內(nèi)容，可不考慮頁面布局顏色質(zhì)量，鼓勵完成較高要求作業(yè)，并給予完成者較高分數(shù)；
10、無論何專業(yè)學生，最后提交的作業(yè)都包括網(wǎng)站源碼和1000字左右課程報告，缺少
一項者均給予不及格處理；
11、本結(jié)課成績分兩部分，平時作業(yè)和大作業(yè)按4:6比例，HTML（XHTML）、CSS、JavaScript、PHP（+MySQL）每一部分10分，具體要求平時上課都已說明，缺少一項者扣10分。大作業(yè)成績按照2部分給分，其一是可以正常運行的網(wǎng)站及代碼，其二是課程報告（報告格式采用***.doc，office2007以上或其他版本的請自行轉(zhuǎn)換為規(guī)定格式）。
點擊咨詢 