WEB COMMUNICATION & DESIGN

Building Dynamic Websites

TABLE OF CONTENTS

Section I: How to Use Libraries Section II: How to Add Flash to a Website Section III: How to Create Image Maps Section IV: How to Create Rollover Images Section V: Mobile friendly web pages

How to use libraries

You can use a library in Adobe Dreamweaver to store page elements such as images, text, sounds, or tables you want to reuse throughout your website. When you insert a library item, Dreamweaver actually inserts a link to the library item. If you later need to make changes to a library item, such as changing some text or an image, updating the library item automatically updates each instance of the item on every page into which youve inserted it.

Create a library item

1. 2. Select an element of a document (such as an image or text) to save as a library item. Select Window > Assets, click the Library button, and then click the New Library Item button at the bottom right of the Assets panel (Figure 1). Enter a name for the new library item: Make sure Untitled is selected, type a name, and press Enter (Windows) or Return (Mac OS) (Figure 2). Each library item is saved as a separate file (with the file extension .lbi) in the Library folder of the sites local root folder.
New Library Item button

3.

Library button

Figure 1 Library and New Library Item buttons

Figure 2 Naming a new library item

Insert a library item

1. 2. Position the insertion point in the Document window where you want to insert a library item. Make sure the Library panel is open. If it is not, select Window > Assets and click the Library button on the left side of the Assets panel. The Assets panel opens and shows the Library category. 3. Drag a library item from the Assets panel to the Document window, or select an item and click the Insert button at the bottom of the panel (Figure 3).
Insert button

Figure 3 Inserting a library item on a page

Edit a Library Item

1. Make sure the Library panel is open. If it is not, select Window > Assets and click the Library button on the left side of the Assets panel. Select a library item. Click the Edit button at the bottom of the Assets panel. Dreamweaver opens a new window for editing the library item (Figure 4). This window is much like a Document window. You can tell it is a Library item by the .lbi filename extension on the documents tab. 4. Edit the library item and then save your changes. The Update Library Items dialog box opens, with a list of the files that use the library item (Figure 5). 5. Click Update to replace the original library item with your edited version in the files that use the library item. The Update Pages dialog box opens. 6. 7. To see a report on the updating process, make sure Show Log is selected (Figure 6). Click Close. Figure 5 Update Library Items dialog box Figure 4 Library editing window

2. 3.

Figure 6 Update report

Update All Documents to Use Current Library Items

If you do not choose to update documents that use library items as you edit individual library items, you can later update all pages in the site with the current version of all library items. 1. 2. 3. Open either a library item or a page with a library item on it. Select Modify > Library > Update Pages. The Update Pages dialog box opens (Figure 7). From the Look In pop-up menu, select Entire Site, and then select the site name from the adjacent pop-up menu. Make sure Library Items is selected in the Update section. Click Start. Dreamweaver updates the documents and provides a report on the updating process (Figure 8). If you have updated documents at the time you edited library items, this report confirms that no additional updating was required. 6. Click Close.

4. 5.

Figure 7 Update Pages dialog box

Figure 8 Update Pages report

How to add Flash movies and Flash video to a website

To add interest and interactivity, you can add movies created in Adobe Flash and Flash video to your site. Flash movies contain animated and interactive content, while Flash videos incorporate video from other sources, such as a video camera. For example, you might add an instructional Flash movie about model rocketry, or a slide show, or some video that documents a community event.

Adding Flash movies (SWF files)

1. 2. 3. Start Adobe Dreamweaver and open the document in which you want to create an image map. Make sure the Common category in the Insert bar is selected. Click the down arrow on the Media button and select Flash in the pop-up menu (Figure 1). The Select File dialog box opens (Figure 2). 4. Locate and select the Flash movie, and then click OK (Windows) or Choose (Mac OS). The Object Tag Accessibility Attributes dialog box opens (Figure 3). 4. In the Title text box, type a brief title to identify the movies contents. Then click OK. A Flash content placeholder, rather than a scene from the Flash movie itself, appears in your document (Figure 4). This is because the page is pointing to the Flash SWF file. When a visitor opens this page, the browser plays the SWF file. Figure 2 Select File dialog box Figure 1 Media pop-up menu

Figure 3 Object Tag Accessibility Attributes dialog box

Figure 4 Flash content placeholder

Set play options

To determine how the movie plays when the page loads, you set options in the Property inspector (Figure 5). 5. 6. Make sure the Flash content placeholder is selected. In the Property inspector, select the Loop option to cause the movie to repeat as long as the visitor is on the page. If you dont want the movie to loop, make sure that the Loop option is not checked. 7. 8. Select the Autoplay option to cause the movie to play when the page loads. To test the movie, click Play. Dreamweaver plays the Flash file in the document, showing you what visitors will see when they view the page in a browser

