Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 Developing a Web Site

2 Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information New Perspectives on HTML and XHTML, Comprehensive2

3 Linear Structures In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain Linear structure works best for Web pages with a clearly defined order In an augmented linear structure, each page contains an additional link back to an opening page New Perspectives on HTML and XHTML, Comprehensive3

4 Linear Structures New Perspectives on HTML and XHTML, Comprehensive4 A linear structure An augmented linear structure

5 Hierarchical Structures In the hierarchical structure, the pages are linked going from the home page down to more specific pages Users can easily move from general to specific and back again Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play New Perspectives on HTML and XHTML, Comprehensive5

6 Hierarchical Structures New Perspectives on HTML and XHTML, Comprehensive6

7 Mixed Structures As Web sites become larger and more complex, you often need to use a combination of several different structures The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion A site index is a page containing an outline of the entire site and its contents New Perspectives on HTML and XHTML, Comprehensive7

8 Mixed Structures New Perspectives on HTML and XHTML, Comprehensive8

9 Web Site with No Coherent Structure New Perspectives on HTML and XHTML, Comprehensive9

10 Protected Structures Sections of most commercial Web sites are off- limits except to subscribers and registered customers New Perspectives on HTML and XHTML, Comprehensive10

11 Creating a Hypertext Link New Perspectives on HTML and XHTML, Comprehensive11

12 Creating a Hypertext Link To link to a page, you specify the name of the file using the href attribute of the tag Filenames are case sensitive on some operating systems, including the UNIX and Macintosh, but not on others The current standard is to use lowercase filenames for all files on a Website and to avoid special characters such as blanks and slashes You should also keep filenames short to avoid typing errors New Perspectives on HTML and XHTML, Comprehensive12

13 Specifying a Folder Path To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path An absolute path specifies a file’s precise location within a computer’s entire folder structure A relative path specifies a file’s location in relation to the location of the current document If the file is in the same location as the current document, you do not have to specify the folder name If the file is in a subfolder of the current document, you have to include the name of the subfolder New Perspectives on HTML and XHTML, Comprehensive13

14 Specifying a Folder Path New Perspectives on HTML and XHTML, Comprehensive14

15 Specifying a Folder Path If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward slash, and then provide the name of the file To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder You should almost always use relative paths in your links New Perspectives on HTML and XHTML, Comprehensive15

16 Specifying a Folder Path New Perspectives on HTML and XHTML, Comprehensive16

17 Introducing URLs To create a link to a resource on the Internet, you need to know its URL A Uniform Resource Locator (URL) specifies the precise location of a resource on the Internet A protocol is a set of rules defining how information is exchanged between two resources New Perspectives on HTML and XHTML, Comprehensive17

18 Introducing URLs Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP) The URLs for all Web pages must start with the scheme “http” Other Internet resources use different protocols and have different scheme names New Perspectives on HTML and XHTML, Comprehensive18

19 Internet Protocols New Perspectives on HTML and XHTML, Comprehensive19

20 Linking to a Web Site New Perspectives on HTML and XHTML, Comprehensive20 A sample URL for a Web page

21 Linking to FTP Servers FTP servers are another method of storing and sharing files on the Internet FTP servers transfer information using a communications protocol called File Transfer Protocol, or FTP for short An FTP server requires each user to enter a password and a username to access its files New Perspectives on HTML and XHTML, Comprehensive21

22 Linking to FTP Servers New Perspectives on HTML and XHTML, Comprehensive22

23 Linking to a Local File On occasion, you may see the URL for a file stored locally on your computer or local area network If you are accessing a file from your own computer, the server name might be omitted and replaced by an extra slash (/) The file scheme here does not imply any particular communication protocol; instead the browser retrieves the document using whatever method is the local standard for the type of file specified in the URL New Perspectives on HTML and XHTML, Comprehensive23

24 Linking to an E-Mail Address Many Web sites use e-mail to allow users to communicate with a site’s owner, sales representative, or technical support staff You can turn an e-mail address into a hypertext link, so that when a user clicks on an address, the browser starts an e-mail program and automatically inserts the address into the “To” field of the new outgoing message New Perspectives on HTML and XHTML, Comprehensive24

25 Linking to an E-Mail Address New Perspectives on HTML and XHTML, Comprehensive25

26 Working with Hypertext Attributes HTML provides several attributes to control the behavior and appearance of your links You can force a document to appear in a secondary window or tab by adding the target attribute to the tag tag New Perspectives on HTML and XHTML, Comprehensive26

27 Working with Hypertext Attributes New Perspectives on HTML and XHTML, Comprehensive27


Download ppt "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."

Similar presentations


Ads by Google