Introduction to EverWeb Codebox
EverWeb is a very intuitive application for designing websites in the tradition of Apple's now defunct iWeb.
One major difference is that EverWeb uses true code injection which makes it possible to create just about any web site feature that you can think of.
This website is NOT about how to use EverWeb. The application's tutorials and videos cover all that stuff.
EverWeb Codebox is for the more advanced user, and ambitious beginner, who wants to take advantage of the powerful features available through using the code entry boxes and the HTML Snippet.
Code can be injected into three places in the HTML document for any page of the site.
1. The document head just before the closing head tag </head> via the Head Code box
2. The <body> via an HTML Snippet
3. Just before the closing body tag - </body> - using the Footer Code box
Before you attempt to inject code, make sure you read through the CODE section of this site to gain an understanding of the various types of code and what goes where.
The HTML Snippet can be found by clicking the "Widgets" tab in the right column of the application window as shown to the right.
Drag this onto the design canvas area. A box will appear on the design canvas where the Widget will be created and the Widget Inspector panel will open with a box for pasting the code into.
After pasting in the code and clicking the "Apply" button, the object should appear on the design canvas and it's boundaries can be adjusted using the drag handles or, more precisely, the Metrics inspector.
Note to ex-iWeb users...
The iWeb HTML Snippet does NOT use code injection. It is really important that you do not copy over the contents of iWeb Snippets to the EverWeb version without knowing what you are doing!
Rather than injecting code into the page HTML doc, the iWeb snippet actually creates a separate HTML doc. This means that an iWeb Snippet code can include the doctype declaration, head code and internal CSS which you must NOT insert into the body of the HTML doc in EverWeb. Doing so can invalidate your code, create problems in the browser and make you look very foolish in the eyes of those of us who know about this kind of stuff!
The figure to the left shows the Widgets inspector panel along with the HTML code box with some HTML code in it and the "Apply" button
This particular code is for an <h2> heading and the result can be seen to the right.
The widget can be resized by dragging the handles or, more precisely, by using the height and width settings in the Metrics inspector. Check the box next to "Constrain Proportions" if you need to maintain the original aspect ratio as the box is dragged around and/or resized.
Since an element like a heading is used on every page of the site, the associated styles would normally be set in the site wide Head Code Box.
Custom styles can also be set by using an inline style in the HTML Snippet. More about this on the CSS page in the Code section of this website.
Code is inserted into the head or the footer using the code boxes in the Site Publishing Settings page or the Page inspector.
Site Wide Code
Code that is required on every page of the site should be pasted into the site wide code boxes in the the Site Publishing Settings page. This would include...
Meta data such as a link to a favicon
Styles relating to items that appear on every page such as navigation menu, header and footer content and headings
Links to external stylesheets
Analytics code such as Google Analytics
Page Specific Code
Code relating to items that appear on only one or two pages should go into the page code boxes. These would include...
Link to an external stylesheet required for an item like a slideshow
Styles for HTML elements peculiar to that page
The page Head Code and Footer Code boxes are shown to the right along with some typical content.
Note that styles pasted into the Head Code box need to be contained in style tags like this...
Styles can included in an HTML snippet. In this case they need to use an inline style. Here's an example for a paragraph...
<p> style="font:15px 'verdana', helvetica, sans-serif;color:#eee">Paragraph Text</p>