https://www.glc.edu.cn/
  • 个人简介
  • 教学提要
  • 教学实施
  • 小结讲评

[ 个人简介 ]

张树彬
软件工程 | 数字媒体 | 物联网
党员
13*0**35481
1942194789@qq.com
撸码 | 逛B站 | 运动 | 美食 | 绿植

I'm a passinate web developer and creative technologist with a keen eye form design and a loe for building innovative digital solutions. With expertise in both front-end and back-end development, I create seamless user experience that lear a lasting impression.

My approach combines technical excellenace with creative problem-solving to deliver projects that not only meet but also exceed expectations.

I have a strong understanding of the entire development process and can deliver high-quality results on time. I also have a passion for learning and staying up-to-date with the latest industry trends and technologies.

学习

1995.08 - 1999.06 桂林电子科技大学 通信工程 学士
2005.08 - 2008.03 上海交通大学 通信与信息系统 硕士

工作

1999.07 - 2018.12 中国人民解放军陆军特种作战学院 侦察系 讲师
2020.07 - 2022.01 桂林学院 软件工程 讲师
2022.03 - 2022.06 厦门工学院 物联网 讲师
2022.07 - 2023.01 广州工商学院 软件工程 | 数字媒体 讲师
2023.02 - 2023.06 海口经济学院 计算机与大数据 讲师
2023.09 - 2025.07 广州新华学院 软件工程 | 数字技术媒体 讲师

学术

2024 WEB开发与应用 自编讲义 第1负责人
2024 传智杯第七届全国IT技能大赛 学科竞赛 第2负责人
2024 虚拟教研室-移动应用开发虚拟教研室 校级 第3负责人
2024 专项人才培养计划-卓越网络安全人才实验班 校级 参与
2024 2024年一流本科专业建设点项目-软件工程 校级 参与

资源

WEB

微信小程序

微信公众号

柯麦商城

[ 教学提要 ]

科目 Subject

WEB应用开发

章节 Chapter

文本 Text

内容 Content

分栏布局

对象 Object

20智能科1班

知识目标 Point

分栏数 column-count

分栏宽度 column-width

分栏跨度 column-span

技能目标 Skill

规范开发

高效开发

自主开发

情感目标 Sentiment

发现美

欣赏美

创造美

方法 Method

理论讲解

案例分析

项目实操

学时 Duration

0.5 - 理论

0.5 - 实操

1.0 - 练习

建议 Advice

听

思

撸

[ 教学实施 ]

[课前准备 Preparation]
  1. 课程资源 文本
  2. 开发环境 Vs Code
  3. 课堂管理 学习通、课堂派
  4. 电子笔记 语雀
  5. 截图工具 Snipaste
[内容回顾 Review]
Made with WordClouds.com
图1 文本常见CSS样式词云
[讨论] 根据课前下发的传媒学院摄影展宣传单(如下图),按照以前的分组,就实现和格式问题展开讨论,最后推荐一名组员从下述2个方面分享你们的观点
  1. 标签 Tag
  2. 样式 CSS
  3. 选择器 Selector
图2 传媒学院摄影展宣传单
[思政] 正确、规范使用文本
[提示] 更多内容,请查看HTML和CSS开发规范 开发者 Developer
[理论讲解 Lecture on Theory]
[思考] 宽屏终端设备对版面的布局设计提出了新的要求
[拓展] 办公文档Word的分栏使用 - 将大块文字分为若干栏,增加阅读性
表1 常用CSS样式
类别
说明
column-count
分栏数;数字;每栏宽度由浏览器视口 view 自动划分
column-width
最小分栏宽度;由浏览器视口 view 决定最终划分多少栏;不能使用%
columns:
复合属性;column-width、column-count;根据分栏宽度或分栏数划分内容;优先满足分栏数
column-span
分栏元素的跨度;all 通栏,如标题
column-gap
分栏间隔;默认18px
column-rule
分隔符样式;同 border
column-fill
填充模式;需指定容器高度;默认是平均填充 balance;也可以指定 auto,逐列填充
[案例实操 Drill]
[说明] 参照图3、图4,使用分栏样式实现;更多效果,请参考 文章排版
[思政] 细节决定成败
图3 初始效果
图4 最终效果

[ 小结讲评 ]

[] 主要内容
文本的分栏使用,重点掌握:
  1. 分栏数 column-count
  2. 分栏宽度 column-width
  3. 分栏跨度 column-span
[] 现场点评
[] 课后练习
  1. 采用不同方法完成上述案例,体会它们之间的差异
  2. 灵活使用文本相关知识点,调整并更新到个人网站
  3. 使用分栏实现瀑布流效果
[] 知识拓展
  1. 谷歌字体 GoogleFonts
  2. 阿里字体图标 Iconfont
  3. 开发热点 Focus
  4. WEB中文字体应用指南
[] 课后预习
  1. 计数器 Counter