building dynamic websites.pdf

7/27/2019 Building Dynamic Websites.pdf

http://slidepdf.com/reader/full/building-dynamic-websitespdf 1/20

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 librariesYou 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 thelibrary 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 you’ve inserted it.

Create a library item

1. Select an element of a document (such as an image or text) to save as a library item.

2. Select Window > Assets, click the Library button, andthen click the New Library Item button at the bottom

right of the Assets panel (Figure 1).

3. 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 site’s local

root folder.

Figure 1 Library and New Library Item buttons

Figure 2 Naming a new library item

Library button

New Library Item button

Insert a library item

1. Position the insertion point in the Document window

where you want to insert a library item.

2. 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).

Figure 3 Inserting a library item on a page

Insert button

1



Edit a Library Item

1. Make sure the Library panel is open. If it is not, selectWindow > Assets and click the Library button on the

left side of the Assets panel.

2. Select a library item.

3. 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 aDocument window. You can tell it is a Library item by

the .lbi filename extension on the document’s 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 withyour edited version in the files that use the library item.

The Update Pages dialog box opens.

6. To see a report on the updating process, make sure Show

Log is selected (Figure 6).

7. Click Close.

Figure 4 Library editing window

Figure 5 Update Library Items dialog box

Figure 6 Update report

2



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. Open either a library item or a page with a library item

on it.

2. Select Modify > Library > Update Pages.

The Update Pages dialog box opens (Figure 7).

3. From the Look In pop-up menu, select Entire Site, andthen select the site name from the adjacent pop-up

menu.

4. Make sure Library Items is selected in the Update

section.

5. Click Start.

Dreamweaver updates the documents and provides areport 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.

Figure 7 Update Pages dialog box

Figure 8 Update Pages report

3



How to add Flash movies and Flash video to a websiteTo 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 avideo 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 mov ies (SWF files)

1. Start Adobe Dreamweaver and open the documentin which you want to create an image map.

2. Make sure the Common category in the Insert bar isselected.

3. 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

movie’s contents. Then click OK.

A Flash content placeholder, rather than a scene fromthe 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 1 Media pop-up menu

Figure 2 Select File dialog box

Figure 3 Object Tag Accessibility Attributesdialog box

Figure 4 Flash content placeholder 4



Set play op tions

To determine how the movie plays when the page loads, you set options in the Property inspector (Figure 5).

5. Make sure the Flash content placeholder is selected.

6. 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 don’t want the movie to loop, make sure that theLoop option is not checked.

7. Select the Autoplay option to cause the movie to playwhen the page loads.

8. 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 v ideo (FLV f iles)

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. Click the Browse button beside the URL text box.

3. Locate and select the Flash video, and then click OK

(Windows) or Choose (Mac OS).

4. 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. Select the Auto Play option to cause the video to playwhen the page loads.

8. Select the Auto Rewind option to cause the video to

rewind automatically when it reaches the end.

Figure 6 Insert Flash Video dialog box

Figure 7 Flash video in a browser with Clear Skinselected

5



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

6



How to create image mapsAn 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 eachcountry in the map to another page in your site or an external website containing information about that country.

Create an image map

1. Start Adobe Dreamweaver and open the document

in which you want to create an image map.2. Make sure the Common category is selected in the Insert

bar.

3. 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 boxopens.

5. Enter alternate text for the image, and then click OK.The image is added to the page (Figure 2).

6. Select the image in the Document window. In the

Property inspector, type a name for the map in the Maptext box.

Note: Naming conventions for image maps follow thesame rules as filenames: no spaces or special characters.

Figure 1 Images pop-up menu

Figure 2 Image inserted

7



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).

7. 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.

8. Repeat steps 6 and 7 to add other hotspots in the imagemap.

9. Save the page.


from the submenu to preview the page and test each

link.

Figure 3 Image map

Figure 4 Hotspot Property inspector

Image map

Hotspot tools

8



How to create rollover imagesA 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 whenthe 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. Open Adobe Dreamweaver and open the document

in which you want to create a rollover image.

2. 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 imageto be displayed when the page loads.

• Rollover Image: Click Browse and select the image

to be displayed when the pointer rolls over theoriginal image.

• Alternate Text: Type the text you want to appear as

alternate text for the image.

• When Clicked, Go To URL: Click Browse andselect the file (or type the path to the file) to be

opened when the image is clicked.

5. Click OK to close the dialog box.

6. Save the page.


from the submenu to preview the rollover image and test

the link.

Figure 1 Images pop-up menu

Figure 2 Insert Rollover Image dialog box

9



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 we’ll need to work with a webpage that uses <div> tags as the basic layout structure. You can use anexisting page or create a new page using the Dreamweaver built-in 2 column liquid, left sidebar, header and footer

template.

We’ll need to make 4 changes to the default layout:

1. Change the DIV width properties to 90% to better use available screen width on small devices.

2. Change the DIV max-width properties to 960px.

3. Change the DIV min-width properties to 760px.

Note: Since we’ll be setting up rules for smaller screens, this would seem to be unnecessary but it’s useful for

older browsers that don’t support media queries. The value of 760px will better accommodate the media

queries we’ll be setting up.

4. 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.

Dynamically size an image

The header image creates our first challenge. This image will be too large to work with mobile devices. We’ll 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. With the image selected delete the height and width attributes in the Properties Inspector.

2. 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 site’s files).

3. Click the Specify button to create and save your media query file. Name the file media.css and save it wherethe main CSS file exists.

4. Leave Force devices to report actual width checked.

5. 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 you’ll still need to create and

save a CSS file for each of the queries.

Create the CSS files:

6. Select the Phone query from the list if it’s not already selected.

7. In the Properties section. accept the defaults for Description and Min and Max Width.

8. 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.

9. Repeat the steps above to create CSS files for Tablets and Desktops naming the remaining files tablet.css anddesktop.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, you’ll 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 Adobe’s 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.

Let’s begin with tablets. The first thing we need to change is the min-width property for our header div. Since thetablet 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 Dreamweaver’s Rule Definition dialog so we’ll need to add the rule directly in

the code of tablet.css.

Min-width

1. Make sure you are working in Split View and click the tablet.css link in the Related Files list at the top of theDocument window. The tablet.css file will be displayed on the left in the code portion of the Split window

(see figure below).2. 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, whichshould accommodate even pretty dumb smart phones. And we’ll 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 we’ve

created a layout that comfortably accommodates mobile devices and still looks good on a desktop computer.

15