新書推薦:
《
冯友兰和青年谈心系列
》
售價:NT$
762.0
《
利他主义的生意:偏爱“非理性”的市场(英国《金融时报》推荐读物!)
》
售價:NT$
352.0
《
认知行为疗法:心理咨询的顶层设计
》
售價:NT$
454.0
《
FANUC工业机器人装调与维修
》
售價:NT$
454.0
《
吕著中国通史
》
售價:NT$
286.0
《
爱琴海的光芒 : 千年古希腊文明
》
售價:NT$
908.0
《
不被他人左右:基于阿德勒心理学的无压力工作法
》
售價:NT$
301.0
《
SDGSAT-1卫星热红外影像图集
》
售價:NT$
2030.0
|
內容簡介: |
本课程提供慕课教程(https:mooc1-1.chaoxing.comcourse200123083.html制作中) 课程将从Web发展史讲起,对Html标签、CSS样式设置作了详细讲解,并涉及了简单的JavaScript脚本应用以及Html5 CSS3新功能的介绍,由易到难、由简到繁,循序渐进地介绍网页前端设计与制作的基础知识与基本技能。
|
關於作者: |
梁莉菁,萍乡学院信息与计算机工程学院,副教授,1969.5。
1987.8从事教学工作至今,一直从事一线教学工作,研究方向:网络多媒体教育技术应用;
|
目錄:
|
第1章网页设计基础知识
【目标任务】
【知识技能】
1.1Web发展史
1.2网页基本概念
1.2.1互联网
1.2.2TCPIP协议
1.2.3万维网
1.2.4超文本传输协议
1.2.5文件传输协议
1.2.6统一资源定位符
1.2.7IP地址
1.2.8域名地址
1.2.9域名系统
1.2.10超文本和超链接
1.2.11网页和网站
1.2.12静态网页与动态网页
1.2.13超文本标记语言
1.2.14层叠样式表
1.2.15JavaScript
1.2.16Web标准
1.3网站开发基本流程
1.4网页设计与制作的主流开发工具与浏览器
【项目实战】
项目11使用记事本等网页制作工具创建最简HTML结构网页
项目12在Dreamweaver中创建站点
【实训作业】
实训任务11创建站点目录结构及第一个HTML网页
实训任务12下载安装多种浏览器和主流开发工具
第2章HTML网页结构基础
【目标任务】
【知识技能】
2.1HTML文档基本格式
2.1.1文档类型声明 ﹤ !doctype html ﹥
2.1.2HTML页面结构
2.1.3文档标签 ﹤ html ﹥ ﹤ html ﹥
2.1.4文档头标签 ﹤ head ﹥ ﹤ head ﹥
2.1.5文件主体标签 ﹤ body ﹥ ﹤ body ﹥
2.1.6文档标题标签 ﹤ title ﹥ ﹤ title ﹥
2.1.7引用外部文件标签 ﹤ link ﹥
2.1.8内嵌样式标签 ﹤ style ﹥ ﹤ style ﹥
2.1.9页面元信息标签 ﹤ meta ﹥
2.1.10页面注释标签
2.1.11标签的属性
2.2HTML文本控制标签及属性
2.2.1标题标签及其属性
2.2.2段落标签及其属性
2.2.3换行标签
2.2.4特殊字符
2.2.5预格式文本
2.2.6水平线标签及其属性
2.2.7文本格式化标签
2.2.8 ﹤ span ﹥ 标签
2.3图像标签及属性
2.3.1 ﹤ img ﹥ 标签基本语法
2.3.2 ﹤ img ﹥ 标签其他属性
2.4超链接标签及属性
2.5列表标签及属性
2.5.1有序列表
2.5.2无序列表
2.5.3定义列表
2.6HTML5新增的语义化结构标签
2.6.1 ﹤ header ﹥ ﹤ header ﹥ 标签
2.6.2 ﹤ nav ﹥ ﹤ nav ﹥ 标签
2.6.3 ﹤ section ﹥ ﹤ section ﹥ 标签
2.6.4 ﹤ article ﹥ ﹤ article ﹥ 标签
2.6.5 ﹤ aside ﹥ ﹤ aside ﹥ 标签
2.6.6 ﹤ footer ﹥ ﹤ footer ﹥ 标签
2.6.7﹤ figure ﹥ ﹤ figure ﹥ 标签与 ﹤ figcaption ﹥ ﹤ figcaption ﹥
标签
【项目实战】
项目 21制作网页设计与制作课程作业网站
【实训作业】
实训任务21制作第2章 HTML网页结构基础案例作业网站
第3章CSS网页样式基础
【目标任务】
【知识技能】
3.1什么是CSS样式
3.2Dreamweaver CC中创建样式表并设置CSS样式的方法
3.2.1认识【CSS样式】面板
3.2.2创建并编辑CCS样式的过程
3.3引入CSS样式表的方法
3.3.1外部样式表
3.3.2内部样式表
3.3.3行内样式
3.3.4CSS样式表的混合使用
3.4CSS样式的语法规则
3.5CSS样式基础选择器
3.5.1标签选择器
3.5.2类选择器
3.5.3ID选择器
3.5.4通配符选择器
3.6常用CSS文本样式
3.6.1fontstyle(字体风格)
3.6.2fontvariant(变体)
3.6.3fontweight(字体粗细)
3.6.4fontsize(字号大小)
3.6.5lineheight(行高)
3.6.6fontfamily(字体)
3.6.7font(综合设置字体样式)
3.6.8color(文本颜色)
3.6.9textdecoration(文本装饰)
3.6.10textalign(水平对齐方式)
3.6.11textindent(首行缩进)
3.7CSS控制列表样式
3.8CSS复合选择器
3.8.1群组选择器
3.8.2标签指定选择器
3.8.3后代选择器
3.8.4子选择器
3.9CSS的继承性
3.10 CSS的优先级
3.10.1外部样式表、内部样式表和行内样式的优先级
3.10.2基础选择器的优先级
3.10.3复合选择器的优先级
3.11CSS的层叠性
3.11.1样式不冲突的层叠
3.11.2样式冲突且存在优先级差别的层叠
3.11.3样式冲突且选择器优先级相同的层叠
3.11.4样式冲突且同一标签运用不同类型选择器的层叠
【项目实战】
项目31百度搜索结果网页局部样式设置
项目32端午节习俗新闻页面
【实训作业】
实训任务31Web前端试学班广告页局部样式设置
实训任务32商品推荐页局部样式设置
第4章CSS网页样式进阶
【目标任务】
【知识技能】
4.1认识盒子模型
4.2盒子模型相关属性
4.2.1宽高属性
4.2.2边框属性
4.2.3内边距属性
4.2.4外边距属性
4.2.5背景属性
4.3元素类型
4.3.1块级元素
4.3.2行内元素
4.3.3行内块元素
4.4元素类型的转换
4.5元素所占空间的计算
4.5.1元素未设置width 和height属性
4.5.2元素设置width 和height属性
4.5.3CSS3新增的 boxsizing 属性
4.6CSS3选择器与常用的样式属性
4.6.1CSS3简介
4.6.2CSS3兄弟选择器
4.6.3CSS3属性选择器
4.6.4CSS3伪类选择器
4.6.5CSS3圆角边框属性和阴影属性
4.6.6CSS3中的颜色设置
4.6.7CSS3中的过渡效果
【项目实战】
项目41利用盒子模型原理制作专题学习模块效果
项目42精灵图技术的运用
项目43仿腾讯IMQQ网页视差背景效果
【实训作业】
实训任务41使用精灵图技术制作淘宝首页局部效果
实训任务42商品展示页局部效果的实现
第5章网页布局基础
【目标任务】
【知识技能】
5.1DIV CSS布局的思路
5.2文档流
5.3Float浮动
5.3.1浮动的基本语法
5.3.2浮动的基本原理
5.3.3清除浮动clear属性
5.3.4子元素浮动,父元素空间不足的情况
5.3.5浮动子元素对未设置高度的父元素的影响及解决办法
5.4overflow属性
5.5定位属性
5.5.1定位属性
5.5.2静态定位
5.5.3相对定位
5.5.4绝对定位
5.5.5固定定位
5.5.6zindex层叠等级属性
【项目实战】
项目51国字型布局网页效果制作
项目52商品广告版块效果制作
【实训作业】
实训任务51新浪微博发言版块制作
实训任务52制作第5章案例作业网站
第6章导航与超链接
【目标任务】
【知识技能】
6.1超链接的类型
6.2超链接的基本语法
6.2.1href属性
6.2.2target属性
6.2.3title属性
6.3电子邮件超链接
6.4文件下载超链接
6.5锚点链接
6.6图像热区超链接
6.7超链接样式的设置
6.8超链接伪类控制超链接
6.9列表技术制作导航
6.9.1纵向一级导航
6.9.2横向一级导航
6.9.3纵向二级导航
6.9.4横向二级导航
【项目实战】
项目61滑动门技术制作一级导航
项目62锚点链接制作类似选项卡侧边栏导航效果
【实训作业】
实训任务61微软商城网站页脚效果制作
实训任务62二级下拉导航菜单的制作
第7章表格及样式设置
【目标任务】
【知识技能】
7.1创建表格
7.2表格的基本语法
7.2.1表格的基本结构
7.2.2HTML表格的表头标签
7.2.3表格相关的HTML标签
7.2.4表格标签的属性
7.2.5合并单元格
7.3表格的样式设置
7.3.1表格的边框折叠样式
7.3.2表格的边框样式
7.3.3表格的背景
7.3.4表格内容的对齐
7.4常见表格的制作
7.4.1常规细线表格的制作
7.4.2隔行变色表格的制作
7.4.3nthchild实现隔行变色
7.4.4仅横线或仅竖线表格
7.4.5鼠标悬停表格效果
【项目实战】
项目71制作中学期末考试成绩表
【实训作业】
实训任务71模拟制作GitHub表格样式效果
实训任务72模拟制作百度万年日历鼠标悬停效果
第8章表单及样式设置
【目标任务】
【知识技能】
8.1创建表单
8.1.1插入表单菜单命令及表单工具组
8.1.2Dreamweaver CC创建表单的方法
8.2表单的基本语法
8.2.1表单标签
8.2.2表单元素
8.3 ﹤ input ﹥ 标签
8.3.1 ﹤ input ﹥ 标签的type类型
8.3.2HTML5 新增的type类型
8.4表单CSS样式的设置
8.4.1表单布局样式
8.4.2表单控件样式
【项目实战】
项目81京东商城的登录表单效果制作
【实训作业】
实训任务81模拟制作网易邮箱登录界面
实训任务82制作客户留言表单
第9章JavaScript基础
【目标任务】
【知识技能】
9.1JavaScript概述
9.1.1JavaScript在网页中的作用
9.1.2在网页中应用JavaScript
9.2JavaScript的语法基础
9.2.1JavaScript的代码格式
9.2.2JavaScript输出
9.2.3JavaScript的数据类型
9.2.4JavaScript运算符
9.2.5条件语句
9.2.6循环语句
9.3JavaScript对象
9.3.1JavaScript 对象
9.3.2BOM浏览器对象模型
9.3.3DOM文档对象模型
9.4JavaScript 函数
9.4.1JavaScript 函数
9.4.2函数的调用
9.4.3JavaScript 事件
【项目实战】
项目91仿淘宝首页焦点轮播图效果制作
项目92图片循环滚动仿跑马灯效果制作
【实训作业】
实训任务91仿焦点新闻效果制作纵向图片新闻循环滚动
实训任务92制作本章案例作业网站
第10章响应式网页布局基础
【目标任务】
【知识技能】
10.1响应式Web设计概述
10.2固定布局
10.3百分比布局
10.4相对字体大小
10.5弹性布局
10.6响应式图片
10.7弹性盒子
10.7.1设置父元素的display属性值为flex
10.7.2justifycontent属性
10.7.3alignitems属性
10.7.4flexdirection属性
10.7.5flexwrap属性
10.7.6flex属性
10.7.7order属性
10.7.8flexflow属性
10.8视口与媒体查询
10.8.1视口
10.8.2媒体查询
10.9Bootstrap响应式网页设计
10.9.1Bootstrap获取与安装
10.9.2Bootstrap栅格系统
10.9.3Bootstrap组件
10.9.4JavaScript插件
【项目实战】
项目101利用百分比与固定布局相结合实现通栏布局
项目102利用媒体查询制作《福尔摩斯历险记》响应式网页
项目103Bootstrap网页布局案例Flash云课堂网站首页
【实训作业】
实训任务101制作Web前端学习网响应式网页框架
实训任务102利用Bootstrap布局技术重构作业网站首页
参考文献
|
內容試閱:
|
本书是江西省省级精品在线开放课程网页设计的配套教材,适合零基础并对网页设计与制作技术感兴趣的读者学习使用,适合作为网页设计制作类或Web前端设计开发类课程的入门教材,可供高等院校相关专业及职业技术培训机构选用。
随着互联网技术的飞速发展以及移动互联时代的强势到来,互联网 已经深入到了各行各业的各个领域。网页作为信息的重要载体,其设计与制作技术在这个时代显得愈加重要。网页设计与制作类课程是工学学科计算机类多个专业的专业核心课程,也是各高校非计算机类专业学生喜爱的公共选修课程之一,但是网页设计与制作类课程涉及的技术繁杂, 技术更新快,综合性也很强,是当今社会职场热门并且人才需求量极大的一门实践性很强的课程,因此教学工作必须与时俱进,难度大也富有挑战性。
针对高校网页类教材及课程教学中出现的一些问题,在教材建设及课程建设方面我们做了一些积极的尝试与改革,并付诸实践取得了较好的成绩。本书正是在作者和课程团队成员们的共同努力下,博采众家之长,为努力使高校课堂教学紧跟市场企业需求方向而打造的。本书特色主要有以下三方面:
1 本书配套的教学资源丰富齐全,拥有完整的省级精品在线开放课程配套资源。重点案例均有视频教程讲解,教学大纲、PPT课件、教案、题库与考试等教学资源齐备。
2 全书采用任务驱动方式,将重要知识点及基本技能要求嵌入到各个案例任务中,并且教学案例大多从淘宝、京东、腾讯、新浪等大型成熟网站中精心挑选出经典应用案例来诠释各知识点与必备技能。本书不仅介绍了传统的网页开发工具Dreamweaver的基本用法,而且采用了当下流行的主流开发工具之一HBuilder 作为网页开发工具,力求教学内容贴近职场需求,力求充分调动学生的学习主动性。
3 全书知识体系结构完整,脉络清晰,涵盖了网页设计与制作技术的入门必备基础知识与技能。重点阐述HTML元素、CSS样式、网页布局技术、导航与超链接、表格与表单等基础知识与技能,包括Html5的语义化标签结构和CSS3常用样式设置,以及JavaScript基础应用和响应式网页布局技术相关媒体查询、Bootstrap框架应用等实用技术的介绍。
本书分10个章节。第1章 网页设计基础知识,从Web发展史讲起,对网页基本术语意义、网站开发基本流程、浏览器及浏览器开发者工具作了相关介绍; 第2章 HTML网页结构基础篇,重点介绍HTML文档基本结构及HTML元素基本语法,包括HTML5语义化标签结构基础; 第3章 CSS网页设计基础篇和第4章 CSS网页设计进阶篇,重点介绍CSS样式盒子模型、选择器、背景边框样式包括CSS3中的常用样式设置方法,火力全开用网页常见的模块布局讲解盒模型,用淘宝首页局部排版讲解精灵图技术,用腾讯IMQQ网页视差特效讲解背景定位样式; 第5章 网页布局基础,用新浪微博发言版块案例继续攻克布局定位样式的设置原理及应用; 第6章 导航与超链接,依次介绍纵向、横向、带下拉菜单的导航栏和应用滑动门技术导航栏的制作; 第7章 表格及样式设置,介绍网页中常见的细线表格及隔行变色、鼠标悬停等效果表格的制作; 第8章 表单及样式设置,掌握表单及控件的用法及样式设置,包括HTML5中新增的表单控件和属性用法,挑战京东账户登录表单效果的制作; 第9章 JavaScript基础,用淘宝焦点轮播图、图片跑马灯效果案例来组织JavaScript基础知识; 第10章 响应式网页布局基础,简单介绍了弹性布局、视口与媒体查询,以及Bootstrap框架的基础知识,慕课视频教程中还增加HTML5 Canvas动画和CSS3动画的知识,为有兴趣、有能力的同学们指明了下一步努力的方向。
本书由萍乡学院梁莉菁副教授和衡水学院刘巧丽副教授共同撰写完成,本书配套的慕课资源建设由萍乡学院梁莉菁副教授主持,协同其精品课程教学团队成员廖德伟、邱望等老师一起完成制作,该课程已被认定为江西省省级精品在线开放课程,是江西省所有高校的公共选修学分课程。对于选用了本书作为教材的高校教师及其他读者,可以在清华大学出版社官方网站获取全书配套的案例源代码、教学大纲、进度计划、教案及PPT课件等教学资源,也可以使用江西高校课程资源共享平台网络教学平台中的网页设计慕课课程进行网络教学与学习。
本书在编撰过程和课程建设过程中得到了萍乡学院和衡水学院的各级领导和同事们的大力支持与帮助,在此表示诚挚的感谢,尤其感谢萍乡学院信息与计算机工程学院的同事们,他们对本书的编排与撰写提出了许多宝贵的意见与建议,同时也感谢至亲的家人们为我们忙碌于繁杂的工作提供了无私的帮助和轻松的环境。
由于编者水平有限,书中难免有疏漏之处,敬请各位专家和读者批评指正,不胜感激。感谢您使用本书,顺祝学习愉快。
梁莉菁
2020年10月于北京
|
|