Create and edit web pages 2 Learning Aim C

Introduction In this section we will cover how to put interactive components into your web pages and how to embed digital assets.

Interactive components - Hot spots A hot spot is an area, usually within an image, which contains a hyperlink to another page. A company website, for example, might have a map of all their offices across the country. Clicking on a particular office location on the map will open a page with details of that particular office. These are sometimes called image maps.

Interactive components - Buttons The simplest way to add buttons to a web page is to have a graphic image of a button (for example, a windows 'OK' button) and then make the image a hyperlink. Clicking the button will then cause the browser to follow the hyperlink. However, this method is only suitable where you want to use buttons as hyperlinks. If you want a button to carry out some other function you will need to use scripts.

Interactive components - Menus Dreamweaver® includes a selection of ready- to-use interactive components that you can add to your web pages. These are called 'Spry‘ features. You need to add programming code to your web pages to make these features work (see Create and edit web pages 1). One type of 'Spry' feature you can add is a menu bar.

Interactive components - Menus Each top level item (item 1, item 2 etc.) has a drop-down sub menu (item 1.2, item 1.2 etc.) You add or remove the top level and sub menu items using the + and- buttons in the properties panel. To change the item text click the item in the Properties panel, then type the text you want in the text box. To choose what page the menu item links to, either type the URL in the link box or click the browser icon and choose the web page from your local site folder.

Interactive components - Image rollovers Another type of interactive content is an image rollover. This is where you have an image in a website, and if the user moves their mouse over the image, it changes in some way.

Interactive components - Image rollovers To create an image rollover, you need two images that are the same size. Both of these images need to be saved in your local site folder.

Interactive components - Pop-up windows Pop-up windows, or pop-ups, are another way you can add interactivity to your pages. Instead of a link going to a new page, it can open a new browser window, and you can specify the size of that window. This can be useful, for example, to allow a user to see a larger version of a thumbnail photo on your site. The page that will 'pop up' must already exist.

Embedding multimedia or digital assets and graphics To make your web pages more engaging you may want to include digital graphics, videos, audio or animations that you have either created yourself or ready-made assets that you have sourced.

Embedding multimedia or digital assets and graphics To insert graphics in your web pages they must be in .JPG , .GIF or .PNG format. For the best results, resize your images in your image editing software to approximately the size they will appear on the web page and set their resolution to 72 PPI.

Embedding multimedia or digital assets and graphics You can adjust the way the image appears in your web page using the Properties panel at the bottom of the Dreamweaver® editing window, but it's a much better option to use cascading style sheets (CSS) to make these adjustments. CSS is described later in this section.