Kasutusjuhend Tühista

Linking

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to set up navigation between your web pages. Link files and documents, update, change, and test links in Dreamweaver.

Before creating a link, make sure you understand how absolute, document-relative, and site root–relative paths work. You can create several types of links in a document:

  • A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
  • A named anchor link, which jumps to a specific location in a document.

  • An e‑mail link, which creates a new blank e‑mail message with the recipient’s address already filled in.

  • Null and script links, which you use to attach behaviors to an object or to create a link that executes JavaScript code.

You can use the Property inspector and the Point-To-File icon to create links from an image, an object, or text to another document or file.

Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell Dreamweaver to create new links using site root–relative paths.

Always save a new file before creating a document-relative path; a document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path to a relative path.

You can attach a behavior to any link in a document. Consider using the following behaviors when you insert linked elements into documents:

Set Text Of Status Bar

Determines the text of a message and displays it in the status bar at the lower left of the browser window. For example, you can use this behavior to describe the destination of a link in the status bar instead of showing the URL associated with it.

Open Browser Window

Opens a URL in a new window. You can specify the properties of the new window, including its name, size, and attributes (whether it is resizable, has a menu bar, and so on).

Jump Menu

Edits a jump menu. You can change the menu list, specify a different linked file, or change the browser location in which the linked document opens.

You can use the Property inspector’s folder icon or Link box to create links from an image, an object, or text to another document or file.

  1. Select text or an image in the Document window’s Design view.
  2. Open the Property inspector (Window > Properties) and do one of the following:
    • Click the folder icon  to the right of the Link box to browse to and select a file.

      The path to the linked document appears in the URL box. Use the Relative To pop‑up menu in the Select File dialog box to make the path document-relative or root-relative, and then click OK. The type of path you select applies only to the current link. (You can change the default setting of the Relative To box for the site.)

    • Type the path and filename of the document in the Link box.

      To link to a document in your site, enter a document-relative or site root–relative path. To link to a document outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for a file that hasn’t been created yet.

  3. From the Target drop-down list, select a location in which to open the document:

    • _blank loads the linked document in a new, unnamed browser window.
    • _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
    • _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
    • _top loads the linked document in the full browser window, thereby removing all frames.
    • _new loads the linked document in a new window.
  1. Select text or an image in the Document window’s Design view.
  2. Create a link in one of two ways:
    • Drag the Point-To-File icon  (target icon) at the right of the Link box in the Property inspector and point to a visible anchor in the current document, a visible anchor in another open document, an element that has a unique ID assigned to it, or a document in the Files panel.

    • Shift-drag from the selection and point to a visible anchor in the current document, a visible anchor in another open document, an element that has a unique ID assigned to it, or a document in the Files panel.

    You can link to another open document only if your documents are not maximized in the Document window. To tile documents, select Window > Arrange > Cascade or Window > Arrange > Tile. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

The Hyperlink command lets you create a text link to an image, an object, or to another document or file.

  1. Place the insertion point in the document where you want the link to appear.
  2. Do one of the following to display the Hyperlink dialog box:

    • Select Insert > Hyperlink.

    • In the Common category of the Insert panel, click the Hyperlink button.

  3. In the Text field, enter the text of the link.
    From the Link drop-down menu, select the name of the file to link to. You can also click the folder icon to browse to the file you want to link to.

  4. In the Target pop‑up menu, select the window in which the file should open or type its name.

    The names of all the frames you’ve named in the current document appear in the pop‑up list. If you specify a frame that doesn’t exist, the linked page opens in a new window that has the name you specified. You can also select from the following reserved target names:

    • _blank loads the linked file into a new, unnamed browser window.
    • _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
    • _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
    • _top loads the linked file into the full browser window, thereby removing all frames.
    • _new loads the linked document in a new window.
  5. In the Tab Index box, enter a number for the tab order.
  6. In the Title box, enter a title for the link.
  7. In the Access Key box, enter a keyboard equivalent (one letter) to select the link in the browser.
  8. Click OK.

