PDA

View Full Version : DW table format usage


Paulo
10-05-2005, 02:14 PM
Hello again,

May I kindly ask how can I create a page that is divided 20% on the right side and 80% on the right side?

bkendall
10-05-2005, 02:22 PM
I am guessing you are wanting to know how to do this using a table, but you can also do this with layers.


<table width="100%" border="0">
<tr>
<td width="20%"></td>
<td width="80%"></td>
</tr>
</table>

Paulo
10-06-2005, 11:47 AM
I am guessing you are wanting to know how to do this using a table, but you can also do this with layers.


<table width="100%" border="0">
<tr>
<td width="20%"></td>
<td width="80%"></td>
</tr>
</table>

Hey bkendall,

many thanks for the valuable attention.

May I ask do I have to "hard code" it?

if I want to do it in DW, how can I do it?

bkendall
10-06-2005, 12:13 PM
No you don't have to do it in code view, I was jsut showing you what it would look like. Yes you can certainly do it in dreamweaver.

Create a page or go to your page that you want the table on, click on Insert > Table. Thisa will bringup the table dialog box. From here you set the number of rows and columns you want (you can always modify it alter if you need to) and you can set the border, padding and spacing.

Set the table width to 100% and click ok. now you should have an outlined table that goes the full length of the page. Put your curser in the inner box on the right and then at the bottom of the screen you will see <td> click on it and it will highlight the td. Now in the properties panel you will see a W and H, for the width type in 80%. Now the other td will already be at 20% but it is a good idea to go ahead and repeat the above step and type in 20%.

There you go, that should give you a table with two columns and a width of 20 and 80%. I would suggest playing with the table settings and looking at the code view often so you learn what is happening with the html.

Let us know how you make out! B)

Paulo
10-06-2005, 01:42 PM
Hey,

Many thanks again. May I kindly asked what numeric values should I "type" on the following:

Rows:
Columns:
table width: 100%
border thickness:
cell padding:
cell spacing:

I tried using what you taught me, however, when I click ok, only a small table appeared. No "td" appeared below?

Could you give me the minimum and maximum value on "Height?"

bkendall
10-06-2005, 01:48 PM
I normally do not worry abut the hieght since your content will set that for you so most the time it is not an issue.

As for the other table settings I would play with them and find what works the best for you. here this will get you started but you should really try to learn and understand the properties.

Rows: 1
Columns: 2
table width: 100%
border thickness: 0
cell padding: 0
cell spacing: 0

this should give you the table at 100% and the 2 tds

Paulo
10-06-2005, 01:58 PM
Dear Sir,

Wow! it worked!

:-)

Now, i am trying to add colors into both table. My plan is to used a darker color on the 20% ( left side ), and used a lighter color for the 80% of the page.

How do I kindly changed the color ? please do teach me how.

Many thanks again!

bkendall
10-06-2005, 02:04 PM
You will follow the same steps that you used to set the width. Put your curser into the inner box on the left or right and then hightlight the <td> at the bottom. This time instead of entering the width, you need to look to the bottom of the panel and you will see a box with Bg then a small square, click on the square which will launch the color picker. Select your color and hit enter and this should change the color of your td.

I would suggest also that in your spare time this weekend you go to the help menu at the top of the screen Help>Getting Started with Dreamweaver and go through some basic tutorials, it will help you with the basic features in dreamweaver.

Paulo
10-06-2005, 02:14 PM
You will follow the same steps that you used to set the width. Put your curser into the inner box on the left or right and then hightlight the <td> at the bottom. This time instead of entering the width, you need to look to the bottom of the panel and you will see a box with Bg then a small square, click on the square which will launch the color picker. Select your color and hit enter and this should change the color of your td.

I would suggest also that in your spare time this weekend you go to the help menu at the top of the screen Help>Getting Started with Dreamweaver and go through some basic tutorials, it will help you with the basic features in dreamweaver.
Hello again,

I did read the "Help" and bought a few books about DW MX 2004, however, it didn't taught me how to changed the colors on two sides.

I am sorry if I asked you this, I simply could not get any info, that is why I posted this here so that I can get help from people like you.

Hoping for your help and kind attention.

bkendall
10-06-2005, 02:21 PM
No problem at all Paulo I am always happy to help. I was only trying to help you broaden your understanding of DW by reading some tuts but I never mind giving you a hand when you need it. :)

Paulo
10-06-2005, 02:35 PM
Dear Sir,

the "Help" page instructed me to used CSS...

errr... I am not familiar using CSS.

Is there an easier way for me to set the background color into two different color?

