Dreamweaver CC 网页设计实战从入门到精通视频教学版 15.1 整体布局电子商务类网页主要实现网络购物交易所要体现的组件相对较多主要包括产品搜索账户登录广告推广产品推荐产品分类等内容本实例最终的网页效果如图 15-1 所示图设计分析电

Size: px

Start display at page:

Download "Dreamweaver CC 网页设计实战从入门到精通视频教学版 15.1 整体布局电子商务类网页主要实现网络购物交易所要体现的组件相对较多主要包括产品搜索账户登录广告推广产品推荐产品分类等内容本实例最终的网页效果如图 15-1 所示图设计分析电"

吊贝
5 years ago
Views:

1 15 第章行业综合案例 1 制作电子商务类网页本章学习目标

Dreamweaver CC 网页设计实战从入门到精通视频教学版 15.1 整体布局电子商务类网页主要实现网络购物交易所要体现的组件相对较多主要包括产品搜索账户登录广告推广产品推荐产品分类等内容本实例最终的网页效果如图 15-1 所示图 15-1 15.1.1 设计分析电子商务类网站主要是用来提供购物交易的所以要体现出以下特性 ⑴ 商品检索方便要有商品搜索功能有详细的商品分类网页效果图 15.

2 Dreamweaver CC 网页设计实战从入门到精通视频教学版 15.1 整体布局电子商务类网页主要实现网络购物交易所要体现的组件相对较多主要包括产品搜索账户登录广告推广产品推荐产品分类等内容本实例最终的网页效果如图 15-1 所示图设计分析电子商务类网站主要是用来提供购物交易的所以要体现出以下特性 ⑴ 商品检索方便要有商品搜索功能有详细的商品分类网页效果图排版架构本实例的电子商务网站整体上还是上中下架构上部为网页头部导航栏热门搜索栏中间为网页主要内容下部为网站介绍及备案信息如图 15-2 所示 ⑵ 有产品推广功能增加广告活动位帮助特色产品推广 ⑶ 热门产品推荐消费者的搜索很多都带有盲目性所以可以设置热门产品推荐位 ⑷ 对于产品要简单准确地展示信息 ⑸ 页面整体布局要清晰有条理让浏览者知道在网页中如何快速找到自己需要的信息３１８图 15-2 网页架构

3 第 15 章 15.2 行业综合案例 1 制作电子商务类网页模块组成实例中整体虽然是上中下结构但是每一部分都有更细致的划分上部主要包括网页头部导航栏等内容中间主体主要包括商品检索模块商品分类模块热销专区模块等下部主要包括友情链接模块快速访问模块网站注册备案信息等模块网页中各个模块的划分主要依靠 table 标签来实现 15.3 制作步骤网站制作要逐步完成本实例中网页制作主要包括以下几个部分样式表为了更好地实现网页效果需要为网页制作 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:"" ""; ３１９

4 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;

5 第 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 {

6 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;

7 第 15 章行业综合案例 1 制作电子商务类网页 /* ** Markup free clearing ** Details: 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( 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;

8 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 */

9 第 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" <ﬁeldset> 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" /> </ﬁeldset> </form> <link rel="stylesheet" title="" class="hsearchgo" type="image" src="img/search-btn-go. media="screen" href="css/screen9.css"  <li><a href="#" target="new" > 注册 </a></li> 网页头部网页头部主要是企业 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> ３２５

10 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>

11 第 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>

12 Dreamweaver CC 网页设计实战从入门到精通视频教学版主体第一通栏网页中间主体的第一通栏主要包括选购商品在线支付免费试吃冷藏物流速递直达客户服务等具体效果如图 15-4 所示图 15-4 主体第一通栏实现以上页面功能的具体代码如下 <div class="container clearﬁx" 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-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

13 第 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-6 所示图 15-6 主体第三通栏３２９

14 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 =24fd e387a1d6e9f9a5cf1c57.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 95e cdab7a4bf5af93b836b.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=a0e e365a0a3e8f9a5cf1c57.jpg" border="0" width="145" height="100" /> </a> <p> 威化饼采用新鲜纯正支链淀粉多黏性大的糯米为主料先将糯米洗净浸泡晾干椿粉 </ p> <p><a href="#" class="arrow"> 详细内容 </a></p> ３３０

15 第 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=df8e d7c1d9a94fe2d0d22fd60.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 ff2d0d22fd60.jpg" border="0" width="145" height="100" /> </a> <p> 只要你稍微留心一下便会发现身边的进口食品专营店从稀少到常见越来越多 </p> <p><a href="#" class="arrow"> 详细内容 </a></p> <br /> <br /> <div> 网页底部网页底部主要包括友情链接模块快速访问模块等内容相对比较简单具体效果如图 15-7 所示图 15-7 网页底部模块３３１

16 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> ３３２

17 第 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>

18 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>

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05