Figure 5 Flash Property inspector

Adding Flash video (FLV files)

Flash video plays like any other video content. When you add Flash video, Dreamweaver also inserts a set of playback controls. These controls appear in a browser when a visitor opens the page. 1. Click the down arrow on the Media button on the Insert bar and select Flash Video from the pop-up menu (Figure 1). The Insert Flash Video dialog box opens (Figure 6). 2. 3. 4. Click the Browse button beside the URL text box. Locate and select the Flash video, and then click OK (Windows) or Choose (Mac OS). Make sure Progressive Download Video is selected in the Video Type menu at the top of the dialog box. The Progressive Download Video option enables visitors to see movies as they download instead of waiting until after the entire movie has downloaded. Note: The Streaming Video option requires the use of a Adobe Flash Media Server. 5. Click the Detect Size button to fill in the Width and Height boxes. Dreamweaver requires this information to include the video. 6. Select a skin from the Skin pop-up menu. This determines the appearance of the Flash video playback controls (Figure 7). 7. 8. Select the Auto Play option to cause the video to play when the page loads. Select the Auto Rewind option to cause the video to rewind automatically when it reaches the end.
5

Figure 6 Insert Flash Video dialog box

Figure 7 Flash video in a browser with Clear Skin selected

9.

Click OK to close the dialog box and insert the video. A Flash Video placeholder appears in your document (Figure 8).

10. Select File > Preview In Browser and select a browser from the submenu to preview the page and test the video.

Figure 8 Flash Video placeholder

How to create image maps

An image map is an image that has been divided into regions, or hotspots. When a visitor clicks a hotspot on your web page, an action occurs; for example, another web page opens. An example is a geographic map that links each country in the map to another page in your site or an external website containing information about that country.

Create an image map

1. 2. 3. Start Adobe Dreamweaver and open the document in which you want to create an image map. Make sure the Common category is selected in the Insert bar. Click the down arrow on the Images button and select Image from the pop-up menu (Figure 1). The Select Image Source dialog box opens. 4. Locate an image for the image map, select it, and click OK (Windows) or Choose (Mac OS). The Image Tag Accessibility Attributes dialog box opens. 5. 6. Enter alternate text for the image, and then click OK. The image is added to the page (Figure 2). Select the image in the Document window. In the Property inspector, type a name for the map in the Map text box. Note: Naming conventions for image maps follow the same rules as filenames: no spaces or special characters. Figure 1 Images pop-up menu

Figure 2 Image inserted

6.

Select one of the hotspot tools located below the Map name, and draw a rectangle, circle, or polygon around a part of the image (Figure 3). In the Hotspot Property inspector (Figure 4), do the following: Add a link to a page in your site or to an external URL. Type a descriptive phrase for the link destination in the Alt text box.
Image map

7.

8. 9.

Repeat steps 6 and 7 to add other hotspots in the image map. Save the page.
Hotspot tools

10. Select File > Preview In Browser and select a browser from the submenu to preview the page and test each link.

Figure 3 Image map

Figure 4 Hotspot Property inspector

How to create rollover images

A rollover is an image that changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the pointer moves over the primary image). Rollover images add highlighting or design effects by drawing viewer attention when the images are swapped. One example is a button that highlights or changes color when the pointer passes over it.

Create a rollover image

1. 2. Open Adobe Dreamweaver and open the document in which you want to create a rollover image. Make sure the Common category is selected in the Insert bar. Click the down arrow on the Images button and select Rollover Image from the pop-up menu (Figure 1). The Insert Rollover Image dialog box opens (Figure 2). 3. Use the Insert Rollover Image dialog box to set up your rollover: Image Name: Type a name for the rollover image. Original Image: Click Browse and select the image to be displayed when the page loads. Rollover Image: Click Browse and select the image to be displayed when the pointer rolls over the original image. Alternate Text: Type the text you want to appear as alternate text for the image. When Clicked, Go To URL: Click Browse and select the file (or type the path to the file) to be opened when the image is clicked. Figure 2 Insert Rollover Image dialog box Figure 1 Images pop-up menu

5. 6. 7.

Click OK to close the dialog box. Save the page. Select File > Preview In Browser and select a browser from the submenu to preview the rollover image and test the link.

Mobile friendly web pages

Every day more and more smartphones get activated and more websites are producing smartphone-optimized content. It is recommended that you follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS to decide the rendering on each device.

Create and save a new HTML page.

