没有合适的资源?快使用搜索试试~ 我知道了~
毕业设计-web设计基础报告个人网页设计和实现.doc
0 下载量 108 浏览量
2023-06-30
04:06:40
上传
评论
收藏 995KB DOC 举报
温馨提示
试读
24页
毕业设计-web设计基础报告个人网页设计和实现.doc
资源推荐
资源详情
资源评论
1
郑州轻工业学院
课 程 设 计 任 务 书
题目 个人网站的设计与实现
主要内容:
利用所学内容,设计个人网站
基本要求:
本系统制作一个个人网站,要求个人网站主题设计思想明确、思路清晰、颜
色选择恰当、布局合理;多媒体(图像、音乐、滚动字幕)运用适当;Flash、
框架运用合适;适当使用样式页(CSS)等。
主要参考资料等:
《Web 设计基础》 李开荣 高等教育出版社 2008
《网站规划与网页设计》张兵义 电子工业出版社 2008
《Web 编程技术》历小军 机械工业出版社 2009
完 成 期 限: 一 周
指 导 教 师 签 名 :
课程负责人签名:
2010 年 5 月 日
目录
一、引言 .............................................................................................................1
1
1.1 课题的背景 ...........................................................................................1
1.2 可行性研究 ...........................................................................................1
二、需求分析 .....................................................................................................1
2.1 系统概述: ...........................................................................................1
2.2 功能要求: ...........................................................................................1
三、总体设计 .....................................................................................................2
3.1 功能设计 ...............................................................................................3
3.2 界面设计 ...............................................................................................4
四.详细设计与实现 .........................................................................................5
六、结语 ...........................................................................................................24
个人网页设计和实现
一、 引言
1
1.1 课题的背景
经过本学期对 web 设计基础这门课程的学习,对 web 的设计以及相关代码
的使用有了深入的了解,在学期末制作主题为个人主页的网页,对其设计并实现。
1.2 可行性研究
经过考虑对制作工具的筛选,决定用 Dreamweaver 做个人网页,Photoshop
为辅助工具,设计和制作图片、页面及图标等。
本网站是以静态网页为基础,以 Dreamweaver 为制作软件、以 Photoshop 为
设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件
的了解,制作出相对简单的个人网页,展示自己相关的一些东西;
本网站内容充实, 在主页的设计上运用了模板,框架等。分页面上运用了
导航条。插入了动态图片以及视频等给网增加了美观度,在首页的设计上本着简
单易懂的原则,用户只要点击链接就能看到自己想看到的连接内容。网站的首页
设置了背景音乐,使访问者在浏览的同时还能欣赏到悠扬的旋律。
二、 需求分析
2.1 系统概述
一个具有个性的个人网站,是让别人对你进行了解,与别人沟通的更好途径,
本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到
我的一些信息。
运用 Windows XP + Dreamweaver8 +PS 的网站设计制作环境,设计出神
秘、活力的暗色与绚丽特效的网页特色。
2.2 功能要求
实现链接、滚动字幕或图片、插入音频、视频等插件的功能;
三、 总体设计
运用 Dreamweaver 的框架功能;围绕关于我自己的一些相关信息进行分类,
实现分类的链接进行制作;并且要注重网页的一体化,美感,还有色彩的搭配,
音乐的选取等;
3.1 功能设计:
利用框架(选取了左右下的框架结构)设置基本模样。左边框架作为导航栏,
下边的部分作为滚动图片栏;右上方一大部分作为各个子网页的浏览区;在导航
1
栏插入了音乐,以便放入的音乐不会随着链接的进入而消失,增添了网页的趣味
性;
导航栏包括共:我的档案,我的日志,我的班级,我的宠物,视频欣赏五项,
分别链接到各个子页面;在导航区的最下方还设置有返回欢迎页面的链接;并且
设置导航区的背景、颜色、插入动态图片等。
3.2 界面设计:
本网页页面风格为暗色系,以黑色为主色其他色系进行搭配进行制作。
index_my web:主模块(右上层模块)添加制作的动态欢迎图片:欢迎来
到小小寒的主页(动态);左侧导航栏目分布了各个子页面的链接,点击即可进
入各个子页面;右下方的模块放置我的图片,并且运动代码实现滚动功能;
由导航栏分别可以进入以下子页面:
我的档案:主要介绍了我的一些基本情况,爱好及性格特征等等;
我的日志:选了一篇自己喜欢的写过的文章供大家阅读;
我的宠物:展示了我的宠物小狗贝贝的一些东西,我养狗的一些感受等;
我的班级:介绍了我的班级的基本情况;
视频欣赏:摘选了一个搞笑 flash 给大家娱乐;
以上五个分页面风格与整体保持一致,庄重而不失色彩;
四、 详细设计与实现
1、创建网页页面:
(1)新建站点:
1
如图建立新站点,设置好各个选项,一般静态网页不用连接到网络,设置不用做太多修
改,只需要设定好名称及文件夹位置即可。
(2)新建网页:
如图,选择创建新项目的 HTML,或者选择模板建立;创建好六个页面,分别保存名
称为:index,我的档案,我的日志,我的班级,我的宠物,视频欣赏;
2、打开页面,选择布局模式,使用左右下模板,保存主页面标题为 index.html,
标题改为“我的主页”;试运行,保存两个框架;
在左层模块添加插件音乐,并缩小插件;(如图 1)
设置导航栏,为每个分类的文字添加链接,将文字添加链接到“我的档案”
等各个子分页,并且分页链接目标选择 mainframe(如图 2):
图 1:
剩余23页未读,继续阅读
资源评论
matlab大师
- 粉丝: 2462
- 资源: 8万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功