1. XP Dreamweaver MX 2004 Tutorial 4 1 Organizing Page Content and Layout

2. XP Dreamweaver MX 2004 Tutorial 4 2 Organizing Page Content and Layout In this tutorial, you will: –Review graphic formats and compression –Add graphics to a Web page –Format and edit graphics –Create graphic hyperlinks and an image map –Create a rollover –Create tables and enter table content –Select tables and table elements –Format and resize tables

3. XP Dreamweaver MX 2004 Tutorial 4 3 Organizing Page Content and Layout In this tutorial, you will (cont’d): –Format, resize, add, and delete cells, rows, and columns –Explore the HTML code of tables –Create tables in Layout mode –Use invisible graphics as spacers –Select tables and table elements in Layout mode –Format and resize tables in Layout mode –Format, resize, add, and delete cells, rows, and columns in Layout mode

4. XP Dreamweaver MX 2004 Tutorial 4 4 Understanding Graphics and Compression Graphics are used to add color and interest to a Web site. They can also add information – such as maps, graphs or charts. Most importantly, they reinforce the goals for the Web site. You should evaluate graphics for their value to the page. If a graphic does not add to the page, it should not be added.

5. XP Dreamweaver MX 2004 Tutorial 4 5 Understanding Graphics and Compression Graphics are usually large and can delay the loading of the web page if a compression format is not used. The smaller the graphic, the faster it loads. Load time is also affected by the number of graphics on a page. You should consider the importance of the graphic to the site user when adding graphics that might take a long time to load.

6. XP Dreamweaver MX 2004 Tutorial 4 6 Understanding Graphics and Compression Approximate times to download files Connection Type (speed in Size of Page (in Kilobytes) Kilobytes per second)10 KB50KB100KB200KB400KB Very Small Small Medium Large Very Large download download download download download Dial-up 56 Kbps (approx. 5 KBps) 2 seconds 10 seconds 20 seconds 40 seconds 80 seconds Home DSL 640 Bbps (approx. 80 KBps) <1 second <1 second 1.25 seconds 2.5 seconds 5 seconds Cable Modem 1.5 Mbps (approx. 190 KBps) <1 second <1 second <1 second 1 second 2.1 seconds

7. XP Dreamweaver MX 2004 Tutorial 4 7 Understanding Graphics and Compression There are three universal display graphic formats: –GIF (.gif) (Graphics Interchange Format) Images with large areas of non-gradient color. Limiting the color range of the file reduces the size –JPEG (.jpg) (Joint Photographic Experts Group) Photographic images images with many gradient colors. A glossy format which loses information as it compresses –PNG (.png) (Portable Network Graphics) Supports 48-bit true color, variable transparency and uses lossless compression. Better quality, but larger size Only supported in later browsers

8. XP Dreamweaver MX 2004 Tutorial 4 8 Adding Graphics to Web Pages Before adding graphics to your Web page, they need to be the correct size, otherwise they will be loaded and resized on every user’s machine. Graphics should also be compressed to the smallest file size possible. You will need to save both the original and the reduced, compressed Web page graphic in case you need to make corrections, etc. You will also want to use logical names on your graphics for easy reference.

9. XP Dreamweaver MX 2004 Tutorial 4 9 Adding Graphics to Web Pages When you first add graphics to your Web page you will use the Insert bar. After a graphic is added, it appears in the Assets panel and you can then use either the Insert bar or the Assets panel to add it to another page. Graphics on the Web site should be stored in the Graphics folder within the root folder for the site. Dreamweaver stores an image tag on the Web page and retrieves the actual graphic from the Graphics folder.

10. XP Dreamweaver MX 2004 Tutorial 4 10 Adding Graphics to Web Pages Assets are the images, colors, URLs, Flash, Shockwave, movies, scripts, templates, and library items that you use throughout a site. You can manage your assets using the Assets panel. When a graphic is added to the local root folder, it is automatically listed in the Assets panel.

