1 / 36

Mark Branom, ITSS markb@stanford 5-1717

Learn HTML, Dreamweaver, and web design essentials for creating departmental websites with step-by-step instructions and tips. Enhance text formatting, lists, hyperlinks, images, and more.

latanyam
Download Presentation

Mark Branom, ITSS markb@stanford 5-1717

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. Friday Tech BriefingTimely Info for Power Users and Stanford's Technology Support CommunityMark BranomITSS Technology Training Services Maintaining Departmental Web Pages Mark Branom, ITSS markb@stanford.edu 5-1717

  2. Contents • Creating/Updating web pages for department use • Dreamweaver demo • Web Design issues • Web Design resources • Web Creating and Designing Courses Tech Breifing: Departmental Web Pages

  3. Server Information • Hostname (SFTP): elaine.stanford.edu • /afs/ir/group/groupname/WWW • /afs/ir/dept/deptname/WWW • /afs/ir/class/classname/WWW • /afs/ir/users/j/d/jdoe/WWW Tech Breifing: Departmental Web Pages

  4. Creating Web Pages • HyperText Markup Language (HTML) • HTML is a collection of text surrounded by tags which modify the text • In general, tags work in pairs (one to turn on the modification, one to turn it off): • <TAG> text being modified </TAG> Tech Breifing: Departmental Web Pages

  5. WYSIWYG • Fortunately, learning EVERYTHING about HTML is no longer necessary. WYSIWYG editors such as Dreamweaver and GoLive make it possible to create dynamic web pages with little or no web creation experience. Tech Breifing: Departmental Web Pages

  6. Demo: Dreamweaver Tech Breifing: Departmental Web Pages

  7. Assigning the Root Folder • Open Dreamweaver. • Dreamweaver is not designed for single webpage creation; rather, it is designed for maintaining a complete website. Dreamweaver needs to know where all the local content of your particular site resides. • Under the “Site” menu item, choose “Edit Sites” • When the “Edit Sites” box opens, choose “New” and enter in the information requested. See slide 3 for server information. Tech Breifing: Departmental Web Pages

  8. Creating a Blank Webpage • Now that you have set up Dreamweaver, you’re ready to work on your web pages. If you wish to use a page which already exists, open it. If there isn't already one open, select New from under the File menu. Select “Basic Page” and “HTML”. When the untitled web page appears, save the it in the folder you selected in the previous section, and call it "index.html." This is the name given to 99% of all "home pages.” If you wish to call it something else, that's fine. Just be aware that all filenames must be one word, and must end with .html Tech Breifing: Departmental Web Pages

  9. Giving your page a title • Give your page a title, and start typing text into it. Notice how it works pretty much like a word processor. If you would like to format some text, you'll need to use the "Selection Properties" window. You can open this under the Modify menu, or it should already be open. This window will change based on what is selected, and is the most important single menu in this program. Tech Breifing: Departmental Web Pages

  10. Text formatting If you don’t want any formatting, simply type your text. Press return to jump down one paragraph. Notice how it jumps down TWO lines. To jump down only one, hold down on the Shift key and press return. It jumps to the next line. Tech Breifing: Departmental Web Pages

  11. Text formatting (continued) • But usually you’ll want some formatting:Bold:Italics: Tech Breifing: Departmental Web Pages

  12. More text formatting • Header 1: • Verdana font: • Red font: Tech Breifing: Departmental Web Pages

  13. Lists • Often, you’ll want to have bulleted items. To do this, press the Unordered List button on the properties palette: Tech Breifing: Departmental Web Pages

  14. Lists, continued • Sometimes you’ll want numbered lists. Press the Ordered List button on the properties palette: Tech Breifing: Departmental Web Pages

  15. Creating a hyperlink • To link text to a web page or other item on the internet, simply highlight the text, and type in the URL in the properties palette: • If you want a new window to open when the user clicks on the link, choose “_blank” in the target pull-down menu: Tech Breifing: Departmental Web Pages

  16. Adding Images • To add an image, you first need to have an image to add, and it must be in the web site directory on your computer. Once it’s there, under Insert, choose Image. Tech Breifing: Departmental Web Pages

  17. Image (continued) Select the image, and press “OK”. Tech Breifing: Departmental Web Pages

  18. Hyperlinking Images • If you want to make the image “clickable”, highlight the image, and add the Link in the properties palette: Tech Breifing: Departmental Web Pages

  19. Other Image Properties W = width (in pixels) H = height (in pixels) Src = source of the image (where it’s located) Alt = alternative text description of the image Map = imagemap name -- used to define more than one hyperlink for the image (week 4) V Space = defines the amount of space above and below the image (in pixels) H Space = defines the amount of space to the right and left of the image (in pixels) Low Src = used if a low-resolution version of the image displays as the “real” one loads Border = the size of the border around the image (in pixels) Align = the alignment of the image in relationship to the text or other images that surround it. Tech Breifing: Departmental Web Pages

  20. What Makes Good Web Design • Content is important but content alone will not make your site work. • Good design is: • understandable • interesting • useful • easily navigated • unified in look and feel Tech Breifing: Departmental Web Pages

  21. Typical Website Evolution • Generation One -- replaces paper information • Generation Two -- flashy elements added • Generation Three -- bleeding edge, content suffers • Generation Four -- integration of content and technology Ideally, you’d try to bypass the problems found with generations one through three. Tech Breifing: Departmental Web Pages

  22. Pre-Design Work • Pre-production concerns • Consider your organization’s mission • Establish audience • Set goals for your website • immediate • long-term • Think about strategies for meeting goals Tech Breifing: Departmental Web Pages

  23. Pre-Design Work, cont’d. • Pre-production concerns, cont’d. • Gather & organize content • “Chunk” into logical information units • Establish hierarchy of content • Create outline or plan for content • Create flow chart • Build site structure which is the basis for URLs • Establish navigation routes Tech Breifing: Departmental Web Pages

  24. Pre-Design Work, cont’d. • Technology concerns • Browsers • Operating Systems • Connection Speeds • User screen sizes • Budget concerns • Staff time for creation and maintenance • In-house vs outsource • Establish criteria for measuring success Tech Breifing: Departmental Web Pages

  25. Site Elements • Site maps • http://www.stanford.edu/home/atoz/sitemap.html • Contact page Consider how your users will be using the page and how they might need to contact your organization • FAQ pages Tech Breifing: Departmental Web Pages

  26. Page Elements • Make page somewhat freestanding • include navigation elements on each page • include logo/home page link • if page will be printed, include URL for home page • Brief informative title • Contact information • Creation/revision dates Tech Breifing: Departmental Web Pages

  27. Navigation • Strive for balance between appearance and usefulness. • Make sure that users can get where they need to go within your site quickly and easily. • Make sure the navigations elements will work in a non-graphical browser as well as in a rich format. Tech Breifing: Departmental Web Pages

  28. Use of Cutting Edge Tools & Content • Bad reasons • to look cool • to prove you can • Good reasons • to look cool • to draw attention • to maintain attention • to enhance info • to inform or educate Tech Breifing: Departmental Web Pages

  29. Design Basics • Balance • Visual uniformity • Visual hierarchy • Contrast • Page dimensions • Scroll 3 screen lengths only (1440 pixels) • include jump to top element • No vertical scroll -- either use a percentage width or use 700 pixels maximum • Consider layout of material above and below “the fold” Tech Breifing: Departmental Web Pages

  30. Design Basics, cont’d. • Color palette • Typography • Understand the medium • Fixed page elements (Navigation) • Maximize prime real estate • Follow basic conventions • Break the rules for the sake of “art” Tech Breifing: Departmental Web Pages

  31. Accessibility • Provide text equivalents for non-text elements • Don’t rely solely on color to indicate links • Don’t make the screen flicker in any way • Use plain, understandable English • Don’t rely completely on high tech solutions • As a last resort, make an alternative text page Tech Breifing: Departmental Web Pages

  32. Approvals/Proofing • Design Critiques • Other Web designers • Content Critiques • Subject Matter Experts • Any represented parties (i.e., Department Heads, CEOs, etc.) • Proof-reading for grammar, links, etc. • Fresh eyes can usually see things that you’ll miss Tech Breifing: Departmental Web Pages

  33. Maintenance • Set a maintenance schedule for your site • Considerations include: • who will do the maintenance • what to do if emergency problems come up • where backup copies of your Web pages are kept Tech Breifing: Departmental Web Pages

  34. Improvement • Schedule a quarterly review of the site • Considerations: • update of content • update of design • update of use of cutting edge tools Tech Breifing: Departmental Web Pages

  35. Web Style Guide (http://www.webstyleguide.com/) Jacob Nielsen’s Use It(http://www.useit.com/) HTML Writers Guild(http://www.hwg.org/) Cool HomePages.com(http://www.coolhomepages.com/) Vincent Flander’s Web Pages That Suck(http://www.webpagesthatsuck.com/) Sun Microsystems Web Style Guide (http://www.sun.com/980713/webwriting/) Web Accessibility Initiative (http://www.w3.org/WAI/) Bobby 3.2 Accessibility Validator(http://www.cast.org/bobby/) HTML Validator(http://validator.w3.org/) Some Resources Tech Breifing: Departmental Web Pages

  36. ITSS Technology Training ServicesCourses and Guide Web Skills Training Guide:http://techtraining.stanford.edu/webgrid.html Computer Based Training (MySmartForce):http://cbt.stanford.edu http://techtraining.stanford.edu/courses.html#internet • Essential Web Skills for the Web-Based Administrative Applications (ITS 211) • Introduction to HTML: Creating Web Pages (Mac - ITS 221; Windows - ITS 222) • Intermediate HTML: Enhancing Web Pages (Mac & Windows - ITS 224) • Tables in HTML (ITS 226) • Cascading Style Sheets (ITS 230) • Forms and Formage in HTML (ITS 228) • Dreamweaver Lite (ITS 240) • Mastering Macromedia Dreamweaver, Levels 1 & 2 (ITS 241) • Mastering Macromedia Dreamweaver, Level 3 (ITS 243) • Photos, Graphics, and the Web: The Basics (ITS 250) Tech Breifing: Departmental Web Pages

More Related