hellokitty网站设计

宁夏大学新华学院课程设计

本次网站设计主题是“HelloKitty”家居网，由我们14网络班小组两个人合作完成。为什么要以这样一个网站为题呢？因为：我们同很多女孩子一样都有一颗粉嫩的少女心，想让自己生活在这样一个粉嫩的环境下，所以我们便萌生了做以HelloKitty为主题的粉色系家居用品网站，为女孩子们编织一个粉嫩的梦！而随着互联网的迅猛发展和全球信息化的发展，人们足不出户就可以获取自己需要的信息，实现购物、炒股、学习、开店、网上聊天、收发邮件、在线娱乐等。网站已成为企业、单位、机关和个人宣传自己的形象，展示自我风采，开展网络营销，进行电子商务活动的平台和窗口，因而，网站的建设、管理、维护也成为日常工作中的重要组成部分。时代的发展呼唤更多的网页设计与制作人员加入到这个前景广阔的工作中来，网站构建和网页制作技术是新世纪知识结构的重要部分，也是当今人们应具备的素质。本网站在内容上主要运用到Dreamweaver cs4、photoshop这两个软件，其中Dreamweaver cs4是一种即插即用的网页编辑软件，它界面美观，操作简便，易学易用，具有较强的网页编辑和网站管理能力，可导入图像、Flash影片等；photoshop是一款专业的网络图形设计和处理工具，利用它可以制作出自己想要的图片尺寸大小和不同的效果。将Dreamweaver cs4、photoshop紧密结合，可以制作出结构严谨、界面美观、内容丰富、表现方式多样、动静结合的网站和网页。

一、课程设计目的和内容.................................................................. - 2 -

1、课程设计目的........................................................................ - 2 -

二、网站的设计与规划...................................................................... - 2 -

2、页面风格设计：.................................................................... - 2 -

3、页面介绍： ............................................................................. - 4 -

3.1模版： ............................................................................... - 4 -

3.2网页展示与制作................................................................ - 6 -

三、文件列表 ................................................................................. - 15 -

3.1 asp文件.............................................................................. - 15 -

3.2 音乐文件 .............................................................................. - 16 -

3.3 图片文件 .............................................................................. - 16 -

四、总结 ........................................................................................... - 16 -

一、课程设计目的和内容

1、课程设计目的

在课程任务里有过网页制作这门课程，当时的实践课不是很多，通过这次网页课程设计，我们学计算机的首先要对基本的网络信息有着更深入的了解，并且要懂得利用网络资源，而不是成天的上网，并且有助于我们了解社会的现状。对于所搜集的资料我们要懂得如何的去筛选有价值的东西，并且怎样去整理所有的信息。并且，作为一款实用软件，我们要学会网页制作中颜色的搭配，主题的确立，独出心裁的设计和审美观点。学会图片和文字的组织方式等等，要通过课程设计，能够领会怎样才能做出新颖、简洁、吸引人的网站

课程设计内容：HelloKitty家居

二、网站的设计与规划

1、网站主题设计:

设计的网站主题是HelloKitty家居用品。随着社会的发展，人们的生活水平不断提高，各种化工业产品层出不穷，也深受现代人的喜欢，同时我国的国人审美观念日益发生着重大的变化，正是有了它们，很多女孩子才开始尝试着去实现自己的小小梦想。

2、页面风格设计：

页面以白色和粉色为主色调，因为粉色更能体现出甜蜜的氛围和烂慢的少女情怀，在各个网页的表格里，根据内容增加了一些背景色，使得网页简单而不单调。网页主页套用了模板，其他商品信息页运用了AP元素中的div，顶端是一张具有HelloKitty图样的图片作为Baner,将LOGO容入其中，彰显主题。每张页面正文的下侧为子导航，底部嵌入了一张与页面风格相对称的图片。栏目页采用多个模块图片拼接起来的，显得网页更加的清晰。主要从下面几点说明：

2.1色彩:

本网站的主要色彩是粉色。因为在大多数女孩心中，粉色代表浪漫、温馨的感觉，这个色彩，让我们眼前一亮，视觉上有了很大的美感。

2.2布局:

本网站的主要布局主要采用表格、ap、浮动框架。

2.3文字:

本网站由于是两个人合作，所以我们就制定了一个统一的方案，这样使整个网站浏览时才不会让人眼花缭乱。

2.4网站结构设计：

设计的网站主页加其他页面总共有66个页面。

2.5页面的布局：

3、页面介绍：3.1模版：

