The Exasperator Sitejma260rev 01/31/2014

Goals:

Create a National Exasperator main page named NE.htm

Link to it (NE.htm) from your portfolioindex.htm page:

Link NE.htmback to index.htm

Use CSS

  • Use divs
  • Create and style horizontal rules
  • Center the page
  • Set page’s background color
  • Create Image Maps
  • Copying and pasting content
  • Adding special characters

FiveSteps: Use Windows, for the five steps below; not DW

  1. Create a new folder onyour USB Deviceinside Practice, name it Exasper ,
  1. Create an Images folder insideExasper
  2. Download exasper.zipfrom our web site into your Exasper/Images folder
  • Unzip it there (Extract All)…should see five files
  • You can delete the .zip once you have extracted it

Here is what we’ll create:

An advertising firm’s ad options; size, cost

Start Dreamweaver

  • Open your site :
  • Site>Manage Sites>choose your site…(what you called it in the “Dreamweaver creating a site”module)

Creating the NE site:

  • Start with a blank html page
  • File>NewBlank Page>HTML>Layout none
  • Click Create
  • Save as NE.htm inside yourexasper folder

HTML code goes in Exasper( Exaspr’s root)folder; images, etcintoexasper/Images)

Choose Classic workspace

  • Your screen may be in Code view, if it is, click the Design button
  • If you like HTML (lol!!) , can click the Code button
  • Or, can choose Split view to show both

Goal: Create a page

  • Give this page a title (Top right of the document page): The National Exasperater | Home

Because search engines look at the title, feel free to make elaborate titles

  • Hit Enter and click Split or Code and look at the code…look familiar?
  • Switch back to Design

Clean up the code to simplify things. End up with:

Inserting Images

  • From the menubar:Insert>Image(Or use the window>Insert panel)
  • Browse to banner.gif

  • Click OK
  • Look at the Split view…HTML look familiar?
  • Back to Design

Should look like this:

Test local (F12)

  • Test remote:

…Hot Spots.a.k.a Image Maps

  • Let’s say that if someone clicks the red circle, it takes them to Google.com.
  • Look in lower left corner of the Properties panel: four shapes

  • Choose the circle tool …why choose circle?
  • Draw a circle around the red object: Use arrow keys to move the circle
  • Or pressesc then select the circle to move/resize, arrow keys move object apixel at a time
  • You might get theAltwindow if you didn’t disable it
  • Now come down to Link area and type

Target: Where to show the page:

If you click away and then back, you can resize the circle

  • Now, I want the small text in the lower right corner of the banner to go to a different site, say
  • Select it using rectangle tool
  • Create the link to Yahoo
  • FTP (upload) the Images folder in the Files panel (F8). Also FTP the NE.htm page (Note: Because we specified a testing server, Dreamweaver will FTP for us!)

Previewing a Page

  • Press F12 to view ( If prompted to send dependent files, say yes)…or File>Preview in Browser
  • Rollover the hot spots and look at your cursor
  • Checkout the code:Try doing this without Dreamweaver!!
  • Called an Image Map
  • Possible use: Suppose had a map of US. Could use the image map tools to link each state image to its home page (If every state had one)

Add the Advertising Text: Using existing content...copying/pasting

  • Could type it, or import it from the zip file extraction (DWtext.txt)…let’s use this method
  • Find/show the Files panel (Window>Files or F8)
  • Double-click the text file; it opens a new Document window (tab)
  • Select line4 in the text page (Ad sizes and Rates) , copy and paste into NE.htm page, just after the image:
  • Press Enter to make a paragraph
  • Click on the text,( <p>) and note the “Tag Selector” at bottom left
  • Click the p to select the text of the paragraph
  • Use the Property Panel to make the paragraph italicized…better to use CSS…later
  • Copy/Paste line # 5 from DWText.txt to below the first line of text
  • Press Enter ( If it’s italicized, toggle it off):

Horizontal Rules

  • Add a horizontal rule( see above) to separate what we have so far, from the rest of the page
  • Choose Insert>HTML>Horizontal Rule (Or use Insert Panel)
  • Adds a line
  • Check out the Properties Panel
  • Make it 700 pixels wide, 1 pixel as Height, AlignLeft (Default is center), uncheck Shading
  • Position cursor at end of the new horizontal line, and press Enter
  • Type “Square Button”, Press Enter:
  • Insert>Image>
  • Choose square_ad.gif
  • Click OK
  • ClickEnter
  • Type: $100 for one month
  • And then on the next line: “Dimensions 125 x 125”
  • Add another horizontal rule, same properties: I usedcopy/paste
  • Make sure the hr is selected if you copy/paste:
  • Below the line type“Full Banner” and press Enter
  • Insert>Image
  • Find full_banner_ad.gif

Below the banner ,type:

“$560 for one month”

“Dimensions 468 x 60”

  • Press Enter
  • Add another rule…same properties
  • Below it type Half Banner
  • The image is half_banner.gif

(Remember that if for real, we would add alt text for each image)

Type:

$230 for one month

Dimensions 234 x 60

  • Add one more horizontal rule
  • Underneath it, type:Contact Informationand then press Enter

In the text file, there is text we can use

  • Select and then copy lines 35-37
  • Paste into NE.htm
  • Add one more rule

Then type (insert a copyright symbol) 2014 The National Exasperater

  • To insert the symbol: Insert>HTML>Special Character>Copyright
  • Save
  • Preview (F12)

Using CSS

Customize existing elements, and then create some classes and an ID

Color the page’s background using CSS

  • Find the CSS Stylespanel on the right, or, if necessary, selectWindow>CSS Styles,and pull the panel off
  • Click theAllbutton:
  • Click the New CSS Rule button
  • What element applies to the entire page? <body>
  • What selector type? Tag, class, ID?
  • Select Tag, and thenas the selector name, selectbody:
  • Click OK
  • Say to store the rules inside this document only:

