Examples of html page layout using div(Homepage design and interpretation, index.aspx source code)

Lionsure 2020-08-18 Original by the website

The front page Html code of homepage includes three parts, namely: reference header file header.ascx, main content and reference foot file footer.ascx.

I. Knowledge points involved in the homepage(html web page design examples)

1. Disable the page to keep the view state to the client;

2. Include custom controls;

3. Dynamic output of homepage title, keywords and description;

4. Data binding Repeater, and intercept the title according to the specified number of words, output the date according to the specified format;

5. Pseudo-static;

6. Include Css file;

7. Reference method of Css;

8. CSS defines the title style;

9. Css sharing and restrictions;

10. The image is centered and aligned;

11. Definition of list style;

12. How to open the hyperlink;

13. Page output cache.

II. Knowledge analysis(html page layout using div)

1. Disable the page to keep the view state to the client;

Asp.net enables the page to keep the view state to the client by default, that is, the view state of server control is encrypted and output to the client, so that after the user visits, we can get their related information on the server. When we open the webpage and check its source code, we sometimes see a long string of messy characters, which are the view state information of server control output to the client after encryption, such as the following string:

When EnableViewState is set to false in the first line of page(<%@ Page %>), i.e. EnableViewState="false", these codes will no longer be output. The complete setting code on the home page is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="EpWeb.index" EnableViewState="false" %>

2. Include custom controls

The homepage mainly includes the head and foot of website, namely the header.ascx and footer.ascx files. The reason has been introduced in the previous article; the reference method is divided into two steps:

1) Register the control at the beginning of page, the code is as follows:

<%@ Register TagPrefix="top" TagName="head" Src="~/privates/pubitem/header.ascx" %>

In the registration code, the attribute TagPrefix is the tag prefix, TagPrefix is the tag name, and Src is the storage address of control.

2) Include it in the position where the content of control is to be output in the page, the included method is as follows:

<top:head ID="head1" runat="server" />

top is the label prefix defined during registration, and head is the label name; this is the same as the control of Asp.net.

3. Dynamic output of homepage title, keywords and description