For this example well need to work with a webpage that uses <div> tags as the basic layout structure. You can use an existing page or create a new page using the Dreamweaver built-in 2 column liquid, left sidebar, header and footer template. Well need to make 4 changes to the default layout: 1. 2. 3. Change the DIV width properties to 90% to better use available screen width on small devices. Change the DIV max-width properties to 960px. Change the DIV min-width properties to 760px. Note: Since well be setting up rules for smaller screens, this would seem to be unnecessary but its useful for older browsers that dont support media queries. The value of 760px will better accommodate the media queries well be setting up. Add a 960px wide image as the header to the page -or- if using the 2 column template, replace the image placeholder in the header.

4.

Dynamically size an image The header image creates our first challenge. This image will be too large to work with mobile devices. Well solve this issue by deleting the image height and width attributes from the html and sizing the image using CSS.

The Properties Inspector with image selected and the width and height attributes deleted. 1. 2. With the image selected delete the height and width attributes in the Properties Inspector. Next, in the CSS file, create a new style for the header image:

By removing the height and width attributes from the menu tag and using a percentage value in the CSS width property we cause the image to resize dynamically as the width of the page changes.
10

Add media queries and the device specific CSS files.

The Media Queries dialog 1. Select the Insert>Media Queries menu item

11

In the Media Queries dialog: 2. Under Write media queries to click to choose the Site-wide media queries file option (you can choose to save the queries to the current document but saving them to an external file makes them available for all of your sites files). Click the Specify button to create and save your media query file. Name the file media.css and save it where the main CSS file exists. Leave Force devices to report actual width checked. Click the Default Presets button in the lower-right corner of the Phone/Tablet/Desktop section of the dialog box. This will define three media queries (for desktops, tablets and phones) but youll still need to create and save a CSS file for each of the queries.

3. 4. 5.

Create the CSS files: 6. 7. 8. 9. Select the Phone query from the list if its not already selected. In the Properties section. accept the defaults for Description and Min and Max Width. Choose the Create new file menu option and click the folder icon to create and save your phone-based CSS file. Name the file phone.css and saved it in the same folder as media.css. Repeat the steps above to create CSS files for Tablets and Desktops naming the remaining files tablet.css and desktop.css as in the Media Queries image on the previous page.

10. Click OK to close the Media Queries dialog. Note: Snce we want the style rules in our media query files to overwrite style rules with the same names in the default CSS file, the link to the media query file (media.css) MUST appear after the link to the main CSS file as shown below. It should happen that way by default but, if the order is reversed, youll need to fix it in the code. <link href="styles.css" rel="stylesheet" type="text/css"> <link href="css/media.css" rel="stylesheet" type="text/css"> To edit Adobes default media queries or add more, you can do that at any time by choosing the Modify>Media Queries menu option.

12

The tablet.css file Since the layout by default is designed for larger screens, ignore the desktop.css for now and concentrate on tablets and phones. Lets begin with tablets. The first thing we need to change is the min-width property for our header div. Since the tablet media query is used for screens from 321 to 768 pixels a value of 320 pixels needs to be set. Unfortunately the min-width property is not supported in Dreamweavers Rule Definition dialog so well need to add the rule directly in the code of tablet.css. Min-width 1. 2. Make sure you are working in Split View and click the tablet.css link in the Related Files list at the top of the Document window. The tablet.css file will be displayed on the left in the code portion of the Split window (see figure below). Add the min-width property to each container DIV with a value of 320px. Example: .header { min-width: 320px; }

Split View with tablet.css selected in the Related Files toolbar and displayed in the Code section of the Document window.

13

You should be able to see the effect of this rule by switching to Live View and resizing the document window. Select a size from the menu revealed by clicking on the down arrow at the right of the Multiscreen button in the Document Toolbar at the top of the Document window (see below).

Selecting a preview screen size from the Multiscreen menu. The phone.css file We need similar rules for phone.css with the a couple changes: The min-width of the layout will be 200px, which should accommodate even pretty dumb smart phones. And well let the buttons be the full width of the layout. So our phone.css file will look like this: @charset "utf-8"; .header { min-width: 200px } .menu { min-width: 200px } .content { min-width: 200px }

240 x 320 Feature Phone view

14

The finished page You can preview the layout at multiple screen resolutions simultaneously Select a size from the menu revealed by clicking on the Multiscreen button in the Document Toolbar at the top of the Document window.

A multiscreen preview of the page showing the different layouts for phone, tablet and desktop devices. The Figure above shows the Multiscreen preview of our customized layout. With just a few simple style rules weve created a layout that comfortably accommodates mobile devices and still looks good on a desktop computer.

15