1. Tutorial 5 Working with Graphics and Tables

2. Objectives Session 5.1 – Review graphic formats and compression – Add, format, edit, and replace graphics Session 5.2 – Create graphic hyperlinks and an image map – Create a rollover – Create and update a Smart Object – Insert part of a Photoshop file 2New Perspectives on Adobe Dreamweaver CS5

3. Objectives Session 5.3 – Create tables and enter table content – Work with tables and table elements – Explore the HTML code of tables – Insert a table for page structure New Perspectives on Adobe Dreamweaver CS53

4. Session 5.1 – Understanding Graphics and Compression Using Graphics Effectively – Should ENHANCE the feel of the page – OR provide CONTENT: Charts Graphs Maps – If it does not add either to the page, DON’T USE IT! New Perspectives on Adobe Dreamweaver CS54

5. Session 5.1 – Understanding Graphics and Compression What Is Compression? – Reduces graphic file size by using different types of encoding to remove redundant or less important information Compression File Types: GIF JPG PNG New Perspectives on Adobe Dreamweaver CS55

6. Session 5.1 – Understanding Graphics and Compression Types of Compression: – Lossy compression  Creates smaller files by discarding (losing) some information about the original image Removes details and color changes it deems too small for the human eye to differentiate The more compressed the image becomes, the more information is discarded, and the image becomes less and less sharp JPEG files = Lossy compression New Perspectives on Adobe Dreamweaver CS56

7. Session 5.1 – Understanding Graphics and Compression Types of Compression: – Lossless compression Creates smaller files but never discards any information GIF and PNG = Lossless compression New Perspectives on Adobe Dreamweaver CS57

8. Understanding Graphics and Compression Using GIF (Graphics Interchange Format) – GIF format usually used on images that have large areas of flat, or nongradient, color Color that is one shade and does not vary with subtle lightening or darkening – Line-drawn graphics – Nonphotographic images – Lossless compression – Supports animation, 256 colors, and single-color transparency New Perspectives on Adobe Dreamweaver CS58

9. Understanding Graphics and Compression Using JPEG – Made for digital photographic capability – Supports millions of colors but no transparency or animation – Lossy compression  New Perspectives on Adobe Dreamweaver CS59

10. Understanding Graphics and Compression Using PNG (Portable Network Group) – Designers became frustrated by limitations of existing compression formats with GIF, so they developed PNG – Supports up to 48-bit true color or 16-bit grayscale colors; does not support animation; reduces file size more than GIFs; supports variable transparency – Uses lossless compression New Perspectives on Adobe Dreamweaver CS510

11. Understanding Graphics and Compression Additional Graphic TIPS: – PNG compresses somewhat better than GIF; however, the JPEG file size is usually smaller than either PNG or GIF – ALWAYS try to have the smallest file size but best quality for each image to reduce download time New Perspectives on Adobe Dreamweaver CS511

12. Adding Graphics to Web Pages Should store all graphics in the “graphics” folder 3 options to add a graphic to the page: – Insert Panel – Files Panel – Assets Panel New Perspectives on Adobe Dreamweaver CS512

13. Adding Graphics to Web Pages When a graphic is placed in a page, an image tag,, is inserted in the page Making Graphics Accessible – Alternate text Description of a graphic Placed in the alt attribute in the image tag Can be read by assistive devices Appears in place of an image when errors occur loading the graphic or in browsers that only display text New Perspectives on Adobe Dreamweaver CS513

14. Adding Graphics to Web Pages Current accessibility guidelines state that alternative text should be provided for any nontext content in Web pages New Perspectives on Adobe Dreamweaver CS514

15. Adding Graphics to Web Pages – Controls or inputs If nontext content is used as a control (e.g., a button), use alt text to explain its purpose – Decoration and formatting If nontext content is purely decorative, use it in a way that enables assistive devices to ignore it NO need for ALT text New Perspectives on Adobe Dreamweaver CS515

16. Adding Graphics to Web Pages – Conveys information If nontext content conveys information, provide that information in an accessible way—a short alt text description and, if necessary, a detailed description – Images of text Images of text should be used for decoration purposes only Include ALT text New Perspectives on Adobe Dreamweaver CS516

17. Formatting Graphics ALWAYS BEST to format graphics in an external program (e.g., Photoshop) Ways to Format Graphics in Dreamweaver: – Create a CSS style and apply it Global changes – changes image in all pages Same process for CSS Styles as other page elements – Set attributes in the Property inspector New Perspectives on Adobe Dreamweaver CS517

