Web design lesson 2
Download
1 / 36

Web Design - PowerPoint PPT Presentation


  • 326 Views
  • Uploaded on

Web Design Lesson 2 Lexington Technology Center March 13, 2003 Bob Herring On the web at www.lexington1.net/adulted/computer/web_design.htm Web Design Lesson 2 Review of Tuesday’s Lesson The Internet How websites work URLs Planning websites HTML Creating web pages

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Design' - JasminFlorian


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web design lesson 2 l.jpg

Web DesignLesson 2

Lexington Technology Center

March 13, 2003

Bob Herring

On the web at www.lexington1.net/adulted/computer/web_design.htm


Web design lesson 22 l.jpg
Web Design Lesson 2

Review of Tuesday’s Lesson

  • The Internet

  • How websites work

  • URLs

  • Planning websites

  • HTML

  • Creating web pages

  • Adding graphics

  • Finding additional graphics

  • Copyright laws and the Web

2


Web design lesson 23 l.jpg
Web Design Lesson 2

FrontPage Standard Toolbar

Insert

Component

Refresh

Spell

Check

Show

Marks

Insert

Picture

Publish

Web

Paste

Print

Cut

Open

Undo

Help

New

Folder

List

Save

Stop

Copy

Redo

Insert

Table

Preview

in Browser

Insert

Hyperlink

Format

Painter

4


Web design lesson 24 l.jpg
Web Design Lesson 2

FrontPage Formatting Toolbar

Decrease

Indent

Center

Text

Style

High-

light

Numbered

List

Text

Color

Italics

Left

Bullet

List

Underline

Font

Size

Right

Increase

Indent

Font

Bold

5


Web design lesson 25 l.jpg
Web Design Lesson 2

FrontPage Picture Toolbar

Transparent

Color

Polygonal

Hotspot

Flip

Vertical

Send to

Back

Resample

Less

Brightness

Rotate

Right

Rectangular

Hotspot

Position

Absolutely

Less

Contrast

Washout

Text

Insert

Picture

Bring to

Front

Oval

Hotspot

Restore

Flip

Horizontal

More

Brightness

Bevel

Crop

Rotate

Left

Select

Highlight

Hotspot

Auto

Thumbnail

More

Contrast

Black

&

White

6


Web design lesson 26 l.jpg
Web Design Lesson 2

Working with Toolbars

  • Right-click anywhere in the toolbar area to get this popup menu

  • Left click on the desired toolbar to toggle it on or off

Toolbar Popup

7


Web design lesson 27 l.jpg
Web Design Lesson 2

Adding Tools to the Toolbar

  • Select Tools, then Customize; choose the Commands tab

  • Select File, then choose Close

  • Left-click and hold the desired icon; pull to desired spot on toolbar

Tools

Customize

Commands

8


Web design lesson 28 l.jpg
Web Design Lesson 2

Removing Tools from the Toolbar

  • Select Tools, then Customize; choose the Commands tab

  • Left-click and hold and pull the tool off the toolbar

Tools

Customize

Commands

9


Web design lesson 29 l.jpg
Web Design Lesson 2

File Menu

Icon

Same

as

Toolbar

Horizontal Rule

Keyboard Shortcut

Recently Used

File List

10


Web design lesson 210 l.jpg
Web Design Lesson 2

Edit Menu

Keyboard

Shortcuts

11


Web design lesson 211 l.jpg
Web Design Lesson 2

View Menu

12


Web design lesson 212 l.jpg
Web Design Lesson 2

Insert Menu

13


Web design lesson 213 l.jpg
Web Design Lesson 2

Format Menu

14


Web design lesson 214 l.jpg
Web Design Lesson 2

Tools Menu

15


Web design lesson 215 l.jpg
Web Design Lesson 2

Tables Menu

16


Web design lesson 216 l.jpg
Web Design Lesson 2

Frames Menu

17


Web design lesson 217 l.jpg
Web Design Lesson 2

Window Menu

18


Web design lesson 218 l.jpg
Web Design Lesson 2

Help Menu

19


Web design lesson 219 l.jpg
Web Design Lesson 2

Page View

  • The Page View shows web pages as you edit them

  • As text/graphics are entered, FrontPage calculates how long the page

  • will take to download

Time to

Download

20


Web design lesson 220 l.jpg
Web Design Lesson 2

Folder View

  • This view shows the folders and files in the current web

  • It allows the user to create/delete folders and move files

21


Web design lesson 221 l.jpg
Web Design Lesson 2

Report View

  • This view helps the user spot errors in the web

  • It shows unlinked files, slow-loading pages, broken hyperlinks, etc.

22


Web design lesson 222 l.jpg
Web Design Lesson 2

Navigation View

  • The Navigation View shows how pages are organized with respect

  • to each other and automatically generate navigation bars

  • Simply drag and drop files from the folder list to build the structure

23


