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