Fundamentals of Web Design - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Fundamentals of Web Design

Description:

Cascading Style Sheets (CSS) and how they control the presentation of HTML. ... Basics of how the web works and how your website fits into the big picture. – PowerPoint PPT presentation

Number of Views:1366
Avg rating:3.0/5.0
Slides: 27
Provided by: DougW152
Learn more at: http://www.macwebguru.com
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Fundamentals of Web Design


1
Fundamentals of Web Design
2
What Well 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.

3
But first, some background...
  • Basics of how the web works and how your website
    fits into the big picture.

4
Basic HTML pages flat website
Domain Registry
Domain Name Registrars
Domain Name Resolver
Internet Service Provider
HTTP request www.sitename.com
User
Host
IP address 00.00.00.00
Web Page
HTTP response
Advantages Speed / Flexibility Disadvantages
Labor-intensive / navigation issues
5
Database-driven website
Domain Registry
Domain Name Registrars
  • CMS Content Management System
  • WordPress
  • Drupal
  • Joomla
  • many more

DNR
ISP
HTTP request www.sitename.com
User
Host
IP address 00.00.00.00
PHP Scripts
Web Page
  • LAMP
  • Linux
  • Apache
  • MySQL
  • PHP

HTTP response
MySQL Database
Advantages Automation of navigation, easy to
change overall site design (theme) Disadvantages
Speed / Server Load / Script conflicts (plugins)
6
FTP
  • FTP File Transfer Protocol
  • This is the method youll 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 Ive found them
    inefficient.
  • Higher-end tools like Interarchy are blazing fast
    and support all the special cases youll 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.

7
Examples of FTP Programs
  • For Mac
  • Interarchy (http//nolobe.com/interarchy/)
  • Cyberduck (http//cyberduck.ch/)
  • Transmit (http//www.panic.com/transmit/)
  • For PC
  • WS-FTP (www.ipswitchft.com/)
  • FTP Explorer (http//www.ftpx.com/)
  • Smart FTP (http//www.smartftp.com/)

8
FTP in the scheme of things
HOST
HOST
Web Page
Web Page
http
F T P
Edit/Preview within tool
F T P
Browser View
Editor on local PC
Text editor / freestanding FTP
Dreamweaver / IDE
9
GUI EDITORS - WYSIWYG
  • Dreamweaver
  • Beginners always seem to start with this. Its a
    great tool.
  • The preview isnt quite right, its slow, its
    big, its 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.

10
TEXT EDITORS
For Mac BBEdit (http//www.barebones.com) Text
Wrangler (http//www.barebones.com) SubEthaEdit (
http//www.codingmonkeys.de/)
For PC NotePad (notepad-plus.sourceforge.net/)
Crimson (www.crimsoneditor.com) jEdit
(http//www.jedit.org/)
11
HTML BASICS
HTML Hyper Text Markup Language HTML is a
markup language. It consists of TAGS ltbgtThis
is boldlt/bgt - 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 ltimggt, ltbrgt and lthrgt. Images and link paths
can be absolute or relative demo For many
years HTML page design was done using the lttablegt
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.
12
HTML PAGE ELEMENTS
DOCTYPE Rendering rules for HTML HTML
Beginning of hypertext HEAD Title / Links /
Scripts / Meta BODY The visible content of the
page
13
Anatomy of an HTML page
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http//www.w3.org/TR/html4/strict.dtd"gt lthtmlgt
ltheadgt lttitlegtPage Titlelt/titlegt
ltlink rel"stylesheet" href"/resources/my_styles
.css" media"all"gt ltscript
src"/resources/js/my_script.js"
type"text/javascript" language"javascript"gtlt/scr
iptgt ltmeta name"keywords" content"dog,
cat, bird, mouse, platypus"gt lt/headgt
ltbodygt ltdiv id"pagewidth"gt
ltdiv idbanner"gtPage Bannerlt/divgt
ltdiv id"wrapper" class"clearfix"gt
ltdiv id"twocols" class"clearfix"gt
ltdiv id"maincol"gtMain Content
Columnlt/divgt ltdiv
id"rightcolgtRight Columnlt/divgt
lt/divgt ltdiv id"leftcol"gtLeft
Columnlt/divgt lt/divgt ltdiv
id"footer"gtFooterlt/divgt lt/divgt
lt/bodygt lt/htmlgt
14
pagewidth
banner
wrapper
Two cols
leftcol
rightcol
maincol
footer
15
CSS CASCADING STYLESHEETS
Definitions of STYLES for HTML Elements Rather
than ltpgtltfont size3gtDoo Dahlt/fontgtlt/pgt (as
inline style) ltp stylefont-size12pxgtDoo
Dahlt/pgt (as line in stylesheet) p
font-size12px Can also refer to DIVisions of
a page. (live demo)
16
CSS Cheat Sheet
  • http//www.lesliefranke.com/files/reference/cssche
    atsheet.html

17
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
18
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 ltheadgt portion of a document
  • The ltbodygt portion of a document
  • An externally-referenced file
  • Frameworks many commons functions are available
    as frameworks

19
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.
  • Heres 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.

20
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.

21
Information Architecture
  • The blueprint that describes how information is
    organized and structured.
  • The relative position of files and folders
  • The concept behind your navigation

22
about.html contact.html index.html links.html map.
html product_list.html products (directory)
product1.html product2.html . .
. product-x.html staff.html store
(directory) order.html validate.js
23
LEARNING RESOURCES
HTML Tutorial (http//www.w3schools.com/html/) HTM
L Reference (http//www.w3schools.com/tags/) HTML
Validator (http//validator.w3.org/) HTML Cheat
Sheet (http//www.webmonkey.com/reference/HTML_Che
atsheet) CSS Tutorial (http//www.w3schools.com/cs
s/) WestCiv CSS Guide (http//www.westciv.com/styl
e_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/sheet
s/layout/advanced/) Javascript Tutorial
(http//www.w3schools.com/JS/default.asp)
24
TOOLS
4096 Color Wheel (http//www.ficml.org/jemimap/sty
le/color/wheel.html) CSS Creator
(http//www.csscreator.com/version2/pagelayout.php
) Layout-o-matic (http//www.inknoise.com/experim
ental/layoutomatic.php) Little Boxes
(http//www.thenoodleincident.com/tutorials/box_le
sson/boxes.html) Entity Lookup
(http//www.digitalmediaminute.com/reference/entit
y/index.php) Stu Nicholls (http//www.cssplay.co.
uk/) Firebug (https//addons.mozilla.org/en-US/fi
refox/addon/1843)
25
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.word
press.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/tra
ining/details.asp?offering216) (http//www.boulde
rdigitalarts.com/training/details.asp?offering217
) (http//www.boulderdigitalarts.com/training/det
ails.asp?offering235)
26
Q A
M. Douglas Wray http//www.macwebguru.com macgui
guru_at_spamcop.net
About PowerShow.com