Fundamentals of Web Design v2

What We’ll Cover
 FTP - why it should be the first tool in your web developer toolbox.
 HTML basics, what's involved in writing it and understanding the

basic elements of a webpage.
 Cascading Style Sheets (CSS) and how they control the

presentation of HTML.
 Javascript and its role in user interaction, how it integrates and why
it matters.
 Flash and what role it plays in presentation, interaction and the ups
and downs of using it.
 PHP and ASP will be discussed in very general terms with an eye
toward use of dynamic pages and Content Management Systems.
But first, some background...
Basics of how the web works and how

your website fits into the big picture.
Basic HTML pages – ‘flat website’
Domain
Domain Name Registrars
Registry
Internet Domain
HTTP request: Service Name
“www.sitename.com” Provider Resolver
User IP address
00.00.00.00
Web
Page Host
HTTP response
Advantages: Speed / Flexibility

Disadvantages: Labor-intensive / navigation issues
Database-driven website
Domain Name Registrars Domain

Registry
CMS – Content Management System

HTTP request:
ISP DNR • WordPress
“www.sitename.com”
• Drupal
• Joomla
• many more
User
IP address
00.00.00.00
Web PHP
“LAMP”
Page Scripts
HTTP response
• Linux
Host • Apache
MySQL
• MySQL
Database
• PHP
Advantages: Automation of navigation, easy to change overall site design (‘theme’)

Disadvantages: Speed / Server Load / Script conflicts (plugins)
FTP
 FTP = File Transfer Protocol
 This is the method you’ll use to move files to and from your host.
 The better the tool integrates with your computer,

the easier it will be to publish your site changes.
 There are web-based tools but I’ve found them inefficient.
 Higher-end tools like Interarchy are blazing fast and support all the
special cases you’ll run into. ‘dot’ files being one of them.
 Tight integration with your text editor can make editing easier.
 Can be used to change file permissions.

Examples of FTP Programs
For Mac: For PC:
 Interarchy  WS-FTP
