Tutorial 4 Organizing Page Content and Layout

XP 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 42

XP 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 43

XP 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. Understanding Graphics and Compression Dreamweaver CS3 Tutorial 44

XP 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 45

XP Understanding Graphics and Compression Dreamweaver CS3 Tutorial 46 Approximate Download Times for Files of Different Sizes

XP 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 47

XP 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 48

XP 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 49

XP 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 410

XP Adding Graphics to Web Pages Dreamweaver CS3 Tutorial 411

XP 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 412

XP Formatting Graphics Using CSS Styles and the Property Inspector Dreamweaver CS3 Tutorial 413

XP 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 414

XP Editing Graphics from Within Dreamweaver Dreamweaver includes some basic editing components such as: – Edit – Optimize – Crop – Resample – Brightness and Contrast – Sharpen Dreamweaver CS3 Tutorial 415

XP 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 416

XP Editing Graphics from Within Dreamweaver Dreamweaver CS3 Tutorial 417

XP Editing Graphics from Within Dreamweaver Dreamweaver CS3 Tutorial 418

XP Editing Graphics from Within Dreamweaver Dreamweaver CS3 Tutorial 419

XP 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 420

XP 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 421

XP 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 422

XP 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 423

XP 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 424

XP 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 425

XP Inserting Rollovers Dreamweaver CS3 Tutorial 426

XP 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 427

XP 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 428

XP 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 429

XP 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. –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. Dreamweaver CS3 Tutorial 430

XP 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 431

XP Creating Tables Dreamweaver CS3 Tutorial 432

XP 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 433

XP 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 434

XP 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 435

XP Selecting Tables and Table Elements Dreamweaver CS3 Tutorial 436

XP 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 437

XP Selecting Table Cells, Columns, and Rows Dreamweaver CS3 Tutorial 438

XP 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 439

XP 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 440

XP 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 441

XP 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 442

XP Working With the Entire Table Dreamweaver CS3 Tutorial 443

XP 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 444

XP 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 445

XP 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 446

XP Working With Table Cells Dreamweaver CS3 Tutorial 447

XP 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 448

XP 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 449

XP Working with Rows and Columns Dreamweaver CS3 Tutorial 450

XP 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. Dreamweaver CS3 Tutorial 451

XP Using CSS to Format a Table Use CSS styles to properly format tables. You can apply styles to the entire table, rows, columns, cells, and table content. Use the New CSS Rule button in the CSS Styles panel. To apply a style, select the row(s), column(s), or cell(s), and then use the Style arrow in the Property inspector to select the style. Dreamweaver CS3 Tutorial 452

XP Using CSS to Format a Table Dreamweaver CS3 Tutorial 453

XP Exploring the HTML Code of Tables The HTML code for a table can be broken down into four types of tags: –Table tags – bracket the entire table: tags defining table rows and cells –Table Row tags – bracket each row: all the tags for the cells in the row Dreamweaver CS3 Tutorial 454

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

XP Exploring the HTML Code of Tables Dreamweaver CS3 Tutorial 456

XP 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. Dreamweaver CS3 Tutorial 457

XP 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. Dreamweaver CS3 Tutorial 458

XP Creating a Table in Layout Mode Click the Draw Layout Cell button in the Layout category on the Insert bar, and then drag on the page to draw a table cell. Click the Draw Layout Table button in the Layout category on the Insert bar, and then drag on the page to draw a table. Dreamweaver will draw a table around a cell if you create the cell first. Dreamweaver CS3 Tutorial 459

XP Creating a Table in Layout Mode Dreamweaver CS3 Tutorial 460

XP 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. Dreamweaver CS3 Tutorial 461

XP Selecting Tables and Cells in Layout Mode Dreamweaver CS3 Tutorial 462

XP 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. Dreamweaver CS3 Tutorial 463

XP 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. Dreamweaver CS3 Tutorial 464

XP Working with Tables in Layout Mode Table attributes in Layout Mode include (cont.): –Clear Row Heights – removes the height settings for all cells in a table. –Make Cell 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 widths of the fixed width columns. –Remove Nesting – adds the cells and content of a nested table to the parent. Dreamweaver CS3 Tutorial 465

XP Working with Tables in Layout Mode Layout tables are often created as autostretch since this will allow the table to stretch to fit the user’s 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 appear at the top of the column. For fixed columns, the width appears instead. Dreamweaver CS3 Tutorial 466

XP 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 autostretch. –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. Dreamweaver CS3 Tutorial 467

XP Adding Content to Cells in Layout Mode You can add content to a cell in Layout mode by clicking and typing. You can also add graphics to a cell in Layout mode using the Image button on the Insert bar. Dreamweaver CS3 Tutorial 468

XP 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 to Remote Host button on the Files panel toolbar –Click View list arrow, and then click Local View –Select updated files, and then click the Put File(s) button –Click the View list arrow, and then click Remote View –Disconnect using the Disconnects from Remote Host button Dreamweaver CS3 Tutorial 469

XP Tutorial Summary You should now be able to: –Add and format graphics –Create a link to a graphic, image map, and rollover object –Add and format tables –Work in Layout mode –Add content to the layout table –Update files on the Web and preview the remote Web site Dreamweaver CS3 Tutorial 470