You can insert a link to a Microsoft Word or Excel document in an existing page.

  1. In Design view, open the page where you want the link to appear.

  2. Drag the file from its current location to your Dreamweaver page, positioning the link wherever you want. The Insert document dialog box appears.

  3. Select Create A Link, and then click OK.

    If the document you are linking to is located outside of your site’s root folder, Dreamweaver prompts you to copy the document to the site root.

    By copying the document to the site’s root folder, you ensure that the document will be available when you publish the website.

  4. When you upload your page to your web server, make sure to upload the Word or Excel file, too.Your page now contains a link to the Word or Excel document. The link text is the name of the linked file; you can change the link text in the Document window if you wish.

By default, Dreamweaver creates links to other pages in your site using document-relative paths. To use site root–relative path instead, you must first define a local folder in Dreamweaver by choosing a local root folder to serve as the equivalent of the document root on a server. Dreamweaver uses this folder to determine the site root–relative paths to files.

  1. Select Site > Manage Sites.
  2. In the Manage Sites dialog box, double-click your site in the list.
  3. In the Site Setup dialog box, expand Advanced Settings and select the Local Info category.
  4. Set the relative path of new links by selecting the Document or Site Root option.

    Changing this setting will not convert the path of existing links after you click OK. The setting applies only to new links you create with Dreamweaver.

  5. Click Save.

    The new path setting applies only to the current site.

You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.

Creating a link to a named anchor is a two-step process. First, you create a named anchor; then you create a link to the named anchor.

Create an anchor

  1. In the Document window select and highlight the item that you want to set as an anchor.

  2. Open the Property Inspector and check if the selected item has an ID. If the ID field is blank, add an ID. For example, Anchor.

    Create an anchor
    Create an anchor

    After you add the ID, notice the change in the code. id="<ID name>" is inserted in the code at your selection.

    Anchor ID in code
    Add anchors for linking

  1. In the Document window’s Design view, select text or an image to create a link from.
  2. In the Link box of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link to an anchor named “top” in the current document, type #top. To link to an anchor named “top” in a different document in the same folder, type filename.html#top.
    Märkus.

    Anchor names are case-sensitive.

  1. Open the document containing the named anchor.
    Märkus.

    If you don’t see the anchor, from the Design view select View > Design View Options > Visual Aids > Invisible Elements, to make anchors visible.

  2. In the Document window’s Design view, select text or an image you want to link from. (If this is another open document, you must switch to it.)
  3. Do one of the following:
    • Click the Point-To-File icon  (target icon) to the right of the Link box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.

    • Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.

An e‑mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e‑mail message window, the To box is automatically updated with the address specified in the e‑mail link.

  1. In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.
  2. Do one of the following to insert the link:
    • Select Insert > Email Link.

    • In the Common category of the Insert panel, click the Email Link button.

  3. In the Text box, type or edit the body of the e-mail.
  4. In the Email box, type the e-mail address, then click OK.
  1. Select text or an image in the Document window’s Design view.
  2. In the Link box of the Property inspector, type mailto: followed by an e‑mail address.

    Do not type any spaces between the colon and the e‑mail address.

Auto-populate the subject line of an e-mail

  1. Create an e-mail link using the Property inspector as outlined above.
  2. In the Link box of the Property inspector, add ?subject= after the email, and type a subject after the equals sign. Do not type any spaces between the question mark and the end of the e-mail address.

    The complete entry would look as follows:

    mailto:someone@yoursite.com?subject=Mail from Our Site

A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. For instance, you can attach a behavior to a null link so that it swaps an image or displays an absolutely-positioned element (AP element) when the pointer moves over the link.

