Focus: Reasonable application of "XHTML tag" to establish a good page structureDon't start coding immediately after you get a "design plan", but First, clarify the "relationship between the elements"; Then think about "what tags to use to organize what you want to do".* * Analysis of the basic composition of the page, mainly divided into 5 areas: Upper logo; Navigation menu; Left sidebar; Right content; Bottom copyright area.* * Layout planning: Upper Logo + navigation menu = head Element = = Place the header layer; Left sidebar sidebar+ right sidebar container=> placed on main layer; The bottom copyright zone is placed on the footer floor. <<< Header layer (4 blocks): Website logo/website banner/search box/Site navigation menu The left sidebar is divided into two pieces, >>>* * Cut and export pictures [Picture is the carrier of the art of website design, it can Beautify Web pages Enhance visual effects ]* * Page BODY element XHTML encoding Page overall layout requires 5 div layers Header Main (surround) {Implements the content layer and the side Layer Center} Container Sider Footer@@ ID and class [naming tips] "Name the area where it is" (e.g. Header/footer), as far as possible Do not "name in performance or location" (e.g. Width500/left/right) {Late refactoring if the changes will appear nondescript} * * The order of "first container after Sider" is inconceivable in [table-era {table-layout-positioning}]. [Table era] content from left to right in order to display, according to this coding idea, should first write Sider, and then write container."Now", analyzing the characteristics of the page, the sidebar sider is not the body of the page, the body of the page is container (content area), so now the encoding order is [put container in front of the Sider, through the CSS "reverse floating" to their position adjustment]"Reverse float" has better adaptability and flexibility.The main benefits of this "coding order" are: 1. Users can display the main body when the network speed is slow 2. Easier for users to browse when using other devices 3. Search engine spiders in front of the content more important @@ 在 the appropriate annotations to the encoding It is necessary to include appropriate annotations in the encoding process. <!--Header_end-- <!--Side_end-- <!--main_end----et These can help encode the XHTML structure more clearly. * * below to start "perfect for individual page elements" * * While encoding, you can ignore the form of XHTML tags, just make xhtml coding better semantically, organize page content with appropriate labels, that is, the structure of the page that is commonly said.* * Reasonable structure/appropriate labeling/This is the essence of XHTML coding.* * While the appearance of XHTML markup is displayed, it can be defined by a CSS style sheet, allowing performance and content to be detached.@@ 为 Each list item Li is given a separate ID When you encode a navigation list, each list item Li is given a separate ID. This code is easy to control later, for CSS style to find the exact target. You can use it {ID} to achieve some style effects that are different from other Li's. # # When you write XHTML code, you can generally consider the following: 1. Label the document title with 2. Use etc... Can assign different levels of title to the site column name, which depends on the structure of the whole station and the organization of the column. # # Two areas of the left sidebar are similar, so for a region to parse, code with class selector, just once defined to unify their appearance style. "Three Rows two columns" page layoutOverall page Layout css This is a typical "three-row, two-column layout"The overall layout requires a 5 div layer definition to establish a preliminary page layout framework that they are: Header Main Container Sider Footer Apply "reverse float"-place the main content in the previous section of the document apply "unordered list ul" Build [horizontal horizontal menu] make "Picture Mix" [Sidebar] page element implementation by "Modify CSS file" [Page refactoring]
[DIV+CSS] Site Layout example Two
