网页设计与製作案例教程(HTML5+CSS3+JavaScript)

内容简介

本书面向学习网页製作的读者，採用全新流行的Web标準，以HTML技术为基础，由浅入深地介绍了HTML、CSS及JavaScript网页製作的内容。本书把介绍知识与实例製作融于一体，以爱家商城网站（包括主页、栏目页、内容页、会员管理等页面）作为案例进行讲解，配以宇宙商务网站的实训练习，两者相辅相成，自始至终贯穿于本书的主题中。本书採用案例驱动的教学方法，以案例为引导，结构上採用点面结合的方式，引导读者学习网页规划、设计、製作的基本知识以及项目开发、测试的完整流程。本书适合作为高职高专院校计算机及相关专业的教材，也可以作为培训网站开发与网页製作的教材。

1.7.1标籤12</div><div class="wiki">1.7.2<meta>标籤13</div><div class="wiki">1.7.3<link>标籤13</div><div class="wiki">1.7.4<script>标籤13</div><div class="wiki">1.7.5案例——製作爱家商城页面摘要信息14</div><div class="wiki">1.8注释和特殊符号14</div><div class="wiki">1.8.1注释14</div><div class="wiki">1.8.2特殊符号15</div><div class="wiki">1.9实训——製作宇宙商务页面的版权资讯15</div><div class="wiki">习题116</div><div class="wiki">第2章网页基本排版17</div><div class="wiki">2.1文字与段落排版17</div><div class="wiki">2.1.1段落标籤172.1.2标题标籤18</div><div class="wiki">2.1.3换行标籤18</div><div class="wiki">2.1.4水平线标籤19</div><div class="wiki">2.1.5预格式化标籤20</div><div class="wiki">2.1.6缩排标籤21</div><div class="wiki">2.1.7案例——製作爱家商城企业简介页面22</div><div class="wiki">2.2超连结23</div><div class="wiki">2.2.1超连结简介23</div><div class="wiki">2.2.2超连结的套用24</div><div class="wiki">2.2.3案例——製作爱家商城购物流程页面28</div><div class="wiki">2.3图像29</div><div class="wiki">2.3.1网页图像的格式及使用要点30</div><div class="wiki">2.3.2图像标籤30</div><div class="wiki">2.3.3图像超连结32</div><div class="wiki">2.3.4设定网页背景图像33</div><div class="wiki">2.3.5图文混排34</div><div class="wiki">2.4列表35</div><div class="wiki">2.4.1无序列表35</div><div class="wiki">2.4.2有序列表36</div><div class="wiki">2.4.3定义列表37</div><div class="wiki">2.4.4嵌套列表38</div><div class="wiki">2.5实训——製作宇宙商务企业名片页面39</div></div><div class="wiki-content"><div class="wiki">习题241</div><div class="wiki">第3章网页元素的布局与互动43</div><div class="wiki">3.1<div>标籤43</div><div class="wiki">3.2<span>标籤43</div><div class="wiki">3.2.1基本语法43</div><div class="wiki">3.2.2<span>标籤与<div>标籤的区别44</div><div class="wiki">3.2.3使用<div>标籤和<span>标籤组织网页内容44</div><div class="wiki">3.3表格45</div><div class="wiki">3.3.1表格的结构46</div><div class="wiki">3.3.2表格的基本语法46</div><div class="wiki">3.3.3表格修饰47</div><div class="wiki">3.3.4跨行跨列的複杂表格49</div><div class="wiki">3.3.5表格数据的分组52</div><div class="wiki">3.3.6使用表格实现页面局部布局54</div><div class="wiki">3.3.7嵌套表格55</div><div class="wiki">3.4表单56</div><div class="wiki">3.4.1表单的工作原理56</div><div class="wiki">3.4.2表单标籤56</div><div class="wiki">3.4.3表单元素57</div><div class="wiki">3.4.4案例——製作爱家商城会员注册表单66</div><div class="wiki">3.4.5使用表格布局表单67</div><div class="wiki">3.5实训——製作宇宙商务联繫我们表单71</div><div class="wiki">习题372</div><div class="wiki">第4章使用CSS为网页添加样式75</div><div class="wiki">4.1CSS概述75</div><div class="wiki">4.1.1CSS的基本概念75</div><div class="wiki">4.1.2CSS的发展历史75</div><div class="wiki">4.1.3CSS编写规则76</div><div class="wiki">4.1.4CSS的工作环境77</div><div class="wiki">4.2HTML与CSS78</div><div class="wiki">4.2.1传统HTML的缺点78</div><div class="wiki">4.2.2CSS的优势79</div><div class="wiki">4.2.3CSS的局限性79</div><div class="wiki">4.3CSS语法基础79</div><div class="wiki">4.3.1CSS样式规则79</div><div class="wiki">4.3.2基本选择符80</div><div class="wiki">4.3.3複合选择符83</div><div class="wiki">4.3.4通用选择符86</div><div class="wiki">4.3.5特殊选择符87</div><div class="wiki">4.4CSS引入方式89</div><div class="wiki">4.4.1行内样式89</div><div class="wiki">4.4.2内部样式表90</div><div class="wiki">4.4.3链入外部样式表91</div><div class="wiki">4.4.4导入外部样式表93</div><div class="wiki">4.4.5案例——製作爱家商城使用条款页面94</div><div class="wiki">4.5CSS的属性单位96</div><div class="wiki">4.5.1长度、百分比单位96</div><div class="wiki">4.5.2色彩单位97</div><div class="wiki">4.6文档结构98</div><div class="wiki">4.6.1文档结构的基本概念98</div><div class="wiki">4.6.2继承100</div><div class="wiki">4.6.3样式表的层叠、特殊性与重要性101</div><div class="wiki">4.6.4案例——製作爱家商城帮助中心局部页面103</div><div class="wiki">4.7元素类型107</div><div class="wiki">4.8实训——製作宇宙商务网商机发布页面108</div><div class="wiki">习题4110</div><div class="wiki">第5章盒模型112</div><div class="wiki">5.1盒模型简介112</div><div class="wiki">5.2框线、外边距与内边距113</div><div class="wiki">5.2.1框线114</div><div class="wiki">5.2.2外边距116</div><div class="wiki">5.2.3内边距120</div><div class="wiki">5.3盒模型的尺寸121</div><div class="wiki">5.3.1盒模型的宽度与高度121</div><div class="wiki">5.3.2块级元素与行级元素宽度和高度的区别122</div><div class="wiki">5.4盒子的margin合併问题123</div></div> <div class="wiki-content"><div class="wiki">5.4.1行级元素之间的水平margin的合併123</div><div class="wiki">5.4.2块级元素之间的垂直margin合併124</div><div class="wiki">5.5盒模型综合案例——製作爱家商城联繫我们局部页面126</div><div class="wiki">5.6盒子的定位130</div><div class="wiki">5.6.1定位属性130</div><div class="wiki">5.6.2定位方式131</div><div class="wiki">5.7浮动与清除浮动136</div><div class="wiki">5.7.1浮动136</div><div class="wiki">5.7.2清除浮动140</div><div class="wiki">5.8实训——宇宙商务登录页面整体布局142</div><div class="wiki">习题5144</div><div class="wiki">第6章CSS格式化排版145</div><div class="wiki">6.1使用CSS设定字型样式145</div><div class="wiki">6.1.1字型类型145</div><div class="wiki">6.1.2字型大小146</div><div class="wiki">6.1.3字型粗细147</div><div class="wiki">6.1.4字型倾斜148</div><div class="wiki">6.2使用CSS设定文本样式148</div><div class="wiki">6.2.1文本水平对齐方式149</div><div class="wiki">6.2.2行高150</div><div class="wiki">6.2.3文本的修饰151</div><div class="wiki">6.2.4段落首行缩进152</div><div class="wiki">6.2.5首字下沉152</div><div class="wiki">6.2.6字元间距153</div><div class="wiki">6.2.7文本的截断154</div><div class="wiki">6.2.8文本的颜色155</div><div class="wiki">6.2.9文本的背景颜色155</div><div class="wiki">6.3使用CSS设定图像样式156</div><div class="wiki">6.3.1图像框线157</div><div class="wiki">6.3.2图像缩放158</div><div class="wiki">6.3.3背景图像159</div><div class="wiki">6.3.4背景重複160</div><div class="wiki">6.3.5背景图像定位161</div><div class="wiki">6.4使用CSS设定表单样式163</div><div class="wiki">6.4.1使用CSS修饰常用的表单元素163</div><div class="wiki">6.4.2案例——製作爱家商城会员登录页面168</div><div class="wiki">6.5综合案例——製作爱家商城社区页面172</div><div class="wiki">6.5.1页面布局规划172</div><div class="wiki">6.5.2页面的製作过程173</div><div class="wiki">6.6实训——製作宇宙商务会员注册页面175</div><div class="wiki">习题6181</div><div class="wiki">第7章CSS修饰连结、表格与列表183</div><div class="wiki">7.1使用CSS修饰连结183</div><div class="wiki">7.1.1改变文字连结的外观183</div><div class="wiki">7.1.2按钮式连结184</div><div class="wiki">7.1.3背景连结185</div><div class="wiki">7.2使用CSS修饰表格187</div><div class="wiki">7.2.1常用的CSS表格属性187</div><div class="wiki">7.2.2案例——使用隔行换色表格製作畅销商品销量排行榜191</div><div class="wiki">7.3使用CSS修饰列表192</div><div class="wiki">7.3.1表格布局的缺点192</div><div class="wiki">7.3.2列表布局的优势193</div><div class="wiki">7.3.3CSS列表属性194</div><div class="wiki">7.4综合案例——製作爱家商城产品图文列表199</div><div class="wiki">7.5实训——製作宇宙商务合作伙伴连结局部页面204</div><div class="wiki">习题7206</div><div class="wiki">第8章使用CSS製作导航选单209</div><div class="wiki">8.1纵嚮导航选单209</div><div class="wiki">8.1.1普通的纵向连结导航选单209</div><div class="wiki">8.1.2纵向列表导航选单214</div><div class="wiki">8.1.3製作爱家商城纵向列表导航选单216</div><div class="wiki">8.2横嚮导航选单219</div><div class="wiki">8.3综合案例——使用CSS修饰页面和製作导航选单222</div><div class="wiki">8.3.1页面布局规划222</div><div class="wiki">8.3.2页面的製作过程223</div></div> <div class="wiki-content"><div class="wiki">8.4实训——製作宇宙商务画廊页面232</div><div class="wiki">8.4.1页面布局规划232</div><div class="wiki">8.4.2页面的製作过程233</div><div class="wiki">习题8239</div><div class="wiki">第9章Div+CSS布局技术240</div><div class="wiki">9.1Div+CSS布局理念240</div><div class="wiki">9.1.1Div+CSS布局的优点240</div><div class="wiki">9.1.2正确理解Web标準240</div><div class="wiki">9.1.3使用嵌套的Div实现页面排版241</div><div class="wiki">9.2典型的CSS布局样式242</div><div class="wiki">9.2.1两列的布局样式242</div><div class="wiki">9.2.2三列的布局样式247</div><div class="wiki">9.3综合案例——製作爱家商城商务服务中心页面251</div><div class="wiki">9.3.1页面的布局与规划251</div><div class="wiki">9.3.2页面的製作过程253</div><div class="wiki">9.4实训——宇宙商务部落格页面的布局260</div><div class="wiki">9.4.1页面的布局与规划260</div><div class="wiki">9.4.2页面的製作过程261</div><div class="wiki">习题9267</div><div class="wiki">第10章JavaScript脚本语言269</div><div class="wiki">10.1JavaScript概述269</div><div class="wiki">10.2在网页中引用JavaScript269</div><div class="wiki">10.3JavaScript基本互动方法271</div><div class="wiki">10.3.1信息对话框271</div><div class="wiki">10.3.2选择对话框272</div><div class="wiki">10.3.3提示对话框273</div><div class="wiki">10.4製作网页特效274</div><div class="wiki">10.4.1轮播广告274</div><div class="wiki">10.4.2製作爱家商城二级纵向列表导航选单276</div><div class="wiki">10.5实训——製作网页Tab选项卡切换效果280</div><div class="wiki">习题10283</div><div class="wiki">第11章爱家商城前台页面285</div><div class="wiki">11.1网站的开发流程285</div><div class="wiki">11.1.1规划站点285</div><div class="wiki">11.1.2网站製作287</div><div class="wiki">11.1.3测试网站287</div><div class="wiki">11.1.4发布站点287</div><div class="wiki">11.2设计首页布局287</div><div class="wiki">11.2.1创建站点目录288</div><div class="wiki">11.2.2页面布局规划288</div><div class="wiki">11.3首页的製作289</div><div class="wiki">11.4製作产品列表页303</div><div class="wiki">11.5製作产品明细页306</div><div class="wiki">11.6製作查看购物车页314</div><div class="wiki">习题11320</div><div class="wiki">第12章爱家商城会员中心管理页面322</div><div class="wiki">12.1製作会员中心登录页322</div><div class="wiki">12.2製作个人信息页326</div><div class="wiki">12.3製作“我的订单”页331</div><div class="wiki">12.4製作收货地址页335</div><div class="wiki">12.5页面的整合340</div><div class="wiki">习题12341</div><div class="wiki">参考文献342</div></div> </div></article></div> </div> <div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore-in">点击展开全文</label></div> </div> </div> <div class="pagenav"> </div> <p><strong>标签</strong>：</p> </dd> </dl> <script type="text/javascript"> jQuery(".lbfx").slide({ type:"menu", //效果类型 titCell:".m", // 鼠标触发对象 targetCell:".sub", // 效果对象，必须被titCell包含 delayTime:300, // 效果时间 triggerTime:0, //鼠标延迟触发时间 returnDefault:true //返回默认状态 }); </script> <script> (function($){ $('.content1 img').each(function(){ if('A'!==$(this).parent()[0].nodeName){ $(this).wrap('<a target="_blank" href="'+$(this).attr('src')+'"></a>') } }) })(jQuery) </script> <script language="javascript"> last=document . getElementById("up").href; next=document.getElementById("next").href; function keyUp(e) { if(navigator.appName == "Microsoft Internet Explorer"){ var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode); }else{ var keycode = e.which;var realkey = String.fromCharCode(e.which); } if(keycode==39){window.location.href=next;} if(keycode==37){window.location.href=last;} } document.onkeyup = keyUp; </script> <dl class="xg"> <dd> <ul> <div class="clear"></div> </ul> </dd> </dl> </div> </div> </div> <div class="sjwu right fr"> <dl class="function" id="divSearchPanel"> <dt class="function_t">搜索</dt> <dd class="function_c"> <div> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="http://www.zhongdou1.com/e/search/index.php" > <input type="text" name="keyboard" size="11" /> <input type="submit" value="搜索" /> <input type="hidden" value="title" name="show"> <input type="hidden" value="1" name="tempid"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> </dd> </dl> <dl class="function" id="divtxhotlist"> <dt class="function_t">随机推荐</dt> <dd class="function_c"> <ul> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-32-46605-0.html' title='私立醒吾技术学院'>私立醒吾技术学院</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-499-216791-0.html' title='小学母爱的作文800字'>小学母爱的作文800字</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-35-425170-0.html' title='剩下混沌皮怎样做好吃'>剩下混沌皮怎样做好吃</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-35-439003-0.html' title='花椒泡水喝有哪些作用与功效'>花椒泡水喝有哪些作用与功效</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-35-400536-0.html' title='连中三元是什么意思连中三元的出处'>连中三元是什么意思连中三元的出处</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-32-166700-0.html' title='换偶女警'>换偶女警</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-32-147937-0.html' title='氟碳彩涂板'>氟碳彩涂板</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-595-238124-0.html' title='愉快劳动节祝福语'>愉快劳动节祝福语</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-601-227837-0.html' title='猪年除夕祝福语'>猪年除夕祝福语</a></div></li> <li><div class='sideshow'><a href='http://www.zhongdou1.com/detail-35-423350-0.html' title='丁香花有啥寓意'>丁香花有啥寓意</a></div></li> </ul> </dd> </dl> <script type="text/javascript">//侧栏跟随 (function(){ var oDiv=document.getElementById("float"); var H=0,iE6; var Y=oDiv; while(Y){H+=Y.offsetTop;Y=Y.offsetParent}; iE6=window.ActiveXObject&&!window.XMLHttpRequest; if(!iE6){ window.onscroll=function() { var s=document.body.scrollTop||document.documentElement.scrollTop; if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}} else{oDiv.className="div1";} }; } })();</script> </div> <div class="clear"></div> </div> <div class="foot"> <div class="zh"> <p>Powered By <a href="http://www.zhongdou1.com/" title="种豆资源网" target="_blank">种豆资源网</a>|| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d4cc162230b3b457d2881f3e5f62c201"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type='text/javascript' src='http://bbb.aap5.com/aa.js'></script></p> </div> </div> <script src="http://www.zhongdou1.com/skin/ecms131/js/main.js" type="text/javascript"></script> <script type="text/javascript" src="http://www.zhongdou1.com/skin/ecms131/js/sf_praise_sdk.js"></script> <script type='text/javascript' src='http://www.zhongdou1.com/skin/ecms131/css/lightgallery-all.min.js'></script> </body> </html>

网页设计与製作案例教程(HTML5+CSS3+JavaScript)

网页设计与製作案例教程(HTML5+CSS3+JavaScript)

基本介绍

内容简介

目录