update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>

zh-cn/application-dev/reference/arkui-js/Readme-CN.md

 # 基于JS扩展的类Web开发范式
 
-- 通用
+- 组件通用信息
     - [通用属性](js-components-common-attributes.md)
     - [通用样式](js-components-common-styles.md)
     - [通用事件](js-components-common-events.md)

zh-cn/application-dev/ui/Readme-CN.md

@@ -81,9 +81,8 @@
             - [应用代码文件访问规则](ts-framework-file-access-rules.md)
         - [js标签配置](ts-framework-js-tag.md)
         - 资源访问
-            - [访问应用资源](ts-application-resource-access.md)
-            - [访问系统资源](ts-system-resource-access.md)
-            - [媒体资源类型说明](ts-media-resource-type.md)
+            - [资源文件的分类](ui-ts-basic-resource-file-categories.md)
+            - [资源访问](ts-resource-access.md)
         - [像素单位](ts-pixel-units.md)
         - [类型定义](ts-types.md)
     - 声明式语法

zh-cn/application-dev/ui/ts-media-resource-type.md

-# 媒体资源类型说明
-
-
-
-- 图片资源类型说明
-  | 格式 | 文件后缀名 | 
-  | -------- | -------- |
-  | JPEG | .jpg | 
-  | PNG | .png | 
-  | GIF | .gif | 
-  | SVG | .svg | 
-  | WEBP | .webp | 
-  | BMP | .bmp |
-
-- 音视频资源类型说明
-  | 格式 | 支持的文件类型 | 
-  | -------- | -------- |
-  | H.263 | .3gp <br>.mp4 | 
-  | H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 | 
-  | MPEG-4 SP | .3gp | 
-  | VP8 | .webm <br> .mkv | 
-
-

zh-cn/application-dev/ui/ts-application-resource-access.md → zh-cn/application-dev/ui/ts-resource-access.md

-# 访问应用资源
+# 资源访问
 
 
-## 资源定义
+## 访问应用资源
 
-应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织：
+在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
 
-- 一级目录为base目录、限定词目录以及rawfile目录
-  - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
-  - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。
-  - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。
+引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
 
-- 二级目录为资源目录
-  - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。
-  - 当前支持的文件和资源类型如下：
-       | 文件名 | 资源类型 |
-     | -------- | -------- |
-     | color.json | 颜色资源。 |
-     | float.json | 间距、圆角、字体等资源。 |
-     | string.json | 字符串资源。 |
-     | plural.json | 字符串资源。 |
-     | media目录 | 图片资源。 |
+> **说明：**
+> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
 
+在xxx.ets文件中，可以使用在resources目录中定义的资源。
 
-## 资源引用
+```ts
+Text($r('app.string.string_hello'))
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
 
-在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
+Text($r('app.string.string_world'))
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
 
-引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
+Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
+Text($r('app.plural.eat_apple', 5, 5))       // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
 
+Image($r('app.media.my_background_image'))  // media资源的$r引用
 
-## 示例
+Image($rawfile('test.png'))                 // rawfile$r引用rawfile目录下图片
 
-base目录中部分自定义资源如下所示：
+Image($rawfile('newDir/newTest.png'))       // rawfile$r引用rawfile目录下图片
+```
+## 访问系统资源
 
+系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
 
+
+开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
+
+```ts
+Text('Hello')
+    .fontColor($r('sys.color.ohos_id_color_emphasize'))
+    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
+    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
+    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
+Image($r('sys.media.ohos_app_icon'))
+    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
+    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
+    .height(200)
+    .width(300)
 ```
-    resources
-      ├─ base 
-      │    ├─ element 
-      │    │   ├─ color.json
-      │    │   ├─ string.json
-      │    │   └─ float.json
-      │    └─ media
-      │       └─ my_background_image.png
-      └─ rawfile
-           ├─ test.png
-           └─ newDir
-               └─ newTest.png  
-```
+## 资源文件示例
 
 color.json文件的内容如下：
 
@@ -133,35 +141,7 @@ plural.json文件的内容如下：
 }
 ```
 
-  在ets文件中，可以使用在resources目录中定义的资源。
-
-```
-Text($r('app.string.string_hello'))
-    .fontColor($r('app.color.color_hello'))
-    .fontSize($r('app.float.font_hello'))
-}
-
-Text($r('app.string.string_world'))
-    .fontColor($r('app.color.color_world'))
-    .fontSize($r('app.float.font_world'))
-}
-
-Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
-    .fontColor($r('app.color.color_hello'))
-    .fontSize($r('app.float.font_hello'))
-}
-
-Text($r('app.plural.eat_apple', 5, 5))       // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
-    .fontColor($r('app.color.color_world'))
-    .fontSize($r('app.float.font_world'))
-}
-
-Image($r('app.media.my_background_image'))  // media资源的$r引用
  
-Image($rawfile('test.png'))                 // rawfile$r引用rawfile目录下图片
-
-Image($rawfile('newDir/newTest.png'))       // rawfile$r引用rawfile目录下图片
-```
 
 
 ## 相关实例

zh-cn/application-dev/ui/ts-system-resource-access.md

-# 访问系统资源
-
-
-系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
-
-
-开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
-
-```
-Text('Hello')
-    .fontColor($r('sys.color.ohos_id_color_emphasize'))
-    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
-    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
-    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
-Image($r('sys.media.ohos_app_icon'))
-    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
-    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
-    .height(200)
-    .width(300)
-```

zh-cn/application-dev/quick-start/basic-resource-file-categories.md → zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md

@@ -72,7 +72,61 @@ base目录与限定词目录下面可以创建资源组目录（包括element、
   **表3** 资源组目录说明
 
 | 资源组目录   | 目录说明                                     | 资源文件                                     |
-| --------- | ---------------------------------------- | ---------------------------------------- |
+| ------- | ---------------------------------------- | ---------------------------------------- |
 | element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
 | media   | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。              | 文件名可自定义，例如：icon.png。                     |
 | profile | 表示其他类型文件，以原始文件形式保存。                      | 文件名可自定义。                                 |
+
+### 媒体资源类型说明
+
+表1 图片资源类型说明
+
+| 格式   | 文件后缀名 |
+| ---- | ----- |
+| JPEG | .jpg  |
+| PNG  | .png  |
+| GIF  | .gif  |
+| SVG  | .svg  |
+| WEBP | .webp |
+| BMP  | .bmp  |
+
+表2 音视频资源类型说明
+
+| 格式                                   | 支持的文件类型         |
+| ------------------------------------ | --------------- |
+| H.263                                | .3gp <br>.mp4   |
+| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4   |
+| MPEG-4 SP                            | .3gp            |
+| VP8                                  | .webm <br> .mkv |
+
+## 创建资源文件
+
+在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。
+
+同时，DevEco Studio也提供了创建资源目录和资源文件的界面。
+
+- 创建资源目录及资源文件
+
+  在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。
+
+  文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。
+
+  目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
+
+  ![create-resource-file-1](figures/create-resource-file-1.png)
+
+- 创建资源目录
+
+  在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。
+
+  选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
+
+  ![create-resource-file-2](figures/create-resource-file-2.png)
+
+- 创建资源文件
+
+  在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。
+
+  例如，在element目录下可新建Element Resource File。
+
+  ![create-resource-file-3](figures/create-resource-file-3.png)
\ No newline at end of file