GIET
  • 个人简介
  • 教学提要
  • 教学实施
  • 小结讲评

[ 个人简介 ]

张树彬
软件工程 | 数字媒体
党员
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 - 广州新华学院 软件工程 | 数字技术媒体 讲师
资源

WEB

微信小程序

微信公众号

自创品牌小程序

[ 教学提要 ]

章节 Chapter
文本 Text
内容 Content
文本的基本使用
文本的分栏布局
科目 Subject
WEB应用开发
对象 Object
20智能科学与技术1班
知识 Knowledge
字体、大小、颜色、行高、溢出
首行选择器、首字选择器
分栏数、分栏宽度
技能 Skill
规范开发
高效开发
自主开发
情感 Sentiment
发现美
欣赏美
创造美
方法 Method
理论讲解
案例分析
项目实操
学时 Duration
2
建议 Advice
听 Listening
记 writing
思 Thinking
撸 Coding

[ 教学实施 ]

[老师课前准备及学生签到、准备]
学习网站 → 文本
开发环境 Vs Code
考勤 课堂派
电子笔记 语雀
截图工具 Snipaste
[导入] 根据课前下发的传媒学院摄影展宣传单,按照以前的分组,就格式|内容展开讨论,最后推荐一名组员分享你们的观点
[思政] 正确、规范使用文本
格式
1. 基本使用 Basic
1.1 常用CSS样式
[拓展] 办公文档的使用
类别
说明
font-family
字体家族;通常为一个系列
font-size
字体大小;单位:px、em、rem、%、vw等
font-weight
字体重量/加粗;关键字,如bold、light;推荐使用数字,如600
color
字体颜色;建议使用rgb()、rgba()
line-height
行高;可用于单行文本的垂直方向居中
letter-spacing
字符间距
text-indent
文本缩进;通常为2em
text-align
文本对齐;right | center | justify;默认left
text-transform
文字变化;适用于英文;首字大写 capitalize | 大写 uppercase | 小写 lowercase
text-overflow
文字溢出处理
text-shadow
文字阴影;可以多次叠加,以逗号,区分
text-stroke
文字描边;部分浏览器不支持,建议使用 SVG 实现
white-space
空白字符处理;换行 wrap | 不换行 nowrap
vertical-align
行内文本对齐方式;baseline | middle | top | bottom
writing-mode
文字方向;如古文的从右到左 vertical-rl
1.2 专有选择器
类别
说明
::first-line
首行选择器
::first-letter
首字|首字符选择器
[提示] 更多内容,请查看HTML和CSS开发规范 开发者 Developer
1.3 案例实操 - 基本使用
[教学设计] 先分析案例效果可能实现的方法,回顾前面学习过的知识点;接着分析参考代码采用弹性盒子布局flex布局的特点,然后引导学生使用网格布局grid逐步完成案例,最后总结两者的特点,并安排学生课后完成其它方案的实现
[参考效果]

学院简介

信息与智能工程学院(原信息科学学院),School Of Information And Intelligent Engineering,建于2005年,位于东莞市麻涌镇,共有电子信息工程系、计算机系、自动化系三大系,其中电子信息工程系设有电子信息科学与技术专业,计算机系设有计算机科学与技术专业、软件工程专业、数字媒体技术专业,自动化系设有电气工程及其自动化专业、智能制造工程专业。

全院共6个专业,紧紧围绕大数据、物联网、网络空间安全、虚拟现实、电子商务与电子政务等IT技术及社会应用,构成新工科特色专业集群。目前,在校生3265人,已为社会培养14届毕业生共3564人,专业实验室10间。

学院以培养具有家国情怀、开拓创新、学习能力、团队合作的高素质IT应用型人才为办学目标,紧紧围绕办学目标制定人才培养计划。

[知识点]
移动优先:响应式开发
左右|两列布局:浮动 float、定位 position、弹性盒子布局 flex、网格布局 grid
图片的使用:图片标签 <img>、背景图片 background-image
单行文本水平垂直居中:高度 height、行高 line-height
段落:缩进 text-indent、段前段后 margin
段落溢出隐藏并打点提示:内容溢出 overflow、空白处理 white-space、文本溢出 text-overflow
其它:外部样式表、样式初始化、选择器
HTML
<div class="sample">
  <div class="img"></div>
  <div class="cont">
    <h3>学院简介</h3>
    <p>...</p>
    <p>...</p>
    <p class="of">...</p>
</div>

CSS
:root {
  --main-green: #16a085;
}

.sample {
  display: flex;
  gap: 10px;
  margin: 2rem auto;
}

.sample>div {
  flex: 1;
  overflow: hidden;//防止被撑开
}

