How to Code Navigation Next Button in Dreamweaver

Adobe Dreamweaver simplifies a lot of the work in developing a Web page, including the placement of images and adding code to that image. When using buttons it is a good idea to place them in their own folder on your website for easy access when you add additional pages in the future. To ensure your buttons load correctly before uploading pages to your Web server, mimic the file structure of your website on your hard drive, including the folder names for your buttons and other images within a "root" folder where your "index.html" page is located.

Instructions

    • 1

      Open the Web page in Dreamweaver. Click the "View" menu and select "Code and Design." The HTML code is shown in the top pane and a visual representation of the page is shown in the bottom pane of the Dreamweaver window.

    • 2

      Click the "Common" tab in the Insert Panel, then click the "Image" icon. A navigation window opens.

    • 3

      Select the image you are using as a navigation button. Click "Choose." In the following window enter the alternate text and image description if desired.

    • 4

      Click on the image in the "Design" pane of the window.

    • 5

      Click "Modify" menu and click "Selection Properties" if you are using Dreamweaver CS4. For Dreamweaver CS5 click the "Window" menu and select "Properties."

    • 6

      Type Web address for the page the button will link to in the "Link" text field. This should look like "http://www.example.com/page-2.html" as an example.

    • 7

      Click the "Target" menu and select "_blank" to open the new page in a new tab or window. Although you can select "_parent" to open the page in the same tab or window, this is not necessary as it is the default if no "target" setting is specified.

    • 8

      Save the page by selecting "Save" from the "File" menu. Then click the "File" menu again and select "Preview in Browser." Click on your preferred browser to preview the appearance of the page. Click the "Next" button on your page to make sure the link works as expected.

Related Searches:

References

Comments

Related Ads

Featured