拾忆书苑（图书商城系统）网站的设计与实现（html；DIV+CSS； Bootstrap； Dreamweaver； Photoshop）

目录
一、绪论 1
（一）课题研究背景 1
（二）课题研究目的及意义 1
二、相关技术与工具介绍 1
（一）Dreamweaver开发技术 1
（二）Adobe Photoshop 1
三、拾忆书店网站的设计与分析 2
（一）网站总体分析 2
（二）网站页面结构分析 2
1.拾忆书苑网站首页的设计 3
2.拾忆书店网站Logo设计 5
3.拾忆书店网站Header设计 5
4.拾忆书店网站Banner轮播设计 6
5.拾忆书店网站首页Body设计 8
6.拾忆书店网站Footer设计 12
7.‘关于我们’页面设计 13
8. ‘联系我们’页面设计 15
（三）部分子页网页设计 16
1.二级子页面-‘冯唐作品集’子页面设计 16
2. 三级子页面-‘十八岁给我一个姑娘’子页设计 18
四、网站的测试与问题的解决 20
五、总结 22
六、致谢 23
七、参考文献 24
三、拾忆书店网站的设计与分析
（一）网站总体分析
通过学习其他知名的书店网站，结合自己所学的网页制作知识设计了本网站，为传统的实有书店制作这样的网站，主要目的是让读者了解拾忆书店拥有不同种类的书籍，这样更能吸引更多的读者光顾本网站。网站主要功能板块有：首页、联系我们、关于我们、最新热销、店长推荐、特价精品。这六个页面所设计的排版样式都有所不同，每个页面都给浏览者一种耳目一醒的感觉，浏览者只需点击不同种类的书籍，即可搜索到他们所需要的图书。
首页内容主要向浏览者介绍本店的设施环境，呈现本店最新热销的书籍，包括：文学、艺术、教育、生活时尚、青春小说等不同种类的书籍以及本店的店长推荐专题。通过展示拾忆书店的环境，图书，价格，来吸引更多的人光顾本店。
子页部分每个页面板式布局都不同，最新热销这一页面主要向浏览者介绍本店近期畅销热销的书籍。店长推荐这个页面向浏览者呈现的是本店进行店长分类的不同类书籍，包括一些：生活、武侠、文学等等书籍。特价图书区介绍的是拾忆书店四本9.9元的促销书籍。每个页面内容制作的都很完整，同时，每个都有着浓厚的文化气息。给浏览本网站的读者带来一种身临其境的感受。让读者了解拾忆书店的特色之处。
本网站设计分为三层，网站结构如图3-1所示。

