Thank you for visiting
layoutbank.com! Here you will find the answers to your
technical related questions regarding Layout Bank’s 300
Incredible HTML/PSD Designs!
How to Optimize the Layout
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
tool to pick the needed slice and drag
- 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 sub page is
not ready yet, leave the field empty or type some
address (e.g. http://www.layoutbank.com) to make sure
the button works. You will be able to edit the URL
- 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
- Select File>Save For Web... to display Save For
Web dialog. This dialog allows you to set optimization
options for each slice. Just click OK and specify a
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 or
FrontPage. Make sure the Properties window displays.
If not, select Window>Properties to display it.
- Click on the Company button in your page and
examine the contents of the Properties window. You can
edit the Link field to change the URL.
- Select the text slice beneath the 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 the initial text appearance.
- 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 the 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>.