11. XP Dreamweaver MX 2004 Tutorial 4 11 Adding Graphics to Web Pages Images in the Assets panel

12. XP Dreamweaver MX 2004 Tutorial 4 12 Formatting Graphics Using CSS Styles and the Property Inspector You format graphics either by creating a CSS style and applying it to the graphic or by selecting the graphic and setting the attributes in the Property inspector. Graphic attributes listed in the Property inspector are image, W (Width) and H (Height), reset image size, Src (image source file), Alt (alternate), class, V space and H space, Low Src (low resolution image source file), border, and align.

13. XP Dreamweaver MX 2004 Tutorial 4 13 Formatting Graphics Using CSS Styles and the Property Inspector The attributes list for a graphic

14. XP Dreamweaver MX 2004 Tutorial 4 14 Editing Graphics from Within Dreamweaver You can change the appearance of a graphic by editing it. Editing a graphic is the process of changing and manipulating the actual image. You can use the Dreamweaver editing components even if a graphics editing program is not installed on your computer.

15. XP Dreamweaver MX 2004 Tutorial 4 15 Editing Graphics from Within Dreamweaver Dreamweaver includes some basic editing components such as: –Crop – an image editing process that reduces the area of the graphic by deleting unwanted outer area. –Resample – an image editing process that adds or subtracts pixels from a graphic that has been resized. –Brightness and Contrast – an image editing process adjusts the brightness and contrast of the pixels in a graphic. –Sharpen - an image editing process that increases contrast of a graphic’s edges to improve definition.

16. XP Dreamweaver MX 2004 Tutorial 4 16 Editing Graphics from Within Dreamweaver When you edit a graphic, your edits can not be undone. It is a good idea to keep a copy of the original graphic outside the local root folder so that you can reinsert the original graphic in the page if you dislike the edited version.

17. XP Dreamweaver MX 2004 Tutorial 4 17 Editing Graphics from Within Dreamweaver Resized Graphic

18. XP Dreamweaver MX 2004 Tutorial 4 18 Editing Graphics from Within Dreamweaver Resampled Graphic

19. XP Dreamweaver MX 2004 Tutorial 4 19 Editing Graphics from Within Dreamweaver Cropping a Graphic

20. XP Dreamweaver MX 2004 Tutorial 4 20 Creating Graphic Hyperlinks Graphics are also often used on a Web site to link to other pages or sites. Links can be created for the whole image or it can be divided into several links. Graphic links are created in the same way that you created text links.

21. XP Dreamweaver MX 2004 Tutorial 4 21 Creating an Image Map You can also create an image map for a graphic, dividing it into invisible regions or hotspots. A hotspot is a part of an image that when clicked an action occurs. – i.e. clicking on a state on a map of the U.S. might bring the weather up for that state. There are three types of hotspots; rectangular, oval and polygonal.

22. XP Dreamweaver MX 2004 Tutorial 4 22 Creating an Image Map You click and drag the appropriate tool to create the hotspot in the desired shape. Hotspots can be moved or resized using the Pointer Hotspot Tool When a hotspot is selected, the Property inspector displays hotspot buttons and pointer tool.

23. XP Dreamweaver MX 2004 Tutorial 4 23 Creating an Image Map The Property inspector displays hotspot attributes, including: –Link – the page or file that opens when the hotspot is clicked. –Target – the frame or window the linked page will open into. –Alt (Alternative) – alternative text description –Map – a descriptive name for the image map.

24. XP Dreamweaver MX 2004 Tutorial 4 24 Creating Rollovers A rollover is a stacked graphic where the image changes as the pointer moves over it. The two graphics must be the same size. When a rollover is created, Dreamweaver creates code to: - Preload the graphics when the Web page is loaded. - Cause the graphics to swap when the pointer hovers over them. - Cause the graphics to swap back when the pointer no longer hovers over them. - Causes the user to link to a new page if that option is specified.

