网页设计报告书项目名称：制作“Best设计”网页班级：视觉08—1班学号: 200806002619 姓名：张金凤指导教师：饶简元日期：2011-12-24现代设计艺术学院目录前言—————————————————————————————（）一、项目概述————————————————————————（）1.项目背景——————————————————————————（）2.项目内容介绍————————————————————————（）3.项目设计重点————————————————————————（）二、项目设计————————————————————————（）1.项目主题的选择———————————————————————（）2.网页的版面设计———————————————————————（）3.背景音乐的选择———————————————————————（）三、项目实施————————————————————————（）1.素材的收集与整理——————————————————————（）2.项目制作(创作过程)—————————————————————（）四、结束语—————————————————————————（）五、致谢——————————————————————————（）六、参考材料————————————————————————（）前言经过学习DW，让我了解到一些关于网页设计的相关内容和设计网页的基础知识，同时通过一学期的网页设计相关软件和相关知识的学习，制作网页和如何设计出自己喜欢的网页。

为了更好的运用和熟悉网页设计，同时也为了更好的表达自己对网页设计的一种理解和给自己一个期末的交代，所以制作了“Best设计网”的网页。

在制作网页时，通过PS、AI和DW的结合运用，最后在DW中进行编辑和整合设计，最后完成网页的所有页面设计。

在设计中有很多的疑问，也对自己的作品充满了信心。

在设计中很纠结的一个问题就是写代码和运用网格，很多时候设计出来的作品和自己看到的网页页面总是不一致，最后通过不断的调整和修改，完成了这次是网页设计。

这次的网页设计，是我第一次完整的自己独立完成的第一个网页，也许会有很多的不足之处，和一些不那么令人满意的地方，希望老师能谅解，我自认我已经尽力做到最好。

一、项目概述1.项目背景通过一学期的网页设计相关软件和相关知识的学习，制作网页和如何设计出自己喜欢的网页。

为了更好的运用和熟悉网页设计，同时也为了更好的表达自己对网页设计的一种理解和给自己一个期末的交代，所以制作了“Best设计”（该网站是一个虚拟的设计网站）的网页。

2.项目内容介绍Best设计（该网站是一个虚拟的设计网站）的网页，设计时最先设计的是网站的标志，网页设计中，网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。

企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口，而标志是象征着一个企业的形象，是一个企业的品牌核心文化之一。

之后通过素材的搜集和整理完成之后，在PS中设计了网页的所有版面，在AI中完成了网页标志的设计。

整个网页设计最后排版是在DW中完成。

网页主要体现的是Best设计网的是一个设计资源非常丰富的网站，其中包括插画设计、平面设计、摄影、产品包装设计和网页设计等，同时他还提供了一些设计时尚咨询的新闻信息。

在设计时主要想表现的是平面设计、插话设计和摄影这几个方面的内容，所以在设计时版面的设计上运用得比较简洁，这样能更好的展现该网页的侧重点。

整个网页设计有多个版面，有一级页面和二级页面，其中二级页面中也设计了以一些小的三级页面。

这样设计使得页面在连接跳转之间更加灵活，同时也为了在各个页面之间的联系更为紧密和完善。

3.项目设计重点Best设计网站的设计重点主要有以下几个方面：a. 网页的总体结构整个网页有一个主页面，还有三个以上的二级页面，主页面的内容在二级页面中有更加详细的体现和完美展示，二级页面中又包含一些简单的页面内容连接，这样做的主要作用是能更好的展示网页，同时能更好的充实主页面的内容。

b. 网页的整体版式设计网页的版式设计比较简约，考虑到该网页主要是为浏览者提供更多的与设计相关的信息和资料，倘若设计的过分的花哨和复杂，就很难达到这样的一个目的，所有选择了比较简洁的版面来进行所有的网页页面设计。

但简单不代表马虎或者敷衍了事，在所有的页面设计中都是结合网页的标志和该网页的性质来进行的。

c.整个网页的主色调目前的设计网站上我们观看到的都是一些很强烈的色彩搭配，很多的设计网站上都喜欢运用对比色来进行设计，那样容易引起别人的注意，但同时也容易让人视觉疲劳。

考虑到以上因素，在色彩搭配上，我主要运用的是一些同类色系的色彩，再结合不同的版面，选择不同色彩来进行搭配。

同时为了更好的突出页面内容，所有页面的色彩都选用了同一色系的色彩做渐变式呈现。

d.修饰网页的代码和CSS字样的使用在运用DW软件制作页面时，文字部分会很难控制，运用CSS字样，一方面能更好的统一页面文字效果。

另一方面也能更好的对文字进行进一步的编排和设计，CSS的使用能更好的完成网页页面的版式设计。

二、项目设计1.项目主题的选择该网页设计项目主题的选择首先考虑的是设计一个摄影网站，但网上摄影网站的所有版式都大同小异，如中国摄影网、中国摄影家协会网、美国国家地理杂志网等,，但他们的网站编制的都非常的细密，很完整，如下图所示那样。

以我目前的设计水平和编辑时间，真的很难做得比他们的还好，再者网页设计中很重要的代码编写我不会，所有没有挑战这样一个高难度的网页设计。

