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

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  .html,.htm extensions XHTML (eXtensible HyperText Markup Language)  Different supported  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

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 The title for my simple homepage that appears on the top browser status bar. My homepage This is my homepage where you can learn about my selected AEE 401 client.

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 1.Source document text or image 2.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  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  Row or  Cell

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

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

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

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

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

51. Define Remote (FTP access)

52. AFS space access Access - FTP FTP Host – afs.msu.edu Host Directory – web/portfolio Login – NetId Password – NetId password

53. Define Remote ** Substitute your directory name if used (e.g., web/portfolio) ** Login: NETid Password: ******

54. Sitemap Layout ** Home Page: index.html or index.htm

55. Connecting to Site 1. Choose site 2. Choose connect 3. Enter password 1 2 3

56. Show Local and Remote

57. Transfer files ** Get ** Put

58. Synchronize   

59. Site Definition Advantages Moving & renaming files  All links are updated Dependent files are transferred Synchronization

60. AFS Server Space Hostname  afs.msu.edu Space  1 GB  \web folder public Web address  www.msu.edu/~NetId/filenamewithextension