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
Graphic tools, such as Adobe Photoshop, may be used to create and separate elements of the main design.
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.
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:
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.
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.
@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; }
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.
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.
<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>
In this exercise, you will use artwork and CSS rules to create a proper page layout.
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>