Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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