《网页设计与网站建设课程设计》报告

《《网页设计与网站建设课程设计》报告》由会员分享，可在线阅读，更多相关《《网页设计与网站建设课程设计》报告（7页珍藏版）》请在金锄头文库上搜索。

1、湖北汽车工业学院网页设计与网站建设课程设计报告网站名称： 森宿天猫旗舰店 班级： T1153-1 学号： 20110530130 姓名： lj 20131、网页设计主题电子商务类的网站如果想一眼吸引到客户，首先，网页打开速度不能过太慢（过慢会使客户没有耐心，最终直接关闭页面） ，这点要求网页自身大小不要过大。其次，为了顾客在自己的网页上停留的时间长，最后购买商品，网页设计要有自己的鲜明的特点，各网页及相关的下级页面的配色要一致。在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。Web 站点应针对所服务对象（机构或人）的不同而具有不同的形式

2、。为了做到主题鲜明突出，要点明确，应该使配色和图片围绕预定的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。充分利用已有信息，如客户手册公共关系文档技术手册和数据库等。我设计的森宿网页， （森：森林，真我的世界；宿：停留，诗意的栖息）森宿的主题是文艺、怀旧、复古、记录、慢生活。所以我做的网页围绕简约、怀旧的主题设计而成。2网站的总体规划与网站的结构框图；我的网站共有 7 个频道：首页、收藏本店、新品、裙装、上装、下装、配饰、品牌*记、会员*惠、无线专享问卷领心意每一个页面用都统一的背景图片，并且颜色都采用棕色系的，以保证网站统一的页面风格。如下图：网站整体色调为，然后深棕色，点缀

3、其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用 css 设计一个样式，以保证随时、准确的调用。另外，为了网页布局不至于太单调，我在主页加入了适当的自动切换动态图片，用以达到更好的浏览效果。每个页面都可以通过导横条链接到相应的页面，新品一栏主要是每周发布新品发布，让顾客可以第一时间浏览到最新的服饰；裙装、上装、下装和配饰是都所有商品进行大致划分；品牌记则是宣传旗舰店

4、的设计及服务理念，让客户更了解网页的思想；会员惠主要展示会员价的商品；无线专享页面是一个新闻页面，上面显示了每日特价的一些商品基本信息和店铺相关活动的新闻；我的网站还涉及了填写问卷，以便于与客户互动，了解客户动态及对网站做出相应调整。3网页风格说明； 网页风格是指：网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受。这个整体形象包括网站的配色、字体、页面布局、页面内容、交互性、海报、宣传语等因素。1.网站风格 一般要与与企业的整体形象相一致，结合企业的整体色调、企业的行业性质、企业文化、提供的相关产品或服务特点的众多因素，我将网页的风格定为文艺、天然、质朴，网站所出售的衣服钟情于

5、棉麻天然材质，所以网页的配色选为与棉麻色相呼应的棕色，并且带点渐变，这也体现了麻布的纹理特色。网站风格既能传递企业文化信息，又能帮助客户认识和了解网站背后的企业，帮助企业树立别具一格的形象。森宿网站主张，追求布料的艺术审美，感悟内心的时尚，欣赏一件衣裳素雅、简洁，却不简单地模样，记录生活珍贵片段。独特的网页气质，直接给自身网站和所处行业的其它网站之间营造出一种清晰的辨识度。2.线条和形状的选择文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。我的网页大多是直线（矩形）的应用。因为直线条的艺术效果是流畅、挺拔、规矩、整齐的，也就是所谓的

6、有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。但在图片搭配上部分也采用了曲线，曲线效果是流动、活跃，具有动感的，曲线和弧形在页面上的重复组合可以呈现流畅、轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。例如:新闻显示的框框采用边缘是弧形，还有有的配图是一些随意地弧形曲线。4网页的设计过程与截图；1.网站题材 现在网站题材有很多，比如娱乐休闲、体育、综合门户、就业、音乐、社区等无奇不有包罗万象。我要做的网站是卖衣服类，在做网页前，浏览相似的网站，然后思考网站的布局、功能和方向，同时可收集一些素材。2.网站模式 B2C、B

7、2B、C2C、C2B 等网站商务模式，每个模式都有不同的运作方式，模式的确定有助于网站在硬件资金投入的确定，对后来得网站设计等方面起着一个指导作用，这是电子商务网的设计定位。这样有助于网站内容风格的确定，同时确定目标客户。3.Logo 制作 Logo 的作用很多，最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。logo 设计追求的是：以简洁的符号化的视觉艺术形象把网站的形象和理念长留于人们心中。我设计的 LOGO 颜色采用主题色-棕色，背景则是同色系的。简单地图片、网站名和英文名组合一起，边缘有点渲染，简约不简单。4.网站设计 网页设计师可根具前面的策划来设计网站的初始图

8、样、HTML布局和导航，如果通过审定，就开始进行网站前台设计和后台编程开发。现在 PS 制作大致的网站框架，插入相应的图片；新闻显示页面和问卷只是留个矩形型，以便在 frontpage 里可以插入相应代码，我没做好一个页面，然后切片，然后连接到 frontpage 中，再对每个页面进行调整，预览看有什么差错。在切片时又把网页名字取成中文，网页保存格式成 html,最后在链接上出现了很多的问题，让我又重做。再第二次做的时候，我更加注意格式和查看代码中图片的源地址是否出错，这些小细节很可能使网站运行出错。在 frontpage 上，代码还要做很多修改。为了让首页不太单调，我在主页插入了自动跳转的图

