today’s agenda
DESCRIPTION
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) - PowerPoint PPT PresentationTRANSCRIPT
Web Design:Basic to Advanced Techniques
Today’s AgendaCourse 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, …
Web Design:Basic to Advanced Techniques
•Alexander Wong (3rd Year EECS Major)•Freelance Web and Graphics Designer•Self-taught•Recently: Exploring Ruby on Rails
•Looking into: Internet startups
Previous WorkiForged International and DTM Kreuz
French Bros.
Comfort Suites (Power of CSS)
BearStartup (Flash vs. JavaScript)
Web Design:Basic to Advanced Techniques
AnnouncementsDeCal website
Profile picture Instant messagingRollSubmitting HW
Enrollment Update
Software Seekers
Mini Project #1 released
Web Design:Basic to Advanced Techniques
HTML - Quiz #1http://decal.aw-industries.com
Web Design:Basic to Advanced Techniques
Servers and Clients
Web Design:Basic to Advanced Techniques
Client
ServerBrowser
Web Server
DNS Lookup
google.com = 74.125.19.147
74.125.19.147/logo.gif
http://google.com/logo.gif1.
2.
3.
4.
5.
logo.gif
Web Design:Basic to Advanced Techniques
URLs
http://www.royaljadehouse.com/images/Contact.jpg
Protocol
Hostname
DomainPrefix
Path
File
Name
Extension
URLs specify the location of files on the web.
Root (http://www.royaljadehouse.com) is the base directory pointed to by the domain name
Absolute vs. Relative URLs<img src=“URL” /> and <a href=“URL”></a>
Absolute URLhttp://frenchbros.com/AboutUs.phphttp://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
Dreamweaver Setup
1. Create “WDD Site” folder on Desktop
2. Create “IMAGES” sub-folder
Web Design:Basic to Advanced Techniques
Dreamweaver Setup3. Start Dreamweaver
4. Click Site>Manage Sites…on top bar
5. Click New>Site
Web Design:Basic to Advanced Techniques
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
Web Design:Basic to Advanced Techniques
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 theweb server on save. You can view your publically accessible pages via http://aw-industries.com/cs98_xx
Web Design:Basic to Advanced Techniques
Web Design:Basic to Advanced Techniques
Spring 2010Tuesdays 7-8pm
200 Sutardja-Dai Hall
HTML Introduction – Part 2
Web Design:Basic to Advanced Techniques
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
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 pageXHTML 1.0 StrictXHTML 1.0 TransitionalXHTML 1.0 Frameset
Not an actual HTML element
Web Design:Basic to Advanced Techniques
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
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
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