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