《网站设计》报告书

作品设计报告书

题目：PS网页设计

班级

学号

姓名

指导教师

2010 年 6 月

一、设计目标... 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

一、设计目标

1.1内容

通过PS这款软件，设计一个简单、美观、符合实际的网页页面，页面内容具备网页经常可以看到的功能。这次的作品既是PS设计，同时也是网页设计，因此在页面及其功能上应按一个正规网站来设计。

1.2功能

对于网站设计来说，不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。

另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。

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

1.3实现方式

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

二、设计指导思想

2.1技术背景

对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。

2.1.1网页设计

网页设计是伴随着网络的快速发展而快速兴起，由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户,随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。

2.1.2图形编辑

图形编辑是纠正数据采集错误的重要手段，其基本功能要求是：具有友好的人机界面，即操作灵活、易于理解、响应迅速等；具有对几何数据和属性编码的修改功能；具有分层显示和窗口功能，便于用户的使用。图形编辑的关键是点、线、面的捕捉，即如何根据光标的位置找到需要编辑的要素以及图形编辑的数据组织。

2.1.3平面设计

平面设计（graphic design）的定义泛指具有艺术性和专业性，以“视觉”作为沟通和表现的方式。透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。平面设计师可能会利用字体排印、视觉艺术、版面（page layout）等方面的专业技巧，来达成创作计划的目的。平面设计通常可指制作（设计）时的过程，以及最后完成的作品

2.1.4主流软件

Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。

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成品展示

成品展示（阅读网）

3.2.2参考作品

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

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

3.2制作构思

3.2.1板式

参考大量用类网站，商业化的阅读型网站，都是采用中规中矩的结构，通过大小不一的方框分解整个页面。

3.3.2颜色

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

3.3制作流程

3.3.1背景

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

白色半透明的方框将页面切割成三部分，两边木纹背景留白，中间则做填充各种内容。：“书本和咖啡”的图片提高网站的书香气息。

3.3.2LOGO

柔和的淡蓝色加上夸张的淡绿色描边，给人一种清新淡雅的感觉，使人看着贴切和谐，构造出网站的名字——阅读网。

3.3.3导航条

黄色基地的远角长条方框，纯白色的描边，已经红色小圆点组成的切割条，构成基本的导航条。再用文字工具写上相应的导航文字。

3.3.4板块

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

3.3.5板块内容

板块主题文字，添加橙色描边，时使其更醒目。书籍图片添加白色描边，使其更具动感。板块内容文字颜色采用黑色，庄重大方，

3.3.6板块文字美化

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

3.3.7页尾

蓝白基调的渐变细长方框，使页与主题有一个明了的分割。添加上“友情链接、联系我们”等标准网页应具备的页尾内容。

四、设计制作进度表

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

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

5.1文件清单

源文件：2009404045麦芳荣.psd

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

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

截图：网页截图.jpg

HTML：2009404045麦芳荣网页.html

HTML附带：images（文件夹）

5.2运行环境要求

Photoshop CS3

六、相关问题及结束语

6.1相关问题

实践让我走向科技应用,走出课堂。当前,我们缺少的主要不是知识,而是缺少将知识与实际相结合的能力.我们在课堂上所学的,与在实际当中遇到的是不尽相同的.其往往具有不具有明显的特征,这需要我们进行抽象概括才能解决各种问题。

6.2结束语

通过一个学期学习PS，让我掌握了这个软件的使用方法，同时也完成这个网页设计作品。感谢李林军的细心指导，感谢同学们的支持与帮助。在日后的学习生活中，相信PS会给我带来更多。

这次毕业设计让我更加熟悉了从理论到实践的跨越。从当初的在网上查阅资料，到现在的网站运行，这中间有很多值得回味的地方。在计算机的世界里，只要你有兴趣，总会有太多新奇的东西吸引着你。

