Information Technology Reference
In-Depth Information
We have overviewed various pieces in the Web production process up to this
point. We covered several approaches to creating Web pages. Web screens
and using Dreamweaver for creating Web pages from scratch are main points
that we discussed. Also, we covered various graphic file formats used for Web
images and we establish which formats to use for various types of artwork. We
also established basic designs for our Web portfolio pages and developed
storyboards to guide us through the development process.
In the next sections we take a closer look at the tools and explore some of the
most important techniques used to create Web portfolio pages. Don't expect
to learn the applications and each technique immediately after reading the
tutorials. You should become familiar with techniques by reading about them
and then attempting to execute them repeatedly on your own while tackling a
Web portfolio design project. As I mentioned previously, you will develop your
own personal workflow and technical approach as your practice and experi-
ence preparing assets and creating Web pages expands.
With that said, let's begin by using Macromedia Fireworks to design, slice, and
export a Web page.
Make a Web page layout in Macromedia Fireworks MX 2004:
1.
Open Macromedia Fireworks and immediately go to
Window>Properties
and
Window>Tools
to show the tool bar and property inspector. Both
palettes may be open on start up.
2.
Go to
File
>
New
and create a document at the size you want your Web
pages to be: use 800 x 600.
3.
Set the resolution of the document to 72 dpi and choose a Web safe
background color from the palette.
4.
Start by creating a page header and navigation bar. If you are using HTML
text-based navigation, you can skip this section. Your navigation will not
be graphical. That's fine and very appropriate for a Web portfolio. But if
you want get a bit fancier, the following are a few steps on how to create
page headers and graphical navigation buttons.
To make a page header, create a box that spans the top of your Web page
(800 wide by 75 high). Set the header box to the desired color and then
add text to the bar or open an image and drag it into the Web page
document directly from its window (see next). Scale the graphic accord-
ingly in the Web page document and then place it on the navigation bar.
