-
宁夏大学新华学院
课程设计
网站名称
姓
名
卜莎
李嘉喻
学
号
Hellokitty
家居网站(
web
开发技术)
< p>
分数
批改日期
班级
2014
级
网络班
系别
信息与计算
机科学系
专业
网络工程
任课教师签字
备
注
前言
本次网站设计主题是“
H elloKitty
”家居网,由我们
14
网络班小
组两个人合作完成。为什么要以这样一个网站为题呢?因为:我们
同很多女孩
子一样都有一颗粉嫩的少女心,想让自己生活在这样一
个粉嫩的环境下,
所以我们便萌生了做以
HelloKitty
为主题的粉色系
家居用品网站,为女孩子们编织一个粉嫩的梦!
而随着互 联网的
迅猛发展和全球信息化的发展,人们足不出户就可以获取自己需要
的信息,实现购物、炒股、学习、开店、网上聊天、收发邮件、在
线娱乐等。网
站已成为企业、单位、机关和个人宣传自己的形象,
展示自我风采,开展网络营销,进行
电子商务活动的平台和窗口,
因而,
网站的建设、
管理、
维护也成为日常工作中的重要组成部分。
时代的发展呼唤更多的网页设计
与制作人员加入到这个前景广阔的
工作中来,
网站构建和网页制作技术是 新世纪知识结构的重要部分,
也
是当
今人
们应具
备的
素质
。
< p>本
网站
在内
容上主
要运
用到< /p>
Dreamweaver cs4
、
photoshop< /p>
这两个软件,
其中
Dreamweaver cs4
是
一种即插即用的网页编辑软件,
它界面美观,
操作简便 ,
易学易用,
具有较强的网页编辑和网站管理能力,可导入图像、
Flash
影片等;
photoshop
是一款 专业的网络图形设计和处理工具,
利用它可以制作
出自己想要的图片尺寸
大小和不同的效果。将
Dreamweaver
cs4
、
photoshop
紧密结合,可以制作出结构严谨、界面美观、内容丰富、< /p>
表现方式多样、动静结合的网站和网页。
目录
一、课程设计目的和内容
.
..... .................................................. ..........
-
2 -
1
、
课程设计目的
< /p>
.
.................................... ...................................
-
2 -
二、网站的设计与规划
< /p>
.
.................................... .................................
-
2 -
2
、
页面风格设计:
.
............. .................................................. ....
-
2 -
3
、页面介绍:
................. .................................................. ..........
-
4 -
3.1
模版:
.................. .................................................. ...........
-
4 -
3.2
网页展示与制作
.
................................................. ..............
-
6 -
三、
文件列表
.......... .................................................. .....................
-
15 -
3.1
asp
文件
.
................................... ..........................................
-
15 -
3.2
音乐文件
............................... ...............................................
-
16 -
3.3
图片文件
............................... ...............................................
-
16 -
四、总结
...... .................................................. ...................................
-
16 -
- 1 -
一、课程设计目的和内容
1
、
课程设计目的
在课程任务里有过网页
制作这门课程,
当时的实践课不是很多,
通过这次网页课
程设计,
我们学计算机的首先要对基本的网络信息有着更深入的了解,
并且要懂< /p>
得利用网络资源,
而不是成天的上网,
并且有助于我们了解 社会的现状。
对于所
搜集的资料我们要懂得如何的去筛选有价值的东西,
并且怎样去整理所有的信息。
并且,作为一款实用软件,我们要学会网页
制作中颜色的搭配,主题的确立,独
出心裁的设计和审美观点。学会图片和文字的组织方
式等等,要通过课程设计,
能够领会怎样才能做出新颖、简洁、吸引人的网站
课程设计内容:
HelloKitty
家居
二、网站的设计与规划
1
、
网站主题设计
:
设计的网站主题是
HelloKitty p>
家居用品。
随着社会的发展,
人们的生活水平不断
提高,各种化工业产品层出不穷,也深受现代人的喜欢,同时我国的国人
审美观念日
益发生着重大的变化,正是有了它们,很多女孩子才开始尝试
着去实现自己的小小梦想。
2
、
页面风格设计:
页面以白色和粉色为主色调,因为粉色更能体现出甜蜜的氛围和烂慢的少
女情怀,在各个网页的表格里,根据内容增加了一些背景色,使得网页简单而
不
单调。网页主页套用了模板,其他商品信息页运用了
AP
元素中的
div
,顶端
是一张具有
HelloKitty
图样的图片作为
Baner,
将
LOGO
容 入其中,彰显主题。每
张页面正文的下侧为子导航,底部嵌入了一张与页面风格相对称的
图片。栏目
页采用多个模块图片拼接起来的,显得网页更加的清晰。
主要从下面几点说
明:
- 2 -
2.1
色彩
:
本网站的主要色
彩是粉色。因为在大多数女孩心中,粉色代表浪漫、温馨的感
觉,这个色彩,让我们眼前
一亮,视觉上有了很大的美感。
2.2
布局
:
本网站的主要布
局主要采用表格、
ap
、浮动框架。
2.3
文字
:
本网站由于是两
个人合作,所以我们就制定了一个统一的方案,这样使整个网
站浏览时才不会让人眼花缭
乱。
2.4
网站结构设计:
设计的网站主页加其他页面总共有
66
个页面。
2.5
页面的布局:
Hellokitty
家居网站
首页
床模板
其他模板
< p>
所
有
宝
贝
特
色
床
品
p>
特
色
柜
< br>子
居
家
用
p>
品
卫
浴
< br>用
品
店
铺
p>
活
动
联
< br>系
我
们
关
p>
于
我
们
- 3 -
3
、页面介绍:
3.1
模版:
3.1.1
其他
- 4 -
用
AP
做的模版,用了 p>
3
个
AP
,
top
图片 ,导航条图片,还有中间的内容。在
top
中添加了一个图形热点链接,
收藏本店,
链接的还是这个页面。
导航条中添加了
图片交换,和链接各
7
个。内容页用了一个宽
1024p x
,高
1553px
的
AP
固定位
置在其中添加了两个一行一列的表格,
和一个
6
行
9
列的表格,
第一个表格中添
加
了一个可编辑区域。
6
行
9
列的表格中添加了 p>
15
个可编辑区域,在其中的
6
个可编辑区域
中添加了
200x200
的图片占位符。最后一个表格是为了固定文字,
使其居中。共生成
3
个页面。
3.1.2
床模版
- 5 -
用表格做的模版。首先用一个宽
< p>1024的表格固定位置,然后再把这个表格
分为上中下三个部分,
中间又分为左右两个部分。上为
top+
导航,
top
< p>图片
1024x135
,导航图片
113x40 p>
,
top
图片中有一个图形热点链接,每一个导航图片
都做了图片交换行为,和链接。中为各个页面间的链接,左边为
346x1180
的表
格,
中间继续插入一个宽
179
< p>的24
行
1
列的表格。
表格中 的图片的行为使晃动。
为每一个表格插入样式类
cd
,文 字样式为全局样式。右边有共有
20
个可编辑区
域,其中
,
9
个为
200x200
的图片占位符。下面插入 了一个宽
1024
的
1
行
1
列
的表格,插入多媒体音乐。最下面的表格为
1
行
5
列的表格,其中添加文字。做
超链接。共生成
18
个商品展示页面。每个商品展示页都有独立的商品的链接。
3.2
网页展示与制作
3.2.1
首页
- 6 -
插入一个
5
行
1
列的表格做整体布局,宽
1024
。第一行插入了提前做好 p>
的图片,包括网站
top
,导航栏,背景栏,其中导航栏中有 图片交换和链
接各七个,
背景栏有图形热点链接
7
个,
用红色方框标识出来了,
第二行
插入一个音
乐多媒体,用棕红色方框标识出来。第四行中插入了一个
1
行
列的表格,
中间插入文字做多媒体链接,
第五行插入一张图 片,
使页
面更加好看。
3.2.2
所有宝贝页
- 7 -