beginning web design web 2014.pdf · web page building blocks a web page’s text content links,...
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/1.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052015/602d0a38da17494e3d4b4e70/html5/thumbnails/26.jpg)
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