Lab Agenda 6 - PowerPoint PPT Presentation

Loading...

PPT – Lab Agenda 6 PowerPoint presentation | free to view - id: 5f07d-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Lab Agenda 6

Description:

No, if you download it for free and it expires, you can't do it again on the same machine. ... Avoid humming the Dreamweaver song when working. This is ... – PowerPoint PPT presentation

Number of Views:52
Avg rating:3.0/5.0
Slides: 19
Provided by: rebecca1
Category:
Tags: agenda | lab

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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.
About PowerShow.com