Lesson: Integration

Breaking Down the Look

Using Photoshop to Slice a Design

Graphic tools, such as Adobe Photoshop, may be used to create and separate elements of the main design.

Slicing Rules

The process of "slicing" a design means that we separate out elements that will later be placed back together using a technology such as CSS (Cascading Style Sheets). Elements should be able to house data and yet layer onto others to form the original design. The design also needs to be what we consider "fluid," allowing it to grow and shrink with the content. Make sure the "growable" areas have artwork that, if repeated, will look natural to the design.

Map Twice, Slice Once

As the saying goes to cutting lumber, "Measure twice, cut once..", we may also apply this to the slicing of an image. I always use a sketch as a road map thinking about the code and how the design may need to flex and grow. So many variables go into this process, it is helpful to map it out as seen below.

In this sketch, I have marked the regions of the design that will grow and remain static. Other regions will overlay the top of the main background. The pixel dimensions will be helpful when it is time to build the CSS rules to piece everything back together. We will use this sketch and go further into that topic later.

Slicing demo using Photoshop:

1. Open integration/Demos/layout_withFolders.psd.
2. Choose the Slice Tool.
3. Using a drag-n-drop technique, draw in the slices. See below slices 01 and 02.
4. Hide the sample content that should be replaced later with actual data.
5. Your design should look similar to the image below.
6. Go to File > Export > Save for Web (Legacy).
7. Choose the proper settings, in this case PNG-24 for each slice. Click Save.
8. Choose to save both the HTML and images in any directory you choose. I usually create a special folder for organization. Click Save.
9. Save the Photoshop image as layout_SLICED.psd and close Photoshop.

Putting It Back Together

Planning the Structure

When planning the structure of the layout, consider the elements and locations that will remain static, and those that will be dynamic. Static locations in the layout will be easy to code and place. Those that are dynamic must be able to grow and shrink with the amount of data.

Building Flexible CSS Rules Using Dreamweaver

Creating CSS (Cascading Style Sheets) using a tool such as Dreamweaver makes it very easy, as we have dialog boxes to assist in the building of the code. You may also use the code view to hand type the CSS rules. Which ever way you choose, the logic must be provided by you.

Demo - CSS rules with Dreamweaver

1. Using Dreamweaver, open integration/Demos/LL_HTML_CODE-Img/layout_withFolders.html.
2. Click on Window > CSS Designer.
3. In the CSS Designer panel, click the + sign and choose Create A New CSS File.
4. In the dialog box, name the style MainContent, and store the new style in a New Style Sheet File, then click Browse.
5. Choose a place to store the external style sheet. Usually in the root directory. Click Save.
6. View the external style sheet clicking on the CSS button at the top-left of the document window.
7. The code behind the CSS is now available to view and edit directly.
8. Edit the code to match below.

   @charset "utf-8";
             body {
   background-color:#333;
   margin:0px;
   }
   #MainContent {
   margin: auto;
   height: 768px;
   width: 1024px;
   }
   #Top {
   margin: 0px;
   padding: 0px;
   width:1024px;
   height:122px;
   background-image:url(images/layout_withFolders_01.png);
   }
   #Main {
   margin: 0px;
   padding: 0px;
   height: 646px;
   width: 1024px;
   background-image:url(images/layout_withFolders_02.png);
   }
   #LeftCol {
   width:250px;
   height:646px;
   left:0px;
   top:0px;
   float:left;
   overflow:hidden;
   }
   #MiddleCol {
   width:500px;
   height:570px;
   left:250px;
   margin-top:15px; 
   float:left;
   overflow:auto;
   }
   #RightCol {
   width:254px;
   height:646px;
   left:750px;
   top:0px;
   float:left;
   overflow:hidden;
   }
   #Specials {
   position: relative;
   width: 190px;
   height: 150px;
   margin-left: 35px;
   margin-top: 100px;
   overflow: auto;
   }
   #navArea {
   position:relative;
   width:560px;
   height:30px;
   left:464px;
   top:90px;
   text-align:right;
   }

9. Save the file for use later with artwork integration.

Combining the Look and Function

Using Dreamweaver to Combine the Two

Once you have a set of art and CSS rules, the combination of the two is the final step. The process may include adjustments to the code specifications as the art may not initially line up with the code.

Saving a Structure Template

When the art and code are aligned, the HTML file should then be saved out into the technology type that the project will be built in. For example, we use the HTML to test placement of content and art and then save the file out as .PHP, .NET, or CF depending on the project scope directive. The code and art are then sent off to the database admin for full integration of functionality and art.

Demo - Combining Look and Code Using Dreamweaver

1. Using Dreamweaver or any HTML text editor, open integration/Demos/LL_HTML_CODE-Img/layout_Ready.html. Switch to Code view.
2. Edit the <body> code to match the sample below.

   <body>
   <div id="MainContent">
   <div id="Top">
   <div id="navArea">nav area here</div>
   </div>
   <div id="Main">
   <div id="LeftCol">left</div>
   <div id="MiddleCol">Main data and stuff here. </div>
   <div id="RightCol">
   <div id="Specials">specials area here... </div>
   </div>
   </div>
   </div>
   </body>

3. Switch back to Design view and run a browser preview.