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