Web design lesson 223 l.jpg
Web Design Lesson 2

Hyperlink View

  • The hyperlinks in each page are shown as an arrow from one page

  • to another

  • Broken hyperlinks show up as broken lines

24


Web design lesson 224 l.jpg
Web Design Lesson 2

Tasks View

  • This view shows a to-do list for the web so that tasks can be tracked

  • and managed

  • ClickEdit,then Tasks,and chooseAdd Task

25


Web design lesson 225 l.jpg
Web Design Lesson 2

Hyperlinks

  • When a hyperlink is created, the standard is to make the text

  • blue and underlined

  • When a hyperlink is visited, the standard is to make the text

  • purple and underlined

  • Most browsers interpret them for you in this way automatically

  • These colors can be set differently using LINK=“color” for unvisited

  • hyperlinks

  • Set the color of visited hyperlinks by using VLINK=“color”

  • BUT, try not to confuse your audience by using nonstandard colors!

26


Web design lesson 226 l.jpg
Web Design Lesson 2

Hyperlinks

  • Hyperlinks are pointers to other locations

  • Insert a hyperlink by choosing Insert, then Hyperlink (or click on

  • the Hyperlink Tool on the Standard Toolbar)

  • Type in the URL or pick from one of the pages in your web

27


Web design lesson 227 l.jpg
Web Design Lesson 2

HTML

  • HTML works by a specific sequence of “tags” that tell the browser

  • what to show. This is the anatomy of an HTML element:

Attribute

Name

Tag

Name

Attribute

Value

<H1 ALIGN=“LEFT”> Example Heading </H1>

Attribute

Start Tag

Affected Content

End Tag

28


Web design lesson 228 l.jpg
Web Design Lesson 2

HTML

  • This is the most basic sequence of tags:

<HTML>

<HEAD>

<TITLE> Some Title </TITLE>

</HEAD>

<BODY>

Some body text

</BODY>

</HTML>

Tags

Must

Be

Paired

29


Web design lesson 229 l.jpg
Web Design Lesson 2

Creating Web Pages in Notepad

  • Nothing says that HTML has to be created in a sophisticated way

  • Open Notepad and type in the following:

<HTML>

<HEAD>

<TITLE> Some Title </TITLE>

</HEAD>

<BODY>

<A HREF=“http://www.icapsc.com”> Some body text </A>

</BODY>

</HTML>

  • Select File, then Save As. In the “Save as type:” box, select All Files

  • Name your file index.htm and click the Save button

30


Web design lesson 230 l.jpg
Web Design Lesson 2

Creating Web Pages in Notepad

  • This is the completed page in Notepad:

31


Web design lesson 231 l.jpg
Web Design Lesson 2

Creating Web Pages in Notepad

  • Be sure to choose Save As… and “All Files”

3 ½ Floppy (A:)

index.htm

All Files

32


Web design lesson 232 l.jpg
Web Design Lesson 2

Background Colors and Images

  • Document-wide colors are defined in the <BODY> tag

<BODY BGCOLOR=“yellow” LINK=“#0000FF” VLINK=“purple”>

  • A picture can be used as a background

<BODY BACKGROUND=“images/long_palm_back_moon.jpg”>

33


Web design lesson 233 l.jpg
Web Design Lesson 2

Adding Background Colors

  • Colors are either specified by name or by hexadecimal RGB value

    • HTML defines 16 named colors

    • RGB values indicate color intensity in red, green, and blue light

      • Red + Blue = Fuchsia; Red + Green = Yellow

      • Blue + Green = Aqua; the 3 colors combine to make white

COLORR G B

Aqua #00FFFF

Black #000000

Blue #0000FF

Fuchsia #FF00FF

Gray #808080

Green #008000

Lime #00FF00

Maroon #800000

COLORR G B

Navy #000080

Olive #808000

Purple #800080

Red #FF0000

Silver #C0C0C0

Teal #008080

White #FFFFFF

Yellow #FFFF00

34


Web design lesson 234 l.jpg
Web Design Lesson 2

Setting the Background in FrontPage

  • To have FrontPage set the background color, click Format, then Background

  • Select the background color, or choose a picture

  • Text and hyperlink colors can also be set in this tab

Picture

Background

Colors

Hyperlink

Colors

35


Web design lesson 235 l.jpg
Web Design Lesson 2

Personal Web Project

  • Begin a personal web project

    • Start with an outline

      • Subjects to be covered

      • Depth versus breadth

    • Create a design

      • Typography

      • Page layouts

    • Plan main pages

      • What information will go on which page

      • Page connections

    • Make pages with FrontPage

36


Web design lesson 236 l.jpg
Web Design Lesson 2

Review

  • FrontPage Toolbars

  • FrontPage Menus

  • FrontPage Views

  • Hyperlinks

  • HTML Tags

  • Basic HTML

  • HTML in Notepad

  • Page Backgrounds

  • Personal Web Project

37


ad