Embed Size (px)
DESCRIPTION
Luke E. Reese Biosystems & Ag. Engr. [email protected] 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 - PowerPoint PPT Presentation
Citation preview
Luke E. ReeseBiosystems & Ag. Engr. [email protected]/~reesel517-353-3258
Web page versus Web siteHomepage
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
Server Serves HTML Host name (domain) Unique filename(s)
Browser Requests HTML Displays HTML
HTML Editor (Dreamweaver) Creates and edits HTML
Mozilla Firefox 1.5-3.xInternet Explorer 4.x – 8.xChrome 0.xSafari 4.xDesigned for screen not printingScreen resolution
640 x 480, 800 x 600, 1024 x 768, 1280 x 1024Fonts
Computer / browser controlled
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
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
sensitiveP:\web\... is NOT your URL!Default filename index.html
Link to other files from index.html
Dreamweaver
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 workGraphics are linked filesGraphic file formats
.jpg .gif .png
<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>
StartAll ProgramsDevelopment AppsDreamweaver CS3Adobe Dreamweaver CS3
Window Menu (on/off) Insert Properties Files
CodeDesignCode and Design
(Refresh)
Rulers (Pixils)Grid (*Snap To)
Edit window must be minimized
Fonts Fixed Width Variable Width Family Size (relative) Color (web safe)
Enhancement (avoid underline)Bullet and numbered listsIndent / OutdentJustificationLink
Two parts1. Source document text or image 2. Link (location, file, target, mailto)
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
.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
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
Size (pixils) Resize carefully and maintain aspect ratio
Placement and text wrap Use table
Limited editing CS3Alt tagTypes
.jpg .gif .png
Insert Insert menu
Table Table button
Uses Spacing Alignment
Borders (off or 0 for spacing/alignment)EmbedProperties
Table <table> Row <tr> or <th> Cell <td>
Inside a rowRight mouse clickSelect Table
Insert -> HTML -> Horizontal Rule <hr>
Page titlePage background
Color Image
Browser File menu Save As or Save Page As
Right mouse button Images Save As
Text menu – Check SpellingLine Break <Shift> <Enter>
Text menuCheck Spelling (Shift + F7)
Inline or External FileSeparates formatting from contentExternal file can be applies to multiple
files (e.g., entire site)Tag, Class or Advanced
Type TextUse Link field on Properties Palette
Insert Menu –> Media –> Flash Text
Insert Menu –> Media –> Flash Button
Insert menu -> Image Object -> Rollover Image
Insert menu -> Spry -> Spry Menu BarHorizontal or Vertical
Hierarchy CSS Style Sheet
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
CaSe SensitivE Suggest all lower case
Short and as descriptive as possibleNo spaces (earlier versions of Netscape
may not load file
Set up and define folder on local systemSet up server locationSet up transfer protocol (ftp)
** Put ALL web site files in this folder or subfolders
Access - FTPFTP Host – afs.msu.eduHost Directory – web/portfolioLogin – NetIdPassword – NetId password
** Substitute your directory name if used (e.g., web/portfolio)
** Login: NETid Password: ******
** Home Page: index.html or index.htm
1. Choose site2. Choose connect3. Enter password
12
3
** Get** Put
Moving & renaming files All links are updated
Dependent files are transferredSynchronization
Hostname afs.msu.edu
Space 1 GB \web folder public
Web address www.msu.edu/~NetId/filenamewithextension
