2022年web设计基础报告-个人网页设计和实现.docx

《2022年web设计基础报告-个人网页设计和实现.docx》由会员分享，可在线阅读，更多相关《2022年web设计基础报告-个人网页设计和实现.docx（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、郑州轻工业学院 课 程 设 计 任 务 书题目个人网站地设计与实现主要内容：利用所学内容，设计个人网站基本要求：本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清楚、颜色挑选恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（ CSS）等 .主要参考资料等：Web 设计基础 李开荣 高等训练出版社 2021网站规划与网页设计张兵义电子工业出版社2021Web 编程技术历小军机械工业出版社 2021完 成 期 限：一周指导老师签名：课程负责人签名：2021 年 5 月 日目录一、引言错误！未定义书签；1.1 课题地背景错误！未定义书签；1.

2、2 可行性争论错误！未定义书签；二、需求分析错误！未定义书签；2.1 系统概述：错误！未定义书签；2.2 功能要求：1三、总体设计错误！未定义书签；3.1 功能设计33.2 界面设计4四具体设计与实现错误！未定义书签；六、结语24个人网页设计和实现一、 引言1.1 课题地背景经过本学期对 web 设计基础这门课程地学习，对web 地设计以及相关代码地使用有了深化地明白，在学期末制作主题为个人主页地网页，对其设计并实现.1.2 可行性争论经过考虑对制作工具地挑选，打算用Dreamweaver做个人网页， Photoshop为帮助工具，设计和制作图片、页面及图标等.本网站是以静态网页为基础，以Dr

3、eamweaver 为制作软件、以Photoshop 为设计软件而成地 .通过这个学期对网页制作代码相关地学习以及之前对这些软件地明白，制作出相对简洁地个人网页，展现自己相关地一些东西；本网站内容充实，在主页地设计上运用了模板，框架等.分页面上运用了导航条.插入了动态图片以及视频等给网增加了美观度，在首页地设计上本着简洁易懂地原就，用户只要点击链接就能看到自己想看到地连接内容.网站地首页设置了背景音乐，使拜访者在浏览地同时仍能观赏到悠扬地旋律.二、 需求分析2.1 系统概述一个具有个性地个人网站，是让别人对你进行明白，与别人沟通地更好途径，本文研究地是这次个人网站地设计与实现.能让人通过本网站

4、可以清楚地明白到我地一些信息.运用 Windows XP + Dreamweaver8 +PS 地网站设计制作环境，设计出神奇、活力地暗色与绚丽特效地网页特色.2.2 功能要求实现链接、滚动字幕或图片、插入音频、视频等插件地功能；三、 总体设计运用 Dreamweaver 地框架功能；环绕关于我自己地一些相关信息进行分类，实现分类地链接进行制作；并且要注意网页地一体化，美感，仍有颜色地搭配，音乐地选取等；3.1 功能设计：利用框架（选取了左右下地框架结构）设置基本模样.左边框架作为导航栏，下边地部分作为滚动图片栏；右上方一大部分作为各个子网页地浏览区；在导航栏插入了音乐，以便放入地音乐不会随着

5、链接地进入而消逝，增加了网页地趣味性；导航栏包括共：我地档案，我地日志，我地班级，我地宠物，视频观赏五项，分别链接到各个子页面；在导航区地最下方仍设置有返回欢迎页面地链接；并且设置导航区地背景、颜色、插入动态图片等 .3.2 界面设计：本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作.index_my web：主模块（右上层模块）添加制作地动态欢迎图片：欢迎来到小小寒地主页（动态）；左侧导航栏目分布了各个子页面地链接，点击即可进入各个子页面；右下方地模块放置我地图片，并且运动代码实现滚动功能；由导航栏分别可以进入以下子页面：我地档案：主要介绍了我地一些基本情形，爱好及性格特点等等；