这次的设计，从选题到实现，几乎都是自己独立完成的。网站建设从需求分析到设计、测试，我都力求规范化，努力让自己以前学的知识运用到本网站的开发中，尽量保证整个系统的开发质量，顺利完成这次的设计，为自己的PS课程结束画一个完美的句号。不过，在网站建设过程中，好多知识都是随学随用，就增加了很多不必要的麻烦。虽说这些都会消耗开发的时间，但在老师、同学以及自己的不断努力下，一些问题也随之克服了，通过这次阅读网网站设计，使我增加了很多的知识，也掌握了很多网页设计的操作技巧，虽然还有很多不足之处，但这并不重要，重要的是我对网页的设计又有了更深的了解。我做的是静态的网站，好多信息只能通过浏览页面的方式查阅，网站的便用性比较差。希望各位评委老师和同学给予指正与建议。

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

6.3感悟

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

学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。

学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。不要过于注重色彩的灿烂，只要简单就行。我们最终追求的主要是实用价值。

七、参考资料

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

《小说阅读网》http://www.readnovel.com/

《看书网》http://book.qukanshu.com/

《文章阅读网》http://www.duwenzhang.com/

《梦想文学》http://www.mx99.com/

进度表

第二篇：电子商务网站设计报告书

实验目的：上机指导说明书

1、掌握电子商务网站的基本设计方法；

2、初步了解J2EE架构用于电子商务网站的设计技术；

3、掌握开发所需的数据库服务器、中间服务器和相应环境的配置。

实验步骤：

一、环境配置

1、下载安装JavaSDK 下载jdk1.6.0_05（下载地址：/javase/downloads/index.jsp）。下载好的JDK是一个可执行安装程序，双击安装。假设安装路径为：C:\Program Files\Java\jdk1.6.0_05（当然其他路径也可以）。

JDK安装完成之后要设置系统环境变量：我的电脑点右键，选择“属性”，选择“高级”标签，进入环境变量设置。环境变量设置，分别设置环境变量：JAVA_HOME。

在系统环境变量那一栏中点->新建JAVA_HOME （JAVA_HOME指向的是JDK的安装路径）。变量名： JAVA_HOME；变量值： C:\Program Files\Java\jdk1.6.0_05

设置JAVA_HOME量的目的：为了方便引用，比如，JDK安装C:\Program Files\Java\jdk1.6.0_05目录里，则设置JAVA_HOME为该

电子商务网站设计报告书

目录路径, 那么以后要使用这个路径的时候, 只需输入%JAVA_HOME%即可, 避免每次引用都输入很长的路径串等。

图1 环境变量JAVA_HOME的配置

2、下载web服务器

下载apache-tomcat-6.0.20.exe文件（下载地址：

/source/1611296）。双击安装。安装目录为如D:\apache-tomcat-6.0.20。

电子商务网站设计报告书

图2 web服务器安装目录

二、建立数据库

本实验使用access数据库。在access中建立名为demo的数据库。建立表名为goods的数据库表。该表包括5个字段。编号、名称、价格、数量及删除标志。如下图所示。

电子商务网站设计报告书

图3 建立access数据库

三、程序设计

1、建立主页面。利用Dreamwave或Frontpage建立页面名为default.jsp的主页面。对应代码如下：

<%@ page contentType="text/html; charset=GBK"%>

<html>

<head>

type="text/css">

<title>SSH系统操作演示</title>

if (top.frames.length > 0) {

top.location = window.location;

}

</script>

</head>

<body>

<tr>

<td valign="top" width="150"><iframe name="left"

scrolling="no" marginwidth=0 framespacing=0 marginheight=0 frameborder=2 width='100%' height='100%'

src='/include/left.jsp'></iframe></td>

</tr>

</table>

</body>

</html>

相应的现实为：

电子商务网站设计报告书

图4 主页面

2、建立录入和编辑页面

建立单击“添加”后的录入页面goods.jsp。对应代码如下：

<%@ taglib uri="/struts/tags-logic" prefix="logic"%>

<%@ taglib uri="/struts/tags-bean" prefix="bean"%>

<%@ taglib uri="/struts/tags-html" prefix="html"%>

<%@ page contentType="text/html; charset=GBK" %>

<html>

<head>

type="text/css">

language="javascript"></script>

language="javascript"></script>

<!--

textarea{overflow:auto;width:"100%";height:"100"}

-->

</style>

<SCRIPT LANGUAGE="javascript"> //取消

function myReset(){

document.forms[0].reset(); }

//添加

function mySubmit(){ if(!check()){

return false;

}

document.forms[0].submit(); }

//返回

function myBack(){

}

//提交验证

function check(){

if(isAllBlank(document.all("info.name").value)){ window.navigate("/goods/goodsPageAction.do");

alert("名称不能为空！");

document.all("info.name").focus();

return false;

}

if(isAllBlank(document.all("info.prices").value)){ alert("价格不能为空！");

document.all("info.prices").focus();

return false;

}

if(!isPlusNumeric(document.all("info.prices").value)){ alert("价格格式不对，请输入正数！");

document.all("info.prices").focus();

return false;

}

if(isAllBlank(document.all("info.number").value)){ alert("数量不能为空！");

document.all("info.number").focus();

return false;

}

if(!isPlusNumeric(document.all("info.number").value)){ alert("数量格式不对，请输入正整数！");

document.all("info.number").focus();

return false;

}

return true;

}

</SCRIPT>

</head>

<html:form action="/goods/goodsAction.do" method="post"> <input type="hidden" name="method"

value="<%="inputInit".equals(request.getParameter("method"))?"input":"input".equals(request.getParameter("method"))?"input":"update"%>"/>

<html:hidden property="info.id"/> <html:hidden property="info.deleteFlag"/> <table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

<tr>

<td class="text03">商品管理 → 商品信息

<%="inputInit".equals(request.getParameter("method"))?"添加":"input".equals(request.getParameter("method"))?"添加":"修改"%></td>

</tr>

</table></td>

</tr>

</table>

<table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

</tr>

</table>

<tr>

<td width="100" align="center"><a href="#"

class="button1" onClick="mySubmit();return false;">保 

存</a></td>

<td width="100" align="center"><a href="#"

class="button1" onClick="myReset();return false;">重 置</a></td>

</table>

<table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

</tr>

</table>

<td width="120" height="30" align="center"

class="TdTitle">名    称</td>

<td align="left"><html:text property="info.name" styleClass="textfield" style="width:150"/><span

class="mustfillstar"> *</span></td>

</tr>

<tr>

<tr>

</table>

<tr>

</tr>

</table>

</html:form>

</body>

</html>

相应结果如下：

电子商务网站设计报告书

图5 商品信息录入界面

3、建立列表页面

建立名为goodsList.jsp的列表页面，供主页面调用。代码为： <%@

uri="/struts/tags-logic" prefix="logic"%>

<%@

uri="/struts/tags-bean" prefix="bean"%> taglib taglib

<%@

uri="/struts/tags-html" prefix="html"%>

<%@ page contentType="text/html; charset=GBK" %> <html>

<head>

<script

language="javascript"></script>

//删除

