Dreamweaver Tips: using Cells in dreamweaver
This video is going to show you how to use cells optoin in Dreamweaver. This is an important property of a Dreamweaver, which you need to understand thoroughly. Lets see the video, this will guide you through the method.
Now I need a few more cells in this area of my tables so if I place my cursor in here I can split this cell by using the split cell button and if I want 2 rows click ‘ok’. And then if I want more columns across here cause this is where I’m going to put my thumbnails, I can use that button again or I can just right click ‘Table’, ‘Split Cell’ and I want 5 columns. And Dreamweaver should evenly space those columns across there. Now sometimes Dreamweaver develops a mind of its own and creates those columns a little off size. As soon as you put content in them and as long as there is nothing happening behind the scenes that’s controlling the width of these , if we split the screen here and we look at what’s happening behind the scenes ,each of these cells is being automatically sized because there is no size property specified in this TD tag. But sometimes Dream Weaver will still give you different size cells even when there is nothing on the code to warrant that. Don’t worry about it if that happens to you as you are playing around with the table.
Just as soon as you get your content in the place it should even itself out. You can also size cells manually. So if I know that I want this left cell to be 300 pixels say instead of 385 then I can use the properties inspector and just change that number to 300 or I can click and drag. One other thing to be careful of if you make a left cell 300, look and see if there is a size for the right cell. I know the total size of this table is 800 so if I have a 300 pixel cell in the left then I either need to add a 500 pixel cell in the right so that the total is 800 or I need to have it set to nothing which tells the browser to automatically fill that in the rest of the space. But it’s very easy as we start splitting and merging cells and this is kind of an advanced tip. To create cells with fixed width that equals more or less than the total size of the table and when you do that you get very unpredictable results. So notice I have been very careful that the left cell is 300, the right cell is set to nothing and these are equally spaced because they are also set no width no height. A couple of other things to watch for when you are creating complex tables like this notice that when I put my cursor on the left side I am aligned vertically to the top and horizontally to the left. But over here remember in the previous design we wanted this aligned bottom so that the text will leave kind of a gap at the top kind of a design trick. But now I am going to want this aligned to the top so make sure that you change that. And this time I am going to select all of these cells and I can apply the vertical alignment to all of them once. The other thing I want to do to these cells on the right is to center them. So that when I put the images inside them they will all be centered. So I can do that with horizontal center. Now when I place my photos into these cells they will all be nicely equally spaced apart. One other tip I could have created is nested tables here for this row of cells and that would have been perfectly correct in terms of HTML. But you see this row it is slightly more efficient to split and merge cells in one table than to have two tables within tables as nested tables. Browsers will load the pages a little faster the code will be a little cleaner. So whenever you cam you are better of splitting and merging cells within an existing table than using that trick of just inserting a completely new table into a cell.
Tags: free dreamweaver tutorials, dreamweaver tutorial video, curso flash dreamweaver, dreamweaver forum, inserting slide shows into dreamweaver, wright dreamweaver
Post a comment