网页实训报告

1、1 网站设计实训报告题 目：贵美商城前台的设计课程设计(论文)任务及指导书题 目购物商城网站前台的设计与实现题 目 来 源实际工程项目 科研课题 教学模拟题目 其它题 目 类 型工程设计型 科学研究型 调研综述型 其它类型一、课程设计（论文）任务（包括对工程图纸的具体要求）及设计参数1问题定义、可行性研究2需求分析。3总体设计。4详细设计及实现。5测试及调试。二、专题部分要求设计与实现购物商城网站前台页面，包括网站首页、商品展示页、具体商品详细介绍页、购物车页、注册页、登录页、帮助中心客服页。三、本题目的重点和难点以及与同组其它学生所做题目的关系重点：采用DIV+CSS布局。难点：编码符合W3

2、C标准，无冗余代码。选题分组方式：三人一组，分工合作完成。四、指导方式和工作进度要求指导方式：集中辅导、个别答疑相结合。 工作进度：1天 需求分析；2天 总体设计；3-4天 详细设计及编码；5天 测试及调试。五、与本设计题目相关的理论知识（包括新知识）提要网站前台的开发流程；W3C和Web2.0标准；DIV+CSS布局；HTML、CSS语言；开发工具UltraEdit；Dreamweaver站点管理；调试工具Firefox+Firebug插件。六、建议参考资料及使用方法1 北京阿博泰克北大青鸟.使用HTML语言和CSS开发商业站点，科学技术文献出版社,2011年2 HYPERLINK /boo

3、k/search_pub.php?category=01&key2=%C7%B0%D1%D8%BF%C6%BC%BC&order=sort_xtime_desc t _blank 前沿科技.精通CSS+DIV网页样式布局, HYPERLINK /book/search_pub.php?category=01&key3=%C8%CB%C3%F1%D3%CA%B5%E7%B3%F6%B0%E6%C9%E7&order=sort_xtime_desc t _blank 人民邮电出版社,2007年3 徐延章.美工与创意网页设计艺术, HYPERLINK /?key=&key3=%BF%C6%D1%A7

4、%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00 o 科学出版社 科学出版社, 2012年4 HYPERLINK /?key2=%CD%F5%CB%AC&medium=01&category_path=01.00.00.00.00.00 o 王爽，徐仕猛，张晶编著 王爽、 HYPERLINK /?key2=%D0%EC%CA%CB%C3%CD&medium=01&category_path=01.00.00.00.00.00 o 王爽，徐仕猛，张晶编著 徐仕猛、 HYPERLINK /?key2=%D5%C5%BE%A7&

5、medium=01&category_path=01.00.00.00.00.00 o 王爽，徐仕猛，张晶编著 张晶.网站设计网页配色：经典网页设计800例, HYPERLINK /?key=&key3=%BF%C6%D1%A7%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00 o 科学出版社 科学出版社,2011七、答辩之前学生应作的准备工作提要1 完成目标网站前台的开发2 完成课程设计报告的撰写目录 TOC o 1-3 h z u HYPERLINK l _Toc391332374 第一章 引 言 PAGEREF _To

6、c391332374 h 1 HYPERLINK l _Toc391332375 1.1网站开发的背景 PAGEREF _Toc391332375 h 1 HYPERLINK l _Toc391332376 1.2网站开发的目的和意义 PAGEREF _Toc391332376 h 1 HYPERLINK l _Toc391332377 1.3网站开发的需求分析 PAGEREF _Toc391332377 h 2 HYPERLINK l _Toc391332378 第二章 开发技术和工具的介绍 PAGEREF _Toc391332378 h 3 HYPERLINK l _Toc39133237

7、9 2.1 开发技术 PAGEREF _Toc391332379 h 3 HYPERLINK l _Toc391332380 2.1.1 HTML PAGEREF _Toc391332380 h 3 HYPERLINK l _Toc391332381 2.1.2 CSS PAGEREF _Toc391332381 h 3 HYPERLINK l _Toc391332382 2.1.3 Div+CSS PAGEREF _Toc391332382 h 3 HYPERLINK l _Toc391332383 2.2开发工具 PAGEREF _Toc391332383 h 3 HYPERLINK l

8、_Toc391332384 第三章 网站的总体设计 PAGEREF _Toc391332384 h 4 HYPERLINK l _Toc391332385 3.1网站的结构 PAGEREF _Toc391332385 h 4 HYPERLINK l _Toc391332386 第四章 网站的详细设计与实现 PAGEREF _Toc391332386 h 5 HYPERLINK l _Toc391332387 4.1 创建站点 PAGEREF _Toc391332387 h 5 HYPERLINK l _Toc391332388 4.2 注册页 PAGEREF _Toc391332388 h 5

9、 HYPERLINK l _Toc391332389 4.2.1布局的实现 PAGEREF _Toc391332389 h 6 HYPERLINK l _Toc391332390 4.2.2注册页各块的实现 PAGEREF _Toc391332390 h 7 HYPERLINK l _Toc391332391 4.3帮助页 PAGEREF _Toc391332391 h 11 HYPERLINK l _Toc391332392 4.3.1帮助页布局的实现 PAGEREF _Toc391332392 h 11 HYPERLINK l _Toc391332393 4.3.2帮助页各块的实现 PAG

