Scribd Logo
Hochladen

Willkommen bei Scribd!

  • 960 Grid Tutorial - Eric Callan

    Hochgeladen von

    COSTEL
    75 Ansichten10 Seiten
    This tutorial simply outlines the steps to take in using the 960 Grid System. For this tutorial we will be working in the 12 column layout.

    Originalbeschreibung:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    This tutorial simply outlines the steps to take in using the 960 Grid System. For this tutorial we will be working in the 12 column layout.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    75 Ansichten10 Seiten

    960 Grid Tutorial - Eric Callan

    Hochgeladen von

    COSTEL
    This tutorial simply outlines the steps to take in using the 960 Grid System. For this tutorial we will be working in the 12 column layout.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 10

    1

    PSD to HTML
    With The 960 Grid System
    Eric Callan 10.4.2011

    Downloading 960 Grid System 1. Navigate your web browser to http://960.gs/ 2. Click the button labeled Big ol DOWNLOAD button :) to begin the download of 960 grid system *will download as a zipped folder, simply unzip it. 3. Now to begin move the folder to where ever you would typically place the CSS files for your sites and projects and rename the folder 960gs. PSD Design

    DISCLAIMER: The Photoshop design that we are creating is simply an outline (that

    is a real design would have actual content and more intricate background designs). This tutorial simply outlines the steps to take in using the 960 grid system and changing it from a design to an actual implementation with Photoshop and CSS styling.

    1. Open Adobe Photoshop and navigate to the folder that you just moved. Here
    you will find all the files that you will need to encompass the 960.gs into your site. For now the only one we are concerned with is located in the templates folder, which was a part of the zipped folder just downloaded.

    2. Open the folder and navigate


    to the Photoshop folder. You may choose any grid you like but for this tutorial I will be working in the 12 column layout, so open the file 960_grid_12_col.psd, the file will resemble figure 1.1

    FIGURE 1.1

    PSD Design (cont.) 3. Now we can begin our design. For this tutorial we will keep it simple and minimalistic. Begin by drawing a header using a simple square created with the shape tool. This should span all 12 of the columns and the height is up to you, between 100px and 200px will be appropriate. See figure 1.2 (the labels serve solely as a reminder to the column widths)

    FIGURE 1.2

    4. Next draw another square box that is just below the header and spans the left most 9 columns. This will be our main content area. Make this box about double the height of the header. See figure 1.3.

    FIGURE 1.3

    PSD Design (cont.) 5. Now create a 3 column content area, this could potentially be used as a supplementary content area, or perhaps a news or twitter feed. Be sure to have this be the same height as the main content area. See figure 1.4

    FIGURE 1.4

    6. Finally we will draw the footer. This will be the same width as the header with a full 12 columns but only half the height. See figure 1.5

    FIGURE 1.5

    HTML 1. Now that the design is outlined, we can move onto the HTML. If the columns that you defined are more intricate than the simple black square above I would recommend breaking up the Photoshop design into its component pieces using the crop tool and putting each into its own separate file. Since we are simply working with black squares we will use the design as an outline and simply use basic HTML and CSS for styling. 2. To start, begin create a new file in the same directory as your folder 960gs. 3. Open the file and add the appropriate header.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My First 960 Grid System Web Page</title>

    4. Add the appropriate links to the reset.css and the12-column 960 Grid style sheet called 960_12_col.css located in the code/css folder.
    <link rel="stylesheet" type="text/css" href="960gs/code/reset.css " /> <link rel="stylesheet" type="text/css" href="960gs/code/960_12_col.css " /> </head> <body>

    5. Now we will define the div elements based on the Photoshop design that was outlined. To define the 12-column structure, create a wrapper div around the entire page with the following.
    <div class="container_12">

    HTML (cont.) 6. Inside this container will be the header, content, news area, and footer. To define the header, create a div with a class of grid_12. Add a, h1 tag in there too just so that we may see the site with a main title. I have also added an ID so that we may add our own styling into each separate element (color, font and height)
    <div class="grid_12" id="heading" > <h1> My First 960 Grid System Web Page </h1> </div>

    7. Next we must be sure that the grid system knows to separate the above section from the next two sections, to do this add in the following line, this will move the next section down.
    <div class="clear"></div>

    8. Now we can define the main content and news sections. Remember we defined one as 9 columns and the other as 3. Add in the following lines of code to create these two sections. I have added in some filler text to better represent the site. Again, I have added ids to add in our own styling and a clear div at the end to break the rows.
    <div class="grid_9" id="main" > <h2>This is the main Content</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p> </div> <div class="grid_3" id="news" > <h2>This is the news section</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p> </div> <div class="clear"></div>

    HTML (cont.) 9. Finally we need to add in the footer. This will be very similar to the header but with an id of footer and slightly different filler text. Be sure to close the 12 column container that was defined earlier to encompass the entire site. Also close out the body and html tags.
    <div class="grid_12" id="footer" > <p> copyright 2011 </p> </div> </div> </body> </html>

    10. For the final index.html please see page 8.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My First 960 Grid System Web Page</title> <link rel="stylesheet" type="text/css" href="960gs/code/reset.css " /> <link rel="stylesheet" type="text/css" href="960gs/code/960_12_col.css " /> </head> <body> <div class="container_12"> <div class="grid_12" id="heading" > <h1> My First 960 Grid System Web Page </h1> </div> <div class="clear"></div> <div class="grid_9" id="main" > <h2>This is the main Content</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p> </div> <div class="grid_3" id="news" > <h2>This is the news section</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p> </div> <div class="clear"></div> <div class="grid_12" id="footer" > <p> copyright 2011 </p> </div> </div> </body> </html>

    Supplementary CSS 11. The final supplementary step is to define your own styles. I have provided a separate style sheet below that will add styling to the elements using the ids that were added to each. Simply create a new file in the same 960gs folder, or another of your own choosing, and link to it right below the link to the 960_12_col.css. I named mine styles.CSS. Styles.CSS
    h1{text-align: left;color:white;font-family: Futura;font-size: 24px;padding:10px} p{text-align: left;color:white;font-family: Futura;padding:10px;} #heading{height:200px;background-color:black;margin:5px 0px;} #main{height:300px;background-color: black;margin:5px 0px;} #news{height:300px;background-color:black;margin:5px 0px 5px 20px;} #footer{height:100px;background-color:black;margin:5px 0px;}

    Final Product The final product should look as follows, thank you for following my tutorial, I hope you enjoyed!

    10

    Works Cited Hawkins, Adam. Prototyping with The Grid 960 Framework. Dec 1, 2008. http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960css-framework/. Oct 4,2011 Further Reading Way, Jeffrey. A Detailed Look at the 960 CSS Framework. Jan 14, 2009. http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/. Oct 4, 2011 960 Grid System Demo http://960.gs/demo.html

    Das könnte Ihnen auch gefallen