beginning web design web 2014.pdf · web page building blocks a web page’s text content links,...

26
b e g i n n i n g w e b d e s i g n Beginning Web Design Zac Van Note www.CreativeFuel.org

Upload: others

Post on 05-Oct-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 2: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

Introductions

b e g i n n i n g w e b d e s i g n

Page 3: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

The Internet, the Web, and HTML

b e g i n n i n g w e b d e s i g n

Page 4: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 5: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 6: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

The Push for Standards

(HTML 3.2, 4, CSS, XHTML, HTML5)

b e g i n n i n g w e b d e s i g n

Page 7: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

The Real World(Current state-of-the-web)

What Should You Use?(HTML, XHTML, HTML5, CSS, etc.)

b e g i n n i n g w e b d e s i g n

Page 8: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 9: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Static vs. Dynamic

Page 10: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 11: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 12: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 13: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 14: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 15: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 16: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 17: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 18: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 19: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 20: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 21: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 22: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 23: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 24: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 25: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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

Page 26: Beginning Web Design Web 2014.pdf · Web Page Building Blocks A Web Page’s Text Content Links, Images, and Other Non-Text Content ... Working with Web Page Files Designing Your

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