绍：Office 2019版本Word基本操作视频课程（排版及目录设置等）.

免费试听网址：http://zige365.100xuexi.com/Ebook/963979.html

目录

隐藏

说明：本课程共包括98个高清视频（共9小时）。

网授课程

Office 2019版本Word基本操作视频课程（排版及目录设置等）

序号 名称 课时

1 office课程介绍 00:03:16

2 新建、打开、保存、关闭Word文件 00:03:10

3 文件加密和取消加密 00:01:50

4 Word界面操作+选项卡折叠与显示操作 00:02:41

5 添加命令到快速访问工具栏 00:00:53

6 页面显示比例操作和快捷键 00:01:01

7 阅读视图和页面视图 00:00:54

8 新功能：翻页模式 00:00:35

9 新功能：学习工具沉浸式阅读 00:01:26

10 自定义状态栏和改写插入操作 00:02:13

11 输入法的切换 00:01:11

12 文本的选择和全选操作 00:01:20

13 删除Delete和Backspace的区别和撤销 00:01:10

14 Ctrl、Shift和Alt的选择辅助功能 00:00:40

15 复制、剪切、粘贴的3种方式很高效 00:02:21

16 禁用和启用粘贴选项按钮 00:01:18

17 字体设置及打开方式 00:03:07

18 字号大小调节的2种快捷键 00:01:26

19 加粗、斜体、下划线及快捷键操作 00:02:38

20 格式刷的使用 00:01:14

21 格式刷快捷键的使用 00:01:03

22 查找、替换和定位功能及快捷键 00:03:31

23 给文字标注拼音功能 00:00:31

24 批量删除文档中的空白行 00:01:11

25 段落的定义和打开段落设置 00:01:21

26 段落的5种对齐方式 00:02:52

27 段落的4种缩进方式 00:03:44

28 段间距和行间距的设置 00:01:38

29 编号和项目符号设置 00:05:06

30 首字下沉设置 00:01:15

31 横纵混排、合并字符、双行合一 00:02:01

32 制表符和制表位的使用 00:04:52

33 纸张大小和文字方向 00:01:02

34 页边距设置也页面设置纸张方向等 00:01:26

35 分栏效果设置 00:01:42

36 强制分页和插入分页符 00:01:43

37 设置水印和背景效果 00:02:30

38 设置页面边框 00:01:19

39 样式的使用和创建新样式 00:08:30

40 样式选择相同格式的文本 00:00:40

41 显示隐藏编辑标记和快捷键 00:01:49

42 自动目录的生成操作和更新目录 00:02:25

43 Word中域的计算器功能 00:01:33

44 快速访问工具栏中的计算功能 00:01:16

45 添加删除尾注和脚注 00:01:32

46 审阅批注 00:00:56

47 审阅修订 00:01:33

48 插入书签和删除书签 00:01:05

49 插入形状图形和编辑图形 00:05:29

50 形状图形添加文字 00:00:30

51 制作流程图及组织架构图 00:03:38

52 插入SmartArt图形 00:02:29

53 插入图片更改环绕方式和插入PNG图片 00:02:24

54 插入在线联机图片 00:00:24

55 图片更改环绕方式详解 00:01:24

56 图片格式的美化 00:00:51

57 图片裁剪和形状裁剪 00:01:14

58 插入艺术字和更改样式效果 00:01:32

59 插入文本框和格式调整 00:01:04

60 文本框链接和图形文本框的关联 00:02:18

61 插入图标新功能 00:00:59

62 插入3D模型图新功能 00:01:13

63 截图功能 00:00:39

64 插入公式、墨迹公式和编辑公式 00:02:52

65 插入漏斗图 00:01:07

66 显示行号的操作 00:00:49

67 如何将Word当中的图片导出 00:00:49

68 如何解决图片不显示让图片框正常显示图片 00:00:45

69 插入和删除页眉页脚 00:02:22

70 插入页码和正确设置长文档页码 00:03:24

71 分隔符：分页符和分节符实现同一文档横纵排版 00:02:30

72 奇偶页不同和页眉页脚设置关联 00:01:35

73 插入超链接 00:02:13

74 小技能：一次性删除全部超链接 00:00:55

75 创建表格的3种方式 00:02:18

76 表格选择、插入删除行与列 00:02:14

77 表格中Delete和Backspace删除的区别 00:00:33

