Advanced Web TechnologiesCSS & Other
Ouida McIlhinneypresented by
www.MaximumComputerSystems.com/css
CSS • HTML • DHTML • PHP • MySQL • Java
Javascript • SSI • XML • XHTML • CSS • HTML
Introduction to Advance Web Technologies1. HTML as a Design Tool Tables, Text Formatting, HTML Limitations
2. The Advantages of Separating Content from Presentation CSS, DHTML & Javascript
3. How to Implement Advanced Technologies Converting Existing Pages
4. The Power of Database Functionality PHP, MySQL, SSIs & E-Commerce
5. Interactive Applet Creation Flash, Java, XML & XHTML
6. Design Tools Dreamweaver MX 2004, Photoshop, BBEdit, Zend Studio
7. Best Practices Workfl ow Cleanliness, Consistency & Common Sense Navigation
8. Resources Books, Websites, Training Media
www.MaximumComputerSystems.com/css
What is HTML?Hypertext Markup Language
• The document format of the World Wide Web Text File Format (html)
• Presentation Language vs. Programming Language HTML “tags”
• Designing with Tables Nesting Tables
• Variations in Browser Implementations
• Limitations of HTML & Web Design Expectations
Introduction to Advanced Web TechnologiesHTML as a Design Tool ?
What is CSS? Cascading Style Sheets • A Simple Scripting Language that provides Style Sheet (template) format for HTML documents endorsed by the World Wide Web Consortium www.w3.org • A Collection of Design Properties & Values Declarations: property (color) & value (red) • External Files vs. Inside the HEAD Element
Getting a Grasp on CSS ~ Converting an Existing Page Making It Look Good with CSS~ Now You’re Stylin’ Columns Without Tables ~ Positioning with CSS Thinking Outside the Box ~CSS for Control Freaks
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
CSS Rule:The
Declaration orDefinition
Selector:HTML, Class, or ID
valueproperty
• More Document Styling Control than HTML• Simplify Document Structure• Create Pages & Websites that are Easier to Maintain• Reduce File Size & Increase Access Speeds
www.csszengarden.com
Cascading Style Sheets
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)
www.MaximumComputerSystems.com/css
1. Strip Out All Presentation Elements from the HTML
This includes: • font elements • <br> elements • entities • The attributes align and valign wherever they appear • The table attributes width, border, and cellpadding • Any table cell that contains only an image or that contains nothing at all • Any attributes on the body element (such as text and link)
Getting A Grasp on CSSConverting an Existing Page
www.MaximumComputerSystems.com/css
Internal CSSin the HEADER of HTML
Getting A Grasp on CSSConverting an Existing Page
External CSSstyles.css
www.MaximumComputerSystems.com/css
1. Strip Out All Presentation Elements from the HTML
2. Start at the BODY
3. Establishing Common Styles
4. Table Graphics (the Masthead)
5. Column Control (the Navigation Sidebar)
6. Stylin’ Info (Content Control)
Getting A Grasp on CSSConverting an Existing Page
www.MaximumComputerSystems.com/css
Making It Look Good with CSS Now You’re Stylin’
Columns Without Tables Positioning with CSS
Thinking Outside the Box CSS for Control Freaks
Getting A Grasp on CSSConverting Existing Pages
www.MaximumComputerSystems.com/css
CSS Resources: Books
Eric A. Meyer: Eric Meyer on CSS Mastering the Language of Web Design (New Riders, 2003, ISBN 0-7357-1245-X)
Eric A. Meyer: Cascading Style Sheets: The Definitive Guide 2nd ed. (O’Reilly & Associates, 2004, ISBN 1-5960-0525-3)
Jason Cranford Teague: DHTML and CSS for the World Wide Web Visual Quickstart Guide 3rd ed. (Peachpit Press, 2004, ISBN 0-3211-9958-8)
Laura Gutman: Macromedia Dreamweaver MX 2004 Demystified (Peachpit Press, 2004, ISBN 0-7357-1384-7)
Dan Schafer: HTML Utopia: Designing Without Tables Using CSS (Sitepoint Ply Ltd., 2003, ISBN 0-9579-2182-9)
Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson: Cascading Style Sheets: Separating Content from Presentation. 2nd ed.(O’Reilly & Associates, 2004, ISBN 0-5960-0576-8)
Web Sites www.w3.org www.htmlhelp.com/reference/css www.webreference.com/authoring/style/sheet www.sitepoint.com
www.MaximumComputerSystems.com/css
Eric Meyer on CSSMastering the Language of Web Design
www.ericmeyeroncss.com
Getting A Grasp on CSSEric Meyer ~ css hero
www.MaximumComputerSystems.com/css
Visual Quickstart GuideDHTML and CSS by Jason Cranford Teague
O’Reilly ~ by Eric Meyers
Cascading Style Sheets The Definitive Guide
What is a Database? Familiar Applications... Recipe Cards Library Card Catalog Rolodex or Address Book
E-Commerce Online Applications Merchandise Catalogs & Inventory Shopping Cart Functionality User Logins & Profi le Info E-Mail Mailing Lists
www.MaximumComputerSystems.com/css
The Power of Database FunctionalityEndless Applications...
www.MaximumComputerSystems.com/css
The Power of Database FunctionalityE-Commerce Power
PHP “Personal Home Page” Hypertext Preprocessor • A scripting Language used to create Dynamic Web Pages
• Embedded within HTML pages for server side execution
• Commonly used to extract data out of a database for presentation on a web pageMySQL A version of mSQL “Structured Query Language”
• A language used to interrogate and process data in a relational database (can be used directly or can be embedded in a Programming Language to interface with a database)SSI Server-Side Include
www.MaximumComputerSystems.com/css
The Power of Database FunctionalityE-Commerce Power
www.MaximumComputerSystems.com/css
The Power of Database Functionalitywww.databasedrivenwebsite.com
MCS “Booklist”Database Online
www.MaximumComputerSystems.com/css
The Power of Database Functionalitywww.databasedrivenwebsite.com
• Cross-Platform• Open Source• LAMP
Linux • Apache • MySQL • PHP
The Advantages of PHP & MySQL
The Power of Database Functionalitywww.databasedrivenwebsite.com
www.MaximumComputerSystems.com/css
The Power of Database Functionalitywww.databasedrivenwebsite.com
FLASH Cross-Platform Animation Application from Macromedia Interactivity & ActionScript Functionality File Size (vector & bitmap graphic elements)JAVA A Programming Language Can be called within an HTML document (Browser) or as a stand-alone Applets & Servlets (Java Virtual Machine)XML “Extensible Markup Language” Defines Contained Data rather than how they are displayed (HTML) Programmer defined tags (XML Schema) rather than a fixed set (HTML)XHTML Extensible HTML ~ A combination of HTML 4.0 and XML 1.0 Extends Property Tags of HTML
www.MaximumComputerSystems.com/css
Interactive Applet CreationThe buzzwords...
www.MaximumComputerSystems.com/css
Interactive Applet CreationFlash Books
www.MaximumComputerSystems.com/css
Advanced Web TechnologiesMacromedia Dreamweaver, Flash, Fireworks...
QuickTime A Cross-Platform Multimedia format developed by Apple which may include video and audio
Quicktime VR The Virtual Reality version of QuickTime which allows subject to be viewed on screen in a virtual 3D space (Panoramic & Object) Compiled from multiple still shots
Real Video & Real Audio Streaming Audio and Video (RealMedia) includes audio, video, MIDI, text, animations and presentations
www.MaximumComputerSystems.com/css
Interactive Applet CreationMedia Presentation
www.MaximumComputerSystems.com/css
Web Design ToolboxThe Applications
Dreamweaver MX 2004 Macromedia’s Web Design & Management Software www.macromedia.comPhotoshop Web Design Graphics & Layout Application Image Ready (Slicing & Animations) www.adobe.comBBEdit Versatile Text Edit & Text Coding Application www.barebone.comZend Studio PHP Coding API with PHP Libraries, Highlighting & Debug www.zend.com
GoLiveMyBook... for now
www.MaximumComputerSystems.com/css
DreamweaverMy
Book
Check out the CSS Book List atwww.MaximumComputerSystems.com/css/pdf/booklist.pdf
www.MaximumComputerSystems.com/css
Web Design ToolboxDreamweaver MX 2004
www.MaximumComputerSystems.com/css
Web Design ToolboxDreamweaver MX 2004
www.MaximumComputerSystems.com/css
Web Design ToolboxDreamweaver MX 2004
www.MaximumComputerSystems.com/css
Web Design ToolboxDreamweaver MX 2004
Web Design ToolboxDreamweaver MX 2004
Web Design ToolboxDreamweaver MX 2004
Dreamweaver MX 2004 Web Design
Project Management
www.MaximumComputerSystems.com/css
Web Design ToolboxAdobe Photoshop
www.MaximumComputerSystems.com/css
Web Design ToolboxPhotoshop as a Page Layout Tool
Adobe Photoshop Layers (turn on or off ) Web Optimization (GIF & JPG) Familiar Adobe Toolsets Batch ProcessingImage Ready Slicing Images (Tables) Animations Rollovers
www.MaximumComputerSystems.com/css
Web Design ToolboxAdobe Photoshop
www.MaximumComputerSystems.com/css
BBEdit by Bare Bones www.barebones.com
Web Design ToolboxBBEdit
www.MaximumComputerSystems.com/css
www.zend.com
Web Design ToolboxZend Studio
Web Design ToolboxZend Studio
www.MaximumComputerSystems.com/css
Web Design ToolboxZend Studio
for thePHP Developer
www.MaximumComputerSystems.com/css
Best Practices Workfl owCleanliness, Consistency & Common Sense Navigation
Code CleanlinessNaming ConventionsConsistencyNavigation Maximize Access, Minimize Clicks
Simple Is Better
www.MaximumComputerSystems.com/css
ResourcesBooks: Build Your Library
www.MaximumComputerSystems.com/css
www.databasedrivenwebsite.comwww.meyerweb.comwww.phpbuilder.comwww.onlamp.comdevedge.netscape.comwww.oreilly.comwww.newriders.comwww.peachpit.com
ResourcesWebsites
www.MaximumComputerSystems.com/css
ResourcesVisit Us...
www.MaximumComputerSystems.com/css
ResourcesUser Groups
Bux-Mont Macintosh Users Grouphttp://www.buxmontmug.org/
South Jersey Apple/Mac Users Grouphttp://www.sjaug.org/
Princeton Macintosh Users Grouphttp://www.pmug-nj.org/
Philadelphia Area AppleScript Users Grouphttp://homepage.mac.com/paasug/
Philadelphia Powerbook Users Grouphttp://www.ppug.net/
Main Line Macintosh Users Grouphttp://www.mlmug.org/
Philadelphia Area Computer Societyhttp://www.pacsnet.org/
The Macintosh Users of Delawarehttp://www.mudel.org/
Macintosh Users Group of Southern New Jerseyhttp://www.mudel.org/
The Macintosh Business Users Society of Greater Philadelphiahttp://www.macbus.org/
www.MaximumComputerSystems.com/css
VTC ~ Virtual Training Company ~ www.vtc.com
ResourcesTraining Media & more...
Special Thanks to ~
CSS • HTML • DHTML • PHP • MySQL • Java
Javascript • SSI • XML • XHTML • CSS • HTML
25% MUG members discount