Original author: Sergio Villarreal About the Author: Mexico web designer, in 1993 access to the Internet, personal home page for Overcaffeinated.net ORIGINAL: sitepoint.com Original Published: May 27, 2004
Foreword
I first rumored on the Internet or dumb. Soon, a monochrome display of Minnesota can actually play movie "giant and holy cup" through the server. There was no mouse at that time, there was no good operating interface, and there was no need to say 24 characters. Gopher is the only tool available. Search can only use Archie and Veronica. No one heard of W3 (World Wide Web), when the network appeared enough.
Translator Note:
1. Dumb end. Very like PC, but there is no its own CPU, memory and hard drive. Treat your transaction through a common host. 2.gopher. A client / server (Client / Server) application, by performing FTP transfer, remote login, Archie lookup, etc., all information is displayed to the end user (End-user) in the form of menu, and users can browse a lot. information. This allows users to access the Internet resources to do not need to know (or enter) its address. 3.archie is the first procedure for an anonymous FTP website file on the Internet, but it is not a real search engine. 4. Veronica is a Gopher type resource that you can use in the Gopher space to retrieve all menu items that contain specified special words.
After another time, the strange code started to flood my search results. Although I can read what you need, these code is annoying. Colleagues told me that ht ml, an Internet graphical language, I have learned some ways to try to filter out HTML. Later, a 256-color display and the first version of the Mosaic browser appeared, and everything began to become different.
Since then, it has been a long time. It has already happened in technology, and the web interface has also been thoroughly reforms, renew and re-transform in numerous times. I started to become a web designer, I personally gave birth to the form-based design, the sorrow of JavaScript, the development of CSS efforts, and more important, more commonly accepted Web standards.
At first, Internet only created according to GEEK (technology fanatic) idea, only pure content on the Internet, they did not take into account background colors and beautiful pictures. But in fact, people like to see a richer expression in surfing. The presence of a table design method solves this difficulty, we can control the layout through the form! We have started "deceiving" system, can't make 1 Pixel thin line? Just insert a transparent GIF dot in the line of the table, you can set it up! Can't control font? Then use another label !
Before I arrived with the CSS and Web standard, I have used the table method for many years. The design method of the Web standard is completely different from before, it is effective, it is charming. I deeply like new design methods. It can use meaningful code to separate the content from the layout, but still maintain spaces and beautiful design, I will "happy new and old", no longer use old design methods. until today.
About Web Standards and CSS have now had a lot of discussion, just like every good keyword, it will become a "big man" in the history of Web technology development. It begins to redesign the connection website (wire.com) and continuously develop at Dougl AS Bowman In 2003, ZELDMAN wrote a book, and let us have seen the dawn, and designers around the world have hugged a new design method. It is structured, it is semantic, it is fast and lightweight. However, there are still some people to use traditional form design methods, even in the tag, they say that traditional methods are easier and more convenient for maintenance and rapid development. Who is it correct?
I decided to personally make an experiment to see how things change, we have to choose which method is better.
challenge
I designed an imaginary website with image software. Then use HTML4.01 to make it, use the form, do not have any CSS; as contrast, use XHTML1.0 Transitional to make it, the code is easy to use and accessibility specification, and use CSS to avoid the form (unless the table is Used to express formation data.)
The production process is divided into three phases, and the process is recorded in detail, and the comparison of the opposite side is performed. What did we get? What did you lose? Which side should we stand.
The first stage: design site
I start designing fictional sites. I assume that it is a organization called "Butterfly Watchers Association". Oh, this may be my best customer, will not participate in the design process. I try to make the real one, and the goal of the website is the target user of the website, using the traditional layout and compare the authoritative font.
I hope the site is compact, effective, concise. Moreover, I think there should be butterflies on the page. I am looking for a suitable butterfly picture, so I will find pictures in stock.xchng. Blue butterfly stops in green leaves, very in line with the image of the site. After some processing, modification, this picture is the header of our page.
In the design process, I adhere to some of the ease of use. For example, try to minimize the picture file size. At first I was ready to use the Garamond font on the navigation, and later considering that the user's machine may not have this font, I decided to use the Georgia font (this font similar to Times New Roman, the worst case can be replaced with Times New Roman font) . But on the header picture, I still use Georgia because it is a picture.
Text uses a gray background, use the Trebuchet MS font; the news uses Verdana fonts, which looks very good when this font is shortened. There is an unwritten rule that I don't agree with this view in a design.
I know very little about the butterflies and those who observe them, I put a story about the rare butterfly on the top page Important, I think this is the content of the user is more interested. As an organization, there should be many members, so I also put some member information. At the same time, news is essential, I have added it. Then, copyright, some pixel decorative diagrams, a slogan slogan (They flutter. We watch them.). The layout of the entire page is a header (header) is then a line navigation menu, then 2 columns, the last line Footer. I set the "About" menu to highlight to display the ENMOUSEROVER effect, and the entire page looks like this:
Ok, you can start the code now. The second phase: "Use the previous practice to use the transparent GIF picture to control the spacing."
If you are already a web designer who participated in multiple projects, the following structure is you familiar with:
content goes here.
Let's start a step in step by step.
First hour
Oh. It seems like time backflow, don't use CSS what we use to define the background color? Oh, to ... is BGColor, thank you prompt. Ok, start making form, previewing. I defined "align = center" so you can live in all browsers, it's too good, how simple is it! The form looks like it is not bad, I have the feeling of reunation with my old friends. I am skilled in using a transparent GIF picture to control the spacing, and the work is flying away! Yep? Why do you have a blank between Header and menus? Oh, it turns out that there is a space behind the image code, and the IE browser will display it. This is simple, and it is good to delete space.
Second hour
I use the JavaScript to make the flip effect of the navigation menu:
...
JavaScript writes this:
Function chbg (obj) {obj.bgcolor = "# e1e5db";} function chbg2 (obj) {obj.bgcolor = "# CBD1C3";
In addition to my old design method, the entire progress is still quite fast. Although I try to minimize the nesting of the form, the code seems to be a bit complicated, so I added some comments to facilitate finding what we need to modify.
I have encountered a small problem: I can't eliminate the underscores of the link without CSS. Maybe there is a solution, let us search with Google.
3rd hour
After Google search, I still have a way to find a way, how can I make a link without undressing? There must be a solution!
Last 4 hours
hateful! I can't continue to make a picture menu because I can't eliminate the underscore. However, the rules of this experiment are what I have, I can break it. I use a little CSS to solve, just put a style = "text-decoration: none;" in the link is available, Yay! Solved the problem of menu underline.
Ok, we can make the main 2 columns. The butterfly picture in the body I used 2 forms to achieve the fine border effect, just like this:
Let's take a look at the results of the previous four hours of the browser outside the IE6. Oh! It is very ugly in Firefox, which looks good in Opera and Netscape.
5th hour
Continue code ..., debug and modify.
In the work, I realized the limitations of the tag control font size, I can't define multiple sizes. It's really damn!
The text typography of the News section has also encountered problems. In order to indent, I have to achieve the effect with more forms. In order to arrange the butterfly picture in the text in the right side of the text, I have to add form to solve. This type of "deception" is very helpless.
6th hour
The design is over, it looks similar to the original design, you can click here.
Which form is included, click here.
Third stage: We don't need forms!
Let's take a look at what is based on Web standards, design with CSS layout. I will start with the identification of the content. I will try to make the identifier have semantics to avoid excess labels.
The page is a picture, but it is also a title, so I write this code:
Butterfly Watcher. They flutter. we watch them.
I will consider how to display this title correctly (ideally, we should care about the content as little as possible). Other headings (NEWS, Sightin GS and Membership) will be identified as
.
The menu is fundamentally unquenceless list (list), so it will be identified as LIST. Paragraphs do not need to be classified (we use inheritors to "hang" in the included layer). I will compare the original content text, see how much additional labels need to be added to implement layout (I will try our best to avoid increasing labels).
This is the original content text. Take a look at the original code, which is in line with the XHTML1.0 Transitional specification. Note that all elements have been included in
defined names. The date in the news was also added with the Date class (Class). You can see that the code is very simple.
First hour
Defines the Border of the "Container" layer to 1px. Cancel the content by defining "text-align: center" in the Body style. In order to place in all browsers, margin: 0 auto is also defined in "container"; (meaning TOP = 0, Right = Auto, Bottom = 0, Left = Auto). The treatment method and form is as easy. Define "Body" Padding "top" and "bottom" value of 20px (not directly defined in "Container" is to fit all browsers).
The unordeline list (Li) must be defined as "Display: Inline" so that the menu is displayed in one line. I added a navigation icon between menu. These navigation icons are defined using non-repeated background methods, which can be accurately defined (x, y), similar to this:
The click color change effect of the menu uses a link to the HOVER style, no need JavaScript.
I set the button's butterfly picture for the
, so you don't have to worry about ease of use, and you can read the title normally in the device that cannot display images (such as screen readers and search robots).
Second hour
The first item of the menu uses a different icon, I have to hide the original background, add an additional ID (FRST) for the Home menu:
I can't use the CSS control 2 columns to have the same height, fortunately, I can use the background picture to be implemented. I defined "Container" portrait repeating background.
Background: #fff url (bgmain.gif) REPEAT-Y;
3rd hour
The CSS definition box is much more convenient than the table, especially many attributes of the border.
Now I start define the
title. The definition of the icon is the same as the above method.
I will float "news" (float) on the right of "Sightings" and "Membership". Define "Copyright" layer "Clear: Both;" so it can follow the floating layer. Floating the butterfly pictures in the body on the right, text can be automatically surrounded around the picture. 1PX Border and setting the Padding distance to set the Padding distance to achieve the effect of 2 table nested.
I find some problems: The copyright layer is partially overlapping with the content layer.
Last 4 hours
The error is related to the FLOAT: Right; Right; definition of "Sightings" and "MEMBERSHIP". Floating them on the left can solve this problem, which looks very strange. I used Firefox for the first test, Well, it looks still not bad, just the icon of the menu has a few Pixel shift.
There are some CSS techniques to fix the display effects of the non IE browser, such as differential values for different browsers.
I am using the same element definition! IMPORTANT value, the same definition is written in front, this value is not supported by IE browser.
In CSS, if the same element has multiple definitions, the last one is valid. But because IE does not support! Important, IE will use the second definition value, while other browsers will use the first defined value. All complete, see the results here.
in conclusion
Form-based design
I use a variety of browsers that can be found to test the page, including browsers for Linux, Windows, and Macintosh platforms. The page layout page is the same in different browsers. "It is as strong as the rock", this is the first evaluation of the form layout.
However, when you need to modify the content of the page, the table layout is quite laborious. This is a problem. If we use the CMS (Content Management System), the content needs to be formatted.
The whole design time is a bit long because I have some forgetting the old way. If you re-come again, I think it may save 1-2 hours.
I have described form-based design is a large number of "Grunt Work" work, although I am often surprised to be senior design skills. Using pure CSS-based design, I am usually used to decompose design and gradually analyze bugs. Working with table design does not require these jobs, you can throw Table in your design. Let's take a look at the process of CSS.
CSS-based design
The feeling of using CSS is much better. The change of the code is directly and transparent, I can clearly control the entire process, and the design of the table is like a base brick. The larger the page changes, the more convenient and efficiency of the CSS design.
The CSS design is also very meaningful for saving bandwidth, extracting all style in a separate file, using one or several style sheet files throughout the site, making the entire site size smaller.
The layout information is separated from the content, and there are many benefits. In the future, I can change the whole site at any time without the need to modify anything, just like Css Zen Garden. It also adds ease of use, searching robots will be more convenient to find your page (remember: Google is your most important visitors).
After the production is complete, I also test on different browsers in different platforms. IE5.5 and IE6.0 are perfect. Errors appear on IE5.0, menus and some indentation failures, misplaced page header effects look at the following image:
It is undoubtedly asking that this bug can be repaired, but considering the scope of this article, I don't show it. If this is a real customer project, I definitely can't sacrifice I E5.0 users. In the older browser, the design performance of CSS has a mess.
IE4
Netscape 4.7x
If you do some code processing for a browser that doesn't support CSS (for example, Netscape is @import) looks better.
Although you are familiar with CSS-based design, work efficiency is very high, but you have to spend a lot of time learning rules, different box models, browser processing skills, and many theories, and requires constant practice. In short, CSS is easier than Tables, but if you want to use pure CSS design, please prepare a lot of time learning. Even if you are an old-fashioned development master, you should also prepare a variety of bugs, sometimes it takes a bug that will cost a few hours.
Victor
CSS and WEB-based design are wins. Just look at the code of the two methods is enough to make a choice. CSS provides more benefits (mainly in terms of ease of use). In fact, the fundamental reason is my laziness. If you use a table design, the customer contact me later, I need to revise, I may tell him that I am in a country, is abroad. If I use CSS, I will revoke a customer without thinking, because I don't need to overthrow it.
thank
Thank you, AVA McBride, use BrowserCam to help test my design.
