Tutorial 4 Organizing Page Content and Layout

Tutorial 4

Organizing Page Content and Layout

XPXPObjectives• 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 2

XPXPObjectives• 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 modeDreamweaver CS3 Tutorial 4 3

XPXP

• 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


XPXPUnderstanding 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.


XPXPUnderstanding Graphics and Compression


Approximate Download Times for Files of Different Sizes

XPXPUnderstanding 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


XPXPAdding 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.


XPXPAdding 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.


XPXPAdding 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.


XPXPAdding Graphics to Web Pages


XPXPFormatting 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.


XPXPFormatting Graphics Using CSS Styles and the Property Inspector


XPXPEditing 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.


XPXPEditing Graphics from Within Dreamweaver • Dreamweaver includes some basic editing

components such as:– Edit– Optimize– Crop– Resample– Brightness and Contrast– Sharpen


XPXPEditing 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.


XPXPEditing Graphics from Within Dreamweaver


XPXPCreating 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.


XPXPCreating 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.


XPXPCreating 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.


XPXPCreating 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.


XPXPCreating 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.


XPXPInserting 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.


XPXPInserting Rollovers


XPXPEditing 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


XPXPCreating 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.


XPXPCreating 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).


XPXPCreating 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.


XPXPCreating 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.


XPXPCreating Tables


XPXPCreating 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.


XPXPAdding 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.


XPXPSelecting 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.


XPXPSelecting Tables and Table Elements


XPXPSelecting 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.


XPXPSelecting Table Cells, Columns, and Rows


XPXPWorking 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 39

XPXPWorking 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.


XPXPWorking 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.


XPXPWorking 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.


XPXPWorking With the Entire Table


XPXPWorking 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.


XPXPWorking 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.


XPXPWorking 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.


XPXPWorking With Table Cells


XPXPAdjusting 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.


XPXPWorking 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.


XPXPWorking with Rows and Columns


XPXPAdding 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.


XPXPUsing 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.


XPXPUsing CSS to Format a Table


XPXPExploring 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:• <table attribute1=“value” attribute2=“value”>tags defining

table rows and cells</table>– Table Row tags – bracket each row:• <tr> all the tags for the cells in the row</tr>


XPXPExploring 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):• <td attribute1=“value” attribute2=“value”>text in the

cell</td>– Header Cell tags - bracket every header cell:• <th attribute1=“value” attribute2=“value”>text in the

cell</th>


XPXPExploring the HTML Code of Tables


XPXPPlanning 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.


XPXPPlanning 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.


XPXPCreating 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.


XPXPCreating a Table in Layout Mode


XPXPSelecting 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.


XPXPSelecting Tables and Cells in Layout Mode


XPXPWorking 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.


XPXPWorking 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.


XPXPWorking 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.


XPXPWorking 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.


XPXPModifying 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.


XPXPAdding 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.


XPXPUpdating 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


XPXPTutorial 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


Tutorial 4 Organizing Page Content and Layout

Documents

Transcript of Tutorial 4 Organizing Page Content and Layout