1 / 26

Chapter 5

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

andrew-mcdowell
Download Presentation

Chapter 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  5. 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 Filename Website URL

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

  7. 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” Filename Folder Name

  8. 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. Lesson 1: Create External and Internal Links Absolute and Relative Paths

  10. 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. 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. Lesson 2: Create Internal Links to Named Anchors Using the Point to File Icon • Insert Named Anchor to Page Select Text to make link Drag Point to File icon to Named Anchor on Page Type # followed by the Anchor Name

  13. Lesson 3: Create, Modify, and Copy a Spry Menu Bar Creating a Spry Menu Bar • A Spry menu baris 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

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

  15. 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 Item Name Move Item Up/Down Add/Delete Items Menu Bar Title Submenu Bar Items Level 1 & 2 Menu Bar Items Item Link

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

  17. Lesson 3: Create, Modify, and Copy a Spry Menu Bar Editing a CSS Menu Bar

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

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

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

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

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

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

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

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

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

More Related