关于我们
![]() ![]() |
HTML5+CSS3网页设计与布局模式项目教程 网页排版与网页布局是前端开发的核心工作,是Web界面与后端数据的纽带。本书以前端工程师岗位工作任务为起点,循序渐进,以 HTML5、CSS3、JavaScript及jQuery为技术支撑,以WebStorm为开发环境,将网页前端开发过程的任务规范化、模块化和组件化。全书设计了文本排版、Web字体图标、图片排版、列表排版、表格排版、表单排版、按钮、选项卡、轮播图排版、下拉菜单、浮动布局、流式布局、弹性布局、定位布局、CSS3多列布局、响应式页面排版、前端框架Bootstrap等十余个工作任务,在具体工作任务中,按任务导入任务目标核心知识任务实施强化训练5步来组织教学内容和设计教学过程,注重梳理强关联的知识和技能,提炼设计模式,直达网页排版和布局的核心和工作机制,兼顾教师项目教学组织和学生自主学习的双重需求,以期提升学习者对前端技术的理解力和应用能力,以便更好地适应前端项目需求的千变万化。 教材突出职业人才培养的核心知识和核心技能,主要借鉴学习积极性理念、国内高职教学研究成果,并融入广东省高职教育品牌专业和广东省高职教育示范性专业数字媒体应用技术专业课程建设成果,融入作者近十余年的课程教学经验和教研教改成果,以培养前端开发能力为中心,承上启下,既注重整合和梳理学习者现有技能和知识结构,又兼顾学习者今后学习全栈开发的基础需求,工作过程指导明确细致,知识拓展必需够用,力求深入浅出、循序渐进地将庞杂的Web技术与Web艺术同读者交流分享。 本书主要面向职业院校的数字媒体应用技术专业、数字媒体艺术设计专业、视觉传达、计算机应用、教育技术学、新闻学、传播学等专业,作为《网站建设》、《网页设计与制作》、《Web前端开发》等课程的教材和参考书,也可供企业信息化培训和培训机构Web技术相关模块作为培训教材使用。 在作者近十余年的Web技术课程教学实践中,每逢在网上书店或者实体书店为新学期的课程选定教材时,面对琳琅满目的前端开发图书时,感激和期待便油然而生。感激有这么多技术大伽、一线教师、从业人员关注和研究这个领域,并不辞劳苦地分享各自的研究、开发实践和教学心得。与此同时,Web技术类的图书越多,难免我的期待越高,期望这次总应该能找到符合我们专业的教材,可当翻阅完了书架上所有相关图书时,难免丝丝失望和无奈,现有图书多以HTML5、CSS3、JavaScript技术罗列为主导,又或者以某个软件的功能模块为主导,多侧重于介绍Web技术孤立的知识和技术,没能融入前端开发工作过程任务间的衔接和工作情境,对初学者认识和实践中的误区没有给予指导解惑,而不是以培养学习者前端开发能力的为主导,不是以培养学习者透析前端开发模式为主导,同时现有教材也忽视了教师组织课堂教学的需要,没有开展教与学过程分析,没有兼顾好教学内容组织和教学过程组织,给教师教学设计和学生能力和知识的构建没有做好铺垫,教师不好用,学生不乐意学。由此感慨等一本符合自己课程需求的教材怎么会要这么久,难道真的要一万年吗?2016年10月26日~28日,工业和信息化职业教育教学指导委员会计算机专指委在大连召开数字媒体应用技术专业建设研讨会,研讨会由大连东软信息学院、东软电子出版社承办,研讨会非常成功,来自全国的数字媒体类参会人员交流的心得,提出了各自的期待和需求,出版社领导和编辑鼓励大家结合课程教学需求开发配套教材和资源,由此激发了我编著此本的决心和奢求。 我的期望在于,以学习者胜任前端工程师岗位工作任务为目标,循序渐进,掌握HTML5、CSS3、JavaScript、jQuery等技术综合应用,熟悉WebStorm开发环境,适应网页前端开发工作的规范化、模块化和组件化岗位要求。以任务导入激发学习者学习积极性,以工作过程必需的任务目标维持学习者的学习积极性,以核心知识帮助学习构建自己新的认知结构,任务实施以建立项目、编写HTML、编写CSS和浏览器测试为工作过程,详尽地的指导学习者的前端开发能力实践,以强化训练提升学生的知识和能力的迁移能力,期待这种设计和尝试,真正让教师好用,学生乐意学。 本书得到了广东省高职教育品牌专业项目的经费支持,企业一线的前端开发人员邱景生、杨起捷、黄亮等参与了项目任务设计和并给予了全程指导,刘琳、宁艳也提出了很多宝贵建议,全书由赵建保负责整体设计、主体编著和统稿,参与编著的人员有陆丽纯、邓梦佳、蒋国才、钟晓妮。大连东软电子出版社的领导和编辑卫杲旻、李卓超老师对本书的整体设计和编写提供了宝贵的建议和指导,在此表示衷心的感谢。本书涉及到的主要软件及资源有WebStorm、jQuery、Bootstrap等,请在学习前自行下载或购买这些软件,并根据软件向导完成安装。本书配套素材资源请按出版社指引下载。 由于IT发展迅猛,作者项目实践和知识视野有限,经验不够丰富,书中不足之处在所难免,垦请读者提出宝贵的意见和建议。联系方式(E-mail):mpcer@163.com目录 任务1 搭建Web前端开发环境... 13 1.1 任务导入... 13 1.2 任务目标... 13 1.3 核心知识... 13 1.3.1 网页访问机制... 13 1.3.2 浏览器市场份额... 14 1.3.3 浏览器内核及渲染过程... 15 1.3.4 PHP Web服务器组件... 16 1.3.5 Web服务器启动失败原因分析... 16 1.3.6 移动前端开发环境网络拓扑结构... 17 1.3.7 WebStorm优势... 17 1.3.8 EMMET语法... 17 1.4 任务实施... 18 1.4.1 操作系统版本及位数识别... 18 1.4.2 Chrome浏览器... 19 1.4.3 搭建Web服务器... 22 1.4.4 WebStorm.. 26 1.4.5 移动端测试环境... 32 1.5 强化训练... 33 任务2 编写网页模板... 34 2.1 任务导入... 34 2.2 任务目标... 34 2.3 核心知识... 35 2.3.1 Web标准... 35 2.3.2 Web项目结构... 35 2.3.3 通用规范... 36 2.3.4 HTML规范... 37 2.3.5 CSS命名规范... 39 2.3.6 JS规范... 44 2.3.7 图像规范... 45 2.3.8 DOCTYPE(文档类型)... 45 2.3.9 meta. 45 2.3.10 favicon. 46 2.3.11 CSS概述... 46 2.3.12 CSS 语法... 47 2.3.13 CSS存在方式... 47 2.3.14 CSS继承与优先级规则... 49 2.3.15 CSS3新增功能... 49 2.3.16 CSS3选择器类型... 50 2.3.17 链接JS. 52 2.3.18 HTML页面模板... 53 2.4 任务实施... 53 2.4.1 建立项目... 53 2.4.2 编写HTML文件... 54 2.4.3 编写CSS样式... 56 2.4.4 编写JS脚本... 60 2.4.5 浏览器测试... 61 2.5 强化训练... 62 任务3 文本排版... 63 3.1 任务导入... 63 3.2 任务目标... 63 3.3 核心知识... 64 3.3.1 元素默认样式属性值... 64 3.3.2 浏览器默认样式... 65 3.3.3 字体属性... 66 3.3.4 字族font-family. 66 3.3.5 字体大小font-size. 69 3.3.6 字体变形font-variant 71 3.3.7 字体样式font-style. 71 3.3.8 字体粗细font-weight 71 3.3.9 字体属性font 72 3.3.10 文本属性text 74 3.3.11 文本颜色color 75 3.3.12 颜色模式... 75 3.3.13 上标(sup)下标(sub) 77 3.3.14 文本效果text-decoration. 77 3.3.15 字母间距letter-spacing. 77 3.3.16 单词间距word-spacing. 77 3.3.17 空白white-space. 78 3.3.18 文本换行word-wrap. 78 3.3.19 文本换行word-break. 79 3.3.20 文本缩进text-indent 79 3.3.21 文本对齐text-align. 80 3.3.22 垂直对齐vertical-align. 80 3.3.23 文本阴影text-shadow.. 81 3.3.24 溢出文本text-overflow.. 83 3.3.25 文字方向direction. 84 3.3.26 行高line-height 84 3.4 任务实施... 87 3.4.1 建立项目... 87 3.4.2 编写HTML文件... 87 3.4.3 编写CSS样式... 88 3.4.4 浏览器测试... 90 3.5 强化训练... 90 任务4 Web字体图标... 90 4.1 任务导入... 90 4.2 任务目标... 91 4.3 核心知识... 91 4.3.1 Sprite图标的缺陷... 91 4.3.2 字体图标... 92 4.3.3 Font Awesome. 92 4.3.4 Glyphicons 93 4.3.5 CSS content 属性... 94 4.3.6 字体图标定义... 94 4.3.7 字体图标用法... 96 4.4 任务实施... 97 4.4.1 建立项目... 97 4.4.2 编写HTML文件... 97 4.4.3 编写CSS样式... 97 4.4.4 浏览器测试... 99 4.5 强化训练... 99 任务5 图片排版... 99 5.1 任务导入... 99 5.2 任务目标... 100 5.3 核心知识... 101 5.3.1 图片来源... 101 5.3.2 图像质量评价... 101 5.3.3 img标记... 103 5.3.4 网页图片4大格式... 103 5.3.5 figure与figcaption. 105 5.3.6 CSS控制图片大小... 106 5.3.7 CSS图片左右对齐... 106 5.3.8 CSS图片居中对齐... 106 5.3.9 CSS响应式图片... 106 5.3.10 CSS图像风格样式... 107 5.3.11 叠加式图片标题排版... 107 5.3.12 CSS精灵图... 109 5.3.13 图片阴影(box-shadow)... 110 5.3.14 CSS3的圆角(border-radius)... 111 5.4 任务实施... 112 5.4.1 建立项目... 112 5.4.2 编写HTML文件... 113 5.4.3 编写CSS样式... 114 5.4.4 浏览器测试... 117 5.5 强化训练... 117 任务6 列表排版... 118 6.1 任务导入... 118 6.2 任务目标... 119 6.3 核心知识... 119 6.3.1 HTML列表类型... 119 6.3.2 嵌套列表... 120 6.3.3 列表HTML结构... 120 6.3.4 list-style-type属性... 121 6.3.5 list-style-image属性... 122 6.3.6 list-style-position属性... 122 6.3.7 列表默认样式... 122 6.3.8 自定义列表符号... 123 6.4 任务实施... 124 6.4.1 建立项目... 124 6.4.2 编写HTML文件... 125 6.4.3 编写CSS样式... 127 6.4.4 浏览器测试... 128 6.5 强化训练... 128 任务7 表格排版... 129 7.1 任务导入... 129 7.2 任务目标... 130 7.3 核心知识... 130 7.3.1 表格HTML结构... 130 7.3.2 表格的层次结构... 131 7.3.3 行合并和列合并... 132 7.3.4 表格删除和隐藏... 133 7.3.5 边框border 134 7.3.6 表格边框合并与分离... 135 7.3.7 表格对齐... 136 7.3.8 条纹表格... 136 7.3.9 悬停表格... 136 7.4 任务实施... 137 7.4.1 建立项目... 137 7.4.2 编写HTML文件... 137 7.4.3 编写CSS样式... 138 7.4.4 浏览器测试... 139 7.5 强化训练... 140 任务8 表单排版... 141 8.1 任务导入... 141 8.2 任务目标... 141 8.3 核心知识... 142 8.3.1 表单工作原理... 142 8.3.2 form标签... 142 8.3.3 文本框(input)... 143 8.3.4 文本域(textarea)... 145 8.3.5 选择框(select)... 145 8.3.6 按钮... 146 8.3.7 HTML5表单结构... 146 8.3.8 表单控件大小... 147 8.4 任务实施... 148 8.4.1 建立项目... 148 8.4.2 编写HTML文件... 149 8.4.3 编写CSS样式... 151 8.4.4 编写JS脚本... 155 8.4.5 浏览器测试... 156 8.5 强化训练... 158 任务9 按钮... 158 9.1 任务导入... 158 9.2 任务目标... 159 9.3 核心知识... 159 9.3.1 button标签与属性... 159 9.3.2 按钮基础样式... 160 9.3.3 原始按钮外观... 160 9.3.4 按钮大小... 161 9.3.5 按钮状态... 162 9.3.6 CSS3 渐变Gradient 162 9.3.7 阴影box-shadow.. 166 9.3.8 圆角border-radius 166 9.4 任务实施... 167 9.4.1 建立项目... 167 9.4.2 编写HTML文件... 167 9.4.3 编写CSS样式... 168 9.4.4 浏览器测试... 170 9.5 强化训练... 170 任务10 选项卡Tab. 171 10.1 任务导入... 171 10.2 任务目标... 172 10.3 核心知识... 172 10.3.1 选项卡HTML模型... 172 10.3.2 重置无序列表ul属性... 173 10.3.3 浮动定位float 173 10.3.4 绝对定位absolute. 173 10.3.5 选项卡切换原理... 174 10.4 任务实施... 174 10.4.1 建立项目... 174 10.4.2 编写HTML文件... 175 10.4.3 编写CSS样式... 177 10.4.4 编写JS脚本... 179 10.4.5 浏览器测试... 179 10.5 强化训练... 180 任务11 轮播图排版... 181 11.1 任务导入... 181 11.2 任务目标... 182 11.3 核心知识... 182 11.3.1 轮播图结构模型... 182 11.3.2 轮播图HTML结构... 183 11.3.3 轮播的JS实现... 184 11.4 任务实施... 184 11.4.1 建立项目... 184 11.4.2 编写HTML文件... 184 11.4.3 编写CSS样式... 186 11.4.4 编写JS脚本... 188 11.4.5 浏览器测试... 190 11.5 强化训练... 190 任务12 下拉菜单... 190 12.1 任务导入... 190 12.2 任务目标... 191 12.3 核心知识... 191 12.3.1 全局导航... 191 12.3.2 多级下拉菜单结构... 191 12.3.3 导航菜单层次结构... 192 12.3.4 inlinke-block. 193 12.3.5 元素垂直居中... 193 12.3.6 box-shadow的理解... 193 12.3.7 绘制三角形图标... 194 12.3.8 超链接... 196 12.3.9 绝对地址和相对地址... 198 12.3.10 链接目标target 199 12.4 任务实施... 199 12.4.1 建立项目... 199 12.4.2 编写HTML文件... 200 12.4.3 编写CSS样式... 202 12.4.4 浏览器测试... 208 12.5 强化训练... 209 任务13 浮动布局... 209 13.1 任务导入... 209 13.2 任务目标... 210 13.3 核心知识... 210 13.3.1 盒子模型... 210 13.3.2 内边距padding. 213 13.3.3 外边距margin. 213 13.3.4 box-sizing. 216 13.3.5 显示类型display. 216 13.3.6 div嵌套... 217 13.3.7 id与class 217 13.3.8 标准文档流... 218 13.3.9 浮动float 218 13.3.10 清除clear 220 13.3.11 溢出(overflow)... 222 13.3.12 iframe(内联框架) 222 13.4 任务实施... 223 13.4.1 建立项目... 223 13.4.2 编写HTML文件... 223 13.4.3 编写CSS样式... 225 13.4.4 浏览器测试... 226 13.5 强化训练... 227 任务14 流式布局... 227 14.1 任务导入... 227 14.2 任务目标... 228 14.3 核心知识... 228 14.3.1 固定宽度布局... 228 14.3.2 流式布局... 229 14.4 任务实施... 229 14.4.1 建立项目... 229 14.4.2 编写HTML文件... 230 14.4.3 编写CSS样式... 232 14.4.4 浏览器测试... 233 14.5 强化训练... 234 任务15 弹性布局... 234 15.1 任务导入... 234 15.2 任务目标... 234 15.3 核心知识... 235 15.3.1 弹性布局... 235 15.3.2 弹性布局存在的问题... 235 15.4 任务实施... 235 15.4.1 建立项目... 235 15.4.2 编写HTML文件... 235 15.4.3 编写CSS样式... 237 15.4.4 浏览器测试... 238 15.5 强化训练... 239 任务16 定位布局... 240 16.1 任务导入... 240 16.2 任务目标... 240 16.3 核心知识... 241 16.3.1 定位(positioning)... 241 16.3.2 相对定位relative. 241 16.3.3 绝对定位absolute. 241 16.3.4 固定定位fixed. 242 16.3.5 z-index深度... 242 16.3.6 包含块... 243 16.4 任务实施... 243 16.4.1 建立项目... 243 16.4.2 编写HTML文件... 244 16.4.3 编写CSS样式... 247 16.4.4 浏览器测试... 249 16.5 强化训练... 249 任务17 CSS3多列布局... 249 17.1 任务导入... 249 17.2 任务目标... 250 17.3 核心知识... 251 17.3.1 多列布局原理... 251 17.3.2 columns属性... 251 17.3.3 列宽度column-width. 251 17.3.4 列数column-count 251 17.3.5 列间距column-gap. 252 17.3.6 column-rule. 252 17.3.7 column-span. 252 17.3.8 浏览器前缀... 253 17.4 任务实施... 253 17.4.1 建立项目... 253 17.4.2 编写HTML文件... 254 17.4.3 编写CSS样式... 255 17.4.4 浏览器测试... 257 17.5 强化训练... 257 任务18 响应式页面排版... 258 18.1 任务导入... 258 18.2 任务目标... 258 18.3 核心知识... 258 18.3.1 响应式布局概述... 258 18.3.2 响应式布局关键技术... 259 18.3.3 响应式布局技巧... 262 18.3.4 Viewport定义... 263 18.3.5 响应式设计流程... 263 18.4 任务实施... 264 18.4.1 建立项目... 264 18.4.2 编写HTML文件... 264 18.4.3 编写CSS样式... 266 18.4.4 浏览器测试... 271 18.5 强化训练... 272 任务19 前端框架BootStrap. 273 19.1 任务导入... 273 19.2 任务目标... 273 19.3 核心知识... 274 19.3.1 jQuery. 274 19.3.2 Bootstrap. 274 19.3.3 CDN.. 274 19.3.4 Bootstrap网络系统... 275 19.3.5 Bootstrap媒体查询... 276 19.4 任务实施... 277 19.4.1 下载BootStrap. 277 19.4.2 建立项目... 279 19.4.3 编写HTML文件... 279 19.4.4 编写CSS样式... 284 19.4.5 浏览器测试... 286 19.5 强化训练... 286
你还可能感兴趣
我要评论
|