Velocity1.docx
JMA501
rev 09/27/2014
A Table-Based Design
Objective: Create the page below and a second page (next module)
that contains a form.(maybe!)
It will use:
 Rollovers, via <ul>, as navigation,
 A table for layout,
 Merging of cells
 Use Windows and create a new USB JMA501/Practice folder
named Velocity
 Download and unzip velocity Assets.zip into your new folder
o After you unzip, you can delete the zip file
 Start Dreamweaver and open (“manage”) your site
 Create a new blank page. Page title: Velocity.com
Velocity 1
Page 1
 Save as index.htm inside Velocity folder...NOT inside the root
(JMA501)…
Note: In general, each root folder typically has its own index
page…Velocity folder is a root for the Velocity site.
Will be a single page site, so a table for layout is OK (versus using divs)
Insert a table
 Insert>Table or use Insert panel
 Use these settings:
Velocity 1
Page 2





95%
4 Rows
3 columns
No border, padding or spacing
Click OK
Q: Why use % as width units? Why not pixels, for example?
It may help if you put a sequential number in each cell, like I did:
Note: Don’t think you have to know in advance how many rows,
columns; etc... trial and error, or layout on pencil, paper.
Velocity 1
Page 3
Merging (Combining) Cells
We will insert a banner at the top of the page. Right now, there are
three cells in row 1; we want a single cell: merge them into one
 Select the three cells (#1-#3) in row one---to select, just drag
across the row.
 Once you have cells selected, there are three ways to merge:
1. Use Property Panel Merge tool
OR
2. Choose: Modify>Table>Merge Cells
3. Or, right-click>Table>Merge Cells
No matter which you choose: Result:
Velocity 1
Page 4
 Next, select and merge cells #4 and #7: navigation rollover
buttons will go inside:
See below
 Merge cells # 5 and 6
Velocity 1
Page 5
 Result
A burgundy page, a sub- heading, will eventually go there i.e. inside
“56”: will have Multimedia Production as the content in the cell:
 Merge cells 11 and 12: We will add additional links there, along
the bottom using pseudo classes ( i.e.Style the links):
Result is our basic layout:
Velocity 1
Page 6
 Enter text in cell 56:
o …delete the number 56 and replace with “Multimedia
Production”
We will put the main text ( two paragraphs) into cell numbers 8 and 9;
the text is Lorem ipsum (aka. filler text or fake Latin)
 There is a generator (http://www.lipsum.com/)... Produces many
languages besides fake Latin
 One of the assets in the zip file contains lorem ipsum text, we ‘ll
use that
Velocity 1
Page 7
 In the Properties panel, for choose Vert>Top for cells 8 and 9.
Otherwise text will start in the center of the cell
 In the Files panel,(F8) find FillText.txt ( It contains some fake
Latin)
 Double-click the FillText.txt file, which opens inside your site
 Select the first two paragraphs (Copy)
 Paste it twice, once each, in the two cells in row three (cells #8
and # 9)
 Delete the 8 and 9
Click inside each cell and in the Properties panel choose Vert:Top : The
default is to add cell content in the middle.
Velocity 1
Page 8
If necessary, move the table’s border edges around so you have two
similarly sized paragraphs:
Velocity 1
Page 9
Better yet: Let’s set the exact desired width of some of the cells
 Select (click inside) the small, very skinny cell on the left (Cell
#47), where the navigation will go
We’re actually modifying a <td>, a cell, so we can use the tag selector:
 In Properties Panel type 5% in Width box, and vert:Top
Velocity 1
Page 10
Q: Why % rather than say 25 px
 Press Tab key
 Delete the cell reference number (47)
Result:
 Click inside next cell to the right (the first paragraph, cell #8), and
choose <td> to select the cell, and enter width 45%
 Do same for second paragraph cell (9), i.e. W:45%
Add a banner .Using CSS
Velocity 1
Page 11
Let’s add a background image (instead of a background color) in the
top cell (<td>) .
WE will insert a narrow image and repeat across the page, speeds
download speed
To do so, use CSS
 Find the CSS Designer panel (Open it if necessary)
 Click the plus sign across from Sources
 Says where to save css, I chose in the page.
 I choose to add the new CSS to the page (head section):
 Click + next to Selector: (remember tag, class, ID selectors)
 Enter .bg as the selector: (a Class)
Velocity 1
Page 12
 Press Enter
 Select the <style> in the All Sources window
 Click Properties then +
Velocity 1
Page 13
 Find the Background button:
 Click the url box:
 Browse to topbarbackGround:
Velocity 1
Page 14
 Choose to repeat the image across the x-axis:
Look at the html:
Apply the class
Velocity 1
Page 15
Now, let’s use the new class
Want to apply it to the <td> for the first, top-most, cell (#123 cell)
 Click inside the first (top) cell (has 123 in it now…delete the
123)
 Make sure <td> tag is selected
 In the class text box of the Properties panel, choose bg.
The result:
Velocity 1
Page 16
Next, we will add an actual image on top of the background image we
just created. Remember a cell (<td>) is a box, like any other box, it has a
background that we can color or paste an image into, and we can place
an image on top of the background.
 With cursor in the first …top left …cell (was cell 123), choose
Insert>Image>Image
 Choose(browse) title.gif
 Click OK
Result:
Velocity 1
Page 17
The velocity image is actually shorter than the cell width; the repeat of
the sliver graphic:
 Save all
Velocity 1
Page 18