最后选择了一个类似素材网的设计网站来进行这次的网页制作，主要有两个原因：a.设计网站我们经常浏览，比较了解该从何入手，这样做创新时能更好的发挥自己的水平。

b.设计网站的设计可以找到一个自己喜欢的点来更好的进行创作。

所以选择了“Best设计”来进行这次期末总结的网页设计项目。

2.网页的版面设计网页的版面设计主要考虑到几个方面的问题：文字、色彩、还有插图。

如何让版面效果体现出该设计网的特点，一方面使用合理的色彩，另一方面是插图和文字的结合。

在设计版面时，采用了简约的设计风格，所有在色彩的选用上都是选用了给人感觉比较简洁，视觉上不会有很大冲突的同色系的色彩。

文字部分运用了CSS字样，总体编排效果上以简洁、大方和满足大众需求为主，字体没有运用很花哨或者不常用的一些字体，这样在浏览时，不会因为字体的缺陷而破坏到整个网页的版式设计。

3.页面背景音乐的选择由于设计的页面色彩不是很艳丽，设计的所有版面都比较的简洁，在选择背景音乐时考虑到这些，同时该网站属于一个设计类的一个素材网站三、项目实施1.素材的收集与整理在制作Best设计网页前期，收集了很多素材，其中包括网站的一些排版还有插画、摄影、平面设计等的一些相关素材。

插画类素材我主要收集了一下几种类型的：a.故事类的图一图二图三图四b.时尚插画c.商业插画D.素描插画E.涂鸦式插画F.PG插画2.项目制作(创作过程)a.创作草图网页设计——网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。

企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口，所以网站的标志设计也显得尤为的重要，就如同你看到就知道是百度，看到就知道是腾讯一样，标志是象征着一个企业的形象，是一个企业的品牌核心文化之一，所以我制作了“Best设计”的标志。

１）标志创作图草图1 草图2草图3 草图4标志最后定稿为：标志释义：该标志采用中英文相结合的方式进行设计，运用英文文字的变形进行创作。

“B”字的形象是一把钥匙正在开锁，这样做的主要目的是表现出“Best 设计”就像一把开启设计之门的一把钥匙，在该网上你能找寻到属于你自己的最好的设计钥匙,并把这样的一种概念运用到了标志的释义中，最后把它延伸为标志的最终意义。

标志的色彩运用采用了红色与黑色，红色在中国有红红火火的示意,该标志选用红色，象征着该设计公司发展红红火火，亦有步步高升之意。

黑色在古代中国曾被奉为高贵、端庄和典雅的代表色，在着与运用黑色是仰仗着黑色加具有这样的意义。

２）页面版式草图版式设计考虑到以简洁为主的设计风格，所有设计了一下几个版式页面。

图一（主页面版式设计）图二（二级页面版式设计）图一的版式设计主要考虑到了网页主页面的信息完性，给浏览者的视觉感受等内容，所有在设计时版面设计的比较简洁，在文字部分考虑的主要是一些大的类别方向，没有附带一些小的标题，在后面的二级页面和三级页面设计时，小标题的考虑方面更加完整一些。

图二中的版式设计在沿袭了主页面的同时，细化了一些小的设计方面，所有整个版面设计比较偏重细节和小标题的展示方面。

图三（二级页面版式设计）图三中做要描绘的内容主要是小标题的主题内容，在编排时考虑的是为前面的大标题提供一个更加完整的展示区，所有在设计时考虑的主要是图片展示区的设计，在设计时为了更好的统一整个页面的版式内容，B.后期制作过程1）ＰＳ创作过程，主要是制作网页背景和网页按钮，还有适合网页画面大小的精美图片。

创作过程截图如下图：图一（主页面在PS中的制作过程）图二（二级页面在PS中的创作过程）2）DW制作过程图1图一是主页面的设计过程展示，由于设计之初很多东西不是很了解，总是出现很多纷繁复杂的问题，同时在设计使用AP_DIV时，页面显示预览时总是会出现问题，最后通过不断的调整，终于会很好的掌控AP_DIV，所以把这张主页设计的制作过程作为一个展示的页面呈现给大家。

图二在DW软件制作过程中选取了以上两幅图为代表，图一是主页的设计过程截图；图二为二级页面的创作过程截图。

四、结束语到此我的“Best设计”网就算完美完成了，从刚开始设计时对网页设计的众多疑惑，到主题的确定，标志的设计和网页整个版面设计的确定，再到最后网页页面设计的完成，我经历了很多，也学会了正确的面对自己的不足之处，并学会了努力让自己成长起来，通过这样一次课题的制作，让我了解到除了网页设计之外的东西。

在网页设计过程中由于不会英文写代码，很多简单的事情变得很复杂，还有见表格时没问题，但最后预览时总是会出问题，五、致谢在此感谢帮助过我的老师和同学，尤其要感谢饶老师对我们的帮助，没有老师的帮助我们就不可能完成这次的动画短片制作。

同时感谢我的搭档和我很好的配合，若是没有她，这次的创作主题还真不知该从何入手，同时感谢搭档有丰富的知识积累，让我们在创作中少走了很多的弯路，如没有她的帮助，那么这次的动画短片制作就不可能按时完成，再次感谢饶老师还有我的好搭档，谢谢你们的帮助。