Web I Prologue to Dreamweaver and Web Distributed.

Uploaded on:
Category: Travel / Places
Web I Introduction to Dreamweaver and Web Publishing. Agenda. 1. How do Web pages work? (5 minutes) 2. Web Site Management Issues (3 minutes) 3. Word Processing versus Web (4 minutes) 4. Using Dreamweaver - Hands On (75 minutes). Objectives. General understanding of Web pages
Slide 1

Web I Introduction to Dreamweaver and Web Publishing

Slide 2

Agenda 1. How do Web pages function? (5 minutes) 2. Site Management Issues (3 minutes) 3. Word Processing versus Web (4 minutes) 4. Utilizing Dreamweaver - Hands On (75 minutes)

Slide 3

Objectives General comprehension of Web pages Roles to be filled in Web advancement Working information of Dreamweaver

Slide 4

How do Web pages work? H yper T ext M arkup L anguage = html Web addresses Desktop versus Server

Slide 5

Anatomy of a Web Address Web locations are likewise alluded to as "URL"s (uniform asset locators) The URL distinguishes a particular machine and a particular index and record on that machine.

Slide 6

Anatomy of a Web Address, proceeded with Directory(s)- organizers, as on a desktop machine Domain Name-recognizes the server you are reaching http://www.reed.edu index.html http://www.reed.edu/~gronkep/index.html ~gronkep/ File Name-distinguishes the particular document you are survey; HTML records can end .htm, .html, .shtml. Pictures can be .gif or .jpg HyperText Transfer Protocol-tells server what sort of discussion we need to have.

Slide 7

Movement of Files Between the Desktop and the Web Server 1. Recover file(s) FTP or Web Browser 2. Open file(s), 3. Alter file(s), 4. Spare file(s) Desktop Web Server Dreamweaver or other editorial manager 5. Transfer file(s) FTP

Slide 8

Saving HTML Files from the Web File Save As Format: Source or File Save As Save as sort: HTML Files

Slide 9

Saving HTML Files from the Web, proceeded with

Slide 10

Saving Images from the Web Right tap on the picture in the Web page. Click "Spare Image As… " and spare the record:

Slide 11

Uploading Files to a Web Server May be finished by individual who alters pages, or documents might be conveyed to someone else For departmental destinations, see neighborhood PC bolster faculty for points of interest/help Instructions for transferring individual Web pages to Reed, contact CUS

Slide 12

Agenda 1. How do Web pages function? (5 minutes) 2. Site Management Issues (3 minutes) 3. Word Processing versus Web (4 minutes) 4. Utilizing Dreamweaver - Hands On (75 minutes)

Slide 13

Web Site Management Issues Four angles Social Conventions Design Issues Content/Structure Technical

Slide 14

Social Conventions Roles Designer(s) Content Provider Liaison between division/content suppliers and fashioners Systems manager Conventions Rules for basic leadership Pre-production survey prepare Maintenance arrange

Slide 15

Agenda 1. How do Web pages function? (5 minutes) 2. Site Management Issues (3 minutes) 3. Word Processing versus Web (4 minutes) 4. Utilizing Dreamweaver - Hands On (75 minutes)

Slide 16

Word Processing versus Web On Web line softens come up various sizes No tabs Extra spaces between words require coding

Slide 17

Word Processing versus Web, proceeded with Same Web page shows up contrastingly relying on screen, Web program & working framework Limited number of "safe" text styles & hues

Slide 18

Agenda Using Dreamweaver - Hands On (75 minutes) The Dreamweaver Desktop Paragraphs versus Line Breaks Formatting Text Creating Lists Creating Tables Hyperlinks & mailto: Anchors Images

Slide 19

The Dreamweaver Desktop The Properties Box Window Properties Menu Overview

Slide 20

Paragraphs and Line Breaks Creating New Paragraph <p> Press Enter New content will be two lines down Creating Line break <br> Press Shift-Enter New content will be on next line Both lines will be a piece of same passage

Slide 21

Indents and Extra Spaces Indenting No "tabs" accessible in Dreamweaver Indenting a section makes a "blockquote" (indented similarly on the privilege and left sides) Creating Extra Spaces Dreamweaver will just permit one space between words Press Ctrl-Shift-Space to drive additional spaces

