Photoshop and Dreamweaver Tutorial for Creating an Expandable / Stretchable, Rounded-Corners Table To Place Your Content in a Content Box (Page 5)

PREVIOUS PAGE (4)

(10) Now it is time to insert our table. Go to the top Dreamweaver menu bar and click on ‘Insert’ > ‘Table’.

The ‘Table’ window will open up. Enter ‘3′ for Rows, ‘1′ for Columns, and ‘455′ for Pixels. Make sure that the cell padding, border, and cell spacing are all ‘0′.

(11) Now it is time to save our Dreamweaver file, otherwise Dreamweaver will give you a warning message when you try to add images. Go to the top menu bar and click on ‘File’ > ‘Save as’.

The ‘Save’ window opens up. Where it says ‘File Name’, type in expandabletables.html.

(12) Now click in your table within the top row as shown below. Now go to the top Dreamweaver menu bar and click on ‘Insert’ > ‘Image’.

The ‘Insert Image’ window will open up. Find the image that you saved from Photoshop, called ‘toptable.gif’, and select the file. Click on the ‘OK’ button.

Now click in the table’s bottom row. Repeat the above step to find the image called ‘bottomtable.gif’. Now your table will look like this.

(13) Now for the tricky part of this tutorial, the part that most people don’t know how to do. For the middle of the table we are going to use the 455 pixel x 1 pixel image that we created in Photoshop called ‘middle.gif’. We are going to tile ‘middle.gif’ within the table’s middle row. If this table gets larger, this image will repeat itself and expand from top to bottom and appear as if that 1 pixel wide image is as big or as small as the table gets.

Is your ‘Properties’ toolbar opened on the bottom of your Dreamweaver screen? If not, go to the top Dreamweaver menu bar and click on ‘Windows’ > ‘Properties’. The Properties bar will now open. If there is a triangle pointing downwards at the far right of the ‘Properties’ bar, then click on it in order to expand the bar further. The arrow will point upwards if you do this correctly.

(13) Now click in the table’s middle row and then find the folder next to the ‘Bg’ as shown below. (This folder will allow you to browse your computer for the image we are going to use as the tiled background). You should then find the image ‘middle.gif’ and insert it.

(14) Your table is starting to come together. Look at it, it looks just like the first image that I showed you in the beginning of this tutorial.

(15) Now all that is left to do is to insert a second table within the middle row. This will allow the text to stay within the table as you type. Otherwise, without this embedded table, the text would go outside the border walls. So put your cursor in the table’s middle row and go to Dreamweaver’s top menu bar and click on ‘Insert’ > ‘Table’. When the ‘Table’ window opens, create ‘3′ columns, ‘1′ row, and a width of ‘100%’. You will see 2 draggable column borders. Drag these towards the outside of the table (drag the one on the right towards the right, and the one on the left towards the left). You can drag them as close or as far away to the border as you want, It depends on how much padding you want around your text. In the picture below, you can see what these draggable column borders look like.

That’s it!! You’ve created your very own expandable table with rounded corners.

Click Here to get the HTML and Images (if you want them).

SOME OTHER ARTICLES AND TUTORIALS FOR CREATING EXPANDABLE ROUNDED CORNERS, BOXES, TABLES

CSS and Round Corners: Build Boxes with Curves - One of the main reasons why designers use images on a Web page is to create curves and round corners. It’s currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied. The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, we’ll use CSS to create this box with round corners, without an image tag in sight!

How to Create an Expanding Header for HTML and Photoshop - If you thought that tutorial was cool then you will love this expandable header tutorial. Design a Coded Box - This tutorial uses Adobe Photoshop and Dreamweaver as well. Keep in mind this tutorial will not give you every color used. Allthough source files will be provided if need be. Slicing and Coding a Content Box in Photopaint and Dreamweaver - This tutorial will show you how to slice up a basic content box and use DreamWeaver to create the tables and format the box to accept content without displaying a mess whenever the content is too much or the size of the browser window is changed etc.Advanced Slicing - A tutorial for advanced ImageReady slicing. Learn how to cut up and slice an rounded box in ImageReady in order to create a content box and bring it into any HTML or text editor to use it for content. The Trick to Rounded Corner Tables - One technique that has always been of interest to new Web designers is building rounded corners for the tables in their site.

Adobe GoLive Rounded Corners - This tutorial is going to explain how make a nice curved border around some text. The trick is to make the border look the same in all the common types of browsers, which is not as obvious as it might seem.

Free! Fireworks Basics: From Navigation Graphic to Stretchy Table - In this free tutorial Joyce J. Evans author of many well-respected books including Macromedia Fireworks MX 2004 Zero to Hero, takes us through some basic Fireworks manipulation to build an effective curved navigation graphic. Then Joyce extends this to show us how we can use the graphic to build a stretchy table in Dreamweaver.

Our Sister Sites : Graphics Tutorials Search - All Web Design Resources Portal - All Graphic Design Resources - Education Directory - All Schools & Learning - All Traveling Family Vacations  - Graphics ’N Graphic Design Blog

DID YOU LIKE THIS DESIGN POST? IF SO, PLEASE HELP US BY ADDING US AS ONE OF YOUR TECHNORATI FAVORITES AND BY ADDING OUR ARTICLES TO YOUR FAVORITE SOCIAL BOOKMARKING SITES (BELOW)