gradient
 
gradient
 
 
 
 
title

4. HTML Text And Non-HTML Text

title
sign
 

 

In a template's .psd file we have two kind of text layers: The text that will appear as an image in the html file (let's name it "image text") and the text that will appear as text in the html file (let's name it "html text"). We generally use image text for company name, logo, headlines, buttons and html text for content text, text that may be updated more frequently.

When you want to change something in an "image text" it will be necessary to change the text in the .psd file and to export the image (or images), containing that text, for the web and replace the old ones. After that the html file will show the new images.

If you want to change something in a "html text" block you will be able to do it directly from your html editor opening the .html file containing that text and replacing the text as you need it. It won't be necessary to change also the text in the .psd file because the text that will be "html text" in the final .html file of your web site is just for reference in the .psd file.

Open the index.psd file located in template/psd. (Note: if the opened file has the slices visible just press Ctrl+H to hide them)

As you can see below we highlighted the "image text" layers. These text layers generally have styles like drop shadow and stroke. These kind of styles cannot be made in html so you must export the layers as images.

In the image below there are highlighted the "html text" layers. This kind of text can be edited in a html editor or text processor like Notepad and when displayed in a web browser you can select and copy it. The "image text" will not be possible to edit in a html editor because it will be part of an image so you will need to open the image in an image processor to edit it.

(Note: for more information see the tutorial showing the "Save for the web" process and the Dreamweaver tutorials)