Download Images in Web Pages

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 Terms
On the Reading page
Read Assigned Text
On the Reading page
Respond to the Discussion Board
30 Points
Case Study - A Sharper Image
Complete the unit project and upload to assignment
dropbox for grading
50 Points
On 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:


The background attribute:


Specifies background colors
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!
[email protected]

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!