10、EREF _Toc391332393 h 12 HYPERLINK l _Toc391332394 4.4 首页 PAGEREF _Toc391332394 h 13 HYPERLINK l _Toc391332395 4.4.1首页布局的实现 PAGEREF _Toc391332395 h 13 HYPERLINK l _Toc391332396 4.4.2顶部header的实现 PAGEREF _Toc391332396 h 15 HYPERLINK l _Toc391332397 4.4.3主体main的实现 PAGEREF _Toc391332397 h 16 HYPERLINK l

11、_Toc391332398 4.4.4 底部footer的实现 PAGEREF _Toc391332398 h 17 HYPERLINK l _Toc391332399 第五章 网站的兼容性测 PAGEREF _Toc391332399 h 18 HYPERLINK l _Toc391332400 第六章 结论 PAGEREF _Toc391332400 h 20第一章 引 言网站开发的背景 上世纪90年代以来，随着网络、通信和信息技术的突破性进展，Internet在全球爆炸性增长并迅速普及。在这一前提下，电子商务应运而生了。电子商务是基于互联网、以交易双方为主体、以银行电子支付和结算为手段、

12、以客户数据为依托的全新的商务模式，它可以使商家与供应商更紧密地联系起来，更快地满足客户需求，也可以让商家在全球范围内选择最佳供应商，在全球市场上销售产品。自1998年“电子商务年”以来，电子商务在全球发展迅猛，大约每九个月其交易额就翻一番，全球电子商务交易额（包括网上贸易额、销售额等）达到数千亿美元，电子商务收入剧增262%。目前，世界各国纷纷看好电子商务这块新大陆，普遍认为电子商务的发展将是未来25年世界经济发展的一个重要推动力，对经济的促进将远远超过200年前的工业革命。著名网络经济调查评论家Robert Metcalfe声称：“互联网的价值等于（与之相联结的）网点数量的平方。因此我国电子

13、商务的发展态势很好，电子商务的发展潜力很大。网站开发的目的和意义销售规模不受地盘限制。传统商店有多大就只能摆放多少商品，生意大小常常被小店面积限制。而在网上，即便在地面上只有一个小商店，或者干脆就没有门面，开店的生意却可以照样做得很大。 不受店面空间的限制。哪怕只是街边小店，在网上却可以拥有百货大楼那么大的店面，只要投资者愿意，可以摆上成千上万种商品。目前国内最大的专业拍卖网站同时在线的商品要超过10万件已超过一些大超市。 不受地理位置影响。不管客户离店有多远，也不管顾客是国内还是国外，在网上，客户一样可以很方便地找到并购买商品。这令消费群体突破了地域的限制，变得无限广阔了。网站开发的需求分析

14、传统的销售方式是商家把商品放在店铺里供顾客挑选，店铺的规模、位置等客观因素影响着商店的客流量，并且商品的存放与销售需要人力进行管理，雇员的工资、店面的租金等又增加了成本，顾客也不能迅速找到所需要的商品，而开一个网上商店只需要一个可以存放商品的仓库，比租一个店面能节省很多，也不需要太多的人力来管理，不会因为商店的面积影响客流量，客户足不出户就能买东西，并且很容易就能找到所需要的商品。第二章 开发技术和工具的介绍 2.1 开发技术 2.1.1 HTML超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语

15、言。HTML被用来结构化信息例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。 2.1.2 CSS CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能

16、力，简化或者优化写法，针对各类人群，有较强的易读性。 2.1.3 Div+CSSDIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。2.2开发工具 Dreamweaver EditPlus 3 第三章 网站的总体设计3.1网站的结构贵美商城前台页面的整体组织结构图如图3.1所示。图3.1 贵美商城网站的组织结构图首

17、页：链接各个重要页面的主页。登陆页：只要在本网站浏览但检查到用户没有登录，就要一直给登录页的连接。在登陆页要放注册页的连接地址。注册页：注册的链接位置和登陆的链接位置放在一起分类商品信息展示页：每个商品的div要连接该商品的详细信息页面。商品信息展示页：链接到购物车方便操作；这是一个二级查询后的页面，尽量不与主页直接连接。帮助页：要连接各个不同操作的异常处理页面，方便快速处理不同情况。第四章 网站的详细设计与实现 4.1 创建站点启动Dreamweaver，依次单击“站点”“新建站点”，输入站点名称。单击“保存”。在“管理站点”窗口，进行编辑。在弹出的“站点设置”窗口中单选择“高级设置”。单击

18、“保存”。依次创建需要的文件夹目录。站点创建完成。如图4.1所示。图4.1 站点部署图 4.2 注册页 4.2.1布局的实现图4.2 注册页布局图首先建立HTML的组织结构登陆页整体布局时分为三个div块，即头部header，中间主体部分main和底部footer。为了便于统一设置管理及整体加载，在外部加一个顶级容器。首页的整体布局结构代码如下： 添加CSS样式代码通过为页面添加CSS代码可以控制每个div块的大小，具体位置，边框，背景色等外观样式。bodymargin:0px; padding:0px;#containerwidth:980px; margin:0px auto;#heade

