web design lesson 2
Download
Skip this Video
Download Presentation
Web Design Lesson 2

Loading in 2 Seconds...

play fullscreen
1 / 36

Web Design Lesson 2 - 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 Lesson 2' - 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

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
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
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
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
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
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
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
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
Web Design Lesson 2

File Menu

Icon

Same

as

Toolbar

Horizontal Rule

Keyboard Shortcut

Recently Used

File List

10

web design lesson 210
Web Design Lesson 2

Edit Menu

Keyboard

Shortcuts

11

web design lesson 212
Web Design Lesson 2

Insert Menu

13

web design lesson 213
Web Design Lesson 2

Format Menu

14

web design lesson 215
Web Design Lesson 2

Tables Menu

16

web design lesson 216
Web Design Lesson 2

Frames Menu

17

web design lesson 217
Web Design Lesson 2

Window Menu

18

web design lesson 219
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
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
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
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
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
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
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
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
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

Example Heading

Attribute

Start Tag

Affected Content

End Tag

28

web design lesson 228
Web Design Lesson 2

HTML

  • This is the most basic sequence of tags:

Some Title

Some body text

Tags

Must

Be

Paired

29

web design lesson 229
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:

Some Title

Some body text

  • 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
Web Design Lesson 2

Creating Web Pages in Notepad

  • This is the completed page in Notepad:

31

web design lesson 231
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
Web Design Lesson 2

Background Colors and Images

  • Document-wide colors are defined in the tag

  • A picture can be used as a background

33

web design lesson 233
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
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
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
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