网页毕业设计任务书

第一篇：网页毕业设计任务书

网页设计与制作课程作业任务书

广新09级《网页设计与制作》课程作业任务书

一、目的与任务

《网页设计与制作》课程作业是《网页设计与制作》课程教学中的一个重要的环节，是对学生进行的一次较为全面的网页设计与制作的训练和考核。其基本目的是：

(1)培养学生理论联系实际的设计思想，训练综合运用所学的基础理论知识，结合生产实际分析和解决网页设计与制作中问题的能力，从而使基础理论知识得到巩固和加深。

(2)学习掌握网站的一般设计过程和方法。

(3)对学生所学知识的程度进行考核。

二、教学基本要求

(1)确定设计网站的主题和风格。

(2)合理设计网站结构图。

(3)根据网站结构图，对各个页面进行布局和样式设计。

(4)完成课程作业报告。

三、课程作业题目具体要求

1、网站有一个主题，比如：个人网站、购物网站等;

2、每个网站至少包含5个以上的html文件;(网站的首页统一名称为:index.html)

3、最后提交两个内容：

1)打印纸质报告(具体要求见报告模板);

2)网站源文件。

做完后找老师验收通过后发到365109338@qq.com。邮件主题上一定要写明：学号+班级+姓名+网页设计与制作

第二篇：以任务为导向的《网页设计与制作》课程教学设计

样刊快递到付至：辽宁省锦州市开发区西海路东段2号辽宁理工职业学院 陈雪娇(收)15566561985 作者简介：陈雪娇(1985—)，女，辽宁锦州人，硕士，辽宁理工职业学院教师

任务导向法高职在《网页设计与制作》实训课程中的应用

陈雪娇

(辽宁理工职业学院，辽宁锦州 121007)

摘要：随着职业教育的蓬勃发展，传统的教学方法在课程中亟待改进。本文主要研究在任务导向法的指导下，对实训课的教学过程进行重新设计，对教学目标重新定位，选取任务为导向的教学内容，建立多元评价体系，构建新型的教学关系。 关键词：任务导向;课程设计

《网页设计与制作》是一门实践性很强的学科，授课过程的实践表明：“任务导向法”在本课程中的能够促进学生学习的积极性，它符合素质教育以学生为主体、教师为主导的思

①想，同时也符合教育理论“乐学教育”、“愉快情感”的教育思想理念。

一、基于任务为导向教学目标的确定

高等职业院校《网页设计与制作》课程旨在培养计算机前台网页制作人员，因此，该课程应以行业需求确定为培养目标，以实践能力为目标实施教学活动，用多元的评价机制评价

②教学效果，并突出以能力为主的理实结合的教学目标。

教师可以将《网页设计》课程分为3个模块：运用PS对网页进行效果制作;运用Dreamweaver软件搭建网页、运用 PS、Flash 软件为网页制作 LOGO 及广告动画、三个软件的综合使用，并分别确定如下目标。

(一)能力目标

能够具备规划网站能力，编写网站策划书;能够进行网站效果图设计及网站动画设计;能够应用新技术DIV+CSS进行网站布局，进而进行静态网站的开发与制作。

(二)知识目标

掌握 Dreamweaver 的工作环境、菜单、工具栏的使用方法;掌握新建网站的方法、文档的保存方法;掌握网页的编辑技术;掌握网页超链接的插入和编辑技术;掌握表格、布局表格、单元格、框架、层的辅助定位工具操作;掌握文本、图片、动画、视频的插入、编辑、格式设置的方法;掌握利用 PS 制作处理网页中所需图像的操作方法及图像格式转换技术;掌握基本动画和高级动画的制作。

(三)素质目标

培养学生的敬业精神、团队协作神;自主学习能力;沟通能力、感悟能力;表达能力、知识应用能力;获取知识能力、自我发展能力、创新能力;责任感、效率观念。

二、基于任务为导向教学内容的选取

教师根据划分的模块可以将整个项目分为2个子项目，每个子项目对应的子任务如下：

(一)用ps制作网页效果图

制作 LOGO 及广告动画制作网页动画;制作网站LOGO、最终形成网页效果图。网站风定位、网站布局设计、网站草图绘制。

(二)搭建网页