78 表格输入内容方向键和Tab键用途 00:00:55

79 合并单元格、拆分单元格 00:02:55

80 单元格内容的9种对齐方式 00:01:04

81 调整行高和列宽 00:01:02

82 平均分布行高和列宽 00:00:45

83 按住Alt进行精准微调表格 00:00:42

84 选择单独1个单元格两种方法 00:01:22

85 表格添加边框底纹 00:02:44

86 表格样式套用 00:00:54

87 解决表格和其他产生混乱的方法 00:00:29

88 绘制斜线表头的2种方式 00:01:17

89 表格和文字的相互转换 00:01:47

90 设置重复标题行的2种方法 00:01:08

91 表格数据排序 00:01:07

92 表格的计算功能 00:02:42

93 拆分表格功能 00:00:42

94 表格制作标签效果 00:00:56

95 打印和打印预览快捷键操作 00:00:56

96 批量制作信封文件 00:02:22

97 批量制作邀请函 00:02:26

98 输出为pdf文件 00:00:55

迎观看indesign教程，小编带大家学习 InDesign 的基本工具和使用技巧，了解如何如何创建页边距和列参考线并用它们来定位文本和图像。

InDesign内的参考线让页面创建更加方便、迅速、准确。在本文中，我们将了解页边距和列参考线。

在InDesign中打开文件，如果「页面」面板在屏幕上未显示，依次选择「窗口」-「页面」。

在「页面」面板中可以看到这是一个包含三个页面的文件。

转到第 2 页并将它显示在「文档」窗口中，在第 2 页缩略图上双击，新建文档时可以指定所需的任何页边距和列参考线。

然后这些参考线出现在文档的所有页面上，这个页面具有 0.5 英寸的页边距，如这些红色的线指示。

但文本框刚好位于页面中间和页边距参考线之间没有任何关系。创建这个文档仅指定了具有 0.5 英寸页边距的一个列，对于这个设计没有用处。

双击第 3 页缩略图，可以看到第 3 页的布局是相似的，但还是没有参考线来帮助定位文本框。

如果准备创建包含其他内容的更多页面，可能希望这些页面上的框以和这些框相似的方式布置，但如果没有参考线辅助，操作会很繁琐。

解决这个问题，首先在第 2 页缩略图上双击，第 2 页显示在「文档」窗口中。

然后按住 Shift 键单击第 3 页，第 2 页和第 3 页的缩略图都会变为蓝色，指示它们处于选中状态。

现在来更改这些页面上的页边距和列参考线，选择「版面」-「边距和分栏」。

不希望inDesign在更改页边距和分栏时，移动文本和图像，取消选勾选「调整版面」选项。

为顶部、底部、左侧和右侧页边距输入单独的值，单击「将所有设置设为相同」断开。

然后顶部页边距输入 1.25 ；底部页边距输入 1.75 ；左侧和右侧页边距输入 1.5；栏数输入 2；列间空白输入 0.5，这是列间的空间，单击「确定」。

现在双击第 2 页的页面缩略图，然后双击第 3 页的，在「文档」窗口中显示每个页面，应当能看见第 2 页和第 3 页，都有一致的页边距和列参考线，这些参考线都位于对于这些页面的独特版面有用的位置，参考线将帮助我们在每个页面上准确地定位文本和图像框。

转到「视图」-「网格和参考线」注意「靠齐参考线」旁边有一个复选标记，选中这个选项之后，在参考线 4 个像素之内的任何页面项目，都将以吸附方式对齐到参考线，这样一来，在定位项目时，就不再需要过于精确的操作了。

将第 2 页显示在「文档」窗口中，在「页面」面板中双击第 2 页缩略图。

在该页面上希望将每个文本框的的边缘拖动至最近的参考线，单击「选择工具」，单击其中一个框，然后将侧边手柄拖动至最近的参考线，对齐到参考线功能让精确操作变得容易，对这个页面上的每个文本框和图像框重复这个操作。

在「页面」面板上，双击第 3 页缩略图，转到第 3 页，重新调节这个页面上元素的大小，让它们也对齐到参考线。

在这个页面上，希望两个文本分栏具有不同宽度，各自向两边拖动就好了。

