WELCOME > STEP 2.8: SLICING AND EXPORTING HTML

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.

1. 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.

2. Right click the newly created slice and choose Edit Slice Options... from context menu. URLfield 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.TemplatesMonster.com) to make sure the button works. You will be able to edit the URL later.

3. 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.

4. 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.

PREMIUM WEBSITE TEMPLATES

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.

1. Open the exported .html with Dreamweaver. Make sure the Properties window displays. If not, select Window>Properties to display it.

2. Click on Company button in your page and examine the contents of Properties window. You can edit the Link field to change URL.

3. Select the text slice beneath welcome caption. Select Window>Code Inspector to edit the 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 the text formatting options in the Properties window to match initial text appearance as well as you can.

4. You can use "back.gif" from the 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).

5. 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 Site on the Web.