Slide 22

Formatting Text Use Properties Box Or "Content" Menu

Slide 23

Kinds of Formatting Format chose content Format sections

Slide 24

Formatting Selected content arranging striking , italic , underline measure, shading, textual style Paragraph designing Header: header1 , header2 , header3 Preformatted: perceives various spaces Alignment: left justify center right legitimize

Slide 25

Creating Lists Ordered List 1. Numbered rundown of things 2. Utilized when request of succession matters Unordered List  List of things went before by projectiles  Used when request is immaterial

Slide 26

Creating Lists, kept Creating Lists Place list things in isolated sections Highlight things and select a rundown catch Changing numbering Select the List Items catch in Properties box

Slide 27

Tables Click Insert Table Choose the quantity of Rows, Columns, and so forth (a width of 80 percent is great) Click anyplace inside the Table; then snap Modify Table Select Table Notice that the Properties window now shows table data:

Slide 28

Tables, proceeded with Use the Properties Box to change your table or Use Modify Table Menu

Slide 29

Options for Modifying Tables To adjust whole table: Select table Change outskirt width Alter line and segment numbers Change shade of fringe (brdr) and foundation (bg) To adjust cells of a table: Click in a phone or highlight gathering of cells Change shade of outskirt or foundation Change width, tallness, and arrangement Combine or split cells

Slide 30

Hyperlinks Select content to be hyperlinked Type target address under " Link " in Properties Box Use Folder Icon to discover pages inside your website (nearby pages)

Slide 31

Hyperlinks, proceeded with Absolute and Relative Links Absolute connection: http://www.reed.edu/file.html Relative connection: file.html Use relative connections to pages inside your Web webpage Use supreme connections to other Web locales http://prefix is required for total connections

Slide 32

Hyperlinks: mailto A " mailto: " is an uncommon hyperlink that opens an email message from the site page Message is sent to the address indicated Examples mailto:user@reed.edu mailto:myname@hotmail.com Note: It is best to incorporate the email address in the obvious part of the page additionally, so clients can record it or print it out.

Slide 33

Anchors A Named Anchor is a marker set inside a page to distinguish an exact area in that page Anchor names are utilized as a part of hyperlinks, e.g., mywebpage.html#top

Slide 34

Anchors, proceeded with Use grapples to: Create a file at the highest point of a page that connections to various areas (stays) in the page Link to a particular segment of another page

Slide 35

Creating an Anchor Place cursor at position of sought stay Define the name of the grapple Insert Named Anchor

Slide 36

Linking to an Anchor Select content to be connected to stay To connection to a stay inside a similar page: In the Properties Box under \'connection\', sort # took after by the name of the grapple e.g. #top to take you to the highest point of the page. To connection to a grapple in another page: sort the full address under \'connection\', including the stay e.g. http://www.reed.edu/~gronkep/continue/#education

Slide 37

Images Inserting Image Insert Image area Image document ought to be situated in same index as Web page or in a sub-registry called "pictures" Image record is just connected from Web page, so picture record must remain in same area in respect to Web page

Slide 38

Image Properties Size Possible to set width and stature in Properties Box or drag fringes with mouse to change measurements Not prescribed to resize representation in Dreamweaver Linking Enter interface address in Properties Link box Alternate Text Required component. Clarifies realistic for clients who can\'t see the picture; enter under " Alt " on Properties Box

Slide 39

Image Properties Text arrangement Set arrangement of picture in respect to content with " Align " include in the Properties Box VSpace & HSpace Add a "cushion zone" around the photo Thickness measured in pixels; great value= 5 - 20 Border Adds outskirt around picture Enter "0" to turn fringe off (regular case) Thickness measured in pixels; great values= 1 - 10

Slide 40


Slide 41

Appendix I: Using an Existing Page as a Template Open the first page Use "Spare as" order to spare it under another name Delete substance to be supplanted Create or glue in substance for new page

Slide 42

Appendix II: Preparing existing Word docs for the Web Open record in Word File Save as HTML Close document in Word Open html record in Dreamweaver Go to Commands Clean up Word HTML Save in Dreamweaver

Slide 43

Recommended Book Dreamweaver 3 for Windows and Macintosh: Visual Quickstart Guide Available from: http://www.fatbrain.com/

View more...