Working with Links and Navigation Chapter 5 Working with Links and Navigation

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

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

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 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

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 http://northark.edu/computer_services.html Protocol Website URL Filename

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

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

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

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

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

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

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

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

Creating a Spry Menu Bar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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