facebook google plus twitter
Webucator's Free Managing Web Design Projects Tutorial

Lesson: Integration

Welcome to our free Managing Web Design Projects tutorial. This tutorial is based on Webucator's Managing Web Design Projects course.

Once you have a visual layout and design approved by the client, the next step is to "slice" it into parts that may then be placed back together into an elastic shell that may grow and shrink with the amount of data displayed. The data may differ as the source may combine various amounts of data; therefore, we want to build flexible designs that always keeps our original vision in mind.

Lesson Goals

  • To break down the look of the website design.
  • To put the smaller art pieces back together.
  • To combine the artwork and CSS function.

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.Photoshop Slicing Example

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.

Marked SketchIn 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.Slice Tool
  3. Using a drag-n-drop technique, draw in the slices. See below slices 01 and 02.Page with Slices
  4. Hide the sample content that should be replaced later with actual data.Hidden Sample Content
  5. Your design should look similar to the image below.Example Design
  6. Go to File > Export > Save for Web (Legacy).File Export Save for Web (Legacy)
  7. Choose the proper settings, in this case PNG-24 for each slice. Click Save.Settings
  8. Choose to save both the HTML and images in any directory you choose. I usually create a special folder for organization. Click Save.Save Optimized As Dialog Box
  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.Open Dialog Box
  2. Click on Window > CSS Designer.Window CSS Designer
  3. In the CSS Designer panel, click the + sign and choose Create A New CSS File.Create A New CSS File in CSS Designer Panel
  4. In the dialog box, name the style MainContent, and store the new style in a New Style Sheet File, then click Browse.Create a New CSS File Dialog Box
  5. Choose a place to store the external style sheet. Usually in the root directory. Click Save.Save Style Sheet File As Dialog Box
  6. View the external style sheet clicking on the CSS button at the top-left of the document window.CSS Button
  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.Code View Button
  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.Design View Preview

Combining the Look and Function

Duration: 15 to 25 minutes.

In this exercise, you will use artwork and CSS rules to create a proper page layout.

  1. Using Dreamweaver, open integration/Exercises/Sliced Art/Layout_SLICED.html.
  2. Use the CSS tools available to build rules that will place the images back into the proper layout, making sure the content to come later will fit properly.
  3. Save your changes and preview.

Possible code you may choose to use:

CSS style sheet:

@charset "utf-8";
body {
background-color:#145f8c;
margin:0px;
}
#MainContent {
margin: auto;
height: 768px;
width: 1024px;
background-color:#FFF;
}
#Main {
margin: 0px;
padding: 0px;
width:1024px;
height:546px;
background-image:url(images/Layout_SLICED_01.png);
background-repeat:no-repeat;
}
#Bottom {
margin: 0px;
padding-top:125px;
height: 174px;
width: 1024px;
clear:both;
background-image:url(images/Layout_SLICED_03.png);
background-repeat:no-repeat;
text-align:center;
}
#Nav {
width:230px;
margin-left:25px;
height:450px;
margin-top:75px;
float:left;
overflow:hidden;
}
#Content {
width:669px;
height:450px;
margin-left:100px;
margin-top:75px; 
float:left;
overflow:auto;
}
#ContactArea {
position:relative;
width:560px;
height:100px;
left:464px;
top:25px;
text-align:right;
}

HTML page code:

<body>
<div id="MainContent">
<div id="Main">
<div id="ContactArea">Contact area here</div>
<div id="Nav">Navigation</div>
<div id="Content">Main data and stuff here.  </div>
</div>
<div id="Bottom">bottom area</div>
</div>
</body>

Solution:

  1. Using Dreamweaver, open integration/Exercises/Sliced Art/Layout_SLICED.html.Open Dialog Box
  2. Click on Window > CSS Designer.Window CSS Designer
  3. In the CSS Designer panel, click the + sign and choose Create A New CSS File.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.Create a New CSS File Dialog Box
  5. Choose a place to store the external style sheet. Usually in the root directory. Click Save.Save Style Sheet File As Dialog Box
  6. Click OK when you return to the Create New CSS File dialog box.
  7. View the external style sheet by clicking ABC_Styles.css.ABC Styles.css
  8. The code behind the CSS is now available to view and edit directly.
  9. Edit the code to match below.
  10. @charset "utf-8"; body { background-color:#145f8c; margin:0px; } #MainContent { margin: auto; height: 768px; width: 1024px; background-color:#FFF; } #Main { margin: 0px; padding: 0px; width:1024px; height:546px; background-image:url(images/Layout_SLICED_01.png); background-repeat:no-repeat; } #Bottom { margin: 0px; padding-top:125px; height: 174px; width: 1024px; clear:both; background-image:url(images/Layout_SLICED_03.png); background-repeat:no-repeat; text-align:center; } #Nav { width:230px; margin-left:25px; height:450px; margin-top:75px; float:left; overflow:hidden; } #Content { width:669px; height:450px; margin-left:100px; margin-top:75px; float:left; overflow:auto; } #ContactArea { position:relative; width:560px; height:100px; left:464px; top:25px; text-align:right; }
  11. Switch to Code view.Code View
  12. Edit the <body> code to match the sample below.
    <body> <div id="MainContent"> <div id="Main"> <div id="ContactArea">Contact area here</div> <div id="Nav">Navigation</div> <div id="Content">Main data and stuff here. </div> </div> <div id="Bottom">bottom area</div> </div> </body>
  13. Switch back to Design view and run a browser preview.Design View Browser Preview