组织和管理网页文件和文件夹;进行网页布局;超链接的制作和编辑;网页元素的插入和编辑。处理网页中的图形图像制作和处理网页中所需的图形图像文字边框等素材。

三、基于任务为导向教学过程的实施

本次教学实训主要是以学生的独立分析、研究、实践为主，教师的传授、指导和共同参与展开的。

(一)实训内容分析 本次实训的主要内容就是设计制作PS网页效果图，并通过效果图完成制作网页。

(二)实训过程分解 1.任务解析

本项目属于企业类网站，在前面学习的基础上可将这类站点的开发简化为：项目的前期策划、效果图设计、动画设计制作、网站静态页面的编辑。

2.学习资源的发布

明确任务后，教师帮助学生理解任务、分析任务、分发各种图标及素材等，收集好所需资源。

3.计划与决策

在教师的建议下分组，明确分工，细分任务，按照计划开展进度。教师要实时关注学生进度，提出可行性建议和知道意见，形成可行方案。

4.实施

教师下达学习任务，学生根据任务做好计划，对于重点难点进行讲解和分析，学生做好知识点记录。对于重点难点，教师先行演练，学生同步跟练。简单知识点可以学生自主学生，商讨学习，自己解决完成任务中遇到的问题。

(三)“双品”转化

“双品”转换，即作品到产品的转化。是在临摹学习过后，自行设计一套产品，这既是从学习到创作的提升;也是学生学习领域到职场领域的过度。鼓励学生自己设计一个完整的网站，实际是将网站欣赏、网站规划、效果图设计、网页布局设计等教学模块进行重构和细化，在自己的创作中不断发现和解决问题，对实训课程之外的另一种强化和延伸。从学生的作品与产品中，不可否认学生已经熟练了网页的制作软件：Ps、Flash、Dw,但是作为一名专业从事网页工作的设计师，除了掌握这些，还需要在视觉素养方面更上一层楼。否则，我们的学生只能是工匠，而不是设计师。

四、基于任务为导向教学评价的确定

课程的评价模式通过多方面相结合综合评价学生的知识掌握情况、技能水平和综合素质，学生自评、学生互评、综合评定多元评价模式，过程评价与最终结果评价相结合。

五、总结

总之，教无定法，重在得法。以项目为载体、以任务为导向的教学方法能够调动高职院校的学生学习积极性。学生在进行项目设计时，操作更加灵活，展示自己的思路，从而更主动地参与到教学活动中来，促使学生为完成项目而进行多渠道的自主学习，让学生能在知识的学习和将来的工作岗位间实现零距离接触，为学生走向工作岗位奠定一定的基础。

参考文献：

[1]杜理明.“任务导向法”在计算机基础教学中的应用及效果[J].河北理工大学学报,2010(10) :89-91. [2]都桂英.高职院校《网页设计》课程教学设计[J].教育理论与实践,2010(9) :57-59. [3]吴俊荣.基于行动导向的《网页设计与制作》课程教学设计研究[D].东北师范大学,2012 [4]康康.论网页设计课程教学设计 [D].南京艺术学院,2012

第三篇：PS设计网页立体效果图标阴影网页设计教程

最终效果

这里是作品预览图. 点击此处预览全图.

新建PSD文件

1 开始创建文档(Ctrl+N); 高和宽均为1200 像素.

使背景图层可编辑

2 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑, 在图层面板双击背景图层 (如果图层面板未激活,按下F7触发). 另外一种方法, 你可以在背景层上击右键,选择 “背景图层”. 一旦双击之后, 将会弹出对话框默认如下显示). 输入你背景图层的名字按下确定; 之后我们可以自由的编辑背景层.

创建背景层

3 现在我们的背景层可以编辑了,双击图层缩略图增加渐变图层样式; 根据下图设置样式参数.

4 创建新图层(Ctrl+Shift+N) 命名为 “header background“. 选择矩形选区工具(M) 在画布顶端绘制矩形选区;选区大概150px高,宽度与画布相同.

5 使用任意颜色填充选区(Alt+Backspace)增加图层样式.

6 建立新层 (Ctrl+Shift+N) 标志为 “navigation background“. 重复4 – 5步, 只是这次的选区只有50px高, 宽度仍然与画布一致,并且一定要放置在上面选区的下方.

