全国大中专教材网络采选系统 - 新华国采教育网络科技有限责任公司

推荐纸质教材推荐数字资源

HTML5+CSS3+JavaScript网页设计与制作项目教程

￥55.00定价

作者：钱钰

出版时间：2023-04

出版社：西安电子科技大学出版社

以下为《HTML5+CSS3+JavaScript网页设计与制作项目教程》的配套数字资源，这些资源在您购买图书后将免费附送给您：

关闭

基本信息评价

出版社：西安电子科技大学出版社
ISBN：9787560667430
版次：1-1
图书编号：461592
本季征订号：64247238-5
开本：16开
出版时间：2023-04
适用专业：自动化技术、计算机技术
适用分级：高职

内容简介

本书根据计算机相关专业对网页技术的知识能力要求而编写。全书以VS Code为代码编辑器，由浅入深地对网页设计制作中的HTML、CSS及JavaScript三大技术进行了系统的讲解。全书以实际网页设计开发项目为例，介绍了网页设计制作的基本方法及原理，并在完成“项目实施”后，通过“总结提升”和“拓展训练”来引导学生深入学习网页技术，以满足不同专业、不同层次学生对网页技术的需求。
本书内容丰富，图文并茂，项目实用，可作为高职高专院校计算机类专业的教材，也可作为网页设计人员的参考书。

项目1　认识HTML5——布局网页 1
学习目标 1
项目导入 “旅行家——合作伙伴”页面效果展示 1
知识链接 2
一、HTML5概述 2
二、HTML5文档及其基本语法 9
三、HTML文本控制标记 14
四、HTML列表标记 19
五、HTML超链接标记 25
六、图像标记 28
项目实施使用HTML基本标记制作“旅行家——合作伙伴”页面 31
总结提升 HTML5新增标签 32
拓展训练制作“GL美拍”网站——“底部模块-联系方式”HTML效果 38
项目2　认识CSS3——美化网页 40
学习目标 40
项目导入 “旅行家——联系方式”页面效果展示 40
知识链接 41
一、CSS3简介 41
二、CSS核心基础 43
三、文本样式属性 54
四、CSS高级特性 70
项目实施使用CSS + DIV制作“旅行家——联系方式”页面 76
总结提升 CSS3选择器 77
拓展训练制作“GL美拍”网站——“底部模块-联系方式”CSS效果 97
项目3　图像与多媒体的应用——制作精彩的网页 100
学习目标 100
项目导入 “旅行家——欢迎”页面效果展示 100
知识链接 101
一、网页中常见的多媒体格式(音频、视频) 101
二、音频标签及其属性 102
三、视频标签及其属性 105
项目实施使用多媒体标签制作“旅行家——欢迎”界面 110
总结提升 HTML5容器标签 112
拓展训练制作“GL美拍”网站——“视频简介模块”效果 113
项目4　网页布局与元素的精确定位——CSS + DIV的应用 117
学习目标 117
项目导入 “旅行家——住宿”页面效果展示 117
知识链接 118
一、盒子模型及其基本属性 118
二、DIV高级属性 125
三、元素的浮动 143
四、元素的定位 148
项目实施使用CSS + DIV制作“旅行家——住宿”页面 155
总结提升常见页面布局方式 170
拓展训练制作“GL美拍”网站——“用户评价模块”效果 179
项目5　布局交互功能——表单的应用 186
学习目标 186
项目导入 “旅行家——登录注册”页面效果展示 186
知识链接 187
一、表单标签

187
二、输入标签 188
三、文本域标签

196<br />
四、标注(标记)标签<label> 197<br />
五、下拉菜单标签<select> 198<br />
六、选项列表标签<datalist> 199<br />
项目实施  使用表单制作“旅行家——登录注册”页面 201<br />
总结提升  表格 205<br />
拓展训练  制作“GL美拍”网站——“底部模块”效果 209<br />
项目6　让页面更酷炫——CSS3的高级应用 214<br />
学习目标 214<br />
项目导入  “旅行家——攻略”页面效果展示 214<br />
知识链接 215<br />
一、过渡transition 215<br />
二、变形transform 219<br />
项目实施  使用过渡变形制作“旅行家——攻略”页面 230<br />
总结提升  动画animation 240<br />
拓展训练  制作“GL美拍”网站——“地区模块”静态效果 242<br />
项目7　网页交互功能——JavaScript的应用 257<br />
学习目标 257<br />
项目导入  “旅行家——图片轮播”页面效果展示 257<br />
知识链接 258<br />
一、JavaScript简介 258<br />
二、JavaScript的基本语法 260<br />
三、DOM对象 266<br />
四、BOM对象 270<br />
五、事件 273<br />
项目实施  使用JavaScript制作“旅行家——图片轮播”页面 279<br />
总结提升  JSON简介 285<br />
拓展训练  制作“GL美拍”网站——“地区模块”动态效果 287<br />
项目8　网站设计与开发——综合实战 290<br />
项目实施  “GL美拍”网站——“首页”整体效果 290                            </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="4808447">
                        <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>

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

<div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="baidu"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value="">  <input type="submit" id="so360_submit" value="360"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value="">  <input type="submit" id="sogou_submit" value="sougou"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div align="center"><a target="_blank" href="/sitemap.xml">map</a></div></body>
    </html>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://www.elsenhamlodge.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>