Lab Agenda 6

1
Lab Agenda 6

• Discussion of Large Lecture and Readings
• Introduction to Dreamweaver
• Defining Your Site
• Page Property Setup
• Text Formatting
• Link Creation
• Image Placement
• Opening, Saving, and Previewing Pages

2
Discussion Online Communities, New Social
Interactions, and Media Acceleration

• Are you a part of any online communities? Why or
  why not? What are some distinguishing benefits
  and drawbacks of your online community
  experience?
• Would you/should you share an email account with
  a mate?
• How might you behave differently in an online
  environment than in your regular life?
• How do you feel about acceleration of media? For
  you, is it an advance or an impediment?

3
Dreamweaver MX

• Dreamweaver is a solid WYSIWYG web design
  program. These computers and others on campus
  have it, and you can buy it for your home
  computer at the student stores for about 100.
• You can also download a 30-day trial version at
  http//www.macromedia.com/software/dreamweaver/dow
  nload/. You may want to wait until the month
  before the last Web project is due so it doesnt
  expire.
• No, if you download it for free and it expires,
  you cant do it again on the same machine. Nice
  try.

4
Defining Your Site

• Dreamweaver lets you define your site by entering
  key directory information. Then, some automatic
  functions like library items and link checking
  are possible.
• However, it can be a hassle on shared computers
  like these because multiple H drive accesses
  confuse our pal Dreamweaver. You should
  understand it, though, and it works better on
  your own computers.

5
Defining Your Site The Sequel

• To define a site
• Click "site" and "new site"
• Name your site something like Stevies J50 Web
  site." Click next.
• Choose no server technology. Click next.
• Choose "edit directly on server."
• Click the folder button to browse, choose
  H/public_html as your network folder. Click
  next. (If you get a warning, click OK.) Click
  done.
• FTP functions and other Remote Info can be set
  when you are using Dreamweaver at home so that
  your files are uploaded to the isis server.
• Notice that if you try to do this here, it might
  already be done. Shared computers strike again.

6
Creating New Pages

• Time to make a new page!
• To create a new blank page, go to file and
  new, or click Ctrl-N. Its a good idea to
  save it right away so its file name and location
  are set.
• When you create and edit a page, Dreamweaver
  automatically writes the HTML code. You should
  keep an eye on the code this is a good way to
  become familiar with the different tags.
• Keep both WYSIWYG and code views open by choosing
  View, then Code and Design. Keep the code
  window small if you like.

7
Titles

• You should title your page so that people viewing
  your Web site know what they are looking at.
• If you dont put anything there, it will say
  untitled document up in that (usually) blue
  bar.
• There are three ways to change the title of a
  page
• Click modify and then page and properties.
• Click the right mouse button and select page
  properties.
• Click view and head content then click the
  left icon. At the bottom of the screen, the
  dialog box for page titles will appear.
• Using the Page Properties option is good
  because you can set up all of them in one feel
  swoop. Its a good idea to do this first with
  any new page.

8
Background and Font Colors

• Background, font and link colors are also
  controlled with the Page Properties box.
• Clicking on the boxes next to them lets you
  choose a color, or you can type in the
  hexadecimal number (, followed by a combination
  of six letters and numbers).
• You can also choose to use a background image
  here. Click on browse to go through your files
  and choose an image (assuming you have images
  from which to choose).
• Consider using background image carefully. With
  great background image comes great
  responsibility.

9
The Property Inspector

• The properties inspector lets you edit most of
  the common page elements, such as text size and
  color.
• If you dont see it, go to window and click
  properties or click Ctrl-F3.
• Click on the arrow in the bottom right corner to
  see more attributes.

10
Text Formatting

• Put the cursor where you want to place the text,
  or highlight text already there.
• You can click text and format, or use the
  format drop-down menu in the property inspector,
  to create headings.
• Click indent or outdent to change text
  paragraph alignment.
• Use ShiftEnter for single line spacing. This
  is called a soft return it codes a ltbrgt instead
  of a ltpgt break.
• The relevant HTML tag will also show up, in the
  bottom left of the window.
• Did you overdo it? Choose none to remove all
  formatting.

11
Creating Links

• Select the text or image you want to turn into a
  link and type the destination URL into the
  property inspector.
• If youre linking to another file within your Web
  folder (a local link/page), you can just type
  filename.html to make a relative link. You can
  also click the folder icon to browse through your
  files to prevent errors.
• If youre linking to an external page, you need
  to put the entire URL, including the http//
  (e.g., http//www.homestarrunner.com), to create
  an absolute link.

12
Adding Images

• There are two ways to add an image
• You can choose Insert then Image.
• You can also click on the objects pallets tree
  icon at the top. Somehow, this works even if you
  are not using a tree image.

13
Editing Images

• As with other kinds of objects, pictures and
  images can be edited with the property inspector.
• Click on the image so that it has a black box
  around it.
• W and H specify the width and height of the
  image (in pixels) these are set automatically
  when you insert an image.
• Important Resize your image in Photoshop or
  another image editor. Making it smaller in
  Dreamweaver changes the appearance but not the
  file size, and its a lousy way to do it. Dont
  do it. Dont resize images in Dreamweaver. Im
  not asking you Im telling you.

14
Image Formatting and Alt Tags

• You can also make a border around the image to
  set it off from the rest of the background.
• You can set links to pictures the same as with
  text, using the property inspector.
• The Alt tag is useful for people with text-only
  browsers or for the visually impaired, and also
  causes the Alt text to appear if the image link
  malfunctions.
• In newer browsers, text also appears when the
  mouse is over the image
• You are required to have alt tags for ALL photos
  on your page. Dont forget these.
• Click on the image to get the property inspector
  editing options. Where it says alt, type in a
  short description of the image.

15
Text Wrapping

• You can make text wrap around an image instead of
  floating in space
• Click the drop-down menu where it says align.
• Choosing left or right will put the image on
  that side and the text on the other.
• Relative to the image, text can be left-, middle-
  or right-aligned by clicking the text alignment
  icons in the inspector or going to the text menu.
• V Space and H Space adds space in pixels on
  the vertical and horizontal sides of the image
  it can make the text easier to read by giving
  your picture a little elbow room.

16
Page Publishing

• Here, all you need to do to publish a Web page is
  save it in the public_html folder. When its in
  there, its up.
• For example, your home page should be saved as
  H/public_html/index.html.
• Remember, if you are using an image and/or links,
  the image must be published as well, and in the
  correct location e.g. H/public_html/images/file
  name.jpg.
• If youre elsewhere, youve got to use FTP or SSH
  file transfer to publish see Lab Agenda 5.

17
Put Your Skills to Work

• Practice what you learned today and save it!
• Mess around with your index.html page a bit see
  if you can add some things to it to familiarize
  yourself with Dreamweaver.
• Even better make a new page to link to it. Just
  practice so far, but soon well be working on
  another project.
• Avoid humming the Dreamweaver song when working.
  This is generally considered bad form.

18
Whats Next?

• Next week Dreamweaver II Son of Dreamweaver
  (More skills and tips).
• Check out the agenda in advance so youre up to
  speed.
• Prepare for the first examination its coming on
  25 February.
• Brag to your friends about your Web skills avoid
  getting beaten up by jealous bystanders.