|
Tutorial 2, Working with Graphics and Hyperlinks, pp.
69-124
Session 2.1, pp. 70-93
-
Changing the Background Color of a Web Page, p. 70
-
Inserting a Background Picture, p. 72
 p.
75. To fade a background picture: click
Insert Picture From File button; browse to desired picture and
select it; from the Pictures toolbar, click the Color button,
Washout; resave the picture then select it and delete it from the Web
page. Then follow the normal steps to insert the background picture using
this file (Format, Background, Picture, etc.).
p.
75. To add a fixed custom background picture:
click Insert Picture From File button; browse to desired picture
and select it; from the Pictures toolbar, click the Color
button, Washout; right-click the picture and choose Picture
Properties; under Size, check Specify size and
check Keep aspect ratio; change the Width to 1600 pixels
and click OK—this will make the picture wide enough for
most monitors and resolutions—experiment with other widths (try 1200) if
1600 distorts picture too much; click the Resample button on the
Pictures toolbar; save the picture then select the picture and
delete it from the Web page. Then follow the normal steps to insert the
background picture (Format, Background, Picture, etc.) using this
file and check Make it a watermark to keep the picture fixed. Click
here
for an example of a Final Web site in which the home page background uses
a fixed background.
p.
75. To stop a background picture from tiling:
The options that are immediately available in the Page Properties dialog
box will tile a background image. That means that there will be many
versions of the image repeated throughout the page. If you don't want
this effect, you'll need to add a style to the <body> tag: click
Format, Style, double-click body. Then click Format
button, Border, Shading tab. At this point, you can add
the path to the picture, and select the no-repeat option. That will keep
the image from repeating, or tiling, across the page.
p.
75.
To Paste Drawing Objects, WordArt, or
graphics
as separate image files, remember that if you copy and paste an image such as
clip art, WordArt, or a drawing object from Word to FrontPage, you must
take special steps in Word first to insure that the pasted image comes
in as a separate file for embedding. First create the image in Word with the Layout position In
line with text. To do this in Word, select the image, right-click it,
and click Format Picture, Layout tab, Wrapping style,
In line with text, OK. Next, copy the in line image, and then paste it into FrontPage as an Image
Tag using the Paste Options smart tag list button. In this way, the
will be saved as a separate gif file.
Each Paste Option is explained below.
Keep Source Formatting. Use this option to
preserve the positioning attributes of the drawing object in the source
document. For example, If you copy a drawing object AutoShape from Word to
FrontPage, selecting Keep Source Formatting ensures that the
position In line with text is preserved. The Layout position
in Word must be In line with text or else the anchor symbol will be
pasted and not the AutoShape object.
Paste as an Image Tag. Use this option to
convert a pasted Microsoft Office drawing object into a GIF file when the
page is saved. For example, if you copy a drawing object AutoShape from a
Word to FrontPage, you are prompted to save the newly created GIF file
when you save the Web page. I
recommend you paste objects as image tags for more control since they are
saved as a separate image file.
Microsoft Office Drawing Object. Use this option
to paste a Microsoft Office drawing object without having the picture
saved as a separate image file.
p.
80. To add internal padding
to a marquee: Double-click the marquee; click Style; in the
Modify Style dialog box, Format, Border, Borders tab, Padding—Top, 3 (or desired
number), Padding—Bottom, 3 (or desired number), OK, OK, OK.
p.
80. To create an
unusual marquee:
Visit Marquee Tag at
http://html.mcwebber.net/marquee.html. Johnny Joya contributed this
tip and used it on his Final Web site,
The Roof/Urban Life. To see the code, click the desired marquee, switch to Code view.
Click here for steps to copy this code into your page following the steps in the next tip and
then edit the marquee to point to your desired image.
There are
571W x 454H pixels in image below.
Below, when you can change the height to 210 and width
to match the actual image size, the image scrolls once.
Higher than 210 displays the image scrolling down twice.
571W X 210H below.
|
|
|
|
Below is the code used to create the marquee with all the holiday
images. I took a screen shot of some images and sized an saved the shot in
my imaged folder as slideshow.gif. You could create your own slideshow.gif file
and try this. Adjust your marquee height and width accordingly. If you want to
add text above it, just add your desired text in the Marquee Properties Text
box. Click here for steps to copy this code.
<marquee style="background-image: url('images/slideshow.gif')" height="233"
width="590" > </marquee> |
|
Note: If the marquee won't scroll, open the Marquee Proeprties Text box and type
in a hard space (hold down the Ctrl and Shift and tape your spacebar) |
|
|
|
|
|
If you want to add text above it, just add your desired text in the Marquee
Properties Text box. Click the Style button, Format, Font, to modify the font
(size, color, style, spacing, etc). Click here
for steps to copy this code <marquee style="background-image:
url('images/thanksgiving.jpg'); font-family:Verdana; font-size:36pt;
color:#008000; letter-spacing:10pt; vertical-align:text-bottom; font-weight:bold"
height="261" width="590" >HAPPY THANKSGIVING</marquee> |
|
|
p.
80. To
insert HTLM code:
Place the insertion point where you want to insert HTML code. Press
CTRL+Q and click Insert HTML. In the Quick Tag Editor, type
or copy the HTML that you want. Caution: If you copy
HTML code from typed lines on a Web page, always paste in
HTML code to Notepad (Start, Programs Accessories, Notepad) first then copy and paste from Notepad in
the Quick Tag Editor or Code view to be sure it is inserted without a
problem. Sometimes, things like quotation marks can be converted to code
instead of being inserted as quotations marks. To edit the tag, you can
also click inside a line or element, and click the list arrow next to
the button on tag in the Quick Tag Selector row, and click
Edit Tag or Insert HTML.
 Click