InDesign中的页边距和列参考线仅仅是建议，可在需要时随时覆盖它们。在页面之间翻动时，第 2 页和第 3 页上的所有项目都有了一致的观感，如果学会使用页边距和列参考线，就可以在每次进行页面设计和布局时更加迅速和一致。

以上就是在inDesign软件中将内容与参考线对齐的方法。

indesign下载地址：Indesign 2021 for mac(Id 2021)

https://www.macz.com/mac/7645.html?id=NzY4OTYwJl8mMjcuMTg2LjExLjIwMQ%3D%3D

示：文章底部有完整的源代码，使用Rollup编译后总体积只有2kb左右，童鞋们有需要可以直接CTRL + C拿走。

我想，前端的童鞋们应该都了解或使用过网格布局吧？著名的UI库：bootstrap，element-ui，iview等都提供了网格布局。我们所熟知的这些库都是采用的CSS预处理语言生成的网格布局。这是一种主流的实现方案，也很符合前端开发的一个格言：能用CSS实现的，尽量不要用JS实现。

动机：熟悉网格布局实现原理的童鞋们应该都比较清楚，网格布局的CSS代码量是很大的，轻而易举就能达到30kb以上；虽然我们是用less这样的预处理语言写的，拥有编程语言的一些能力，可以利用循环和变量来大幅减小我们所编写的代码量；但是，最终浏览器加载的依旧是生成的CSS。这个体积嘛，像我这种对体积非常敏感的人，感觉有一点点儿大。那么，我们有没有一种方式，可以大幅减小网格布局的体积呢？这正是本篇文章的主题：使用JS动态生成响应式网格布局。

我们先看两张效果图，这是element-ui官方文档Row和Col组件的例子没有做任何修改，直接在本篇文章实现的组件下的效果。

要使用JS生成网格布局，我们需要动态创建样式表；使用JS创建样式表是很简单的事情，只需要创建一个style元素，然后将样式表字符串添加到style元素，最后将style元素添加到head即可。如下是createStylesheet函数的定义：

export function createStylesheet (id, styleSheetStr) {
  let el = document.getElementById(id)
  // 避免重复创建相同的样式表，只有不存在的时候才创建
  if (!el) {
    el = document.createElement('style')
    el.id = id
    el.innerHTML = styleSheetStr
    document.head.appendChild(el)
  }
}

我们采用的网格布局是24分栏，和element-ui保持一致，这也是目前最主流的网格布局分栏数量。我们需要生成0-24共25列，当列占用的空间为0的时候处于隐藏状态。现在，我们先创建一个包含25个元素的数组，我们不需要关注数组中元素的值，我们只会用到元素的索引。之所以使用数组，是因为我不想使用for循环，而更偏向于数组的遍历方法。

const nulls = new Array(25).fill(null)

现在，我们定义一个获取列宽度的函数getSpan，当列数为0的时候，将元素设置为不可见。

const getSpan = (i, val) => i ? `width:${val}` : 'display:none'

然后，我们创建用于生成列的函数genCol，该函数将列数转化为百分比，以实现弹性的宽度。不知道童鞋们有没有被left和right搞懵呢？[呆无辜]

export const cls = 'x-col' // class前缀

const genCol = () => nulls.map((_, i) => {
  const val = `${i / 24 * 100}%`
  return [
    `.${cls}_span-${i}{${getSpan(i, val)};}`, // 列宽
    `.${cls}_pull-${i}{right:${val};}`, // 向左移动的宽度
    `.${cls}_push-${i}{left:${val};}`, // 向右移动的宽度
    `.${cls}_offset-${i}{margin-left:${val};}` // 向右的偏移宽度
  ].join('')
}).join('')

目前，我们生成的布局不是响应式的，不管屏幕有多宽，都会占用固定的百分比宽度。那么，我们如何使布局变成响应式的呢？媒体查询，该你出场了。

现在，我们先定义一个根据窗口宽度生成布局的函数genColBySize。这个函数和上面的genCol函数长的很像，只是class名称中添加了一个size，童鞋们应该都能理解吧？

const genColBySize = size => nulls.map((_, i) => {
  const val = `${i / 24 * 100}%`
  return [
    `.${cls}_${size}-span-${i}{${getSpan(i, val)};}`,
    `.${cls}_${size}-pull-${i}{right:${val};}`,
    `.${cls}_${size}-push-${i}{left:${val};}`,
    `.${cls}_${size}-offset-${i}{margin-left:${val};}`
  ].join('')
}).join('')

