Tutorial
Home>Step2>Step2.8
Step 2.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.templatepilot.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>.
This is the end of Step 2: Editing your template. Proceed
to Step3: Putting your new site on the web