here to view Microsoft training, "Under the hood: Effortless ways to
work with code" (40-50 minutes—to speed it up, skip the Practice
and Test yourself links):
-
"Use Split view and Code view"
-
"Make code easier to work with"
-
"Work with Code in Design View."
Inserting a Picture into a Web Page, p. 81
 Click
here to view a Microsoft Office Online Demo: "How
to find the perfect clip right away."
Click
here to view a Microsoft Office Online Demo: "Choose
it, then use it: Copy and paste clip art into your document."
Demonstration: Picture Properties
I will double-click the
picture on the left, copy it into the first paragraph, experiment with wrapping
styles and layout and delete it from the first paragraph.
p.
90. To change wrapping
style, alignment, horizontal spacing, border thickness, and vertical
spacing of a picture: double-click the picture to open the
Picture Properties window. On the Appearance tab, under Wrapping
style, click the wrapping style that you want. Experiment with
Alignment, Border thickness, Horizontal and Vertical spacing.
-
Working with Pictures in Different Formats, p. 87
-
Changing a Color in a Picture to Transparent, p. 89
-
Inserting a Horizontal Line, p. 90
p.
92. To add extra vertical space above a
horizontal line: Insert the horizontal line inside a 1-column, 2-row table in
Row 2. Insert a hard space (Ctrl+Shift+Space) inside the blank row above
the line.
Session 2.2, pp. 93-107
p.
95, Step 1. To navigate
between open Web pages, press Ctrl-Tab.
-
Linking to Other Web Pages, p. 95
-
Creating a Hyperlink Using Drag and Drop, p. 97
-
Creating a Hyperlink to an E-mail Address, p. 99
Click
here to view a Microsoft Office
Training Session: "Find and replace text
across multiple Web pages."
p.
101. To use Find and Replace to change text and HTML for mailto hyperlinks
or URLs:
if your e-mail address changes and you have mailto hyperlinks, you must
change both the text on the
page and the HTML code behind it. Try these steps and you'll see what I
mean:
- Type your e-mail address and press
the space bar to create a mailto hyperlik:
anyemailadress@anydomain.com
- Click Split at the bottom of the document window to
split your screen to display HTML on top and design view
on bottom.
- Click inside the e-mail address you typed and notice
that when you edit the address, the blue HTML codes
preceding it do not change. Therefore, when you click
the mailto to send e-mail, it will use the old address.
The same is true of URLs. Copy and paste the URL for our
class and edit it:
http://caot.lacitycollege.edu/112/
|
Use these steps to use Find and Replace to edit both the
text and the code behind it:
- Click Edit, Replace; In Find what,
type the original e-mail; in Replace with, type
in the changed e-mail.
- Under Search options, click All pages;
under Advanced, click Find in source code;
Find in Site.
|
p. 101. To
block unsolicited e-mail, go to
http://automaticlabs.com/products/enkoderform/ to see how to encode
your e-mail to hide it from e-mail harvesting robots.
p. 101.
To wrap HTML code in Code View, on the
Tools menu, click Page Options. On the General tab,
under Code View Options, make sure that Word wrap is
selected. It's helpful to turn on word wrap for Code view. This will
automatically break long lines of code so that you don't have to scroll
to see everything on the line.
On
p. 101, you
might want to know about the Variables feature
that uses a concept similar to Find and Replace. Variables are useful for content that might change, such as an e-mail
address or a date. On our Web site, I often use dates such as the date
of the final exam. When I need to
add the final exam date to the content of a page, rather than typing it, I
define a variable for it and then insert the date as a variable as
follows:
Define a variable. Click Tools, Site Settings, Parameters tab,
Add. In the
Name box, type a name for the
variable—in this example, I would type Final Date. In the Value
box, type a value for the variable. In this example, I would type
Thursday, June 2, 12:30 p.m.
Insert a variable. In Page view, position the insertion point where
you want to display a variable. Click Insert, Web Component;
under Component type, click Included Content; under
Choose a type of content, click
Substitution, Finish. In the Substitution Properties window, click
desired choice and click OK. In this example, you would click
Final Date. On my Web
page, the value of the variable would appear.
Update a variable. When the year changes, I would redefine the
variable following the steps above under Define a variable and change
the final date. When you click Apply or F5 to refresh, the final date will change throughout
my Web site in every place in which I inserted the variable named
"Final Date."
p.
100, Step 2. To set up a default e-mail client:
In Windows Explorer, click Tools, Internet Options, Programs;
make the desired selection in the E-mail box. If
you use Outlook or Outlook Express at home as your default e-mail client and click a mailto
hyperlink, that e-mail client will open. Hotmail is the
default e-mail client in the COAT labs, so Hotmail will launch in our
browser if you click a
mailto.
-
Using Pictures as Hyperlinks, p. 101
-
Examining HTML for a Picture Hyperlink and an Image
Map, p. 105
Session 2.3, pp. 108-124
p. 108, Step 3. To
create thumbnails efficiently: Insert the full-sized picture file
on the Web page first, then save and name it in the Images folder;
create the thumbnail image next by clicking the Auto Thumbnail
button on the Pictures toolbar; when you save again, the
suggested name for the thumbnail image will be the full-sized picture
name plus _small thereby making it easy to associate the two
files.
p. 112, Step 6.
Text is stored in a separate gif file in the _overlay folder. This might
be helpful information when troubleshooting these overlays.
p.
117. To see a list of
FrontPage applets that you can use for special effects, go to
http://www.frontlook.com/default.asp and click Downloads for some free
sampler downloads. The Read Me file will have directions for use. I have
installed a page effect (falling leaves and bird sounds) and a cursor
effect (seed chasing the cursor) to this page.
Michele Padilla
in her Final Web site,
Chavez
Ravine, used some Java script that is very interesting. The
confirmation page generated after filling in the form on the
Feedback page contains Java Script Date image that changes daily. I've
never directed students before to look at the
Final page but this is worth the visit! Mouse over the "Hi" hyperlink
at the bottom of the page. Click here for interesting
sites if you like Java.
p. 117, Step
5. To
create a hover button with a custom picture and link to sound file
similar to the home page for this Web
site: Create and save your sound file (Start,
Programs, Accessories, Entertainment, Sound Recorder) and image file
first and write down the exact image height and width; click the Web
Component button, Dynamic Effects, Hover Button, Finish; in
the Link to box, browse to the sound file; in the Width
and Height boxes, enter set the exact width and height of the
picture; choose the desired Effect and Effect color; click
Custom, and under Custom, Button, browse to the image
file, OK, OK.
- Using Dynamic HTML, p. 118
p. 121, Step 7. To
add a DHTML effect on mouse over:
(mouse over this text first to see the sample effect.) Select the
desired text; from the DHTML Effects toolbar, click the list
arrow for On <Choose an event>, Mouse over; click
the list arrow for Apply<Choose an event>, Formatting;
click the list arrow for the <Choose Settings>, click Choose
Border; for this example, Borders tab, Settings—click
Box, Color—Green; Shading tab, Background color—yellow
from theme, Foreground color—maroon to set text color; click the
list arrow for the <Choose Settings>, click
Choose Font, and make desired changes.
p. 121, Step 7. To
add a DHTML effect on click:
(Click the red words to the left first to see the sample effect
and refresh when you're done.) Select the desired text; from the
DHTML Effects toolbar, click the On <Choose an event> list
arrow, Click; click the list arrow for Apply <Choose an
event>, Fly out; click the list arrow for the <Choose
Settings> box, click To bottom-right by word.
p.
121, Step 7. To
add a DHTML effect on mouse over to picture:
(click the pointing finger graphic first to see the sample
effect.) Select the desired picture; from the DHTML Effects
toolbar, click the list arrow for On <Choose an event>, Click;
click the Apply list arrow for <Choose an event>, Swap
Picture; click the list arrow for the <Choose Settings> box,
click Choose picture and select desired swap picture.
p. 121, Step 7.
Java Virtual Machine download. Due to
litigation with Sun Microsystems, Microsoft has removed the Microsoft
Virtual Machine (its version of the Java Virtual Machine) from its Web
site and all service packs. To get the Java Virtual Machine (JVM), go to
the Sun Web site. Some customers have reported that their Java Virtual
machine has stopped working after installing the latest Windows XP
Service Pack-1a. If your Java applets stop working, go to the Sun Java
download site to download the
Sun Java Virtual
Machine.
p. 121, Step 7. To see a
list of FrontPage applets that you can use
for special effects, go to
http://www.frontlook.com/default.asp and click Downloads for some
free sampler downloads. The Read Me file will have directions for use. I
have installed a page effect (falling leaves and bird sounds) and a
cursor effect (seed chasing the cursor) to the
FrontPage Tips page.
Michele Padilla
in her Final Web site,
Chavez
Ravine, used some Java script that is very interesting. The
confirmation page generated after filling in the form on the
Feedback page contains Java Script Date image that changes daily.
I've never directed students before to look at the
Final page but this is worth the visit! Mouse over the "Hi"
hyperlink at the bottom of the page. Click
here for interesting sites if you
like Java.
- Examining the HTML for Pages with Special Effects, p. 121
Review Assignments, pp. 125-126.
We will make additional changes to the garden Web site
together.
|
E