25. XP Dreamweaver MX 2004 Tutorial 4 25 Inserting Rollovers A rollover is a JavaScript behavior. To create a rollover, you click the Rollover Image button and enter image name, location of the original image, location of the rollover image, and a link URL. The image name is the name in the Property inspector for the stacked rollover image and is not the same as either of the two original images.

26. XP Dreamweaver MX 2004 Tutorial 4 26 Inserting Rollovers Inserting a Rollover

27. XP Dreamweaver MX 2004 Tutorial 4 27 Inserting Rollovers Once created, you can copy and paste rollovers to other pages using the Copy HTML command on the Edit menu. When you are pointing to the new location, click Paste HTML to finish the copy process. You can also edit a rollover by deleting and replacing it, by replacing one or both of the original graphics, or by editing the JavaScript in Code view.

28. XP Dreamweaver MX 2004 Tutorial 4 28 Creating Tables Tables can be used to provide a structure for the layout of a Web page, providing more flexible layouts. Tables are divided into rows (horizontal) and columns (vertical). The intersection of a row and column is a cell. The four lines surrounding a cell are called borders. Borders can be visible or invisible (border=0).

29. XP Dreamweaver MX 2004 Tutorial 4 29 Creating Tables A table can be inserted into a Web page by moving the insertion point to the desired location and clicking the Table button in the Layout category or on the Common tab of the Insert bar. There are several table parameters you can specify: –Rows – the number of rows in the table (can be increased later) –Columns – the number of columns in the table (can be increased later)

30. XP Dreamweaver MX 2004 Tutorial 4 30 Creating Tables Table parameters you can specify (Cont.): –Table Width – horizontal size of the table in pixels or as a percentage of the browser window. –Border Thickness – the size in pixels of the border. (size of 0 creates invisible borders). –Cell Padding – the empty space between the border and the cell content. Default is 1. –Cell Spacing – width of cell walls in pixels. Default is 2. If the border is invisible, so are the cell walls, no matter how thick they are.

31. XP Dreamweaver MX 2004 Tutorial 4 31 Creating Tables Table parameters you can specify (Cont.): –Header – the row and columns of a table that contain heading information. –Caption – a table title that is displayed outside of the table. –Align Caption – designates the alignment of the caption in relation to the table. –Summary – a description of the table.

32. XP Dreamweaver MX 2004 Tutorial 4 32 Creating Tables Table grid on a Web page

33. XP Dreamweaver MX 2004 Tutorial 4 33 Creating Tables Dreamweaver inserts a non-breaking space in each cell. The non-breaking space keeps the cells from collapsing as different browsers display the page. You can view a non-breaking space in Code or Split view.

34. XP Dreamweaver MX 2004 Tutorial 4 34 Adding Content to Cells To add text to a cell, click the cell and type, or use the Cut and Paste options. Several keyboard commands help navigate through the table: –Tab key moves to the next cell –Tab key in the last cell of a table adds a row –Shift + Tab moves to the previous cell Graphics can be added using the Image Button in the Images list of the Insert bar.

35. XP Dreamweaver MX 2004 Tutorial 4 35 Selecting Tables and Table Elements You will want to modify the table layout to meet your specific needs, but need to select it first. You can select the whole table, a column, a row, or a single cell. When you select the entire table, a bold black line is shown around it and resizing handles appear. To select a table, right-click it, point to Table and click Select table. Clicking outside the table deselects it.

36. XP Dreamweaver MX 2004 Tutorial 4 36 Selecting Tables and Table Elements A Selected table

37. XP Dreamweaver MX 2004 Tutorial 4 37 Selecting Tables and Table Elements When you want to change the attributes of a cell, you must select just that cell. To select a cell(s), drag across it (them) until the borders are black. To select a whole column, click above the top border of that column. To select a whole row, click to the left of that row.

