Web Design Tutorials: Creating a CSS layout using div tags (video 2)

http://www.lokeepro.com
The second video in my video tutorial series, this video picks up where "Getting Started (video 1)" leaves off. In this video I will create a simple CSS layout using DIV tags, and quickly styling it with background images made in photoshop.

This Lesson we will:
-Create an index.html Page
-Create layout.css file
-Create background images for Body, Header, Nav, Content, and Footer
-Create an HTML / CSS layout with Header, Navigation, Content, and Footer

**Pause as needed I wanted to keep this under the 10min mark so It was made fast**

Instead of explaining the step by step instructions you can download a copy of the example files used in this lesson from:

http://lokeepro.com/tutorials/lesson1-2.rar

Pretty much this covers a basic CSS layout using div tags, this should be used as a guide for making your own website .. I know it doesn't look pretty but it was made as an example.. use your own creativity to make it shine.. I'll be releasing more videos on photoshop techniques at a later date.

The next video in the series will cover: Navigation Techniques - Flash & CSS

Category:

Education

Tags:

• Web
• design
• tutorials
• Creating
• CSS
• layout
• using
• div
• tags
• lokeepro
• lokee
• pro
• photoshop
• dreamweaver

[coolieo151285]

you kept the tutorial very basic also... wheres the instructional part of the tut? all you are doing is putting a bunch of writing on the screen......

[LokeePro]

Hello coolieo, this tutorial is directed to people with the basic knowledge of html and css. I provide the source files if you would like to download them and experiment yourself. Sorry I couldn't be more instructional but I tried to keep the video length to 10mins. Please DL the source files and get your hands in the dirt and do some "self teaching", its the only way to truly learn. I show you the door, only you can walk though it.

[LokeePro]

Sorry about the no sound I'm gonna do a voice over and maybe some background music.

[TheOnlooker2010]

get assistance from Professional web design and SEO call the folks at White Hope Productions, you can call them at 1.877.312.7575

[niyazbecse]

thanks brother, very nice turorial....keep up...

[dirigentkomponist]

no sound

[pacorocha]

But one downside is that there is no support for animations in PNGs

[Rogueixpresents]

using easy programs for tuts... too easy :S

[LokeePro]

Exactly pacorocha, Also in this tutorial I kept the design very basic, as a .png you can create very stunning graphics for your css layout. I find they seem to be pretty small in file size compared to quality. and the alpha capabilities far surpass those of a .gif

[pacorocha]

Because PNGs support more colors and GIFs don't. And gradients can contain lots of colors.