Dreamweaver workshops | Main Links
More on Graphics
1. Open the file called gallery.htm.
2. Select the tiger image, the property inspector should now change to reflect image properties.
3. Resizing resets the WIDTH and HEIGHT attributes of the image. The W and H fields in the Property inspector display the current width and height of the image as you resize it. The image's file size does not change. Images may become pixelated or distorted if you reset their WIDTH and HEIGHT attributes.
To maintain the same aspect ratio, hold down the Shift key while you resize a bitmap. However, it is recommended that you visually resize these elements in Dreamweaver only to determine the layout. Once you have determined the ideal size for your image, edit the file in an image-editing application. Then import the image back into Dreamweaver at 100% of the resized size.
4. Change the values in the W field to 50 and press the Enter key. Undo this action (Ctrl + Z).
5. Type 10 in the border field. This creates a border (10 pixels thick) around the image. If you make the image a link, the border picks up the same color settings as other links on your page.
6. Use the Refresh button to reset the image's original settings.
7. The Align field aligns an image and text on the same line. Try some of the options to see different possibilities. Left and baseline are often used. Set the align to left for the four big animal pictures. View this site for examples www.iboost.com/build/software/dw/tutorial/805.htm and check this site for brief descriptions www.arch.su.edu.au/%7Ejoe/guides/dreamweaver/Help/html/08.images.fm4.html
8. In the V space field type 10 and in the H space field type 15
9. This site compares different SRC path options www.arch.su.edu.au/%7Ejoe/guides/dreamweaver/Help/html/03.site.fm3.html#65838
Basic Tables
Take a look at this article - www.macromedia.com/support/dreamweaver/layout/frames_or_tables
Tables can be created within Dreamweaver from the Insert Menu, by selecting
Table. Or from the Objects Palette by clicking on the Table Icon .
Either option brings up the following Dialog Box:
Several fields must be defined before the table is inserted:
· Rows: How many rows in the table
· Columns: How many columns in the table
· Cell Padding: Specifies the space between the table border and the cell. This number is in pixels.
· Cell Spacing: Specifies spacing between table cells. This number is also in pixels.
· Width: The width of the table. This is either a percentage or a number in pixels. Use the drop down menu to choose.
· Border: The thickness of the table border. This is a number in pixels. A value of 0 will give you a table without a border.
Property Fields For Tables
· Table Name: This is where you would name the table. This really only comes into effect when you will be using a Javascript to call the table.
· Rows: The number of rows. Changing this will change the table. Only do this if there is no data inside the table.
· Columns. The number of columns. Changing this will change the table. Like rows, only do this if there is no data inside the table.
· Width (W): This is the width of the entire table. Use the drop down menu to the right to specify whether the width is in pixels or a percentage.
· Height (H): This is the height of the entire table. Only change this if you have a fixed height within the table, such as an image. The height of many HTML elements will vary on many platforms. If you're at 800 x 600, and specify a height for that resolution, there will be empty space at the end for someone at a larger resolution.
· Cellpad: Specifies the space between the table border and the cell.
· CellSpace: Specifies spacing between table cells.
· Align: This is where you set the alignment of the table on the page. The options are left, center and right.
· Border: The size of the border in pixels.
· V Space: Specifies the vertical space in pixels around the table.
· H Space: Specifies the horizontal space in pixels around the table.
· Light Brdr: Gives the inside borders a light color. This is only supported in Internet Explorer.
· Dark Brdr: Gives the inside borders a dark color. This is also only supported in Internet Explorer.
· BG (long): Specifies a file to be used as the table background. A file can be chosen from the hard drive by clicking on the Folder icon.
· BG (short): Specifies a table background color in Hexadecimal format.
· Brdr: The border color for the table in pixels.
Cell Properties
Horz: Horizontal alignment. This affects only the elements inside the cell. The options are Left, Center and Right.
Vert: Vertical alignment. This affects the orientation of the elements within the cell relative to other cells.
W: Width of the cell. This can be a number or a percentage. If it is a percentage, the % sign must be added.
H: Height of the cell. This must be a number in pixels.
No Wrap (checkbox): This prevents elements inside the cell from wrapping.
Header (checkbox): This designates that the cell is a Header Cell (TH). This makes any text inside centered and bold.
BG (long): Background image for the cell.
BG (small): Background color for the cell.
Brdr: Border color for the cell.
1. Open the Calendar page you created earlier. Place the cursor below the heading and link you created.
2. Create a table with 5 columns, 4 rows, width = 100% and border =1
3. You can modify the table at any time from the Properties toolbar. Before you can modify your table, you must select it. This can be done different ways:
· By clicking near the edges of the table with the mouse
· By selecting Table and then Select Table from the Modify Menu
· By clicking on the <table> tag in the lower left corner of the screen.
4. Click in the first cell in the first row and type June. Select the entire row. You can use column spanning to merge all cells in the first row. Then you can center the word June over the entire table. See the Spanning handout for details.
5. Click in the first cell of the second row and type Monday. Fill in the days of the week in the rest of the first rows cells (Tuesday in the second cell…).
6. Select the first row (hold down the CTRL key and click in each individual cell of the row, or click the <tr> tag in the lower left corner) and change the font size and color. Change the background color also. You can change the border color also if you like.
7. In the second row type a 1 in the first cell, a 2 in the second cell, and a 4 in the third cell.
8. Make sure the cursor is anywhere in the first row and right-click. Choose Insert row - notice where the new row was placed.
9. Make sure the cursor is anywhere in the second row and right-click. Choose Delete row.
10. Place the cursor in the cell with the 4. Right click while pointing at the cell and choose Insert Column.
1. Switch to the Gallery.htm page. Go to the bottom of the page.
2. Create a table with 1 row and 4 columns. Make the width 50%, the border 0 and the alignment should be centered.
3. Point to the first of the small animal graphics lined up at the bottom of the page just above you table. Drag it into the first cell.
4. Drag the second animal picture into the second cell, the third animal picture into the third cell and the last animal picture into the fourth cell. Make sure to save your work.
5. Check out this site for some nice layout tips www.iboost.com/build/software/dw/tutorial/827.htm
6. Open the file called nestedtableexample.htm (in the nestedtable folder). How would you center the second table within the light purple area?
7. Try a table within a table.
Some Table Tricks
www.smartwebby.com/web_site_design/table_tricks.asp
thanks to 
for the graphics