38. XP Dreamweaver MX 2004 Tutorial 4 38 Selecting Tables and Table Elements A Selected Cell A Selected Column A Selected Row

39. XP Dreamweaver MX 2004 Tutorial 4 39 Working With the Entire Table When you select a table, you can format, resize, move or delete it. The Property inspector will display the attributes you defined to create the table as well as: –Table ID – descriptive name –H (Height) – in pixels or a percentage of the browser window –Align – alignment within the page –Clear Row Heights and Clear Column Widths – buttons that removes these settings from the table

40. XP Dreamweaver MX 2004 Tutorial 4 40 Working With the Entire Table The Property inspector will display the attributes you defined to create the table as well as (Cont): –Convert Table Widths to Pixels and Convert Table Heights to Pixels – buttons that change the width or height to pixels –Convert Table Widths to Percent and Convert Table Heights to Percents – buttons that change the width or height to percentages. –BG Color (Background Color) – the background color – the default is transparent.

41. XP Dreamweaver MX 2004 Tutorial 4 41 Working With the Entire Table The Property inspector will display the attributes you defined to create the table as well as (Cont): –Brdr Color (Border Color) – the color of the table borders. Can be changed using the Brdr color text box or the Color Picker. –Bg Image (Background Image) – the background image for the table. You can identify an image to use as the background for the table. (Note: Netscape tiles the image in each cell, Explorer displays the image behind the entire table.)

42. XP Dreamweaver MX 2004 Tutorial 4 42 Working With the Entire Table A Table can be manually resized by selecting it and dragging the lower-right corner until it is the size you want. You can reposition a table by dragging it to the new location, or cutting and pasting it. Dreamweaver will modify the table attributes as you manually make these changes. You can also delete an entire table by selecting it and pressing the delete key.

43. XP Dreamweaver MX 2004 Tutorial 4 43 Working With the Entire Table Resizing a Table

44. XP Dreamweaver MX 2004 Tutorial 4 44 Working With Table Cells When a cell or group of cells is selected, you can change the cell attributes differently than the table attributes. You format text in cells this way, as well as changing the entire table by selecting all of the cells. In addition to text formatting, you can use the Property inspector to change the cell’s layout attributes.

45. XP Dreamweaver MX 2004 Tutorial 4 45 Working With Table Cells These layout attributes include: –Merges Selected Cells Using Spans – combines all selected cells into one cell. –Splits Cells into Rows or Columns – divides a single cell into multiple rows or columns. –Horz (Horizontal) – horizontal alignment options for the cells content. –Vert (Vertical) – vertical alignment options for the cells content. –No Wrap – turns word wrapping on or off.

46. XP Dreamweaver MX 2004 Tutorial 4 46 Working With Table Cells These layout attributes include (cont): –Header – formats the selected cells or rows as table headers. The default for a table header is bold and centered. –Bg (Background Image) – the background image for a cell, column or row. The default is transparent. –Bg (Background Color) – The background color for the selected cells. If no color is specified, the Web page background shows through. –Brdr (Border Color) – the color of the cell border.

47. XP Dreamweaver MX 2004 Tutorial 4 47 Working With Table Cells A row of cells merged together and formatted as a header

48. XP Dreamweaver MX 2004 Tutorial 4 48 Adjusting the Row Span and Column Span of Cells You can also adjust the row and column spans of the cells. Row span is the height of the cell in row increments. Column span is the width of the cell in column increments.

49. XP Dreamweaver MX 2004 Tutorial 4 49 Working with Rows and Columns When a row or column is selected, you can change its attributes, or resize, add or delete it. The attributes for a row or column are the same as the ones for cells. You can change the size of a row or column by typing a new value in the Height or Width box or by dragging the border to the new position.

50. XP Dreamweaver MX 2004 Tutorial 4 50 Working with Rows and Columns Resizing a Table Column

