Website Layout
Table of contents
Website Layout
Introduction
1. Designing a template for a future website
2. Website Template Design
1.1. Creating a Web site framework
1.2 Quick navigation unit
1.3. Block with the logo and the main menu of the site
1.4. Ad unit
1.5. News block
1.6. Block with offers
3 Task for laboratory work
Introduction
The purpose of this laboratory work is to get acquainted with such a notion as layout. Also in this laboratory work you will acquire skills in the formation hypertext documents using HTML markup language and cascading style sheets CSS.
Website development is a complex process, consisting of several successive stages:
-preparations;
-designing a template for the future website;
-layout;
-programming;
-content filling;
-website promotion;
-site support.
In this laboratory we will be interested in the stage of the layout, we will dwell on it in more detail, but we will not leave the remaining stages without attention.
1. Designing a template for a future website
After the terms of reference have been completed and agreed upon from all sides, the technical assignment is transferred to a group of designers who develop a website template in such software products as Photoshop or GIMP. This stage can be divided into several nested stages:
-generation of design ideas. An expanded version of the layout of the main page is being formed;
-development of a preliminary template for the design of the main page;
-agreement of the template with the customer and making changes to the template;
-development of internal pages.
Programmers begin to prepare the framework on which the website will be developed – whether the CMS or Framework will be used. And after the template is ready, the layout artists begin their work.
2. WebsiteTemplateDesign
Layout is the process of forming a web page in a text editor, in our case we will consider the layout using HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Hypertext markup language (HTML) is a set of tags that tell the browser about the structure of a web document, and cascading style sheets are used to display HTML documents (color, font, etc.). In the process of layout, you will need to lecture on HTML and CSS, because we will not talk about the purpose of all tags of HTML and CSS properties, only some of them, the purpose of the study is the process of layout.
The layout designer should make the following requirements to the web document during the layout process:
-cross-browser compatibility: the page should be displayed in the same way in different browsers;
-flexibility of layout: it is easy to add / delete information on the site;
-processing speed: the web document must be quickly processed by the browser;
-validity: the web document must comply with the standards;
-semantic correctness is the logical and correct use of HTML elements.
Depending on the template provided for the web page templates, one of two approaches to layout is chosen, each has its advantages and disadvantages:
-tabular layout. Earlier, it was the main and only method of layout, but now it is used to speed up layout in false cases. Tabular layout implies that the document structure will be defined using the table. The peculiarity is that while the table does not load completely, its contents will not be displayed, before the contents of the table are displayed, the browser must calculate the required cell sizes, their width and height.
-block layout. Tjos layout is based on the use of the universal <div> tag, which can perform many functions. This tag is a block-building block, for which different styles are applied, which allows you to do anything from it (in frames of CSS). In the case of block layout, of course, tables are used, but only as their direct purpose. As you understand, abundant use of the <div> tag reduces the readability of the source text of the web page. In the fifth version of HTML, new tags were added. For example, the <header> and <footer> tags were added to the HTML specification in order to reduce the dominance of the <div> tag and give more meaning to the markup.
As for the design of the template, it can also be of three types:
-fixed design is a design in which the width of the template is specified in pixels and does not change depending on the content.
-rubber design- a design in which the width of the template usually takes the entire space of the browser window and is set in percent.
-adaptive design- the design of web pages that provides excellent perception on various devices connected to the Internet. It is the most complex type of design, both for the designer and for layout designers, but it makes it easier for programmers to work, because there is no need to create a separate site, for example for mobile phones (not always possible). The goal of adaptive web design is the versatility of a website for various devices. There are various frameworks that make it easier to create an adaptive website.
As it was said above, we will examine the stage of layout in more detail and with the example of a fixed design using block layout. The original image of the website is presented in Appendix 1. I want to draw your attention to the fact that each layout designer chooses for himself the convenient way for him to type. There are no two equally-matched pages, even if the same template was set, so the example below is just an example and is a purely personal approach.
1.1. Creating a Web site framework
First of all, you need to divide the template into logical parts (blocks) and determine their sizes, this can be done in any graphics editor.
Figure 1 – The tessellated webpage template
If you look at the template carefully, you can see that the page has a background for navigation (located at the top of the site), content and the bottom of the site (background colors can be identified with the help of the eyedropper tool in any bitmap editor).
Thus, for each part, you will need to create a block of the top level, which will take the height of the child blocks, and the width of the entire space occupy the web page (as is typical of block elements) and have the color specified in the template. Inside the top-level block there will be another block that will limit the width of each section, if the background is of the same color, then one common for all parts of the upper-level block would suffice.
Notice figure 1, dotted indents show indents that need to be taken into account during layout.
Before layout, note that the body tag has external indentation by default to get rid of them, you need to override this property in the stylesheet.
Figure 2 – <body> tag intends
Below is the document code and the resulting image. For clarity, bright colors of blocks will be used so that you can see the structure.
HTML page:
<DOCTYPE html>
html
head
titleDemo project for the lecture </title
linkhref="style.css"rel="stylesheet"type="text/css"/> <!—include CSS -->
</head
body
<!-- The parent block is needed to specify the color (since the color extends all the width of the browser)-->
divclass="bound-top-navigation">
<!—Navigation block. The wrapper class (fixes the width of the site section) is rendered in a separate style, it will be repeated -->
divid="top-navigation"class="wrapper">
</div
</div
divclass="bound-logo-main-menu">
divclass="wrapper logo-main-menu"<!--Apply at once 2 styles to one element -->
divid="logo"</div
divid="main-menu"</div
</div
</div
divclass="bound-advertisement-content">
divid="advertisement"class="wrapper"</div
divid="content"class="wrapper">
<!--Blocks are next to each other, pay attention to the data styles of blocks -->
divid="block-news"</div
divid="block-offers"</div
</div
</div
divclass="bound-footer">
divid="footer"class="wrapper">
divid="block-subscription"</div
divid="block-why-us"</div
divid="block-follow-us"</div
divid="block-address"</div
</div
</div
divclass="bound-below-footer"</div
</body
</html
CSS
body {
margin: 0;
}
.wrapper {
width: 920px; /*Set the fixed width of the content */
margin: 0auto; /*Align the block to the center of the page */
}
/*TOP NAVIGATION*/
.bound-top-navigation {
background: #f2f2f2;
}
#top-navigation {
height: 28px;
background: #f2f2f2;
font-size: 12px;
}
/*LOGO AND MAIN MENU*/
.logo-main-menu {
height: 102px;
background: khaki;
}
#logo {
width: 280px;
height: 102px;
background: #ffb6a5;
}
/*ADVERTISEMENT AND CONTENT*/
/*ADVERTISEMENT*/
.bound-advertisement-content {
background: #f2f2f2;
}
#advertisement {
width: 980px;
height: 335px;
background: #8ef254;
}
/*CONTENT*/
#content {
height: 400px;
background: aquamarine;
clear: both;
}
The news block and the block of sentences in the template are located next to each other, as you know, the block element fills the entire width of the web browser, even if it is given a fixed width, the block following it will be located below. Pay attention to the property float, it allows you to make the block floating, i.e. Do not take up all the space.
#block-news {
width: 320px;
height: 400px;
background: #f2af2d;
float: left; /* We make the block floating and press it to the left, the next floating block will press to it */
}
#block-offers {
width: 600px;
height: 400px;
background: #8773f2;
float: left; /* It is necessary to specify, since this block is next for floating (otherwise it will be pressed to the parent element) */
}
/*FOOTER*/
.bound-footer {
background: #e6e6e6;
}
#footer {
height: 296px;
}
#block-subscription {
width: 320px;
height: 296px;
background: #f25f68;
float: left;
}
#block-why-us {
width: 200px;
height: 296px;
background: #f2c332;
float: left;
}
#block-follow-us {
width: 200px;
height: 296px;
background: #94f2e5;
float: left;
}
#block-address {
width: 200px;
height: 296px;
background: #f28a22;
float: left;
}
.bound-below-footer {
height: 110px;
background: #454545;
}
As a result, we got the structure we needed, then we can proceed to the layout of the individual blocks defined by the designer.
Figure 3 – the layout result
1.2 Quick navigation unit
As for the navigation unit, we divide it into two blocks: a block with a date on the left and a block with a menu on the right. Below is a modified portion of the code responsible for the navigation block.
divid="top-navigation"class="wrapper">
divid="block-date">Friday, September 6, 2013 12:34</div
divid="block-nav-menu">
ul
liahref="#">Support</a</li
liahref="#">FAQs</a</li
liahref="#">Sitemap</a</li
</ul
</div
</div
If you look closely at the template, you can see that the date and the menu are located in the center of the block with navigation, the centering can be done with the help of internal padding. Having set the same distance from above and below, and also reducing the height of the block by the total amount of indentation from below and from above, since the height of the block is defined as the sum of internal, external indentations and the size of the boundary of the layer.
.bound-top-navigation {
background: #f2f2f2;
}
#top-navigation {
height: 14px; /* Reduce the height of the block, by the total size of the indents */
background: #f2f2f2;
padding: 7px0; /* Add indents from the top and bottom, remove indents to the right and left */
font-size: 12px;
color: #060606;
}
#block-date {
float: left; /* The block with the date is placed on the left */
}
#block-nav-menu {
float: right; /* The block with the menu is placed on the right */
}
Note the call to the ul element, it does not have a class or a unique identifier, but we know that it is located inside the tag with the # block-nav-menu ID, this style will be applied to all lists that are located inside this block.
#block-nav-menuul{
margin: 0;
padding: 0;
}
As you know, the list is a block element, in order to arrange its elements, we will use the float property. We use a labeled list, but markers are not provided for in the design, so to remove them you must use the list-style property. To create a separator between list items, you can use one of the options:
-using borders (border-right);
-by setting the background with the image of the separator (background).
Pay attention to the pseudo-last-child property, which allows you to find the last element of the list, we need it to remove the delimiter from it.
The first method is used more often, but it may not always be suitable for the design that the designer defined, the result of the work of the next section of the code:
#block-nav-menu ulli{
float: left;
list-style: none;
padding: 07px;
border-right:solid 1px #060606; /* Create a border on the right */
}
#block-nav-menu li:last-child{
border-right: none; /* We remove the boundary on the right of the last element */
}
Figure 4 – The result of creating the divider using borders
In our case, the second method is more suitable, since the result corresponds to the design, but for implementation it was necessary to create a separator image with a size: 1px wide, and 7px height.
#block-nav-menu ulli{
float: left;
list-style: none;
padding: 07px;
background: url("images/nav_sep.gif")right3pxno-repeat; /* Place the image of the separator on the right and drop it 3 pixels down, indicate that the background should not be repeated */
}
#block-nav-menu li:last-child{
background: none; /* We exclude the separator of the last element */
}
Figure 5 – The result of creating the divider using a background
#block-nav-menu lia {
text-decoration: none;
color: #060606;
}
#block-nav-menu lia:hover {
text-decoration: underline;
}
The result of the layout of the top menu is shown in the figure 6:
Figure 6 – Ready-made navigation menu
Let's proceed to the layout of the next block, which contains the logo and the main menu of the site.
1.3. Block with the logo and the main menu of the site
In this block, you should pay attention to the creation of the menu, since the placement of the logo is a simple task. The menu can be represented in the form of a bulleted list (without a marker), as can be seen in the figure below, the width of the menu item depends on the size of the content. To solve this problem, you need to add internal indents from all sides. Also, you can see that the menu items are of two types, active (when hovering or when they are on the current page - green) and passive (light gray).
Figure 7 – The layout of the main menu
To round the edges, you must use the border-radius property, in which you must specify the radius.
Figure 8 –The layout of the block result
The modified source code for the HTML document is shown below.
divclass="bound-logo-main-menu">
divclass="wrapper logo-main-menu"<!-- Apply at once 2 styles to one element -->
divid="logo"<imgsrc="images/logo.png"/</div<!— We place a picture with a logo -->
divid="main-menu">
ul
liclass="active-element">Home</li
liFeatures</li
liProduct</li
liDownload</li
liContacts</li
</ul
</div
</div
</div
CSS
/*LOGO AND MAIN MENU*/
.logo-main-menu {
width: 980px;
padding-top: 19px; /* We set the indent from above, so that the logo is placed in the center of the block */
height: 83px; /* Respectively, reduce the height of the block (since the indent is added) */
background: #fff;
}
#logo {
margin-left: 30px;
width: 205px;
background: #92b800;
float: left;
}
#main-menu {
float: right;
height: 83px;
}
Due to the fact that the elements of the list need to be made floating using the float property and the value left, the parent element "ul" can not determine its size, for this we will use the overflow property and the hidden value. This property controls the display of the content of the block element if it does not fit entirely and goes beyond the specified size range and automatically determines the block size.
#main-menuul {
margin-top: 18px; /* It is necessary to add an indent from above to press the menu to the bottom block */
overflow: hidden;
padding: 0;
margin-bottom: 0;
}
#main-menuulli{
float: left;
list-style: none;
background: #f2f2f2; /* Set the color gray for all items in the list */
padding: 24px32px21px32px; /* Add internal indents, as shown in Figure 7 */
margin-right: 1px;
/* Adding roundings to the corners of the block */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
First, we define the class that will be used for the active elements of the main menu - we will set the green color and the white font. Let's get acquainted with one more pseudo-tag (selector) hover, which selects the elements to which the mouse is now moved, in order to apply one style at once for two classes, they must be enumerated by commas.
#main-menuulli:hover,
#main-menuulli.active-element {
background: #92b800;
color: #fff;
}
1.4. Ad unit
The layout of the ad unit will not be considered, since the block represents a picture, and you will not be able to place an image inside the block.