Practice Tutorial Dreamweaver CS5 - IT Learning Pods CS5.pdf · Practice Tutorial Dreamweaver CS5 ... Preparing Files for Dreamweaver: Before we begin to construct a web page in

Practice Tutorial Dreamweaver CS5Middle Tennessee State University

Jane Venes

Dreamweaver page �

Preparing Files for Dreamweaver:

Before we begin to construct a web page in Dreamweaver (or HTML) we need a plan. Usually the site is designed in Photoshop or Illustrator, then the images are extracted and saved for use on the web site. We will want at least three folders.

The Site Folder:

The “Site” Folder is where you will store the actual Dreamweaver and CSS files.

The images that you will use on the site must also go into Site folder as well as style sheets, animations, and other visuals. If these visuals are not stored in the same folder as the site files, the browser will not be able to find them and they will not ap-pear in the browser. Images saved for the web, typically, are 72 ppi, and jpeg, gif, or png. These will open quickly in the browser. We are careful to limit images in the Site folder to those that actually appear on the site.

Working Files Folder:

The Working files are the Photoshop files and Illustrator files (and others) that were used to create the visuals. You may find you need to modify an image in which case you will want to keep the original workable psd or ai file.

Sketches Folder

The Sketches Folder may be considered optional. This is where you store the design files used to plan the site.

Practice Files

For this lesson, we will be using the files for the “Pick-a Basket Site.” Since the files were already prepared, we will not have working files unless we create some, so that folder has only a text file. There is an example image in the Sketches folder which will provide a plan for our site. Download and explore the PickBasket folder.

The example


The Dreamweaver Workspace

The Dreamweaver is a program that writes HTML code. The big advantage of Dreamweaver is that we can see what is happening as the page develops. When we work with Dreamweaver we can choose to work with only the visuals, in which case we choose “Design view.” We may also choose to work with only the code (Dreamweaver has an excellent code writer) in which case we would choose “Code view.” It can be useful to see what is happening in the code when we alter a visual or what is happening to the visual when we alter the code, for this we will choose “Split view.” We will want to work in Split view.

Opening a New Dreamweaver page

When you click the icon, the Welcome screen will open. If the Welcome screen does not open, if not, go: File > New.

Let’s look at the Welcome Screen for a minute. On the left, it offers the opportunity to open existing documents. These may be either pages that have been open recently, or pages that are stored on the computer (or elsewhere). To open a recent file, simply click the name dis-played on the Welcome Screen. To open an older file, click the file folder and browse to the file.

Today, however, we intend to begin a new Dreamweaver page, so we need to look at the middle column and click HTML

Recent files

Stored files

HTML

Opening Dreamweaver

Once the site has been designed and the files are saved to the appropriate folders, we are ready to open Dreamweaver and begin constructing the site. Open Dream-weaver by clicking on the Dreamweaver icon in the dock, usually at the bottom of your screen. On Windows Go: Start > All Programs > Adobe Dreamweaver


Code view Split view Design view Classic workspace Layout

Tag Selector

Properties panel

Panel groups

Setting up the Dreamweaver Workspace

To prepare the workspace, we will want to do the following:

1. In the upper left corner, click the “Split view” button

2. Toggle the Workspace to “Classic” (This will open the Insert bar)

3. Activate the “Layout tab” on the Insert bar.

One of the first things we want to do is give the page a Title. Click in the Title Window and Type “Home”

Opening Panel Groups

On the right side of the workspace are the panel groups we will want to check to see if the following are open: CSS and the Tag Inspector. On the top of the Tag Inspector, click the Behaviors button. If you do not see something you need, go to Window in the top menu bar.

The Code Panel The Document Window

Title window


Getting things on Screen

Getting things on screen is actually pretty easy; the difficult part is getting them on screen in the right places and making them function. First, though, we should save the document. Go: File > Save as, and save the new page as, “Home,” in the Site folder.

Now, let’s start with just getting something on screen. Go: Insert > Image

Navigate to the Pear image and select it. The image will appear on screen. The white back-ground is difficult to see on the page, so let’s give it some contrast.

Go Modify > Page Properties

...or just click the Page Properties button in the Properties panel. Either one will open the same menu box. Dreamweaver has several ways to access almost anything. In the menu box, select a nice dark green color for the background. This is also where we might specify a back-ground image or a text color. The Page Properties menu box has an options menu along the left side of the box.

Use Appearance CSS to set background color or image

Underline links or never underline