function myDel(spanID){

var infoIDs = getNewInfoIDs(spanID);

if(infoIDs == ""){

alert("请选择所要删除的信息！");

return false;

}

if (confirm("你确认要删除指定信息吗？")) { src="../js/checkbox.js"

window.navigate("../goods/goodsListAction.do?method=delete&ids="+infoIDs);

}

//单个删除

function myDeleteForAlone(infoId){

if (confirm("你确认要删除指定信息吗？")) {

window.navigate("../goods/goodsListAction.do?method=delete&ids='"+infoId+"'");

}

//添加

function myCreate(){

window.navigate("../goods/goodsAction.do?method=inputInit");

}

//编辑

function myEdit(id){

window.navigate("../goods/goodsAction.do?method=updateInit&id="+id);

}

//查看

function myShow(id){

window.navigate("../goods/goodsAction.do?method=show&id="+id);

}

//页面提示信息

String method = request.getParameter("method"); %>

var method = "<%=method%>";

if(method=="delete"){

alert("删除成功！");

}else if(method=="input"){

alert("添加成功！");

}else if(method=="update"){

}

</script>

</head> alert("修改成功！");

<tr>

<tr>

<td class="text03">商品管理 → 商品信息列表</td>

</tr>

</table></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<table width="95%" border="1" align="center"

cellpadding="2" cellspacing="1" bordercolor="cccccc" class="text01" id="tt">

<td width="30" height="25"

width="100%" align="center" border="0" valign="middle"><table

cellpadding="0" cellspacing="0">

<tr>

<td

valign="middle"><input height="22" align="center" type="checkbox" onClick="checkMyChildren('spanID',this.checked,'infoID')" name="allCheckbox"></td>

</tr>

</table></td>

<tr>

</tr>

</table></td>

<td align="center" valign="middle"><table

width="100%" border="0" cellpadding="0" cellspacing="0" class="text002">

<tr>

</tr>

</table></td>

<tr>

</tr>

</table></td>

<tr>

</tr>

</table></td>

</tr>

<logic:iterate id="info" name="pageManager" int i=0; property="listForCurrentPage" scope="session">

<td align="center"><a href=""

name='info' onClick="myShow('<bean:write

property='id'/>');return false;" class="t01"><bean:write name="info" property="name"/></a></td>

<td align="center"><a href=""

name='info' onClick="myEdit('<bean:write

property='id'/>');return false;" class="t01">编辑</a>/<a href="" onClick="myDeleteForAlone('<bean:write name='info' property='id'/>');return false;" class="t01">删除</a></td>

</tr>

<%i++; %>

</logic:iterate>

</table>

<tr>

</tr>

</table>

<tr>

<td height="26" align="center" valign="middle"

class="TdTitle">

<jsp:include

page="/include/page_b.jsp">

<jsp:param

value="goodsPageAction" />

<jsp:param name="otherCondition" value="" />

</jsp:include>

</td>

</tr>

</table>

</body>

</html>

实现结果如主页面。

4、建立查看商品信息页面

建立名为goodsView.jsp的页面。当点击商品名称时弹出商品详细信息。

<%@ taglib uri="/struts/tags-logic" prefix="logic"%>

<%@ taglib uri="/struts/tags-bean" name="pageNum" flush="true"

prefix="bean"%>

<%@ taglib uri="/struts/tags-html" prefix="html"%>

<%@ page contentType="text/html; charset=GBK" %>

<html:html>

<head>

//返回

function myBack(){

}

</SCRIPT>

</head>

<html:form action="/goods/goodsAction.do" method="post"> window.navigate("/goods/goodsPageAction.do");

<tr>

<tr>

<td class="text03">商品管理 → 商品信息查看</td> </tr>

</table></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</table>

<tr>

</tr>

</table>

</tr>

<tr>

<tr>

</table>

</html:form>

</body>

</html:html>

实现结果如下：

电子商务网站设计报告书

图6 查看页面

四、其它配置

设tomcat安装在D盘。

1、修改tomcat下\conf\Catalina\localhost\ROOT.xml中项目存放地址；改为docBase="D:\demo\WebRoot"

2、项目下demo\WebRoot\db\demo.mdb为数据库文件，修改demo\src\config\jdbc.properties中数据库文件存放地址；

3、将上述源文件保存到D:\demo\WebRoot\goods下。

五、启动设计结果

1、启动tomcat。双击D:\apache-tomcat-6.0.20\bin下的startup文件。运行结果如下：

关闭则双击shutdown

电子商务网站设计报告书

文件。

图7 tomcat启动界面

2、启动ie。在地址一栏输入http://localhost/default.jsp。并检测各项结果。

相关推荐

《网站设计》报告书

一、设计目标

二、设计指导思想

三、设计内容及制作步骤

四、设计制作进度表

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

六、相关问题及结束语

七、参考资料

第二篇：电子商务网站设计报告书

专栏推荐