beginning web design - creative fuel
TRANSCRIPT
b e g i n n i n g w e b d e s i g n
Beginning Web DesignZac Van Note
www.CreativeFuel.org
Introductions
b e g i n n i n g w e b d e s i g n
The Internet, the Web, and HTML
b e g i n n i n g w e b d e s i g n
What is the Internet and the World Wide Web?
b e g i n n i n g w e b d e s i g n
The Browser Wars
Internet Explorer, Netscape,Mozilla, Firefox, Opera, Safari ...
b e g i n n i n g w e b d e s i g n
The Push for Standards
(HTML 3.2, 4, CSS, XML, XHTML)
b e g i n n i n g w e b d e s i g n
The Real World(Current state-of-the-web)
What Should You Use?(HTML, XHTML, XML, CSS, etc.)
b e g i n n i n g w e b d e s i g n
What Else do I Need to Create a Web Site?
WYSIWYG HTML Editor
Graphics Software
Animation/Interactive Software
Scripting/Programming platform
Will your users need Plug-ins?
b e g i n n i n g w e b d e s i g n
What Else do I Need to Create a Web Site?
Web Server/Web Hosting
Security/Firewall/SSL
What about Selling online (e-commerce?)
Outsourcing vs. DIY
b e g i n n i n g w e b d e s i g n
Using Dreamweaver
Interface Overview
Code, Design, Split View
Creating a Local Site Definition
b e g i n n i n g w e b d e s i g n
b e g i n n i n g w e b d e s i g n
Web Page Building Blocks
A Web Page’s Text Content
Links, Images, and Other Non-Text Content
HTML Markup: Elements, Attributes, and Values
File Names
URLs
Working with Web Page Files
Designing Your Site
Creating a New Web Page
Saving Your Web Page
Microsoft Office and Web Pages
Specifying a Default or “Home” Page
b e g i n n i n g w e b d e s i g n
Working with Web Page Files
Editing Web Pages
Organizing Files
Viewing Your Page in a Browser
The Inspiration of Others (View Source)
b e g i n n i n g w e b d e s i g n
Basic HTML Structure
Starting Your Web Page
Creating a Title
Starting a New Paragraph
Creating a Line Break
Adding Comments
b e g i n n i n g w e b d e s i g n
HTML<html>
Everything (usually) goes in between these tags.</html>
b e g i n n i n g w e b d e s i g n
HEAD<head>
Stuff like scripts, title and meta tags go in here.</head>
b e g i n n i n g w e b d e s i g n
TITLE<title> Title of your page goes in here </title>
b e g i n n i n g w e b d e s i g n
BODY<body>
The visible parts of your page go in here.
</body>
b e g i n n i n g w e b d e s i g n
P, BR<p>
Text goes in here.<br>Put in the br tag to break lines of text to another line.
</p>
b e g i n n i n g w e b d e s i g n
Basic HTML FormattingFont Limitations
Formatting Bits of Text <font tag>
size
color
face
Making Text Bold or Italic
Pros and Cons of Using Dreamweaver Properties Panel to Style Text
b e g i n n i n g w e b d e s i g n
FONT<p>
<font size=”2” face=”futura,arial,sans serif” color=”purple”><b>Bold text</b>, <i>italic text</i>,
<strong>strong text, and <em>strong/emphasized text</em></strong></font></p>
b e g i n n i n g w e b d e s i g n
Working With Web Images
Format
Color
Resolution
Size (Download speed)
Transparency
Animation
Software
b e g i n n i n g w e b d e s i g n
Getting Images
Clipart/Stock photos
clipart.com
istockphoto.com
Scanner
Digital Camera
b e g i n n i n g w e b d e s i g n
Adding Images to Web Pages
Inserting Images on a Page
Offering Alternate Text
Specifying Size for Speedier Viewing
Adding Horizontal Rules
b e g i n n i n g w e b d e s i g n
IMG<img src=”filename.gif” />
<img src=”http://www.yourdomain.com/logo.jpg” />
b e g i n n i n g w e b d e s i g n
Links
Creating a Link to Another Web Page
Absolute/Relative Links
b e g i n n i n g w e b d e s i g n
A (links)<a href=”doclink.htm”>Text link goes here.</a>
<a href=”doclink.htm”> <img src=”linkimg.gif” /> </a>
b e g i n n i n g w e b d e s i g n
Publishing Your Pages on the Web
Finding a Host for Your Site
Getting Your Own Domain Name
Creating a Remote Site Definition
Transferring Files to the Server (FTP)
b e g i n n i n g w e b d e s i g n