3.1.1其他

用AP做的模版，用了3个AP，top图片，导航条图片，还有中间的内容。在top 中添加了一个图形热点链接，收藏本店，链接的还是这个页面。导航条中添加了图片交换，和链接各7个。内容页用了一个宽1024px，高1553px的AP固定位置在其中添加了两个一行一列的表格，和一个6行9列的表格，第一个表格中添加了一个可编辑区域。6行9列的表格中添加了15个可编辑区域，在其中的6个可编辑区域中添加了200x200的图片占位符。最后一个表格是为了固定文字，使其居中。共生成3个页面。

3.1.2床模版

用表格做的模版。首先用一个宽1024的表格固定位置，然后再把这个表格分为上中下三个部分，中间又分为左右两个部分。上为top+导航，top图片1024x135，导航图片113x40，top图片中有一个图形热点链接，每一个导航图片都做了图片交换行为，和链接。中为各个页面间的链接，左边为346x1180的表格，中间继续插入一个宽179的24行1列的表格。表格中的图片的行为使晃动。为每一个表格插入样式类cd，文字样式为全局样式。右边有共有20个可编辑区域，其中，9个为200x200的图片占位符。下面插入了一个宽1024的1行1列的表格，插入多媒体音乐。最下面的表格为1行5列的表格，其中添加文字。做超链接。共生成18个商品展示页面。每个商品展示页都有独立的商品的链接。

3.2网页展示与制作

3.2.1首页

插入一个5行1列的表格做整体布局，宽1024。第一行插入了提前做好的图片，包括网站top，导航栏，背景栏，其中导航栏中有图片交换和链接各七个，背景栏有图形热点链接7个，用红色方框标识出来了，第二行插入一个音乐多媒体，用棕红色方框标识出来。第四行中插入了一个1行5列的表格，中间插入文字做多媒体链接，第五行插入一张图片，使页面更加好看。

3.2.2所有宝贝页

用床模版页生成的页面，在模版的基础上添加了图片，文字，还有菜单按钮，跳转到下一页。图片大小都为200x200，添加在图片占位符上。文字添加在可编辑区域中。菜单按钮也添加在可编辑区域中。

3.2.3店铺活动页

用其他模版生成的页面，在模版的可编辑区域中的图片占位符中添加了图片，在可编辑区域中添加文字，文字的样式用ys，本页的链接有7个可点的，2个空链接，没有给本页商品做页面链接，因为商品属于上新，暂时不予出售。

3.2.4居家用品页

该页面用床模版生成，在可编辑区域中的图片占位符中添加了图片，第一张图片行为增大收缩，可编辑区域中添加文字，文字的样式用ys，为每个商品文字做了超链接，第一个商品图片行为添加了放大。添加了菜单栏，为其做了超链接，使试用更加简洁。

3.2.5卫浴用品页

页面用床模版生成，在可编辑区域中的图片占位符中添加了图片，第一张图片行为增大收缩，可编辑区域中添加了文字，文字的样式用ys，为每个商品文字做了超链接，第一个商品图片行为添加了放大。添加了店主寄言，浮动框架fd宽600高300，为其做了超链接。

3.2.6特色床品页

该页面用床模版页面生成，与其他页面不同的是，在最后一个可编辑区域中添加了一个三列两行的表格，在其中插入了图片，使页面更加丰富。

3.2.7联系我们页面

由其他模版生成，在可编辑区域中添加了我们的微信二维码图片，使整个网站更加有活力。

3.2.8关于我们页面

由其他模版生成，在其他模版的可编辑的图片占位符中添加事先做好的图片。如上图。

3.2.9单个页面

整个页面用ap制作，共使用6个AP，第一个ap为导航条为其做了图片交换的行为还有超链接。在第三个ap中添加了按钮，做了空链接。最后一个ap中做了文字的超链接。返回到页面顶部。

三、文件列表

双击KT进入asp文件页面

3.1 asp文件

点击主页进入网站

3.2 音乐文件

3.3 图片文件

四、总结

两周的课程设计很是忙，由于这次是分组合作做的网页，虽然看上去好像任务减轻了，但现实上比想象的还要复杂的多，因为每个人的设计跟想法都不同，页面设计布局上存在很在的问题，通过两周的学习，让我充分认识了团队合作的重要性。另外，制作网页一定要学会使用模板及嵌套，这在网页设计中十分中用，既省时省事。总体上来讲，我们都有用心去做，我们都分享着分工的喜悦，也充分认识了团队合作的重要性。