图3-1 拾忆书店网站结构图
（二）网站页面结构分析
1.拾忆书苑网站首页的设计
本店的首页网站设计主要分为：头部（header）、主要内容（content）、尾部（footer）这三个部分。头部主要包括书店名称、导航条的设计，主要内容这一部分主要介绍了本店内部设施环境、优质的图书、低廉的书籍和最新热销的图书以及店长推荐。尾部主要包括：是拾忆书店网站的版权和Logo设计。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><!--<meta http-equiv="X-UA-Compatible" content="IE=edge">--><!--<meta name="viewport" content="width=device-width, initial-scale=1">--><title></title><link href="lib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="css/main.css"/>
</head>
<body><div class="clearfix full-warp"><div class="clearfix full-header"><!--nav--><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">拾忆</a></div><div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;"><ul class="nav navbar-nav"><li class="active"><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="contact.html">联系我们</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"aria-haspopup="true" aria-expanded="false">图书 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="sale.html">最新热销</a></li><li><a href="recommend.html">店长推荐</a></li><li><a href="cheap.html">特价精品</a></li><li role="separator" class="divider"></li><li><a href="category.html">书籍类别分布</a></li></ul></li></ul><form class="navbar-form navbar-right"><input type="text" class="form-control" placeholder="Search..."></form></div></div></nav></div><div class="clearfix full-container"><!-- banner--><div id="my-slider"><div id="banner-slider" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#banner-slider" data-slide-to="0" class="active"></li><li data-target="#banner-slider" data-slide-to="1"></li><!--<li data-target="#banner-slider" data-slide-to="2"></li>--></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox" ><div class="item active"><img src="img/banner01.jpg"><div class="carousel-caption"><h1 class="text-info">WELCOM TO MY SHOP</h1><p class="lead text-muted">A good beginning is half done. <br/>良好的开端是成功的一半.<br/></p></div></div><div class="item"><img src="img/banner02.jpg"><div class="carousel-caption"><h1 class="text-danger">WELCOM TO MY SHOP</h1><p class="lead text-info"> By reading we enrich the mind, by conversation we polish it.<br/> 读书使人充实,交谈使人精明.<br/></p></div></div></div><!-- Controls --><a class="left carousel-control" href="#banner-slider" role="button"data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#banner-slider" role="button"data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><!--container --><div class="container warp-container"><div role="welcome"><div class="text-center"><h2 class="hidden-xs"><span class="glyphicon glyphicon-link"></span>正确的选择</h2><h3 class="hidden-xs">书是人类进步的阶梯。<br/>本书店致力于为广大读者提供质优价廉的各类图书，欢迎广大读者前来本店购买。</h3></div><br/><section class="text-center"><div class="row"><div class="col-sm-4"><img src="img/huoseI-small.jpg" class="img-circle"/><h3>优质的图书</h3><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi portagravida at eget metus. Nullam iddolor id nibh ultricies vehicula ut id elit.</p></div><div class="col-sm-4"><img src="img/huoseII-small.jpg" class="img-circle"/><h3>安静的环境</h3><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi portagravida at eget metus. Nullam iddolor id nibh ultricies vehicula ut id elit.</p></div><div class="col-sm-4"><img src="img/huoseIII-small.jpg" class="img-circle"/><h3>低廉的价格</h3><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi portagravida at eget metus. Nullam iddolor id nibh ultricies vehicula ut id elit.</p></div></div></section></div><div role="sale"><div class="text-center"><h2 class="hidden-xs"><span class="glyphicon glyphicon-link"></span>最新热销</h2><h3 class="hidden-xs">实时更新，最新、最火、最图书</h3></div><section><div class="row"><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="img/theme01-pic01-small.jpg" alt="十八岁给我一个姑娘"><div class="caption"><h3>十八岁给我一个姑娘</h3><p class="max-height-60 small">少年从十四岁长到十九岁，过盛的荷尔蒙让他们如飞禽走兽般，在一九八五年至一九九〇年的北京城里上天入地。那时的生活简单，打架、喝酒、钻防空洞以及坐马路牙子......</p><p><a class="btn btn-default" href="theme01-book01.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="img/theme03-pic03-small.jpg" alt="大漠苍狼：绝密飞行"><div class="caption"><h3>大漠苍狼：绝密飞行</h3><p class="max-height-60 small">上世纪60年代，身为新中国第一批地质勘探队员，我们被秘密选调到某地质工程大队。一纸密令，我们不明目的、不明地点、不明原因，来到无法确认地点的边境原始丛林......</p><p><a class="btn btn-default" href="theme03-book03.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="img/theme06-pic01-small.jpg" alt="何处是归程"><div class="caption"><h3>何处是归程·渡边淳一</h3><p class="max-height-60 small">渡边淳一唯一一部自传小说，讲述了一个35岁时的男人相木悠介，辞去医院里的“铁饭碗”，抛家别子，独自闯荡东京，一心想成为大文学家的故事。相木悠介为文学生涯......</p><p><a class="btn btn-default" href="theme06-book01.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="img/theme08-pic04-small.jpg" alt="曼珠沙华·彼岸花"><div class="caption"><h3>曼珠沙华·彼岸花·沧月</h3><p class="max-height-60 small">这个世上，每个人都是一座孤岛。一梦过十年，到最后，那个毛丫头凶巴巴的脸都在记忆中模糊起来，唯一清晰的是那一日她扑上来在他手腕上恶狠狠咬下的那一口......</p><p><a class="btn btn-default" href="theme08-book04.html" role="button">View details »</a></p></div></div></div></div></section></div><div role="recommend"><div class="text-center"><h2 class="sp-home-head-2"><span class="glyphicon glyphicon-link"></span>热门主题</h2><h3 class="sp-home-head-3">Explore a selection of creative venues</h3></div><section><div id="book-slider" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#book-slider" data-slide-to="0" class="active"></li><li data-target="#book-slider" data-slide-to="1"></li><li data-target="#book-slider" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic01-small.jpg" alt="..."><div class="caption"><h3>冯唐作品集锦</h3><p>冯唐男，1971年生于北京。诗人、作家，古器物爱好者。人民文学杂志“未来大……</p><p><a class="btn btn-default" href="theme01.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic02-small.jpg" alt="..."><div class="caption"><!--<h3>何以笙箫默-半缘言情半缘君</h3>--><h3>何以笙箫默-半缘言情...</h3><p>一段年少时的追逐，牵出一生的爱恋。大学时代的赵默笙阳光灿烂，对法学……</p><p><a class="btn btn-default" href="theme02.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic03-small.jpg" alt="..."><div class="caption"><h3>盗墓笔记</h3><p>神秘莫测的上古神墓、海底船墓、天宫雪墓    传说中的血尸、粽子、海猴子……</p><p><a class="btn btn-default" href="theme03.html" role="button">View details »</a></p></div></div></div></div></div><div class="item"><div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic04-small.jpg" alt="..."><div class="caption"><!--<h3>原来姹紫嫣红开遍——白马时光</h3>--><h3>原来姹紫嫣红开遍...</h3><p>白马时光推出的最新作品：图书制作比较精美，小开本，封面设计有意境……</p><p><a class="btn btn-default" href="theme04.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic05-small.jpg" alt="..."><div class="caption"><h3>变形金刚专题</h3><p>伟大“”的人类社会呢？一方面彼此争霸，一方面谋划驱赶机器人，管你什么派……</p><p><a class="btn btn-default" href="theme05.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic06-small.jpg" alt="..."><div class="caption"><h3>日本情爱大师-渡边淳一</h3><p>渡边淳一（Junichi Watanabe），日本小说家，被誉为日本情爱大师，作品……</p><p><a class="btn btn-default" href="theme06.html" role="button">View details »</a></p></div></div></div></div></div><div class="item"><div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic07-small.jpg" alt="..."><div class="caption"><h3>未解之谜</h3><p>未解之谜是人们用现有的科学技术手段，或者按照正常的思维逻辑以及推理……</p><p><a class="btn btn-default" href="theme07.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic08-small.jpg" alt="..."><div class="caption"><h3>武侠小说</h3><p>为国为民，侠之大者，淘书网武侠专题，重温经典武侠，品读新派武侠……</p><p><a class="btn btn-default" href="theme08.html" role="button">View details »</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/theme-pic09-small.jpg" alt="..."><div class="caption"><h3>音乐</h3><p>拾忆书店音乐图书专题，特价好书，超低折扣！</p><p><a class="btn btn-default" href="theme09.html" role="button">View details »</a></p></div></div></div></div></div></div></div></section></div><div><div class="row friendly_link"><div class="col-xs-12 col-sm-12"><h3>友情链接<small>／Link</small></h3><ul class="list-unstyled list-inline"><li><a rel="external nofollow" target="_blank" href="">苏州工业职业技术学院</a></li><li><a rel="external nofollow" target="_blank" href="">新华书店</a></li><li><a rel="external nofollow" target="_blank"href="">江苏教育</a></li></ul></div></div><hr/></div></div></div><div class="clearfix full-footer"><div class="footer"><div class="container"><div class="row"><div class="col-xs-12 col-md-10"></p></div><div class="col-xs-12 col-md-2"><img src="img/logo-pic.png" title="logo" alt="logo"></div></div></div></div></div>
</div><script src="lib/jquery/jquery-1.11.3.min.js"></script>
<script src="lib/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

