Hyperlinks and Site Organization Putting it together...

Slides:

Advertisements

Similar presentations

UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.

Advertisements

XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.

Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.

. Website and file organization. How websites work.

New Perspectives on Creating Web Pages with HTML

HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.

XP Adding Hypertext Links to a Web Page. XP Objectives Create hypertext links between elements within a Web page Create hypertext links between Web pages.

HTML Your Friend or Foe? and a little bit from Lazar.

Lecture Navigation. What is Navigation? Hypertext – creates links Process of linking from a page to: –Another page in the same website –Another page on.

CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.

Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct.

THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.

Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.

Web Development 311 Fall : Fall Why web pages? Most companies have intranets, extranets, and web sites Content can be changed quickly and.

1 Introduction to Web Development. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels.

Website Tutorial. Administration  Log on by clicking Login on the footer of almost any page  Your Username is.

Getting Started with Dreamweaver

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Name Teacher: Group: 1 Unit 2 – Webpage Creation.

Review: How do you change the border color of an image?

Web Technologies Website Development Trade & Industrial Education

14 Publishing a Web Site Section 14.1 Identify the technical needs of a Web server Evaluate Web hosts Compare and contrast internal and external Web hosting.

Understanding the Web Site Development Process. Understanding the Web Site Development You need a good project plan Larger projects need a project manager.

Exploring Web Page Design. What is a Web Page?  A web page is a multimedia file which can be stored on a web server.  It can include text, graphics,

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.

Web Design (5) Navigation (1). Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder.

CHAPTER 3 USING HYPERLINKS TO CONNECT CONTENT. LEARNING OBJECTIVES How to use the and anchor tag pair to create a text-based hyperlink. How to use the.

XHTML Louise Soe updated September 2009.

Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.

Developing a Web Site. Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating.

Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.

Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.

XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 2 1 New Perspectives on Creating Web Pages With HTML Tutorial 2: Adding Hypertext Links to.

Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.

CIS 250 Advanced Computer Applications Internet/WWW Review.

Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.

XHTML Hyperlinks. Creating Links to Other Web Pages A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different.

Tutorial 2 Developing a Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.

CPSC 203 Introduction to Computers Lab 66 By Jie Gao.

XP 1 HTML Tutorial 2: Developing a Basic Web Site.

High Points CSCI 1710 Fall The Internet Packet switching Arpanet Cold War.

Evaluating & Maintaining a Site Domain 6. Conduct Technical Tests Dreamweaver provides many tools to assist in finalizing and testing your website for.

Tutorial 3 Adding and Formatting Text with CSS Styles.

Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

When you are linking your Web site together, use relative URLs. A relative URL gives the path to the file to which you wish to link, relative to the page.

CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features.

To be completed Your proposal  Your House style  Your site plan  Page plans (a draft layout for each of your five pages)  A design mock-up -  All.

Developing a Basic Web Site HTML Tutorial 2. Objectives Define links and how to use them. Create element ids to mark specific locations within a document.

Hyperlink ● Anchor tag and its attributes ● Four Types of URL ─ ─ Absolute addressing ─ Relative addressing ─ Intrapage ● Attributes -- link, vlink,

XP 1 Charles Edeki AIU Live Chat for Unit 2 ITC0381.

introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.

Introduction. Internet Worldwide collection of computers and computer networks that link people to businesses, governmental agencies, educational institutions,

Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.

Getting Started with Dreamweaver

Designing a site (2/4) Conceptual Design – 1h

High Points CSCI 1710 Fall 2017.

Unit 2 – Webpage Creation

HTML Introduction Lecture 8.

A01 DESIGN To be completed Your proposal  Your House style 

Getting Started with Dreamweaver

Hyperlinks, Images and Tables

Lesson 4: Hyperlinks.

Enhancing Your Web Site—Adding Links Web Page

Planning and Storyboarding a Web Site

Designing a Web Site.

High Points CSCI 1210.

Presentation transcript:

Hyperlinks and Site Organization Putting it together...

Tutorial Files  Some available from the Course Site  CT materials are linked to the resource page 

Hyperlinks  Internal  External  Both are a way to organize and take advantage of the power of hypertext...  They can be used for good... or bad...

Internal  Anchors  Must set an anchor on a page Employment  Can also use an image

Internal (cont.)  Must then add a hyperlink LINK TAG Employment  Anchor Hypertext REFerence  Case sensitive  very important

Internal (cont.)  Can also use image  BORDER PROPERTY

Internal (cont.)  Sizing Properties/Attributes

External  Another Web page in your site Other Interests  A Web page outside of your site Webmonkey

External (cont.)  An link Doc Rea  The TEXT of the link (in all cases) has no relation to the actual hyperlink.

Internal/External  Can also link to internal areas of an external document My Hobbies

More Hyperlinks  FTP WMU FTP Site  Usenet WMU News

Lynx  Let’s check it out  Open bronco.wmich.edu  Look at your page  Look at news

Web Site Structures  Use Storyboarding to organize your site (flowchart, diagram)  Linear (2.12)  Augmented Linear (2.13)  Hierarchical (2.13)  Mixed Structures (2.14)  Need some structure...

Pathnames  Textbook can be a little confusing...  Absolute Entire address  In text discusses (2.25)  Most browsers will refer to a file on a system drive as such  D:\380\labs\lab2.htm

Pathnames (cont.)  The A:\ dilemma  Uploading files or images working offline and then not working on Website   Or wherever you have your files  What happened?

Pathnames (cont.)  Relative Hyperlink is relative to location of both documents In BIS380 directory Lab 2 In labs directory Lab 2

Pathnames (cont.)  The../ of a relative is important.  Each../ is up one directory

Take a Break…

User Centered Design Who's Gonna Use this Thing?

User-Centered Web Development  A development or design process that meets users’ needs  Web Usability

Technology Acceptance Model (TAM)  Ease of Use  Minimum download time  Minimal frustration  Usefulness of Technology  Complete tasks  Website becomes a tool  Predictability means ease of use  Flourish is OK, but keep to a minimum

Lazar User-Centered Web Development Lifecycle  Define the mission of the Website and the user population  Collect the user requirements for the Website  Create the conceptual design of the Website

Lazar User-Centered Web Development Lifecycle (cont.)  Create the physical design of the Website  Perform usability testing on the Website  Implement and market the Website  Evaluate and improve the Website

Challenges to Web Development  Browser Type  Browser Version  Screen Size  Operating System  Download Time  Infrequency of use  Users don’t use your site all the time  Some exceptions, of course

Clients  Client versus User  Not the same people  Make sure the client has a clear purpose  Make sure the client is committed  Keep client frequently updated  Learn the client's interaction style and use it to your advantage

Clients versus Users  Melding Mission with Need  Determining User base  Negotiating soltions

Mission of the Website  Type of Website  Informational  E-Commerce  Entertainment  Target Population  local, international  audience-split?  WMU site WMU site