•   Original Author: Sergio Villarreal 
•   About the author: Mexico web designer, 1993 contact networks, personal home page for Overcaffeinated.net 
•   Original Source: sitepoint.com 
•   Original publication: May 27, 2004 

  Foreword 

  The first time I used to surf on the internet or dumb terminal.    Soon after, Minnesota, a monochrome Display by the server can even play movies "Python and the Holy Grail."    At that time, no mouse, and without a good user interface, not to mention the 24 color.    Gopher is the only available tool.    Search can only use Archie and Veronica.    Nobody heard of W3 (World Wide Web), the networks seem to have enough time spent. 

•   1. Dumb terminals.    Like PC, but not its own CPU, memory and hard drive.    Through common to the mainframe processing services. 
•   2.Gopher.    Client / server (client / server) applications, through the implementation of FTP transfer, remote login (remote login), Archie View, and so on, all the information in the form of the menu to the end-users (end-user), enabling users to browse large information.    So users can access the Internet resources do not need to know (or input) its address. 
•   3.Archie automatic indexing is the first anonymous FTP site on the Internet document procedures, but it is not a true search engine. 
•   4.Veronica Gopher is a type of resources you can use it in the Gopher search space designated special word contains all the menu items. 

  Then, after a period of time, strange code began filling my search results, although I am also able to read the content, but these codes are annoying.    Colleague told me it is HT ML, a graphical language internet, I have to try and learn some html filtered out.    Then, in a 256-color display and the Mosaic browser version, everything has become different. 

  From then to now has been a long time, have taken place in the incredibly technically enhanced web interface has also been countless times in a radical reform, rethink and reinvent.    I started from a Web designer, I personally through the forms-based design, the sorrow of JavaScript, css development efforts and, more importantly, more generally accepted standards in various web development period. 

  The beginning, the internet is in accordance with Geek (technical fanatics) by the creation of ideas, only pure internet content, they did not take into account Background colors and beautiful picture.    But in fact, people like to see more time surfing the rich form of expression.    Form (table) the emergence of the design method to resolve this difficulty, we can form to control layout!    We have begun to "cheat" system, not a pixel to the thread?    As long as the line in the table, insert a transparent GIF small point, then set up a background Color can be achieved!    Control fonts?    Then use another label <font>! 

  I am in contact with CSS and web standards, I have spent forms designed for many years.    Web design standards completely different from before, it is efficient, it is fascinating.    I am deeply and warm like a new design method.    It can be meaningful content from the layout code will be separated, but still maintain the design of spaces and beautiful, I am a "Chixinyajiu", and no longer use the old design. 

  On the web standards and CSS has been a lot of discussion, as a good keywords, it will become history of the development of web technology under a "VIP."    It began in Dougl as Bowman redesigned connection web site (Wired.com), and continue to develop.    2003, Zeldman wrote "Designing with Web Standards," a book published, so that we can see the dawn of the designers all over the world for the new design methods and embrace joy.    It is structured, it is semantics, it is fast and lightweight. 

  However, there are still some people to adopt the traditional forms design methods, even with <font> labels, they said the traditional methods easier, and more convenient maintenance and rapid development.    Who is right in the end? 

  I decided to do an experiment to see how things change, and we choose the method better in the end. 

  Challenges 

  I use the image software design of a hypothetical site.    And then to use it HTML4.01 produced by forms, without any CSS; contrast, reuse xhtml1.0 Transitional produced it, the easy-to-use code and accessibility norms, and use CSS, to avoid forms (unless tables performance data used to form.) 

  Three stages of the production process, and to record in detail the process, both sides of the comparison, look at what we have?    Lost?    We should stand on which side. 

  Stage 1: Design Site 

  I started to design a fictitious site.    I assume that called for a "Butterfly Watchers Association (Butterfly Watch)" organizations production site.    Oh, this might be my best customer, and would not be involved in the design process in the past.    I made it as far as possible to the real point, the hypothetical target site users, the traditional authority of the layout and Font comparison. 

  I hope that the site is compact and effective, Clear and concise.    And I think there should be butterflies on the page, I look around for a suitable picture of the Butterfly, soon found a picture in stock.xchng.    Blue Butterfly parked in the green leaves, very much in line with the image site.    After some treatment, modification, this map on our page header. 

  In the design process, I insist that some ease-of-use principle.    For example, as far as possible, the smallest file size picture.    I intend to start a navigation adopted in Garamond font, but taking into account the users of such machines may not have fonts, I decided to adopt the Georgia fonts (such similar Times New Roman font, worst-case scenario can be used Times New Roman font substitution) .    But in the header picture, I still use the Georgia because it is the picture. 

  The use of grey background text, the use of Trebuchet MS fonts; news adopted Verdana font, font that looks good at shrinking.    There is a unwritten rule is used in the design of a four kinds of fonts, how I do not agree with this point of view. 

  For those who observe the butterflies and the people I know little about them, I had been placed in an observation of rare butterfly article in the Home important position, and I think this is more interested in the content of users.    As an organization, there should be a large number of members, so I also put a number of Member Information.    At the same time the news is also essential, I also added a boost.    Then, also added a copyright, some of a decorative map, a slogans (They flutter. We watch them).    The layout of the entire page is a top (header) followed by his navigation menu, then two, the last line footer.    I will be the "About" menu is set to highlight to show onmouserover effect, the entire page looks like this: 

  Well, the code can now begin. 

  The second stage: "past practice, the use of transparent GIF picture to control the pitch." 

  If you have already participated in a number of projects of Web designers, the following structure is familiar to you: 

  <table Bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> 
