Official Raz Veinz Blogsite

I Build 7 – Creating Webpage/Website Header and Title

Posted on Wednesday, October 10th, 2012 at 3:46 pm

Header is graphical/media content or only text that runs across the top of the web page design on your screen, header is very important and most valuable space on the screen, it will make someone fall in love at the first sight with your webpage or love to click the close tab button immediately. The primary purpose is to promote your company’s brand and make it instantly recognizable to your audience.

It will be anything! Depend on your purpose and creativity, I choose to use Flash or rectangular image.

I assume you read my basic CSS  entry

To create the layout of the webpage using CSS, we need to set the division or a section in an HTML document using <div> Tag. The <div> tag defines a division or a section in an HTML document and used to group block-elements to format them with CSS. We need to define the parameters between the tag. For example, imagine <div> Tag as the plain paper, and CSS as you want to coloring, put some sticker and cut it out and put it on your wall (webpage). Confuse?  Lets try some code…

Put this CSS code on your CSS sheet…

/******************************/
/*  HEADER SECTION  */
/******************************/

.Header {
    width:664px;
    margin: auto;
    left: auto;
}

.HeaderBG {
    background-image: url(../Image/Header_BG.png);
    height: 194px;
    width: 664px;
    z-index: 1;
    top: 0px;
}

I hope this picture will describe more than text

Example of left and top margin,

.HeaderBG and .Header is just the name, you can put any name that you want, DO NOT start a class name with a number! This is only supported in Internet Explorer. Just don’t forget to put the “.” at the first letter to defined the HTML class attribute (will explain later). This name is used to create a direct relationship with the HTML tag that you want to edit.

To make sure the layout always at the center of the webpage, leave the the margin and left is auto for .header –> margin: auto;   &  left: auto;

To make sure the image for .HeaderBG always at the center of the web-browsers at any screen resolution, leave the the left value is auto –> left: auto;

 Now, this the time to manipulate that CSS code, put this code at the HTML Document (Webpage) under the <body> tag

<!– (Header) –> Note : this is the comment tag ( <!–…–>) Comments are not displayed in the browsers.

<div class=”Header”>

<div class=”HeaderBG”  style=”position:absolute;”></div>

</div>

<!– (Header End) –>

class – It is used to create different classes of a element, where each class can have its own properties. The class attribute is mostly used to point to a class in a style sheet and let you apply style properties to any element or elements on the page.

style – The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags.

position – Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed)

absolute – The element is positioned relative to its first positioned (not static) ancestor element

That image is only for the background for the main image, if you want to put only plain image, the procedure is similar, just need a little bit modification, the name for html code and the name, the image link, background-repeat: no-repeat;,  margin, top, height, width and z-index (make sure the value is more than background image z-index value) for the CSS code .

For CSS (Under HEADER SECTION)—>

.Headermedia {
background-image: url(../Image/raz-veinz-header-2.jpg);
background-repeat: no-repeat;
margin: 0 0 0 30px;
height: 136px;
width: 600px;
z-index: 2;
top: 20px;
}

For HTML (Inside the <div class=”Header”></div> tag) —>

<div class=”Headermedia” style=”position:absolute;”></div>

If you want to put the Flash, used this Flash Satay Method, the valid W3C’s standards, this is the original code, of course, you need to create the Flash media first!

<object type=”application/x-shockwave-flash
data=”c.swf?path=movie.swf”
width=”400″ height=”300″>
<param name=”movie”
value=”c.swf?path=movie.swf” />
<img src=”noflash.gif”
width=”200″ height=”100″ alt=”” />
</object>

 Flash media have advantages and also disadvantages, read more here.

To put the text,

For CSS (Under HEADER SECTION)—>

.Headertext {
text-align: left;
font-family: “Times New Roman”, Times, serif;
color: #24201D;
height: 136px;
width: 664px;
z-index: 3;
top: 50px;
}
.Headertext h1{
font-size: 34px;
margin: 0 0 0 300px;
}

For HTML (Inside the <div class=”Header”></div> tag) —>

<div class=”Headertext” style=”position:absolute;”><h1>Raz-Veinz.com</h1></div>

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.

I’m  using .Headertext to create a new html division for text, and .Headertext h1 for <h1> tag that relate with .Headertext, I know this is a little bit complicated, maybe they could be more simplified, but I like to use the code in separate divisions, for more flexibility and future planning.

For the webpage title, the procedure is the same, here the code,

For the title and title background image CSS (Under HEADER SECTION)—>,

.Main-title-BG {
    background-image: url(../Image/Header_Wood.png);
    top: 203px;
    height: 79px;
    width: 765px;
    margin: -20px 0 0 -50px;
    z-index: 2;
}
    
.Main-title {
    top: 202px;
    height: 21px;
    width: 300px;
    z-index: 3;
    color: #CFC6C0;
    
}

.Main-title h2{
    font-style: oblique;
    font-size: 24px;
    margin: 0 0 0 30px;
}

For HTML (Inside the <div class=”Header”></div> tag) —>

<div class=”Main-title-BG” style=”position:absolute;”></div>
<div class=”Main-title” style=”position:absolute;”>
<!– TemplateBeginEditable name=”Main-Title” –>
<h2>Home</h2>
<!– TemplateEndEditable –>
</div>

The result, view with internet browser (shortkey ; F12)

To make it clearly, this is where the coding goes…

I think, that’s all for the basic header, see you in the next entry.

You can leave a response, or trackback from your own site.

Leave a Reply

*