Today’s Agenda Course Facilitator Introduction Announcements Quiz Servers and Clients URLs Dreamweaver Setup HTML Introduction – Part 2
About the Instructor Programs Photoshop Flash Dreamweaver ImageReady Languages HTML CSS JavaScript (Vanilla, Prototype, Scriptaculous) PHP SQL (MySQL, PostgreSQL, SQLite) Ruby (Ruby on Rails) ActionScript 2.0 & 3.0 Python C Java Scheme Bash Machine, Assembly, … Alexander Wong (3 rd Year EECS Major) Freelance Web and Graphics Designer Self-taught Recently: Exploring Ruby on Rails Looking into: Internet startups
Previous Work iForged International and DTM Kreuz French Bros. Comfort Suites (Power of CSS) BearStartup (Flash vs. JavaScript)
Announcements DeCal website Profile picture Instant messaging Roll Submitting HW Enrollment Update Software Seekers Mini Project #1 released
HTML - Quiz #1
Servers and Clients Client Server Browser Web Server DNS Lookup google.com = /logo.gif logo.gif
URLs Protocol Hostname DomainPrefix Path File Name Extension URLs specify the location of files on the web. Root ( is the base directory pointed to by the domain namehttp://
Absolute vs. Relative URLs and Absolute URL Root Relative URL /IMAGES/ABOUTUS/IMAGES/a.gif Relative URL IMAGES/ABOUTUS/IMAGES/a.gif
Dreamweaver Setup 1.Create “WDD Site” folder on Desktop 2. Create “IMAGES” sub-folder
Dreamweaver Setup 3. Start Dreamweaver 4. Click Site>Manage Sites… on top bar 5. Click New>Site
Dreamweaver Setup 6. Enter “Web Design Decal” in site name. Click the folder icon next to “Local root folder” and navigate to “WDD Site” on Desktop. Click the folder icon next to “Default images folder” and navigate to “IMAGES” sub-folder 7. Enter industries.com/cs98_xx/ industries.com/cs98_xx/ For “HTTP address”
Dreamweaver Setup 8. On the left side click “Remote Info” and select “FTP” from the “Access” dropdown menu 9. Enter “decal.aw-industries.com” for “FTP host”. Enter “/public” for “Host Directory”. Enter “cs98-xx” for “Login”. Enter your password. Check the box marked “Use passive FTP”. Check the box marked “Automatically upload files on save”.
Dreamweaver Setup 10. Click “Test”. You should see the message above. If you don’t please check your steps. 11. Click “OK” on the dialog and “OK” on the configuration window to save your settings. Dreamweaver is now properly configured and will upload all working documents to the web server on save. You can view your publically accessible pages via
Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall HTML Introduction – Part 2
HTML Document Structure Untitled Document
Doctype Tells the browser what type of document it is and by which rules to follow when rendering the page XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset Not an actual HTML element
html Element xmlns is a required attribute and should be set to what appears above Later versions of xhtml may allow custom namespaces
head Element Place for meta data And tags Description Keywords Title of page Content Type Text/html Image/jpeg Video/mpeg
body Element Where actual website content goes. All the tags from our last lecture should be used here.