1. 本节课将为您演示，如何借助网页视图，创建一个图文并茂的笔记本程序。在您的项目中已经导入了一些素材文件，该图片将作为删除按钮。
2. 当用户点击刚刚的删除图标时，将删除和图标对应的图片内容。而这张素材则是在图片加载失败时显示的。
3. 该图片将作为范例图片，被插入到笔记本中。
4. 该图片将作为笔记本的背景图片。
5. 您将在这个网页文件中，创建一个笔记本，点击打开该网页文件。
6. 现在开始编写代码，创建一个可编辑的笔记本程序。
7. 首先添加一对样式标签，用来设置笔记本中的各个元素的视觉样式。
8. 星号表示对网页中的所有元素进行统一的设置，此处的样式是用来避免在低版本的操作系统上，当用户点击网页视图时，出现的短暂闪烁的现象。
9. 接着设置网页的背景图片、间距、最小宽度和颜色等样式。
10. 设置可编辑的Div标签的间距、最小高度和滚动条信息，其横向滚动条将始终不显示。该可编辑的Div标签，将作为我们的笔记本。
11. 添加一个样式，用来设置Div标签内的文字尺寸，以及行距、边距等信息。
12. 最后添加一个样式，用来设置所有图片的视觉样式。
13. 添加一个脚本标签，用来编辑脚本代码。
14. 添加一个脚本函数，当执行该函数时，往Div标签，即笔记本中，插入一张图片。
15. 首先获得网页文档的选区对象。
16. 接着获得选区的选择范围，当选区不存在时，选区就是光标所在的位置。
17. 通过脚本语句创建一个新的容器标签，用来容纳一张图片。
18. 设置标签的位置属性为相对定位。
19. 然后创建一个字符串变量，用来加载项目中的一张图片。
20. 再次创建一个字符串变量，用来加载项目中的删除图片，该删除图片将作为上一张图片的删除图标。当点击该图标时，将从网页中删除该图标及插入的图片。
21. 接着将图片和删除图标，同时插入到Div标签中。
22. 然后将光标插入到Div标签中。
23. 接着将光标移至Div标签的右侧，从而当用户继续输入文字或插入图片时，将从刚刚插入的图片的后方开始输入。
24. 添加一个函数，用来响应删除图标的点击事件。
25. 当删除图标被点击时，将由该图标父节点的父节点，删除图标的父节点。从而删除包括被插入的图片和图标在内的多个元素。
26. 接着执行模糊方法，使Div标签失去焦点。
27. 添加一个函数，用来获得笔记本中的，包含图片和文字的所有内容。
28. 在网页中添加一个Div标签，并设置其可编辑属性的值为真，该标签将作为笔记本所有内容的容器。然后在左侧的项目导航区，打开视图控制器的代码文件。
29. 首先给类文件添加一个网页视图类型的属性。
30. 获得当前设备的屏幕尺寸信息，并通过屏幕尺寸信息创建一个矩形区域。
31. 然后通过矩形区域，初始化一个位于该显示区域的网页视图。
32. 设置网页视图显示垂直滚动条，并将网页视图添加到当前控制器的根视图。
33. 获得网页文件在项目中的路径，并将路径转换成网址的样式。
34. 通过网页视图的加载请求方法，加载该网址路径下的网页文件。
35. 添加一个按钮，当点击该按钮时，向笔记本中插入一张图片。
36. 设置按钮在正常状态下的标题，以及按钮的背景颜色。
37. 给按钮绑定点击事件，并将按钮插入到控制器的根视图。
38. 添加第二个按钮，当点击该按钮时，将获取笔记本中的所有内容，并保存这些内容。
39. 同样设置第二个按钮在正常状态下的标题，以及按钮的背景颜色。
40. 给按钮绑定点击事件，并将第二个按钮插入到控制器的根视图。
41. 添加一个方法，用来响应第一个按钮的点击事件。
42. 通过调用网页视图的执行脚本的方法，执行网页中的插入图片的脚本函数。
43. 接着添加一个方法，用来获取并保存笔记本中的内容。
44. 通过调用网页视图的执行脚本的方法，执行网页代码中的获取笔记本信息的脚本函数，并在控制台输出笔记本信息。接着启动模拟器预览项目。
45. 在网页视图中点击，开始笔记信息的输入。
46. 在弹出的键盘提示区，点击以输入某个单词。
47. 继续点击输入其它的单词。
49. 然后点击插入图片按钮，将在输入文字的后方插入一张图片。
50. 图片插入后，光标将自动移到图片的后方。点击键盘上的回车键，将光标移到图片的下方。
51. 点击完成按钮，关闭键盘并观察当前的笔记本。
52. 如果需要再次编辑笔记，只需再次点击网页视图即可。
53. 然后输入其它的笔记信息。
54. 点击第二个按钮，可以获得已经写入的笔记信息，同时留意控制台的日志输出。
55. 在底部的控制台输出了所有的笔记内容，您可以保存这些内容，当需要时只需再次载入即可。最后点击左上角的[停止]按钮，关闭模拟器，并结束本节课程。
本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载