18. Formatting Graphics Using CSS Styles Typical uses of CSS styles for graphics – Borders – Margins or padding – Align or position graphics – Insert an image in a div tag and apply CSS styles to the div – Redefine the image tag Remember to name the CSS element to match the element, not its design (like subheading vs greentext) since you may decide to change the design! New Perspectives on Adobe Dreamweaver CS518

19. Formatting Graphics Using Property Inspector Typical uses of Property Inspector for graphics – ID – W and H – Reset Size – V space and H space – Border – Src & Low Src – Alt – Class – Align New Perspectives on Adobe Dreamweaver CS519 Caution : Some changes are permanent! Make a backup!

20. Formatting Graphics Replacing a Graphic – Double-click the image to replace it with a different one GIF images sometimes leave edges pixelated – replace with PNG New Perspectives on Adobe Dreamweaver CS520

21. Formatting Graphics Using the Assets Panel to Insert Graphics – What Are Dreamweaver Assets? Images, colors, URLs, Flash, Shockwave, movies, scripts, templates, and library items used throughout a site – Assets panel Helps keep track of the assets used in a site by listing them all in one place – shows thumbnail Once graphic is stored in the site’s local root folder, the Assets panel can be used to insert it New Perspectives on Adobe Dreamweaver CS521

22. Formatting Graphics New Perspectives on Adobe Dreamweaver CS522

23. Editing Graphics from within Dreamweaver Property Inspector Editing Buttons – Edit – Crop – Sharpen – Edit Image Settings – Resample* – Brightness and Contrast *Resample = changes file size – permanent change New Perspectives on Adobe Dreamweaver CS523 Caution : Some changes are permanent! Make a backup!

24. Editing Graphics from within Dreamweaver BEFORE starting steps in the textbook, make a copy of brian.jpg so you’ll have the original file intact. New Perspectives on Adobe Dreamweaver CS524 Caution : Some changes are permanent! Make a backup!

25. Session 5.2 Creating Graphic Hyperlinks Linking an Image – Similar to process for creating a text hyperlink Use Link box in Property inspector When graphic is linked, a border appears around the graphic in the color selected for links in page properties (unless border is 0) New Perspectives on Adobe Dreamweaver CS525

26. Creating Graphic Hyperlinks Creating an Image Map – A graphic that is divided into invisible regions, or hotspots – Image maps are useful if you want to link parts of a graphic to different information – Hotspot Area of a graphic that, when clicked, causes an action, such as opening another Web page Three types of hotspots – Rectangle Circle Polygon New Perspectives on Adobe Dreamweaver CS526

27. Creating Graphic Hyperlinks Create hotspots in the image Create separate links for each hotspot New Perspectives on Adobe Dreamweaver CS527 Hotspot Attributes LinkAlt TargetMap

28. Creating Graphic Hyperlinks New Perspectives on Adobe Dreamweaver CS528

29. Creating Rollovers Inserting Rollovers – Images that change when the pointer moves across them Two graphics swap places during a specific browser action Two graphics must be the same size New Perspectives on Adobe Dreamweaver CS529

30. Creating Rollovers – When the Rollover Image button is used, Dreamweaver creates code that causes four separate actions to occur: Graphics preload when the Web page is loaded Graphics swap occurs when the pointer is placed over the graphic The graphics swap occurs again when the pointer is moved off the graphic Can be a hyperlink New Perspectives on Adobe Dreamweaver CS530

31. Creating Rollovers – A rollover is a JavaScript behavior JavaScript is a scripting language Code is created automatically in DW New Perspectives on Adobe Dreamweaver CS531

32. Creating Rollovers Ways to Edit a Rollover – Delete the original graphic and insert a new rollover using the Rollover Image button All code is deleted so that the process can begin again from scratch – Replace the original or rollover graphic with a new one, leaving the attached code unchanged – Edit the code for the rollover graphic in Code view if you know JavaScript, or edit the behaviors in the Behaviors panel New Perspectives on Adobe Dreamweaver CS532

33. Integrating Photoshop and Dreamweaver Introduction – Adobe Photoshop or Adobe Fireworks can be set as the default external image editor – Adobe Photoshop CS5 is the industry-standard software for creating, editing, and working with bitmap graphic images New Perspectives on Adobe Dreamweaver CS533

34. Integrating Photoshop and Dreamweaver Creating a Photoshop Smart Object – Actual Photoshop files are not inserted into Dreamweaver Photoshop files are uncompressed files that cannot be displayed in a Web browser – Image Preview dialog box opens and optimization settings can be selected, which enables Dreamweaver to create a compressed.gif,.jpg, or.png file New Perspectives on Adobe Dreamweaver CS534

