138 Chapter 8
Web Design With Photoshop
Introduction
There are several commercial and some
freeware applications that may be used to
create web documents. Among these applications
we find Adobe Photoshop, which can be used not
only to prepare...
140 Chapter 8
Web Design With Photoshop
of the photo. Position the curser above and to the
left of the tree. Hold down the mouse button and
drag diagonally down and to the right until you
have enclosed the tree in the slice area. Release
the mouse...
Intro to the Internet 141
and Web Page Design
Figure 8.5
Using the Slice Select tool click on one of the
slices. Remember that slicing cuts the image up
into pieces. Each slice can be optimized sepa-rately.
For this example, we chose to use...
Intro to the Internet 149
and Web Page Design
21. Now for the final test, reopen the browser
and navigate to the URL or file location.
With the “index.html” page open in the browser,
click on the buttons and text links to verify that
the other...
150 Chapter 8
Web Design With Photoshop
Figure 8.21
The Adobe Bridge application is a separate ap-plication
that you can access from within Photo-shop
or you may run it by itself.
1. If you already have Photoshop CS4 running,
locate and click the...
Intro to the Internet 151
and Web Page Design
The photos in the folder are of a worker on a
radio tower and his view of the ground. We want
these photos to be shown on a web page photo
gallery.
The controls at the bottom right of the Bridge,
allow...
152 Chapter 8
Web Design With Photoshop
and a Thumbnail size from the Style menu (Fig-ure
8.23).
6. Make sure all the photos are still selected then
click Refresh Preview to see the gallery in the
Output Preview panel.
The Output Preview panel will...
Intro to the Internet 153
and Web Page Design
You can use the photo gallery as a web site by
itself or link to it from another page on your web
site. At SUU, you would save the gallery to your
F:\public_html folder. Then create the link...
154 Chapter 8
Web Design With Photoshop
Application
1. Collect a number of photographs of your own
- such as from a family outing, etc. and make
them into a web photo gallery.
2. Use Photoshop to layout a complete web page
including navigation...
Intro to the Internet 161
and Web Page Design
Figure 9.8
6. Return to Dreamweaver and paste the text
into the main content area where you previously
deleted the placeholder text using Ctrl + V or
Edit>Paste. Save the file.
7. Select and delete all...
162 Chapter 9
Adobe Dreamweaver
The photo should now be located to the right of
the paragraph. If the text appears to be covering
the photo, press the F4 key twice. Save the file
F4 is a shortcut for View>Hide Panels and al-lows
you to view your...
Intro to the Internet 163
and Web Page Design
Figure 9.12
image editing program first. When photos are
placed into a web page using Dreamweaver, it
is possible to change the display size by drag-ging
the photo’s container to make it larger...
164 Chapter 9
Adobe Dreamweaver
picker. The color picker will immediately close
after you select a color.
7. Now click “Apply.” The color of the body
background area will change to reflect your color
choice.
If you don’t like the color, click...
Intro to the Internet 165
and Web Page Design
Figure 9.16
In the Summary for Selection window, select
Background. Then in the Rules window, select
“.twoColElsLtHdr #header.”
In order to see the complete names of the rules, it
may be necessary...
166 Chapter 9
Adobe Dreamweaver
20. In the CSS Styles panel make sure the
Current tab is still selected. Then in the Rules
window, find and select the “.twoColElsLtHdr
#mainContent” rule.
21. Now click the Edit Rule (pencil) icon.
Select Type...
Intro to the Internet 173
and Web Page Design
Chapter Quiz
1. What type of web content can you make with
Dreamweaver?
2. How are Dreamweaver templates helpful?
3. Can you work with CSS in Dreamweaver?
How?
4. How is text entry in Dreamweaver like...
54
Student Journal Reflections
Weekly journal entries were implemented and drawn on as a reflection of
changing reading outlooks (appendix M). Participants were instructed to answer
researcher provided prompts once weekly. These telling journal...
21ON PICTURE
SHOP
Commercial ana Portrait Photographers
KODAKS FILMS SUPPLIES
EXCELLENT PHOTO FINISHING
Agricoia Photographer
L. A. BURASCANO
LADIES' and GENTS'
TAILOR
Indian Curios ana Souvenirs
CEDAR CITY, UTAH
With Compliments to the Students
of...