Generally speaking, the title, keywords, and description of homepage are frequently modified, especially the latter two; for ease of modification, make them dynamic. As far as the front-end code is concerned, just use the Literal control between the head(<head></head>, and the value is assigned by the code behind. The complete code is as follows:

From top to bottom, the title, keywords and description of the homepage are in sequence, and related names are used in the ID number. Head is set to run on the server by default, that is, runat="server", or it can be set to not run on the server, that is, remove runat="server".

4. Data binding Repeater and intercept the title according to the specified number of words, output the date according to the specified format

Asp.net has four main data-binding controls, namely Repeater, DataList, GridView and DataGrid; among them, Repeater outputs the least data and is suitable for the foreground; DataList output data is second, and it is mostly used in the foreground; both GridView and DataGrid output tables, which output the most data and are mainly used in the background(Management system), while DataGrid is basically not used.

The homepage uses Repeater to bind data. Because the method of binding data is similar, just give an example, take the binding "Product Display" as an example, the code is as follows:

<ul class="pro-list">
              <asp:Repeater ID="repProduct" runat="server">
                     <ItemTemplate>
                            <li><div><a href="/item/<%# Eval("id") %>.htm" target="_blank" re="nofollow"><i></i>
                                   <img src='<%# EpWeb.Global.imgPath + Eval("pic")%>' alt="<%# Eval("pname") %>" /></a></div>
                                   <span><a href="/item/<%# Eval("id") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.newstr(Eval("pname").ToString(), 12)%></a></span>
                            </li>
                     </ItemTemplate>
              </asp:Repeater>
       </ul>

Binding data is usually to bind multiple records, so Html list tags ul or ol are used. The difference between them is that the latter has numbers such as 1, 2 and 3. The former does not, so the former is usually used. Each record is displayed with a li, so put li in the ItemTemplate of Repeater, and the corresponding records will be output by binding in the code behind.

Code interpretation:

<%# Eval("id") %>: Bind the product id field;

<%# Eval("pname") %>: Bind the product name pname field;

EpWeb.Global.imgPath: Get the save directory of image in the Global file;

EpWeb.privates.classes.PublicClass.newstr: Reference the newstr method in the class PublicClass;

<%# EpWeb.privates.classes.PublicClass.newstr(Eval("pname").ToString(), 12)%>: Due to the width limitation, the title only outputs 12 characters;

Output the date in the required format:

Asp.net outputs the date in mm/dd/yyyy format by default. This format does not seem to be used to it. Usually it should be changed to MMMM dd, yyyy format, which is more attractive. Take the output date of the company news list as an example.

Aspx code: <%# Eval("adddate","{0:MMMM dd, yyyy}") %>

The adddate in the code is the date field, {0:MMMM dd, yyyy} is the output format; if the date is 8/18/2020, the output will be August 18, 2020 in this format.

5. Pseudo-static URL reference

Pseudo-static means that dynamic pages(pages with .aspx extension) are rewritten into static pages(pages with .htm or .html extension). The purpose of this is to prevent injection on the one hand, and facilitate crawling by search engine spiders on the other.

Pseudo-static is mainly done in the Golbal file. The homepage is just a page that is rewritten as a pseudo-static and the URL is appropriately modified. For example, /item/<%# Eval("id") %>.htm is a pseudo-static page, using the id number of product as the name of page, and changing the extension .aspx to .htm.

6. Include Css file

In general, define the Css in a separate file, because the same style can be referenced by multiple pages; doing so can avoid code duplication and facilitate maintenance. When web pages use these CSS styles, you only need to include them between <head></head>; the included code is as follows:

7. Reference method of Css

After the Css is defined, it can be modified by assigning it to the class attribute of Html element. The homepage references many CSS. Take the page-level element<div class="page"></div> as an example. The .page style has been defined in the CSS file style.css referenced by the homepage, so reference it in the class attribute of the element div reference is enough. For the specific code, check the complete source code of homepage below and the referenced style.css file, and you can find it by searching page.

In most cases, each Html element is decorated with only one Css, but you can also use more than one. For example, the class="title border-b" in the homepage uses two Css, leaving a space between them.

8. CSS defines the title styl

There are 6 Html elements for the title, namely h1-h6; h1 is the title with the largest font size. From the point of view of search engines, h1 can only be used once. In terms of homepage, it is usually used for website name or logo; in terms of article pages, it is usually used for article titles; h2 font size is second, used for content at the subtitle level, and cannot be used more; h3 is used for ordinary titles, such as list titles on the page, and can be used more. There are multiple h3 in the homepage. For example: <h3 class="title border-b">Company News</h3>, <h3 class="title border-b">Latest Supply</h3>, they almost all use the same Css style .title, the code is as follows:

.title
       {
              color:#F8F400;
              line-height:30px;
              font-weight:700;
              padding-left:25px;
              background:url(/images/bg_img.png) no-repeat;
              background-position:5px 5px;
       }

From top to bottom, it defines the color of the title, line height, bold, left margin, reference background image, and background position. The first four are easy to understand, and mainly introduce the reference background image. In order to reduce the number of requests and save server resources, multiple background images are often put into one file. If there are 10 background images, if each image is saved in a file independently, it will request 10 times from the server when opening the webpage; if 10 images are saved in a file, only once from the server.

Since multiple images are stored in one file, you must locate the position of the image used when referencing. The background-position is used to locate the position of image; when positioning, take the coordinate axis as the reference, and the first value is X Axis, the second value is the Y axis. In the example, 5px 5px means that the referenced background image is 5 pixels from the left and 5 pixels from the top.

background:url(/images/bg_img.png) is the address to refer to the background image, no-repeat means the background is not repeated, that is, the Html element decorated by the Css is larger than the background image, and the background image is not filled up without repeating the background image to fill it .

In addition, h4-h6 are titles with small font sizes, which are not particularly important from the point of view of search engines. They are usually less frequently used, so refer to h3 for usage.

9. Css sharing and restrictions

Sometimes a Css is referenced by multiple Html elements. Some elements have a width of 200 pixels and some elements have a width of 300 pixels. If the width of the Css is defined as 200 pixels, an element with a width of 300 pixels needs to define another width.

There is such an example in the homepage, still take the style .title as an example, it does not define the width, but the title bar of “Product Display” refers to the tilte style and needs to define the width, the Html code is as follows:

<div class="product">
              <div class="bar">
                     <span class="bar-l"></span>
                     <h3 class="title">
                            <span class="title-l">Product Display</span>
                            <a href="/product/index.aspx" target="_blank">more...</a>
                     </h3>
                     <span class="bar-r"></span>
              </div>
       </div>

At this point, you can define the width to limit the title only use the id of the parent element of h3 or Css referenced by its parent element, so that h3 uses both the previously defined .title style and the .product .title style. The Css code is as follows:

.product .title
       {
              width:952px;
              float:left;
              padding-left:0px;
              background-position:0px -109px;
              background-repeat:repeat-x;
       }

10. The image is centered and aligned

The image is very easy to align in the center with the table layout; but it is usually not easy to align in the center with the div + Css layout. It needs more attributes or additional Html elements to achieve it; because the table has to wait for all its contents to be loaded before it is presented, so the speed is slow, it is not used now, mainly use div + Css. The homepage shows a lot of images, they are all aligned in the center, and the Css used is .pro-list; the following are some of the aspx code and Css code taken from the homepage:

Aspx code:

<ul class="pro-list">
              <asp:Repeater ID="repNewProduct" runat="server">
                     <ItemTemplate>
                            <li>
                                   <div><a href="/item/<%# Eval("id") %>.htm" target="_blank" re="nofollow"><i></i><img src='<%# EpWeb.Global.imgPath + Eval("pic")%>' alt="<%# Eval("pname") %>" /></a></div>
                            </li>
                     </ItemTemplate>
              </asp:Repeater>

</ul>

Css code:

.pro-list{overflow:hidden;}
.pro-list li{text-align:center;float:left; width:182px;height:220px;overflow:hidden; margin:10px 10px 0px 0;*display:table;}

.pro-list div{overflow:hidden;text-align:center;vertical-align:middle; display:table; *display:block; *font-size:90px; *font-family:Arial; width:180px; height:180px; margin:0px auto; border:solid 1px #f8d6de;}
.pro-list a{width:180px; height:180px;display:table-cell; *display:block; vertical-align:inherit;}

.pro-list i{display:inline-block; height:100%; vertical-align:middle;}
.pro-list img{max-width:180px; max-height:180px; vertical-align:middle;}

As far as Html code is concerned, you need to use <i></i> in front of the image element(<img), and you need to add a parent element(<div>) to it.

As far as Css is concerned, start with the definition of ul element, then define the li element, then define the parent element div of the parent element of image, then define the parent element a of image, and finally define the i and img elements.

The following points should be noted:

1) The * in the Css is used to define browsers ie7 and below;

2) The display method of the parent element div of the parent element of image needs to be defined as a table(i.e. display:table), and the font and font size(i.e. *font-size:90px; *font-family:Arial;);