35. Integrating Photoshop and Dreamweaver – The object is inserted as a Smart Object A graphic file that is connected to its original source file A sync icon appears in upper-left corner of Smart Object graphic in the Document window – Two goals for optimizing images Create an image that can display over the Web Create the smallest possible file size so image will load quickly while still maintaining good image quality New Perspectives on Adobe Dreamweaver CS535

36. Integrating Photoshop and Dreamweaver New Perspectives on Adobe Dreamweaver CS536

37. Integrating Photoshop and Dreamweaver Editing a Photoshop Source File for a Smart Object – Compressed Web graphics that are displayed in pages should not be modified then resaved Each time a compressed file is resaved, the file compresses more – Modify the original, uncompressed Photoshop file, and then recompress the updated image Changes can be made in image size or color Images can be rotated or bent New Perspectives on Adobe Dreamweaver CS537

38. Integrating Photoshop and Dreamweaver Text and textures can be added to an image Multiple images can be combined – Editing capabilities increase exponentially when images are created with layers Layers enable the elements that make up an image to be separated Layers stack the elements of an image on top of one another to create the complete image New Perspectives on Adobe Dreamweaver CS538

39. Integrating Photoshop and Dreamweaver Updating a Smart Object in Dreamweaver – Bottom arrow on sync icon for Smart Object turns red when the original file has been modified – Smart Object needs to be updated from the original file – When updated, Dreamweaver creates a new, compressed image from the Photoshop file All occurrences of the Smart Object will be updated New Perspectives on Adobe Dreamweaver CS539

40. Pasting Part of a Photoshop File in Dreamweaver A piece of an image in Photoshop can be copied and pasted into a Web page – Copy only the images you need from the Photoshop document – In Dreamweaver, re-create the other elements, such as page layout, background color, and text with CSS or HTML – When the portion of the Photoshop document is pasted into Dreamweaver, a Smart Object is not created; image is not linked to the original New Perspectives on Adobe Dreamweaver CS540

41. Pasting Part of a Photoshop File in Dreamweaver Updating and Recopying a Photoshop File – When an image is not a Smart Object, the original Photoshop file can still be modified and then copied and pasted into a Web page New Perspectives on Adobe Dreamweaver CS541

42. Creating a Rollover Using a Smart Object Smart Objects can be used in all the same ways that a regular image can: – Page backgrounds – Div backgrounds – Rollovers New Perspectives on Adobe Dreamweaver CS542

43. Session 5.3 Creating Tables Overview – Tables are grid structures Rows – horizontal Columns – vertical Cells – intersection of column/row Borders –lines that mark edges of a cell & table Inserting a Table – Determine table location – Set table parameters – Dreamweaver creates all the necessary code New Perspectives on Adobe Dreamweaver CS543

44. Creating Tables ColumnsCell spacing RowsHeader Table widthCaption Border thicknessAlign caption Cell paddingSummary New Perspectives on Adobe Dreamweaver CS544 Table Parameters

45. Creating Tables New Perspectives on Adobe Dreamweaver CS545

46. Creating Tables Adding Content to Cells – To add text, click in a cell and begin typing – Pressing Enter adds another paragraph in the cell – Tab key moves insertion point to adjacent cell – Shift+Tab keys move to previous cell – Arrow keys can also be used New Perspectives on Adobe Dreamweaver CS546

47. Creating Tables Importing Tabular Data – Most spreadsheet programs, like Excel, allow files to be saved in a delimited format Contents of Excel worksheet can be imported directly into a table in Dreamweaver New Perspectives on Adobe Dreamweaver CS547

48. Selecting Tables and Table Elements Selecting a Table – To change attributes that affect an entire table, the whole table must be selected – When entire table is selected, a solid black line surrounds it – Resize handles appear on the left side, in the lower-right corner, and at the bottom of the table – Attributes in Property inspector also change to reflect the entire table New Perspectives on Adobe Dreamweaver CS548

49. Selecting Tables and Table Elements Selecting a Table Cell – To adjust cell attributes, the cell must be selected – Borders of a selected cell are solid black – Any content is also selected – Clicking a cell displays its properties in the Property inspector but does not select the cell New Perspectives on Adobe Dreamweaver CS549

50. Selecting Tables and Table Elements Selecting Columns and Rows – Click top of column or side or row to select entire column/row – Drag to select one or more columns or rows – CTRL-click to select one or more non-adjacent rows/columns/cells – Borders of all cells in the selected row or column are solid black – The word Column or Row will appear in the Property inspector when either is selected New Perspectives on Adobe Dreamweaver CS550

51. Selecting Tables and Table Elements New Perspectives on Adobe Dreamweaver CS551

