welcome on board to this free online website design tutorial, if this is your first visit i will refer you to dreamweaver tutorial 1 my first class. and if you dont have an idea of what adobe dreamweaver is about then you will have to start from introduction to adobe dreamweaver.
please encourage me by leaving comments, if you follow and learnt something new please acknowledge and if you have a question please also drop a comment.
DREAMWEAVER TUTORIAL 2
IN tutorial 1, we used table to create a layout , the process is not flexible as what happens in one table has effect on the whole table and thats not good for design. each section of your layout should be independent.
the best way to layout you website is by using the Div tag and adding CSS to it. each section of your layout will standalone .
insert div tag
ID should be wrapper
then click on new css
you should get something as below when you 'ok' all the pop up on your screen
save the new css as layout
this new css is add so we can have complete control of the features of #wrapper. wrapper will carry div tag of our layout. its like the mother of the design
we will name the new css file #body
when you double click on the #body css you will be able to add background color
try it out... successful?
after adding background color.
click on box
set width to 100%
undo all the above and get back here
we will be adding another div tag we"ll call it header
the #header should be showing on your css panel
double click on the #header to edit its sytle
you should get something like this
you can select desired colour
with the header set, lets add another Div tag #body dont mistake it for css file \body\ that we used above to control the #wrapper Div tag
this #body Div tag will host our content( text,,,e,t,c)
click on add Div tag
the same procedure with adding the #wrapper Div tag
style it as you wish
you should get something like below
now copy paste some random text and add to the body tag
preview your page on your browser
our layout will look more attractive if the body tag is centralized
lets get it done !
set left and right to auto, automatically centralizes the body tag
this looks better. there is still more to this .
lets take a break ! checkout for tutorial 2.1
cheers!!!
hit the facebook share button.
like our page on facebook
https://www.facebook.com/gcmtech
0 comments:
Post a Comment