网页设计和制作.doc

武汉理工大学华夏学院课程设计报告 2011 2012 学年 第一学期教 学 单 位 信息工程系 课 程 名 称 网页设计和制作 课程设计题目 自制网页 指 导 教 师 0000000 学 生 姓 名 000 000 专 业 班 级 0000000000000000 2012年12月22日【课程设计名称】网页设计和制作。【课程设计要求】通过PS这款软件，设计一个简单、美观、符合实际的网页页面，页面内容具备网页经常可以看到的功能。这次的作品既是PS设计，同时也是网页设计，因此在页面及其功能上应按一个正规网站来设计一、设计目标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 CS3Photoshop CS3是可以将设计者的想法表现为图像的一种工具。Photoshop CS3提升了编辑图像的速度，改善了图像的画质效果，使用户在处理图像时更为轻松便捷。现在，不论是公司还是学校或家庭都会用Photoshop CS3来制作或处理图像三、设计内容及制作步骤3.1页面展示3.1.1成品展示成品展示（阅读网）3.2.2参考作品参考作品（文章阅读网）截图1参考作品（文章阅读网）截图23.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页尾蓝白基调的渐变细长方框，使页与主题有一个明了的分割。添加上“友情链接、联系我们”等标准网页应具备的页尾内容。HTML附带：images（文件夹）四、相关问题及结束语4.1相关问题实践让我走向科技应用,走出课堂。当前,我们缺少的主要不是知识,而是缺少将知识与实际相结合的能力.我们在课堂上所学的,与在实际当中遇到的是不尽相同的.其往往具有不具有明显的特征,这需要我们进行抽象概括才能解决各种问题。4.2结束语 这次毕业设计让我更加熟悉了从理论到实践的跨越。从当初的在网上查阅资料，到现在的网站运行，这中间有很多值得回味的地方。在计算机的世界里，只要你有兴趣，总会有太多新奇的东西吸引着你。这次的设计，从选题到实现，几乎都是自己独立完成的。网站建设从需求分析到设计、测试，我都力求规范化，努力让自己以前学的知识运用到本网站的开发中，尽量保证整个系统的开发质量，顺利完成这次的设计，为自己的课程结束画一个完美的句号。不过，在网站建设过程中，好多知识都是随学随用，就增加了很多不必要的麻烦。虽说这些都会消耗开发的时间，但在老师、同学以及自己的不断努力下，一些问题也随之克服了，通过这次阅读网网站设计，使我增加了很多的知识，也掌握了很多网页设计的操作技巧，虽然还有很多不足之处，但这并不重要，重要的是我对网页的设计又有了更深的了解。我做的是静态的网站，好多信息只能通过浏览页面的方式查阅，网站的便用性比较差。希望各位评委老师和同学给予指正与建议。我相信，只要肯钻研，只要挤时间，一切自己想要的知识都可以掌握。4.3感悟网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。不要过于注重色彩的灿烂，只要简单就