Download Lecture 4 - AACC OLA3

Tutorial 4
Organizing Page
Content and Layout
Objectives
•
•
•
•
•
•
•
•
XP
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
Objectives
XP
• 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
3
Understanding Graphics and
Compression
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.
Dreamweaver CS3 Tutorial 4
4
Understanding Graphics and
Compression
XP
• 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
5
Understanding Graphics and
Compression
XP
Approximate Download Times for Files of Different Sizes
Dreamweaver CS3 Tutorial 4
6
Understanding Graphics and
Compression
XP
• 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
7
Adding Graphics to Web Pages
XP
• 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
8
Adding Graphics to Web Pages
XP
• 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
9
Adding Graphics to Web Pages
XP
• 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
10
Adding Graphics to Web Pages
Dreamweaver CS3 Tutorial 4
XP
11
Formatting Graphics Using CSS
Styles and the Property Inspector
XP
• 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
12
Formatting Graphics Using CSS
Styles and the Property Inspector
Dreamweaver CS3 Tutorial 4
XP
13
Editing Graphics from Within
Dreamweaver
XP
• 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
14
Editing Graphics from Within
Dreamweaver
XP
• Dreamweaver includes some basic editing
components such as:
– Edit
– Optimize
– Crop
– Resample
– Brightness and Contrast
– Sharpen
Dreamweaver CS3 Tutorial 4
15
Editing Graphics from Within
Dreamweaver
XP
• 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
16
Editing Graphics from Within
Dreamweaver
Dreamweaver CS3 Tutorial 4
XP
17
Editing Graphics from Within
Dreamweaver
Dreamweaver CS3 Tutorial 4
XP
18
Editing Graphics from Within
Dreamweaver
Dreamweaver CS3 Tutorial 4
XP
19
Creating Graphic Hyperlinks
XP
• 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
20
Creating an Image Map
XP
• 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
21
Creating an Image Map
XP
• 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
22
Creating an Image Map
XP
• 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
23
Creating Rollovers
XP
• 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
24
Inserting Rollovers
XP
• 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
25
Inserting Rollovers
Dreamweaver CS3 Tutorial 4
XP
26
Editing a Rollover
XP
• 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
27
Creating Tables
XP
• 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
28
Creating Tables
XP
• 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
29
Creating Tables
XP
• 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 4
30
Creating Tables
XP
• 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
31
Creating Tables
Dreamweaver CS3 Tutorial 4
XP
32
Creating Tables
XP
• 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
33
Adding Content to Cells
XP
• 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
34
Selecting Tables and Table
Elements
XP
• 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
35
Selecting Tables and Table
Elements
Dreamweaver CS3 Tutorial 4
XP
36
Selecting Table Cells, Columns,
and Rows
XP
• 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
37
Selecting Table Cells, Columns,
and Rows
Dreamweaver CS3 Tutorial 4
XP
38
Working With the Entire Table
XP
• 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
Working With the Entire Table
XP
• 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
40
Working With the Entire Table
XP
• 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
41
Working With the Entire Table
XP
• 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
42
Working With the Entire Table
Dreamweaver CS3 Tutorial 4
XP
43
Working With Table Cells
XP
• 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
44
Working With Table Cells
XP
• 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
45
Working With Table Cells
XP
• 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
46
Working With Table Cells
Dreamweaver CS3 Tutorial 4
XP
47
Adjusting the Row Span and
Column Span of Cells
XP
• 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
48
Working with Rows and Columns
XP
• 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
49
Working with Rows and Columns
Dreamweaver CS3 Tutorial 4
XP
50
Adding and Deleting Columns and
Rows
XP
• 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 4
51
Using CSS to Format a Table
XP
• 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 4
52
Using CSS to Format a Table
Dreamweaver CS3 Tutorial 4
XP
53
Exploring the HTML Code of Tables
XP
• 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>
Dreamweaver CS3 Tutorial 4
54
Exploring the HTML Code of Tables
XP
• 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>
Dreamweaver CS3 Tutorial 4
55
Exploring the HTML Code of Tables
Dreamweaver CS3 Tutorial 4
XP
56
Planning a Table in Layout Mode
XP
• 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 4
57
Planning a Table in Layout Mode
XP
• 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 4
58
Creating a Table in Layout Mode
XP
• 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 4
59
Creating a Table in Layout Mode
Dreamweaver CS3 Tutorial 4
XP
60
Selecting Tables and Cells in Layout
Mode
XP
• 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 4
61
Selecting Tables and Cells in Layout
Mode
Dreamweaver CS3 Tutorial 4
XP
62
Working with Tables in Layout
Mode
XP
• 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 4
63
Working with Tables in Layout
Mode
XP
• 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 4
64
Working with Tables in Layout
Mode
XP
• 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 4
65
Working with Tables in Layout
Mode
XP
• 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 fixedwidth 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 4
66
Modifying Cell Attributes in Layout
Mode
XP
• 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 4
67
Adding Content to Cells in Layout
Mode
XP
• 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 4
68
Updating the Web Site on the
Remote Server
XP
• 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 4
69
Tutorial Summary
XP
• 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 4
70