Word: Layout (Website)

The layout is the visual aspect of the website that makes all pages look similar. The AWWshop definition for layout and template are not the same. A lot of people use the word template as the AWWshop meaning for layout, and that's okay, there is nothing wrong with that until now.

A layout is created by just using one HTML file, one CSS file, and rarely one JavaScript file. Once the layout is created, it can be inserted into the AWWshop template, or even a backend project. Microsoft uses the word layout for the style component of a MVC website, the concept really is from there. The difference in an AWWshop and MVC project is that the layout is in template.js not layout.vb. The reason for the difference was so that a programmer could make everything under layout.js and it would mesh with the AWWshop project.

Template.js follows a Top and Bottom scheme for the following CSS setup:

Take Note: You can customize your project experience by adding your very own layout.js to the project. The class name Layout has not been used.

So here is why and how you do it:

  1. You have more procedures than just Top and Bottom for template.js.
  2. Put your layout HTML in template.js and follow the previous CSS setup. If you need JavaScript, create /script/shared/layout/layout.js and follow on.
  3. The Deferment Project contains a great example of implementing layout.js.

Replace ClassName in the following code with Layout and you are good to go. (The private procedures can only be called from inside the parent class.)

Depending on needing functions for loading, your layout may work the same with all projects. Just add reference to layout.js from template.js load (In between the class declaration and the first procedure.).

Something like:

For more on choosing a project, check out the AWWshop Fundamentals Anchor page, then follow on to Deferment and Devices before deciding on a project.