Website tips
Website layout: Use CSS—not tables.
Pre-CSS web pages employed HTML tables in order to create its structure, and even today some web designers still prefer to use tables for layout. However, most web pages use CSS for formatting and layout. Several older HTML tags or attributes previously employed with layout tables are now either obsolete or deprecated, so if they are used, they will show up as being invalid code when examined with an HTML or CSS validator. So, employ appropriate CSS styles for web-page layout.
CSS layout
Most CSS layouts use HTML div elements to separate the web page usually into three sections:
- header
- container or content
- footer
The header usually contains a banner or masthead and, very often, a top-navigation section. The container holds the main content for the web page and sometimes a side-navigation section. The side navigation can serve as a detailed table of contents for the entire website, whereas the top navigation only displays the highest-level subheads (headings). The footer could contain such matter as a copyright notice, some information about the website owner, and various links.
Microsoft Word can automatically convert a DOC or DOCX file to HTML. The resulting HTML file adds a combination of internal and inline CSS to the HTML. The inline CSS code could bloat the file size tremendously if the Word file contains any tables because many individual table cells will contain the needed inline CSS data for formatting purposes. Such a converted HTML file will operate OK in a browser, but the bloat could slow down its display.
An HTML file created by Microsoft Word 2010 will have a different file icon when such an HTML file is viewed in the File Manager in Microsoft Windows. Preferably, use “regular” HTML files instead of Word HTML files for your websites. The copyediting section in this website will demonstrate how to effectively copyedit an existing HTML file with Word 2010 and then manually covert it to a regular HTML file.
Add tabs to top navigation using CSS
The top navigation for this website employs tabs that were created by a special CSS method known as the “sliding doors technique.” You can learn how to incorporate these tabs into your own websites by studying the two-part article series: Sliding Doors of CSS by Douglas Bowman. The second article is not linked from the first, so here is the link for Sliding Doors of CSS, Part II.
You can make your own special graphics for the tabs, or you can download a ZIP file on this website that contains the XHTML and graphics files that the author, Douglas Bowman, used in his examples. The website that contains the two articles referenced above—A LIST apart—has over 300 other articles for website design.