网页设计课程设计个人工作报告.doc

南京工业大学 网页设计课程设计个人工作报告 学号2204110231 姓名 陈欢南京工业大学网页设计课程设计报告个人工作报告学院： 经济与管理学院 专业： 电子商务 学号： 2204110231 姓名： 陈欢 成绩： 2014年6月第一部分 工作日记2014-06-23 星期一 今天是课程设计的第一天，上周已经把小组和个人的选题提交了。在胡老师的动员下，我们的课设就正式开始了。我们小组选择的行业为零售业图书。说到图书，自然就联想到了以图书起家的当当网以及国外的亚马逊。在征求大家意见后，我们选择了这两家电子商务企业进行行业标杆网站分析，主要是从网站的目标定位、版面的总体设计和栏目设置、提供的内容信息是否准确、网页的制作结构、色彩和导航、交互设计是否合理方便等方面进行评析比较。在大致了解了要求以及查看任务书后，我们进行了小组分工。我们小组一共5个人，考虑到大家以前学的专业不一样，因此在分工上有所侧重。我主要负责的是网站CSS方案、JavaScript方案的设计以及网页制作，还有报告的整合和修改。2014-6-24 星期二在小组两名成员撰写行业标杆网站分析还未完成的情况下，我先进行了“从表格布局转向CSS布局演练”这个任务。我首先在Dreamweaver中新建了一个叫做Yacht的站点，接着把所要的用到的素材放到站点里面去。演练的前半部分，主要是对div、css、类选择器、id选择器、标签选择器等有一个基本的了解，熟悉像float这样的属性。由于之前没有怎么实际的运用过div+css进行网页布局，因此在前半部分的演练中，觉得css运用之后有一种很“神奇”感觉。设置了一个选择器后，将所有包含在内的元素，都进行统一的设置，而不用像以前那样一个一个的设置。演练的第二部分就开始正真的将div+css布局整体应用于网页中了。在刚开始新建网页的时候，以前我们一般都是直接新建一张html文件，都没有去关注过布局这个栏目，而演练中选择的是“2列固定，左侧栏、标题和脚注” 布局样式这一项，从而实现了网页开始制作之前就已经形成了布局格式，不用自己不断地加入盒子，来进行布局。因为是自动生成的布局，所以有些东西是系统命名的，比较复杂，因此将软件默认命名前缀去掉这一步，非常重要，他可以让我们更清楚的看到CSS，更好的去理解它们。在这部分的练习中，让我对div+css布局有了更深入的了解，真的可以用“精妙”二字来形容。运用的恰到好处，精简了不少代码。虽然只是对着步骤一步一步照着做下来，但做完后还是会有种豁然开朗的感觉，觉得自己以前做的那些网页太幼稚了。当然在演练过程中我也碰到了不少问题。翻译过来的文档多多少少会有些错误在里边，有少数地方翻译的特别奇怪，让人看不懂，比如说将Accordion翻译成了手风琴，一开始没看懂，打开英文版的进行比较后才知道，原来指的是accordion，意思是“可折叠”，这下我终于明白过来，相应的属性修改也都在SpryAccordion.css这里面进行设置。而Spry折叠式面板的运用，是我在整个演练中收获比较大的一个地方。以前经常能在其他网页中看到的效果，原来直接用Dreamweaver也可以做到，非常不错。有点遗憾的是，效果没能完全做出来，在内容框出来后，标题框文字看不到了。Spry折叠式面板效果通过此次演练，我对div+css布局有了深入了解，真正的体会到了Dreamweaver的功能强大，也让我认识到自己对Dreamweaver的掌握程度还远远不够，以后应该更加深入的去了解、体会与实践。2014-6-25 星期三在标杆网站分析完成后，我们就正式开始对网站的架构以及CSS方案、色彩方案以及JavaScript方案进行分析设计了。我们参考的是电子商务图书类标杆网站，所以我们也是准备做一个图书类网站。我想到的一个方案是做校园二手书的买卖，也就是校园网上书店，而我的方案也得到了大家的认可，之后便开始填充内容。这个网站需要实现哪些功能，是我们第一个考虑的。既然是校园网上书店，那么图书的买卖是肯定要有的，接着我们根据标杆网站分析以及参考一些网上做图书的网站，又补充了其他功能，比如说教材求购、商品发布、上门收书、期末借书、留言、关于我们、交流社区等。在分析之后，我们小组把网站命名为“爱淘书”，目标人群是工大在校师生，域名是。因为是在www.3v.cm这个网站上申请的,所以域名之后会跟上。域名及虚拟主机控制面板2014-6-26 星期四从今天开始，就正式进行小组网页的设计了。在拿到彭晓雯同学的信息架构后，我参考其他网站、去图书馆查找资料后完成了CSS方案和JavaScript方案。我将Dreamweaver站点名字命名为itaobok，之后运用个人演练中的布局，新建了一个“2列固定，左侧栏、标题和脚注”布局。header部分虽然大致知道了每个部分应该做一些什么，但是却不知道从哪边做起来比较方便。我们小组网页设计，没有用模板，而是进行布局后，参考其他网站结合自己的信息架构，进行内容的填充。去图书馆查找资料过程中，看到了人民邮电出版社的两本书，分别是别具光芒CSS网页布局案例剖析和CSS设计彻底研究。这两本书对我的帮助还是挺大的。它里面讲到可以利用PS的切片功能，先将网页切分成若干模块，将里面有些可用的图片单独切出来，我觉得这还是比较实用的。但是我没有对网页进行整体切片，而是将我要用到的素材，利用QQ截图保存下来。像网页头部的背景图片就是我用QQ截图截下来的图片。利用background-repeat的repeat-x属性，将原本长条形的图片进行了水平延伸，效果非常不错。利用背景图片也在一定程度上帮助我们进行色彩搭配首先我们从header部分做起，将整个网页的宽度定为950。Header部分分为了顶部的侧导航、banner广告、logo及搜索框、横排导航广告轮播、广告轮播及公告信息。因此在header盒子内，又放入五个div盒子。第一个盒子，命名为site-navigation，放入欢迎信息、头部导航信息等，同时也在右侧又加了一个div，用于放置购物车、收藏夹等信息，而这个盒子的float属性设置为向右浮动，使得它能向右靠齐。第二个盒子，命名为banner，此处插入一个banner广告，清除浮动，宽度和最外部container盒子一样。第三个盒子，命名为head-wrapper，左侧放入logo，右侧放搜索框，分别为他们设置了一个盒子，并为他们设置float属性。Logo由谷晨同学设计，所以暂时用其他图片代替。搜索框的设计是今天任务的一个重点，刚开始做的时候，怎么做都觉得很丑，总感觉像是生拉硬拽上去的，接着我就只好向互联网求助了。在搜索过程中我找到了helloweba这个网站，看了别人设计的搜索框后，感觉可以用几个字来形容“酷”、“帅”，一点都没有违和感。这个搜索框是用HTML5+CSS3设计的，可自动获得焦点和支持语音输入。代码也不复杂，就短短的两段，非常的实用，比自己设计的漂亮太多了。以前需要借助一大段Javascript代码来实现的聚焦和输入光标移开输入框的交互效果，而使用HTML5则只需要设置几个属性一切就好了。再加上CSS的使用效果效果特棒。搜索框效果这部分CSS代码，放在了searchbox.css里面，只需要设置一个链接，就可以调用了。HTML代码CSS代码2014-6-27 星期五昨天完成了header部分的前面三个盒子，所以今天从第四个盒子做起。第四个盒子，命名为navigation，用于放置页面主导航，主要分为了首页、教材求购、商品发布、上门收书、期末借书、留言、关于我们、交流社区几个模块。主导航的实现可以有很多种方法，可以使用spry面板实现，也可以用JavaScript以及CSS实现。在CSS设计彻底研究一书中，有一章是专门讲水平导航菜单的，里面有一个技术是：利用滑动门技术的玻璃效果菜单。效果看上去和我们一般的导航效果差不多，所以就采用的这种方式。它需要设置两层背景，一层是文字本来底部颜色，另一层是鼠标经过后的颜色，都采用图片背景的方式，并设置为repeat-x，使得它能平铺。在完成主导航过程中也碰到了一些问题，比如说不小心把代码给输错了，结果没有效果出来，找了好久才发现问题。我没有完全一个一个字打出来，而是利用Dreamweaver的选择器，看着书上的代码，直接点击修改或者设置相应属性的值。下面这张图就是完成后的效果。当点击某一个模块是，它的颜色将变成墨绿色，而其他颜色仍然正常。滑动门效果就出来了。导航效果第五个盒子，命名为under-nav，它包括了两个部分，左边为图片轮播，右边为公告信息以及关注我们，因此也为他们设置了两个盒子。图片轮播采用JavaScript实现，用CSS控制它的样式。因为自己写不出这样的代码来，所以图片轮播的效果是从网上找的，将与他相关的CSS放在tplb.css中，本来想把JavaScript也单独放在一个JS文件中的，但是当我把它分离出来的时候，就影响到了整体布局，在尝试好几次后，还是没成功，只好先暂时把它放里面了。图片轮播效果是一般网页中常用的一种图片展示方式，最终也实现了效果。在这过程中，也碰到了一些问题，比如说，从网上找来的代码，它的id号一般和自己设置的不同，在js和css中，都要进行相应的改动，一开始我只改了CSS中的id号，没有实现效果，这也告诉我在利用网上代码时，要从多方面着手，而不是仅仅对一处地方进行修改。右边的公告信息以及关注我们，我用的是Spry选项卡式面板，当点击左边的公告信息，出来的是“公告信息”相关内容，自动隐藏“关注我们”部分内容，当点击“关注我们”时，自动隐藏左侧“公告信息内容。”Spry选项卡式面板属性虽然只有两块内容，文字信息非常好输入，在tab部分输入标题内容，双击右边的眼睛符号，可以输入具体内容信息。而默认的样式都是以灰色为底，我想把它改成灰色、白色，以及更换字体大小颜色等。默认样式太多了，开始都搞不懂哪个对应哪个，就只好一个一个试，比如我想把tab部分底色改成浅灰色，那我就一个个试过来，开始时用深一点的颜色像深蓝色，预览时效果就很明显，然后再改过来。改过几个属性后，我就慢慢开始理解了各个属性对应的是哪个部分了。而且他的默认命名，也给了我很大启发。比如以tab结尾的，一般都是修改的面板标题部分，以content结尾的，一般是下面的具体内容。下面两张图是最终的效果图。Spry选项卡式面板效果Spry选项面板还可以用在页面主导航中，用它做出来的面板，只需要修改相应属性，变成自己想要的效果就好了，不用自己大段大段的敲代码、网上找代码。有点遗憾的是上面的tab部分和底下content部分右侧边界不对齐，改了好长时间也没改过来。一开始用这个面板的时候，很陌生，摸索了好一会才熟悉，不过我觉得这些东西都有相同之处，只要一个搞明白了，其他的也不难理解。到现在整个的header部分差不多完成了，以下是header部分的效果图。Header部分效果图2014-6-28 星期六从今天开始进行网页主体部分的设计，content盒子，包括了两个部分：左侧导航，和右侧主体内容。左侧导航分为两个部分，分别为图书分类和热销图书推荐。Content部分架构图书分类利用JavaScript和CSS实现，这块由彭晓雯同学完成。最终的效果如下： 图书分类效果图在没有点击的情况下正常显示，点击相应部分后出现二级分类。热销图书推荐模块，我用的是Spry折叠式面板，这个在之前的个人演练中已经使用过了，当我再次使用这一功能时，就感觉用起来顺多了。对这个面板的相关属性有所了解，设置起来没有以前那么困难了。最终的效果图如下。热销图书推荐效果图默认情况下显示第一条的相关内容，当点击其他标题时，出现该标题内容。2014-6-29 星期天昨天完成了主体部分左侧内容，今天目标是完成右侧主体内容，以及footer部分的内容。这部分主要包括特价精选和热搜排行榜两部分。特价精选这个大盒子里，包括了两个小盒子，一个是标题，另一个是内容，标题部分设置为14号字体，颜色为浅棕色，高度为20px,填充为5px。内容部分，嵌入了一个两行五列的表格，一共放入十本书，每本书底下都有书名，原价以及现价，现价，现价用14号棕色字体标出。热搜排行榜设置基本与特价精选相同，只是将标题颜色各位了墨绿色。特价精选效果图在进行footer部分设计时，在上面插入了一条水平线，不仅有分隔作用，还起到了美化效果。footer部分主要包括三个方面的内容,因此设置了三个盒子，第一个盒子，命名为bzxx,主要是新手入门、配送方式、支付方式、售后服务等信息。这块是利用表格完成的，每一个标题下面的内容，利用样式列表进行排列。第二个盒子，命名为lianjie,主要用来设置友情链接相关内容。第三个盒子，命名为botom，主要用来放置版权信息和小组成员信息。以下为footer部分效果图。footer部分效果图2014-6-30 星期一昨天网站首页差不多做完了，接着就要开始做子页了。我将首页特价精选和热搜排行榜两个部分去掉，其他保留，做成子页模板。我主要做的是子页中的“留言”板块。留言效果图主要分为两个部分，一个是留言板，一个是我要留言，每个都对应用一个盒子包住，因为没有后台数据所以留言板相关的内容是直接写上去的的，而不是读入的。我要留言部分，点击“我要留言”也是无法提交的，设置的是一个空链接。但是可以实现一些验证功能，比如当没有填写邮件地址时，会弹出警告框。但是也不知道是什么原因，后来这个验证无法实现了，这也是比较遗憾的。其他的子页基本由彭晓雯同学完成。2014-7-1 星期二网页到目前为止做的差不多了，今天我的主要任务是将子页和首页合起来，并进行检测，看是否会出现链接无效，在浏览器中运行框架是否会错位等。在合并的时候也碰到了好多麻烦，比如说，子页内容加入后，会引起错位，需要进行float属性以及position属性设置等。最后彭晓雯同学又加入了一个新功能，在网页最右边，加入一个侧导航，有购物车、在线客服、返回首页、返回顶部等功能。效果图如下。侧导航效果图将网页进行最后整合，以及测试后，我们的网页就做好了。一共有十个页面，分别是首页、教材求购、商品发布、上门收书、期末借书、留言、关于我们、交流社区、登录、注册。2014-7-2 星期三网页做好之后就是上传了，我们的免费域名是在www.3v.cm这个网站上找的,域名为。首先是在这个网站上注册，注册完成后会有一个免费的空间，我们可以用ftp软件将网站上传到空间里，之后就可以在网上浏览到了。ftp软件截图网站域名部分截图2014-7-3 星期四小组网站做好，并且上传到网络上后。开始对报告进行完善，彭晓雯同学负责将标杆网站分析以及信息架构等进行整理，而我负责写小组总结报告，以及将彭晓雯同学撰写的报告合并起来。小组任务完成后，我开始做个人作业。开始我去网上搜了七八个模板，最后挑选出一个模板，进行设计。在开始前，我先对个人网站的总体架构进行了规划，并结合CSS、JAVASCRIPT、写出方案。之后搜索相关素材，并进行处理。将网上找到的图片，用PS将类似于“昵图网”这样的水印去掉，并调整图片大小为450*450。模板中的网页并不适合于所有的网页，当我做到“专业对比”部分时，就把模板右侧部分的图片给删掉了，放入一个盒子，里面写一些文字性的东西，而这一改就把整体框架给破坏了，废了好大劲才把它纠正过来，让他定位到它应该在的位置。网站做好后，经过测试，没问题后。同样申请了域名，并将它上传到网上。到现在为止所有任务都完成了，接着把所有的报告整理好，按小组和个人分类，最后刻盘，装入文件袋，上交作业。第二部分 个人网站设计报告一、 选定的2个相关专业名录序号学校名称/排名网址选择理由1武汉大学/7排名靠前、影响力大2斯坦福大学/7商学院在美国数一数二二、 个人网站设计与规划（一）信息架构1、组织系统网站首页布局如下图：MBA_I首页个人主页武汉大学斯坦福大学MBA专业对比左侧内容（以文字为主）右侧内容（可为图片或文字）电商1102 31 陈欢LOGO主导航底部信息主体内容上面这张图是整个网站的一个主体框架，各个子页也大致遵循这个布局，只是将主题内容做一下变动。信息组织方式以内容为主线，进行组织。2、导航系统该网站的导航如下：分为了首页、个人主页、武汉大学、斯坦福大学、MBA、专业对比这几项，其中专业对比下又分为了两项，分别介绍了武汉大学和斯坦福大学在MBA方面的特点、优势等。3、标签系统该网站标签系统风格一致，标签基本都为白色粗体字底部为黑色背景，没有加入方框、按钮图标等，看起来非常舒适，标签起名符合网站主题，命名合理，并且可以实现各子网页之间的正常串联与跳转。（二）CSS方案为了代码整体简洁，因此选择将所有CSS代码，放入style.css中，在每张页面head部分写入引用代码信息，进行调用。（三）色彩方案网站总体来说，使用三种颜色：黑白灰。网页背景为灰色。导航栏和页面底部使用黑色底，文字信息为白色 。总体说来，色彩搭配和谐，没有违和感。（四）JavaScript方案该网站主要有两部分用到JavaScript，分别是导航栏移动门效果和图片轮播。配合CSS使用，预览起来能顺畅运行4、搜索系统该个人网站比较简单，因此没有设置搜索系统，像网站地图、搜索框等。三、 个人网站建设与发布在个人网站做好之后，上www.3v.cm网站上注册了一个域名，为，利用ftp软件将网站整体上传到免费空间中去。虚拟主机控制面板ftp上传软件主界面域名从上面的图中，我们可以看出，该网站已经上传到网络上了，可以进行在线浏览。下面就具体介绍一下网站的功能及各个页面。下面这个是网站首页，可以看出该网站一共有六个导航，分别为首页、个人主页、武汉大学、斯坦福大学、MBA以及专业对比。首页左侧主要内容为网站欢迎信息以及工商管理专业简介，右侧以图片轮播方式展示图片。网站首页“个人主页”左侧内容主要是个人简介以及所在学校的简介，右边是关于学校和关于自己的图片展示。个人主页“武汉大学”页面左侧为武汉大学简介，右侧为和武汉大学相关的图片展示。武汉大学“斯坦福大学”页面左侧主要介绍学校的相关情况，右侧为和学校相关的图片展示。“MBA”页面左侧主要是关于MBA的一些介绍，右侧为相关图片。MBA专业对比导航下，分出两个页面，一个是武汉大学，另一个是斯坦福大学。专业对比-武汉大学专业对比-斯坦福大学22第三部分 个人小结这次课程设计下来，我的收获还是挺大的，从中学到了不少新的知识，对于Dreamweaver软件的使用也更加熟悉了。小组网站我们是利用Dreamweaver自己搭建框架，然后进行内容填充的，可能没有利用模板做出来的那样好看，但是这个过程中还是能学到不少东的。在开始做网站的时候，我参考了好几家做图书的电子商务网站，像淘书网和书虫网，而这两家也是我借鉴的比较多的。网站的大体框架其实都差不多，我们的网站主要是模仿淘书网来做的。我是按照header、content、footer这样的顺序来进行网页设计的。每看到一部分内容，我都会先想一下这个效果是如何实现的、这个定位是如何做到的。就比如说，页面主导航，我看淘书网它的主导航是可以实现滑动门效果的，通过查看网页源码，发现它是利用JavaScript和CSS来实现的。在我去图书馆查阅资料的时候刚好看到了一本书叫CSS设计彻底研究，这里面有一章就专门讲到了水平导航菜单制作，而且有好几种实现方式，比如说自适应的斜角水平菜单、应用滑动门技术的玻璃效果菜单、会跳起的多彩菜单等。我选择了滑动门这种效果，按照书上的代码，利用Dreamweaver进行属性的设置以及修改，并对书上的代码进行修改，使得它适应自己网站的色彩搭配。CSS实战演练对我的帮助还是挺大的。新建网页时的布局方式，我也应用到了小组网站中。Spry面板的效果做好了也是很精美的，只需要通过鼠标点击，修改一些属性值，就能实现预期效果，而不用自己敲代码或者是网上找代码。当然在做网页过程