上篇 基础部分__eol__项目1 网页设计与制作概述 1__eol__1.1 任务目标 1__eol__1.2 知识准备 2__eol__1.2.1 网站和网页概述 2__eol__1.2.2 网页设计素养 10__eol__1.2.3 Web标准 12__eol__1.2.4 HTML基础 13__eol__1.2.5 网页设计常用软件 20__eol__1.3 任务实施 20__eol__任务1：实现大国工匠年度人物的图像信息展示 21__eol__任务2：实现大国工匠年度人物的文字信息展示 24__eol__1.4 任务总结 26__eol__1.5 能力与知识拓展 26__eol__1.6 巩固练习 30__eol__项目2 HTML5页面元素及属性 32__eol__2.1 任务目标 32__eol__2.2 知识准备 32__eol__2.2.1 结构元素 32__eol__2.2.2 列表元素 36__eol__2.2.3 分组元素 41__eol__2.2.4 页面交互元素 42__eol__2.3 任务实施 44__eol__任务1：实现感动中国年度人物信息展示页面分区 45__eol__任务2：实现感动中国年度人物的文字信息展示 46__eol__2.4 任务总结 49__eol__2.5 能力与知识拓展 50__eol__2.6 巩固练习 50__eol__项目3 CSS美化HTML网页 53__eol__3.1 任务目标 53__eol__3.2 知识准备 54__eol__3.2.1 CSS概述 54__eol__3.2.2 CSS语法与用法 55__eol__3.2.3 CSS样式属性 57__eol__3.2.4 基本选择器 61__eol__3.2.5 复合选择器 64__eol__3.2.6 CSS高级特性 68__eol__3.3 任务实施 71__eol__任务1：实现热点新闻网首页的信息展示 72__eol__任务2：实现热点新闻网首页的样式设置 74__eol__3.4 任务总结 76__eol__3.5 能力与知识拓展 78__eol__3.6 巩固练习 82__eol__下篇 应用实践部分__eol__项目4 网页div+CSS布局设计与制作 83__eol__4.1 任务目标 83__eol__4.2 知识准备 84__eol__4.2.1 CSS盒子模型 84__eol__4.2.2 盒子模型属性设置 85__eol__4.2.3 div 90__eol__4.2.4 浮动与定位 92__eol__4.2.5 div+CSS实现网页布局 98__eol__4.3 重庆愉快网学做菜首页页面设计与制作任务实施 103__eol__任务1：创建重庆愉快网学做菜首页header部分 105__eol__任务2：设置导航（nav）部分的CSS样式 110__eol__任务3：设置文字部分的CSS样式 111__eol__任务4：设置图文的CSS样式 113__eol__4.4 任务总结 115__eol__4.5 能力与知识拓展 115__eol__4.6 巩固练习 116__eol__项目5 网页表格布局设计与制作 118__eol__5.1 任务目标 118__eol__5.2 知识准备 119__eol__5.2.1 表格标签 119__eol__5.2.2 使用表格布局的原因 122__eol__5.2.3 设计软件 123__eol__5.3 个人网站相册页面设计与制作任务实施 123__eol__任务1：创建个人网站相册页面站点 125__eol__任务2：插入表格完成基本布局 131__eol__任务3：编辑页面内容 134__eol__5.4 任务总结 139__eol__5.5 能力与知识拓展 139__eol__5.5.1 网页常见结构布局 139__eol__5.5.2 网页常见布局方法与原则 143__eol__5.6 巩固练习 143__eol__项目6 网页框架设计与制作 145__eol__6.1 任务目标 145__eol__6.2 知识准备 146__eol__6.2.1 框架 146__eol__6.2.2 标签与标签 146__eol__6.2.3 标签 148__eol__6.2.4 <iframe>标签 149__eol__6.3 重庆愉快网个人主页页面设计与制作任务实施 149__eol__任务1：创建重庆愉快网个人主页页面 152__eol__任务2：设计与制作top页面 156__eol__任务3：设计与制作left页面 159__eol__任务4：设计制作main页面 164__eol__6.4 任务总结 168__eol__6.5 能力与知识拓展 170__eol__6.5.1 重庆愉快网找优惠页面中浮动框架的设计与制作 170__eol__6.5.2 重庆愉快网找优惠框架链接的设计与制作 172__eol__6.6 巩固练习 175__eol__项目7 网页模板设计与制作 177__eol__7.1 任务目标 177__eol__7.2 知识准备 178__eol__7.2.1 资源 179__eol__7.2.2 库 179__eol__7.2.3 库项目 180__eol__7.2.4 编辑库项目 182__eol__7.3 重庆愉快网内容页面设计与制作任务实施 183__eol__任务1：分析、设计与制作内容页面的布局 184__eol__任务2：设计与制作网页可编辑区域 189__eol__任务3：通过模板页来设计与制作同类型的内容页面 192__eol__7.4 任务总结 196__eol__7.5 能力与知识拓展 198__eol__7.6 巩固练习 200__eol__项目8 网页表单设计与制作 202__eol__8.1 任务目标 202__eol__8.2 知识准备 203__eol__8.2.1 表单标签 203__eol__8.2.2 表单域 204__eol__8.2.3 表单按钮 207__eol__8.3 重庆愉快网注册表单页面设计与制作任务实施 208__eol__任务1：创建重庆愉快网注册表单页面站点 210__eol__任务2：创建重庆愉快网注册表单页面 210__eol__任务3：注册表单页面的设计与制作 212__eol__任务4：美化注册表单页面 219__eol__8.4 任务总结 220__eol__8.5 能力与知识拓展 223__eol__8.5.1 表单页面制作原则 223__eol__8.5.2 下拉列表的设计与制作 224__eol__8.6 巩固练习 225__eol__项目9 网页简单特效设计与制作 227__eol__9.1 任务目标 227__eol__9.2 知识准备 228__eol__9.2.1 行为 228__eol__9.2.2 JavaScript 230__eol__9.2.3 JavaScript事件 232__eol__9.2.4 JavaScript对象 232__eol__9.3 重庆市少年宫网站首页页面设计与制作任务实施 233__eol__任务1：创建重庆市少年宫网站首页页面站点 236__eol__任务2：创建重庆市少年宫网站首页页面 236__eol__任务3：重庆市少年宫网站首页页面的设计与制作 238__eol__9.4 任务总结 243__eol__9.5 能力与知识拓展 245__eol__9.6 巩固练习 246__eol__项目10 网页多媒体设计与制作 248__eol__10.1 任务目标 248__eol__10.2 知识准备 249__eol__10.2.1 HTML5多媒体的特性 249__eol__10.2.2 视频和音频编解码器 249__eol__10.2.3 多媒体的格式 250__eol__10.2.4 支持视频或音频的浏览器 251__eol__10.2.5 在网页中嵌入音频 251__eol__10.2.6 在网页中嵌入视频 252__eol__10.3 简单音乐播放器设计与制作任务实施 256__eol__任务1：创建音乐播放器网页 257__eol__任务2：实现音乐播放功能 260__eol__10.4 任务总结 263__eol__10.5 能力与知识拓展 263__eol__10.6 巩固练习 266 </div> <a href="javascript:void(0);" class="tpml-all"></a> </div> </div> <!-- 评价 --> <div class="tab-main" style="display: none;"> <form id="search_form" action="" method="get"> <input type="hidden" value="evaluate" name="cur"> <input type="hidden" name="textbook_id" value="3389131"> <input type="hidden" name="page" id="search_form_page" value="1"> </form> <div class="table-H"> <span>好评度</span> </div> <ul class="pjBox"> <li> <div class="pjStar"> <p>内容评价 <label class="star-box"> <i></i> <i></i> <i></i> <i></i> <i></i> </label> </p> <p>质量评价 <label class="star-box"> <i></i> <i></i> <i></i> <i></i> <i></i> </label> </p> </div> </li> </ul> <div class="table-H"> <span>全部评价</span> </div> <ul class="pjBox"> <div class="no-content">暂无评价信息</div> </ul> <div id="page" class="page_div"></div> </div> </div> </div> </div> </div> <script type="text/javascript"> $(function () { var cur = "default"; if (cur == 'evaluate') { $('#evaluate').addClass('cur').siblings('a').removeClass('cur'); $('.tab-main').hide().eq($('#evaluate').index()).show(); } else if (cur == 'default') { $('#default').addClass('cur').siblings('a').removeClass('cur'); $('.tab-main').hide().eq($('#default').index()).show(); } if ($('.tpml').height() > 250) { $('.tpml-all').html('展开更多') $('.tpml').css('height', '250px') } if ($('.content-caixuan').height() > 85) { $('.content-caixuan-all').html('查看全部') $('.content-caixuan').css('height', '85px') } if ($('.author').height() > 50) { $('.author-all').html('查看全部') $('.author').css('height', '50px') } }); Look = {}; Look.tanBox = function (box_id) { tanBox(box_id); }; $("#page").paging({ pageNo: $("#search_form_page").val(), totalPage: 0, totalSize: 0, callback: function (num) { jumpto(num) } }); $('.author-all').click(function () { if ($(this).html() === '查看全部') { var $con = $(this).html('收起').prev('div'); $con.css('height', '100%'); } else { var $con = $(this).html('查看全部').prev('div'); $con.css('height', '50px'); $con.css('overflow', 'hidden'); } }); $('.content-caixuan-all').click(function () { if ($(this).html() === '查看全部') { var $con = $(this).html('收起').prev('div'); $con.css('height', '100%'); } else { var $con = $(this).html('查看全部').prev('div'); $con.css('height', '85px'); $con.css('overflow', 'hidden'); } }); $('.tpml-all').click(function () { if ($(this).html() === '展开更多') { var $con = $(this).html('收起').prev('div'); $con.css('height', '100%'); } else { var $con = $(this).html('展开更多').prev('div'); $con.css('height', '250px'); $con.css('overflow', 'hidden'); } }); $(".table-tab a").click(function () { $(this).addClass('cur').siblings('a').removeClass('cur'); $('.tab-main').hide().eq($(this).index()).show(); $(".table-radio label:visible").attr("style", "border:0"); if ($(".table-radio label:visible").length == 1) { $(".table-radio").hide(); } }) </script> <div class="fri-link foot-link"> <span class="fri-link-dt">友情链接</span> <a class="fri-link-item fri-link-item1" href="http://cn.cnpubg.com/" target="_blank">中国出版集团公司</a> <a class="fri-link-item" target="_blank" href="http://www.xhsdzd.com/">新华书店总店</a> <a class="fri-link-item" target="_blank" href="http://www.pac.org.cn/">中国出版协会</a> <a class="fri-link-item" target="_blank" href="http://www.crs1992.com/">中国编辑学会</a> <a class="fri-link-item" target="_blank" href="http://www.hep.com.cn/">高等教育出版社</a> <a class="fri-link-item" target="_blank" href="http://www.cmpedu.com/">机械工业出版社</a> <a class="fri-link-item" target="_blank" href="http://www.sciencep.com/">科学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.cip.com.cn/">化学工业出版社</a> <a class="fri-link-item" target="_blank" href="http://www.cepp.sgcc.com.cn/">中国电力出版社</a> <a class="fri-link-item" target="_blank" href="https://www.phei.com.cn/">电子工业出版社</a> <a class="fri-link-item" target="_blank" href="http://www.ccpcl.com.cn/">人民交通出版社</a> <a class="fri-link-item" target="_blank" href="http://www.crup.com.cn/">中国人民大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.pup.cn/">北京大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.tup.tsinghua.edu.cn/index.html">清华大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.ryjiaoyu.com.cn">人民邮电出版社</a> <a class="fri-link-item" target="_blank" href="http://www.ccap.com.cn/">中国农业出版社</a> <a class="fri-link-item" target="_blank" href="http://www.cabp.com.cn/">中国建筑工业出版社</a> <a class="fri-link-item" target="_blank" href="https://www.pmph.com/">人民卫生出版社</a> <a class="fri-link-item" target="_blank" href="http://dutp.dlut.edu.cn">大连理工大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.bitpress.com.cn/">北京理工大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.zzup.cn/">郑州大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.bnump.com/">北京师范大学出版社</a> <a class="fri-link-item" target="_blank" href="https://nkup.nankai.edu.cn/">南开大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.wdp.com.cn/book/bookIndex.action">武汉大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.textbookcenter.cn">北京出版社</a> <a class="fri-link-item" target="_blank" href="http://www.gph.com.cn/">地质出版社</a> <a class="fri-link-item" target="_blank" href="http://www.dufep.cn">东北财经大学出版社有限责任公司</a> <a class="fri-link-item" target="_blank" href="http://www.lawpress.com.cn/">法律出版社有限公司</a> <a class="fri-link-item" target="_blank" href="http://www.castp.cn/">中国农业科学技术出版社</a> <a class="fri-link-item" target="_blank" href="https://press.ustc.edu.cn/">中国科学技术大学出版社</a> <a class="fri-link-item" target="_blank" href="https://www.cqup.com.cn/">重庆大学出版社</a> <a class="fri-link-item" target="_blank" href="http://xdcbs.com/">西南大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.jiaodapress.com.cn/">上海交通大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.waterpub.com.cn/">中国水利水电出版社</a> <a class="fri-link-item" target="_blank" href="http://www.ecnupress.com.cn/">华东师范大学出版社</a> <a class="fri-link-item" target="_blank" href="https://www.fltrp.com/">外语教学与研究出版社</a> <a class="fri-link-item" target="_blank" href="http://www.fudanpress.com/">复旦大学出版社</a> <a class="fri-link-item" target="_blank" href="http://www.cptcm.com/">中国中医药出版社</a> </div> <!--页面底部 start--> <div class="footer"> <div class="footerBox"> <div class="footerTop"> © 2018-2025 新华国采教育网络科技有限责任公司 版权所有 </div> <ul> <li style="width:25%;"> <p>客服热线：010-88362023、010-88361712</p> <p><a target="_blank" href="https://beian.miit.gov.cn/" class="icp_num">京ICP备16053406号</a></p> </li> <li style="width:35%;"> <p>出版物经营许可证：新出发京零字第西160035号</p> <p>京公网安备 11010202007778号<img src="/images/ip.jpg"></p> </li> <li style="width: 40%;"> <p>信息系统安全等级保护（三级）备案证明编号：11010243697-20001</p> <p>增值电信业务经营许可证编号：京B2-20170886</p> </li> </ul> </div> </div> <!--页面底部 end--> </body> </html> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?8c456308ba2e540841c85599c32c7d67"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function () { var script = document.createElement("script"); script.src = "https://log.aijiaocai.cn/static/app/dist/api-v1-fetch.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(script, s); if (script.addEventListener) { script.addEventListener('load', function () { browseLog(); }, false); } else if (script.attachEvent) { script.attachEvent('onreadystatechange', function () { var target = window.event.srcElement; if (target.readyState == 'loaded') { browseLog(); } }); } function browseLog() { var options = {sysCode: 'xhgc.aijiaocai.textbooking.web', sysName: '采选系统PC端', autoBrowse: false}; var info = { operateType: 'browse', userCode: '', realName: '', orgCode: '', content: {login_type: ''} }; var logCenterLogger = new logCenter.Logger(options); logCenterLogger.log(info); } })(); </script>