19、rwidth:100%;height:136px;background:url(./imags/h_bg.jpg) no-repeat -22px 0px;#mainwidth:100%;height:647px;.cat,.content,.sidebarheight:647px; float:left;.catwidth:200px; background:url(./imags/bg.gif) no-repeat;.contentwidth:540px;#footerwidth:100%;height:150px;font-size:12px;line-height:18px; text

20、-align:center; padding-top:5px; 4.2.2注册页各块的实现首先建立HTML的组织结构图4.2 注册页布局局部图添加CSS样式代码通过为页面添加CSS代码可以控制每个div块的大小，具体位置，边框，背景色等外观样式。 名字： 阅读贵美网服务协议 欢迎阅读服务条款协议，本协议阐述之欢迎阅读服务条款协议，本协议阐欢 姓氏： 登录名： 密码： 再次输入密码： 电子邮箱： 性别： 男 女 头像： 爱好： 运动 聊天 玩游戏 出生日期： yyyy年 选择月份 一月 二月 dd日 图4.3 注册页图4.3帮助页 4.3.1帮助页布局的实现图4.4 帮助页图首先建立HTML的组

21、织结构登陆页整体布局时分为四个div块，即头部header，中间主体部分zleft、zc和底部footer。为了便于统一设置管理及整体加载，在外部加一个顶级容器。首页的整体布局结构代码如下： 添加CSS样式代码通过为页面添加CSS代码可以控制每个div块的大小，具体位置，边框，背景色等外观样式。bodymargin:0px; padding:0px;#containerwidth:980px; margin:0px auto;#headerwidth:100%; height:136px; background:url(./imags/h_bg.jpg) no-repeat -22px 0px

22、;#mainwidth:100%; height:647px;#footerwidth:100%; height:150px; font-size:12px; line-height:18px; text-align:center; padding-top:5px; 4.3.2帮助页各块的实现首先建立HTML的组织结构添加CSS样式代码通过为页面添加CSS代码可以控制每个div块的大小，具体位置，边框，背景色等外观样式。#mainwidth:980px; height:550px; float:left;.lfwidth:183px; height:550px; float:left; bac

23、kground:url(imags/customer.jpg) no-repeat;text-align:center;.lf pheight:150px;.lf awidth:158px; height:30px; text-decoration:none; overflow:hidden; display:block; margin:0px auto; font:bold 14px/30px 宋体; color:#000;.lf a:hoverheight:auto;.lf a imgborder:0px;.rgtwidth:780px; height:550px; float:right

24、; padding:5px; overflow:hidden;图4.6 商品计算图4.4 首页 4.4.1首页布局的实现首页包括头部、主体部分、和底部三大部分。首页布局如图4.7所示。图4.7 首页整体布局首先建立HTML的组织结构主页整体布局时分为三个div块，即头部header，中间主体部分main和底部footer。为了便于统一设置管理及整体加载，在外部加一个顶级容器。首页的整体布局结构代码如下： 顶部 主体 底部添加CSS样式代码通过为页面添加CSS代码可以控制每个div块的大小，具体位置，边框，背景色等外观样式。通过为页面添加CSS代码可以控制每个div块的大小，具体位置，边框，背景

25、色等外观样式。首先设置顶级容器的宽度为1050px，水平居中，这样可以同时控制头部、主体和底部三个块的位置。然后逐一设置每个块的具体大小，头部，主体和底部三个块宽度均为100%，就可以随着顶级容器的大小自适应的调整，三个块的高度分别设置为149px，800px和150px。#containermargin:0px auto; padding:0px; width:1050px; #headerheight: 149px; width: 100%; margin:0px; background-color:#FFF; padding:0px;#mainwidth:100%; height:800

26、px; margin:0px; padding:0px;#footermargin:0px; padding:0px; height:150px; width:100%; 4.4.2顶部header的实现首先建立HTML的组织结构头部又包括logo、顶部菜单、欢迎词条和导航条四部分。首页头部布局如图4.3所示。图4.8 首页头部布局建立HTML的组织结构头部首先分为两大块上部分和导航。上部分又分为logo、顶部菜单、欢迎词条，下部分为导航条。 你好，欢迎来到贵美商城!2009年11月18日14点42分 添加CSS样式代码 .allwidth:1050px; margin-left:150px;

27、.headbackground-image:url(./images/h_bg.jpg); background-repeat:no-repeat; height:135px;margin-bottom:0px; .nullheight:91px; float:left; .clearclear:both; .head lilist-style:none; ext-align:center; text-decoration:none; float:left; height: 30px;首页头部效果图如图4.4所示。图4.9 首页头部效果图4.4.3主体main的实现建立HTML的组织结构主体部分分为左中右三部分，中间部分又分为上下两部分。 添加CSS样式代码bodymargin:0px; padding:0px; #cenwidth: