1. Maintaining Departmental Web Pages
Friday Tech Briefing Timely Info for Power Users and Stanford's Technology Support Community Mark Branom ITSS Technology Training Services
Maintaining Departmental Web Pages
Mark Branom, ITSS
5-1717

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

3. Tech Breifing: Departmental Web Pages
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
December 29, 2018
Tech Breifing: Departmental Web Pages

4. Tech Breifing: Departmental Web Pages
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>
December 29, 2018
Tech Breifing: Departmental Web Pages

5. Tech Breifing: Departmental Web Pages
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.
December 29, 2018
Tech Breifing: Departmental Web Pages

6. Tech Breifing: Departmental Web Pages
Demo: Dreamweaver
December 29, 2018
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.
December 29, 2018
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
December 29, 2018
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.
December 29, 2018
Tech Breifing: Departmental Web Pages

10. Tech Breifing: Departmental Web Pages
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.
December 29, 2018
Tech Breifing: Departmental Web Pages

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

12. Tech Breifing: Departmental Web Pages
More text formatting
Header 1:
Verdana font:
Red font:
December 29, 2018
Tech Breifing: Departmental Web Pages

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

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

15. Tech Breifing: Departmental Web Pages
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:
December 29, 2018
Tech Breifing: Departmental Web Pages

16. Tech Breifing: Departmental Web Pages
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.
December 29, 2018
Tech Breifing: Departmental Web Pages

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

18. Tech Breifing: Departmental Web Pages
Hyperlinking Images
If you want to make the image “clickable”, highlight the image, and add the Link in the properties palette:
December 29, 2018
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.
December 29, 2018
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
December 29, 2018
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.
December 29, 2018
Tech Breifing: Departmental Web Pages

22. Tech Breifing: Departmental Web Pages
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
December 29, 2018
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
December 29, 2018
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
December 29, 2018
Tech Breifing: Departmental Web Pages

25. Tech Breifing: Departmental Web Pages
Site Elements
Site maps
Contact page
Consider how your users will be using the page and how they might need to contact your organization
FAQ pages
December 29, 2018
Tech Breifing: Departmental Web Pages

26. Tech Breifing: Departmental Web Pages
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
December 29, 2018
Tech Breifing: Departmental Web Pages

27. Tech Breifing: Departmental Web Pages
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.
December 29, 2018
Tech Breifing: Departmental Web Pages

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

29. Tech Breifing: Departmental Web Pages
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”
December 29, 2018
Tech Breifing: Departmental Web Pages

30. Tech Breifing: Departmental Web Pages
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”
December 29, 2018
Tech Breifing: Departmental Web Pages

31. Tech Breifing: Departmental Web Pages
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
December 29, 2018
Tech Breifing: Departmental Web Pages

32. Tech Breifing: Departmental Web Pages
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
December 29, 2018
Tech Breifing: Departmental Web Pages

33. Tech Breifing: Departmental Web Pages
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
December 29, 2018
Tech Breifing: Departmental Web Pages

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

35. Tech Breifing: Departmental Web Pages
Some Resources
Web Style Guide (
Jacob Nielsen’s Use It (
HTML Writers Guild (
Cool HomePages.com (
Vincent Flander’s Web Pages That Suck (
Sun Microsystems Web Style Guide (
Web Accessibility Initiative (
Bobby 3.2 Accessibility Validator (
HTML Validator (
December 29, 2018
Tech Breifing: Departmental Web Pages

36. ITSS Technology Training Services Courses and Guide
Web Skills Training Guide:
Computer Based Training (MySmartForce):
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)
December 29, 2018
Tech Breifing: Departmental Web Pages