.sample .img {
  background-image: url(https://xx.gzist.edu.cn/__local/9/CE/EE/D808161A1ED843BA3A82B8A3BF8_E14D1F1D_A6DE7.png);
  background-size: cover;
  min-height: 150px;//响应式开发,确保移动端显示正常
}

.sample h3 {
  margin-bottom: 1rem;
  text-align: center;
  background-color: var(--main-green);
  color: #fff;
  line-height: 60px;
}

.sample p {
  text-indent: 2em;
  margin-bottom: 1em;
  text-align: justify;
  line-height: 1.5;
}

.sample p:last-of-type {//最后一个段落不需要
  margin-bottom: 0;
}

.sample .of {//单行打点;固定用法
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[注意]
灵活调整元素大小或文案内容,确保文本显示美观
配合首字选择 ::first-letter或首行选择 ::first-line,给与用户更多提示
配合浮动 float,实现首字下沉
选择器的优先级
其它:CSS函数、全局变量
2. 分栏布局 Column
[目的] 将大块文字分为若干栏,增加阅读性,特别是宽屏终端设备
[拓展] 办公文档 word的分栏使用
2.1 常用CSS规则
类别
说明
column-width
最小列宽;由浏览器视口 view定分成多少列;不能使用%
column-count
列数;由浏览器视口 view定每列宽度;推荐使用
columns:
复合属性;column-width、column-count;根据宽度或列数布局
column-span
分列元素的跨度;all通栏,如标题
column-gap
列间隔;默认18px
column-rule
分隔符样式;同 border
column-fill
填充模式;需指定容器高度;默认是平均填充 balance;也可以指定 auto,逐列填充
2.2 案例实操 - 分栏布局
[教学设计] 先对给定文案分栏,在此基础上,引导学生逐步完善文本布局
[初始效果]

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem, ipsum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam perferendis magnam ab quo fugit soluta sit vitae rerum deleniti. Vel laborum reprehenderit perspiciatis nulla fugit, autem maxime earum, harum velit quaerat quo magni obcaecati delectus eveniet aut. Fuga, alias.

Deleniti, aspernatur officia atque commodi tempore debitis labore cupiditate adipisci nihil quaerat iure iusto? Totam, doloremque natus! Numquam eos, ipsam aliquam, cumque explicabo, amet animi praesentium assumenda aut reiciendis velit. Enim ratione reiciendis incidunt autem aliquam maiores aut iste ut.

At porro autem maiores aliquam labore aliquid est velit praesentium minus cumque fugit, omnis corporis explicabo tempore nam sapiente? Aspernatur, nemo, quibusdam itaque temporibus eligendi culpa at quod ipsum debitis ipsa inventore neque sunt atque, esse explicabo saepe qui impedit!

Lorem, ipsum dolor.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio numquam odit delectus incidunt quod quas deleniti a qui adipisci cum sunt, facilis dolorum similique ipsa eius perspiciatis. Reiciendis sint, atque officia molestias consequatur repudiandae, minus vel nostrum, labore asperiores dicta?

Sapiente dolorum ab, rem, voluptates, animi maiores accusantium corrupti aliquam aperiam nihil numquam blanditiis quod quo ad modi. Saepe rem nam, sunt aspernatur nesciunt dicta ipsa sed, non distinctio fugit nulla ut a. Odit labore officiis modi, iusto commodi laudantium?

Ab vel veniam, quasi molestias maxime sed quis sunt error numquam sit autem nostrum esse rerum enim pariatur ducimus, quos, fugit magnam? Corrupti consequatur, error doloribus dolores amet sunt iusto placeat eum possimus commodi voluptatem aut aperiam quo enim natus.

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptatibus officia error, assumenda quasi animi adipisci, nesciunt laborum rem dignissimos corrupti perferendis quia cum ipsa! Libero ipsam assumenda labore ex repellendus tempora, a odit quae et illo obcaecati, error numquam!

Assumenda quisquam beatae corporis quas reprehenderit adipisci alias maxime culpa labore cum totam magni voluptatum commodi, molestias esse iste porro soluta, id illo neque non! Reiciendis dolore quisquam aliquid dolores commodi obcaecati itaque, non corporis. Molestiae pariatur assumenda ea perferendis!

Iste dolor sequi praesentium, laborum aut inventore soluta eum perferendis unde culpa tenetur natus error recusandae necessitatibus, cumque voluptas amet nihil odit? Ratione eaque provident architecto. Impedit nostrum natus modi vero et harum! Rerum odio eveniet deleniti repudiandae, sequi atque.

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio delectus quas similique doloremque fugit earum eveniet provident beatae eligendi! Nihil obcaecati ipsam iste similique explicabo? Exercitationem veritatis at quam fuga nihil vitae sequi voluptatem quo earum. Eaque repudiandae animi iure.

Dolor fugiat quasi aperiam totam ducimus distinctio et doloremque nesciunt a nam. Vel deserunt fugiat consequuntur dolorum. Perspiciatis, temporibus expedita! Porro architecto voluptate necessitatibus, quasi sed dolores quis ad possimus ratione adipisci accusantium nemo commodi voluptates, iusto, nisi sunt amet!

Pariatur doloribus neque laudantium corporis voluptates, vero labore facilis accusamus doloremque similique recusandae error dolorem voluptatum. Fuga, sunt, id aperiam, maiores asperiores quod vero nihil quos modi eligendi tempora fugit optio error sapiente quasi iure placeat provident maxime saepe est.

[讨论及联想] 哪些地方需要改进?
改进
[知识点]
分栏 column
通栏 column-span
左右垂直对齐:line-height、整体盒子尺寸
其它:段落缩进、水平对齐、外部样式表、样式初始化、类的使用
[最终效果] - 见课堂实操

[ 小结讲评 ]

[] 主要内容
文本的基本使用
文本的分栏布局
[] 课后练习
采用不同方法完成上述案例,体会它们之间的差异
灵活使用文本相关知识点,调整并更新到个人网站
[] 知识拓展
谷歌字体 GoogleFonts
阿里字体图标 Iconfont
更多文字使用细节,请访问 WEB中文字体应用指南、开发热点