《web企业网课程设计报告》由会员分享，可在线阅读，更多相关《web企业网课程设计报告（39页珍藏版）》请在金锄头文库上搜索。
1、重庆科技学院重庆科技学院Web 程序设计基础程序设计基础 实践实践报告报告院（系）: 电气与信息工程学院 专业班级: 计科升 2013-01 学生姓名: XXX 学 号: 2015520 XXX 设计地点（单位） I302 设计题目: XX 公司（企业）网站设计与制作 完成日期： 2015 年 12 月 25 日 指导教师评语: _ _ _ 成绩（五级记分制）:_ _ 指导教师（签字）:_ _ 重庆科技学院重庆科技学院 课程设计任务书课程设计任务书设计题目：xx 公司（企业）网站设计与制作学生姓名XXX课程名称Web 程序设计基础课程实践专业班级计科升 2013地 点I301/I302起止时间
2、2015.12.21-2015.12.25设 计 内 容 及 要 求XX 公司(企业)网站向社会提供一个产品展示和公司（企业）宣传的综合信息服 务平台，该网站建设旨在向社会展示公司（企业）的简介，公司（企业）业务范围，公 司（企业）服务等。现要求根据你了解的公司（企业） ，建设该公司（企业）网站，要求：1、网站至少要有 5 个页面以上，页面内容应包括公司（企业）简介、公司（企业）风采、 公司（企业）新闻、通知公告、公司（企业）产品或服务等； 2、网站页面和超链接应形成清晰合理的框架； 3、首页制作有 JavaScript 代码实现的选项卡切换块功能；如点击 IT 资讯出现左边信息， 点击汽车，
3、出现右边信息：4、页面要求有客户注册登录功能，并进行客户端数据校验。 5、正确规划网站的栏目结构，合理建立站点目录，见设计指导书设 计 参 数1、 整个网站页面个数不少于 5 个； 2、 采用 CSS+DIV 进行页面布局，整个网站采用统一的 CSS； 3、 站点目录规划合理，比如，图片放在 images 下，CSS 文件放在 css 目录下，各栏目 放在对应的栏目文件下； 4、 至少一段 JavaScript 代码； 5、 建议色彩搭配不多余 5 种。进 度 要 求12 月 21 日：了解设计任务、收集资料、考虑网站栏目设计 12 月 22 日：素材设计与制作或收集整理； 12 月 23 日
4、-12 月 24 日：页面设计与制作； 12 月 25 日：撰写课程实践总结，作品检查、提交、答辩参 考 资 料1 房爱莲网页设计与制作案例教程M北京：清华大学出版社，2009 年 http:/ 2文谦、赵位等网页制作综合技术教程M北京：人民邮电出版社，2010 年 3 http:/ 4 http:/222.180.188.198/xz/xyh/其 它1、 没采用 DIV+CSS 布局页面，没有 JavaScript 代码实现，作不及格处理； 2、有拷贝情况（作品或报告） ，作不及格处理教研室主任： 指导教师： 年 月 日摘摘 要要本网站的主题是电子产品企业网，整个网站都是以介绍企业及相关信息
5、为主，主要包括了首页，公司简介，新闻资讯，公司风采，服务项目及特色产品等栏目。在整个设计中主要运用 html，css,js 等基础 web 前端语言编写，以Dreamweaver 软件为开发工具。本网站实现了企业网的所需的基本信息与功能，例如用户注册登录，新闻发布，产品展示，网页信息浏览的实现。关键词：企业网站 web 前端语言 Dreamweaver 软件目录第 1 章 电子产品企业网站的规划与设计1 第 2 章 网站的设计与制作2 2.1 素材的准备2 2.2 文件夹的建立3 2.3 主页面的制作3 2.3.1 主页面结构.3 2.32 主页面主要 div .4 2.4 二级页面的制作7
6、2.4.1 模板使用7 2.4.2 注册框主要 div 11 2.5.3 公司简介主要 div 13 2.5.3 产品与服务主要 div 14 2.5.3 企业风采主要 div 15 2.5 JavaScript 功能代码的编写16 2.5.1 选项卡切换代码.16 2.5.2 滑动广告栏代码.17 2.5.3 注册校验代码.18 2.5.4 换肤代码.22 2.5.5 图片轮播代码.23 第 3 章 网站的测试24 3.1 主页面的测试24 3.2 JavaScript 功能的测试25 3.2.1 选项卡测试效果如下：.25 3.2.2 广告栏滚动测试效果如下：.26 3.2.3 注册页面测
7、试效果如下：.27 3.2.4 换肤测试.30 2.5.5 图片轮播测试.31 总 结32 参考文献331第第 1 1 章章 电子产品企业网电子产品企业网站的规划与设计站的规划与设计电子产品企业网，主要分为头部，公司简介、公司新闻、通知公告、产品展示、企业风采以及用户中心登录和联系方式七部分。规划详图如下图 1.1。网站首页左 边 栏主 要 内 容 横 幅L O G O企 业 风 采公 司 简 介产 品 展 示用 户 登 录 中 心联 系 方 式导 航 栏头 部图 1.1 网站规划图2第第 2 2 章章 网站的设计与制作网站的设计与制作2.1 素材的准备素材的准备根据第一章中网站设计的规划，可
8、确定该网站的整体设计风格为清爽、简介、清晰明了型。依次准备了如下素材。图 2.1.banner.gif图 2.2.logo.jpg图 2.3.showgrace.jpg 图 2-4.product.jpg图 2.5.regist.jpg 图 2.6.more.gif 图 2.7look.jpg 图 2.8adver.jpg 32.2 站点建立站点建立图 2.9 站点文件夹的建立2.3 主页面的制作主页面的制作2.3.1 主页面结构主页面结构图如下：wrapbannersidemainbottomfooterheadcontentnewsnoticlogincontact ctgraceprod
9、uct42.3.2 主页面主要主页面主要 div 如下如下：body background: #eee; color: #CCF298; #wrap width:900px; margin:0 auto ; #wrap #top position:relative; height:63px; margin-bottom:20px; #wrap #top #img1 position:absolute; top:28px; left:27px; #wrap #top input position:absolute; top:26px; right:65px; #wrap #top #img2 p
10、osition:absolute; top:26px; right:5px; #wrap #logo margin-bottom:23px; #wrap #nav background-color: #313849; border-radius:20px; box-shadow:-2px -2px 4px #666; height:52px; margin-bottom:23px; #sider width: 225px; float: left;background-color: #A1BCD1;5border-radius:20px; #content width:665px; float
11、:right; #content h3 padding:10px 0 10px 57px; margin:0 7px 10px 0; color:#000; font-weight:bold; background:url(/images/cross.png) no-repeat 33px 14px, url(/images/more.gif) no-repeat right bottom; border-bottom:1px solid #ABADAC; #intro height:270px; width:645px; border-radius:20px; margin-bottom:1
12、0px; padding-left:18px; border:1px solid #ABADAC; background-color:#FFF; #news width:327px; height:188px; float:left; background-color:#FFF; border-radius:20px; border:1px solid #ABADAC; #grace width:327px; height:188px; float:right; background-color:#FFF; border-radius:20px; border:1px solid #ABADA
13、C; #footer width:100%; padding-top:10px; clear:both;6 #footer #show-look width:224px; height:138px; float:left; position:relative; #footer #show-pro width:645px; float:right; height:138px; border-radius:20px; padding-left:18px; border:1px solid #ABADAC; background-color:#A1BCD1; #footer #show-pro h3
14、 padding:10px 0 10px 57px; margin:0 7px 10px 0; color:#000; font-weight:bold; background:url(/images/cross.png) no-repeat 33px 14px, url(/images/more.gif) no-repeat right bottom; border-bottom:1px solid #ABADAC; #clear clear:both; #end border-radius:20px; margin-top:10px; width: 100%; height: 10px; background-color: #223144; 72.4 二级页面的制作二级页面的制作2.4.1 模板使用模板使用公司简介、公司风采、产品与服务同主页面运用同一模板，主要 D
