我的故乡Web前台程序设计报告书.docVIP

Web前台程序设计 课程设计报告 领略家乡的文化特色 高凤伟 级 2014级1班 专 业 计算机科学与技术 二级学院 信息工程学院 目 录 1 需求分析 1 1.1课程设计目的 1 1.2网站主题 1 1.3网站功能介绍 1 1.4时间安排表 1 1.5成员分工 1 2 概要设计 2 2.1建立站点 2 2.2初始化站点 2 2.3首页页面设计 3 2.4唐山首页页面设计 9 2.4保定首页页面设计 13 2.5保定美食页面设计 15 2.6沧州首页页面设计 17 2.7沧州武术页面设计 19 2.8石家庄首页页面设计 21 2.9石家庄景区页面设计 24 3 首页页面详细设计 27 3.1 制作header 27 3.2 制作nav 27 3.3 制作banner 29 3.4 制作content 30 3.5 制作footer 38 4 唐山首页页面详细设计 39 4.1 制作header 39 4.2 制作nav 40 4.3 制作banner 41 4.4 制作content 42 4.5 制作footer 47 5 沧州首页页面详细设计 48 5.1 制作头部 48 5.2 制作导航 49 5.3 制作主体 50 6 沧州武术页面详细设计 52 6.1 制作头部 52 6.2 制作导航 53 6.3 制作主体 55 7 保定首页页面详细设计 57 7.1 制作导航 57 7.2 制作主体 58 7.3 制作底部 60 8 保定美食页面详细设计 60 8.1 制作头部 60 8.2 制作主体 61 8.3 制作底部 66 9 石家庄首页页面详细设计 67 9.1 制作头部 67 9.2 制作banner 67 9.3 制作nav部分 69 9.4 制作content 70 9.5 制作footer 74 10石家庄景区页面详细设计 75 10.1 制作头部 75 10.2 制作内容 75 11 网站测试 80 11.1 首页面测试 80 11.2 唐山首页页面测试 81 11.3 保定首页页面测试 81 11.4 保定美食页面测试 82 11.5 沧州首页页面测试 82 11.6 沧州武术页面测试 82 11.7 石家庄首页页面测试 83 11.8 石家庄景区页面测试 83 12课程设计小结 83 1 需求分析 1.1课程设计目的 随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。? 本课程的设计目的是 1.2网站主题 本站以组成员的家乡为出发点,描述家乡特色为主题。 1.3 访问着可以在主页部分预览每个人家乡的特色部分，选择感兴趣的部分可以点击进入进行详细的了解。 1.4时间安排表 时间安排见表1-1。 表1-1 课程设计时间安排表 序号 课程设计内容 时间分配（学时） 1 确定网站的主题和整体风格、收集建站所需的资料 1 2 规划网站结构 1 3 主页和其他页面的设计与制作 3 4 答辩 1 合 计 6 1.5成员分工 课程设计小组成员分工见表1-2。 表1-2 课程设计成员分工表 序号 课程设计步骤 成员 1 确定网站的主题和整体风格 全部成员 2 收集建站所需的资料 全部成员 3 规划网站结构 全部成员 4 主页 李文龙 唐山页面 李文龙 保定页面 高凤伟 保定特色页面 高凤伟 沧州页面 褚晓凯 褚晓凯 靳宇鹏 靳宇鹏 12 报告负责人 高凤伟 答辩负责人 李文龙 2 2.1建立站点 （1）创建网站根目录 创建网站根目录我的故乡文件夹。SS”，“images”，“HTML”。 2.2初始化站点 （1）创建html文件和css文件 课程设计共有8个html文件，分别是首页.html，唐山首页.html，保定首页.html，经典美食.html，沧州首页 序号 文件名 内容介绍 1 首页.html 全部的家乡介绍 2 3 沧州首页.html 沧州特色介绍 沧州武术.html 沧州武术详细说明 保定首页.html 保定特色介绍 保定美食.html 保定美食详细介绍 石家庄简介 石家庄景区描写 唐山首页.css 控制样式 沧州首页.css 控制样式 控制样式 保定首页.css 控制样式 保定美食.css 控制样式 控制样式 控制样式 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, ,input,button,textarea,p, ,th,td { margin:0; padding:0; } body { background:#fff; col