7 填充选区(Alt+Backspace),任意颜色均可,并且增加一对图层样式,(颜色渐变以及描边选项).

你看到的应该是这样.

创建顶部

8 建立新层 (Ctrl+Shift+N)标志位”header“,选择矩形选区工作,在菜单栏调整宽度为850px 高度为150px.

9 将选区置于画布中央, 确保选区的底部在”navigation background”图层的描边之上.

10 填充选区 (Alt+Backspace) 选择任意颜色, 然后增添以下样式.

增加顶部文字

11 使用横排文字工具添加网站的标题和口号. 设置参照下图.

效果看起来应该是这样的.

创建导航栏

12 创建新图层(Ctrl+Shift+N) 命名为 “navigation“.使用矩形选区工具(M),设置固定大小: 850px 宽 和 50px 高.

13 在顶部下面新建选区, 填充任意颜色.

14 现在,为你的 “navigation”层增加3种样式.

看起来应该是这样的.

15 使用横排文字工具(T) 在你的导航栏上面增加导航链接.

增添导航经过按钮

16选择圆角矩形工具(U) 设置半径为10px.

17 画出一个小矩形大小为80px x 50px.

18 使用矩形工具(M)在刚才圆角矩形的上半部分再画一个矩形. 填充同样的颜色.

19在图层面板右击选择新建的图层并且复制. 将新复制的图层180度旋转,编辑> 变换 > 旋转 180. 最后, 使用移动工具将两个新建的图形紧挨在一起并且处于同一水平线上.

o

20 使用矩形选区工具切除不想要的部分. 在新建的图层下半部份新建一个选区, 按下 Del键清除.

21 使用移动工具(V) 和方向键对齐两个图形, 确保它们不是直接重叠. 按照下图所示, Ctrl + 点击图层面板中的缩略图载入较小图形的选区.

22 切换到较大图层按下del键清除不想要的部分. 重复上述步骤,你将看到以下图形.

改变链接经过样式

23当你的链接经过按钮一旦完成你可以删除副本, 然后重命名为”nav hover“. 现在开始,为它增加一组图层样式.

