1 / 36

Web Design Lesson 2

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

JasminFlorian
Télécharger la présentation

Web Design Lesson 2

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web DesignLesson 2 Lexington Technology Center March 13, 2003 Bob Herring On the web at www.lexington1.net/adulted/computer/web_design.htm

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. Web Design Lesson 2 File Menu Icon Same as Toolbar Horizontal Rule Keyboard Shortcut Recently Used File List 10

  10. Web Design Lesson 2 Edit Menu Keyboard Shortcuts 11

  11. Web Design Lesson 2 View Menu 12

  12. Web Design Lesson 2 Insert Menu 13

  13. Web Design Lesson 2 Format Menu 14

  14. Web Design Lesson 2 Tools Menu 15

  15. Web Design Lesson 2 Tables Menu 16

  16. Web Design Lesson 2 Frames Menu 17

  17. Web Design Lesson 2 Window Menu 18

  18. Web Design Lesson 2 Help Menu 19

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. Web Design Lesson 2 Creating Web Pages in Notepad • This is the completed page in Notepad: 31

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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

  36. 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

More Related