web设计论文基础报告-个人网页设计论文和实现.doc

郑州轻工业学院 课 程 设 计 任 务 书 题目 个人网站的设计与实现 主要内容： 利用所学内容，设计个人网站 基本要求： 本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（CSS）等。 主要参考资料等： 《Web设计基础》 李开荣 高等教育出版社 2008 《网站规划与网页设计》张兵义 电子工业出版社 2008 《Web编程技术》历小军 机械工业出版社 2009 完 成 期 限： 一周 指导教师签名： 课程负责人签名： 2010年 5 月 日 目录 一、引言 1 1.1课题的背景 1 1.2可行性研究 1 二、需求分析 1 2.1系统概述： 1 2.2功能要求： 1 三、总体设计 2 3.1功能设计 3 3.2界面设计 4 四．详细设计与实现 5 六、结语 24 个人网页设计和实现 引言 课题的背景 经过本学期对web设计基础这门课程的学习，对web的设计以及相关代码的使用有了深入的了解，在学期末制作主题为个人主页的网页，对其设计并实现。 可行性研究 经过考虑对制作工具的筛选，决定用Dreamweaver做个人网页，Photoshop为辅助工具，设计和制作图片、页面及图标等。 本网站是以静态网页为基础，以Dreamweaver为制作软件、以Photoshop为设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，制作出相对简单的个人网页，展示自己相关的一些东西； 本网站内容充实， 在主页的设计上运用了模板，框架等。分页面上运用了导航条。插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。 需求分析 系统概述 一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是个人网站的设计与实现Windows XP + Dreamweaver8 +PS 的网站设计制作环境、活力的与绚丽特效的网页特色。 如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可。 （2）新建网页： 如图，选择创建新项目的HTML，或者选择模板建立；创建好六个页面，分别保存名称为：index，我的档案，我的日志，我的班级，我的宠物，视频欣赏； 2、打开页面，选择布局模式，使用左右下模板，保存主页面标题为index.html,标题改为“我的主页”；试运行，保存两个框架； 在左层模块添加插件音乐，并缩小插件；（如图1） 设置导航栏，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe（如图2）： 图1： 图2： 在mainframe中插入自己在Photoshop中制作的动态欢迎图片，添加到layer1中可以调试位置； 在下方框架中插入各种照片，运动滚动效果的代码实现其功能； 为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉效果更震撼； 图一页面代码如下： html head titlemy web/title style type=text/css !-- body { background-color: #000000; background-image: url(image/20089147504764561.gif); } body,td,th { 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; c