7th lab agenda

1
7th lab agenda

• How to make a Storyboard
• Tables
• Anchors
• Lists
• E-mail links

2
Storyboarding for top web pages

• Think about the purpose of your Web site. Review
  requirements DTE p. 273 four Web pages. Do you
  want more? How will they connect together? List
  potential Web pages and form an organizational
  chart.
• Draw a storyboard of the site. Map where you want
  pictures and text to go. Write short
  descriptions (picture of cow) or (paragraph
  describing work experience), etc.

3
Storyboarding, cont.

• It can be very time-consuming to create a Web
  page. Keep it simple, at least for now. You can
  always make it more complicated later. Do the
  required first!
• Aim for consistency. You have only four pages,
  and all four of those pages should look like they
  are from the same site.

4
Storyboard templates

• Once you have the Look Feel of your site on
  paper, make this page with Dreamweaver
• Before making more pages, get everything right
  on this first page so that it looks good and
  professional, including all required elements
• Now, to save time you can Save As several times
  to create portfolio.html, research.html, etc.
• Then you only need to work on the different
  content of each page (e.g. different title, text,
  relevant images)
• This is know as templating BUT it is not the
  same as Save As Template in Dreamweaver (avoid
  this)

5
Tables

• Tables are VERY IMPORTANT for good design
• Tables have rows and columns you can set these
  to any number you want
• Tables can be sized using pixels or percentages
• Pixels means the table size will always stay the
  same, no matter how big or small the browser
  window is
• Percent means it will fit itself to that amount
  of the browser window

6
Creating tables

• Two ways to create a table
• Click on the table icon in the Objects palette
  (Window, then Objects)
• Or, click on Insert, then Table
• You can choose the rows and columns in the
  dialogue box that appears

7
Working with Tables

• cell padding puts a margin between text inside
  a cell and the edge of that cell
• cell spacing puts a margin between cells
  themselves
• border draws a visible line around every cell
• The border will not show if you enter a 0 in
  the border size field
• Use a table within a table to get a border on the
  outside but not inside

8
Editing tables

• You can also change tables once they are inserted
  on the page
• Click the pull-down arrow on the Property
  Inspector. Click on any cell or combination of
  cells to edit cell properties
• Click on the whole table (draws a black box
  around it) to get a different set of properties
• Do this by clicking on the bottom border of the
  table.

9
Editing table properties

• Click on the whole table (black box)
• You can change the size of the table, the number
  of rows and columns, the cell spacing/padding or
  the border
• Align changes where the entire table is left,
  right, center

10
Editing table properties

• Look at the bottom section of the property
  inspector, toward the right
• bg with the file folder lets you choose a
  background image from your disk
• bg with the box next to it lets you set a
  background color you can point and choose, or
  type in the hexadecimal code
• brdr lets you set the border color

11
Editing cell properties

• Click on any one cell, or any combination of
  cells, to get the cell attributes in the property
  inspector
• You can set background images or colors, and
  border colors the same way, only this time in
  individual cells instead of the whole table

12
Editing cell properties, cont.

• You can format text alignment within cells
• Horz is for horizontal alignment the default
  puts it to the left
• Vert is for vertical alignment the default
  centers it to float within the cell
• Most cell content looks cleaner if the vertical
  alignment is set to top

13
Editing cell properties, cont.

• Under cell, you can merge (combine two or more
  cells) or split (divide a single cell into two or
  more)
• The W and H lets you set the width and height
  of cells
• Use just a number to set it in pixels (e.g., 40
  would be 40 pixels)
• Use a number with a percentage sign (no space) to
  use percents (e.g., 40)

14
Anchors

• Anchors (a.k.a.targets or bookmarks in other
  programs) set placemarkers within a specific page
• Instead of just linking to the page, you can link
  to a specific image or sentence on the page
• You can also link to anchors within the same
  page, e.g. when pages say go to top
• Creating anchors and links is done in two steps
• First, create the anchor
• Then, create the link to it
• Anchor names are CASE SENSITIVE make them all
  lowercase

15
Creating anchors

• Put the cursor where you want to put the anchor
  (where the link will TAKE you)
• Click Insert and Named Anchor
• Type a lowercase, one-word descriptive name
• If the anchor marker doesnt show up, click View
  and Invisible Elements

16
Linking to anchors

• Select the text or image that you want to link
  (this is where you link FROM)
• If the anchor is in the same page youre working
  on, type anchorname in the link field of the
  property inspector
• If the anchor is on a different page, type
  filename.htmlanchorname
• For example, if you want to link to an anchor
  called top in your index page, but you want to
  link from your resume page, you would type
  index.htmltop

17
Lists

• Make numbered, bulleted or definition lists as
  you type
• Put cursor where you want to start the list
• Click bullets or numbers list buttons on
  property inspector (under the bold and italic
  icons)
• Or, go to Text and List, choose the kind you want
• When finished with the text you want in the list,
  hit Enter twice to end it

18
Lists, cont.

• You can also make a list out of text already on
  the page
• Highlight the paragraphs you want to include in
  the list
• Then, click the bullets or numbers list option,
  or go to Text and List (same as before)
• To nest lists, use the indent icons on the
  property inspector, or click Text and Indent
• Unorderedbulleted, orderednumbered,
  definitionnested

19
E-mail links

• A working e-mail link is required for each page
  on your Web site, so people coming to the site
  can get in touch with you easily
• Select the text or image you want to link (e.g.,
  e-mail me or an e-mail icon)
• In the link field of the property inspector,
  type mailto and an e-mail address
• For example
• mailtomhamm_at_email.unc.edu
• NO SPACES it is all one word

20
E-mail links, cont.

• If you want to link text, Dreamweaver will also
  add the mailto for you, in some cases
• You can highlight text already in the document,
  or put the cursor where you want the link to
  appear and type text in at the prompt
• Click Insert and E-mail link
• Or, click the envelope symbol on your objects
  palette
• Then, just type in the e-mail address, with no
  mailto

21
Practice

• Create a professional resume page and upload it
  to the Web.
• Simple, with minimal graphics (unless you are
  looking for a graphics job and want to
  incorporate more)
• Use power verbs
• Everyone has something to put on a resume its
  about how you portray it and how you describe
  your duties

22
The printer-friendly resume page

• Open your resume in Microsoft Word. Save As
  resumetext.doc
• Change it so that all of your lines are aligned
  to the left. Save. Select all, copy.
• In your browser, open http//www.textism.com/tools
  /textile/index.html. Paste your resume copy into
  the top box.
• Copy the text in the bottom box. Notice it now
  has html code.
• In Dreamweaver, open a new file.
• Paste your resume text into the file.
• Save as resumetext.html.
• Now use boldface to highlight key titles and
  dates.

23
Converting your resume to HTML

• Open your resume in Microsoft Word. Save As Web
  Page H\documents\resumeword.html.
• In your browser, open http//www.textism.com/resou
  rces/cleanwordhtml/
• Click choose and find your resumeword.html
  file. Click process.
• Select all the code in the window and copy.
• In Dreamweaver, open a new file.
• Paste the code into the code view window of the
  new file.
• Save as resume.html.
• Now format the text any way you wish.

24
For next time

• Work on resume page, home page
• Bring photos to scan
• Read DTE 271-276 (assignment) AND
• 199-209 (Dreamweaver walk-through)
• Review the following online tutorials
• http//www.macromedia.com/support/dreamweaver/docu
  mentation/dreamweaver4_tut.html
• http//www.lynda.com/products/books/dw4hot/sample_
  movies.html