下载文档第一篇：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*****文件夹），以及课程报告，三部分压缩成一个文件，命名为同学的学号姓名，于202_年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以上或其他版本的请自行转换为规定格式）。
