1 / 39

Web Design Essentials: Tools and Techniques for Beginners

Learn the basics of creating web content with HTML, links, images, and more. Understand webpage versus website, HTML tags, browsers, and design considerations. Explore Netscape Composer and Dreamweaver editing screens, links, tables, images, and publishing tips.

aradia
Télécharger la présentation

Web Design Essentials: Tools and Techniques for Beginners

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. Internet Publishing Luke E. Reese ANR Education and Communication Systems reesel@msu.edu www.msu.edu/~reesel 517-355-6580

  2. Outline • Definitions • Basic homepage • HTML Editors • Netscape Composer (single page) • Macromedia Dreamweaver 4.0 (page or site) • Concepts • HyperLinks • Images • Tables • Save As • Publish

  3. Definitions • Web page versus Web site • Homepage • The base hypermedia document for an individual or organization (usually index.htm or index.html) • HTML • HyperText Markup Language • Plain Text • <Tags>

  4. 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>

  5. Browsers / Assumption • Netscape Navigator • Version 4.x – 7.x • Internet Explorer • Version 4.x – 6.0.x • Screen resolution • 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024 • Printing • Fonts • Browser controlled

  6. Formatting Assumptions • No page breaks (use pdf) • No tabs or indentions (use tables) • No columns (use tables) • Fonts computer specific (use pdf or graphic) • Copy and Paste will not always work • Graphics • .jpg • .gif

  7. Html Editors

  8. 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>

  9. Netscape Composer • File - New • Blank Page • Page from template • Page from wizard • Composer Menu Netscape 4.x Netscape 6.x

  10. Dreamweaver • File • New • New from template • Floating Palettes

  11. Netscape Composer Editing Screen

  12. Dreamweaver Editing Screen

  13. Text toolbar • Fonts • Fixed Width • Variable Width • Size (relative) • Color • Enhancement (avoid underline) • Bullet and numbered lists • Indent • Justification Dreamweaver 4.x Netscape 7.x Netscape 4.x

  14. Links • Target/Anchor (internal to the file) • #name of defined target • Specific file or location (absolute reference) • http:// • File or location on same server (relative reference) • filename • Self addressed stamped email • mailto:emailaddress Netscape 4.x Netscape 7.x Dreamweaver 4.x

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

  16. HyperLinks • Two parts • Source document text or image • Link (location, file, target, mailto) Netscape 4.x Dreamweaver 4.x

  17. Tables • Insert • Insert menu • Table • Table button (see below) Netscape 4.x Netscape 7.x Dreamweaver 4.x

  18. Table Uses / Properties • Uses • Spacing • Alignment • Borders (off or 0 for spacing/alignment) • Embed • Properties • Table • Row • Cell

  19. Tables Properties Dreamweaver 4.x Netscape 7.x

  20. Images • Insert • Insert menu • Image • Image button (see below) • Image must exist and reside locally or may be linked (absolute reference) Netscape 4.x Netscape 7.x Dreamweaver 4.x

  21. Images Netscape 7.x

  22. Images Dreamweaver 4.x

  23. Image Controls • Size (pixils) • Resize carefully • Placement and text wrap • Use table • No editing • Types • .jpg / .jpeg • photos • .gif • line art • transparent color • .png

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

  25. Filenames • CaSe SensitivE • Suggest all lower case • Short and as descriptive as possible • No spaces (earlier versions of Netscape will not load file)

  26. Tips • Netscape Browser File menu • Edit page • Save As • Right mouse button • Images • Save As • Spell Check • Line Break <Shift> <Enter> = <br> single space • Paragraph <Enter> = <p> double space • Multiple object selection <Ctrl> or <Shift> with mouse click

  27. Local versus Remote Server • Local • A:, C:, Zip, CD-ROM • Available only to that computer • Remote • Server software • Available 24/7 • Available to all Internet users • Tip • Create file structure on local • Replicate on remote • Relative reference

  28. Remote Server Space • AFS space • 50 MB • Hostname • pilot.msu.edu • Campus labs • P: drive • /web folder

  29. WS-FTP

  30. Netscape 4. X Publish to AFS Space • Publish button ftp://www.msu.edu/msu/user/X/Y/PILOTLOGIN/web/ • Where: • X = first letter of your Pilot login in lower case • Y = second letter of your Pilot login in lower case • PILOTLOGIN = your Pilot login in lower case • User name: = your Pilot login in lower case • Password: = your Pilot password

  31. Dreamweaver Site Management • Similar to FTP • Define local and remote sites • Synchronize

  32. Dreamweaver Site Management

  33. Dreamweaver Site Management

  34. Dreamweaver Site Management

  35. Your URL • www.msu.edu/user/yourpilotlogin/optionalfolder/filename or • www.msu.edu/~yourpilotlogin/optionalfolder/filename • Tip • index.html or index.htm (default) • Link to other files from index.htm • URL using default filename index.htm • www.msu.edu/~reesel

  36. Useful Software • Paint Shop Pro www.jasc.com/download_4.asp • WSFTP - Lite • ipswitch.com/cgi/download_eval.pl?product=WL-1000 • www.ftpplanet.com/download.htm

  37. PDF

  38. CD-ROM Creation

  39. Internet Publishing Questions?

More Related