I click on "td", and there's no option in the page properties which I can changed the color of the background. Only except the text color.

Hence, May i kindly asked how do I changed or set the background.

btw, i am using DW MX 2004 or DW 7.

bkendall
10-06-2005, 02:44 PM
ok once you have your td selected, look at the bootom of the screen. You should see the Properties panel. In the middle of that panel at the top is a row of buttons B, I, U, these are your text controls. Below that is another row of buttons that control ordered lists. Below this row is a box that says Bg, this is where you can specify the background image for your cell or table etc..

Ok below this box is another box that says Bg, there is also a square with a down arrow on it. Click on that arrow. This will bring up your color picker, choose your color and hit enter and it will add the color to your td.

Paulo
10-06-2005, 02:50 PM
Dear bkendall,

Got it! Many thanks!

muchas gracias for your patient and kind attention!

bkendall
10-06-2005, 02:54 PM
no problem Paulo glad I could help you out B)

Paulo
10-06-2005, 03:09 PM
no problem Paulo glad I could help you out B)
Your welcome Sir!

Apparently, tools that you mentioned...well the tool option wherein I can changed the background color was on "minimized mode" ...thats why I couldnt see them.

haha...I clicked something ...and walah...out came the other tool option.

Btw, I was able to changed the colors into two.

However, the top most part of my DW design view page....well, the color didn't stretch to the top most portion. Is there a way I can "modify" so that the two color will go end to end.

Oh yeah, one more question. When I click the 80% table. Why is it not going to the top most part of my 80% web page? I plan to used this ...to write my articles.

And the 20% left corner will contain the links and other relative links.

bkendall
10-06-2005, 03:19 PM
However, the top most part of my DW design view page....well, the color didn't stretch to the top most portion. Is there a way I can "modify" so that the two color will go end to end.

Oh yeah, one more question. When I click the 80% table. Why is it not going to the top most part of my 80% web page? I plan to used this ...to write my articles.

I am guessing that you are referring to the page borders, which explain why you hav space that is not the color of your td back grounds.

put your cursor outside of the table, anywhere on the page and right click. you should get a context menu and at the very bottom there should be an option for page properties. Click this option and it will bring up the page properties dialog box.

In the bottom section of that dialog box you will see 4 options starting with left margin. Mkae all of these values 0, then apply and ok. This will make your table take up all of the page wth no border.

Paulo
10-14-2005, 01:55 PM
Hello bkendall,

I am sorry but up to now I still can't fixed my problem.

here is how it went when I used the "Draw Layout Cell".


http://i21.photobucket.com/albums/b281/pnc168/sample2.jpg



Is there a way,if I used the Table ( Standard Mode ) to fixed this problem?

I cannot move my cursor outside the "Layout Mode."

So please, how should put the right value, so that I can attain a 20% Aquamarine mode and 80% ( left side ) "light blue."

bkendall
10-14-2005, 02:49 PM
Please post the code you used Palo or post a link to the page.

Paulo
10-16-2005, 03:19 AM
Dear bkendall,

sir, I still have not uploaded this to any site. becoz I still cannot used it.

The background color are my waterloo. :(

Is there a way I can removed the right side color green?

I want 80% of my page to be light blue in color.

Creative Insanity
10-16-2005, 06:19 AM
Yes there is, use a div and apply a bgcolor like this ('http://www.webthings.org/colors.html').

Paulo
10-17-2005, 02:05 PM
Yes there is, use a div and apply a bgcolor like this ('http://www.webthings.org/colors.html').
Excuse me, so how can I divide my web page into two color?

20% on the left side is different and 80% on the right side has a different color?

please do teach or show me how

domedia
10-17-2005, 03:08 PM
Paulo, you need to paste your code in here or upload it to a host.
Until you do, we're very limited in how we can help you.

Creative Insanity
10-17-2005, 06:17 PM
Do it like this:

<table width="100%" height="589" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" width="20%"></td>
<td align="left" valign="top"></td>
</tr>
</table>

gmcrone
10-17-2005, 07:37 PM
add this to your web page

in the head section add this lines:
<style type="text/css">
td.left { background-color: blue;}
td.right { background-color: green;}
</style>

In your table add this:


<table width="100%" height="589" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="left" align="left" valign="top" width="20%"></td>
<td class="right" align="left" valign="top"></td>
</tr>
</table>


Change the colors to be what you want..

Mike...

Paulo
10-18-2005, 02:50 PM
Gee Sir,

many thanks for all your helped. May God Bless you all for your generous help and kind attention!