EverWeb Codebox

Creating Content Blocks

What is a "Content Block"?

This section of the EverWeb Codebox is about exploring methods of getting a large amount of content into a web page without creating a long, long page and so that visitors can find related info quickly and conveniently.

Features like tabs and accordion panels usually require that the content be created using HTML and CSS. This method shows EverWeb users how to create the content in EW rather than use code.

For want of a better name, these will be called Content Blocks.

Content for iFrames, Tabs & Accordions

Instead of using code in an HTML Snippet for the content for space saving features, it can be created using another page in the EverWeb project.

These pages are excluded from the navigation menu. They don't need a header - or a footer in most cases - and the page width is set so that it will fit into the parent document.

These "content block" pages are inserted into the parent doc using iframes. Use the iFrame Widget to do this quickly and easily.

Creating a Content Block Directory

If a project requires several content blocks, they can be created in a separate directory to keep them organised. In some situations it may be sensible to create a directory for each project if there are several of them containing a few pages each.  

Relative File Paths

A relative file path is the URL to any file contained in the website's root folder from any other file in the same root folder. A relative path from a page in one directory to a page in another would look like this...

../directory-name/page-name.html

... where page-name is the name of the file that is being linked to and directory-name is the name of the containing folder.

These differ from the absolute path which starts with the domain name ...

http://www.domain-name/folder-name/page-name.html

Absolute paths will not work unless the file is upload to a server.

Relative paths do not need this part of the URL - http://www.domain-name/ - and their main advantage is the fact that the file will load faster than one in the same website which is referenced using an absolute path.

Relative File Path Examples

The ROOT folder is the one which contains all the files and folders for the website

If two pages are in the root folder or in the same directory folder, the path inserted into the hyperlink is simply..

page-name.html

If the page containing the hyperlink is in the root folder and the page the hyperlink points to is in a directory, the path is..

directory-folder-name/page-name.html

When the page containing the hyperlink is in a directory and the page the hyperlink points to is in the root folder, the path will be...

../page-name.html

The ../ creates one backward step out of the folder.

When the page containing the hyperlink is in a directory and the page the hyperlink points to is also in a directory, the path will be...

../directory-folder-name/page-name.html

... so the path backs out of one folder and then into another.

When it comes to linking pages contained in sub directories inside directories to others in different folders, it starts to get a little more complicated. This shouldn't be necessary unless the website is huge.