Press release system, Web design, we can do it.

Source: Internet
Author: User

    started the B/S study, began the browser front page production, began a new journey.    we've all browsed through a variety of web pages and experienced a variety of styles. There are like Baidu as simple as the atmosphere, there are like hao123 as complex and complete. Never thought of such a Web page is how "refining", and in the study of the press release system, only want to say: The original is such a son ah.    Web design, there are two ways: one is a table, one is div+css. Beef Brisket video teaches us to use the latter, which is also a certain reason.    Why use the div+css style for typography? The traditional form layout is to locate the content of the typesetting page by nesting tables and tables of varying sizes. When you use CSS layout instead, the pages are organized by nesting boxes and boxes of different sizes defined by CSS. Because in this way, the layout of the page code is simple, easy to update, compatible with more browsers.     Although I have not contacted the use of forms to make Web pages, but by following the video with the Div+css method of making Web pages, do feel the above mentioned advantages. Below, we begin to talk about using the Div+css method to design Web pages.    I. Design model    First of all, the property names that we listen to in web design, the CSS box models have these properties, so we don't have to help with this tool in our design. The specific properties are as follows:


Of course, we can also transfer these attributes to real-life boxes to understand. A little different is that the reality of things generally can not be larger than the box, or the box will be bad, and the CSS box is elastic, the inside of something larger than the box itself to support the maximum, but will not damage.two. Design IdeasIn the online understanding, the traditional web design is carried out: first consider the main color, what type of picture, with what font, color, etc., and then use Photoshop software such as free to draw out, and finally cut into small pictures, and then not free by the design of HTML Generation page. Instead of using CSS layout, our design ideas have changed correspondingly, mainly considering the semantic and structure of page content. After doing the Web page, you can easily adjust the Web style you want. This layout also has a purpose: make the code easy to read, block clear, strengthen code reuse, so the structure is very important. If the CSS layout, if the customer is not satisfied with anything, it is easy to change, you can also customize several styles of CSS files for customers to choose.three. Design Process1. Use div to define the semantic structure; 2. Then use CSS to beautify the Web page, such as adding backgrounds, lines, borders, alignment attributes, etc. 3. Finally, add content to this CSS-defined box, such as text, images, and so on.Four. Design NotesIn the previous design process, the div was mentioned, so let's make a brief summary of the DIV so that the design process may be clearer.    Div is the positioning technique in cascading style sheets, and the full name division is divided.    <div> defines a partition or section in a document. <div> tags can divide documents into separate, different parts.    It can be used as a strict organizational tool and is not associated with any format.    If you mark <div&gt with an ID or class, the label works more efficiently. <div> is a block-level element, and the browser usually places a line break before and after the DIV element.Five. Design examples   The following is a case study of Beef brisket press release system, combining theory with practice. A. Set the navigation bar title and use the Commoncss style you have written:   

B. Set the content of the Web page, consisting of four boxes, respectively:

(1) Top (top):

<div id= "Top" >        <a href = "default.aspx" ></a >        <a href = "http://www.tg029.com" target = "_blank" ></a></div>

(2) search (conditions):

<div id= "Search" >        search criteria:        <asp:radiobutton id= "radtitle" GroupName = "cond" runat = "server" Text = "title" Checked = "true"/>        <asp:radiobutton id= "radcontent" GroupName = "cond" runat = "server" Text = "content" Checked = "true "/>        <asp:textbox id=" Txtkey "runat=" server "CssClass =" Txtkey "></asp:TextBox>        <asp:i Magebutton ID = "Ibtnsearch" IMAGEURL = "~/images/search.gif" runat = "server"/></div>  

(3) Main (main content):

<div id= "main" >        <!--news category        -<!--Latest news        --<!--Hot news--></div>

(4) Footer (copyright):

<div id= "Footer" >        All rights reserved ©<a href = "http://niunan.javaeye.com" target = "_blank" > Beef brisket </a>&<a href = "http://www.tg029.com" target = "_blank" > Public log Network </a></div>

C. Designing CSS styles (List parts):

* {/* Defines the default value as 0*/        margin:0;        padding:0;      }    #top, #search, #main, #footer         {/* Public style */            margin:10px auto 10px auto;            width:860px;        }    #footer     {/* tail style */        text-align:center;        border-top:1px solid #D6D7D6;        padding-top:10px;        Clear:left;     }

    Six. Design code
The     first contact with the web design code, there will always be unfamiliar feelings, but contact more, will be more and more close. The following is a summary of some of the commonly used code:
         (1) Color
To use a color, get its color value.  <font color= #000000 size=2>    (2) Text link hyperlink effect:<a href = "url space";></a> reopen window Effect:  <a href = "url space";; target= "_blank" ></a>    (3) Add picture      (4) Enter the <br> in the position where you want to break the line, and this will be divided into two lines    (5) mouse induction, text color change (from blue to red)    Li A:link, li a : visited     {        color: #00f;    }    Li a:hover    {        color: #f00;    }     Seven. Design experience    when you see the home page made out of the moment, really very happy. There have been bugs, through their own pondering, and classmates after the exchange, plus firebug this tool, finally is finished. Looking back, we have been browsing the page, now we can do it, some hard to believe. Now look, this process, in fact, is not so difficult.

Press release system, Web design, we are also OK

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.