(http://nolobe.com/interarchy/) (www.ipswitchft.com/)
 Cyberduck  FTP Explorer

(http://cyberduck.ch/) (http://www.ftpx.com/)
 Transmit  Smart FTP

(http://www.panic.com/transmit/) (http://www.smartftp.com/)
FTP in the scheme of things
HOST HOST
Web Web
Page Page
http
F F
Browser T
T
View P
P
Edit/Preview
Editor on local PC within tool
Text editor / freestanding FTP Dreamweaver / IDE

GUI EDITORS - WYSIWYG
 Dreamweaver
 Beginners always seem to start with this. It’s a great tool.
 The preview isn’t quite right, it’s slow, it’s big, it’s expensive.
Has a built-in FTP tool. Tight integration with Adobe CS.
 FrontPage
 Very common starting point on PC. Solid and serviceable.
Deep integration with Windows OS.
 Plain-text editor
 Cheap. Fast. Efficient. Reliable. Trustworthy. Multi-platform.
 My choice – BBEdit for the Mac.
Downside: not quite as ‘helpful’ as GUI apps.
TEXT EDITORS
For Mac: For PC:
BBEdit NotePad++
(http://www.barebones.com) (notepad-plus.sourceforge.net/)
Text Wrangler Crimson

(http://www.barebones.com) (www.crimsoneditor.com)
SubEthaEdit jEdit (http://www.jedit.org/)

(http://www.codingmonkeys.de/)
HTML BASICS
HTML – Hyper Text Markup Language
HTML is a ‘markup’ language. It consists of TAGS: <b>This is bold</b> -

looks a lot like the pre-WYSIWYG wordprocessor ‘WordStar’. Browsers
interpret and ‘present’ the markup code.
Tags generally ‘open’ and ‘close’ – except for single-element tags like
<img>, <br> and <hr>.
Images and link paths can be ‘absolute’ or ‘relative’ – demo
For many years HTML page design was done using the <table> tag –
in the last decade CSS (Cascading Style Sheets) support in browsers has
improved to where object-oriented design techniques can be used,
separating design from content and allowing site-wide design changes
with minor edits.
HTML PAGE ELEMENTS
DOCTYPE – Rendering rules for HTML

HTML – Beginning of hypertext
HEAD – Title / Links / Scripts / Meta
BODY – The visible content of the page
Anatomy of an HTML page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="/resources/my_styles.css" media="all">
<script src="/resources/js/my_script.js" type="text/javascript" language="javascript"></script>
<meta name="keywords" content="dog, cat, bird, mouse, platypus">
</head>
<body>
<div id="pagewidth">
<div id=”banner">Page Banner</div>
<div id="wrapper" class="clearfix">
<div id="twocols" class="clearfix">
<div id="maincol">Main Content Column</div>
<div id="rightcol”>Right Column</div>
</div>
<div id="leftcol">Left Column</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
pagewidth
banner
wrapper
Two cols
leftcol maincol rightcol
footer
CSS – CASCADING STYLESHEETS
Definitions of STYLES for HTML Elements
Rather than:
<p><font size=“3”>Doo Dah</font></p>
(as inline style)
<p style=“font-size:12px;”>Doo Dah</p>
(as line in stylesheet)
p { font-size:12px; }
Can also refer to DIVisions of a page.

(live demo)
CSS Cheat Sheet
http://www.lesliefranke.com/files/reference/csscheatsheet.html
Javascript
JavaScript is an object-oriented scripting language used to enable
programmatic access to objects within both the client application
and other applications. It is primarily used in the form of client-side
JavaScript, implemented as an integrated component of the web
browser, allowing the development of enhanced user interfaces and
dynamic websites.
- Wikipedia
JAVASCRIPT
Common uses:
• Form validation – check user input before submission
• Popups
• Hide/show page elements
• Image rollover swaps
Javascript can be placed in

• A command within a tag (MouseOver)
• The <head> portion of a document
• The <body> portion of a document
• An externally-referenced file
Frameworks – many commons functions are available as ‘frameworks’

FLASH
Flash allows the presentation of scalable, vector-based information.
It has numerous advantages but is not intended as a primary tool
for constructing general-purpose websites.
Here’s a few drawbacks:
• How do you bookmark your location? Not supported – all navigation is
absolute and programmatic.
• Requires an add-on to the browser. Largely supported but can be issue.
• Complex animations can run slowly on low-end machines, yielding low
framerates and jerky display.
Flash is a great tool to present an animated piece of content but care

should be taken to factor in user issues if the entire site will be built in it.
PHP and ASP – the dynamic duo
 PHP – Hypertext Preprocessor – a
language designed to create HTML
using programming logic
 ASP – Active Server Pages – the

Microsoft version of PHP.
Information Architecture
 The blueprint that describes how
information is organized and structured.
 The relative position of files and folders
 The ‘concept’ behind your navigation

about.html
contact.html
index.html
links.html
map.html
Home
product_list.html
products (directory)
About Map
product1.html
product2.html
Contact form Staff list
.
Products Products Order Form .
Product 2
.
Links
product-x.html
Product ...
staff.html
store (directory)
order.html
validate.js
LEARNING RESOURCES
HTML Tutorial (http://www.w3schools.com/html/)
HTML Reference (http://www.w3schools.com/tags/)
HTML Validator (http://validator.w3.org/)
HTML Cheat Sheet (http://www.webmonkey.com/reference/HTML_Cheatsheet)
CSS Tutorial (http://www.w3schools.com/css/)
WestCiv CSS Guide (http://www.westciv.com/style_master/academy/css_tutorial/)
CSS Cheat Sheet (http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/)
CSS Layouts Step-by-step (http://www.webreference.com/authoring/style/sheets/layout/advanced/)
Javascript Tutorial (http://www.w3schools.com/JS/default.asp)
TOOLS
4096 Color Wheel
(http://www.ficml.org/jemimap/style/color/wheel.html)
CSS Creator (http://www.csscreator.com/version2/pagelayout.php)
Layout-o-matic (http://www.inknoise.com/experimental/layoutomatic.php)
Little Boxes (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
Entity Lookup (http://www.digitalmediaminute.com/reference/entity/index.php)
Stu Nicholls (http://www.cssplay.co.uk/)
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)
CONTENT MANAGEMENT SYSTEMS
WordPress Blogging Community – set up a free blog and get used to
using WordPress in a controlled environment before ‘self-hosting’
(http://www.wordpress.com)
WordPress Developer Community – once you have your feet wet, get
your own domain name and host, then roll your own look feel
(http://www.wordpress.org)
Boulder Digital Arts courses on installing, managing and customizing

(http://www.boulderdigitalarts.com/training/details.asp?offering=216)
Q&A
M. Douglas Wray
http://www.macwebguru.com
macguiguru@spamcop.net

Fundamentals of Web Design v2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fundamentals of Web Design v2

Uploaded by

Copyright:

Available Formats

What We’ll Cover

 HTML basics, what's involved in writing it and understanding the

 Cascading Style Sheets (CSS) and how they control the

Basics of how the web works and how

Advantages: Speed / Flexibility

Domain Name Registrars Domain

CMS – Content Management System

Advantages: Automation of navigation, easy to change overall site design (‘theme’)

 The better the tool integrates with your computer,

 There are web-based tools but I’ve found them inefficient.

 Can be used to change file permissions.

 Cyberduck  FTP Explorer

 Transmit  Smart FTP

Text editor / freestanding FTP Dreamweaver / IDE

Text Wrangler Crimson

SubEthaEdit jEdit (http://www.jedit.org/)

HTML is a ‘markup’ language. It consists of TAGS: <b>This is bold</b> -

Images and link paths can be ‘absolute’ or ‘relative’ – demo

DOCTYPE – Rendering rules for HTML

leftcol maincol rightcol

Can also refer to DIVisions of a page.

Javascript can be placed in

Frameworks – many commons functions are available as ‘frameworks’

Flash is a great tool to present an animated piece of content but care

 ASP – Active Server Pages – the

 The relative position of files and folders

 The ‘concept’ behind your navigation

CSS Creator (http://www.csscreator.com/version2/pagelayout.php)

Little Boxes (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)

Entity Lookup (http://www.digitalmediaminute.com/reference/entity/index.php)

Stu Nicholls (http://www.cssplay.co.uk/)

Boulder Digital Arts courses on installing, managing and customizing

You might also like