Shows this window:

Will use the categories Type,Background, etc.

Here is what we’ll do

  • Set the Background color
  • Limit the body width to 700 pixels wide (matches widest image)
  • Center the page
  • Add a border around the page

OK, let’s start

  • Click Background category:
  • Find Background-Color:
  • EnterColor: #669999…
  • Here is what the color looks:
  • The entire page will be this color

Note: Suppose you wanted to match a color already on the screen:

  • Double-click the color box
  • Eyedropper appears
  • Click the color you want by clicking a spot.
  • Click Apply to see effect … leave as#669999

Box Category (bodyis a box, so it has a width, a margin, a border etc.)

  • Now, choose Box category
  • Recall paragraphs, <h1> elements etc. are inside a box, which you can’t normally see
  • Want the content to be In a 720 pixel area (a bit bigger than the large banner at the top):, type it in the width
  • Uncheck Margin>Same for allbecause we don’t want a margin on all sides, just left and right

To center the page on the screen:in the Margin area enter:

  • Auto left and AutoRight:

(We did similar task in HTML where we centered a table)

Padding

  • Make all padding = zero. Later, we’ll come back to padding and assign a different value .

Border Category

  • Choose Border category, Double as Style
  • Color: #4C3324 .Found using Adobe Kuler site
  • I chose 8 pixels wide
  • Click Apply
  • Press OK

Here is the actual generated CSS for the styled <body>

body {

background-color: #669999;

padding: 10px;

width: 720px;

margin-left: auto;

border: 8px solid #4C3324;

margin-right: auto;

}

Here is the current CSS Styles panel:

  • To edit an existing style, click it in the top of the panel, and use the various dialog boxes or use the lower half and make changes there

Preview

  • Seems like nothing happened, but press F12
  • Look for the box and note the fact the page is centered (May have to Ctrl- to shrink page a bit)
  • But the margins are same color as the body:

See the effect from using padding zero? Text runs up against box’s 700 pixelleft border

Next goal: Make center section be a different color than the rest of the page: Introduction to <div>s

All our content is inside a <body> tag, so we can’t modify the color of the <body> tag or everything will be affected:Here is what we want

We are going to add a “wrapper” called a <div>around just the body

  • First, select the entire body <body>:
  • Click anywhere on the page
  • Go to the tag selector and you’ll see <body>
  • Click <body

You just selected the entire body. Now we need to name the selection (called a div)

Divs

  • Going to add what’s called a <div> element ( a division; it’s like a super paragraph)
  • Says: Here is a new section of my page
  • Will name it “content”
  • Going to create (wrap) the div around the body, which is currently selected…make sure the <body> is selected
  • Choose Insert>Layout Object>Div tag

This should appear:

We want the <div> to be what is selected, see Insert?

  • Make ID be “content”, content is now the name of the div
  • Click OK
  • We just put a special kind of box around the entire body
  • Flip to codeview
  • See the new element called div?

It starts right after <body>, ends after </body>

We want the divarea to be a new color. It will be a pale blue.

  • Choose New>CSS Rule
  • We gave a name to a section of our document; an ID. So selector is ID:
  • And selector name will becontent (type it in)
  • Click OK
  • Choose Background ; Change Background-color to #D0E5E5

Kuler:

  • Click Apply
  • Shows a view of the page, but hasn’t been applied yet
  • Ctrl- to reduce size you see
  • <div> text buts up against left border, so need padding (10 pixels),for our div

Choose Box category

  • Click Apply…..that’s better
  • Click OK
  • Press F12

Changing How Images imgDisplay

Now, we want to modify how oneof the images displaysi.e..Want a tag that if used, displays images differently than the default, and want to be able to apply the style to any/all images.

Since we want to style images, makes sense we try to modify img properties…as you’ll see, it won’t work

  • New CSS rule, choose IMG tag. Note that it will apply to all images, but we want to style one image only…continue…
  • Click OK

What happens is Dreamweaver creates a space and fills that space with an image. That space can have a background color

  • Enter#997966as theimg Background -color

Box Category

  • Type 8 pixels of padding

Finally, want a solid border

Border Category

  • Solid, 11 pixels,color #2B4C4C:
  • Click Apply, and then OK
  • Look at your images now…all changed

But we just wanted one image to change…all changed because we used img tag. We could select the image (small button) give it an ID and use the ID selector. Or can use a Class

  • First, delete the img CSS (right-clickDelete)
  • New CSS class rule, which we can apply to anything
  • New Class
  • Make up a name: MyImg for example
  • Click OK
  • Enter Background- colorof #997966

Box category next

  • Type 8 as padding

Border

  • solid, 11 pixels, color#2B4C4C

Click OK…nothing happened! We made a class named myImg, but it’s not attached to anything. Remember a class can be attached to anything, which is what we want.

  • Select the small square image (near the top)
  • In the Properties panel, choose MyImgclass:

Did it work?

  • Save

Modify h1 tag properties

  • Select the first line of text and make it a heading 1.

Now, create a New CSS Rule

  • Choose, Tag>, h1
  • Type: select Georgia (a serif font designed for the Web)
  • Size: 2.5em
  • Font variant – small caps
  • color#2B4C4C ..see below
  • Click Apply, and then OK

Result:

  • Save and test

Linking

Let’s link our index page (root version) to our ne.htm page and vice versa

  • Open your root index.htm

:

  • Select Exasperator
  • Select the Link box:
  • Use point to file, or browse to ne.htm
  • Open ne.htm and type HOME somewhere. Select it and link to index.htm

END of Exasperater # 1

Exasperator 1Page 1