Luke E. Reese Biosystems & Ag. Engr

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

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

Browser Assumptions Mozilla Firefox 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

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

Your URL  /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

Dreamweaver

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

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.

Dreamweaver CS3 - Labs Start All Programs Development Apps Dreamweaver CS3 Adobe Dreamweaver CS3

Dreamweaver CS3

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

Insert Bar / Property Inspector

View Menu Code Design Code and Design (Refresh)

View Menu (Rulers and Grid) Rulers (Pixils) Grid (*Snap To)

Resolution (Design) Edit window must be minimized

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

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

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

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

Preview

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

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

Image Properties Palette

Tables Insert  Insert menu  Table  Table button

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

Table Properties Palette

Row Properties Palette

Cell Properties Palette

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

Horizontal Rule Insert -> HTML -> Horizontal Rule

Tag Selection

Page Properties Page title Page background  Color  Image

Tips Browser File menu  Save As or Save Page As Right mouse button  Images  Save As Text menu – Check Spelling Line Break

Check Spelling Text menu Check Spelling (Shift + F7)

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

Text Link Type Text Use Link field on Properties Palette

Flash Text Insert Menu –> Media –> Flash Text

Flash Button Insert Menu –> Media –> Flash Button

Rollover Image Insert menu -> Image Object -> Rollover Image

Mapped Image

Spry Menu Insert menu -> Spry -> Spry Menu Bar Horizontal or Vertical

Spry Menu Hierarchy CSS Style Sheet

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

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

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

Manage Site

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

Define Remote (FTP access)

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

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

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

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

Show Local and Remote

Transfer files ** Get ** Put

Synchronize   

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

AFS Server Space Hostname  afs.msu.edu Space  1 GB  \web folder public Web address 