6、我地日志：选了一篇自己宠爱地写过地文章供大家阅读；我地宠物：展现了我地宠物小狗贝贝地一些东西，我养狗地一些感受等；我地班级：介绍了我地班级地基本情形；视频观赏：摘选了一个搞笑flash 给大家消遣；以上五个分页面风格与整体保持一样，庄重而不失颜色；四、 具体设计与实现1、创建网页页面：（1）新建站点：如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可.（ 2）新建网页：如图，挑选创建新工程地HTML ，或者挑选模板建立；创建好六个页面，分别储存名称为： index，我地档案，我地日志，我地班级，我地宠物，视频观赏；2、打开页面，挑选

7、布局模式，使用左右下模板，储存主页面标题为index.html, 标题改为“我地主页 ”；试运行，储存两个框架；在左层模块添加插件音乐，并缩小插件；（如图1）设置导航栏，为每个分类地文字添加链接，将文字添加链接到“我地档案 ”等各个子分页，并且分页链接目标挑选mainframe （如图 2）：图 1：图 2：在 mainframe 中插入自己在 Photoshop 中制作地动态欢迎图片，添加到layer1 中可以调试位置；在下方框架中插入各种照片，运动滚动成效地代码实现其功能；为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉成效更震动； 图一页面代码如下：my web ；

8、 我地档案 ； 我地日志 ； 我地班级 ； 我地宠物 ； 视频观赏   ；  ；  ；  ； 返回主页 无标题文档 无标题文档  ； 我地档案 ； 我地日志 ； 我地班级 ； 我地宠物 ； 视频观赏   ；  ；  ；  ； 返回主页 小小寒地主页 var speed=8/速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2left.innerHTML=demo1left.innerHTML funct

9、ion Marqueeifdemo2left.offsetWidth-demoleft.scrollLeft=0/ 其实 demo.scrollLeft 是有 最大值地，和demo0.width, 引用地图片地 width 有关系 .demo 过了一半（每半内容一样地），重新开头循环demoleft.scrollLeft-=demo1left.offsetWidth elsedemoleft.scrollLeft+/ 不断地增加，相当于父容器地滚动条不断是缩小；但由于OVERFLOW: hidden ； （滚动条不行见）var MyMarleft=setIntervalMarquee,spee

10、d demoleft.onmouseover=function clearIntervalMyMarleft demoleft.onmouseout=function MyMarleft=setIntervalMarquee,speed3、在 Photoshop 中设计自己地子页面成效：(1) 找到自己宠爱地图片最为背景，定义图片添加到填充背景图案中；(2) 新建文件我地导航，填充背景，加入导航字，设置字体，椭圆边框；(3) 找到自己地一张照片抠出需要地部分粘贴在我地导航中，各个字体设置好，页面调整到正确，使用切片工具把需要添加链接地部分切好；储存为网页模式；以我地档案为例如图：代码： 无标题

11、文档   ；  ；  ；  ；  ； 其他各个子页面成效如下： 我地日志：代码： 无标题文档 我地班级：代码： 无标题文档 我地宠物：代码： 无标题文档 视频观赏：代码： 无标题文档 无标题文档 五、 结语通过本次网页地制作过程，我学习到了许多有用地东西，也充分明白了 Dreamweaver 这个软件地强大，对学习了一个学期地课程也有了更深化地解，由于有了多媒体和网页设计课程作基础，因此在制作网页地过程中诸如制作首页，页面链接等步骤进行地仍是比较顺当地，经过最近每天晚上地辛苦努力，最终完成了我地主页地制作 .在这段时间里，一方面，我尝试着将课本上所学地学问运用到制作中，另一方面，我又时刻在网上学习自己需要地学问，学习到了许多有用地东西，在这过程中，我对网页地设计上有了更深地体会，对于这一领域，学到地学问多了，反而发觉自己所明白地少了.遗憾地是，自己不会做动态网页，否就我信任会更胜利，庆幸地是，整个设计过程都很顺利，错误也修改胜利了不少，也可以劝慰一下自己了.最终看到了自己亲自做出来地网站，心里有了收成般地欣喜，这让我从心底里感谢这次实践地机会，感谢老师给了我们一次自己动手地机会，在设计地过程中，同学们相互争论，这也增强了同学之间地沟通.虽然网页设计完成了，但欠缺之处尚存，期望可以得到老师地指点，使设计更加完善.