1 / 60

Internet Publishing / Dreamweaver

Luke E. Reese Biosystems & Ag. Engr. reesel@msu.edu www.msu.edu/~reesel 517-353-3258. Internet Publishing / Dreamweaver. Definitions. Web page versus Web site Homepage The base hypermedia document for an individual or organization (usually index.htm or index.html) HTML () Plain Text

johnlwoods
Download Presentation

Internet Publishing / Dreamweaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Luke E. Reese Biosystems & Ag. Engr. reesel@msu.edu www.msu.edu/~reesel 517-353-3258 Internet Publishing / Dreamweaver

  2. Definitions • Web page versus Web site • Homepage • The base hypermedia document for an individual or organization (usually index.htm or index.html) • HTML () • Plain Text • <Tags> • .html, .htm extensions • XHTML (eXtensible HyperText Markup Language) • Different supported <Tags> • Backwards compatibility • CSS

  3. Server / Browser / HTML files • Server • Serves HTML • Host name (domain) • Unique filename(s) • Browser • Requests HTML • Displays HTML • HTML Editor (Dreamweaver) • Creates and edits HTML

  4. Browser Assumptions • Mozilla Firefox 1.5-3.x • Internet Explorer 4.x – 8.x • Chrome 0.x • Safari 4.x • Designed for screen not printing • Screen resolution • 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024 • Fonts • Computer / browser controlled

  5. Files / Filenames • Recommended file naming syntax • No spaces • No capitalization if possible • No special characters (i.e., #) • Short but descriptive • Organize all files in a folder • May use subdirectories (folders) under root • index.html or index.htm • Default (can replicate in each directory) • Table of contents • Html is default if you have both

  6. Your URL • www.msu.edu/~NetId/directory/filename • /web is not included in your URL • /directory is only there if you have a sub folder • Filename must be exact match including the file extension • Everything to the right of the domain is case sensitive • P:\web\... is NOT your URL! • Default filename index.html • Link to other files from index.html

  7. Dreamweaver Html Editing

  8. Formatting Assumptions • Formatted for screen (resolution) • No page breaks (use pdf) • No tabs or indentions (use tables) • No columns (use pdf or tables) • Fonts computer specific (use pdf for fixed format) • Copy and Paste will not always work • Graphics are linked files • Graphic file formats • .jpg • .gif • .png

  9. Basic Homepage Text and Tags <HTML> <HEAD> <TITLE> The title for my simple homepage that appears on the top browser status bar.</TITLE> </HEAD> <BODY> <H1> My homepage</H1> <P> This is my homepage where you can learn about my selected AEE 401 client.</P> </BODY> </HTML>

  10. Dreamweaver CS3 - Labs • Start • All Programs • Development Apps • Dreamweaver CS3 • Adobe Dreamweaver CS3

  11. Dreamweaver CS3

  12. Tools and Panels (Dock or Floating) • Window Menu (on/off) • Insert • Properties • Files

  13. Insert Bar / Property Inspector

  14. View Menu • Code • Design • Code and Design (Refresh)

  15. View Menu (Rulers and Grid) • Rulers (Pixils) • Grid (*Snap To)

  16. Resolution (Design) • Edit window must be minimized

  17. Text Properties P • Fonts • Fixed Width • Variable Width • Family • Size (relative) • Color (web safe) • Enhancement (avoid underline) • Bullet and numbered lists • Indent / Outdent • Justification • Link

  18. HyperLinks • Two parts • Source document text or image • Link (location, file, target, mailto)

  19. Hyperlink Types • Internal file or location on same server (relative reference) • filename • External file or location (absolute reference) • http:// • Target/Anchor (internal to the file) • #name of defined target • Self addressed stamped email • mailto:emailaddress

  20. File Extensions • .htm or .html • Automatic load • . jpg, .gif, .png • Automatic load • pdf • Loads reader plugin if on computer • .doc, .ppt, .xls • IE – loads miniviewer • Netscape – open or save • .exe or other • Open or save

  21. Preview

  22. Images • Insert <img src=> • Insert menu • Image • Image button • Image must exist and reside locally (relative reference) or may be linked (absolute reference) • Cannot copy and paste an image from another application

  23. Image Properties Palette • Size (pixils) • Resize carefully and maintain aspect ratio • Placement and text wrap • Use table • Limited editing CS3 • Alt tag • Types • .jpg • .gif • .png

  24. Image Properties Palette

  25. Tables • Insert • Insert menu • Table • Table button

  26. Table Uses / Properties • Uses • Spacing • Alignment • Borders (off or 0 for spacing/alignment) • Embed • Properties • Table <table> • Row <tr> or <th> • Cell <td>

  27. Table Properties Palette

  28. Row Properties Palette

  29. Cell Properties Palette

  30. Insert Rows/Merge Cells • Inside a row • Right mouse click • Select Table

  31. Horizontal Rule • Insert -> HTML -> Horizontal Rule <hr>

  32. Tag Selection

  33. Page Properties • Page title • Page background • Color • Image

  34. Tips • Browser File menu • Save As or Save Page As • Right mouse button • Images • Save As • Text menu – Check Spelling • Line Break <Shift> <Enter>

  35. Check Spelling • Text menu • Check Spelling (Shift + F7)

  36. Cascading Style Sheet • Inline or External File • Separates formatting from content • External file can be applies to multiple files (e.g., entire site) • Tag, Class or Advanced

  37. WWW Navigation

  38. Text Link • Type Text • Use Link field on Properties Palette

  39. Flash Text • Insert Menu –> Media –> Flash Text

  40. Flash Button • Insert Menu –> Media –> Flash Button

  41. Rollover Image • Insert menu -> Image Object -> Rollover Image

  42. Mapped Image

  43. Spry Menu • Insert menu -> Spry -> Spry Menu Bar • Horizontal or Vertical

  44. Spry Menu • Hierarchy • CSS Style Sheet

  45. Manage Sites

  46. Local versus Server Review • Local • A:, C:, Zip, Jump Drive, CD-ROM • Available only to that computer • Remote • Server software • Available 24/7 • Available to all Internet users • Tip • Create file structure on local in one root folder (relative reference) • Replicate on remote

  47. Filenaming Review • CaSe SensitivE • Suggest all lower case • Short and as descriptive as possible • No spaces (earlier versions of Netscape may not load file

  48. Define Site • Set up and define folder on local system • Set up server location • Set up transfer protocol (ftp)

  49. Manage Site

  50. Define Local ** Put ALL web site files in this folder or subfolders

More Related