<tr>
  <td Colspan="3" bgcolor="#545454"> <img src="/Files/BeyondPic/2006-1/15/0611509352062687.gif"" width="1" height="1" alt=""> 
  </ Td> 
  </ Tr> 
<tr>
  <td Bgcolor="#545454"> <img src="/Files/BeyondPic/2006-1/15/0611509352062687.gif"" width="1" height="1" alt=""> 
  </ Td> 
  <td Width="100%" align="center"> Content goes here. </ Td> <td bgcolor="#545454"> <img src = "/ Files/BeyondPic/2006-1/15/0611509352062687.gif "" Width = "1" Height = "1" alt = ""> 
  </ Td> 
  </ Tr> 
<tr>
  <td Colspan="3" bgcolor="#545454"> <img src="/Files/BeyondPic/2006-1/15/0611509352062687.gif"" width="1" height="1" alt=""> 
  </ Td> 
  </ Tr> 
  </ Table> 

  Form words, we have become accustomed to using it, because it is our most Basic "building blocks."    For example: in a transparent GIF picture to control spacing, using various forms of property to control the position.    It was so explained: form is reliable, with page layout of the forms will be backward compatible with!    Css did not dare to confront and forms, forms can be suitable for all browsers, and so on. 

  Let us begin step by step reproduction throughout the design process. 

  The first one hour 

  Oh.    Seem to turn the clock back, no CSS we use to define what background color? Oh, right ... is bgcolor, thank you tips.    , And began production of forms, preview effects.    My definition of "align = center," and this can be in the middle of all browsers, so good, and how this simple!    Form does not look like bad, I have a feeling with Laoyouchongfeng.    I am skilled in the use of transparent GIF picture to control spacing, the rapid advance!    TU?    In the header and the menu will be a gap between how?    Oh, the code behind the original images in a more spaces, IE browser it will be displayed.    This simple change to delete the spaces like. 

  No. 2 hours 

  I use the navigation menu javaScript production flip results: 

  <td ... OnMouseOver="chBg(this);" onMouseOut="chBg2(this);"> ...</ td> 

  JavaScript to write: 

  Function chBg (obj) (obj.bgColor = "# E1E5DB";) function chBg2 (obj) (obj.bgColor = "# CBD1C3";) 

  Apart from the old design, I kind of forgot, the progress is still quite fast.    Although I minimize nested forms, but the code still looks somewhat complicated, so I added some notes forward, we need to find a convenient place to amend. 

  Encountered a small problem: no css will not be able to eliminate the link underlined.    Perhaps a solution, let us use a google search. 

  No. 3 hours 

  After google search did not find a way, how can we not produced underscore the link?    Must be a solution! 

  No. 4 hours 

  Abhorrent!    Because we can not eliminate underscore, I can not continue to produce picture menu.    But the experiment developed my own rules, I can make an exception to breach.    I use a little bit of css to resolve, as long as release a style = "text-decoration: none;" in the links can be local, yay! Solve the problems underscore the menu. 

  Well, we can make the next major two.    The body of the butterfly picture I have two small framed forms to achieve results, like this: 

  Let us look at four hours before the results of the outside IE6 browser effect.    Oh!    Firefox in a very ugly, Opera and Netscape also looked good. 

  No. 5 hours 

  ... Continue to code, debug and modify. 

  Work, I recognize that labels control <font> Font Size limitations, I can not define a range of sizes.    Really damned! 

  News of the letter typesetting also encountered problems, in order to indent, I had to use more forms nested to achieve results.    In order to make the body of the text in the order of butterfly picture to the right, I have no choice but to increase the form to resolve.    This "deceit"-style layout makes me feel very helpless. 

  No. 6 hours 

  Design ended, and the original design looks almost, you can click here to see. 

  This includes the number of forms, click here to see. 

  The third stage: we do not need to form! 

  Below we will look at what the standard is based on the web, with the css layout design.    I will start as the logo.    I will try to make a logo semantics to avoid unnecessary labels. 

  The top is a picture, but it is also a topic, so I wrote code: 

  <h1> Butterfly Watchers Association. They flutter. We watch them. </ H1> 

  I will later consider how to correct this title (ideal circumstances, we care as much as possible, as little as possible layout of the concern).    Other title (news, Sightin gs and Membership) will be marked as <h2>. 

  Fundamentally speaking, the menu is a disorder List (list), so the list will be marked.    Categories do not need paragraphs (we used to the succession of choice for their "hang" contained in the layer).    I will contrast the content of the original text, layout needs to see in order to achieve an additional increase in the number of labels (I will try to avoid an increase in label). 

  This is the content of the original text.    Look at the original code, it is consistent with xhtml1.0 transitional norms.    Paying attention to all the elements have been included in the definition of the name of <div>.    News was also the date of the date of the class (class).    You can see the code is very simple. 

  The first one hour 

  Definition of "container" of the Border for a px.    By definition in the body style, "text-align: center" will be content middle.    To all browsers are middling, of the "container" in the definition of the margin: 0 auto; (mean = 0 is the top, right = auto, Bottom = 0, left = auto).    Intermediate processing methods and forms as easy. 

  Definition of "body" Padding "top" and "bottom" value is 20 px (not directly in the "container" in the definition of padding to suit all browsers). 

  List disorder (li) must be defined as "display: inline," and this menu will be displayed within the party.    I increased the navigation menu icon.    These navigation icon is used methods not repeat the definition of background, can be precise definition of (x, y) position, something like this: 

  Background: url (menuBullet2.gif) no-repeat 4px 9px; 

  Click on the menu changes color effects using links hover style, no longer needed JavaScript. 

  I set up the first page of the butterfly picture for <h1> background, and this may need not worry about ease of use, the picture could not show that the equipment (such as screen readers and search robot) can also read the title of normal. 

  No. 2 hours 

  The first menu (HOME) use a different icon, I have to hide the original background, HOME menu for an additional increase in the id (frst): 

  # # Frst hMenu ul li 

  Then another (CONTACT) icon: 

  Background: transparent url (menuBullet3.gif) no-repeat 615px 9px; 

  I can not control two with the CSS has the same height, fortunately, I can achieve modifications to the background picture.    My definition of a "container" vertical repeat background. 

  Background: # fff url (bgMain.gif) repeat-y; 

  No. 3 hours 

  CSS is a box more convenient than the forms, in particular the many attributes of the border is very useful. 

  I now begin the definition <h2> title.    Icon and the definition of the same method as above. 

  I will be "news" floating layer (float) in the "sightings" and "membership" of the right.    Definition of "copyright" layer "clear: both;" so that it can follow in the floating layer below.    Butterfly will be in the body floating in the right picture, text can be automatically surround the picture around.    Definition of a picture px border and settings can be achieved padding from the original two forms nested results. 

  Also found that some of the problems: Copyright layer and the contents of some overlap. 

  No. 4 hours 

  Showing error and the "sightings" and "membership" float: right; relating to the definition.    They will be floating in the left side of this problem can be solved, this looks very strange.    I use firefox for the first test, TU, looks not bad, but there are several menu icon pixel shift. 

  CSS techniques can have some amendments in the non-IE browser display, for example, to different browsers different attribute values. 

  I use the same definition of the elements! Important value, the same definition EDITORIAL priority implementation, the value of which does not support the IE browser. 

  Background: url (menuBullet2.gif) no-repeat 4px 6px! Important; 
  Background: url (menuBullet2.gif) no-repeat 4px 9px; 

  In CSS, if there are many definitions of the same elements, the last one is effective.    But because IE does not support! Important, IE will use the second definition of value, and other browsers will use a definition of value. 

  Completed to see the results here. 

  Conclusion 

  Based on the design of forms 

  I used to find all kinds of browsers to test pages, including linux, windows and Macintosh platforms browser.    Form layout of the pages in different browsers look alike.    "It's as solid as rock," and this is to form the layout of the first evaluation. 

  However, when the need to amend the part of the contents page, the layout changed to a form easily.    This is a problem, if we use CMS (content management system), which needs to be formatted relatively trouble. 

  The whole design a long time, because I have been somewhat forgotten the old methods, if re-again, I think it might save 1-2 hours. 

  I described the design is based on the forms of the large number of "old-fashioned (grunt work)", and although I often surprising to those who advanced design techniques.    CSS-based design, I usually used to design and progressive decomposition analysis bug.    The use of these forms design work is not required, as long as you keep throwing inside to the design table on it.    Let us then look at the CSS process. 

  Based on the design of CSS 

  CSS design with a feeling much better.    Code change directly and transparent, I can clearly in control of the whole process, looking back at the table as in the design of brick base.    Pages greater change, the more we feel CSS design convenience and efficiency. 

  CSS also designed to save bandwidth is very meaningful, will be extracted on all forms separate document, the entire site with a style sheet or several documents, so that the entire site can be even smaller size. 

  Distribution of information will be separated from the content, there are many benefits.    In the future, I can be revised at any time throughout the site without the need to modify any content, as CSS Zen Garden.    At the same time has also increased the ease of use, search robot will be more convenient found your page (Remember: google is your most important source of visitors). 

  In the production of finished, I am equally in different browsers on different platforms for testing.    IE5.5 and IE6.0 perfect.    IE5.0 error appeared on the menu and some indentation failure, and misplacement of the first results page look at the picture below: 

  Well no doubt about this bug can be repaired, but considering the scope of the theme of this article, I do not speak the start.    If this is a true customer projects, I am sure I E5.0 not at the expense of users.    More point in the old browser, CSS design performance in the mess. 

IE4

  Netscape 4.7x 

  If we do not support the browser css code dealing with some (such as the use Netscape @ import) will look better. 

  Although when you are familiar with CSS Based on the design of highly efficient, but before you have to spend a lot of time learning rules, the different box model, the browser handling skills, as well as many theories, and the need to continue the practice of master.    In short, CSS tables more than simple, but if you want to use pure CSS design, prepared to invest a lot of time learning.    Even if you are a seasoned experience in the development of master, but also ready to deal with various bug, and sometimes dealing with a bug will spend several hours. 

  Winner 

  CSS and standards-based web design wins.    Just take a look at two methods of code is enough to make a choice.    CSS provided more benefits (mainly in the ease-of-use).    In fact, the fundamental reason is that the lazy.    If form design, customer contact, I said that one year after the needs revision, I will tell him that I joined the army, is a foreign village.    If I use the CSS, I would not think for clients facelift, all because I do not need to overthrow the weight. 

  Thanks 

  Thank you, Ava McBride, I use Browsercam help test the design.