1 / 19

Today’s Agenda

Today’s Agenda. Course Facilitator Introduction Announcements Quiz Servers and Clients URLs Dreamweaver Setup HTML Introduction – Part 2. Web Design: Basic to Advanced Techniques. About the Instructor. Programs. Languages. HTML CSS JavaScript (Vanilla, Prototype, Scriptaculous)

quasim
Download Presentation

Today’s Agenda

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Today’s Agenda • Course Facilitator Introduction • Announcements • Quiz • Servers and Clients • URLs • Dreamweaver Setup • HTML Introduction – Part 2 Web Design:Basic to Advanced Techniques

  2. About the Instructor Programs 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 (3rd Year EECS Major) • Freelance Web and Graphics Designer • Self-taught • Recently: Exploring Ruby on Rails • Looking into: Internet startups • Photoshop • Flash • Dreamweaver • ImageReady Web Design:Basic to Advanced Techniques

  3. Previous Work • iForged International and DTM Kreuz • French Bros. • Comfort Suites (Power of CSS) • BearStartup (Flash vs. JavaScript) Web Design:Basic to Advanced Techniques

  4. Announcements • DeCal website • Profile picture • Instant messaging • Roll • Submitting HW • Enrollment Update • Software Seekers • Mini Project #1 released Web Design:Basic to Advanced Techniques

  5. HTML - Quiz #1 http://decal.aw-industries.com Web Design:Basic to Advanced Techniques

  6. Servers and Clients DNS Lookup Server 2. Browser google.com = 74.125.19.147 3. 74.125.19.147/logo.gif logo.gif 1. http://google.com/logo.gif 5. 4. Client Web Server Web Design:Basic to Advanced Techniques

  7. URLs Hostname File http://www.royaljadehouse.com/images/Contact.jpg Prefix Domain Name Extension Protocol Path URLs specify the location of files on the web. Root (http://www.royaljadehouse.com) is the base directory pointed to by the domain name Web Design:Basic to Advanced Techniques

  8. Absolute vs. Relative URLs • <imgsrc=“URL” /> and <a href=“URL”></a> • Absolute URL • http://frenchbros.com/AboutUs.php • http://frenchbros.com/IMAGES/ABOUTUS/IMAGES/a.gif • Root Relative URL • /IMAGES/ABOUTUS/IMAGES/a.gif • Relative URL • IMAGES/ABOUTUS/IMAGES/a.gif Web Design:Basic to Advanced Techniques

  9. Dreamweaver Setup Create “WDD Site” folder on Desktop 2. Create “IMAGES” sub-folder Web Design:Basic to Advanced Techniques

  10. Dreamweaver Setup 3. Start Dreamweaver 4. Click Site>Manage Sites… on top bar 5. Click New>Site Web Design:Basic to Advanced Techniques

  11. 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 http://aw-industries.com/cs98_xx/ For “HTTP address” Web Design:Basic to Advanced Techniques

  12. 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”. Web Design:Basic to Advanced Techniques

  13. 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 http://aw-industries.com/cs98_xx Web Design:Basic to Advanced Techniques

  14. Web Design: Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall Basic to Advanced Techniques HTML Introduction – Part 2 Web Design:Basic to Advanced Techniques

  15. HTML Document Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8” /> <title>Untitled Document</title> </head> <body></body> </html> Web Design:Basic to Advanced Techniques

  16. Doctype • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • 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 Web Design:Basic to Advanced Techniques

  17. html Element • <html xmlns="http://www.w3.org/1999/xhtml"> • </html> • xmlns is a required attribute and should be set to what appears above • Later versions of xhtml may allow custom namespaces Web Design:Basic to Advanced Techniques

  18. head Element • <head></head> • Place for meta data • And <meta /> tags • Description • Keywords • Title of page • <title></title> • Content Type • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8” /> • Text/html • Image/jpeg • Video/mpeg Web Design:Basic to Advanced Techniques

  19. body Element • <body></body> • Where actual website content goes. • All the tags from our last lecture should be used here. Web Design:Basic to Advanced Techniques

More Related