Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
ADOBE DREAMWEAVER:HomeDreamweaver ForumDreamweaver TutorialsFAQAdobe FlashWeb Design

Re: Dreamweaver Basics

COW Forums : Adobe Dreamweaver

Social ShareSend Email MessageShare on FacebookShare on TwitterShare on LinkedInComment
Respond to this post   •   Return to posts index   •   Read entire thread

Richard WilliamsRe: Dreamweaver Basics
by on Feb 11, 2011 at 9:28:10 pm

ok perfect... lets do this...

Click on the white image in your page in dreamweaver.

Now, in the bottom of the design view, you will see that there are a few tags writen in code. (just on the frame around the design view, on the bottom left hand side, on the right youll see a selct tool and hand tool etc... Yeah..?)
that says
<body> <div.wrapper> <table#Table 01> <tr> <td> <img>
and <img> looks depressed
Ok, so this is like this because, obviously, we have just senelted the image. The image has been inserted with a width of 888px and a height of 458px.
NOW... we want to highlight the cell the image is in, not the image. So I want you to click on the <td> next to the <img> on the area we just discussed.

You will notice the properties menu change at the bottom of the screen. Now, where it says Horiz default, and vert default in the properties menu, next to that, there are two boxes, with W and H next to them.

In the box next to H, type in there 458 (obviously H stands for height).
We dont need to add width, becasue the images above in the table will govern the width fine for us. You dont need to add a height either... but we are going to for now until we do a few other things.

Now in the same properties menu, right of where you just typed 458, you will see another box with Bg and a grey square on it. click on the down arrow and select white from the colour chart.

Now your page looks as it did, except now you dont have to load an image as you were doing, as there is no need and its a waste of loading speed.
Now, go left to the Vert option we passed across earlier, and from the drop down select TOP
Now, type a few words etc.. you can see you are now typing text straight into the page. This is what you need to be doing, otherwise search engine crawls etc can not determine what your site is all about and what the content is.

Now, if you stick a load of Lorum Ipsum text in, and just paste it in from google, you will see your height will be no less than the setting we put in of 458px, but will increase in size if you put more and more content in the page.

So What next....

Well lets say you want two colums in that area... Still with your cursor in the text area, go down to the properties menu again, and in the bottom left corner, you will see the word Cell.

Under that, you will see two images, roll your mouse over them and you will see these are called merge cells, and split cells.
click on split cells, and a pop up will come up. put a dot in the split into rows option, and leave the number at 7 (which it should be by default on your page. (it takes this from the above cells, your menu.

Now, Highlight the first 4 cells, ans press merge cells. Do this again with the other three cells, and now you have two columns.
(you have to do this this way with dreamweaver, its because of the menu above thats all.

Hopefully this has given you some more insigt to play around with.
Also, i would do the same thing with the footer, giving it a background colour and typing text in... thats another image the page doesnt have to load to srart up.

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Posts IndexRead Thread
Reply   Like  
Social ShareSend Email MessageShare on FacebookShare on TwitterShare on LinkedInComment

Current Message Thread:



Creative COW LinkedIn GroupCreative COW Facebook PageCreative COW on Twitter
Social ShareSend Email MessageShare on FacebookShare on TwitterShare on LinkedInComment
© 2016 All rights are reserved. - Privacy Policy