Transcript Working with Links and Navigation

Working with Links
and Navigation
Chapter 5 Lessons
Introduction
1. Create external and internal Links
2. Create internal Links to named anchors
3. Create, modify, and copy a Spry menu bar
4. Create an image map
5. Manage website Links
6. Incorporate Web 2.0 technology
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
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 e-mail 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
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:
1. Select the text or object that you want to serve as a link
2. 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
http://northark.edu/computer_services.html
Lesson 1: Create External and Internal Links
Creating an External Link
HTML button
Text for link
URL for link
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:
1. Select the text element or object that you want to make a link
2. 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
Folder
Name
Filename
src=“assets/su_banner.gif”
Lesson 1: Create External and Internal Links
Creating Internal Link on Activities Page
Text to be used
for link
Relative link to
fishing.html
Point to File icon
Browse for File icon
Lesson 1: Create External and Internal Links
Absolute and Relative Paths
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
Lesson 2: Create Internal Links to Named Anchors
Inserting Named Anchors – cont.
• Creating Internal Link to Named Anchor:
1.
2.
3.
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
3.
Type # followed by the named anchor name (such as “#top”)
in the Link text box in the Property inspector
Lesson 2: Create Internal Links to Named Anchors
Using the Point to File Icon
1. Insert Named
Anchor to Page
2. Select Text to
make link
3. Type # followed by the Anchor Name
3. Drag Point to File icon to Named Anchor on Page
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
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
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
Menu Bar Items
Add/Delete Items
Move Item Up/Down
Submenu Bar Items Level 1 & 2
Item Name
Item Link
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
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
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
Lesson 4: Create an Image Map
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
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
Lesson 4: Create an Image Map
Hotspot Properties
Image map name
Link to index page
Rectangle
Hotspot Tool
Alternate text for the hotspot
Polygon Hotspot Tool
Circle Hotspot Tool
Target for hotspot
Lesson 5: Manage Website Links
Check 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
Lesson 6: Incorporate Web 2.0 Technology
Web 2.0
• 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
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
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
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 highspeed Internet connection and a web camera
– Skype
– Google Hangouts
– Youtube