My Community

Tutorial 5 Header, Sitenav, Main, Content, and Footer Layout

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 5 Header, Sitenav, Main, Content, and Footer Layout
« on: September 24, 2014, 01:43:10 PM »
There are 5 critical elements to designing a webpage.  That is setting up the header, sitenav, main page, content page, and footer.

I will explain what each of these does.

Header is usually the first thing you put up when coding these pages.  You know how you have your <head></head> and your <body></body> when coding a basic webpage?  Well the header acts as the <head></head> for the <body></body>.  Basically the header is a head inside the body.  I'll demonstrate an example of this in CSS later.

Site Nav Is Where You Want To Insert A Navigation Bar If You Plan On Making A Navigation Bar With Tables.

Main Page Is a page that can be any background color of your choice.  You can also use a cool photo as your main page with the background image and background url.  I'll show you how to do this in lesson 6 of HTML.

Content Page The content page is where your words and photos show up.  This should usually be white so it looks more professional.

Footer.  The footer is where you can enter your email if people want to contact you.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 5 Header, Sitenav, Main, Content, and Footer Layout
« Reply #1 on: September 24, 2014, 01:49:58 PM »
Now I'll show you the CSS Code for each Element.

#header { text-align: center;
   background-color: black; color: yellow; }
   
#sitenav ol { padding: 0; margin: 0;
   display: inline; }
   
#sitenav li { display: inline; padding-left: 1em;
   margin-left: 1em; border-left: 1px
      solid black; }
      
#sitenav li:first-child
   { padding-left: 0; border-left: none;
      margin-left: 0; }
   
#main { padding: 0 6em 6em 6em;
   position: relative;
   background-color: brown; }
   
#content { background-color: white; }

#footer {background-color: orange; }

While having the CSS code helps you still need to know how to insert these features to a website in HTML before that shows up.  I will show you how to do that in lesson 6 of HTML which will be sometime later in 2014.  Lesson 6 of CSS will involve designing a navigation bar using HTML and CSS.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.