Set background colorSet background image

Other options

The Page Links Option


Adding Text

Let’s also add some text. Click beside the Pear image and a cursor will appear. Don’t be sur-prised if the cursor is as tall as the image. It will change when you begin to type. Let’s just type the following:

Pears grow on trees and have been cultivated as a food since ancient times. The Pear tree will set fragrant white blossoms in Spring which mature into an edible and tasty fruit in early Autumn. There are numerous varieties of pear which ac-count for a variety of shapes and colors at maturity.

By default the text will align with the bottom of the image. If we click the image, the Proper-ties panel will offer an align option where we may choose to align middle or top. Try a few of these. The lines of text are as long as the screen unless we intentionally add returns. We will want more control of both text and image if we are to design effectively.

The Code Panel

While we have been adding things to the right side of the Document window, the left side has been changing. To understand what is going on, we will need to know something about the HTML language that actually controls what happens on screen. HTML stands for “Hyper Text Markup Language.” It consists of a series of abbreviated words and symbols, not unlike what we use in text messaging. The HTML code controls what appears on screen. Dream-weaver writes the code for us, or we can write the code directly into the Code Panel. The most effective designers do some of each. HTML items are called tags, and there are several kinds of tags. Almost all tags are between carrot markers, like this: <html> The carrot markers tell the browser that the language between them is not supposed to appear on screen. Another basic thing about HTML tags is that they usually come in pairs, an open tag and a close tag. For example: <Title>PickBasket</Title> the </ > marker contains the close tag and the < > marker contains the open tag. In the case of the Title, we need this information to know where


the Title begins and ends. The kinds of page placement are framer tags, like <Title> which sur-round information that appears on screen so the program knows how to display the informa-tion, tags that go inside other tags, and tags that can stand alone without a close tag. The image is set with an <img> The img tag does not require a closer tag but ends with />. Inside the img tag, must go an src tag (Source Retrieval Code) This is like an address on the computer that tells the browser which image. The src is like a first and last name. The first part is the name of the image and the second part is the kind of image. The full name of the image must go in quotes. So the complete image tag is: <img src=”Pear.jpeg”/> Sometimes other informa-tion goes in the img tag too such as size, border or align. Align on an image tells where the text goes beside the image, not where the image goes.

An HTML page has a basic structure. If something is out of place parts of the page may not work.

<html>

<head>

<title> some words </title>

<style>

</style>

</head>

<body>

</body>

</html>

The page begins with the HTML open tag and ends with the html close tag. The Title and the Styles Tags go inside the HEAD tags. Things that must load before the page opens go inside the HEAD tags. Most of what appears on screen goes between the BODY tags. For more infor-mation about how to use HTML tags see the companion document: Fundamentals of HTML. Check the Code Panel and locate these basic structural tags.

* Note: When we type code by hand, it is traditional to write in all caps to distinguish it from the other text.

Dreamweaver’s code writer uses lower case for the standard tags


Div tags and CSS

The most effective way to place material on a web page and control its location and/or ap-pearance is to use div tags and CSS (Cascading Style Sheets). div’s are containers that hold text, images, animations, video, and more. CSS positions the div’s on the screen and controls a variety of features inside and even outside the div’s. Typically div’s are assigned a name called an id which makes it possible to apply the proper CSS to each div. A typical div tag looks like this:

<div id=”Container”>

</div>

Notice the div tag has an open and close tag as well as an id within the div tag. Anything be-tween the open and close div tags is inside the div.

Let’s insert two div tags, one with code, and one with the Insert tools. First, delete the Pear image on screen by clicking the image to activate, then press delete. Then click behind the <body> (open body) tag and return once or twice. Then type: <div id=”Container”> return twice and then type: </div> that will close the tag. Click the document window, a very slen-der div should appear. Now let’s use the Insert method. Make sure your workspace is in layout view and then click the Insert relative div icon.

Absolute div Relative div

The Insert Div Tag box will appear. One of the nice features about this method of inserting a div is that you can choose where the div will go by toggling the Insert window to the desired location. In this case, choose “After start of tag,” and then select “div id Container” as shown.


Divs and CSS continued

We also need to give the div an id, so in the ID box type, “Header.” We can add the CSS rule now, or we could do it later. Let’s go ahead and add at least one rule now. Click the “New CSS Rule,” button. The new CSS Rule menu box will open. First we need to choose which type of rule we need. For our purposes, toggle the selector window to ID, that means it will apply only to the tag we name. Because we entered through the new div menu, the id name of our new div is supplied for us. We could change it if we wanted to, but for now, this is what we need. Be aware that both DIV ID names and Style names are case sensitive. Be attentive to capitalization in typing these names.