3) The parent element a of image, the display mode needs to be defined as a table element(i.e. display:table-cell), and the following versions of ie7 are defined as a block (i.e. *display:block).

11. Definition of list style

The homepage usually consists of a list of columns, such as product image and text lists, product category lists, and company news lists. The product image and text lists have been introduced above, here is the text list. It is the title line by line, marked with a symbol in front of each line. Take the company news list as an example. The following are Html code and Css code.

Html code:

<ul class="text-list">
              <asp:Repeater ID="repNews" runat="server">
                     <ItemTemplate>
                            <li><a href="/news/<%# Eval("newsid") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.ToString(Eval("newsname")).Length > 12 ? EpWeb.privates.classes.PublicClass.newstr(EpWeb.privates.classes.PublicClass.ToString(Eval("newsname")), 12) + "…" : EpWeb.privates.classes.PublicClass.ToString(Eval("newsname"))%></a>[<%# Eval("adddate","{0:MMMM dd, yyyy}") %>]
                            </li>
                     </ItemTemplate>
              </asp:Repeater>
       </ul>

Css code:

.text-list{margin:4px 2px 6px 6px;}
.text-list li{background:url(/images/bg_img.png) no-repeat; background-position:0px -27px;padding-left:6px; line-height:25px;}

The Css defines the style of ul first, and then the style of li; li is used to output news headlines, and the style refers to images(that is, the symbols before each line) and sets the line height.

12. How to open the hyperlink

Hyperlinks can be opened on the current page or on a new page; if the target is not set, or if target="_self" is set, it will be opened on the current page; if target="_blank" is set, it will be opened on a new page, for example:

<a href="/item/<%# Eval("id") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.newstr(Eval("pname").ToString(), 12)%></a>

It opens in a new page

13. Page output cache

The homepage is a portal to a website and a page that is frequently visited, so the faster it opens, the better. In order to meet this requirement, it is usually cached and output directly when the user opens it without getting data from the database. There are two forms of Asp.net caching, one is cache in the code behind, and the other is page output cache. The homepage uses the latter OutputCache. The specific code is:

<%@ OutputCache Duration="600" VaryByCustom="Index_Slide" VaryByParam="none" %>

Duration="600" means cache for 600 seconds;

VaryByCustom="Index_Slide" means that the custom string is Index_Slide, which is mainly used to update the cache immediately after the image is switched and the promotional image is updated, so as not to show that the image cannot be found. The code implementation is mainly in Globla.asax;

VaryByParam="none" means that no variable parameter is used.

III. Complete source code(Examples of a web page layout)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="EpWeb.index" EnableViewState="false" %>
<%@ OutputCache Duration="600" VaryByCustom="Index_Slide" VaryByParam="none" %>
<%@ Register TagPrefix="top" TagName="head" Src="~/privates/pubitem/header.ascx" %>
<%@ Register TagPrefix="btm" TagName="foot" Src="~/privates/pubitem/footer.ascx" %><!DOCTYPE html>
<html>
<head>
       <title><asp:Literal ID="litTitle" runat="server" /></title>
       <asp:Literal ID="litKeywords" runat="server" />
       <asp:Literal ID="litDescription" runat="server" />
       <link type="text/css" rel="stylesheet" href="/images/style.css" />
