Dreamweaver - Plymouth State...

22
Dreamweaver Basics

Transcript of Dreamweaver - Plymouth State...

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.