IT 214 - Foundations of Web Design

Welcome!

Welcome to Unit 5!

Site Definition, Templates and Images

Readings

Adobe Dreamweaver CS5 Classroom in a Book (CIAB):

Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB) Lessons 7 and 9 (“Working with Templates” and “Working with Images”).

Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB) Lessons 17 (“Publishing to the Web”)

      

Site Development Foundations (SDF): Read Site Development Foundations (SDF) Lessons 4

(Horizontal Rules and Graphical Elements).  Complete the labs in Lesson 4 to get a better understanding of

topics discussed in this Unit.

Reading Summary:

Adobe Dreamweaver CS5 Classroom in a Book (CIAB): Reading these lessons 7 and 9 in the Adobe CIAB can offer

insight as well as additional instruction on creating templates and placing images using Dreamweaver.

Reading Lesson 17 along with the videos available in the course will help you use the FTP client in Dreamweaver to upload your site files to your student web space.

Site Development Foundations (SDF): The SDF reading offers good information on this unit’s content

and a glimpse of the next step, structuring web pages using CSS and divisions, or DIV tags. The labs will help to deepen your understanding of the topic as well.

Introduction

Unit 5 is about creating your site definition, using templates and various ways to incorporate images to enhance your website.

In this Seminar, we will review setting up the local and remote sites in Dreamweaver.  We will review Dreamweaver templates and discuss how they can be used in the Web development process to help maintain a consistent look and feel among pages.

We will learn how to create templates and integrate them into web pages.

Finally, we will discuss the use of images as support content or as a replacement for textual information.   

To-Do-List

Review Key TermsOn the Reading page

Read Assigned TextOn the Reading page

Respond to the Discussion Board 30 PointsCase Study - A Sharper Image       

Complete the unit project and upload to assignment dropbox for grading50 PointsOn the Assignment page

Attend the Weekly Seminar or complete the FLA quiz 20 Points

Site Definition

Site Definition – For any new site that you create in Dreamweaver, including the one for this course, you will need to start by defining a Dreamweaver site (both local and remote).

Your files are not stored in Dreamweaver; instead, they are stored in a folder on your computer’s hard drive that you created earlier in this course. These files are considered your “local” site. As you already know, the files are also stored on a server, allowing users to view your site via a Uniform Resource Locator (URL). The latter files are called “remote” sites. Dreamweaver will allow you to access and work with your local or remote sites, update your remote sites, and manage your files both locally and remotely.

Site Definition

You will set up your local and remote sites by choosing Site > New Site in Dreamweaver, and filling out the appropriate fields for both the local and remote sites’ information.

Templates

Templates are used to maintain a consistent look and feel for a website. Because consistency between your web pages is important, Dreamweaver offers unique features that help maintain this consistency between pages using templates and CSS external style sheets. These features also help increase productivity when creating and maintaining a website.

Images

In this Unit You will learn how to utilize Dreamweaver to work with images, review file paths, file formats, attributes, and sizing topics. WE WILL USE ONLY JPEG AND GIF FILE TYPES IN THIS CLASS. There are other file formats to explore in later courses. For our purposes, JPGs and GIFs will be the only acceptable file formats.

Images in Web Pages

Has anyone tried adding an image to the page?

What HTML tag would you use to insert an image?

Images in Web Pages

Use the <img> tag to insert an image file using either of two formats to close the tag:

<img src="imagefile.gif"> </img> <img src="imagefile.gif"/>

Images in Web Pages

Image file formats

Graphics Interchange Format (GIF) Joint Photographic Experts Group

(JPEG) Portable Network Graphics (PNG)

Comparing Image File Formats

Format Transparency

Interlacing Compression

Animation

GIF Yes Yes Yes Yes

JPEG (standard)

No No Yes No

PNG Yes Yes Yes Yes

Images and the alt Attribute In XHTML, every image must follow

good coding practice by including the alt attribute with a corresponding value

Code will not validate as XHTML without this attribute

Browsers and screen-reader technology can read alt description and render it in audio for disabled users <img src="image.gif" alt="Alternative

text"/>

Images in Web Pages

You can store images in the root directory, or create the "images" folder

<img src="imagefile.gif"/>

<img src="images/imagefile.gif"/>

The path will reflect your folder structure

Combining Background Images and Colors

The bgcolor attribute: Specifies background colors

The background attribute: Inserts an image as a background

If you use both the bgcolor and background attributes in a <body> tag, then only the attribute specified last in the tag will render