51. XP Dreamweaver MX 2004 Tutorial 4 51 Adding and Deleting Columns and Rows You can insert by selecting a column or row and using the Insert Column or Insert Row command. The new column or row is the same size as the one selected. The new column is added to the left of the selection. The new row is added above the selection. You can delete by selecting a column or row and using the Delete Column or Delete Row command.

52. XP Dreamweaver MX 2004 Tutorial 4 52 Using Preset Table Designs Dreamweaver contains a Format Table dialog box containing a number of preset table designs. The Format Table dialog box includes the features: –Preset Table Design List and Sample Table – a list of available preset table formats. –Row Colors – colors and alternating patterns to apply to rows. –Top Row – customization options for formatting the cells in the top row of the table.

53. XP Dreamweaver MX 2004 Tutorial 4 53 Using Preset Table Designs The Format Table dialog box includes the features (cont): –Left Col (Left Column) – customization options for formatting the cells in the left column of the table. –Table – customization options that affect the whole table –Apply All Attributes to TD Tags instead of TR Tags – left unchecked, the attributes are applied to the row tags for the table.

54. XP Dreamweaver MX 2004 Tutorial 4 54 Using Preset Table Designs Completed Format Table Dialog Box

55. XP Dreamweaver MX 2004 Tutorial 4 55 Exploring the HTML Code of Tables The HTML Code for a table can be broken down into four types of tags: –Table tags – brackets the entire table: tags defining table rows and cells –Table Row tags – brackets each row: all the tags for the cells in the row

56. XP Dreamweaver MX 2004 Tutorial 4 56 Exploring the HTML Code of Tables The HTML Code for a table can be broken down into four types of tags (cont): –Cell tags – brackets every cell (except header cells): text in the cell –Header Cell tags - brackets every header cell: text in the cell

57. XP Dreamweaver MX 2004 Tutorial 4 57 Exploring the HTML Code of Tables Table Tags shown in Code View

58. XP Dreamweaver MX 2004 Tutorial 4 58 Redefining Table Tags Using CSS Styles All of the tables on a Web site should have a consistent look and should be consistent with the rest of the site. One way to do this is to use a CSS style. To redefine table tags using CSS; –Open the CSS Styles Panel and click the New CSS Style button –Click the redefine HTML tag button –Select the tag to modify, set the options and click OK

59. XP Dreamweaver MX 2004 Tutorial 4 59 Planning a Table in Layout Mode Creating a table for the layout of your Web page can become very complicated. To help, Dreamweaver established a Layout Mode where you can draw tables and cells directly onto the web page. Dreamweaver will then convert what you have drawn into the necessary code for the table(s) you need. Your cells are white/blue and Dreamweaver’s are gray/white.

60. XP Dreamweaver MX 2004 Tutorial 4 60 Planning a Table in Layout Mode As you draw cells or tables, Dreamweaver adds the necessary cells/tables to anchor them to the page. You can also make nested tables where one table is wholly inside the other. You can switch back and forth between Layout and Standard mode, adding tables and formatting them. Planning your table layout ahead of time will save effort and avoid having to rework it.

61. XP Dreamweaver MX 2004 Tutorial 4 61 Creating a Table in Layout Mode You can draw a table or add cells to a table by using the Layout button on the Layout tab of the Insert bar. A cell cannot exist alone. Dreamweaver will draw a table around a cell if you create the cell first. You can draw a table using the Draw Layout Table button the same way you drew a cell.

62. XP Dreamweaver MX 2004 Tutorial 4 62 Creating a Table in Layout Mode A Cell drawn in Layout Mode

63. XP Dreamweaver MX 2004 Tutorial 4 63 Selecting Tables and Cells in Layout Mode You can work with your table in either Layout or Standard mode. You must first select the table by clicking somewhere within it or clicking the Layout Table tab. You can select a cell in a similar manner by clicking on its border or within the cell.

