Webpages

907 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
907
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webpages

  1. 1. Introduction to Web Page Creation Holly Doe
  2. 2. What is a Web page? <ul><li>Pages of coded (HTML)text. </li></ul><ul><li>Browser software understands the code and interprets it so we see a page without code. </li></ul><ul><li>HTML files can be read by any computer because they are simple text. </li></ul><ul><li>Text or graphics can be linked to other pages. Hypertext! </li></ul>
  3. 3. How can you make a Web page? <ul><li>Write HTML code </li></ul><ul><ul><li>Simpletext, TextEdit, or Notepad </li></ul></ul><ul><li>Use a Web Authoring Software package: </li></ul><ul><ul><li>Adobe PageMill </li></ul></ul><ul><ul><li>Microsoft Frontpage </li></ul></ul><ul><ul><li>Macromedia DreamWeaver </li></ul></ul><ul><ul><li>Claris Homepage </li></ul></ul><ul><ul><li>Netscape Composer (comes with communicator) </li></ul></ul>
  4. 4. What elements can you add to a Web page? <ul><li>Words (bold, italic, heading sizes, colors, etc.) </li></ul><ul><li>Links (To Web sites, your own pages or e-mail) </li></ul><ul><li>Lists </li></ul><ul><li>Graphics, sounds, and movies </li></ul><ul><li>Tables </li></ul><ul><li>Forms </li></ul><ul><li>Frames </li></ul>
  5. 5. Overall Process <ul><li>Choose a Web authoring package and learn how to use it. </li></ul><ul><li>Plan your site. Take notes and create a visual map. </li></ul><ul><li>Begin your pages and manage your files. </li></ul><ul><li>Who will host your site? </li></ul><ul><li>Reflect on design. </li></ul>
  6. 6. Planning <ul><li>Who is your audience? </li></ul><ul><li>Make an outline or storyboard. </li></ul><ul><li>Organize your files. </li></ul>
  7. 7. File Management <ul><li>Create and name a folder for all your individual Web pages. </li></ul><ul><li>Within this folder, create an images or pics folder for saving all your images. </li></ul><ul><li>Use more folders if your site becomes very large. </li></ul><ul><li>Create the folders from the very beginning to avoid confusion later. (If you move files around after creating links on your pages, the links will no longer work.) </li></ul>
  8. 8. File Name Rules <ul><li>Web page files must end in .htm or .html </li></ul><ul><li>Save graphics with the appropriate extension. (.gif or .jpg) </li></ul><ul><li>First page (home page) is usually called index.htm or default.htm </li></ul><ul><li>Use all lowercase letters. (Easier) </li></ul><ul><li>Use only letters and numbers other than ~ - _ </li></ul><ul><li>Don’t use spaces. </li></ul><ul><li>Keep file names short. </li></ul>
  9. 10. Uploading to a Server <ul><li>FPT Server is a large computer that is connected to the Internet 24 hours a day to constantly make your site available. </li></ul><ul><li>How to find one? Free server sites are everywhere or ask your ISP </li></ul><ul><li>Need software:CuteFTP or WS_FTP </li></ul><ul><li>Need a user name and password for access to server. </li></ul><ul><li>Must send every file and graphic to server. </li></ul><ul><li>http://www. iem an .com </li></ul>
  10. 11. Design Do’s <ul><li>Do keep all important information and links within the top 4 inches so it is visible. “The Top Four Inches Rule” </li></ul><ul><li>Do keep graphics and text consistent throughout your pages </li></ul><ul><li>Do provide credits or a bibliography </li></ul><ul><li>Do provide a note to inform visitors of the last update. </li></ul><ul><li>Do provide good navigation. </li></ul><ul><ul><li>Every page links back to home </li></ul></ul><ul><ul><li>Menu on each page </li></ul></ul><ul><ul><li>Consistency </li></ul></ul>
  11. 12. Design Don’ts <ul><li>Do not use music or graphics without a purpose and that are annoying to your site visitors. </li></ul><ul><li>Do not use frames. </li></ul><ul><li>Do not use “under construction” graphics. </li></ul><ul><li>Do not use complex background images. </li></ul>
  12. 13. Graphics <ul><li>Be careful of size </li></ul><ul><li>Are they necessary? Animated Gifs?? </li></ul><ul><li>Background images-not too busy </li></ul><ul><li>Every one should have an Alt Label for Accessibility purposes! </li></ul><ul><li>Image Maps-What are they? Example </li></ul><ul><li>Some text headings are actually images. </li></ul><ul><li>Create your own with drawing software. </li></ul><ul><li>Find graphics in online clip-art galleries. </li></ul>
  13. 14. Typography <ul><li>Is it readable? Black on white is best. </li></ul><ul><li>Consistency throughout your pages. </li></ul><ul><li>Link Colors </li></ul><ul><li>Consider your font choices. </li></ul>
  14. 15. Tables <ul><li>More than a way to organize text and data. </li></ul><ul><li>Great for layout of elements on page. </li></ul><ul><li>Borders can be invisible or visible. </li></ul><ul><li>Change colors of background. </li></ul>
  15. 16. Table Example on Page
  16. 17. Advanced Features <ul><li>Style Sheets </li></ul><ul><li>Javascript and Flash -Adds interactivity </li></ul><ul><li>Forms-Requires someone to write a CGI script so information can be sent to your e-mail address. </li></ul><ul><li>XML </li></ul>
  17. 18. Mid-term Web page Requirements <ul><li>Two linked pages that you develop </li></ul><ul><li>Four images </li></ul><ul><li>Varying size fonts </li></ul><ul><li>Background color </li></ul><ul><li>Table </li></ul><ul><li>Internal linked anchors </li></ul><ul><li>Four links to outside pages </li></ul><ul><li>List </li></ul><ul><li>E-mail link </li></ul><ul><li>Horizontal Line </li></ul>

×