Aligning Images Relative to Text

The align attribute positions images relative to text

<img src="imagefile.gif" align="alignment value"> Values include:

"bottom" "middle" "top" "left" "right” “center”

Aligning Images Relative to Text

The align attribute has been deprecated in favor of style sheets, but can still be used; code will still validate as XHTML 1.0 Transitional

Review

The <img> tag embeds an image in an HTML page.

Notice that images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes: src and alt.

Review

In HTML the <img> tag has no end tag.

In XHTML the <img> tag must be properly closed.

Src - Specifies the URL (the LOCATION) of an image, including the file name

Specifying Colors

Colors can be specified by name or by Hexadecimal "Red Green Blue (RGB)" value

Web-Safe Color Palette

A set of 216 colors guaranteed to render properly Ensures that colors in pages render as expected

If you specify a color not supported by the monitor or operating system, the system will approximate the color, a process called dithering

Unexpected results may occur as the result of dithering

Page Colors and Backgrounds

Specifying page colors: <body bgcolor="colorNameOrCode"> Specifying text color on the page:

<body text="colorNameOrCode"> Specifying color of unvisited links:

<body alink="colorNameOrCode"> Specifying color of visited links:

<body vlink="colorNameOrCode"> Providing a background image:

<body background="image.png">

Web Design Issues

Color combinations Popular color combinations

Consider existing sites Habitat for Humanity (www.habitat.org) Microsoft (www.microsoft.com) Red Hat (www.redhat.com)

Cultural and audience concerns

Web Design Issues

Page layout Layout guidelines Document structure, the <div> tag and style

sheets Relative path names White space, the <img> tag and XHTML

Atomic Learning Tutorials

http://www.atomiclearning.com/highed/drmwvrcs5_intro

Section A – workspace basics and viewing

Section B – setting up a site Section D – working with images

Project 5

Unit Outcomes Create a Dreamweaver site definition for local site and remote

server. Create a template for the web site Add an image to Bio page using Dreamweaver

  Course outcomes addressed in this unit IT214-4: Develop the concept, interface design, and content

for a website. IT214-5: Construct a website.

Project 5

Part 1 – Dreamweaver site definition  Open Dreamweaver(DW). Follow the instructions provided within

your textbook Classroom in a Book and/or viewing the video in your browser that corresponds to the version of DW that you own. Begin creating the local site by either choosing the “Create New>Dreamweaver site” from the welcome menu or, from the document toolbar select “Site>New Site” Follow the instructions outlined in the video.

When defining the remote site, know that you will need the key information that corresponds to your Kaplan Web Server account. Test the connection as indicated in the video to make sure the information has been entered correctly.

Project 5

Part 1 – Dreamweaver site definition  Since all the files in your local site folder should already be on

the remote site from previous uploads to the server, switching to the remote view files window should reveal the same files as in the local site. As we add new files and modify existing files DW will upload these to the remote server. 

Setting up a site definition should be the first step when working on a new site. Once the above tasks are completed, Dreamweaver will allow you to access and work with your local or remote sites, update your remote site, and manage your files both locally and remotely.

Project 5

Part 2 – Create a template from an existing page 

A word about the SAVE action before we begin. Like most computer applications, what is created or changed in the application is NOT permanently saved in the storage folder. DW will often anticipate that the file needs saved and ask with a dialog box. It is still best to save each page, template, CSS document, etc. before you move on. For example, creating a new page, you must give it a name and save it before you begin working with it as part of the site. 

1. Open the existing bio.html page in the DW work area by clicking on the icon found in the site files for this page. Locate the buttons for seeing the 3 different views of this page: Code, Design and Split views. Use the split view for now to see the relationship between the code and the rendered page.

Project 5

Part 2 – Create a template from an existing page 

2. To create a template, select “Save as template” from the File menu. A dialog box opens and allows you to make some changes. The only necessary change is the file name. As you see, the default takes the name of the page and that can lead to confusion. Rename the page to template1. Click Save and if you are asked to update links, click no.

3. Note that a new file name appears in the work with the DW extension for templates. Also notice that a new folder has appeared in the files area called “templates.” Open the folder and see that the new template document is inside. (read about linking the documents).

Project 5

Part 2 – Create a template from an existing page 

