HTML5+CSS3响应式网站开发项目案例教程

HTML5+CSS3响应式网站开发项目案例教程
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2020-12
版次: 1
ISBN: 9787121399817
定价: 29.80
装帧: 其他
开本: 其他
纸张: 胶版纸
页数: 148页
  • 本书主要面向高职计算机专业或软件开发专业,或者有前端开发课程的学生,本教材也可以作为1 Xweb前端开发考证中HTML5内容的参考.教材内容以真实项目青年帮响应式网站为主线,以码工在线、17素材网等真实网站为拓展,主要以案例的形式讲解HTML5常用的语义标签,新增的表单功能及其验证属性,CSS3网页细节设计,CSS3过渡,2D和3D效果,动画效果,以及响应式网站搭建.教材基于工作系统过程,以典型性工作任务为教学模块进行,本课程确定9个单元,分基础任务,应用任务,拓展任务,共44个教学任务. 于晓霞,中山职业技术学院专职教师,主持研究广东省教育科学规划研究项目\"基于能力本位教育和校企合作工作室模式的实践教学改革”、广东省高等职业技术教育研究会课题\"高职院校网页设计与制作课程中多层次、差异化教学设计的研究与实践”等多个课题和项目,连续多年获广东省高等职业院校信息化教学大赛暨全国选拔赛课堂设计项目奖项,著作方向是计算机软件开发、前端开发。 单元一 HTML5构建网站结构 1 

    教学导航 1 

    【基本项目】使用HTML5构建个人博客网站首页 1 

    【应用项目】仿Ghost开源博客平台的内容页面 10 

    单元二 HTML5表单和验证 15 

    教学导航 15 

    【基本项目】使用HTML5新增表单功能制作注册表单 15 

    【应用项目】为注册表单添加用户体验的验证信息 24 

    单元三 CSS3网页细节设计 27 

    教学导航 27 

    任务一 圆角 28 

    【基本项目1】实心圆角效果 28 

    【基本项目2】空心圆角效果 32 

    【应用项目1】网页中的圆角属性应用 34 

    【应用项目2】绘制形状 36 

    【应用项目3】经典对话框 38 

    【应用项目4】圆角导航条应用 39 

    任务二 边框阴影 40 

    【基本项目】边框阴影效果 40 

    【应用项目】仿青年帮案例展示效果 47 

    任务三 渐变 49 

    【基本项目1】线性渐变—彩虹背景文字效果 49 

    【基本项目2】径向渐变—背景图案效果 50 

    任务四 背景图片的大小 53 

    【基本项目】响应式图片效果 53 

    任务五 背景图片的定位 55 

    【基本项目1】background-origin 55 

    【基本项目2】background-clip 57 

    任务六 多重背景 59 

    【基本项目】多重背景 59 

    【应用项目】扑克牌效果 61 

    任务七 文字阴影 62 

    【基本项目】文字阴影效果 62 

    单元四 自定义字体和图标文字 66 

    教学导航 66 

    【应用项目】网页中的图标文字 66 

    单元五 CSS3过渡效果 69 

    教学导航 69 

    【基本项目】变色并扩展小方块效果 69 

    【应用项目1】仿青年帮导航条设计—圆角过渡效果 70 

    【应用项目2】仿青年帮导航条设计—下拉框效果 72 

    【应用项目3】仿17素材网作品展示效果 74 

    单元六 CSS3 2D效果 76 

    教学导航 76 

    【基本项目】CSS3 2D效果案例 76 

    【应用项目1】CSS3 2D综合效果—制作个性照片墙 90 

    【应用项目2】仿码工助手案例展示效果 92 

    【应用项目3】仿青年帮导航条设计—常用推荐效果 94 

    单元七 CSS3 3D效果 97 

    教学导航 97 

    【基本项目】立体缩放效果 97 

    【应用项目1】旋转立方体效果 102 

    【应用项目2】立体导航条效果 104 

    单元八 CSS3动画效果 107 

    教学导航 107 

    【基本项目】小球运动效果 107 

    【应用项目1】旋转转盘效果 110 

    【应用项目2】跳动的心效果 112 

    【应用项目3】钟摆效果 114 

    【应用项目4】旋转导航条效果 116 

    【应用项目5】仿青年帮网站—光晕效果 118 

    【应用项目6】仿青年帮设计导航—灵感创意推荐 121 

    【应用项目7】仿青年帮网站—波浪效果 123 

    单元九 响应式网站 126 

    教学导航 126 

    【基本项目】使用媒体查询制作一个简单的响应式网站 126 

    【应用项目1】响应式导航条设计 128 

    【应用项目2】响应式网站框架设计 131 

    【应用项目3】sugarcoat动漫响应式网站设计 134
  • 内容简介:
    本书主要面向高职计算机专业或软件开发专业,或者有前端开发课程的学生,本教材也可以作为1 Xweb前端开发考证中HTML5内容的参考.教材内容以真实项目青年帮响应式网站为主线,以码工在线、17素材网等真实网站为拓展,主要以案例的形式讲解HTML5常用的语义标签,新增的表单功能及其验证属性,CSS3网页细节设计,CSS3过渡,2D和3D效果,动画效果,以及响应式网站搭建.教材基于工作系统过程,以典型性工作任务为教学模块进行,本课程确定9个单元,分基础任务,应用任务,拓展任务,共44个教学任务.
  • 作者简介:
    于晓霞,中山职业技术学院专职教师,主持研究广东省教育科学规划研究项目\"基于能力本位教育和校企合作工作室模式的实践教学改革”、广东省高等职业技术教育研究会课题\"高职院校网页设计与制作课程中多层次、差异化教学设计的研究与实践”等多个课题和项目,连续多年获广东省高等职业院校信息化教学大赛暨全国选拔赛课堂设计项目奖项,著作方向是计算机软件开发、前端开发。
  • 目录:
    单元一 HTML5构建网站结构 1 

    教学导航 1 

    【基本项目】使用HTML5构建个人博客网站首页 1 

    【应用项目】仿Ghost开源博客平台的内容页面 10 

    单元二 HTML5表单和验证 15 

    教学导航 15 

    【基本项目】使用HTML5新增表单功能制作注册表单 15 

    【应用项目】为注册表单添加用户体验的验证信息 24 

    单元三 CSS3网页细节设计 27 

    教学导航 27 

    任务一 圆角 28 

    【基本项目1】实心圆角效果 28 

    【基本项目2】空心圆角效果 32 

    【应用项目1】网页中的圆角属性应用 34 

    【应用项目2】绘制形状 36 

    【应用项目3】经典对话框 38 

    【应用项目4】圆角导航条应用 39 

    任务二 边框阴影 40 

    【基本项目】边框阴影效果 40 

    【应用项目】仿青年帮案例展示效果 47 

    任务三 渐变 49 

    【基本项目1】线性渐变—彩虹背景文字效果 49 

    【基本项目2】径向渐变—背景图案效果 50 

    任务四 背景图片的大小 53 

    【基本项目】响应式图片效果 53 

    任务五 背景图片的定位 55 

    【基本项目1】background-origin 55 

    【基本项目2】background-clip 57 

    任务六 多重背景 59 

    【基本项目】多重背景 59 

    【应用项目】扑克牌效果 61 

    任务七 文字阴影 62 

    【基本项目】文字阴影效果 62 

    单元四 自定义字体和图标文字 66 

    教学导航 66 

    【应用项目】网页中的图标文字 66 

    单元五 CSS3过渡效果 69 

    教学导航 69 

    【基本项目】变色并扩展小方块效果 69 

    【应用项目1】仿青年帮导航条设计—圆角过渡效果 70 

    【应用项目2】仿青年帮导航条设计—下拉框效果 72 

    【应用项目3】仿17素材网作品展示效果 74 

    单元六 CSS3 2D效果 76 

    教学导航 76 

    【基本项目】CSS3 2D效果案例 76 

    【应用项目1】CSS3 2D综合效果—制作个性照片墙 90 

    【应用项目2】仿码工助手案例展示效果 92 

    【应用项目3】仿青年帮导航条设计—常用推荐效果 94 

    单元七 CSS3 3D效果 97 

    教学导航 97 

    【基本项目】立体缩放效果 97 

    【应用项目1】旋转立方体效果 102 

    【应用项目2】立体导航条效果 104 

    单元八 CSS3动画效果 107 

    教学导航 107 

    【基本项目】小球运动效果 107 

    【应用项目1】旋转转盘效果 110 

    【应用项目2】跳动的心效果 112 

    【应用项目3】钟摆效果 114 

    【应用项目4】旋转导航条效果 116 

    【应用项目5】仿青年帮网站—光晕效果 118 

    【应用项目6】仿青年帮设计导航—灵感创意推荐 121 

    【应用项目7】仿青年帮网站—波浪效果 123 

    单元九 响应式网站 126 

    教学导航 126 

    【基本项目】使用媒体查询制作一个简单的响应式网站 126 

    【应用项目1】响应式导航条设计 128 

    【应用项目2】响应式网站框架设计 131 

    【应用项目3】sugarcoat动漫响应式网站设计 134
