goals: - duquesne media · web viewfind the magic erase tool: one click erases most of an image....

Exasoer2 02/05/2013

Goals:1. Making Images Transparent

a. Note the white background on one of the images:

2. Creating Lists3. Adding Shading to text4. Changing body text5. Creating external style sheets

Start Dreamweaver Set Workspace to Classic, then reset Classic Open your NE.htm page

ListsRecall we created ordered and unordered lists using HTML

Difference?

e.g. <ul>…<li>…</ul>

Select the bottom two lines inside Square Button area

Exasper 2

Look at the Properties panel: See the UL tool?

Click it Repeat for the other ads Look at the code…see the <ul> and <li>’s?

Shadow Effect…Firefox only… Want a shadow effect on the main heading Need to make the <h1> text larger…must modify existing css Double-click on the h1 style:

Exasper 2

This opens

(Note: We could have clicked here)

Switch to code view

Exasper 2

Move to just before </style> line and create a new class:

.textshadow { text-shadow:2px 2px 12px #000;}

o 000 is a short cut…really 000000o Is black

This will show a 2 pixel shadow on left and right side of the text to which we attached the new style

12 pixels is the spread

Click Refresh button (If DW asks for it) Flip back to Design view

Need to select what to apply it to

Now, click the <h1> in the Tag Selector (lower left corner) (We want the shadow to be on <h1> elements)

In the Properties panel, find “class” dropdown. You should see the textShadow

Exasper 2

Preview in ie and Firefox (File>Preview)

TransparencyMaking an Image transparent (Can use gif/transparency) but what if image isn’t a gif

Want to eliminate the white background (on the third one…Missing Manual)

Save In the Files panel, right-click on half_banner_ad.gif and choose

Open with Photoshop)

Result:

Exasper 2

As it is, you have a white background…want to make it transparent so can see what’s behind it, on a Web page

Zoom in (Ctrl-+) We’ll delete the white area

Find the Magic Erase tool: One click erases most of an image

If you try to “erase” the white won’t be able to. We have to change the Mode of the image from gif to RGB (Red Green Blue)

Image>Mode>RGB

Zoom in a bit (Ctrl-+)

Move and click the eraser tool over the white areas: (Including the “D” and “0” inside)

Exasper 2

Save as a png (Portable Network Graphic) this time.

File>Save for Web Choose png-24 this time Choose second version (4-up)

Click Save Save in exasper /Images folder

Close Photoshop

Switch back to Dreamweaver Delete the original image from the page, add the new png Insert>Image

Browse to

Exasper 2

Or, just drag it over!!

Result:

Change the body font Globally Since want to impact the entire document, modify the <body> tag rules

Open body css Font: Choose Verdana, 1 em (sans serif) Line height is spacing between lines (aka leading)

Good value is 150%

Exasper 2

Type Color: #4C3324

Click OK Save

Start a new page. Going to link the pages File>New>Blank HTML Save as NE_Contact.htm

Now for content.

Exasper 2

Go to your exasper folder and double-click on the DwtText.txt Select the privacy portion:

Our Privacy Policy

The National Exasperater takes your privacy seriously. Our mailing lists are for the private use of The National Exasperater, Cosmopolitan Farmer, and our partnership network of 10,000 other web sites. We will not share your information outside of this small group, and, unless the price is very high, we will never sell your data to a third party. We hope this makes you comfortable. If you have any questions please e-mail our Privacy Department.

Copyright 2013, The National Exasperater.

Copy and Paste into NE_Contact.htm page Change the word Copyright to the symbol, (Insert>HTML>Special

Character>Copyright) and make it 2013 Title the new page “Privacy Policy” Select the first line and make it a <h1>

OOPS, entire policy becomes an <h1>

Ctrl-Z Press Enter after the first line and now make it an <h1> Add horizontal rule after the first line and before the Copyright

line (700, 1 px, align left, no shading) Save

Exasper 2

Yet to do:

Link the NE.htm page to our index.htm page, and vice versa

Link NE.htm to Contact_NE.htm Link Contact_NE.htm to NE.htm Link NE.htm to Contact_NE.htm Create an external style sheet Style NE_Contact

All of which are done in exasper3.doc

Exasper 2

goals: - duquesne media · web viewfind the magic erase tool: one click erases most of an image....

Documents