《PS网页设计》作品设计报告书

admin管理员组

文章数量:1530869

2024年7月11日发(作者：)

广西交通职业技术学院信息工程系

作品设计报告书

题 目：PS网页设计

班 级

学 号

姓 名

指导教师

2010 年 6 月

1

目 录

一、设计目标 ................................................................................................................................... 3

1.1内容 .................................................................................................................................... 3

1.2功能 .................................................................................................................................... 3

1.3实现方式 ............................................................................................................................ 3

二、设计指导思想 ........................................................................................................................... 3

2.1技术背景 ............................................................................................................................ 3

2.1.1网页设计 ................................................................................................................ 4

2.1.2图形编辑 .............................................................................................................. 4

2.1.3平面设计 .............................................................................................................. 4

2.1.4主流软件 ................................................................................................................ 4

2.2开发环境 ............................................................................................................................ 5

三、设计内容及制作步骤 ............................................................................................................... 5

3.1页面展示 ............................................................................................................................ 5

3.1.1成品展示 ................................................................................................................ 5

3.2.2参考作品 ................................................................................................................ 6

3.2制作构思 ............................................................................................................................ 7

3.2.1板式 ........................................................................................................................ 7

3.3.2颜色 ........................................................................................................................ 7

3.3制作流程 ............................................................................................................................ 7

3.3.1背景 ........................................................................................................................ 7

3.3.2LOGO ......................................................................................................................... 8

3.3.3导航条 .................................................................................................................... 9

3.3.4板块 ........................................................................................................................ 9

3.3.5板块内容 .............................................................................................................. 10

3.3.6板块文字美化 ...................................................................................................... 11

3.3.7页尾 ...................................................................................................................... 11

四、设计制作进度表 ..................................................................................................................... 11

五、作品提交清单及运行环境要求 ............................................................................................. 12

5.1文件清单 .......................................................................................................................... 12

5.2运行环境要求 .................................................................................................................. 12

六、相关问题及结束语 ................................................................................................................. 12

6.1相关问题 .......................................................................................................................... 12

6.2结束语 .............................................................................................................................. 12

6.3感悟 .................................................................................................................................. 13

七、参考资料 ................................................................................................................................. 13

2

一、设计目标

1.1内容

通过PS这款软件，设计一个简单、美观、符合实际的网页页面，页面内容具备网页经

常可以看到的功能。这次的作品既是PS设计，同时也是网页设计，因此在页面及其功能上

应按一个正规网站来设计。

1.2功能

对于网站设计来说，不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系

统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将

成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内

容 ，都要以网站的最终目的为出发点来考虑。

另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解

建站单位形象的突出点和单位标志的特点、意义等。

本网站的建设主要是建成一个集在线阅读、书籍下载、文化新闻等功能于一体的商业化

网站。

1.3实现方式

运用PS相关功能，设计出一个静态的页面，然后通过HTML输出，得到一个基本的网

页文件。

二、设计指导思想

2.1技术背景

对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快

中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，

到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet

的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出

台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通

过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息

3

的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在

人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今

天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们

将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。

2.1.1网页设计

网页设计是伴随着网络的快速发展而快速兴起，由于人们使用网络的频繁而网页作为

上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式

给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户,随时都

会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来

更加的方便。

2.1.2图形编辑

图形编辑是纠正数据采集错误的重要手段，其基本功能要求是：具有友好的人机

界面，即操作灵活、易于理解、响应迅速等；具有对几何数据和属性编码的修改功能；

具有分层显示和窗口功能，便于用户的使用。图形编辑的关键是点、线、面的捕捉，

即如何根据光标的位置找到需要编辑的要素以及图形编辑的数据组织。

2.1.3平面设计

平面设计（graphic design）的定义泛指具有艺术性和专业性，以“视觉”作为沟通和表

现的方式。透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的

视觉表现。平面设计师可能会利用字体排印、视觉艺术、版面（page layout）等方面的专

业技巧，来达成创作计划的目的。平面设计通常可指制作（设计）时的过程，以及最后完成

的作品

2.1.4主流软件

Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发

设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软

件公司，Photoshop都是首选的平面工具。

4

CS是Adobe Creative Suite一套软件中后面2个单词的缩写，代表“创作集合”，

是一个统一的设计环境，将Adobe Photoshop CS2、Illustrator CS2、InDesign CS2、

GoLive CS2 和 Acrobat 7.0 Professional 软件与 Version Cue CS2、Adobe Bridge

和 Adobe Stock Photos 相结合。

最新版本是Adobe Photoshop CS5。

2.2开发环境

本次设计所采用工具：Photoshop CS3

Photoshop CS3是可以将设计者的想法表现为图像的一种工具。Photoshop CS3提升了

编辑图像的速度，改善了图像的画质效果，使用户在处理图像时更为轻松便捷。现在，不论

是公司还是学校或家庭都会用Photoshop CS3来制作或处理图像

三、设计内容及制作步骤

3.1页面展示

3.1.1成品展示

5

成品展示（阅读网）

3.2.2参考作品

参考作品（文章阅读网）截图1

6

参考作品（文章阅读网）截图2

3.2制作构思

