|
Step 7: In the previous step
you changed visibility of a layer to get rid of
extra graphical elements. Sometimes you may want
to hide some elements but keep others within the
same layer. In this step you will learn how to
accomplish this via using layer masks. You will
hide the end of "Welcome to Company website!"
leaving just "Welcome to Company".
Choose Edit>Deselect to turn off any current
selection.
Select the Rectangular Marquee tool and draw a
box around "website!".
Choose Select>Inverse to invert your selection.
Press Layer Mask button in the bottom of the Layers
Tab to hide all parts of the layer that aren't
selected, i.e. the end of caption that you selected
in (2).
If you ever want to get back what you just hid
choose Layer>Remove Layer Mask>Discard to
delete the mask or Layer>Disable Layer Mask
for just turning it off.
At this point, you have learnt enough to make
yourself happy with appearance of your site. Getting
a web page out of .psd image comes next in Step
8: Slicing and exporting HTML.
------------------------------------------
Step 8: Slicing and exporting
HTML
In this step you will learn what slices are and
how to create and edit them. You will slice the
.psd image to produce an HTML page that can be
viewed in a browser.
Unlike images, which come in one piece, web pages
consist of a large number of elements assembled
together using HyperText Markup Language. Every
image on a page is stored in a separate file.
These files can have different formats but when
displayed in a browser create an impression of
a whole picture. Take advantage of Photoshop features
to achieve such an effect. HTML code will be generated
automatically. You only need to specify which
portions of the template should be converted into
separate images, in other words create slices.
Select the Slice Tool and draw a box around the
"company" button. You can resize it
after creation - just use Slice Select tool to
pick the needed slice and drag handles.
Right click the newly created slice and choose
Edit Slice Options... from context menu. URL field
designates the address of a web page that opens
when the button is clicked. Since your Company
subpage is not ready yet leave the field empty
or type some address (e.g. http://www.comteche.com)
to make sure the button works. You will be able
to edit the URL later.
Make another slice around the text beneath the
welcome caption. You will replace the image in
this slice with formatted text to make the page
download faster.
Select File>Save For Web... to display Save
For Web dialog. This dialog allows to set optimization
options for each slice. Just click OK and specify
a save path.
Now you will need to work on the generated .html
file. The following steps assume that you are
using Macromedia Dreamweaver 4.0 HTML editor.
In other editors the locations of controls may
vary.
Open the exported .html with Dreamweaver. Make
sure the Properties window displays. If not, select
Window>Properties to display it.
Click on Company button in your page and examine
the contents of Properties window. You can edit
the Link field to change URL.
Select the text slice beneath welcome caption.
Select Window>Code Inspector to edit HTML code.
The <img...> tag is automatically highlighted
(it looks something like <IMG SRC="images/edited_TEMPLATE_07.jpg"
WIDTH=424 HEIGHT=161 ALT="">). Replace
this tag with your custom text. Close the code
editing window and highlight newly created text
in the editor window. Make use of text formatting
options in the Properties window to match initial
text appearance as good as you can.
You can use "back.gif" from RESOURCE
folder as a background for this cell. Just enter
the path to this file in the Bg field of Properties
window (you may need to expand it first with an
arrow in the bottom right corner).
Save your work and preview the customized page
by selecting File>Preview in Browser>.
|