Finally, we need to choose the kind of Style sheet, which basically just says where we intend to apply the style, just on this page or on others we will create later. For today, This document only will be OK, but external style sheets (the other option) are handy too. Click OK.

The Styles Panels

Clicking OK will bring up the styles panels. This panel also has a list of options on the left. It includes Type, Background, Block, Box, Border, List, Positioning, and Extensions. These are all things that we can control using CSS. Click each and browse a little. For our Header Div, we will begin by adding a border on the bottom. Click the Border option. Then uncheck the “Same for All” boxes and set the specifications to match the example on the next page. Click OK to close the Styles Box and also to close the New Div Box.

Dreamweaver page 10

An Image in the Div

Before we insert an image, we should save the page again; do this periodically as you work.

Now that we have a Div, let’s put something in it. In the document window you should see some text that indicates where to put content in the new Header Div. Click behind the text and Go: Insert > Image. Navigate to the Ident image and click it. The image should appear on screen. Now backspace over the text to remove it. Notice also that the styles we defined have been appearing in the Code Panel.

Dreamweaver page 11

Setting Styles

With div#Container selected in the Tag Inspector, click the New Styles icon and select an ID div. When we select an ID Div, it will apply only to that Div. The name #Container should be already in the ID box, if not, just type it in. The CSS Rule Definition Box will open. We have seen this box before, but #Container will need a few more rules. In the Box Options adjust the set-tings to match the image shown below.

Using the Styles Panel

We can also create styles using the Styles panel on the right side of the screen. We need some Styles for the Container Div so let’s do it that way. Find the Styles panel on the right side of your screen.

Edit Style New Style

Styles Panel

Tag Inspector

The easy way to apply a Style to an existing Div is to activate the Div in the Tag Inspec-tor and then click the New Style icon on the bottom of the CSS panel. Click the edge of a div on screen, it will turn blue. Then look at the Tag Inspector in the lower left corner of your screen. Click the div#Container name. It will activate. Now the CSS Panel will know which Div should get the new Style.

Dreamweaver page 1�

Setting Styles

We will consider the 700 px height to be temporary, specifying a height now will allow us to see what we are doing, but we will likely edit the style to remove this later. When we are fin-ished we will want the height to stretch with the content and page size.

We will also want a background color, so go to the Background option and select a light lime green.

More DIV’s

Next we will need some more DIV’s. Click the Relative DIV icon on the Insert bar. The Insert Div Tag box will open. In the Insert box select “After tag” and then select <dif id=Header>. We want this DIV to go after the “Header” DIV on the page. Name the new DIV, “Navigation” and click the “New CSS Rule” button.

In the CSS Rule Definition box

1. Click the Box option and set a width of 250 px and a height of 500 px.

2. Also in the Box option, select “Float left.”

3. Click the Type option and select a font face of Verdana... at size 12 bold.

Click OK to close the Styles box and OK to close the DIV Tag box.

Click inside the new Div and enter these words: Meet Our Growers, Apple, Pear, Banana, Grape, Citrus

Return after each phrase to create a layout similar to the one below. As soon as we create another page, these will become links.

Meet Our Growers

Apple

Pear

Banana

Grape

Citrus

Editing a Style

The text we just entered is hugging the left edge a little too tightly. Let’s edit the Style to correct that.

In the CSS Styles Panel, locate the Style for Navigation, click to activate, and then click the Edit Style Icon (pencil) at the bottom of the panel. This will reopen the CSS Rule Definition box. Click the “Box” option, uncheck “Same for all,” and enter 12 under “Left” in the padding box. Select “Points” and click Apply. Look at the Document window to determine if 12 points is enough padding. Padding will be applied like a stroke, half on either side of the center line. It works well with text. If we are satisfied with the applied change, click OK to exit the CSS Definition box.


Create and Apply a Class

A Class is another kind of style that is particularly versatile. It can be applied to almost any-thing. We are going to want a class for the center part of our web page so we will create it in advance. Return to the Styles Panel and click the New Style icon on the bottom of the panel. When the New Style box opens, Select “Class.” We need a Class here because we want to use the same Style for several DIV’s. In the Styles panels do the following:

1. Name the Class, “Fruits.”

