Podcast Project Summary-web standard page design

Preface:
The first exciting project in Shanghai has many shortcomings for both the company and itself. For the first time as an entertaining portal website, the ability to control web standards is indeed a great challenge. To be honest, this project can only give itself 65 points for the use of web standards. The reason why the score is so low is that the project time is short. The reason why the artist's design draft is poor is that, the insufficient design of the webpage framework for large entertainment websites is also a reason. It is precisely because of the low scores that the project summary is particularly important. Continuous summarization, continuous improvement, and continuous improvement. I am very happy, because I am still on the road of "good study, every day ......

Body:
Both art and planning live in Utopia
Do not rush to do it right away. The page provided by the artist will surely hide many unreasonable places. Print the page! Based on previous experiences, we can find out, Mark, discuss, and improve these unreasonable points. If it is unreasonable, you can find it by following the steps below-ask a place: What if the text (or pictures, records, and information blocks) in this place is too long? What if it is short? What if no? What if there are many? What if there are few? What should I do if I have the permission? What if I don't have the permission ?...... Consider the display and display modes in some cases.

The only thing that remains unchanged is change.
Even after planning to re-improve and discuss the version, it will certainly hide a lot of unreasonable places, so before you start page design, be sure to reserve the possibility and feasibility of changes for the framework to be used. The page design is also part of software development. It will naturally follow the voice of the software development-the only thing that remains unchanged is the change!

