22
Dreamweaver Basics

Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

  • Upload
    others

  • View
    14

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Dreamweaver Basics

Page 2: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Start -> Dreamweaver

Page 3: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

VIEW Code and/or Design NOT LIVE View

Page 4: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

View Rulers in Pixels

Page 5: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Display Code, Split, Design

Page 6: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Preview in Browser

Page 7: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Windows

Page 8: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Page PropertiesHelp (F1)

Page 9: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Link Options

Page 10: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

At this point Save As --

•home (lowercase h) in M:\Home

Even before you add content

Page 11: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Setting Up Tables according to your design

Page 12: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Split and Merge Cells to fit your designEach object should have it’s own cell

Split or Merge Cells

Page 13: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Split and Merged Cell Examples

Page 14: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Place a Table inside a cell of another Table for more layout detail

Page 15: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

File -> Save periodically

Page 16: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Links hyperlink

anchor

Browse for fileOr type URL

Link Name

Page 17: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Controlling Link Display

In the Target pop-up menu, select the window in which the file should open in the Target text box.

•Use properties panel

•Attribute Values–Value Description

–_blank Opens the linked document in a new window or tab

–_self Opens the linked document in the same frame as it was clicked (this is default)

–_parent Opens the linked document in the parent frame

–_top Opens the linked document in the full body of the window

Page 18: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Inserting an Image

Page 19: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Inserting an Image

Page 20: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Preview WebPage(click here or F12)

Will ask you to Save

Page 21: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View

Consider using a Photoshop image(s) for all/much of your

webpage with Image Mapping

Page 22: Dreamweaver - Plymouth State Universityjupiter.plymouth.edu/~rgkleinpeter/PowerPoint/4-Dreamweaver.pdfDreamweaver Basics. Start -> Dreamweaver. VIEW Code and/or Design NOT LIVE View