4. As you have read this week in the Adobe CIAB, templates work by locking some of the design features of site pages to create a consistent “look and feel” or function across the site. And just like linked CSS external style pages, allow for a quick update to all pages by making a change to the template. But we don’t want all the areas or regions of the pages locked. For example, we need to have all the body content editable at this point for all pages attached to the template. Before we go any further we need to take care of this.

Project 5

Part 2 – Create a template from an existing page 

5. With the code view visible in the template page, select and highlight all the content from the opening body tag to the closing body tag. Remember to include the tags themselves. To make this region “editable,” select insert>template objects from the tool bar and choose “editable region.” Name it appropriately, “bodyRegion.” Note that the region is marked with a tab and box on the design view of the split screen.

Project 5

Part 2 – Create a template from an existing page 

6. Now it is time to link the web pages to the template. Open each of the three existing pages in the site and from the “Modify>templates” dropdown menu on the toolbar, select “Apply template to page.” It is important to remember that even though we used the bio.html page as the basis for our new template, it still needs to be linked to the new template!

7. You will be shown a dialog box that reports unresolved regions. Select the document body and choose “bodyRegion” from the drop down. Select the document head region and select “head” from the list. Click OK.

Project 5

Part 2 – Create a template from an existing page 

8. These pages now linked to the template also show changes. In gray, and appended to the DOCTYPE statement at the beginning of the document is the line: <!-- InstanceBegintemplate ="/Templates/template1.dwt"codeOutsideHTMLIsLocked="false" --> This tells us the template1.dwt is now linked and will control certain aspects of the page design and other information. The gray color also tells us that some code is not editable. See that DW has cleverly allowed for the title tags to be edited while not the rest of the head tag. The area we titled bodyRegion is also editable. To release the template from the page we need to once again modify>template to detach the template from the document.

Project 5

What are the benefits of using DW Templates?

Project 5

Part 3 – Adding an image to the Bio.html page.

1. If not opened in the work area already, open the existing bio.html page in the DW work area by clicking on the icon found in the site files for this page. Locate the buttons for seeing the 3 different views of this page: Code, Design and Split views. Use the split view for now to see the relationship between the code and the rendered page.

Project 5

Part 3 – Adding an image to the Bio.html page.

2. Place the cursor in the local files window, right click and choose “New folder” from the menu. Name the folder “images.” Go to file>save to make it part of the site. “images” is a folder label recognized by DW and can be helpful as a default location for storing images for the site. What we would like to do is place an image of ourselves in this folder if one is available, but in any event we need an image to place on the Bio.html page. To do this we need the image you are going to use in this images folder. If you look at the site folder on your desktop, the images folder now appears. Cut and paste, drag or otherwise get the image you intent to use in the folder. A check back to the site files will show it is now ready for use in the site design.

Project 5

Part 3 – Adding an image to the Bio.html page.

3. You have read about several ways to get images into the design. We will use the most visual method here with a drag and drop. Place the cursor on the image icon in the files window, left click and drag the image to the design portion of the work window. Note that there is a cursor and shadow rectangle as you drag the image about. The cursor is helping to place the top of the image next to a line of text in the design. Let go of the mouse button and the horizontal position of the image is at the default. An accessibility dialog box opens and asks for “alternative text” and other information. For now, just provide some alternative text for the image and click OK.

Project 5

Part 3 – Adding an image to the Bio.html page.

4. Lastly, make sure the properties window is open (window>properties) and click the image to select it. In the properties window, find the align menu and choose either right or left as it suits your design. The image should also have some space around it so that text does not run into it. With the image selected, find the Vspace and Hspace entries and place a value of 10(pixels) in each. Remember to save the file. At this point, selecting “save all” will save all the open documents in DW.

Project 5

Project Instructions:

The project for this week includes three parts: 

Part 1: Create a Dreamweaver site definition for local site and remote server

Part 2: Create a template for the web site using the existing Bio.html web page 

Part 3: Add an image to the existing Bio.html page

Project 5 - Grading Rubrics

1. Template was created using the Bio.html page : 0-10   2. Template was attached to all existing pages within the site : 0-10 3. An images folder was created for the site and appropriate image

for the Bio.html page was placed in the folder. : 0-10  4. Image was placed on the Bio.html page : 0-10  5. image was aligned either left or right, padded and was in good

design balance this the textual content. : 0-10 

6. Defined local and remote site definitions. (part 1) – not to be submitted for evaluation

7. Test server connection by uploading a page to your Web server. (part 1) – not to be submitted for evaluation

Thank you!

Feel free to contact me with any questions!

emartignon@kaplan.edu

Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!