1. Working with Links and Navigation
Chapter 5
Working with Links and Navigation

2. Chapter 5 Lessons Introduction Create external and internal Links
Create internal Links to named anchors
Create, modify, and copy a Spry menu bar
Create an image map
Manage website Links
Incorporate Web 2.0 technology

3. Web 2.0 and Social Networking
Introduction
Web 2.0 and Social Networking
Social networking refers to the grouping of individual web users who connect and interact with other users in online communities
Online communities, or virtual communities, are social websites you can join

4. Understanding Internal and External Links
Introduction
Understanding Internal and External Links
Web Pages contain two types of Links:
Internal – Links to web pages in the same website
External – Links to web pages on other websites or to addresses
Links have two important parts that work together:
The element that viewers see and click on a web page (text, image, or a button)
The path, or the name and location of the web page or file that will open when the element is clicked

5. Creating External Links
Lesson 1: Create External and Internal Links
Creating External Links
Placed on websites so that viewers can get more information
To create an external link:
Select the text or object that you want to serve as a link
Type the absolute path to the destination web page in the Link text box in the Property inspector
Absolute path – external link that includes the complete address for the destination page
Protocol
Website URL
Filename

6. Creating an External Link
Lesson 1: Create External and Internal Links
Creating an External Link
HTML button
Text for link
URL for link

7. Creating Internal Links
Lesson 1: Create External and Internal Links
Creating Internal Links
Allows users to navigate easily from page to page within a site
To Create an Internal Link:
Select the text element or object that you want to make a link
Use the Browse for File or Point to file icon next to the Link text box in the HTML Property inspector to specify the relative path to the destination page
Relative Path – type of path use to reference web pages and files within the same website
src=“assets/su_banner.gif”
Folder Name
Filename

8. Creating Internal Link on Activities Page
Lesson 1: Create External and Internal Links
Creating Internal Link on Activities Page
Text to be used for link
Relative link to fishing.html
Browse for File icon
Point to File icon

9. Absolute and Relative Paths
Lesson 1: Create External and Internal Links
Absolute and Relative Paths

10. Inserting Named Anchors
Lesson 2: Create Internal Links to Named Anchors
Inserting Named Anchors
Named anchor: specific location on a web page that has a descriptive name
Acts as a target for internal Links
Allows viewer to navigate to specific areas of a web page without scrolling
Target: location on the web page that a browser displays when internal link is clicked

11. Inserting Named Anchors – cont.
Lesson 2: Create Internal Links to Named Anchors
Inserting Named Anchors – cont.
Creating Internal Link to Named Anchor:
Insert Named Anchor from Insert Panel to identify Target
Select the text or image that you want to use to make a link
Drag the Point to File icon from the Property inspector to the named anchor icon on the page or
Type # followed by the named anchor name (such as “#top”) in the Link text box in the Property inspector

12. Using the Point to File Icon
Lesson 2: Create Internal Links to Named Anchors
Using the Point to File Icon
Insert Named Anchor to Page
Select Text to make link
Type # followed by the Anchor Name
Drag Point to File icon to Named Anchor on Page

13. Team Work
What are steps of insert external link? What are the main types of path

14. Creating a Spry Menu Bar

15. Creating a Spry Menu Bar
Lesson 3: Create, Modify, and Copy a Spry Menu Bar
Creating a Spry Menu Bar
A Spry menu bar is one of the pre-set widgets available in Dreamweaver that creates a dynamic, user-friendly menu bar that is easy to insert and customize
Widget: is a piece of code that allows a user to interact with a program, such as clicking a menu item to open a page (Examples: interactive buttons, pop-up windows, and progress indicators)
Spry, or Spry framework, is open source code developed by Adobe Systems to help designers quickly incorporate dynamic content on their web pages

16. Creating a Spry Menu Bar – cont.
Lesson 3: Create, Modify, and Copy a Spry Menu Bar
Creating a Spry Menu Bar – cont.
You use the Spry Menu Bar dialog box to specify the appearance of the menu bar and each link, called an item
Horizontal layout option

17. Creating a Spry Menu Bar – cont.
Lesson 3: Create, Modify, and Copy a Spry Menu Bar
Creating a Spry Menu Bar – cont.
When you first insert a Spry menu bar, Dreamweaver automatically assigns it four menu items, some of which have submenu items
If you want your menu bar to display a different number of menu items and submenu items, you can add new ones and delete the ones you do not need
Menu Bar Title
Add/Delete Items
Move Item Up/Down
Item Name
Menu Bar Items
Submenu Bar Items Level 1 & 2
Item Link