9、片，在百度上找到代码后，经过几次修改，然后将图片切成与框框一样的大小，才能调取图片。切换图片的代码如下：PImgPlayer.addItem( , http:/ images/sensu_08.jpg); PImgPlayer.addItem( , http:/ images/sensu_08-1.jpg); PImgPlayer.addItem( , http:/ , images/sensu_08-2.jpg); PImgPlayer.addItem( , http:/ images/sensu_08-3.jpg); PImgPlayer.init( imgADPlayer, 924, 3

10、46 ); 新闻显示页面，则是把老师的代码粘过来，借用老师的数据库；问卷调查页面插入文本框，然后插入相应按钮，按钮的性质要设置成相应的单选或者多选。很多时候，会出现无缘无故的差错，有时会咨询学霸，然后他会帮我修改相应的代码。新闻显示页面：问卷页面：5.网站测试在网站初步完成后，上传到服务器，对网站进行全范围的测试。包括速度，兼容性，链接正确性，等，发现问题及时解决并记录下来。 为什么要记录文档呢？其实是一个不断充实和完善的标准。通过不断的发现问题，解决问题，修改，补充文档，然后在错误的地方做出相应的修改，不断地修改之后时，使整个网站达到预期的效果。 5网站发布过程说明；网站运行的效果网页衔接紧

11、凑、合理、主题大致都是相同的没有多大的改变，但是在对读者协会的详细信息介绍方面的功能已基本实现。 网站发布过程：注册、登录、进入主页、浏览各个页面。 大型站点需要独立的服务器来支持，考虑到服务器的成本比较高，个人站点所需只是一小部分，所以就用大型的服务器分成若干独立的虚拟服务器，但事实上是只有一个主机，虚拟了若干独立的小主机，简单的可以理解为，虚拟主机就是空间服务商提供的存放空间，不同的是空间只是服务器的存储部分，而 ASP 等动态的站点时需要服务器来支持的6网站维护操作步骤；一个网站可能包括成百上千甚至更多的文件，在发布之前，要对它们逐一检查，并在本地计算机中进行调试，防止错误包含在其中。网

12、址维护方面我主要借助老师的后台，所以我对这维护这方面也不太清楚。7提出对网站的改进意见；电子商务类网站，主要面向供应商、客户或者企业产品（服务）的消费群体，以提供某种直属于企业业务范围的服务或交易、或者为业务服务的服务或者交易为主；这样的电子商务网站建设可以说是正处于电子商务化的一个中间阶段，由于行业特色和企业投入的深度广度的不同，其电子商务化程度可能处于从比较初级的服务支持、产品列表到比较高级的网上支付的其中某一阶段。通常这种类型可以形象的称为网上 xx 企业。依据此标准，我的网站不足之处有：1.网站只能进行浏览和发布一些信息，不能真正的实现买卖交易2.内容太少，一个网站应该有丰富的商品，以

13、提供给顾客选择3.功能不全，网站没有搜索、登陆、注册等功能，因为不知道怎么连接数据库，所以在初步制作时省略了这些功能，如果真的想做好电子商务类的网站，这些功能是不能少的。4.动态的网页太少了，5.网站的大小和规划还不是很全面，首页应该是多大，该放多少图片和新闻显示内容，两者如何结合好，我自己对这方面研究太浅，望日后可以深入学习。 八课设心得：我觉得我的网页设计的最大特点就是色彩淡雅，布局协调，结构清晰。网站首页插入了图片切换，二级页面则有新闻显示。这次课设，我们都是自己按照自己的喜好设计网站，每个人的都不同。我们每天中午都呆在机房里认真地制作只为做好网站，看到自己做的很多有价值的东西，我们都很

14、高兴。在这次实验的过程中，我首先搜集了大量的素材和网页设计的技术技巧方面的书，设想自己应该应用和方面的知识，有时会查阅课本，寻找相关的制作步骤；有时候会不管咋试都有错误，这时会询问班里同学是哪方面出错了。现在，我现在已经熟练地掌握切图、文档排版标记的使用及其属性设置、还有查看代码等功能；并且，我现在已经熟练使用超级链接，合理使用列表；我现在不会再出现图片和切图保存格式出错，还有图片的地址紊乱的错误了。一步步的制作网页，一次次的调试，最终完整地在信息服务器上完成整个网站的操作，这种成就感让我觉得我的辛苦不是白费。我们做完网页后，会去看看别的同学做的网站，相互学习和相互提出相互建议，分享努力的成果。在设计网页和收集网页设计素材的时间里，我全心全意地投入到网页制作的世界里，虽然这并不是一件简单的事，不能急躁、需要耐心。总的来说，这次网页制作对自己来说有很大的收获，虽然做成一个精美、完整地网站，但是由于技术和知识的欠缺也有遗憾，很多不完善的地方需要改进，还有许多的功能要加上。通过这次网页设计和制作，顿时觉得自己知识欠缺，要多看书学习，多做网站以熟悉各种软件各方面的功能。也知道只要自己努力、认真，最后的收获和成果会出乎自己的意料，今后也要多看看好的网站，观察哪些功能我是不会做的，然后查询相关书籍学习掌握。网页制作的海洋里，知识是广阔的，我希望自己在今后的学习中探寻其中的奥秘。