Basic guide for web designing using Dreamweaver Part 2

This is a level up from the last one web designing with dreamwerver. Hope you will enjoy it

After you setup the site now you need to plan step by step like figure below

its simply is Designing graphics leyout —–> Creating HTML ——-> Creating CSS

Lets start with basic layout for 2 column website that.

For this layout we need #wrapper to hold all the divs and this is the HTML

The CSS

Simply set the width of the 2 columns and then float the Navigation to the left and the Content to the right. And also the width of the Wrapper div. Then Clear both floats in the footer.

#content{
width:520px;
float:right;
}
#mainnavigation{
width: 180px;
float: left;
}
#footer{
clear:both;
}

Lets give the navigation text some breathing room, by applying some padding to the navigations area’s content.

#mainnavigation{
padding-top: 20px;
padding-bottom: 20px;
}
#mainnavigation li{
padding-left: 20px;
padding-right: 20px;
}
Next give the right hand side of the content area some space. Again instead of applying padding directly to the element I find it better to apply it to the content itself to avoid the IE box model problems.

#content h1, #content h2, #content p{
padding-right: 20px;
}

Inserting div in Dreamweaver

Inserting images
To insert images to your web site select Insert -> Image. From the pop-up window choose an image from your computer and insert it into the page.
In the image’s Properties panel you can set different preferences such as name, size, alternative text, etc.

Basically now you can create basic one page website. I encourage to careate few pages like index.html, about.html and contact. Then you come across with the navigation issue. I will have navigation in next tutorial.

Most common Dreamweaver Keyboard shortcuts

New… Ctrl+N
Open… Ctrl+O
Save Ctrl+S

Undo Ctrl+Z,Alt+BkSp
Redo Ctrl+Y,Ctrl+Shift+Z
Cut Ctrl+X,Shift+Del
Copy Ctrl+C,Ctrl+Ins

Zoom In Ctrl+=
Zoom Out Ctrl+-
Show Ctrl+Alt+R
Show Grid Ctrl+Alt+G

Table Ctrl+Alt+T

Align
Left Ctrl+Alt+Shift+L
Center Ctrl+Alt+Shift+C
Right Ctrl+Alt+Shift+R
Justify Ctrl+Alt+Shift+J

Bold Ctrl+B
Italic Ctrl+I

Check Spelling Shift+F7

Preview in Primary Browser F12