...from Photoshop

Building a page layout using Photoshop

Build a table-based web page

Here is an overview of five steps to take a web design from Photoshop and render it as a web page layout using tables. In the first step, we open a Photoshop document that was created as a web page design. In the last step, we have a page where the text content can be modified within Dreamweaver.

1. In Dreamweaver, modify your site definition to cloak (filter) out Photoshop files from being uploaded to your web site (and taking up your limited space quota on udel.edu). Site menu > Manage sites... > [choose your site for art307] > Edit button > Cloaking category (on left) > Check Enable cloaking and Check Files ending with [psd].
2. In a web browser, download the Photoshop document called "table_design.psd" from the downloads folder:
   downloads
   ...and place it inside your local web folder.
3. In Photoshop, open the file, table_design.psd. This web design has two important elements. First, there is placeholder text for design purposes only. The text will not be rendered in the files we create for the web site. Second, there are additional variations on the design theme that employ different pictures within the same layout.
4. In Photoshop, we'll use the slice tool as the basis for this exercise. The slice tool is nested with the crop tool. The objective is to slice the number of individual elements needed to achieve a functional web site. For instance, buttons on the button bar will need to be separated and background images will need to be isolated.
5. In Photoshop, File menu > Save for web and devices... > JPEG, 100 quality, and click Save.
   
   From the "Format" menu in the window labeled "Save optimized as...", ensure that "HTML and Images" is selected. This is what directs Photoshop to generate a web page as well as the image slices.
   
   From the "Settings" menu in the same window, select "Other..."
   
   There are four levels to the "Output Settings" window: HTML, Slices, Background, and Saving Files.
   
   For HTML, ensure that "Output XHTML" is selected.
   For Slices, ensure that "Generate Table" is selected. (We'll repeat this using "Generate CSS".)
   For Background, the default settings are fine for now.
   For Saving Files, choose a sensible name for "Put images in folder:".
   
   Click "OK" to save your settings and "Save" to output the HTML file from Photoshop.
   
   
6. In Dreamweaver, open the file you named and saved in the step above. It should look something like this example.
8. Step 2: in Dreamweaver, remove unwanted image
9. Step 3: in Dreamweaver, remove unwanted image
10. Step 4: in Dreamweaver, insert background images, if necessary
11. Step 5: in Dreamweaver, put in text content and style with CSS