24 将 “nav hover”层移至 navigation 文字图层下方. 将文字的颜色改为白色(#FFFFFF).

25 在你”nav hover” 按钮图层的下方, 新建一个图层(Ctrl+Shift+N) 命名为 “nav hover extra“.在本层上, 使用椭圆选区工具新建一个小圆,颜色设置为#A3002F.

26切除椭圆被导航栏挡住的下半部分,调整到合适位置之后再复制一份.

看起来应该是这样的.

创建内容区域

27 建立新图层(Ctrl + Shift + N) 命名为 “content area“. 使用矩形选区工具, 新建选区宽度为850px , 与我们平时的框框一样,高度可以根据你的内容增加.填充任意颜色并且调整样式.

28 拖移”content area(内容区域)”图层到”navigation(导航)” 层下方然后使用移动工具(V)调整内容区域,是它与导航栏相交的部分像凹凸不平的线.

创建搜索框

29 新建图层(Ctrl+Shift+N) 命名为 “search field“在导航区域的右边新建矩形选区.

30 选择 编辑 >填充(Shift+F5) 填充白色(#FFFFFF), 增加描边样式.

31 使用横排文字工作在搜索区域插入文字.

32 紧挨着搜索区域的地方,使用矩形选区工具(M)新建另外矩形.

33 填充任意颜色并且为图层加入渐变叠加和描边两种图层样式; 根据下面图片设置.

看起来应该是这样的.

创建特色区域

34 建立新层 (Ctrl+Shift+N)命名为”featured area“,使用圆角矩形工具新建矩形,圆角半径为10px.

35 使用多边形工具(L) 创建锐利的箭头指向左上部分. 为箭头填充同样的颜色.

36 现在为你的特色区域图层增加一对图层样式(渐变叠加和描边) .

填充特色区域内容

37 建立新层(Ctrl+Shift+N) 命名为 “featured border” 使用矩形选区工具(U), 在特色区域里面新建矩形.

38 按Ctrl键点击区域缩略图载入选区, 然后点击”旋转> 修改 > 收缩”. 收缩区域威10px, 然后按下OK.

39 载入你想要的图片 (我使用一些花的图片), 打开ps, 复制图片到你的剪切板(Ctrl + C). 确保我们上一步创建的选区仍然处于激活状态,点编辑 >粘贴入(Shift+Ctrl+V).图片就会粘贴到选区里面.

40 在图片右侧增加虚拟的标题和文字.

创建内容区域的三维绸带

41 使用和导航经过按钮类似的方法创建左边部分, 区别在于这次重叠区域更加长,并且是水平调整(如果需要请重新跳回阅读).

42 在绸带的结尾部分(右手边),使自定义形状工作(L)创建三角形 然后按下del键删除不需要部分. 最后, 增添图层样式和虚拟文字.

43 复制三维绸带,点击图层选择编辑 >变换> 水平翻转. 使用移动工具调整(V) 到右边; 他们将作为侧边栏的标题部分

44 在每个标题下面增加文字或者一两张图片.

创建页脚

45 再次创建鼠标经过按钮(或者, 你可以简单复制上面已经做过的).

46 根据下图颜色列表更改渐变样式.

47 合并并且旋转该层,通过 编辑> 变换 > 逆时针旋转90°. 移动到图层左边.

48 复制该图形通过编辑>变换>水平翻转. 移动到图层另外一边.

49 将两个图形合并到同一个层(Ctrl+E), 放大其中任一个图形 (Z) , 类似下图创建选区,选择编辑> 自由变形(Ctrl+T).

50 选择中间的锚点拖拉到画布的另外一边.

看起来应该类似这样.

51 最后,使用横向文字工具写入你页脚的信息.

第四篇：网页设计的黄金比例你知道吗？【网页设计教程】

作者: 一网学

最后更新时间：2015-08-19 10:22:52 作为一个网页设计师开始一个项目时经常会考虑到网页的布局，虽然现在很多人倾向使用 Grid css框架(如960，blueprint)，但有时也需要设计一些独特的布局。今天我们要探讨如何将黄金分割理论运用到网页设计中，大部分涉及到的技术 也同样适用于其他的设计或艺术类工作，当然主要还是针对于网站设计布局。 黄金比例

它的值大约等于1.618。黄金分割从文艺复兴时就开始了。那个时代的艺术家 对黄金分割十分推崇，并且广泛运用在各种设计作品上，数百年来，在建筑、雕塑、绘画等领域都可以看到黄金分割的身影，今天我们同样可以将它运用在数字艺术上。

黄金分割是一个数学的术语，所以开始可能不是很好理解。我们可以简单举例讲解，假设有两个线段a和b，如果它们的长度a+b/a的值等于a/b，即a+b/a=a/b=1.618，那么黄金分割就成立了，a和b中间就是黄金分割点。 黄金分割的运用

以一个960px宽度的网页设计布局为例，假如我们要将这个网页分成两栏，如何才能找到他们的黄金分割点呢?

非常简单，从上面的数学公式我们知道a+b/a=1.618，960px就相当于a+b的值，所以只要用960/1.618=593，所以593px的位置就是黄金分割点。这样两栏的网页布局，左边栏宽度设为593px，右边栏宽度设为367px(960-593)就可以了。

这个方式同样适用于一些非固定的弹性的网页布局，只要通过同样的计算公式得到相应数值用相对单位(如百分比)表示即可，这样的网页设计是令人感觉最自然的。你也可以进一步将网页分成3栏、4栏。

当然黄金分割比例只是在设计上的一个指导而已，如果你可以打破这个规则又能保持网页设计页面的自然平衡也是可以的，作为一个通常的规则，经常把黄金比例用5：3来代替，虽然不是非常精确，但是却更直观和方便使用。

三分法

就像前面说过的一样，在设计网页时，不应该完全拘泥于某个设计理论，网页设计不需要完全遵循1.618这个数值。三分法是运用黄金分割的一个简单实用的方法。

三分法是用两条水平线和垂直线将构图在水平和垂直方向上三等分。这四条线交叉会形成四个点，这四个点称之为关键点，重要的设计元素最好放置在这四个 地方。很多网页设计已经在不知不觉中运用了三分法，如网站重要的信息(logo、导航栏)会放置在左上角，右上角可能会放置重要性稍微低一点的的内容。当 你在考虑放置标题、按钮和链接的位置时，就可以考虑用三分法来做参考了。当然，同样要灵活运用，不要“严格遵循”。

黄金矩形(Golden Rectangle)

在网页设计布局时，根据功能的不同将网页分成几个矩形，这些矩形的大小参照黄金分割比例，这样就形成了很多黄金矩形。这些矩形可以解决你在网页设计 布局中碰到的大部分困惑，比如你可以通过这些黄金矩形来决定flash或者图像该放在首页的什么地方，也可以决定侧边栏、网站底部内容的位置。一些电子商 务网站在设计产品的展示时尤其可以参考一下黄金矩形。

我们要为一个950px宽度局中页面来设计栏目，根据黄金比例原则，可以这样设计：这样的Web布局具有一定的平衡感，整个页面也比较和谐。

现在的页面布局一般都是比较弹性的设计，因为这样页面可以充满浏览者的屏幕空间，而不管视窗的大小尺寸是多少，这对于那些高分辨率宽屏的用户来说是有意义的。而对于坚持固定像素宽度的设计者来说，1024*768就是王道，摒弃了两端的使用人群。即使是固定宽度的设计，减掉浏览器的滚动条宽度和浏览者打开了工具栏的宽度之后，水平宽度就显得不够用了：

许多设计师在设计版面的时候都是随意制定一下宽度就开始他们的设计，往往会出现挑选的宽度没有考虑到说要表现的内容，在后期出现内容问题的时候就很受限制。还有很多开发人员在实现页面的时候，并没有完全依靠视觉效果图来实现，有时就大致量了一下然后根据以往经验来定制宽度，而这种宽度往往不能很好的适应他们的内容，所以，这时候，黄金比例的使用就很重要了。

黄金比例不仅在大的布局上可以使用，在小的栏目设计中也可以灵活使用。可以细化到很小的设计元素，比如一块图片信息展示区域：

根据内容反向推导出大的区域宽度，例如网页的首页上需要放一个宽度为500的banner图片，那么我们可以用黄金比例算出整个网页可以选择的合适宽度：500*1.62=810px，并不一定要是950或者800这些被很多人推崇的页面宽度。 推荐阅读：

怎样快速设计出一个极简风格网站【网页设计教程】 过渡的艺术!20个精巧微妙的渐变色网页设计 QQ空间怎样设计让广告动起来【网页设计】

第五篇：网页设计课程设计

题目：制作一个中大型网站(下边分类中任意选择一个) 分类：

1. 大众导航网站

参考网站：

(1)http:///(酷酷网址)

(2)http:///(265上网指南)

(3)http:///(中文网址之家)

(4)http:///(天空网址导航)

(5)http:///(E网通)

2. 计算机类导航网站

参考网站：

(1)http:///(计算机与互联网信息索引)

3. 网页制作素材图库网站

4. 网页制作素材特效(javascript)网站

5. C语言学习网站

6. HTML语言学习网站

7. 文学网站

8. 班级网站

人员要求：

1. 团队开发(2 ~ 4人一组)，成员自由组合，各组选组长一名。

2. 开发团队内要分工合作，各负其责，由组长调度安排。

网站开发要求：

1.

2.

3.

4.

5.

分模块开发制作，各个页面之间风格应该保持统一。 页面数量不少于人均12页。 页面布局合理，必要时采用框架或嵌入式框架布局页面 页面间由超级链接实现跳转 网站应包含的知识点参考：超级链接(文本超级链接/书签超级链接/图片超级链接/图片热点超级链接/电子邮件超级链接);图片;表格(布局网页);表单;CSS;音频(背景音乐);行为;框架网页

评分：总分100分，评分详细说明如下：

1. 风格是否统一10分

2. 站点整体规划合理10分

3. 页面规划合理10分

4. 目录结构规划合理15分

5. 链接结构布局合理15分

6. 超级链接测试正确10分

7. 页面美观、大方10分

8. 站点容量合适，不空洞 10分

9. 制作小组内人员分工明确，合作完成任务准时，现场验收网站正常。

附加分：各制作小组组长附加 10分

10分