Effective Web Design Layout

Last updated
Save as PDF

Page ID: 185153

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

anatomy-of-effective-website-design_5592168c3541f_w1500_571ea146cb5e6.png

Most of us have experiences using word processing programs and have become accustomed to how those products work. It is nice to be able to transfer knowledge of one program to another. However, it is important to note that many of these commonly used word processing features will not work in an HTML editor, such as KompoZer.

Using word processing allows you to do a lot of point and click formatting. KompoZer offers that to a great extent, but HTML dictates how you can structure your page objects (text, images). One of the tools for positioning objects on a Web page is tables, in advanced web design classes you will learn to use CSS for layout, but that is beyond the scope of this class.

Read the article, 20 Do's and Don'ts of Effective Web Design. Then answer the questions on the next page about the reading.