52. Selecting Tables and Table Elements Using Expanded Tables Mode – Temporarily adds cell padding and spacing to all tables in a page – Makes table elements easier to select – Change Insert Panel to Layout category to change to Expanded mode – Size of table doesn’t match browser in Expanded mode New Perspectives on Adobe Dreamweaver CS552

53. Working with the Entire Table Modifying Table Attributes – Attributes can be changed within the Property inspector; attributes include: New Perspectives on Adobe Dreamweaver CS553 RowsTable ID ColumnsAlign WidthClear row heights BorderClear column widths Cell paddingConvert table widths to percent Cell spacingConvert table widths to pixels

54. Working with the Entire Table – A CSS style can be created to modify the tag to change the attributes of all tables in the site Resizing and Moving a Table – Resizing a table is the same as resizing an image Height and width can be adjusted by dragging resize handles Deleting a Table – Select the table and press the Delete key New Perspectives on Adobe Dreamweaver CS554

55. Working with Table Cells Modifying Cell Format and Layout – Cells have a different set of attributes than tables – Attributes of a selected cell and attributes of content within the cell can be changed using the Property inspector – The entire content of a table can be formatted by selecting all the cells in the table and then changing the text formatting attributes New Perspectives on Adobe Dreamweaver CS555

56. Working with Table Cells – Text formatting attributes are not available when the table itself is selected New Perspectives on Adobe Dreamweaver CS556 Merge selected cells using spansHorzNo wrapBg Split cells into rows or columnsVertHeader Property Inspector Cell Layout Attributes

57. Working with Table Cells Adjusting Row Span and Column Span of Cells – Row span is the height of a cell measured in rows – Column span is the width of a cell measured in columns – Both can be adjusted in Property Inspector New Perspectives on Adobe Dreamweaver CS557

58. Working with Rows and Columns Modifying Rows and Columns – Attribute options are the same as those for the cells – When attributes are modified while a row or a column is selected, the changes apply to all of the cells in the selected row or column New Perspectives on Adobe Dreamweaver CS558

59. Working with Rows and Columns Resizing Columns and Rows – When created, a table’s columns are all of equal width and its rows are all the default height – Adjust width of a selected column by typing a new value in the W box or by dragging a column’s left or right border to the desired position – Adjust height of a selected row by typing a new value in the H box or by dragging the row’s top or bottom border to the desired position New Perspectives on Adobe Dreamweaver CS559

60. Working with Rows and Columns Adding and Deleting Columns and Rows – Add a column by selecting a cell or a column and using the Insert Column command – A new row can be added by selecting a cell or row and using the Insert Row command – To delete a row or column, select the desired row or column and use the Delete Column or Delete Row command All content will also be deleted The Delete key may also be used New Perspectives on Adobe Dreamweaver CS560

61. Using CSS to Format a Table The correct way to format a table is by creating and applying CSS styles – Some formatting options are available in the Property inspector when table elements are selected Most have been deprecated in the current version of HTML so use CSS! New Perspectives on Adobe Dreamweaver CS561

62. Exploring the HTML Code of Tables Four types of tags are associated with tables – Table tags A set of table tags surrounds every table tags defining table rows and cells – Table row tags A set of row tags surrounds every row Opening table row tag always appears after the opening table tag all the tags for the cells in the row New Perspectives on Adobe Dreamweaver CS562

63. Exploring the HTML Code of Tables – Cell tags A set of tags that surrounds every cell except those designated as header cells Nested inside row tags text in the cell – Header tags A set of tags that surrounds every cell designated as a header cell text in the cell New Perspectives on Adobe Dreamweaver CS563

64. Exploring the HTML Code of Tables – No HTML tags exist to define columns – All tags are bracketing tags Consist of an opening and a closing tag New Perspectives on Adobe Dreamweaver CS564

65. Using a Table to Create Page Structure Some designers still use HTML rather than CSS to create style and page structure Some existing Web sites are structured with tables Sketch what you want page content to look like – Planning the placement of cells and tables on the page enables information to be conveyed effectively New Perspectives on Adobe Dreamweaver CS565

66. Using a Table to Create Page Structure New Perspectives on Adobe Dreamweaver CS566

67. Using a Table to Create Page Structure Inserting a Table for Page Structure – Create the structure for a page using a table the same way page content was structured using divs Create a table Add content to the table Create CSS styles for the table New Perspectives on Adobe Dreamweaver CS567

68. Updating the Web Site on the Remote Server Adding Content to a Table for Page Structure – Once the table structure is in place, content may be added to the table Upload every page of the site because every page has been changed – Include the dependent files so that new graphics and new CSS styles are also uploaded New Perspectives on Adobe Dreamweaver CS568