-
拾忆书苑（图书商城系统）网站的设计与实现（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 porta gravida at eget metus. Nullam id dolor 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 porta gravida at eget metus. Nullam id dolor 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 porta gravida at eget metus. Nullam id dolor 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
-
相关阅读:
Docker - 私有云、数据卷、网络
SpringBoot 整合 jetcache缓存
背景图片属性
LFS学习系列2 — 总览
【产品经理修炼之道】- 从需求到功能的转化过程
LeetCode150. 逆波兰表达式求值
python datetime 返回一个时间段内的所有日期列表
yolov7添加GAMAttention注意力机制，同时添加CNeB，C3C2
Android学习-数据库
DM8表空间管理
- 原文地址：https://blog.csdn.net/newlw/article/details/128095044
