Maintaining Departmental Web Pages

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

Chapter 1: Introduction. Contents Whats New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your.
Chapter 3 – Web Design Tables & Page Layout
Learning the Basics – Lesson 1
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Creating and Editing a Web Page Using Inline Styles
Chapter 8 Creating Style Sheets.
Web I Introduction to Dreamweaver and Web Publishing.
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
Internet Publishing / Dreamweaver Luke E. Reese CARRS
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Chapter 14 Introduction to HTML
Designing for the Web. What Makes Good Design Content is important but content alone will not make your site work. Good design is: –understandable –interesting.
Designing a Classroom Web Site Using NVU Beginning Level.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Web Technologies Website Development Trade & Industrial Education
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Website Development with Dreamweaver
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Internet Publishing Luke E. Reese ANR Education and Communication Systems
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
MIS 201 Web Design 1. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
Tutorial 3 Adding and Formatting Text with CSS Styles.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS
Creating and Editing a Web Page
Web Site Development - Process of planning and creating a website.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Creating and Editing a Web Page Using Inline Styles
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Creating Web Pages with Links, Images, and Embedded Style Sheets
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Introduction. Internet Worldwide collection of computers and computer networks that link people to businesses, governmental agencies, educational institutions,
© Ms. Masihi.  A Web page contains text and images that convey specific information to viewers.  To create a new web page, open Dreamweaver and select.
Thinking Web > CONTENT DEVELOPMENT
Creating a Presentation
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Learning the Basics – Lesson 1
Chapter A - Getting Started with Dreamweaver MX 2004
USING DREAMWEAVER Contents: Assigning a Root Folder
CONTENT MANAGEMENT SYSTEM CSIR-NISCAIR, New Delhi
MIS 201 Web Design.
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Internet Publishing Luke E. Reese
Introduction to the ISB Intranet
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Project 4 Creating an Image Map.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Welcome To Microsoft Word 2016
Presentation transcript:

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 markb@stanford.edu 5-1717

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

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

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

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

Tech Breifing: Departmental Web Pages Demo: Dreamweaver December 29, 2018 Tech Breifing: Departmental Web Pages

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tech Breifing: Departmental Web Pages Some Resources 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/) December 29, 2018 Tech Breifing: Departmental Web Pages

ITSS Technology Training Services Courses 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) December 29, 2018 Tech Breifing: Departmental Web Pages