3.2.1板式

参考大量用类网站，商业化的阅读型网站，都是采用中规中矩的结构，通过大小不一的

方框分解整个页面。

3.3.2颜色

为了提高阅读的舒适度，颜色应以柔和淡雅的色调为主，在作导航条等反差颜色采用

也应以采用柔和淡雅的色调。

3.3制作流程

3.3.1背景

7

采用木纹的背景增强了阅读的纸质感，提高阅读的舒适度。

白色半透明的方框将页面切割成三部分，两边木纹背景留白，中间则做填充各种内容。：

“书本和咖啡”的图片提高网站的书香气息。

3.3.2LOGO

8

柔和的淡蓝色加上夸张的淡绿色描边，给人一种清新淡雅的感觉，使人看着贴切和谐，

构造出网站的名字——阅读网。

3.3.3导航条

黄色基地的远角长条方框，纯白色的描边，已经红色小圆点组成的切割条，构成基本

的导航条。再用文字工具写上相应的导航文字。

3.3.4板块

9

采用白、蓝、柠檬黄三种颜色划分成大小不一的板块，并对板块添加“描边、阴影、

浮雕”的图层样式。

3.3.5板块内容

板块主题文字，添加橙色描边，时使其更醒目。书籍图片添加白色描边，使其更具动感。

板块内容文字颜色采用黑色，庄重大方，

10

3.3.6板块文字美化

宝石蓝的球型水晶按钮，使文字行间划分更容易辨别，同时也醒目。

3.3.7页尾

蓝白基调的渐变细长方框，使页与主题有一个明了的分割。添加上“友情链接、联系

我们”等标准网页应具备的页尾内容。

四、设计制作进度表

设计内容及时间大致分配如下：

序号 设计内容

1

2

3

4

请教老师，和同学探讨

查找网络上的参考资料

制作PS

后期整理文件

天数（约占比例）

1（10％）

2（20％）

5（50%）

1（10％）

11

5

撰写作品设计报告书 1（10％）

10天 总计

五、作品提交清单及运行环境要求

5.1文件清单

源文件：2009404045麦芳荣.psd

报告书：《PS网页》作品设计报告书.doc

日志：《PS网页设计》作品制作日志.doc

截图：网页截图.jpg

HTML：2009404045麦芳荣网页.html

HTML附带：images（文件夹）

5.2运行环境要求

Photoshop CS3

六、相关问题及结束语

6.1相关问题

实践让我走向科技应用,走出课堂。当前,我们缺少的主要不是知识,而是缺少将知识与

实际相结合的能力.我们在课堂上所学的,与在实际当中遇到的是不尽相同的.其往往具有不

具有明显的特征,这需要我们进行抽象概括才能解决各种问题。

6.2结束语

通过一个学期学习PS，让我掌握了这个软件的使用方法，同时也完成这个网页设计作

品。感谢李林军的细心指导，感谢同学们的支持与帮助。在日后的学习生活中，相信PS会

给我带来更多。

12

这次毕业设计让我更加熟悉了从理论到实践的跨越。从当初的在网上查阅资料，到现在

的网站运行，这中间有很多值得回味的地方。在计算机的世界里，只要你有兴趣，总会有太

多新奇的东西吸引着你。

这次的设计，从选题到实现，几乎都是自己独立完成的。网站建设从需求分析到设计、

测试，我都力求规范化，努力让自己以前学的知识运用到本网站的开发中，尽量保证整个系

统的开发质量，顺利完成这次的设计，为自己的PS课程结束画一个完美的句号。不过，在

网站建设过程中，好多知识都是随学随用，就增加了很多不必要的麻烦。虽说这些都会消耗

开发的时间，但在老师、同学以及自己的不断努力下，一些问题也随之克服了，通过这次阅

读网网站设计，使我增加了很多的知识，也掌握了很多网页设计的操作技巧，虽然还有很多

不足之处，但这并不重要，重要的是我对网页的设计又有了更深的了解。我做的是静态的网

站，好多信息只能通过浏览页面的方式查阅，网站的便用性比较差。希望各位评委老师和同

学给予指正与建议。

我相信，只要肯钻研，只要挤时间，一切自己想要的知识都可以掌握。

6.3感悟

网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执

著。

学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，

如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很

长时间才解决。

学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我

们要不断的学习。我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，

可以评论，可以交互的。因此我提倡简单的美。不要过于注重色彩的灿烂，只要简单就行。

我们最终追求的主要是实用价值

。

七、参考资料

本作品制作过程中参考了一下网站网页的设计：

13

《小说阅读网》/

《看书网》/

《文章阅读网》/

《梦想文学》/

进度表

日期

20100615

20100616

20100617

20100620

20100621

作品内容

请教老师，和同

学探讨

查找网络上的

参考资料

制作PS

后期整理文件

撰写作品设计

报告书

完成情况

完成

完成

完成

完成

完成

如何设计

网页版式采用何种形式

部分功能的使用方式有些忘记，上网查找相

关教程

HTML输出时忘记携带相关文件，导致网页

无法打开

文档撰写描述先后顺序

遇到的问题与分析

14

本文标签： 设计网页网站需要作品