64. XP Dreamweaver MX 2004 Tutorial 4 64 Selecting Tables and Cells in Layout Mode Selected nested table in Layout Mode

65. XP Dreamweaver MX 2004 Tutorial 4 65 Working with Tables in Layout Mode You can resize a selected table by dragging its resize handles or by changing the attributes in the Property inspector. You can also modify table attributes in Layout mode. The attributes show in the Property inspector when a table is selected. These attributes are similar to those in Standard mode.

66. XP Dreamweaver MX 2004 Tutorial 4 66 Working with Tables in Layout Mode Table attributes in Layout mode include: –Width – horizontal size of the table; fixed or autostretch (one column only). –Height – vertical size of table in pixels. –Bg (Background Color) – the background color for the table. Default is transparent. –Cell padding – the amount of space between the cell border and its content. Default is 1 in most browsers. –Cell Spacing – the width of the invisible cell walls. Default is 2 in most browsers.

67. XP Dreamweaver MX 2004 Tutorial 4 67 Working with Tables in Layout Mode Table attributes in Layout Mode include (cont): –Clear Row Heights and Clear Column Width – removes the height and width settings for all cells in a table. –Make Widths Consistent – resets widths of the fixed width cells to match cell content when larger than the fixed width. –Remove All Spacers – removes all of the spacer images from the selected table. Spacer images are inserted to maintain the width s of the fixed width columns. –Remove Nesting – adds the cells and content of a nested table to the parent.

68. XP Dreamweaver MX 2004 Tutorial 4 68 Working with Tables in Layout Mode Layout tables are often created as autostretch since this will allow the table to stretch to fit the users browser window. Dreamweaver will add spacer images (unless told not to) to maintain a minimum width for fixed width columns in a table. When an autostretch column is created, wavy lines appears at the top of the column. For fixed columns, the width appears instead.

69. XP Dreamweaver MX 2004 Tutorial 4 69 Working with Cells in Layout Mode Working with cells in Layout mode is like working with them in Standard mode. Selected cells can be moved by clicking the border and dragging the cell. Selected cells can be resized by dragging one of the handles or by typing the desired dimensions in the Property inspector.

70. XP Dreamweaver MX 2004 Tutorial 4 70 Working with Cells in Layout Mode Moving a Cell in a Table

71. XP Dreamweaver MX 2004 Tutorial 4 71 Modifying Cell Attributes in Layout Mode For a selected cell, the Property inspector shows formatting attributes: –Width – horizontal size of cell. Can be fixed or auto stretched. –Height – vertical size of cell. –Bg (Background color) – the default is transparent. –Horz (Horizontal) – horizontal alignment. –Vert (Vertical) – vertical alignment. –No Wrap – enables/disables word wrap within the cell. For other attributes you must be in Standard mode.

72. XP Dreamweaver MX 2004 Tutorial 4 72 Working with Cells in Layout Mode You can add content to a cell in Layout view by clicking and typing. You can also add graphics to a cell in Layout view using the Image button on the Insert bar. You can add a text hyperlink to a Web page. A target is the specified page or browser window in which a linked Web page will open.

73. XP Dreamweaver MX 2004 Tutorial 4 73 Working with Cells in Layout Mode Targeted Link Created for a Home Page

74. XP Dreamweaver MX 2004 Tutorial 4 74 Updating the Web Site on the Remote Server When pages are changed, they should be updated on your remote site. To update: –Connect to the remote server using the Connects button on the Site panel –Click View list and Local View –Select the updated files and then the Put Files button –Click the View list and then Remote View –Disconnect using the Disconnects from Remote Host button

75. XP Dreamweaver MX 2004 Tutorial 4 75 Tutorial Summary You should now be able to: –Add graphics to a Web Page –Create and use spacer graphics –Create graphic hyperlinks –Turn a graphic into an image map with multiple hyperlinks –Create rollovers –Add and format tables –Use layout view to create and use tables