全新正版书籍,24小时发货,可开发票。
¥ 42.1 7.7折 ¥ 55 全新
库存4件
作者张娅,钱新杰 主编
出版社中国轻工业出版社
ISBN9787518432189
出版时间2021-02
装帧平装
开本16开
定价55元
货号29205323
上书时间2024-12-28
随着互联网的发展和Web2.0的广泛应用,标准化的设计方式正逐取代传统的布局方式,Web网页开发标准的特点是采用HTML CSS JavaScript技术将网页的内容、外观样式和动态效果分离,减少代码量,便于代码的分工设计和代码重用。
本书作为Web网页开发基础课程,是一门入门的技术课程。本教材采用“项目驱动式”的教学方式,将理论知识和实际案例相结合,利用通俗易懂的语言详细介绍了使用HTML、CSS及JavaScript进行网页制作的各方面知识点和技巧。从技术的原理出发,同时以示例、实例的形式对各知识点进行详细讲解,并致力于将知识点融入实际项目的开发中。本书的特色是结合知识点精心设计了相关案例,将基础知识巧妙地融入案例中,使读者在实现案例效果的同时,不知不觉掌握基础知识。
本教材以项目化的方式进行讲解,共分为十二个项目,接下来分别对每个项目进行简单地介绍。
项目一主要介绍HTML网页的基础知识,通过本节学习,读者可以简单认识网页,了解HTML,熟悉Dreamweaver工具的基本操作,掌握网站和网页的创建。要求初学者掌握HTML文档的基本格式,能够正确书写简单规范的HTML网页代码,掌握表单控件的属性设置。
项目二-七主要为CSS基础,是网页制作的核心。只有掌握好这部分内容,才能在以后的网页制作过程中随意地控制各种网页元素。
项目八为网页制作过程中常用的表格和几种常见框架。
项目九、十主要讲解JavaScript基础和事件处理。掌握JavaScript内容,帮助读者更好实现网页的交互效果。
在学习过程中,读者一定要亲自实践教材中的案例代码。建议读者在学习过程中,一定要多思考,理清思路,认真分析问题发生的原因,并在问题解决后多总结。
本书以任务驱动教学法为主线,以应用为目的,以具体的项目任务为载体,主要项目任务有:认识工业机器人、工业机器人轨迹编程、工业机器人搬运编程、工业机器人机床上下料编程、工业机器人技能鉴定站编程编程与操作、工业机器人技术应用大赛编程。本书可作为高等职业院校机电一体化专业和工业机器人教材,也可作为电气设备安装与维修和机电设备安装与维修岗位培训教材。
本书以任务驱动教学法为主线,以应用为目的,以具体的项目任务为载体,主要项目任务有:认识工业机器人、工业机器人轨迹编程、工业机器人搬运编程、工业机器人机床上下料编程、工业机器人技能鉴定站编程编程与操作、工业机器人技术应用大赛编程。本书可作为高等职业院校机电一体化专业和工业机器人教材,也可作为电气设备安装与维修和机电设备安装与维修岗位培训教材。
张娅,宜宾职业技术学院技术技能培训中心主任,副教授,大数据技术与应用技能大赛省级优秀指导教师、市级优秀教师。省级精品课程《E 创新创业教育》主持人。
前言
项目一 HTML基础概念
1.1 初识网页
1.2 文本编辑
项目二 HTML表单
2.1简单的网页
2.2用户登录界面
项目三 浮动与定位
3.1梅兰竹菊
3.2常规页面布局
3.3常规页面布局
项目四 图像与超链接
4.1 插入图像
4.2 超链接
项目五 列表与超链接
5.1个人主页列表
5.2手机展示
5.3列表菜单
5.4网页下拉菜单列表
5.5学习网页菜单
项目六 CSS基础
6.1古诗欣赏
6.2商品爆款特卖页面
6.3商品抢购页面
项目七 CSS盒子模型
7.1购物商城产品规格效果
7.2用户中心
7.3实现登录页面插入背景图片
7.4 实现购物商城分类板块
项目八 表格与框架
8.1 表格
8.2框架
8.3 框架集标记<frameset>
8.4 <iframe>内嵌框架
项目九 JavaScript基础
9.1 显示卡通图片
9.2下拉菜单
项目十 JavaScript事件处理
10.1秒杀
10.2简单的计算器
10.3简单注册验证
本书以任务驱动教学法为主线,以应用为目的,以具体的项目任务为载体,主要项目任务有:认识工业机器人、工业机器人轨迹编程、工业机器人搬运编程、工业机器人机床上下料编程、工业机器人技能鉴定站编程编程与操作、工业机器人技术应用大赛编程。本书可作为高等职业院校机电一体化专业和工业机器人教材,也可作为电气设备安装与维修和机电设备安装与维修岗位培训教材。
张娅,宜宾职业技术学院技术技能培训中心主任,副教授,大数据技术与应用技能大赛省级优秀指导教师、市级优秀教师。省级精品课程《E 创新创业教育》主持人。
项目一 HTML基础概念
学习目标:
了解网页的构成,理解网站和网页的含义。
熟悉Dreamweaver工具的基本操作,掌握网站和网页的创建。
掌握HTML文档的基本格式,能够正确书写简单规范的HTML网页代码。
掌握HTML标题标记、段落标记和文字标记的应用,可以合理的使用它们定义网页元素。
掌握HTML水平线标记的应用,可以合理设置水平线标记的属性。
HTML是制作网页的基础语言,是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具,但是这些工具生成的代码仍然是以HTML为基础的,因此学习HTML代码对设计网页非常重要。
1.1 初识网页
案例描述
利用Dreamweaver工具,建立个站点,并创建个网页,设计图如图1-1所示。
图1-1 个网页设计图
●知识引入
(1)认识网页
为了让初学者更好的认识网页,了解网页的构成,首先看一下宜宾职业技术?院官方网站的首页。打开IE浏览器,在地址栏中输入http://www.ybzy.cn,按下回车键或者按“转至”按钮,这时浏览器窗口中将显示某职业技术学院首页的内容,如图1-2所示。
图1-2 某职业技术学院首页效果图
从图1-2可以看到,一个网页内容主要包括图片、文字,另外还有音频、视频、动画等内容。为便于后期代码学习,在浏览器窗口中单击鼠标右键,选择“查看源文件”,弹出当前网页的源代码,具体如图1-3所示。
图1-3 某职业技术学院首页源代码
图1-3是一个纯文本文件,图1-2是图1-3的代码经过浏览器解析后得到的结果。
(2)名词解释
1)网站
网站是指在因特网上根据一定的规则,使用HTML(标准通用标记语言下的一个应用)等工具制作的用于展示特定内容相关网页的集合。简单地说,网站是一种沟通工具,人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站,获取自己需要的资讯或者享受网络服务。
2)网页
网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页主要由三部分组成,结构、表现和行为。对应的网站标准也分三个方面:结构化标准语言,主要包括XHTML和XML;表现标准语言,主要包括CSS;行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C组织起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
(3)HTML简介
HTML是Hyper Text Markup Language(超文本语言)的英文缩写,它主要用来在网页中显示相关内容。HTML和其他语言不同,它是一门解释性语言,在运行HTML程序前不需要编译。
同时HTML还是一门标记语言。将标记和要显示的内容结合就编写了一个HTML程序。可以通过对标记的学习来学习HTML语言。
1)结构化标记
对于每一个HTML文件而言,它都有一个基本的结构。结构化标记就是用来描述基本结构的标记,它由架构标记和注释标记组成。
2)架构标记
在HTML中,有四种架构标记,表1-1中给出了这四种架构标记。
表1-1 架构标记
开始标记 结束标记 解释
<html> </html> 外层标记
<head> </head> 页面头标记
<title> </title> 页面标题标记
<body> </body> 页面体标记
这些架构标记都是很容易理解的。由于它们表示的含义不同,又可以把<head></head>称为头部标记,把<body></body>称为身体标记。
<html>
<head>
<title>我的个HTML页面</title>
</head>
<body>
注意:body元素的内容会显示在浏览器中,title元素的内容会显示在浏览器的标题栏中。
</body>
</html>
(4) Dreamweaver工具简介
1)Dreamweaver界面介绍
Dreamweaver不仅是一款优秀的所见即所得的网页设计软件,它还是一款集设计和编码于一体的软件,你可以单独使用其中的一种方式来开发你的网页,也可以两个同时使用。熟练掌握Dreamweaver软件的使用,无论是设计师还是工程师,它都能有效提高你的工作效率。如图1-4所示为Dreamweaver启动界面。
图1-4 Dreamweaver启动界面
在图1-4中,点击“HTML”页面,即可创建一个HTML网页,并进入相应操作界面,如图1-5所示。
图1-5 Dreamweaver操作界面
图1-6 Dreamweaver操作界面布局图
图1-6是Dreamweaver操作界面布局图,其中主要由菜单栏、插入栏、文档工具栏、文档窗口、属性面板、浮动窗口这些工具构成,这些工具可以根据自己的需要调节显示与否。菜单栏上的每个菜单选项下面都有一个菜单列表,每一行的菜单命令都可以进行一些相关的命令或属性的设置;插入栏可以完成不同对象的插入;文档工具栏能对文档进行相应操作。文档窗口可根据文档工具中选择的不同视图方式,呈现不同效果,同时也是直接输入页面内容或HTML代码等的位置;下端的属性面板显示当前选定的对象或者是文本的属性,也可以直接进行修改;右端的浮动面板可以根据需要展开或折叠。
2)Dreamweaver初始化设置
为了使初学者更好的认识Dreamweaver工具,更加充分的利用Dreamweaver带来的便利,在使用Dreamweaver进行网页设计前,需要对Dreamweaver进行初始化设置。首行为了让工作区的布局一目了然,可以按图1-7工作区布局进行设置,将工作区布局选择为“经典”;其次为了设置新建文档的默认类型、浏览页面默认浏览器、代码输入提示等,可以通过单击菜单栏上的“编辑”下的“参数”,打开如图1-8所示的参数?话框进行相应设置。
图1-7 工作区布局图
图1-8 参数设?对话框
3)Dreamweaver站点管理
为了将需要展示的特定内容全部集中在一起,方便后期的网站发布,在建立网页之前,需要先建立站点。在Dreamweaver中,首次建立站点选择菜单栏?的“站点”下的“新建?”命令,打开如图1-9所示的对话框进行设置。
图1-9 站点建立对话框
对于初学者,一般将站点搭建在本地机上,则只需在图1-9中设置站点名称,如将站点名称设置为“我的个站点”,在本地站点文件夹中设置当前站点在本地磁盘上的位置,如将所有网站内存存在D盘要下的“实例”文件夹下,则本地站点文件夹选择或设置为“D:\实例\”。设置完成点“保存”按钮,即完成站点的建立。
当站点建立好后如果需要修改,则可以单击菜单栏上的站点,选择“管理站点”后打开如图1-10所示的站点管理窗口进行。在站点管理窗口中,选中要修改的站点,直接双击,再次打开图1-9所示的对话框进行修改后保存即可。
图1-10 站点管理窗口
至此,便可以开始网页的创建了。
— 没有更多了 —
以下为对购买帮助不大的评价