Dreamweaver Tutorial #4

Designing a Web Site using Dreamweaver In this tutorial you will

Design and create a small web site according to the design suggestions from Tutorial 3 and using Dreamweaver

Getting Started First you need to download two files.

1. A word document that has the content that you need to include in the web site 2. A file of images that you can use in your web site [Help 1 – a list of all the

images and a thumbnail representation] The files names are:

bideAwhileInfo.doc (content for web page) abideawhile (image folder)

Using the information provide you will design a web site for a local animal shelter called Bide Awhile. The word document contains information that you need to include in the website. You do not need to re-type all the information instead you can copy from the word document and paste into Dreamweaver [Help 2 – copy and paste into Dreamweaver] Also note that you do not need to put your web site on your bluenose account. Instead work locally only (saving only to your computer). Instructions

1. Using the design suggestions from Tutorial 3, the content in the word document, and images from the image folder you will design and create a web site.

2. There are questions in Part I that will help you step through the design. There is a checklist in Part II that you can use when considering the design elements for the site. As already seen, there are help topics that can be found at the end of the tutorial to help you with some elements. You can also use the previous tutorials and the online resources listed at the end of this tutorial to help you.

3. In the checklist there are some short questions that you need to answer as you go through the list.

4. Finally, when you are finished you will be given the URL of the actual site. You can go there and compare your design with the site’s design. Do not peek though; your design may be better and you do not want to be influenced! Compare the differences and note the similarities between your site and the actual site.

Dreamweaver – Tutorial 4 1

Part I – Design the Site (before using Dreamweaver) The questions in Part I will help you think about your design before you start to work with Dreamweaver. It will help you organize the information so you can design the site hierarchy. Type of Site and Users Using the provided content in the word document, you need to identify the type of site you are designing and the type of users that may visit the site.

1. What is the web site for?

2. What type of site is it?

3. Who do you think the users of the site will be?

4. What type of things will the users want to do on the site? Web Site Structure Using the word document, create and draw a hierarchy for your site. Make sure you have included all the different topics in the word document. Remember to group similar information. Now using the hierarchy, you can figure out what content needs to go on the pages in your web site. Web Page Design Sometimes it is helpful to sketch a very rough draft on paper the design before creating the actual page. It helps you design a page that follows the checklist and lets you consider different design options without committing to the actual web page. For example in the figure below, there are two sketches of pages from a travel agent’s web site1. Notice that up at the top, there is the same logo and organization name on both pages. The pages are very rough, but it gives the web designer the look and feel of the pages and site. As well, it shows the information that needs to be present on the pages and the possible presentation of that information. Sketch out a couple of options for the home page while considering the questions in Part I and the points in the checklist. In particular, consider how you will maintain a consistent look and feel that begins with your home page and continues with the interior pages. As well, consider the type of navigation mechanisms that will work best (look at the check list for options). It is difficult at this stage to consider the actual colours until you move to creating the page in Dreamweaver but you can think of possible colour combinations (e.g., green, blue and grey…).

1 Sharp, Rogers, Preece. (2007). Interaction Design: beyond human-computer interaction (2nd edition): John Wiley & Sons, England.

Dreamweaver – Tutorial 4 2

Web page that asks the user to tell them where they want to go and other travel options

Web page that presents the travel results

Sketched Pages from a Travel Agent Web Sites

Dreamweaver – Tutorial 4 3

Part II – The Design Checklist Below is a checklist of design elements with some questions that you can use while and after creating the web site to help you consider the design suggestions in Tutorial 3. Web Site Related Design Considerations

□ Created a Hierarchy

□

Content is grouped into a meaningful and sensible way

How?

□ Pages in the site are clearly labelled (e.g., a logo, name)

□

There is a consistent look and feel to the site

□ Same logo/banner in same place in all the pages

□ Same navigation aide (e.g., menu) locations on the pages

□ Same colour usage in all the pages

□ Same font type and style in all the pages

□ Others (list below)

□

Navigation aides present to help users move through the site (e.g., link navigation, menu navigation and drop-down list menu navigation). [Help 3 – drop down list menus]

List the types used:

Dreamweaver – Tutorial 4 4

Home Page and Interior Pages Design Considerations

□

Your home page clearly tells the user where they are (i.e., that it is a home page and not an interior page).

How?

□

Your home page clearly tells the users what the site does.

How?

□

Your home page contains the following:

□ Name or logo of the organization

□ Name of the website (appears in the tab bar)

□ Has at least one navigation aide WHAT?

□ Has a search facility (note: for this site you do not need to include)

□ Others (list below)

□ There is no or minimal vertical scrolling on the home page

□ Interior pages are no longer than two scrollable pages long [Help 4 – use hypertext to break up a long page]

□ You can easily reach your home page from all pages in your web site

□ There is no horizontal scrolling in your site (use word wrap)

□ Font size is large enough to read

Dreamweaver – Tutorial 4 5