18. Creating a Spry Menu Bar - cont
Lesson 3: Create, Modify, and Copy a Spry Menu Bar
Creating a Spry Menu Bar - cont
You can add special effects for menu bar items by changing the characteristics for each item’s state
A state is the condition of the item relative to the mouse pointer
Create a rollover effect for each menu item by using different background and text colors for each state (over the item or not)
Dreamweaver automatically adds JavaScript code and CSS styles to the page to make the interaction work with the menu bar items

19. Lesson 3: Create, Modify, and Copy a Spry Menu Bar
Editing a CSS Menu Bar
CSS Rule
Changes
ul.MenuBarHorizontal
Changes the Font-family and Font-size for the menu bar
ul.MenuBarHorizontal li
Changes the Box Width, Box Height, and Text-align properties of each menu item
ul.MenuBarHorizontal a
Changes the Type color and Background color for all menu items when the mouse is not positioned over them in the browser
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
Changes the Type color and Background color for all menu itemes when the mouse is positioned over them in the browser
ul.MenuBarHorizontal ul li
Changes the width and height of the submenu items to make them match the dimensions of the menu items
ul.menuBarHorizontal ul
Changes the Box width to prevent a space between the main menu items and the first submenu item

20. Copying and Modifying a Menu Bar
Lesson 3: Create, Modify, and Copy a Spry Menu Bar
Copying and Modifying a Menu Bar
After you create a menu bar, you can save time by copying and pasting it to the other main pages in your site
Menu bar should be placed in the same position on each page
Ensures:
Menu bar will look same on every page
Easier for users to navigate to all the pages in the site
Prevent appearance of Menu bar “jumping” on page as it changes position

21. Create an Image Map Lesson 4: Create an Image Map
Another way to create navigation Links for web pages is to create an image map
Image map: graphic that has one or more hot spots placed on top of it
Hotspot: area on a graphic that, when clicked, Links to different locations on the page or to another web page or website

22. Create an Image Map – cont.
Lesson 4: Create an Image Map
Create an Image Map – cont.
To improve accessibility of website with Image Map:
Include alternate text for each hotspot
Draw the hotspot boundaries a little larger than they need to be to cover the area you want to set as a link
Hotspot tools:
Rectangle Hotspot Tool
Circle Hotspot Tool
Polygon Hotspot Tools

23. Hotspot Properties Lesson 4: Create an Image Map Image map name
Alternate text for the hotspot
Link to index page
Polygon Hotspot Tool
Target for hotspot
Rectangle
Hotspot Tool
Circle Hotspot Tool

24. Check Links Lesson 5: Manage Website Links How to check:
Site (Application Bar)  Check Links Sitewide
Check Links Sitewide feature can be used to check:
Internal Links
External Links
Named anchors
Graphic files
Orphaned files – no longer used in the site
View results in Link Checker panel

25. What are the two method for navigation? What is hots spots?
Team Work
What are the two method for navigation? What is hots spots?

26. Web 2.0 Lesson 6: Incorporate Web 2.0 Technology
Web 2.0 describes the evolution of web applications that facilitate and promote information sharing among Internet users
Web 2.0 applications do not simply display information for users to read passively, they allow users to actively contribute to the content
Web developers must decided what Web 2.0 technologies they will integrate to fully engage their users

27. Incorporating Web 2.0 Technologies
Lesson 6: Incorporate Web 2.0 Technology
Incorporating Web 2.0 Technologies
Global Positioning System (GPS) are devices used to track your position through a global satellite navigation system, and are popular to use for driving directions, hiking, and map making
Really Simple Syndication (RSS) are feeds used to distribute news stories, information about upcoming events, and announcements
Programming on Demand (podcasts) allow users to download and play digital broadcast files

28. Incorporating Web 2.0 Technologies
Lesson 6: Incorporate Web 2.0 Technology
Incorporating Web 2.0 Technologies
Social Networking refers to any web-based service that facilitates social interaction among users
Facebook
Pinterest
Instagram
Wiki refers to a site where a user can use simple editing tools to contribute and edit the page content in a site
Wikipedia
Web Logs (Blogs) allow the Website owners or users to post commentaries and opinions on various topics
Twitter
Tumblr

29. Incorporating Web 2.0 Technologies
Lesson 6: Incorporate Web 2.0 Technology
Incorporating Web 2.0 Technologies
Video sharing applications allow users to communicate live with other people through video conferencing or upload or share videos using high-speed Internet connection and a web camera
Skype
Google Hangouts
Youtube

30. Write examples of Incorporating Web 2.0 Technologies
Team Work
Write examples of Incorporating Web 2.0 Technologies