|
Designing with Style
Designing with style is easier to understand when you stop looking
at a web pages as a single entity. Instead, look at each page as if
it were ascollection of components; company banner, navigation,
contact informations, content, advertisements, copyright, etc.
You then use HTML commands
and attributes to define and label each component. Once this is done
you can use the various style rules to select and position these
components to create the page in a browser window or on a printer.
As we get deeper into this section, you will see how to select a
unique collection of components for the screen display and a
different collection of components for the printed page.
Once you are comfortable with the selection of a different
collection of components for the printer, it is a logical next step,
using Media Queries or Variable HTML, to select and reposition a
different collection of components based on the width of the browser
window that is displaying your page; i.e., adaptive web design!
Note: The variable content of the pages of this website are being
combined with alternate collections of fixed components to display
the site in both a fluid design style and also a series of fixed
width designs. The links at the bottom of each page allow you to
easily switch between the two designs.
This is not something that you would normally do, but it does
illustrate how easy it is to change your overall design using style
rules. The actual maintenance of the parallel sites is being done
with our MySSI program.
CSS will be the way of the future … it’s time to learn it now?
CSS is an extremely powerful style design language that controls
the look and feel of HTML content. Since all the visual
characteristics of a website can be completely separated from the
actual content, the use of CSS to design a website allows us to
quickly create layouts.
The resulting CSS designs are more flexible
and much easier to maintain and modify.
Since the coding of most complex sites will be reduced by 25% to
50%, the sites will also load faster and use a lot less bandwidth.
But, the most important advantage of using CSS to design your site
is that you can easily create an alternate stylesheet to make your
pages printable, or in this case, multiple designs for the Variable
HTML display.
What HTML coding helps with page design?
ID and CLASS - (attributes)
Before we can do anything with the page layout, we have to identify
the various elements. Some of our page elements are unique; there
is only one ad column and only one navigation column, so, if we are
using tables to create the page layout, we can simply add an ID
attribute to the HTML TD commands that contain them; ID’s are used
only once per page to identify unique elements.
Since the fluid content can appear in either one or two columns,
and since it can also switch back and forth multiple times on each
page, these elements are defined with HTML CLASS attributes; classes
can appear multiple times on a page.
DIV and SPAN - (commands)
Defining a page element is easy when that element is contained in a
single HTML command. Where do you put the ID or class tag when the
element contains multiple paragraphs, a list, and an image?
The DIV command has no features of its own; it does not add any
space, change font, or anything else. It just defines a block of
code which can contain other blocks of code, and of course can be
defined as an id or class.
The SPAN command works the same way for phrases within a code
block, similar to the italic and bold commands.
|