Webpage Design Framework
How can we avoid a lot of repetitive work and do not waste time and effort for doing things over and over again? Framework. Programming has a programming framework, and web design can also have a web design framework (such as Yahoo's Yui framework ). Therefore, it is a mature practice to integrate common and common things into the framework. I am trying to build a web design framework that meets the web standards, but my capabilities are indeed limited. In addition, the project is too time-consuming, so although I designed a part at the beginning of this project, however, it was not completed and used. If someone else has the same idea, please feel free to advise. If you are interested in the web design framework but are not familiar with it, read the article frameworks for designers.

Build a robust page
Because artists and planners both live in Utopia, many of their designs are too good, and they are really good-looking. However, in many cases, the data is not so neat and beautiful. Therefore, you must use CSS to forcibly restrict the page layout. Make sure that the layout is not messy in an abnormal state.
Since this is important and can be explained clearly without a single sentence or two sentences, I decided to write an article for it in the future. Stay tuned to my blog (yes! B/S !)

Which of the following is ID and class used?
First, you must understand the advantages and disadvantages of ID and class. In this way, they can be used according to their respective characteristics.
Advantages of ID (disadvantages of class): ID is written in CSS with "#" selector, and class is written in CSS with "." selector. "#" The selector has a higher priority ". "selector is about 10 times, so when you need to increase the priority, the ID tag, or the tag in the ID container will be very easy and effective. But the class label or the class container label may cause the escalation of priority to fail.
Disadvantages of ID (advantages of class): ID should be unique, so its reusability is very poor, while class can be reused. Therefore, if a piece of things has multiple pages and even a page is used multiple times, you must use class as the style selector. ID is unique. When the ID of a control is uncontrollable, the ID selector will lose its meaning, but any control is dynamically generated, its cssclass is still customizable, so when your tag needs to be replaced by a server-side control, and the ID of the server-side control is uncertain, use the class selector, in this way, you only need to set the cssclass of the server control as the name of the class selector. (Of course, this requires a lot of experience, and the project will be gradually improved when it is done too much)

Which one does padding and margin use?
Padding and margin can make the appearance of an area display completely the same. So it may make many people think that padding and margin are interchangeable. In fact, they are very different, and you need to carefully consider which one you choose. I think the principle of using padding for containers or using margin for labels in containers is as follows: when hiding the labels in the container or container (a certain part needs to be hidden and displayed frequently in real projects), This will minimize the impact on the overall layout.
For padding, IE6 and IE7 (FF) do not parse the width of the label with the padding style. The label width of IE6 does not contain the values of padding-left and padding-right, while that of IE7 and FF is. For example, if the width of a div is set to 100px and the padding is set to 10px, the width occupied by the DIV in IE6 is 120px (including 10 padding-left and 10 padding-right ), IE7 and FF occupy a width of PX. Because IE7 and FF will think that 100 already contains 20 PX padding.

Min-height and height
If you only need to be compatible with IE6, you do not need to pay attention to the Min-height style, because IE6 does not support this style at all. However, when you need to take care of IE7 and FF, you must pay attention to this style. Because many styles with a fixed value of Height = are configured in IE6, IE7 and FF do not adapt to the height when the container is held above the height. This leads to layout confusion. To adapt the height to IE6, IE7, and FF, set Min-height and csshack. For example:
Min-Height: 600px;
_ Height: 600px;
In this way, when there are few items in the container, it shows a fixed height of PX, but when there are many items in it, it will also automatically increase the height.
You must pay special attention to the height setting. If it is the height of the container used for layout, you must pay special attention to it. Otherwise, it will not be able to float in FF, causing layout confusion.

Find an ax.
If you want to do something better, You must sharpen your weapon first. The Page setup workload is huge. Therefore, to improve work efficiency, it is necessary to find a development tool suitable for you.
Since Macromedia was acquired by Adobe, I have no longer used Dreamweaver. This is because the web standards are not particularly well supported. My favorite web development tool is editplus, which configures the Automatic completion function that suits my habits. As a lightweight page development tool, the development efficiency is still very high. I prefer Microsoft Office Sharepoint designer 2007 as a heavyweight development tool. A friend who is used to developing the web with editplus can make a good transition. His smart prompts and Configurable automatic completion functions can greatly improve the efficiency. In addition, it has the concept of a site, so it is much easier to replace and modify in batches than editplus. Some of the experiences and skills of editplus and Microsoft Office Sharepoint designer 2007 will also be summarized in the future. please subscribe to my podcast to learn about it as soon as possible. Thank you.

Flash is a bitch
Although strong and popular, I have never liked it (because I won't ^-^ ). What I asked most online is how to make webpages with Flash pass W3C XHTML verification. In fact, it is very simple to use the object tag. However, if your page needs to be opened again in Microsoft Visual Studio 2005, do not include the Flash Object tag on the page. Because it will remove your Microsoft Visual Studio 2005. There was a very confusing problem-there was no way to open the design mode. The back and DEL keys could not be used, they could only be typed, and they could not be deleted. Flash is like a bitch, making Microsoft Visual Studio 2005 fall. (This problem occurs on multiple computers in our development team. However, it still cannot be ruled out because of Microsoft Visual Studio 2005 or the computer environment. If it is our problem, I am sorry for the misunderstanding of flash-"You are not a bitch, you are a virgin! It's better than Silverlight !")

Queue up!
The multi-column layout of web pages is very common. Aside from that, the style of the blog garden I use is a two-column layout. Side on the left and main on the right. According to your reading habits, you should first write the side on the left in HTML and then the main on the right. In fact, this is unreasonable. Because browser resolution is from top to bottom. It is first parsed and then parsed. The navigation bar on the left is not what the user is eager to see. What the user is eager to see is the content of the article in main. Therefore, the correct method is to write the content on the sidebar and the webpage topic, and then use the float style to make them appear on the left or right.

What's your name? "Ad "? Cut it out!
If you want to display ads in this area, you should name this Div as "divad". OK, no problem, the name is accurate, and the camper style is adopted. But why can't I see your advertisement in many browsers? It's easy because they are blocked. Who was attacked? Browser, anti-virus software, and even firewall. Many things are happy to rape these advertisements. Naming your things "ad" or "banner" is like writing "I am a free (female) female" on your face. There are definitely a lot of things to do with you. "Peony", "hibiscus", and "Qin Cao (" big inner security intelligence ")". You can choose one or more names.

Short live the "button" tag
When I first found the button tag, I was so happy. This tag is okay! It can contain many other labels to form different button styles (for example, you can write a button image like this (<button> </button> ), in addition, there is a gorgeous dynamic "offset" when you click. So I used it in this project. However, it was discovered that the problem came out when you needed to replace these gorgeous image buttons with the server-side controls. Because there are no controls in vs2005 that call the button tag at the front end (except for the control programming method ). "Imagebutton "? No, it's not a button that he calls to the front-end, and it's not IMG that you think about. It's an input whose type is image at the front-end. This makes programmers helpless. Therefore, I decided not to use the button label in the future. The "butoon" label is really short-lived here.

Picture button! IMG or input?
Art artists really live in fairy tales. They put the page design in a pretty fancy place, with gradient and colorful buttons everywhere, so that, my computer will surely crash as soon as they open the PSD file they sent. They seem to have used fiber optics all the time for accessing the Internet. I don't know how long it takes to download a picture with more than 50 K buttons. However, there is no way. China's artists also rely on fancy meals. Therefore, buttons of the system default style are never displayed on the webpage, and they are always image buttons. The problem is that as a web designer, you need to decide the labels used to display the button images. The appropriate type of Web Page tags determines the programmer's efficiency in later development. Therefore, it is necessary to carefully consider which tags should be used. Picture? IMG pull. However, if the image Button needs to process some server code, the IMG is not suitable. Therefore, the image button must be imagebutton if a server-side control is used. While imagebutton calls the foreground to parse the input with the type image. Therefore, if the image button processed by the server still uses the input type of image. In this way, the programmer will know how to pull imagebutton directly.

"A, come here !" A Jun: "Who is a Jun ?"
CSS is case sensitive, so # divtest will not render the effect for a div with the ID divtest. "Why is it ineffective !", Find, find, find, "Mom! It turns out that you are in lower case !" By the way, I made a very small but serious mistake in this project. Due to this, I began to write Video as "vedio ". In addition, many styles contain video or video words. Later, we found this problem and replaced vedio with video in batches. It is also the case-insensitive type of batch replacement. The consequences can be imagined ~~ ,

What is this? --/* Why are there too many threads? Why are there 0 threads? /
What is this? If I tell you this is a comment, do you believe it? No, CSS comments should end. Yes, I originally wrote something like "/* Chinese Notes */", but vs2005 turned my Chinese into a damn garbled code, in addition, the "*" used for the later comment is also changed to garbled characters! As a result, one day I found that a large number of styles failed. (The figure shows "Trojan", indicating "garbled ")

Version Control failed! It's crazy! Vomit blood again!
Version Control is less important when the project is small, but the larger the project is, the more important version control is. If version control fails! It's crazy! Vomit blood again!
In the beginning, do not be afraid of troubles. Try to use tools such as VSS or SMC for control. Do not destroy the version control process for one convenience. If you want to maintain multiple locations, the level of confusion is unimaginable.

Link to related articles: podcast Project Summary-Project Management

Keyword: CSS summary, padding and margin, margin, padding, CSS padding, CSS margin, version control, CSS garbled, CSS case sensitive, button tag, image button, AD blocking, CS queuing, flash problems, webpage creation tools, robust webpages, CSS layout chaos, CSS layout, div CSS layout, CSS website layout, CSS layout summary, webpage design framework, webpage framework, webpage framework code, webpage framework structure, webpage creation framework, webpage Framework Design appreciation, the only thing that remains unchanged is change