□ The colours used in the site have high contrast (use site http://snook.ca/technical/colour_contrast/colour.html to test contrast colours)

□ Your pages are not cluttered

□ There is no noise or distracting animations or images

□

The writing is succinct

□ Information can easily be scanned

□

Hypertext (links in the page) were used

Why or why not?

Testing Consideration of your Web Site

□ All navigation aides work (e.g., menu items)

□ All links work

□ All images show up

□ You can reach all the web pages that you included in your web site hierarchy

Dreamweaver – Tutorial 4 6

Help Topics for the Web Site Help 1 – List and thumbnail of all Figures

abideAwhileLog

o.PNG

bannerForCaelidhForC

ritters.PNG

banner_bowlingForC

rtters.PNG

breakingNews.P

NG

ceilidhForCritters_l

ogo.PNG

dollarBills.PNG

event_bowling1.PNG

event_bowling2.PNG

event_bowling3

.PNG

event_bowling4.P

NG

event_bowling5.

PNG

event_ceilidh1.PNG

event_ceilidh2.PNG

event_ceilidh3.

PNG

event_ceilidh4.PN

G

event_ceilidh5.P

NG

event_ceilidh6.PNG

insideShelter.PNG

largePhoto_shel

ter.PNG

largePhoto_shelter

2.PNG

location_map.P

NG

logo_address_registrati

on.PNG

moneySign.PNG

pawPrint.PNG

petsAndLogo.PNG

red_paw_whats

_new.gif

shakeHands.PNG

sponsors_logos.PNG

wrappedGift.PN

G

Dreamweaver – Tutorial 4 7

Help 2 – Copy from Word and Paste into Dreamweaver Select the text in the Word document that you want to copy. Then choose to copy (from the Edit Menu or select Copy from the right-click menu) (see Figure 1).

Figure 1. Copy from Word Next, in Dreamweaver paste the highlighted text either on a blank page in Dreamweaver or you can replace the jibber text that is present when you open a html layout page. If you are copying right onto the layout where there is already jibber text, highlight the text you want to replace and then select Paste (on the Edit Menu or with the right-click menu) (See Figure 2). For a blank page in Dreamweaver, just put your cursor on the screen and choose Paste (from the Menu or the right-click menu).

Dreamweaver – Tutorial 4 8

Figure 2. Highlight the text in Dreamweaver that you want to replace

The copied text will then be in your Dreamweaver page (Figure 3). You can then edit the font properties and other properties.

Figure 3. The copied text in Dreamweaver

Help 3 – Drop-down menus (“Jump Menus”) Depending on your web site structure hierarchy, you may want to use a drop-down menu. For example in Figure 4, you might see a menu on a web page that had an selection named “Product Information” and when you choose the selection a drop-down list appears with three items: Hardware, Applications and Contact Sales.

Dreamweaver – Tutorial 4 9

Figure 4. Web Site Hierarchy that may be suitable for a drop-down menu

You can create a drop-down menu in Dreamweaver by using their feature called a Jump Menu, which is a form item. First select Insert / Form / Jump Menu. The Insert Jump Menu dialog box will appear, as shown below in Figure 5.

Figure 5. Insert Jump Menu dialog box

Type the text you want to appear in the menu list in the "Text" text box. If you want to name your menu list you can just enter the name (e.g., About Bide Awhile) without adding a URL (Figure 6). Then press the + sign to add an element in the list.

Dreamweaver – Tutorial 4 10

Figure 6. Add the first item (title) in your jump menu

Then add menu items (e.g., Vision) by giving it both a name and selecting the page file that you want the menu item to link to (Figure 7). To add a link to a page in the go to URL text box, select the file to open by clicking Browse, then select the file to open. If you want to add a GO button after your menu that users need to select before the menu will go to given page, select the “Insert go button after menu” in the Options (see Figure 8).

Figure 7. Add more items and URLs

Dreamweaver – Tutorial 4 11

You can add new jump menus with other groups of menu items. After adding all the list of menu items, it should look like Figure 8 in Dreamweaver (note the Go button on the last menu) and Figure 9 in the browser. Also, note that you can copy and paste items in Dreamweaver (select the item and then use the right-click menu to copy and then paste in another location or another page). This is helpful when creating jump menus, you can create them once and then copy and paste them into the other pages.

Figure 8. The Jump Menus in Dreamweaver

Figure 9: The Jump Menus in the browser Help 4 – Adding Hypertext to break up long pages If a page is long, you may want to divide it up into pages. At the bottom of the page content, add some text (or a relevant image) that indicates that there is a next page (in this case, we used Next Page as seen in Figure 10).

Dreamweaver – Tutorial 4 12

Figure 10. Add “Next Page” to the bottom of the content

Then at the bottom on the properties menu, select the indent button (Figure 11) and move the text over to the right-hand side.

Figure 11. Indent the text to the right-hand side of the page Now highlight the text “Next Page” and select add a URL (on the side menu at the top “Hyperlink”). In the dialog window, select the file to link to (in this case z_abide2.html) (see Figure 12). This will create a link at the bottom of the page (Figure 13).

Dreamweaver – Tutorial 4 13

Figure 12. Add a hyperlink

Figure 13. The hyperlink is added to the page

Select file to link to

On Page 2 that you linked to then add a “Previous Page” link to link to the first page (Figure 14). If you divide the content up into more than two pages, you would also add a Next Page link to Page 2.

Dreamweaver – Tutorial 4 14

Dreamweaver – Tutorial 4 15

Figure 14. Page 2 links back “PreviousPage” to the first page Dreamweaver Resources http://www.adobe.com/devnet/dreamweaver/ http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7c1ea.html http://www.guidesandtutorials.com/dreamweaver_tutorial.html Design Resources http://www.useit.com/ http://www.adobe.com/support/dreamweaver/layout/site_planning/ Sharp, Rogers, Preece. (2007). Interaction Design: beyond human-computer interaction, 2nd Edition: John Wiley & Sons, England. Shneiderman, B., Plaisant, C. (2005). Designing the User Interface: Strategies for Effective Human-Computer Interaction, 4th Edition: Pearson Education, Inc., USA. Stone, D., Jarrett, C., Woodroofe, M., Minocha, S. (2005). User Interface Design and Evaluation: Morgan Kaufmann, California.