</head>
</body>
       <form id="form1" runat="server">
       <div class="page">
              <top:head ID="head1" runat="server" />
              <div class="new">
                      <div class="new-img"><a href="/tu/201701/813473528.htm" target="_blank"><img src="/images/index-img.jpg" alt="Pink rose bud" /></a></div>

                      <div class="new-product">
                                   <h3 class="title border-b">Latest supply</h3>
                                   <ul class="pro-list">
                                                        <asp:Repeater ID="repNewProduct" runat="server">
                                                                      <ItemTemplate>
                                                                      <li><div><a href="/item/<%# Eval("id") %>.htm" target="_blank" re="nofollow"><i></i>
                                                                                    <img src='<%# EpWeb.Global.imgPath + Eval("pic")%>' alt="<%# Eval("pname") %>" /></a></div>
                                                                                    <span><a href="/item/<%# Eval("id") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.newstr(Eval("pname").ToString(), 7)%></a></span></li></ItemTemplate>
                                           </asp:Repeater></ul>
                      </div>

                      <div class="news"><h3 class="title border-b">Company news</h3>
                                   <ul class="text-list"><asp:Repeater ID="repNews" runat="server">
                                                        <ItemTemplate>
                                                        <li><a href="/news/<%# Eval("newsid") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.ToString(Eval("newsname")).Length > 12 ? EpWeb.privates.classes.PublicClass.newstr(EpWeb.privates.classes.PublicClass.ToString(Eval("newsname")), 12) + "…" : EpWeb.privates.classes.PublicClass.ToString(Eval("newsname"))%></a>[<%# Eval("adddate","{0:MMMM dd, yyyy}") %>]</li></ItemTemplate>
                                           </asp:Repeater>
                                   </ul>
                      </div>
              </div>

              <div class="product"><div class="bar"><span class="bar-l"></span><h3 class="title"><span class="title-l">Recommended Products</span><a href="/product/recommend.aspx" target="_blank">more...</a></h3><span class="bar-r"></span></div>

                      <ul class="pro-list">
                             <asp:Repeater ID="repRecommend" runat="server">
                                   <ItemTemplate>
                                          <li><div><a href="/item/<%# Eval("id") %>.htm" target="_blank" re="nofollow"><i></i>
                                                 <img src='<%# EpWeb.Global.imgPath + Eval("pic")%>' alt="<%# Eval("pname") %>" /></a></div>
                                                 <span><a href="/item/<%# Eval("id") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.newstr(Eval("pname").ToString(), 12)%></a></span></li></ItemTemplate>
                                   </asp:Repeater></ul>
              </div>

              <div class="product"><div class="bar"><span class="bar-l"></span><h3 class="title"><span class="title-l">Product Display</span><a href="/product/index.aspx" target="_blank">more...</a></h3><span class="bar-r"></span></div>
                      <div>
                             <ul class="class-list">
                                    <asp:Repeater ID="repClass" runat="server"><ItemTemplate>
                                           <li><a href="/product/index.aspx?c=<%# Eval("categoryid") %>" target="_blank"><%# EpWeb.privates.classes.PublicClass.newstr(Eval("category").ToString(), 12)%></a></li></ItemTemplate></asp:Repeater></ul>

                             <ul class="pro-list">
                                          <asp:Repeater ID="repProduct" runat="server">
                                    <ItemTemplate>
                                           <li><div><a href="/item/<%# Eval("id") %>.htm" target="_blank" re="nofollow"><i></i>
                                                  <img src='<%# EpWeb.Global.imgPath + Eval("pic")%>' alt="<%# Eval("pname") %>" /></a></div>
                                                  <span><a href="/item/<%# Eval("id") %>.htm" target="_blank"><%# EpWeb.privates.classes.PublicClass.newstr(Eval("pname").ToString(), 12)%></a></span></li></ItemTemplate>
                                    </asp:Repeater></ul>
                      </div>
              </div>
              <asp:Panel ID="paLink" runat="server" CssClass="friendlink" Visibl="false">
                     <h3 class="title border-b">Friendly link:</h3>
                     <ul class="friendlink_list">
                                   <asp:Repeater ID="repLink" runat="server"><ItemTemplate>
                                   <li><a href="<%# Eval("url") %>" target="_blank"><%# Eval("sitename") %></a></li></ItemTemplate></asp:Repeater></ul></asp:Panel>
              <btm:foot ID="foot1" runat="server" />
       </div>
       </form>
</body>