我们与element-ui保持一致，将响应式断点设置为5个，分别是: xs，sm，md，lg，xl；现在，我们生成响应式布局，并导出一个添加样式表函数addStylesheet。

const genResponsiveCol = () => [
  ['xs'],
  ['sm', 768],
  ['md', 992],
  ['lg', 1200],
  ['xl', 1920]
].map(_ => _[1]
      ? `@media (min-width:${_[1]}px){${genColBySize(_[0])}}`
      : genColBySize(_[0])
 ).join('')

// 为什么没有写在addStylesheet里面？
// 是为了减少2个生成函数的调用次数，避免不必要的调用，现在只会被调用一次
const ruleStr = genCol() + genResponsiveCol()

export const addStylesheet = () => {
  createStylesheet('XGridLayout', ruleStr)
}

以上就是使用JS生成响应式网格布局的全部核心代码，是不是很简单？现在，我把Row和Col组件的剩余代码提供给童鞋们，为了节省篇幅，把空行去掉了，但可读性还是很高的。希望阅读过本篇文章的童鞋们都能够自己动手实现。

Col.vue组件源码：

<template>
  <div :class="classes" :style="styles">
    <slot />
  </div>
</template>
<script setup>
import { computed, inject, onMounted } from 'vue'
// N: Number, N0: { type: Number, default: 0 }
import { N, N0 } from '../../types'
import { addStylesheet, cls } from './utils'
const props = defineProps({
  span: { type: N,  default: 24 },
  offset: N0,
  push: N0,
  pull: N0,
  xs: {},
  sm: {},
  md: {},
  lg: {},
  xl: {}
})
const classes = computed(() => {
  const clsList = [cls]
  ;['span', 'offset', 'push', 'pull'].forEach(k => {
    const v = +props[k]
    v && clsList.push(`${cls}_${k}-${v}`)
  })
  ;['xs', 'sm', 'md', 'lg', 'xl'].forEach(k => {
    const v = props[k]
    if (v) {
      const opts = +v ? { span: +v } : v
      Object.keys(opts).forEach(k2 => {
        clsList.push(`${cls}_${k}-${k2}-${opts[k2]}`)
      })
    }
  })
  return clsList
})
const gutter = inject('gutter') // 响应式的数值，由Row组件提供，注入到Col组件
const styles = computed(() => {
  const padding = `${gutter.value / 2}px`
  return gutter.value && { paddingLeft: padding, paddingRight: padding }
})
onMounted(() => {
  addStylesheet()
})
</script>

Row.vue组件源码：

<template>
  <div :class="classes" :style="styles">
    <slot />
  </div>
</template>
<script setup>
import { computed, provide, toRefs } from 'vue'
// N0: { type: Number, default: 0 }, oneOf: (arr, v) => arr.includes(v)
import { N0, oneOf } from '../../types'
const props = defineProps({
  gutter: N0,
  justify: {
    default: 'start',
    validator: v => oneOf(['start', 'end', 'center', 'space-around', 'space-between'], v)
  },
  align: {
    validator: v => oneOf(['top', 'middle', 'bottom'], v)
  }
})
const { gutter } = toRefs(props) // gutter是响应式的
provide('gutter', gutter) // 提供给子组件使用
const classes = computed(() => {
  const cls = 'x-row'
  return [
    cls,
    props.align && `${cls}_${props.align}`,
    props.justify && `${cls}_${props.justify}`,
    { gutter: props.gutter }
  ]
})
const styles = computed(() => props.gutter && { margin: `0 -${props.gutter / 2}px` })
</script>

Col组件样式是通过JS生成的，我们只需要row.scss样式文件就够了，这里是源码：

.x-row {
  display: flex;
  &_top {
    align-items: flex-start;
  }
  &_middle {
    align-items: center;
  }
  &_bottom {
    align-items: flex-end;
  }
  &_start {
    justify-content: flex-start;
  }
  &_end {
    justify-content: flex-end;
  }
  &_center {
    justify-content: center;
  }
  &_space-around {
    justify-content: space-around;
  }
  &_space-between {
    justify-content: space-between;
  }
}
.x-col {
  word-wrap: break-word;
}

现在我们可以实现体积只有2kb的响应式网格布局了，童鞋们理解了吗？感谢阅读！