2. Select Box, and set a width of 305 px, the size of the images we want to insert. We do not need to set a height; the DIV will conform to the size of the image.

3. Go to Type and select Verdana, Geneva, 10 points, and Bold

Click OK and close the Styles box.

Hint:

If you want to know the size of an image, open it in Photoshop and go:

Image > Size

Matching Div’s

Now let’s create the four DIV’s we will need for the center of our site. Go to the insert bar (Lay-out tab) and click the insert Relative Div icon. Set your Insert Div settings to match the image below. We have already created the Class, so select “Fruits” in the Class window. Click inside

the Document Window. A new DIV should appear. Now we just need three more to match. The easiest way to get matching DIV’s is to copy and paste in the Code Window.


In the Code panel, locate and highlight this strip:

1. Go: Edit > Copy; then

2. Click behind </div> to insert a cursor and press return.

3. Go Edit > Paste.

Return and paste two more times for a total four DIV’s. Modify the Code to match example number 1 below.

Next rename the ID’s as shown in example 2

2

1

Still working in the Code panel, highlight and retype the Content line to match the ID name of each DIV as shown in example 3.

3


Your final Code section should match example 4 below.

4

The four new DIV’s should look like the example below in your Document Window. (You may need to click once in the Document Window to make them appear)

Apply a Class to Text

Another way to apply a Class is to use the Properties panel. This method is especially use-ful for things like text that appear in a number of different places on the page. Let’s create another class to serve as a page title. Click the New Style icon in the bottom of the CSS Styles panel. In the New CSS Rule box, specify “Class,” and name it Titling. Click the Text Option and choose: Verdana, 14 points, and bold. Select a redish purple color that will roughly match the grapes. We can either choose a color from the color palette, or sample the color directly from the image.

In the Navigation DIV, highlight the word, “Home.” Next locate the Class window in the Proper-ties panel (bottom of your screen). Use the pull down menu to select, “Titling.”


Apply a Style to a Tag

Our page still has no Headline, for this we will want to use an “H-tag.” The browsers depend on “H-tags” to identify the major content on the page. First, though, we will need another DIV. Click the new relative DIV icon on the Insert bar and from the pulldown menus choose:

Before end of tag and <div id=”IdentBar”> Name the new DIV, “Headline”

Click the New CSS Rule button and do the following:

• In the Box option, set the box width to 500 and the Float to “right”

• Click the Position option and set the position to relative

Click OK to exit the CSS dialog, and OK again to close the New Div box.

Highlight the Content line in your new DIV and replace it with: Pick-a-Basket

Now we want to specify that Pick-a-Basket is an H1. Make sure the words, “Pick-a-Basket” are highlighted and then, in the Properties panel, locate the Format window and use the pull-down menu to select H1.

HTML has several defaults that determine the look of an H-tag. These defaults include things like size, line spacing and font face. Because of the defaults, our Headline may not look quite the way we want it at this point, but we can change that by putting a style in the H1 tag.

First, let’s let the Headline DIV move up beside the Image in the IdentBar. Click the basket image to activate it.

Format Class


Now for the Style; click the New Style icon in the bottom of the CSS Styles panel. When the New Styles box appears, specify “Tag” in the Selector Type window and select “h1” in the Selector Name window as shown above.

When the Style definition box opens, click the Type option and select: Verdana, 24 points, bold, and match the color to the Titling text. (If you don’t remember the color, you can just pull the eyedropper over to the word Home and sample it). Click Apply to see if your headline is the right size and color, otherwise adjust it slightly. Go to the Block option, and choose Align center, then click OK to exit the box.

Align

Image indicator

Now look at the Properties panel; it will have changed because we are now looking at prop-erties of the image. Locate the Align Window and toggle the pulldown menu to “left.” That means the image should be to the left of anything beside it.

Type

Block


Dreamweaver assumes this line is part of the H1, so the text is too large. Highlight the subtitle and go to the Class window in the Properties panel; select Titling.

We also need a subtitle so in the document window, click behind “Pick-a-Basket” and press shift and return together. Shift and return will insert a line break in the code <br>, roughly this amounts to a single space. If you just press return, that inserts a paragraph <p>, roughly equivalent to a double space. On the next line, type:

Custom Fruit Baskets fresh from the Orchard

