Transcript An Explanation of Dreamweaver

Introduction to Web Design
By: Cara Norton and Randi Hill
Dacula High School
Central Gwinnett High School
Based on a Class by Joshua Hester
New Horizons Training Center
Tucker, Georgia
June, 2003
(Revised & Edited by Memory Reed, Harris County High
School, May 2009)
What is A Web Site?

A group of pages with a common purpose
maintained by one person or team
 Web Pages can be created in any number of
ways:
–
–
–
–
HTML
XHTML
FrontPage (software)
Dreamweaver (software)
Dreamweaver
(a commonly used web page design software)
1. Web Site Creation/Maintenance Program
2. WYSIWYG



3.
What You See Is What You Get
Allows you to edit pages easily and see what is
changing as you edit
It’s both an HTML and Graphical Editor
Dynamic Web Page
 Can individualize Web pages – different users get
different output (pages on the fly)
What Else About
Dreamweaver?
1.
2.
3.
4.
5.
Developed by Macromedia!
Flash, Fireworks, and Dreamweaver are all in
the same software suite.
Order processing software has to be
purchased separately.
It’s a whole lot of fun!
It’s very easy to use!
The Internet vs. The World
Wide Web

When did the Internet begin?
–

1968
Who developed the Internet?
–
–
Created by the U.S. Department of Defense
Originally called ARPA


(Advanced Research Project Agency)
Why was it created?
–

As a way to connect computers so if one machine went
down the others would keep working (SPUTNIK)
What organization used it first?
–
The National Science Foundation (NSF) introduced it to
college campuses in 1983.
Internet Questions

What is the Internet?
–
–

The physical connection of the
W_________ W_______ W____.
Basically it is hardware
What year do you think email began?
–
–
1971
Before the first web pages were created!
What is WWW?

World Wide Web
 Began in 1991
 Created by Tim Berners-Lee
– He, along with his research team of scientists in
Sweden, completed it in 1989.
– Their purpose was to share Physics research
electronically, therefore creating HTML code.

A piece of software that runs on the Internet that
allows users to share files.
Before HTML

Information was exchanged in two ways:
– ASCII Files: American Standard Code for Information Interchange


shared text only, but with no formatting options except line
returns and tabs.
Advantage: ALL machines could read it.
– Binary Files:



0’s and 1’s
Only read the text if you had the SAME software as the person
who originally created the text.
Disadvantage: there used to be over 400 different word
processing software packages available.
HTML

HyperText Markup Language
– Hyper = fast (speed)
– Text = ASCII text so ALL computers can read
it.
– Markup = Formatting of the text – an original
printing press term


<b>Hello</b> ---- bolds text
The greater/less than signs are called WICKETS!
– Language = the language of the Web

Learn the codes before using any editor
software – it will be well worth your time!
How Does it all Work?
URL: Request
CLIENT
SERVER
Response
1. Who is the client?
•
A Web user – You and me!
2. What is the server?
•
•
A machine that provides you what you want – a connection to
information on the Internet
A server used to be a connection outside your company – called
OUTSOURCING
3. What is the response?
•
•
The server sends back a COPY of the actual page
The copy allows you to view the HTML code
Requests From the Server

URL
– Universal Resource Locator
– The request

1. HTTP://
– Hypertext Transfer Protocol


Saying you’d like a Web page
Domain Name asking you what type of information you’d like
– WWW.MICROSOFT.COM

2. FTP://
– File Transfer Protocol


Saying you’d like to download something
3. MAILTO://
– Email service

Saying you’d like to email someone
Domain Names







.com = commercial business (microsoft.com)
.gov = government institutions (cia.gov)
.edu = educational institutions (cornell.edu)
.mil = military organizations (army.mil)
.net = network organizations (internic.net)
.org = organizations that don’t fit in any of the other
categories – usually non-profits (santafecares.org)
Country Codes:
– jp = Japan
– ru = Russia

ca = Canada
us = United States
http://www.gwinnett.k12.ga.us
de = Germany
au = Australia
Interesting Information
1. Web Browser
A user agent that allows you to read HTML.
2. MOSAIC
1st browser that allowed for graphics to be
viewed on the Web page
3. MOZILLA
A search engine that is used by both Netscape
and Explorer
4. NETSCAPE
Developed in 93-94
Huge browser which allows for a large influence
on HTML code
Is the only browser that has to be purchased!
Interesting Information, cont…
5.
W3C
– World Wide Web Consortium
– Developed in 1993
– Used to set standards and recommendations for
regulating HTML
– Didn’t work because Netscape was so big!
– President: Tim Berners-Lee

He never trademarked or copyrighted his Internet
invention, he called it “His Gift to the World”. He
says it’s the biggest mistake he’s ever made!
– Current version of HTML is 4.01
– Work is being done on HTML 5

Neither large browser fully supports this standard
5.08 Compliant

All webs must be in compliance with the
Americans With Disabilities Act
 10% of audiences are impaired – couldn’t
access the web 5 years ago
 Don’t use <b> and <i> tags – voices can’t
speak in italics
 Go to www.W3.org and check to see if your
web site is 5.08 compliant!
XML vs. XHTML

XML:
– Came out in 1998
– Means Extensible Language
– Allows you to create your own tags so that you don’t
have to conform to browsers
– Mostly used by programmers behind the scenes right
now

XHTML:
– Requires you to use ALL lowercase letters
– No optional closing tags


Every code must have beginning & ending tags
Over 60% of people use a combination of both of
these today!
Graphics

There are many types of graphic files, they differ
in the quality and size of the file
 Of course, you want the best quality on your web
page, but you have to consider what size and
quality most customers can handle
 This article shows the difference and how to
choose your graphics for a website
http://www.wfu.edu/~matthews/misc/graphics/for
mats/formats.html
Hyperlinks

Hyperlinks are used in web pages to link the
customer from one place or page to another place
in the page or to another web page
 Links are usually underlined
 Links can also be “rollover” links, that change
color when you rollover them indicating they are
hyperlinks
 Some marketers use hyperlinks unethically, see
this article http://www.poeticsystems.com/blog/EthicalHyperlinks-SEO.html#
Font Choices

Choosing fonts are an important step in web design
 Serif (like Times New Roman - has the little feet on the
bottom of the letters) ex: THIS IS SERIF
– Best to use in the print industry

Sans Serif (like Arial - clean and simple) ex: This is
Sans Serif (Sans means without or NOT)
– Best to use in web design

Fancy or decorative fonts (like Script or Comic Sans) ex:
This is Script ; Comic Sans; Lucida
– Best not to use for several reasons - Hard to read, off-putting for
some people, some people’s computers may not recognize the
font
Site Maps Vs. Navigation
Schemes

Site Maps - ways for webmasters to inform
search engines about their pages and make
it easier for them to “crawl” or search
 Navigation Schemes - A consistent theme
throughout the website that makes it easier
for visitors to find what they need quickly
Web Design for Marketing





Know your target audience
Build your website with your target audience in
mind
Flash & graphics aren’t what builds up customers,
it’s great customer service and customer
engagement
Cater to the customer
Create positive user experiences, optimize
usability and have technology that fits user needs