EverWeb Codebox

Code Insertion

What Code Goes Where?

EverWeb provides various ways to insert code into the correct place in the HTML doc. It's really important to understand which types of code go where and the effect that their position and content will have on the existing code.

Head and footer code can be inserted into every page of the site by using the head and footer code boxes in the Site Publishing Settings page.

Head and footer code is inserted into the individual pages by using the head and footer code boxes at the bottom of the Page inspector.

The code for objects that will appear in the page content is inserted by pasting it into an HTML Snippet.

NOTE: iWeb does not use code injection so it's important NOT to blindly copy over code from an iWeb Snippet!

The section below shows a basic HTML doc and where the various types of code are inserted...

<!DOCTYPE HTML>

<html>

<head>

     <title>Web Page Title</title>

     <meta http-equiv="content-Type" content="text/html; charset=utf-8">

Head Code Box

Any code pasted into the Head Code box will appear here. In general this would include meta data, links to external scripts and internal CSS.

</head>

<body>

HTML Snippet

Any code pasted into an HTML Snippet will appear in the body of the HTML doc. This can include HTML, inline CSS and, in certain cases, javascript pertaining to the object created by the HTML.

EverWeb injects this code into the content area of the page. If the object created by the snippet is required in the header or the footer, drag it into the appropriate area either while holding down the Command key or by checking the box next to "Allow free dragging" in the Metrics inspector.

<footer>

</footer>

Footer Code Box

Code pasted into the footer code box will apear just before the closing body tag - </body>

This is where javascript and links to external javascript files are inserted for items such as Google analytics, media players, slideshows and so on...

</body>

</html>

Code Comments

Code is commented to provide hints as to what the various items do and how they can be customized. These comments should be removed before publishing the page if a optimizer application is not being used to process the files before publishing.


HTML comments look like this - <!-- Comment goes here -->


Javascript will sometimes be commented like this...

<script type="text/javascript">

<!--

if (screen.width <= 600) {

window.location = "http://mobile.domain-name.com"; }

-->

</script>

In this case the comments - marked in green - MUST be removed for the script to function.


Individual lines of javascript can commented like this...


autoplay: false,     // true or false

transition: 'fade',     // transition options are 'fade', 'slide-left', 'slide-right'


The code will still work but it is inefficient to leave them in.


CSS comments look like this...


font:15px Verdana, sans-serif;color:#000000     /* change the font size, font family & font color*/


Again, the code will still work with the comments in place but it is better to take the time to remove them if you are not using an optimizer.