Our new headline should resemble the example above, but we should probably move it over a little. In the CSS Styles panel, activate the #Headline style, then click the edit (pencil) icon at the bottom of the Styles panel. When the CSS Rule Definition box appears, click the Box option. We will adjust the margins to position the Headline DIV. In Dreamweaver, Margins are applied to the outside of an object, not inside the perimeter.

Uncheck the “Same for all” box

Enter 5 px in the Top Window

Enter 100 px in the Right Window

Click Apply and check the position of the text in the Document window. If you click the edge of the DIV, Dreamweaver will display the margin that has been added.Continue to adjust the margins until the position is more or less centered over the Fruit DIV’s. The object is to move the Headline DIV over without overlapping the image. It may also be useful to adjust the width of the DIV.


Checking in Live View

Let’s see how our page looks. We have two ways to check it, a quick look, and in the browser. To take a quick look how the page should look on screen, locate the Live View icon at the top of your window and click it. When we are in “Live view” most of the tools in Dreamweaver will be deactivated. If we want to make any changes, we will need to click the Live View button again to return to a working screen.

Checking in the Browser

Another way to check our work is to preview in the actual web browser. To do this, click the “Preview in browser” icon (globe). A drop-down menu will appear allowing you to select from the available browsers. Select Firefox, if you have it, other wise choose Safari or Internet Explorer. A Save box will appear, go ahead and click Save. It may take a few seconds to open, but the web page we have developed will open in the browser window. The browser screen appears over the Dreamweaver window. Dreamweaver is still open behind the Browser page. You can simply close the browser when you want to return to Dreamweaver.

Live view Preview in browser

Dreamweaver page �0

Adding Links and Page Duplication

In order to have links, we should have another page. This will actually be easy. Go:

File > Save as

...and save the page once again as “Home.” Then save the page a second time with a different name. Let’s call it “Grower” this time. Temporarily close “Home” and let’s make some changes on the Grower page. This is another time when it is useful to work with the Code. Looking at the Code panel, locate the four DIV’s that we created for the four fruits. Highlight and delete them. Now let’s add a new DIV. On the Insert bar, click the insert relative DIV icon and choose “After tag,” and <div id=”Navigation”> In the ID box, call it Appleby.

Click in front of the Content text in the new DIV and go: Insert > Image

Navigate to the Images folder and select, “Susan.”

The image will appear. Then press Shift and Return together to send the text under the image.

We could use a Class for this text. Click the New Styles icon on the bottom of the CSS Styles panel, and select, “Class,” then name the style “Basic” In the Type Option, select Verdana and 12 points. Click OK to exit the dialog. Now Highlight the text under the Susan image and re-place it with the name: Susan Appleby.

Shift return and add the text:

(You may choose to copy and paste this text from the file in the Working Files folder)

The Appleby family has been growing apples for three generations. They have twenty-five different orchards and grow ten different varieties of apples. Appleby apples are hand picked and packed to meet our specifications. They arrive orchard fresh at your destination.

Return to the CSS Styles panel and click #Appleby to activate it, then click the edit (pencil) icon in the bottom of the CSS Styles Panel. Select the Box option and edit the margins until the image is positioned well on the page.

Edit the margins

Dreamweaver page �1

Linking Two Pages

Now we are ready for some links. Highlight over the word “Home” in the Navigation Div on the Grower page. Locate the Link window on the Properties panel, and click the folder to the right of the window. Navigate to the Site folder and choose, “Home.”

Page Properties

Link

The link will turn blue and an underline will appear. Let’s get rid of the Underline. Click the Page Properties button on the Properties panel. In the Links CSS window, change the Under-line style to “never underline.” We can change the link color here too, but we could also create a Style for the links. Save your page.

Now reopen the Home page. Highlight the “Meet our Growers,” text in the Navigation DIV, then go to the Link window and click the folder again. This time choose “Grower.” Save your page.

Click Folder

One more change. Highlight over the Meet our growers text in the Navigation DIV and replace it with “Home.” Then Highlight over the Purple “Home” title and replace it with “Meet our Growers.”

Dreamweaver page ��

Test the Links

Now let’s test the links. We need to preview in the browser for this so click the Preview in browser icon (globe) at the top of your screen. Click the “Home,” and “Meet our Growers,” links to see if they work.

There are other interesting ways to make links, to learn more do the tutorial on Links and Navigation, coming soon.

Documents

Practice Tutorial Dreamweaver CS5 - IT Learning Pods CS5.pdf · Practice Tutorial Dreamweaver CS5 ... Preparing Files for Dreamweaver: Before we begin to construct a web page in