郑州轻工业学院
课程设计任务书
题目个人网站的设计与实现
院系 XXX XXX XXX X
专业班级XXX XXX XXX X
学号 XXX XXX XXX X 姓名 XXX
主要内容:
利用所学内容,设计个人网站
基本要求:
本系统制作一个个人网站,要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理;多媒体(图像、音乐、滚动字幕)运用适当;Flash、框架运用合适;适当使用样式页(CSS)等。
主要参考资料等:
《Web设计基础》李开荣高等教育出版社 2008
《网站规划与网页设计》张兵义电子工业出版社 2008
《Web编程技术》历小军机械工业出版社 2009
完成期限:一周
指导教师签名:
课程负责人签名:
2010年 5 月日
目录
一、引言........................................................................... 错误!未定义书签。
1.1课题的背景......................................................... 错误!未定义书签。
1.2可行性研究......................................................... 错误!未定义书签。
二、需求分析................................................................... 错误!未定义书签。
2.1系统概述:......................................................... 错误!未定义书签。
2.2功能要求: (1)
三、总体设计................................................................... 错误!未定义书签。
3.1功能设计 (3)
3.2界面设计 (4)
四.详细设计与实现....................................................... 错误!未定义书签。
六、结语 (24)
个人网页设计和实现
一、引言
1.1课题的背景
经过本学期对web设计基础这门课程的学习,对web的设计以及相关代码的使用有了深入的了解,在学期末制作主题为个人主页的网页,对其设计并实现。
1.2可行性研究
经过考虑对制作工具的筛选,决定用Dreamweaver做个人网页,Photoshop 为辅助工具,设计和制作图片、页面及图标等。
本网站是以静态网页为基础,以Dreamweaver为制作软件、以Photoshop 为设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解,制作出相对简单的个人网页,展示自己相关的一些东西;
本网站内容充实,在主页的设计上运用了模板,框架等。分页面上运用了导航条。插入了动态图片以及视频等给网增加了美观度,在首页的设计上本着简单易懂的原则,用户只要点击链接就能看到自己想看到的连接内容。网站的首页设置了背景音乐,使访问者在浏览的同时还能欣赏到悠扬的旋律。
二、需求分析
2.1系统概述
一个具有个性的个人网站,是让别人对你进行了解,与别人沟通的更好途径,本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到我的一些信息。
运用Windows XP + Dreamweaver8 +PS 的网站设计制作环境,设计出神秘、活力的暗色与绚丽特效的网页特色。
2.2功能要求
实现链接、滚动字幕或图片、插入音频、视频等插件的功能;
三、总体设计
运用Dreamweaver的框架功能;围绕关于我自己的一些相关信息进行分类,实现分类的链接进行制作;并且要注重网页的一体化,美感,还有色彩的搭配,音乐的选取等;
3.1 功能设计:
利用框架(选取了左右下的框架结构)设置基本模样。左边框架作为导航栏,下边的部分作为滚动图片栏;右上方一大部分作为各个子网页的浏览区;在导航栏插入了音乐,以便放入的音乐不会随着链接的进入而消失,增添了网页的趣味性;
导航栏包括共:我的档案,我的日志,我的班级,我的宠物,视频欣赏五项,分别链接到各个子页面;在导航区的最下方还设置有返回欢迎页面的链接;并且设置导航区的背景、颜色、插入动态图片等。
3.2 界面设计:
本网页页面风格为暗色系,以黑色为主色其他色系进行搭配进行制作。
index_my web:主模块(右上层模块)添加制作的动态欢迎图片:欢迎来到小小寒的主页(动态);左侧导航栏目分布了各个子页面的链接,点击即可进入各个子页面;右下方的模块放置我的图片,并且运动代码实现滚动功能;
由导航栏分别可以进入以下子页面:
我的档案:主要介绍了我的一些基本情况,爱好及性格特征等等;
我的日志:选了一篇自己喜欢的写过的文章供大家阅读;
我的宠物:展示了我的宠物小狗贝贝的一些东西,我养狗的一些感受等;
我的班级:介绍了我的班级的基本情况;
视频欣赏:摘选了一个搞笑flash给大家娱乐;
以上五个分页面风格与整体保持一致,庄重而不失色彩;
四、详细设计与实现
1、创建网页页面:
(1)新建站点:
如图建立新站点,设置好各个选项,一般静态网页不用连接到网络,设置不用做太多修改,只需要设定好名称及文件夹位置即可。
(2)新建网页:
如图,选择创建新项目的HTML,或者选择模板建立;创建好六个页面,分别保存名称为:index,我的档案,我的日志,我的班级,我的宠物,视频欣赏;
2、打开页面,选择布局模式,使用左右下模板,保存主页面标题为index.html,标题改为“我的主页”;试运行,保存两个框架;
在左层模块添加插件音乐,并缩小插件;(如图1)
设置导航栏,为每个分类的文字添加链接,将文字添加链接到“我的档案”等各个子分页,并且分页链接目标选择mainframe(如图2):
图1:
图2:
在mainframe中插入自己在Photoshop中制作的动态欢迎图片,添加到layer1中可以调试位置;
在下方框架中插入各种照片,运动滚动效果的代码实现其功能;
为了美化在各个模块中背景插入了相框,条纹等动态闪动图片;让视觉效果更震撼;图一页面代码如下:
color: #FF0000;
}
.STYLE1 {
font-size: 24px;
font-family: "幼圆";
}
#Layer1 {
position:absolute;
width:148px;
height:633px;
z-index:1;
left: 1px;
top: 20px;
}
.STYLE2 {font-size: 24px; font-family: "幼圆"; color: #FF0000; } #Layer2 {
position:absolute;
width:35px;
height:18px;
z-index:1;
left: 62px;
top: 510px;
}
a:link {
text-decoration: none;
color: #66FFFF;
}
a:visited {
text-decoration: none;
color: #F4F4F4;
}
a:hover {
text-decoration: none;
color: #F4F4F4;
}
a:active {
text-decoration: none;
color: #66FFFF;
}
-->
┭返回主页
}
#Layer3 {
position:absolute;
width:1097px;
height:115px;
z-index:2;
left: 12px;
top: 57px;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 73px;
top: 36px;
}
-->
top: 510px;
}
a:link {
text-decoration: none;
color: #66FFFF;
}
a:visited {
text-decoration: none;
color: #F4F4F4;
}
a:hover {
text-decoration: none;
color: #F4F4F4;
}
a:active {
text-decoration: none;
color: #66FFFF;
}
-->
┭返回主页
position:absolute;
width:1108px;
height:163px;
z-index:1;
top: 4px;
left: 7px;
}
body {
background-color: #000000;
}
-->
var speed=8//速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
demo2left.innerHTML=demo1left.innerHTML
function Marquee(){
if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其实demo.scrollLeft是有最大值的,和demo0.width,引用的图片的width有关系。demo过了一半(每半内容一样的),重新开始循环
demoleft.scrollLeft-=demo1left.offsetWidth
else{
demoleft.scrollLeft++//不断的增加,相当于父容器的滚动条不断是缩小;但由于OVERFLOW: hidden; (滚动条不可见)
}
}
var MyMarleft=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMarleft)}
demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
3、在Photoshop中设计自己的子页面效果:
(1) 找到自己喜爱的图片最为背景,定义图片添加到填充背景图案中;
(2) 新建文件我的导航,填充背景,加入导航字,设置字体,椭圆边框;
(3) 找到自己的一张照片抠出需要的部分粘贴在我的导航中,各个字体设置好,页面调整到最佳,使用切片工具把需要添加链接的部分切好;保存为网页模式;以我的档案为例如图:
代码:
width:187px;
height:442px;
z-index:1;
left: 659px;
top: 527px;
}
.STYLE2 {color: #FF0000} -->
其他各个子页面效果如下:我的日志:
代码:
代码:
代码:
网页制作课程设计报告 学院: 专业班级: 姓名: 学号: 成绩: 阅卷教师:
目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (1)
1.设计目的 阐述该个人网站的设计意图和创意,简单介绍自己的个人网站。 2.设计思想 阐述网站的整体设计思想,包括: 2.1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想,绘制网站结构草图。 2.2 主页设计思想 要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析 要求选取一张网页,对网页的设计实现过程进行阐述和分析,详细说明制作该网页的步骤,所使用的网页对象以及该网页对象的操作方法。 4结论 对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。
一、设计目的 本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素质。我本次主要是设计的一“新加坡之旅”为主题的网页,针对新加坡的美丽风景做了介绍。 二、设计思想 利用Dreamweaver8.0制作一个关于“新加坡之旅”的网站,利用表格、行为、层和链接等网页设计技术设计页面。
Web应用开发技术 实验报告 专业:计算机科学与技术 班级: 学号: 姓名:
一、设计题目 个人网站 二、目的 1、本次设计是学生在学完ASP动态网站开发课程后的一次实践性很强的课程设计,是对ASP进行动态网站开发所学知识的综合运用。 2、掌握使用ASP技术进行网站开发设计。 3、通过本次实习,使学生加深所学知识内容的理解,并能积极地调动学生的学习兴趣,结合实际应用操作环境,真正做到理论与实际相结合。 三、功能需求描述 此网站可以对主人留言,来发表自己的心情,也可以把自己的联系方式写入其中,达到和睦相处、心灵的驿站的目的等。 四、总体设计
五、详细设计 (一)、我的主页 此页面为网站的主页,通过发布新心情,点击通讯录可以查看通讯录好友信息,点击留言板可以查看好友留言。 主要代码: