Tutorial 4 Organizing Page Content and Layout

1. Tutorial 4Organizing Page Content and Layout

2. Objectives 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 Dreamweaver CS3 Tutorial 4

3. Objectives 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 Dreamweaver CS3 Tutorial 4

4. Understanding Graphics and Compression • Graphics add color and interest to a Web site. • They can also add information, such as maps, graphs or charts. • They reinforce the goals for the Web site. • Evaluate graphics for their value to the page. Dreamweaver CS3 Tutorial 4

5. Understanding Graphics and Compression • Graphics are usually large and can delay the loading of the web page if a compression file 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. Dreamweaver CS3 Tutorial 4

6. Understanding Graphics and Compression Approximate Download Times for Files of Different Sizes Dreamweaver CS3 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 with many gradient colors • A lossy compression format: loses information • PNG (.png) (Portable Network Graphics) • Supports 48-bit true color, variable transparency • Uses lossless compression Dreamweaver CS3 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. Dreamweaver CS3 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. Dreamweaver CS3 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. • Once a graphic is stored in the site’s local root folder, you can use the Assets panel to place the graphic in other pages. Dreamweaver CS3 Tutorial 4

11. Adding Graphics to Web Pages Dreamweaver CS3 Tutorial 4

12. Formatting Graphics Using CSS Styles and the Property Inspector • You format graphics 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 to original size, Src (image source file), Alt (alternate), class, V space and H space, Low Src (low resolution image source file), border, and align. Dreamweaver CS3 Tutorial 4

13. Formatting Graphics Using CSS Styles and the Property Inspector Dreamweaver CS3 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. Dreamweaver CS3 Tutorial 4

15. Editing Graphics from Within Dreamweaver • Dreamweaver includes some basic editing components such as: • Edit • Optimize • Crop • Resample • Brightness and Contrast • Sharpen Dreamweaver CS3 Tutorial 4

16. Editing Graphics from Within Dreamweaver • When you edit a graphic, your edits cannot 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. Dreamweaver CS3 Tutorial 4

17. Editing Graphics from Within Dreamweaver Dreamweaver CS3 Tutorial 4

18. Editing Graphics from Within Dreamweaver Dreamweaver CS3 Tutorial 4

19. Editing Graphics from Within Dreamweaver Dreamweaver CS3 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. Dreamweaver CS3 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 causes an action to occur when clicked. • For example: each touring region on a map could be a hotspot so that when a user clicks a particular region, the corresponding tour dates appear on the screen • There are three types of hotspots: rectangular, oval and polygonal. Dreamweaver CS3 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 the hotspot and pointer tools. Dreamweaver CS3 Tutorial 4

23. Creating an Image Map • The Property inspector displays hotspot attributes, including: • Link – the Web 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. Dreamweaver CS3 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 graphic is clicked. Dreamweaver CS3 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. Dreamweaver CS3 Tutorial 4

26. Inserting Rollovers Dreamweaver CS3 Tutorial 4

27. Editing a Rollover • Once created, you can copy and paste rollovers to other pages using the Copy command on the Edit menu. • When you are pointing to the new location, click Paste to finish the copy process. • You can edit a rollover by: • Deleting and replacing it • Replacing one or both of the original graphics • Editing the JavaScript in Code view Dreamweaver CS3 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. Dreamweaver CS3 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 Common category 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). Dreamweaver CS3 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 width of the browser window. • BorderThickness – 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. Dreamweaver CS3 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. Dreamweaver CS3 Tutorial 4

32. Creating Tables Dreamweaver CS3 Tutorial 4

33. Creating Tables • Dreamweaver inserts a nonbreaking space in each cell. • The nonbreaking space keeps the cells from collapsing as different browsers display the page. • You can view a nonbreaking space in Code or Split view. Dreamweaver CS3 Tutorial 4

34. Adding Content to Cells • To add text to a cell, click the cell and type, or use the Copy and Paste commands. • 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 the same way you insert them into a page. Dreamweaver CS3 Tutorial 4

35. Selecting Tables and Table Elements • To work with a table or table element, you need to select it. • 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. Dreamweaver CS3 Tutorial 4

36. Selecting Tables and Table Elements Dreamweaver CS3 Tutorial 4

37. Selecting Table Cells, Columns, and Rows • 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 bold black. • To select a whole column, click the arrow button above the top border of the column and then click Select Column. • To select a whole row, click to the left of that row. • Expanded Tables mode temporarily adds cell padding and spacing to all of the tables in the page so that you can more easily select table elements and more precisely position the pointer inside cells. Dreamweaver CS3 Tutorial 4

38. Selecting Table Cells, Columns, and Rows Dreamweaver CS3 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 remove these settings from the table. Dreamweaver CS3 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 Percent – buttons that change the width or height to percentages. • Bg Color (Background Color) – the background color; default is transparent. Dreamweaver CS3 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. Dreamweaver CS3 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. Dreamweaver CS3 Tutorial 4

43. Working With the Entire Table Dreamweaver CS3 Tutorial 4

44. Working With Table Cells • When a cell or a group of cells is selected, you can change its attributes in the Property inspector. • Cells have a different set of attributes than tables. • Cell attributes include text formatting. • In addition to text formatting, you can use the Property inspector to change the cell’s layout attributes. Dreamweaver CS3 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 cell’s content. • Vert (Vertical) – vertical alignment options for the cell’s content. • No Wrap – turns word wrapping on or off. Dreamweaver CS3 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. Dreamweaver CS3 Tutorial 4

47. Working With Table Cells Dreamweaver CS3 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. Dreamweaver CS3 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 text box or by dragging the border to the new position. Dreamweaver CS3 Tutorial 4

50. Working with Rows and Columns Dreamweaver CS3 Tutorial 4