Frequently Asked Questions and Tutorials
I'm having problems with my rollovers. Also the side of
my navigation bar keeps disappearing. It works when I just test it through
dreamweaver, but not over the web. What can I do to fix it?
Sounds to me like you have to upload the Images file to
your Remote Server. Sending the .html page with its dependent files just
sends the "top layer" of graphics - the up images. Click on
the Images folder in your site map, and put the whole folder. If this
doesn't work, our next step would be to fix the javascript in Dreamweaver,
using the Set Nav Bar Image behavior.
How do I troubleshoot my links or
my source? I can't see my graphics online!
- First, check your links in Dreamweaver to make sure they're
right. Use the Property Inspector to reselect both the Link: and
the Source: The Source: is where the browser can find your graphic
and must always be within the same folder as all the rest of your
web pages. The Link: is what page clicking on the image will take
you too. So you are first concerned with Source:
- Make sure all your images are .jpg, .jpeg, or .gif. PNG's are
not yet widely recognized.
- Did you wait long enough? If your image size is large, you have
not optimized it by Save For Web. And how big is the overall size?
Maximum graphic size should be no more than 320 x 240, and most
of the time, a great deal smaller. Buttons are around 35 x 35
pixels. Logos range 100 pixels to 250 pixels wide with varying
heights. Your download time maximum should be 20 seconds for the
entire page. So if you have 5 graphics on a page, and each graphic
takes 4 seconds to download, your overall page is already 20 seconds.
Graphics need to be used judiciously.
Go To The Top
How can I create buttons
in Photoshop?
Example: |
|
1. File > New > 50 pixels x 50 pixels, white background,
Mode: RGB Color, 72 pixels inch. Save as home, quality low - 3.
2. Select a Foreground color you like, and using the Rectangle tool,
drag across the whole image to apply the color. (You will have to
first double click on the Background layer and rename in order to
unlock it.)
3. Double click on the layer, and select a Blending Option. Try
Drop Shadow.
4. Or you can add a new layer, select a Style (Window > Show
Syles), and use the Rectangle tool to apply the Style. You can then
click through the other Styles to see if you find something you
like. You can also double click on the layer, and play around with
them to create a New Style.
5. With the text tool, type Home. You can apply a style like Drop
Shadow to the text, if you like. Experiment then Save For Web and
follow the directions. Be sure you experiment with both .jpg and
.gif formats to create the smallest acceptable image size. This
will be the button that is first on the page when it is loaded.
6. When you return to the original graphic, use it to create the
button you will save as home_over. This time, create the button
so it will glow when the button is rolled over with the mouse. Or
maybe just the text changes color or style. Double click on the
first layer (the one with the background style) and check BOTH the
inner glow and the outer glow blend options. Save For Web and save
in the same folder as the Home graphic (remember, this one is saved
as home_over. This will be the button when it is rolled over.)
7. Finally, when you return to the original graphic, double click
on that same layer and uncheck the Drop Shadow, Inner Glow and Outer
Glow options. If Bevel and Emboss was checked, then uncheck it.
You will create a button for when the mouse clicks on your button.
This time, when you Save For Web, save it as home_down. Check Inner
Shadow and click OK. Then proceed to Save For Web and save it with
the other 2 buttons.
8. Essentially, you create 3 button states for each button on a
navigation bar
Go To The Top
How do I create a navigation bar in Dreamweaver?
1. In Dreamweaver, Insert > Interactive Images > Navigation
Bar. Name the Element home then browse for the buttons you just
created. Up Image is the first one you created, Over Image is the
second one created (home_over) and Down Image is the third one you
created, home_down. Be sure you fill in the information for the
line that reads: When clicked, go to URL: You can use the browse
button to link the button to the web page. In this case, I would
link the button home to my index.html page, which is always the
home page.
2. If you have created other buttons for this navigation bar, you
can add them by hitting the plus sign above. So I might have new
buttons called aboutus, aboutus_over, aboutus_down. The element
name would then be aboutus and the link might be to a web page with
information about me, my company, my services or my portfolio.
3. Before you leave the Insert Navigation Bar dialog box, be sure
that the last line of the box, Insert: is checked either Horizontal
or Vertical - whichever one you want. It's difficult to change your
mind later. You'll also want to make sure that your images are checked
to Preload.
You can preview what your navigation bar will look like by hitting
F12 on your keyboard.
Go To The Top
How can I create a text graphic using
Fireworks...and then put it on my Dreamweaver page?
Integrating graphics into your site will attract the viewer and
increase interest. In Fireworks, File > New. Try 75 W and 75
H, and be sure to check Transparent as your Canvas Color (background).
You will have to save it as a .gif file since you want a transparency.
Select the A on the toolbar, and the Text Editor dialog box will
appear, where you can choose size and font style. It will be kind
of large at this size...I came up with 60 as the text size when
I tried it. Save it as the original first - it will be a .png file
- then save it again this way: File > Export Wizard > then
Continue at the first dialog box. The second dialog box that appears
can be checked Dreamweaver as the Destination. The next dialog box
provides an analysis which always says the same, and you will select
Exit. The Export Preview dialog box will now open and here is where
you should optimize your graphic to make it as small in kb size
as you can, and still like the way you want. Try Format: GIF, Palette:
Adaptive, Loss: 0. Be sure to select Alpha Transparency, and you
can select 16 from the drop down numbers box (this means the number
of colors the graphic will use.) Then select Export (not OK). Save
as Image Only (you can actually create a whole web page and save
it as HTML and Images, but we won't go there right now.) Then, using
Dreamweaver, you can Insert > Image to place the .GIF file onto
your .html page within a cell of a table.
Go To The Top
How do you insert additional spaces in text
within Dreamweaver 4?
Hold down Control and Shift, and then hit the space key. That'll
work.
Go To The Top
How do I create and add a background color?
There are two good ways to achieve your background colors, but
both involve using a graphics software program. I'll tell you how
in Photoshop, but let me know if you use a different one (like Fireworks.)
Frankly, I don't tend to use the "Web Safe" colors because
they are limiting and mostly ugly. I usually use an Adaptive or
Selective palette when I work with graphics, but I optimize the
graphics for a quick download. The reason for the limited web safe
colors is to ensure consistency - what you see on a pc will look
the same on a mac. Remember also that what you create on your pc
will look lighter on a mac. What's created on a mac will look darker
on a pc.
- To create a background image that will tile in the background
of your site, open a new document in Photoshop. Remember that
background images tile both left to right and top to bottom, so
your image will keep repeating itself. 50 x 50 pixels will work
for a simple image, but if there's a discernable pattern, you
may need to make it larger. Sometimes I will create a background
image that is very wide (1700 pixels) but only a few pixels height
(5 - 10 pixels.) This will still be tiling both ways in the background,
but since most monitors display a maximum of 1600 pixels wide
the end user doesn't see the left to right tiling.
- Press the eyedropper icon on the tool box, then press on the
Foreground color below. When the Color Picker dialog box opens,
make sure the Only Web Colors box below is NOT checked. (Your
image should be in RGB mode.) Find the color you want by clicking
the color bar, then click OK.
- Choose what looks like a paint bucket pouring on the Toolbox
(it may be hidden under the Gradient tool, so click on the small
arrow below it to choose the Paint Bucket.) Then click on the
new document to "pour" your color.
- If you like, you can add a Filter at this point, and give your
background some more interest. Try Filter > Texture > Grain,
for instance. You can experiment by adding more and more Filters.
Next, you could do Filter > Artistic > Underpainting for
a more mottled look.
- When you are satisfied, then go to File > Save For Web. Under
the 4-up tab, you should see your Original plus 3 versions with
different Optimize settings. Click on the image to the right to
choose it to work on, then play with the settings to reduce the
overall K size. If it is pure color, generally a .GIF file will
work best. If there is any tonal values (like what happens with
a Filter), you will probably be better off using a .JPEG file.
Since I added a filter to my test, I am choosing .JPG as my extension
by choosing JPEG from the drop down menu.
- I didn't like the way the JPEG file looked, so I then clicked
on the image below it to compare with a different Optimize setting.
This time, I kept it as a .GIF file, but I added 100% dither and
used a Selective palette. All these settings are accessed by clicking
on the little arrows next to a window to reveal the drop down
menus.
- To keep the selection you prefer, just make sure the window
is still chosen for the version you like and click on OK. Save
the graphic in your Graphics folder within your Site Root Folder.
I named mine "bkgrndgold.gif". Type is Images Only.
- Open up Dreamweaver and the document that you want this for
as a background. Choose Modify > Page Properties then select
Browse to find your background graphic. Make sure you have saved
the page so that DW can insert the correct path to the graphic.
Everything must be in the same Root Folder.
- While you're at it, give the document a Title if you haven't
already, and then click OK. You should see the image tiling in
the background, but can still insert objects on the page on top
of it.
- The other way is to play with the Dither box but it essentially
works the same way so I won't go into it here. I've enclosed my
version just in case. If it's of interest to you, please feel
free to use it.
Go To The Top
Can I (and then if so, how) affix a color to
a horizontal rule?
No, you can't change the color although there are options you can
do to the <hr>. After Insert > Horizontal Rule, try making
the Width 75% and the Height 5 pixels, with Shading selected. Take
a look at it, then try unclicking the Shading. Experiment with different
settings. For a more personalized <hr>, I would create one
in Photoshop and then insert it as an image.
Go To The Top
Is there a site you can recommend where pre-existing
photos or images exist?
Check out my Web Resources page http://www.csmmultimediaprogram.net/sharon/MMgraphics/resources.html.
I have a number of them listed. Another good idea is to buy a cd
with images. I have found that for a $10 investment, I get a lot
of good use and ideas from these.
|
