Internet Publishing PPT
Download
Report
Transcript Internet Publishing PPT
Luke E. Reese
Biosystems & Ag. Engr.
[email protected]
www.msu.edu/~reesel
517-353-3258
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
Server / Browser / HTML files
Server
Browser
HTML Editor (Dreamweaver)
Serves HTML
Host name (domain)
Unique filename(s)
Requests HTML
Displays HTML
Creates and edits HTML
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
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
index.html or index.htm
May use subdirectories (folders) under root
Default (can replicate in each directory)
Table of contents
Html is default if you have both
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
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
<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>
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
Enhancement (avoid underline)
Bullet and numbered lists
Indent / Outdent
Justification
Link
Fixed Width
Variable Width
Family
Size (relative)
Color (web safe)
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)
http://
Target/Anchor (internal to the file)
#name of defined target
Self addressed stamped email
mailto:emailaddress
File Extensions
.htm or .html
. jpg, .gif, .png
pdf
.doc, .ppt, .xls
.exe or other
Automatic load
Automatic load
Loads reader plugin if on computer
IE – loads miniviewer
Netscape – open or save
Open or save
Preview
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
Image Properties Palette
Size (pixils)
Placement and text wrap
Limited editing CS3
Alt tag
Types
Resize carefully and maintain aspect ratio
Use table
.jpg
.gif
.png
Image Properties Palette
Tables
Insert
Insert menu
Table
Table button
Table Uses / Properties
Uses
Borders (off or 0 for spacing/alignment)
Embed
Properties
Spacing
Alignment
Table <table>
Row <tr> or <th>
Cell <td>
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 <hr>
Tag Selection
Page Properties
Page title
Page background
Color
Image
Tips
Browser File menu
Right mouse button
Text menu – Check Spelling
Line Break <Shift> <Enter>
Save As or Save Page As
Images
Save As
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
Remote
Tip
A:, C:, Zip, Jump Drive, CD-ROM
Available only to that computer
Server software
Available 24/7
Available to all Internet users
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
** Login: NETid Password: ******
** Substitute your directory name if used (e.g., web/portfolio)
Sitemap Layout
** Home Page: index.html or index.htm
Connecting to Site
1.
2.
3.
Choose site
Choose connect
Enter password
2
3
1
Show Local and Remote
Transfer files
** Put
** Get
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
www.msu.edu/~NetId/filenamewithextension