multijourn.files.wordpress.com€¦ · web viewcss in dreamweaver. you’ve seen in our beginning...

CSS in DreamweaverYou’ve seen in our beginning Web work that CSS (cascading style sheet) coding controls positioning and style, and can set those standards for more than one item at a time. For example: We saw how an H1 heading could be programmed to always be a certain color and a certain size. We saw how it could be used to position an image to the center or side of a page. We saw that this CSS coding could be placed in the head area of the document (an internal style), next to the actual “element” it was to affect (in the body area: an inline style), or in an external style sheet.

An external style sheet can be saved and used over and over, saving you having to set one up again. It can be edited on the sheet itself. It can be attached to multiple pages and Web sites to ensure consistency and efficiency.

We’re going to work with an external style sheet.

This exercise will show you how CSS can be used to position (to design) the different parts of your Web page.

A few words:The definition of a style (all H1 heads will be blue, for example) is called a rule.Each rule contains a selector and a declaration.A selector tells you the name of the style (header, footer, body, caption, etc.).A selector that is only used once per page is called an ID.The declaration tells you the properties and values of the style (color, width, height, bold, etc.).

Think of the Web page as created by invisible boxes or containers.

These containers are created with XHTML codes: tags.Here are structural tags with which you’re already familiar: <h1>, <p>, <h6>.The tag that creates the containers is <div>.You will give the <div> style using CSS.

Note: Think “division” when you see <div>.

We’ll start with a three-column layout with a header and footer. Do the usual start-up stuff: Create a folder on your desktop; name the folder. Set up a new site naming that as the storage folder. Create a basic HTML page. Save the page. Give the page a title. Save it.

Arrange the workspace to “split” if you’re working on a wide-enough monitor. If not, just work in “code.”

What you need to do now is to set up the structure of what you will see in your Web page. Therefore, you will add code to the body section.

In this exercise, we’ll be adding a box that contains all the other boxes (“wrap”); a box for the header (“header”); a box that contains the main content for the page (“main”) including a left-side “menu,” a “story” box in the center, and a sidebar on the right (“right”); and a “footer” on the bottom underneath the “main” box. Each box appears only once on the page so each one is identified as an ID. Each box exists within a set of <div> </div> tags. The “menu,” “story” and “right” divs are nested within the “main” div. All of the divs after “wrap” are nested in the “wrap” div.

This is what the code for the above should look like once it’s entered between the <body> and </body> tags:

<body>

<div id=”wrap”>

<div id=”header”> </div>

<div id=”main”><div id=”menu”></div><div id=”story”></div><div id=”right”></div></div>

<div id=”footer”></div>

</div></body>

Leslie-Jean Thornton | Multimedia Bootcamp 2010 | Arizona State University

2

[I skipped lines to make the nesting clearer.]

Type that into your DW document in the code section. (As you type, you’ll see various prompts or hints come up. You may want to ignore them for now.)

Once the code has been typed in, you won’t see anything other than a wide box with a dotted line in your design view. That represents your “wrap” div. You haven’t placed any content in your divs yet, nor have you “defined” them or put them in a style sheet. So there’s nothing to show yet.

If you were to click on (select) the dotted box, you would see this:


3

and under the code on the bottom left of the workspace, your “breadcrumbs” will show you that you are working with <div#wrap>. The hashtag is used in this instance to show that “wrap” is an ID selector.

CREATING THE EXTERNAL STYLE SHEET

Make sure your CSS panel is open (by default, it’s on the right-hand side of your workspace).

If it’s not there, go to WINDOWS > CSS Styles


4

In the code, put your cursor just to the right of the <div id=”wrap”> tag.In the CSS panel, click on a small icon that looks like a box with a plus sign.

An alt tag pop-up will say “New CSS Rule.” A click will produce this window:

Change location (bottom area) to New Style Sheet File. Click OK.


5

Name your stylesheet in “Save As” and add .css to it. Save.

When the next window comes up, enter these settings in the box option for “wrap” – the box that contains all the other boxes. The width is fixed (here), the height will depend on what’s put into the box, and it will center itself in the computer monitor because of the “auto” on the right and left margins.

Click APPLY, not OK yet.


6

Switch to the Background option and set a color for the background to see it. Click OK.

Your design area will show the “wrap” area in that color, with a shaded area showing what will be on either side of that wrap.

In the CSS panel, notice that the “rule” is displayed:


7

Note the “Add Property” feature. This is one way you can add more definition to the rule later. Another way to access the rule is through the Properties panel that, by default, is below the workspace. Make sure you’ve clicked the CSS option, not HTML, or you won’t see what you need.

[Don’t concern yourself with this for now.]

Add the next ID, “header,” to the style sheet.In the code, place the cursor to the right of <div id=”header”>. Click on the “New CSS Rule” icon in the CSS panel.

This is what you will see:

There are several things to change and the order of changing them matters.FIRST: Delete #wrap so that only #header shows.


8

SECOND: Change the “contextual selector type” to ID.THIRD: Locate where the rule will be defined – you want it to go into your brand new style sheet. You will see that it is now an option in the pull-down menu.

In the window that comes up, chose the box option and set the width for the same width as the wrap (950px) and make the height 150 px.