拾忆书苑（图书商城系统）网站的设计与实现（html；DIV+CSS； Bootstrap； Dreamweaver； Photoshop）相关推荐

关于web服务器性能书籍,图书商城系统的Web服务器性能优化研究与实现
摘要: 随着互联网技术的不断发展,特别是电子商务的不断发展,网上购物的需求也在不断的增加.根据<2017-2022年中国电子商务市场运行态势及投资战略研究报告>中指出2015年中国电子商务 ...
java基于springboot+vue+elementui的网上图书商城系统前后端分离
随着时代的发展,不论是学习还是生活中,图书已经成为人们生活中必不很少的一个组成.图书是知识的载体,他是人类智慧结晶的一个体现.所以人们在现代的生活中,方方面面都离不开图书.随着信息化技术的发展,通过互 ...
基于PHP的图书商城系统
基于PHP的图书商城系统一介绍图书商城系统基于原生PHP开发,数据库mysql,前端bootstrap.用户可注册登录,购物下单等,管理员登录后台进行管理.(附带参考设计文档) 技术栈 php+ ...
Java项目：JavaWeb实现网上图书商城系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码项目编号:BS-SC-010 开发工具:IDEA / ECL ...
基于javaweb的网上图书商城系统(java+ssm+jsp+mysql+redis+jwt+shiro+rabbitmq+easyui)
基于javaweb的网上图书商城系统(java+ssm+jsp+mysql+redis+jwt+shiro+rabbitmq+easyui) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥ ...
【多用户商城系统】多用户商城系统网站怎么做？
如今,经营实体店的店铺经常面临很多困难,比如店铺租金过高.销量欠佳.推广成本太高了.因此,许多企业都关注互联网,将商店从线下转移到互联网上,并加入了电子商务行业.说到商城系统网站建设,多用户商城系统网 ...
基于Servlet的图书商城系统-一天完成毕业设计，就这么简单
项目技术栈整个项目架构为B/S架构.分层架构技术栈相对基础和底层,前端使用JSP和bootstrap, 后端原生的Servlet,使用DButils封装JDBC,动态SQL方式访问数据库. 适合对 ...
基于SSM框架开发的网上图书商城系统附带详细运行指导视频
项目描述:这是一个基于SSM框架开发的网上图书商城系统.首先,这个项目页面简洁清爽,代码注释详尽,易于理解和学习.其次,这个项目涉及到Shiro整合JWT.秒杀功能所具备的基本要求(限流.乐观锁.接口 ...
基于不可否认技术的珍贵古籍线上交易系统设计与实现（JavaWeb的图书商城系统）
目录摘要 I ABSTRACT I 引言 1 1 绪论 1 1.1 课题背景与意义 1 1.2 本文的总体结构 1 2 开发工具及技术 2 2.1 开发工具 2 2.1.1 前台使用技术 2 2 ...
JSP图书销售系统JSP网上书店商城JSP网上书店JSP图书在线销售系统JSP二手图书商城系统
JSP图书销售系统JSP网上书店商城JSP网上书店JSP图书在线销售系统JSP二手图书商城系统 protected void doGet(HttpServletRequest req, HttpSer ...

拾忆书苑（图书商城系统）网站的设计与实现（html；DIV+CSS； Bootstrap； Dreamweaver； Photoshop）

拾忆书苑（图书商城系统）网站的设计与实现（html；DIV+CSS； Bootstrap； Dreamweaver； Photoshop）相关推荐

最新文章

热门文章