15 第章 行业综合案例 1 制作电子商务类网页 本章学习目标
Dreamweaver CC 网页设计实战从入门到精通 视频教学版 15.1 整体布局 电子商务类网页主要实现网络购物 交易 所要体现的组件相对较多 主要包括产 品搜索 账户登录 广告推广 产品推荐 产品分类等内容 本实例最终的网页效果如 图 15-1 所示 图 15-1 15.1.1 设计分析 电子商务类网站主要是用来提供购物交易 的 所以要体现出以下特性 ⑴ 商品检索方便 要有商品搜索功能 有详细的商品分类 网页效果图 15.1.2 排版架构 本实例的电子商务网站整体上还是上中下 架构 上部为网页头部 导航栏 热门搜索栏 中间为网页主要内容 下部为网站介绍及备案 信息 如图 15-2 所示 ⑵ 有产品推广功能 增加广告活动位 帮助特色产品推广 ⑶ 热门产品推荐 消费者的搜索很多都 带有盲目性 所以可以设置热门产品推荐位 ⑷ 对于产品要简单准确地展示信息 ⑸ 页面整体布局要清晰 有条理 让浏 览者知道在网页中如何快速找到自己需要的 信息 ３１８ 图 15-2 网页架构
第 15 章 15.2 行业综合案例 1 制作电子商务类网页 模块组成 实例中整体虽然是上中下结构 但是每一部分都有更细致的划分 上部主要包括网页头部 导航栏等内容 中间主体主要包括商品检索模块 商品分类模块 热销专区模块等 下部主要包括友情链接模块 快速访问模块 网站注册备案信息等模块 网页中各个模块的划分主要依靠 table 标签来实现 15.3 制作步骤 网站制作要逐步完成 本实例中网页制作主要包括以下几个部分 15.3.1 样式表 为了更好地实现网页效果 需要为网页制 作 CSS 样式表 制作样式表的代码如下 font-family:inherit; vertical-align:baseline ol, ul { /* reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, list-style:none table { blockquote, pre, a, abbr, acronym, border-collapse:collapse; address, big, cite, code, del, dfn, em, border-spacing:0 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, caption, th, td { dt, dd, ol, ul, li, fieldset, form, text-align:left; label, legend, table, caption, tbody, font-weight:normal; tfoot, thead, tr, th, td { margin:0; padding:0; blockquote:before, blockquote:after, q:before, q:after { border:0; content:""; font-weight:inherit; font-style:inherit; blockquote, q { font-size:100%; quotes:"" ""; ３１９
Dreamweaver CC 网页设计实战从入门到精通 ( 视频教学版 ) html, body { height:101%; body { background:#fff; height:100%; padding:0; vertical-align:top; /* Default HTML Elements -------------------------------*/ /* Images */ img, a img { border:0pt none; vertical-align:bottom; /* Reusables */ /* Misc classes */.right { float:right!important;.left { float:left;.padd-top { padding-top:10px!important;.clear-left { clear:left;.img-replace { background-position:0 0; background-repeat:no-repeat; display:block; padding:0; text-indent:-9999px; /* Grid Layout */.container { margin:0 auto; padding-right:10px; padding-left:10px; width:940px;.grid,.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7 { display:inline; float:left; margin-left:0px; margin-right:0px; padding-left:10px;.grid_whatsnew { display:inline; float:right; margin-left:0px; margin-right:0px;.no-grid { display:block; float:none;.grid_whatsnew_iframe { display:inline; float:left; margin-left:0px;
第 15 章 行业综合案例 1 制作电子商务类网页 margin-right:0px; padding-left:10px; padding-top:287px;.begin { margin-left:0;.end { margin-right:0;.container.grid_1 { width:145px;.container.grid_2 { width:300px;.container.grid_whatsnew { width:300px;.container.grid_3 { width:455px;.container.grid_4 { width:610px;.container.grid_5 { width:765px;.container.grid_6 { width:915px;.container.grid_whatsnew_iframe { display:inline; float:left; margin-left:0px; margin-right:0px; padding-left:10px; width:300px; padding-top:287px;.container.grid_7 { width:770px; /* add extra space before */.container.ahead_1 { padding-left:155px;.container.ahead_2 { padding-left:310px;.container.ahead_3 { padding-left:465px;.container.ahead_4 { padding-left:615px;.container.ahead_5 { padding-left:775px; /* add extra space after */.container.behind_1 { padding-right:155px;.container.behind_2 { padding-right:310px;.container.behind_3 { padding-right:465px;.container.behind_4 {
Dreamweaver CC 网页设计实战从入门到精通 ( 视频教学版 ) padding-right:615px;.container.behind_5 { padding-right:775px; /* move item forward */.container.move_1 { left:155px;.container.move_2 { left:310px;.container.move_3 { left:465px;.container.move_4 { left:615px;.container.move_5 { left:775px; /* move item back */.container.remove_1 { left:-155px;.container.remove_2 { left:-310px;.container.remove_3 { left:-465px;.container.remove_4 { left:-615px;.container.remove_5 { left:-775px;.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;.clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;.clearfix { display:inline-block; * html.clearfix { height:1%;.clearfix { display:block; /* fix the outline on firefox focus */ a:active { outline: none; a:focus { -moz-outline-style: none;
第 15 章 行业综合案例 1 制作电子商务类网页 /* ** Markup free clearing ** Details: http://www. positioniseverything.net/easyclearing. html */.clear-block:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;.clear-block { display: inline-block;.clear { float: none; clear: both; /* Hides from IE-mac */ * html.clear-block { height: 1%;.clear-block { display: block; /* End hide from IE-mac */ /* kat's formatting -- facebox overlay for send to friend */ div#facebox { position: absolute; top: 0; left: 0; z-index: 100; text-align: left; div#facebox div.popup { position: relative; div#facebox div.body { div#facebox div#sendtofriend { padding: 11px; background: #fff; div#facebox div.content { width: 672px; div#facebox.loading { /**/ width: 650px; height: 300px; text-align: center; background-color: transparent; div#facebox h2#sendtofriend { background-image: url(http:// www.woolworths.com.au/wps/woolworths/_ images/title-sendtofriend.gif); background-repeat: no-repeat; background-position: top left; width: 222px; height: 26px; margin: 14px 0px 0px 10px; text-indent: -3001px; div#facebox div.note { margin: 13px 0px 60px 0px; height: 300px;
Dreamweaver CC 网页设计实战从入门到精通 ( 视频教学版 ) div#facebox form ul { padding: 6px 0px 0px 0px; margin: 0; div#facebox form ul li { float: left; display: inline; width: 373px; padding: 0px 0px 17px 0px; div#facebox form ul li input.text { border: 1px solid #b1b1b1; height: 17px; width: 369px; div#facebox form ul li.left { width: 247px; div#facebox form ul li.left input { width: 227px; div#facebox form label { width: 100%; padding: 0px 0px 5px 0px; div#facebox form textarea { width: 621px; border: 1px solid #b1b1b1; height: 79px; div#facebox input.btn-search { position: absolute; bottom: 36px; right: 105px; div#facebox a.close { position: absolute; bottom: 36px; right: 10px; div#facebox_overlay { position: fixed; top: 0px; left: 0px; height:100%; width:100%;.facebox_hide { z-index:-100;.facebox_overlaybg { background-color: #000; z-index: 99; /* overlay */ * html div#facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document. body.scrollheight > document.body. offsetheight? document.body. scrollheight : document.body. offsetheight + 'px'); /* / kat's formatting -- facebox overlay for send to friend */
第 15 章 行业综合案例 1 制作电子商务类网页 说明 本实例的样式表比较多 这 里只展示一部分 随书光盘中有文字 的代码文件 制作完成后将样式表保存到网站根目录 下 文件名为.css 文件夹 制作好的样式表需要应用到网站中 所 以在网站主页中要建立到 CSS 的链接代码 链接代码需要添加在 head 标签中 具体代码 如下 图 15-3 网页头部效果 实现网页头部的代码如下所示 div id="header"> <a href="index. html" class="logomain"><img src="img/ woolworths-logo.png" width="230" height="57" /></a> <form class="hsearch" id="searchform" <link rel="stylesheet" title="" method="post" > media="screen" href="css/common.css" <fieldset> type="text/css" /> <label for="search"> <link rel="stylesheet" title="" < i n p u t i d = " s e a r c h " media="screen" href="css/text.css" class="hsearchtext" type="text/css" /> onfocus="this.value='';" value=" 请输入 " <link rel="alternate stylesheet" name="search_query"/> title="large" media="screen" href="css/ largeprint.css" type="text/css" /> <link rel="stylesheet" title="" <input gif" value="go"/> </label> type="text/css" /> </fieldset> </form> <link rel="stylesheet" title="" class="hsearchgo" type="image" src="img/search-btn-go. media="screen" href="css/screen9.css" <!--[if IE]> type="text" <ul id="navsub"> href="css/hacks.css" type="text/css" /> <li> <a href="#" > 登录 </a></li> <li><a href="#" > 联系我们 </a></li> <![endif]--> <li><a href="#" target="new" > 注册 </a></li> 15.3.2 网页头部 网页头部主要是企业 Logo 和一些快速链 <li class="end"> <a href="#" title="large Font" onclick="setactive StyleSheet('large'); return false;"> 放 接 如关于我们 食品知识 网银在线支付等 大 </a> <a href="#" title="normal font" 除此之外还有导航菜单栏和搜索框等 本实例网页头部的效果如图 15-3 所示 class="small" onclick="setactivestylesh eet('default'); return false;"> 缩小 </a> </li> ３２５
Dreamweaver CC 网页设计实战从入门到精通 ( 视频教学版 ) <ul id="navmain"> <li id="mnav-home"> <a href="index.html" > 首页 </a> </li> <li id="mnav-whatsnew" class=""><a href="food-safety.html" > 博客园 </a> <li class=""><a href='#'> 查看最新 </a></li> <li class=""><a href='#'> 写博客 </a></li> <li class=""><a href='#'> 进入博客园 </a></li> </li> <li id="mnav-fresh" class=""><a href="promotions.html" >VIP 会员 </a> <li><a href="#" >VIP 会员登录 </a></li> <li class=""><a href="#" > 申请 VIP 会员 </a></li> <li class=""><a href='#'> 订阅免费期刊 </a></li> <li class=""><a href='#'> VIP 会员的优惠 </a></li> <li class=""><a href='#'> VIP 会员帮助 </a></li> </li> <li id="mnav-health" class="" ><a href="food-safety.html" > 儿童食品在线选购 </a> <li class=""><a href='#'> 婴幼儿食品 </a></li> <li class=""><a href='#'> 1~3 岁儿童食品 </a></li> <li class=""><a href='#'> 婴幼儿乳制品 </a></li> <li class=""><a href='#'> 儿童乳制品 </a></li> <li class=""><a href='#'> 儿童零食 </a></li> <li class=""><a href='#'> 儿童饮料 </a></li> <li class=""><a href='#'> 专家咨询 </a></li> </li> <li id="mnav-ffk" class=""><a href="promotions.html" > 美食社区 </a> <li class=""><a href='#'> 进入社区 </a></li> <li class=""><a href='#'> 最新动态 </a></li> <li class=""><a href='#'> 专题报道 </a></li>
第 15 章 行业综合案例 1 制作电子商务类网页 <li class=""><a href='#'> 讨论专区 </a></li> <li class=""><a href='#'> 社区帮助 </a></li> </li> <li id="mnav-community" class=""><a href="#" > 食品知识 </a> <li class=""><a href='#'> 食物的搭配 </a></li> <li class=""><a href='#'> 美食营养学 </a></li> <li class=""><a href='#'> 注意要点 </a></li> <li class=""><a href='#'> 在线咨询 </a></li> </li> <li id="mnav-shop"><a href="#" target="_blank" > 网站帮助 </a> <li><a href="#" target="_blank" > 在线提问 </a></li> <li><a href="#" target="_blank" > 意见建议 </a></li> </li> <li id="mnav-everyday"><a href="#" > 网银在线支付 </a> <li><a href="#" target="_blank" > 支付平台 </a></li> <li><a href="#" target="_blank" > 支付流程 </a></li> <li><a href="#" target="_blank" > 支付帮助 </a></li> </li> <li id="mnav-about" class=""><a href="#" > 关于我们 </a> <li class=""><a href='#'> 关于公司 </a></li> <li class=""><a href='#'> 关于团队 </a></li> <li class=""><a href='#'> 联系我们 </a></li> <li class=""><a href='#'> 社会责任 </a></li> <li class=""><a href='#'> 展望未来 </a></li> <li class=""><a href='#'> 公司新闻 </a></li> </li>
Dreamweaver CC 网页设计实战从入门到精通 视频教学版 15.3.3 主体第一通栏 网页中间主体的第一通栏主要包括选购商品 在线支付 免费试吃 冷藏物流 速递直达 客户服务等 具体效果如图 15-4 所示 图 15-4 主体第一通栏 实现以上页面功能的具体代码如下 <div class="container clearfix" id="wrapper"> <div class="alternate" id="home"> <div class="grid_1" id="sidebar"> <h3> 快速导航 </h3> <li id="btn-whatsnew"><a href="#" ><span> 选购商品 </span></a></li> <li id="btn-specials"><a href="#" ><span> 在线支付 </span></a></li> <li id="btn-shop"><a href="#" ><span> 免费试吃 </span></a></li> <li id="btn-work"><a href="#" ><span> 冷藏物流 </span></a></li> <li id="btn-everyday"><a href="#" ><span> 速递直达 </span></a></li> <li id="btn-recipes"><a href="#" ><span> 客户服务 </span></a></li> 15.3.4 主体第二通栏 网页中间主体的第二通栏主要是热销商品的展示 具体效果如图 15-5 所示 图 15-5 ３２８ 主体第二通栏
第 15 章 行业综合案例 1 制作电子商务类网页 实现以上页面功能的具体代码如下 <div> <table width="930" height="310" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="930" height="310" align="center"><div class=pic_show style="width:930px;"> <div id="imgadplayer"> <script type="text/jscript" language="javascript"> PImgPlayer.addItem( "", "", "img/01.jpg"); PImgPlayer.addItem( "", "", "img/02.jpg"); PImgPlayer.addItem( "", "", "img/03.jpg"); PImgPlayer.addItem( "", "", "img/04.jpg"); PImgPlayer.addItem( "", "", "img/05.jpg"); PImgPlayer.init( "imgadplayer", 930, 310 ); </script> </td> </tr> </table> 15.3.5 主体第三通栏 网页主体的第三通栏主要是商品分类模块 具体效果如图 15-6 所示 图 15-6 主体第三通栏 ３２９
Dreamweaver CC 网页设计实战从入门到精通 视频教学版 实现以上页面功能的具体代码如下 <div class="promotop grid" style="padding-top:10px;" > <h3><a href="#" > 梦幻棉花糖 </a></h3> <hr/> <a href="#" > <img src="img/promo-comm-grants[1].jpeg~mod=ajperes&cacheid =24fd40004118e387a1d6e9f9a5cf1c57.jpg" border="0" width="145" height="100" /> </ a> <p> 棉花糖蓬松柔软 入口即溶 口味甘甜 深受很多年轻人的青睐 </p> <p><a href="#" class="arrow"> 详细内容 </a></p> <div class="promotop grid" style="padding-top:10px;" > <h3><a href="#" > 进口食品 尝鲜正当时 </a></h3> <hr/> <a href="#" > <img src="img/ffm_annette_145x100.jpg~mod=ajperes&cacheid=e 95e780041737cdab7a4bf5af93b836b.jpg" border="0" width="145" height="100" /> </a> <p> 基于绝大多数进口食品的价格都高于市面上同类国产食品 </p> <p><a href="#" target="_self" class="arrow"> 详细内容 </a></p> <div class="promotop grid" style="padding-top:10px;" > <h3><a href="#" > 美味体验 美国青豆买十送一 </a></h3> <hr/> <a href="#" > <img src="img/145x100_agricultural.jpg~mod=ajperes&cacheid= a92f600041b6e21db6f8f7e779ac7bf4.jpg" border="0" width="145" height="100" /> </a> <p> 本活动精选八款商品 分别是 美国青豆芥末味 小包装 美国青豆芥末味 大包装 </p> <p><a href="#" class="arrow"> 详细内容 </a></p> <div class="promotop grid" style="padding-top:10px;" > <h3><a href="#" > 松脆好口感 方形威化饼 </a></h3> <hr/> <a href="#" > <img src="img/freshmarketupdatepromotile.jpg~mod=ajperes& CACHEID=a0e690804118e365a0a3e8f9a5cf1c57.jpg" border="0" width="145" height="100" /> </a> <p> 威化饼采用新鲜 纯正 支链淀粉多 黏性大的糯米为主料 先将糯米洗净 浸泡 晾干 椿粉 </ p> <p><a href="#" class="arrow"> 详细内容 </a></p> ３３０
第 15 章 行业综合案例 1 制作电子商务类网页 <div class="promotop grid" style="padding-top:10px;" > <h3><a href="#" > 泰国干果 营养健康新选择 </a></h3> <hr/> <a href="#" > <img src="img/145x100_sws.jpg~mod=ajperes&cacheid=df8e89004 15d7c1d9a94fe2d0d22fd60.jpg" border="0" width="145" height="100" /> </a> <p> 花生滋养补益 有助于延年益寿 所以民间又称之为 " 长生果 " </p> <p><a href="#" target="_self" class="arrow"> 详细内容 </a></p> <div class="promotop grid" style="padding-top:10px;" > <h3><a href="#" > 开怀尝鲜 " 洋零食 "</a></h3> <hr/> <a href="#" > <img src="img/145x100_question1.jpg~mod=ajperes&cacheid=30d0cd 80422335298526ff2d0d22fd60.jpg" border="0" width="145" height="100" /> </a> <p> 只要你稍微留心一下 便会发现身边的进口食品专营店从稀少到常见 越来越多 </p> <p><a href="#" class="arrow"> 详细内容 </a></p> <br /> <br /> <div> 15.3.6 网页底部 网页底部主要包括友情链接模块 快速访问模块等内容 相对比较简单 具体效果如 图 15-7 所示 图 15-7 网页底部模块 ３３１
Dreamweaver CC 网页设计实战从入门到精通 视频教学版 实现以上页面功能的具体代码如下 <div id="quicklinks" class="container"> <h3> 快速导航 </h3> <div class="grid_1"> <h4><a href="#" > 博客园 </a></h4> <li><a href='#'> 查看最新 </a></li> <li ><a href='#'> 写博客 </a></li> <li ><a href='#'> 进入博客园 </a></li> <h4><a href="#" >VIP 专区 </a></h4> <li><a href="#" >VIP 会员登录 </a></li> <li class=""><a href="#" > 申请 VIP 会员 </a></li> <li class=""><a href='#'> 订阅免费期刊 </a></li> <li class=""><a href='#'> VIP 会员的优惠 </a></li> <li class=""><a href='#'> VIP 会员帮助 </a></li> <div class="grid_1"> <h4><a href="#" > 儿童食品选购 </a></h4> <li class=""><a href='#'> 婴幼儿食品 </a></li> <li class=""><a href='#'> 1~3 岁儿童食品 </a></li> <li class=""><a href='#'> 婴幼儿乳制品 </a></li> <li class=""><a href='#'> 儿童乳制品 </a></li> <li class=""><a href='#'> 儿童零食 </a></li> <li class=""><a href='#'> 儿童饮料 </a></li> <li class=""><a href='#'> 专家咨询 </a></li> <div class="grid_1"> <h4><a href="#" > 美食社区 </a></h4> <li class=""><a href='#'> 进入社区 </a></li> ３３２
第 15 章 行业综合案例 1 制作电子商务类网页 <li class=""><a href='#'> 最新动态 </a></li> <li class=""><a href='#'> 专题报道 </a></li> <li class=""><a href='#'> 讨论专区 </a></li> <li class=""><a href='#'> 社区帮助 </a></li> <h4><a href="#" > 食品知识 </a></h4> <li class=""><a href='#'> 食物的搭配 </a></li> <li class=""><a href='#'> 美食营养学 </a></li> <li class=""><a href='#'> 注意要点 </a></li> <li class=""><a href='#'> 在线咨询 </a></li> <div class="grid_1"> <h4><a href="#" target="_blank" > 网站帮助 </a></h4> <li><a href="#" target="_blank" > 在线提问 </a></li> <li><a href="#" target="_blank" > 意见建议 </a></li> <h4><a href="#" > 加入我们 </a></h4> <li><a href="#" target="_blank" > 事业特色 </a></li> <li><a href="#" target="_blank" > 建店支持 </a></li> <li><a href="#" target="_blank" > 经营管理 </a></li> <li><a href="#" target="_blank" > 在线申请 </a></li> <h4><a href="#" target="_blank" > 网银在线支付 </a></h4> <li><a href="#" target="_blank" > 支付平台 </a></li> <li><a href="#" target="_blank" > 支付流程 </a></li> <li><a href="#" target="_blank" > 支付帮助 </a></li> <div class="grid_1"> <h4><a href="#" > 关于我们 </a></h4>
Dreamweaver CC 网页设计实战从入门到精通 ( 视频教学版 ) <li class=""><a href='#'> 关于公司 </a></li> <li class=""><a href='#'> 关于团队 </a></li> <li class=""><a href='#'> 联系我们 </a></li> <li class=""><a href='#'> 社会责任 </a></li> <li class=""><a href='#'> 展望未来 </a></li> <li class=""><a href='#'> 公司新闻 </a></li> <div class="grid_1"> <ul > <li><a href="#" target="_blank" class="bold"> 意见建议 </a></li> <li><a href="#" target="_blank" class="bold"> 问题投诉 </a></li> <li><a href="#" class="bold"> 加盟通道 </a></li> <li><a href="#" class="bold"> 联系我们 </a></li> <li><a href="#" class="bold"> 人才招聘 </a></li> <div class="clear"> <div id="footer"> <p class="small"> 儿童食品网. 保留一切权利.</p>