Script links execute JavaScript code or call a JavaScript function and are useful for giving visitors additional information about an item without leaving the current web page. Script links can also be used to perform calculations, validate forms, or do other processing tasks when a visitor clicks a specific item.

  1. Select text, an image, or an object in the Document window’s Design view.
  2. In the Property inspector, type javascript:; (the word javascript, followed by a colon, followed by a semicolon) in the Link box.
  1. Select text, an image, or an object in the Document window’s Design view.
  2. In the Link box of the Property inspector, type javascript: followed by some JavaScript code or a function call. (Do not type a space between the colon and the code or call.)

Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server.

To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the links in your local folder. The cache file is updated invisibly as you add, change, or delete links on your local site.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. In the Preferences dialog box, select General from the category list on the left.
  3. In the Document Options section of the General preferences, select an option from the Update Links When Moving Files pop‑up menu.

    Always

    Automatically updates all links to and from a selected document whenever you move or rename it.

    Never

    Does not automatically update all links to and from a selected document when you move or rename it.

    Prompt

    Displays a dialog box that lists all the files affected by the change. Click Update to update the links in these files, or click Don’t Update to leave the files unchanged.

  4. Click OK.

Create a cache file for your site

  1. Select Site > Manage Sites.
  2. Select a site, and then click Edit.
  3. In the Site Setup dialog box, expand Advanced Settings and select the Local Info category.
  4. In the Local Info category, select Enable Cache.

    The first time you change or delete links to files in your local folder after starting Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, Dreamweaver loads the cache and updates all the links to the file you just changed. If you click No, the change is noted in the cache, but Dreamweaver does not load the cache or update links.

    It may take a few minutes to load the cache on larger sites because Dreamweaver must determine whether the cache is up to date by comparing the timestamps of the files on the local site against the timestamps recorded in the cache. If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.

Re-create the cache

  1. In the Files panel, select Site > Advanced > Recreate Site Cache.

In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually change all links (including e‑mail, FTP, null, and script links) so that they point somewhere else.

This option is most useful when you want to delete a file that other files link to, but you can use it for other purposes. For example, suppose you link the words “this month’s movies” to /movies/july.html throughout your site. On August 1 you would change those links so that they point to /movies/august.html.

  1. Select a file in the Local view of the Files panel.
    Märkus.

    If you are changing an e‑mail, FTP, null, or script link, you do not need to select a file.

  2. Select Site > Site Options > Change Link Sitewide.

  3. Complete these options in Change Link Sitewide dialog box:

    Change All Links To

    Click the folder icon  to browse to and select the target file from which to unlink. If you are changing an e-mail, FTP, null, or script link, type the full text of the link you are changing.

    Into Links to

    Click the folder icon  to browse to and select the new file to link to. If you are changing an e-mail, FTP, null, or script link, type the full text of the replacement link.

  4. Click OK.

    Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path format already used in the document (for example, if the old path was document-relative, the new path is also document-relative).

    After you change a link sitewide, the selected file becomes an orphan (that is, no files on your local disk point to it). You can safely delete it without breaking any links in your local Dreamweaver site.

    Märkus.

    Because these changes occur locally, you must manually delete the corresponding orphan file in the remote folder and put or check in any files in which links were changed; otherwise, visitors to your site won’t see the changes.

Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the Document window.

  1. Do one of the following:
    • Right-click on the link and select Open Linked Page.

    • Press Control (Windows) or Command (Macintosh) and double-click the link.

    Märkus.

    The linked document must reside on your local disk.

 Adobe

Saage abi kiiremini ja hõlpsamalt

Uus kasutaja?

Adobe MAX 2024

Adobe MAX
Loovuse konverents

14.–16. oktoobril Miami Beachis ja veebis

Adobe MAX

Loovuse konverents

14.–16. oktoobril Miami Beachis ja veebis

Adobe MAX 2024

Adobe MAX
Loovuse konverents

14.–16. oktoobril Miami Beachis ja veebis

Adobe MAX

Loovuse konverents

14.–16. oktoobril Miami Beachis ja veebis