OK. In the design view, you’ll see the shape and dimension of your header.


9

You won’t see the codes to any of the properties you’ve assigned because they’re in your external style sheet.

On to defining what “main” will do.Same process. Place the cursor to the right of <div id=”main”>. Click on the icon in the CSS panel. Change the settings in the resulting window to the correct box (in this case, “#main”)and the ID selector, and confirm the stylesheet as the place it’s to be saved.

When the next window comes up, set it for a 950px width, an “auto” height, and for a background color of your choice.

You will NOT see any change in the design view at this point. There isn’t any content in the “main” box yet.

Define the rule for “menu.” Same process. Cursor in place. Click on panel icon. Choose the correct options for #menu. OK.

Settings:Box > 150 px wide, auto height. Float left (this means to “glue” it to the left side of the “main” area). When you’ve done that in “box,” go to “background” and choose a color. OK.


10

This time you will see a change in the design workspace.

Define the rule for “story.”Cursor. Icon. Saving options. Settings:

Box > 500 to 600 px is a standard size. For now, use 600 px. Auto height. Float left. Add a color. OK.


11

There is unclaimed space to the right of the story box. It’s necessary to know how wide that is. If you put in the wrong measurement, your layout will not work. If you tell it to have a width that’s too wide for all the boxes to fit inside “main” and “wrap,” the new box will jump to below the boxes you’ve just put in.

To determine the correct width, add the “menu” (150 px) and “story” (600 px) widths together (740 px) and subtract that from the overall width of the wrap (950 px) to get a width of 200 px for the “right” sidebar.

Define the rule for “right.”

Cursor. Icon. Saving options. Settings:

Box > 200 px wide, auto height. Float: right. Background color of your choice. OK.

Define the rule for “footer.”

Cursor. Icon. Savings stuff. Settings:

Box > 950 px width, 20 px height. Clear: both (this means that all the content above the footer has to come to an end before the footer will display). Color: your choice, but make it dark for this exercise. Don’t click OK yet.


12

Go to the Block option. Set text-align to “center.” Go to Type and set the color to white. OK.

This is a Web-page structure using CSS positioning.

Notice that “wrap” and “main” are essentially invisible, and that the only elements that show up are the boxes created to fill them. You could, of course, have them colored white or any other color. These colors were chosen to make the boxes visible to you.

ADDING CONTENT AND FURTHER STYLING

The header and footer are “fixed,” meaning that a height has been assigned to them. You can alter it at any point. The other boxes are “auto” and will depend on the content within them. To see how this works, and to point up some challenges that go along with this, enter type into the middle boxes, starting with the story box.

Here’s one challenge and how to work with it.


13

The content typed into the story box pushes that box down, but not the others. All three boxes will adapt to whatever’s placed inside them. And there’s that gray strip across between the story box and the footer. Do not worry about the gray strip. It will not show in the browser.

The fill-in colers are gray because that’s the color assigned to the “wrap” box. It’s showing through because there are “holes” in what’s covered by the boxes placed in “main.”

Type something in each of the side boxes. Save, then preview it in a browser. (If you had not typed anything in the menu box, the story content would start on the far left.)The page in Firefox (it looks the same in Safari):

Fix the way text displays in the story box:

To edit the rule, you can place the cursor at the end of the tag (the “story” tag in this case) to bring up the properties in the CSS panel. Or you can use the Properties inspector panel at the bottom of the workspace. For this exercise, do that.

Place the cursor at the end of the story tag in the code window. Then look to the Properties inspector panel at the base (by default) of the workspace.

Click on Edit Rule. This will bring up the settings box with which you’re familiar.

In the Box setting, put in some padding so the text and any other content will have some distance from the box’s edges. 10 px is a nice standard. OK.


14

OMG!!!!!! WHAT-THE-HASHTAG HAPPENED!!!!!!

BREATHE. ALL IS WELL.

Here’s what happened. The padding added width to the story box, which in turn pushed the “right” sidebar down. The pink color is the color that was assigned to “main” for precisely this learning moment (generally, it’s a good idea for the wrap and main background colors to match your dominant page color). Here’s how to fix this:

Subtract the 10 px that you put in for the left-side padding (looks nice, doesn’t it?) and the 10 px that you padded on the right from the overall width of the story box.

600 px minus 20 px = 580 px. Go back and edit the rule to make the box width 580 px.

PHEW. Notice that the boxes don’t line up on the bottoms. That’s because there’s 10 px padding top and bottom in the story box but not in the others – yet.

Check it out in a browser and you’ll see essentially the same thing, but without the lower gray strip.


15

TEXT

You set the footer to have white text. Give it a try by typing something. Then format the text by editing the CSS rule through the Properties panel.

Here’s what you get to start (I’ll give you a screengrab of where to find the copyright sign after I show you how to format this):

Prepare to edit the footer rule in the same way you’ve been doing above.

Change to a sans-serif font so that the type is easier to read in high contrast and small size. In the Block option, change the text alignment to center.

OK.


16

Save often as you work. Before you shut down for the session, make sure the stylesheet (with the extension of .css) is in your project folder.


17

multijourn.files.wordpress.com€¦ · web viewcss in dreamweaver. you’ve seen in our beginning...

Documents