查看详情
12
相关图书 / 更多
HTML5+CSS3响应式网站开发项目案例教程
HTML5+CSS3+JavaScript+jQuery Mobile移动网站与App开发(视频教学版)
王英英
HTML5+CSS3响应式网站开发项目案例教程
HTML+CSS+JavaScript网页制作从入门到精通第4版
宋丽娜、史笑颜、刘西杰、晁代远 著
HTML5+CSS3响应式网站开发项目案例教程
HTML+CSS+JavaScript编程超级魔卡
明日科技
HTML5+CSS3响应式网站开发项目案例教程
HTML5Web开发(全案例微课版)
刘辉 著
HTML5+CSS3响应式网站开发项目案例教程
HTML5+CSS3+jQueryMobile移动开发(全案例微课版)
刘辉 著
HTML5+CSS3响应式网站开发项目案例教程
HTML+CSS+JavaScript网页制作Web前端开发第3版
刘瑞新、张兵义、朱立 著
HTML5+CSS3响应式网站开发项目案例教程
HTML+CSS+JavaScript入门经典第3版
[美]珍妮弗·凯瑞恩(Jennifer Kyrnin) 著;胡久林 译
HTML5+CSS3响应式网站开发项目案例教程
HTML5+CSS3+JavaScript网站开发(全案例微课版)
刘春茂 著
HTML5+CSS3响应式网站开发项目案例教程
HTML5+CSS3网站设计基础教程(第2版)
黑马程序员
HTML5+CSS3响应式网站开发项目案例教程
HTML5+CSS3+JavaScript网页设计教程(微课版)
张润花;赵培植;王尚瀛
HTML5+CSS3响应式网站开发项目案例教程
HTML+CSS网站设计与开发从新手到高手
罗刚 原晋鹏
HTML5+CSS3响应式网站开发项目案例教程
HTML5+CSS3网页设计(全案例微课版)
刘春茂
您可能感兴趣 / 更多