iaindooley/Decal CMS Extended Tour Step 5

## Decal CMS Extended Tour Step 5
<html>
    <head>
        <title>My page</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="mainContent">
            <div area="Heading content" id="headingContent" editable="true">
                <h2>You can use any formatting here, including images and embeds</h2>
                <p>If you put in a bunch of content in here, then embed an image just like in the instructional video you'll see you can move it around.</p>
                <p>You can do the same thing with embeds.</p>
                <p>The one thing you should notice is that the dropping and placement of images is a bit cumbersome. Although you can drag images around and position them when you release the mouse it's not always ending up in the correct spot.</p>
                <p>This is because, unlike other WYSIWYG editors, Decal doesn't use hard coded inline styles to allow you to place images wherever you like. This is technically better, but makes for a lousy user experience when editing the page.</p>
            </div>
            <div area="Image content" id="imageContent">
                <h2 editable="true" tags="none">If you create a more structured format</h2>
                <p editable="true" tags="inline">You can use editable images to make the user experience much simpler, and the design of the site much more difficult to break.</p>
                <p><img editable="true" width="400" src="http://dummy.mockups.decalcms.com/400x200?text=Right+click" /></p>
            </div>
            <div area="Video content" id="videoContent">
                <h2 editable="true" tags="none">You can use the tags="embed" attribute to create an area that will prompt someone to embed a snippet (eg. video or form)</h2>                <p editable="true" tags="inline">This makes the task of getting someone to embed a video much simpler than expecting them to embed an object in an openly editable area</p>
                <div editable="true" tags="embed">Click here to embed a video</div>
            </div>
        </div>
        <div id="instructionalContent">
            <h2>A short video about this page</h2>
            <iframe src="http://fast.wistia.net/embed/iframe/yfalhplzdu?controlsVisibleOnLoad=true&version=v1&videoHeight=338&videoWidth=600&volumeControl=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="600" height="338"></iframe>
            <h2>The code that creates this page</h2>
            <script src="https://gist.github.com/4706087.js"></script>
        </div>
    </body>
</html>
	<html>
	<head>
	<title>My page</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>
	<body>
	<div id="mainContent">
	<div area="Heading content" id="headingContent" editable="true">
	<h2>You can use any formatting here, including images and embeds</h2>
	<p>If you put in a bunch of content in here, then embed an image just like in the instructional video you'll see you can move it around.</p>
	<p>You can do the same thing with embeds.</p>
	<p>The one thing you should notice is that the dropping and placement of images is a bit cumbersome. Although you can drag images around and position them when you release the mouse it's not always ending up in the correct spot.</p>
	<p>This is because, unlike other WYSIWYG editors, Decal doesn't use hard coded inline styles to allow you to place images wherever you like. This is technically better, but makes for a lousy user experience when editing the page.</p>
	</div>
	<div area="Image content" id="imageContent">
	<h2 editable="true" tags="none">If you create a more structured format</h2>
	<p editable="true" tags="inline">You can use editable images to make the user experience much simpler, and the design of the site much more difficult to break.</p>
	<p><img editable="true" width="400" src="http://dummy.mockups.decalcms.com/400x200?text=Right+click" /></p>
	</div>
	<div area="Video content" id="videoContent">
	<h2 editable="true" tags="none">You can use the tags="embed" attribute to create an area that will prompt someone to embed a snippet (eg. video or form)</h2> <p editable="true" tags="inline">This makes the task of getting someone to embed a video much simpler than expecting them to embed an object in an openly editable area</p>
	<div editable="true" tags="embed">Click here to embed a video</div>
	</div>
	</div>
	<div id="instructionalContent">
	<h2>A short video about this page</h2>
	<iframe src="http://fast.wistia.net/embed/iframe/yfalhplzdu?controlsVisibleOnLoad=true&version=v1&videoHeight=338&videoWidth=600&volumeControl=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="600" height="338"></iframe>
	<h2>The code that creates this page</h2>
	<script src="https://gist.github.com/4706087.js"></script>
	</div>
	</body>
	</html>