Separation of Layers of Webpage Code
By Stephen Bucaro
One thing that is almost a sure bet in webpage design is that eventually someone will
be required to make changes to a webpage. In addition to the content (text, images, links,
etc.) all webpages contain code that defines the structure of the webpage (html or xhtml),
and most contain code that defines the presentation of the webpage (CSS) and the behavior
of the webpage (JavaScript). You can dump all that code onto the page in a disorderly
manner making future changes very difficult, or you can separate your code into functional
layers, making future changes very easy.
| Behavior |
| Presentation |
| Structure |
| Content |
The chart above shows the content as the bottom layer or foundation of a webpage. The
content is the text, images, links and other information that gos on the webpage. In large
organizations the content is written by totally different individuals that those that
design the layout of the webpage. The webpage designers use html or xhtml code to
structure the webpage. Html code defines the headings, paragraphs, tables, and so on that
control the layout of the webpage. In most cases (but not always) the html and content are
together on the webpage.
In the old days, html was used to define the presentation of the content on the webpage.
For example the font, text color, and background color or image was defined by html tags.
Many webpage designers and webpage development tools still use html tags for this purpose.
However, most html tags that define presentation are deprecated. Deprecated means about the
same thing as "obsolete", so don't count on future web browsers supporting those tags.
Modern webpage designers use CSS (Cascading Style Sheets) to define these visual
aspects of the webpage. CSS is also frequently used for structural purposes such as
positioning. CSS allows the webpage designer to define the presentation in a separate
layer than the content. This is accomplished by giving each html element a class attribute
or an id attribute and then defining the font, color, border, background, and other visual
elements of the html element in a style code block.
The advantage of using a style code block as a separate layer from the content and html
is that styles for a webpage or an entire website can be maintained in one area. For
example a single style sheet can contain the styles for an entire website, and this style
sheet can be linked to every webpage in the website. To change a style for every page in
the website the webpage designer need only make a change to one style sheet.
In the old days, webpages were static. Once the webpage was displayed by the web
browser, what you see was what you get. But modern webpage programmers use JavaScript to
give a webpage the ability to change without requiring an access of the web server. These
changes or behaviors are usually programmed to be as a result of the user clicking or
moving the mouse. An action or event can cause anything from content to change, to complex
calculations to be performed on data the user entered into the webpage. JavaScript can
even be used modify CSS properties, thus changing the presentation.
In large organizations the webpage programming is perfomed by totally different
individuals that those that design the layout of the webpage. To keep the webpage layout
and content clean and organized, the JavaScript code is usually placed in a code block as
a separate layer from the html and styles for a webpage. The advantage of using a
JavaScript code block as a separate layer is that the JavaScript code can be maintained in
one area.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
