静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例13.doc

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例十六、电商网站 一、案例整体目标及要求 （一）案例目的 通过实践案例培养我们的动手能力，提高网页制作能力和水平，灵活运用CSS+DIV技术，我选择的主题是电商网站。 （二）案例要求 采用站点进行网站资源的管理，通过CSS+DIV进行页面布局，通过JavaScript提升网页效果。 二、案例解决方案 1、首页 效果图: 二级页面 二级页面 1.先看到的是公司logo，然后是网站左侧的导航，可以链接到具体的页面。 2.下面显示则是必威体育精装版商品，展示商品图片。 3.中间是广告部分。 4.底部是友情链接。 效果截图： 关键代码如下： div id=qc divspan class=logo id=abc img src=image/201625253.jpg //span span id=logoj class=logoimg src=image/图层 2.jpg //span/div div id=logojj input type=text class=aa value=七夕特惠nbsp; 沙发 nbsp;夏季新品 nbsp;免费安装/input type=button value=搜nbsp;nbsp;索 class=ab / br /span span class=logoc欧式软床/spannbsp;nbsp;|nbsp;nbsp;实木衣柜nbsp;nbsp;|span class=logocnbsp;nbsp;餐桌/spannbsp;nbsp;|nbsp;nbsp;电脑桌nbsp;nbsp;|span class=logocnbsp;nbsp;沙发/spannbsp;nbsp;|nbsp;nbsp;儿童家具nbsp;nbsp;|span class=logocnbsp;nbsp;床/span/span /div /div 效果截图： = 3 \* GB3 ③页面中的锚点链接。 关键代码： img src=image/2016-12-01_194529.jpg /span a name=keting Rt.html客厅家具/a ⑥友情链接部分。 效果截图 关键代码： div class=four_d strong友情链接：/strongimg src=image/2016-12-03_155154.jpg width=18 height=22 /a href=#地产中国网/aimg src=image/2016-12-03_155154.jpg width=18 height=22 / a href=#成都天气 /aimg src=image/2016-12-03_155154.jpg width=18 height=22 /a href=#墙贴/a img src=image/2016-12-03_155154.jpg width=18 height=22 /a href=#装修建材/aimg src=image/2016-12-03_155154.jpg width=18 height=22 / a href=#瓷砖十大品牌/aimg src=image/2016-12-03_155154.jpg width=18 height=22 / /div ⑧二级页面的顶部部分。 效果图： 关键代码： div id=ajz div style=margin-bottom:10px spanstronga href=index.html餐厅家具/a/strong/span span id=topd床nbsp;|nbsp;床叠nbsp;|nbsp;床头柜nbsp;|nbsp;梳妆台nbsp;|nbsp;衣柜nbsp;|nbsp;套房家具 img src=image/adf.jpg height=20 /p id=twz立即抢nbsp;/pspan id=huanimg src=image/qqerezz.jpg //span/span /div 三、案例主要技术指标 利用HTML标签完成网页结构的搭建 CSS选择器及盒子模型的灵活运用 CSS+DIV布局 JavaScript实现网页动态效果 四、案例实施进度 进度安排 内容安排 第一天 上午