Tutorial Psdtohtmlcss8

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...
http://webdesign.tutsplus.com/tutorials/shutterpress-design-...
ShutterPress: Design & Code A Photo Portfolio Site (Day 3: HTML/CSS)

Brandon Jones on May 6th 2011 with 30 comments
Tutorial Details
Difficulty: Intermediate Program: Photoshop CS5, Coda, Firefox with Firebug plugin Estimated Completion Time: 4 hours View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.
Final Product What You'll Be Creating
Today were continuing the tutorial series for creating the ShutterPress design by converting it from a raw PSD to a functional website using HTML and CSS. By now, weve created the initial site design and gathered the required assets for coding. Now were going to actually code it so itll work in all major browsers!
Intro: Day 3, HTML/CSS Conversion

Today is all about converting our PSD design into a fully working HTML site! Well walk you through the markup step by step, until we have a site that looks great on all major browsers. Well be approaching this from an intermediate level of understanding, so if we move too quickly past any of the basic steps, feel free to ask any specific questions in the Comments section below. A special shoutout goes to CodeMyConcept, who has graciously provided the code and tutorial for this day of the series!
1 of 18
09/09/2013 04:06 PM
If you missed the previous two days of this series, check them out here: Day One: Design Day Two: Pre-flight Ok, with our goals now clearly defined, lets begin!
Step 1 Basic Folder Structure and Layout

First, we start out by creating the basic folder structure for our project, which we definitely need to have to keep assets well structured and organized. In this case, were going to need a css folder with our main css file, an images folder and a js (Javascript) folder once the HTML and CSS is complete so we can add the slider, lightbox and accordion plugins. Also the index.html file in the root folder
Then we create the Basic HTML structure of the layout with the Left and Right sections. Were going to be using a wrapper div to contain and center everything and our Left and Right containers inside, as well as a div at the top and bottom of the wrapper to help us with the rounded corners while keeping the layout flexible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ShutterPress</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta> <link rel="stylesheet" type="text/css" href="css/all.css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper-top"> </div>  <div id="left"> LEFFT MENU HERE </div>  <div id="right"> RIGHT CONTENT HERE </div>  <div id="wrapper-bottom"> </div>  </div>  </body> </html>
We actually prefer to create the HTML before writing any CSS, although some people do a section of HTML and CSS at the same time and then move on to the next section. We have found that doing the whole HTML first helps us think of the CSS in advance and everything else that might be needed, such as Javascript or PHP includes. All I add at this point is my CSS Reset.
Step 2 Left Menu HTML

So we start by coding the left side menu. Here, were going to need an h1 tag and a link for our logo, and an unordered list for our menu items. We also need to nest another unordered list on the third li tag fo our submenu, and do the same with some dummy items on the second li tag just so we can see our javascript accordion working later on. We also need to add some opened and closed classes to the links and the submenu so we can control the icons and which submenu is opened by default, and the active class to highlight the page were currently viewing.
<h1 class="logo"><a href="#">ShutterPress</a></h1> <ul class="menu"> <li><a href="#">Home</a></li>
2 of 18
09/09/2013 04:06 PM

<li> <a class="closed" href="#">About the Studio</a> <ul class="sub-menu closed"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul>  </li> <li>
<a class="opened" href="#">Image Galleries</a> <ul class="sub-menu"> <li><a class="active" href="#">4X4 Gallery</a></li> <li><a href="#">Portrait Gallery</a></li> <li><a href="subpage.html">Slider Gallery</a></li> </ul>  </li> <li><a href="#">Contact</a></li> </ul> 
Now, right after that come the social icons and search field in our Left section located at the bottom. So, well be creating a container div for the bottom section and separate [divs] for each of the two parts inside that container. For the Social icons well need a span for the text and a list for the icons, each with a class to help get the correct icon image and its respective hover state. For the Search section, well create a form and divs containing the corresponding inputs to help float them and add the backgrounds and icons. Doing this rather than applying the styles directly to the inputs works a lot better to avoid cross-browsing issues with line heights and text indentation.
<div id="left-bottom"> <div class="social"> <span>Social:</span> <ul> <li><a class="tumblr" href="#">tumblr</a></li> <li><a class="picasa" href="#">picasa</a></li> <li><a class="vimeo" href="#">vimeo</a></li> <li><a class="flickr" href="#">flickr</a></li> <li><a class="twitter" href="#">twitter</a></li> <li><a class="facebook" href="#">facebook</a></li> <li><a class="rss" href="#">rss</a></li> </ul> </div>  <div class="search"> <form action="#" method="get"> <fieldset> <div class="left"> <input type="text" value="" /> </div> <div class="right"> <input type="submit" value="" /> </div> </fieldset> </form> </div>  </div> 
So heres how it looks in our browser along with the CSS Reset
3 of 18
09/09/2013 04:06 PM
Step 3 Right Content HTML

Now that we have completed our left menu, we can start coding the Right content part for the thumbnail gallery. So first we create an unordered list of images inside links so theyre click-able for our lightbox plugin, and after that we create a div to contain our previous and next buttons.
<ul class="thumbnails"> <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb1.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb2.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb3.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb4.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb5.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb6.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb7.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb8.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb9.jpg" alt="thumbnail" width="15 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb10.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb11.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb12.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb13.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb14.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb15.jpg" alt="thumbnail" width="1 <li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb16.jpg" alt="thumbnail" width="1 </ul>  <div class="navigation"> <a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a> </div> 
At this point, we need to start slicing the thumbnails and saving them with their corresponding name from the HTML so we can have some inline images showing.
4 of 18
09/09/2013 04:06 PM
Heres how all our HTML should be looking in Firefox
Step 4 CSS Reset and Wrapper

Now for some styling we set up some general settings for the fonts, text and links colors and background image
5 of 18
09/09/2013 04:06 PM
/*------------------------------*/ /* GENERAL RESET */ /*----------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none; } ol, ul {list-style:none;} h1, h2, h3, h4, h5, h6, li {line-height:100%;} blockquote, q {quotes:none;} q:before, q:after {content: '';} table {border-collapse:collapse; border-spacing:0;} input,textarea,select{ font:11px Arial, Helvetica, sans-serif; vertical-align:middle; padding:0; margin:0; } input:focus, textarea:focus { outline: none; } form,fieldset{border-style:none;} html, body { margin:0; padding:0; min-height:100%; } /*---------------------------------*/ /* GENERAL SETTINGS */ /*-------------------------------*/ body { height:100%; font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif; color: #000; background: url('../images/bg.jpg') repeat #fff; } a {text-decoration:none; color: #000;} a:hover {text-decoration:none; color: #0285da;}
Then we set up the wrapper styles so we can build the base of our layout, which we begin todo by defining the width of our wrapper and center it with a margin: 0 auto; For the top and bottom divs that we defined earlier, we set up background images and the required dimensions to create our top and bottom rounded corners, and for the wrapper we set up a background image repeated in the Y axis that will cover our content containing the division line between the Left and Right Content. For the wrapper-bottom div we need to set up a clear:both; because once I float my Right and Left containers the wrapper is going to collapse, so we need to prevent this by clearing the floats.
/*--------------------------*/ /* WRAPPER */ /*------------------------*/ #wrapper-top { background:url("../images/content-top.jpg") no-repeat scroll center top #FFFFFF; height:18px; width:994px; } #wrapper { width: 994px; overflow: hidden; margin: 64px auto 0; background:url("../images/content-bg.jpg") repeat-y scroll center center #FFFFFF; } #wrapper-bottom { background:url("../images/content-bottom.jpg") no-repeat scroll center top #FFFFFF; height:61px; width:994px; clear: both; }
6 of 18
09/09/2013 04:06 PM
Heres the result in our browser:
7 of 18
09/09/2013 04:06 PM
Step 5 Left Menu CSS

Now that we have our wrapper ready we can move on with the content: first, we set up the width of both the Right and Left containers so we can float them to the right position.
/*--------------------------*/ /* LEFT MENU */ /*------------------------*/ /* Main Menu */ #left { width: 235px; float: left; } /*------------------------------*/ /* RIGHT CONTENT */ /*----------------------------*/ /* Thumbnail Gallery Content*/ #right { width: 758px; float: right; }
8 of 18
09/09/2013 04:06 PM
Now we start styling the navigation by creating a sprite image for the logo, buttons and icons on the design.
This particular layout doesnt seem like its going to grow in height, but we still want to keep things flexible just in case theres a future need of adding more elements to the navigation. So we set up the Left container with a minimum height so the left-bottom div can be absolutely positioned without having to use a huge margin to push it down, this way if new elements are added the layout will still keep its original dimensions. We also set up the links in the navigation to be displayed as blocks so the whole area can be clickable and not just the text and add the open and close backgrounds using their respective clases and adjusting the position of our sprite. The sub-menu with a class closed is set to display: none; so only the default one is showing.
/*--------------------------*/ /* LEFT MENU */ /*------------------------*/ /* Main Menu */ #left { width: 235px; float: left; min-height: 615px; position: relative; } #left .logo a { background:url("../images/sprite.png") no-repeat scroll 0 0 transparent; display:block; height:32px; margin:8px auto 0; text-indent:-999999px; width:190px; } #left .menu { width: 100%; border-top: 1px solid #eaeaea; margin-top: 30px; } #left .menu li a { display: block; height: 35px;
9 of 18
09/09/2013 04:06 PM

line-height: 35px; padding-left: 22px; border-bottom: 1px solid #eaeaea;
} #left .menu li a.active { color: #0285DA; border-right: 1px solid #fff; } #left .menu li a.closed { background:url("../images/sprite.png") no-repeat scroll 46px -231px transparent; } #left .menu li a.opened { background:url("../images/sprite.png") no-repeat scroll 46px -257px transparent; } #left .menu li .sub-menu li a { padding-left: 38px; } #left .menu .sub-menu.closed { display: none; } #left-bottom { position: absolute; bottom: 0; width: 100%; }
For the bottom social icons we set up the images using the respective clasess and setting up the background images using postions, this goes as well for the hover status.
/* Social */ #left-bottom .social { overflow: hidden; height: 34px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding-left:25px; } #left-bottom .social span { float: left; line-height: 34px; } #left-bottom .social ul { float:left; margin:9px 0 0 10px; } #left-bottom .social ul li { float: left; height: 34px; } #left-bottom .social ul li a { background:url("../images/sprite.png") no-repeat scroll -5px -50px transparent; display:block; height:16px; width:16px; margin: 0 5px 0 0; text-indent: -999999px; } #left-bottom .social ul li a:hover { background-position: -5px -80px; } #left-bottom .social ul li a.picasa { background-position: -26px -50px; } #left-bottom .social ul li a.picasa:hover { background-position: -26px -80px; } #left-bottom .social ul li a.vimeo { background-position: -47px -50px; } #left-bottom .social ul li a.vimeo:hover { background-position: -47px -80px; }
And for the search part, were basically floating the input container divs and setting the syles to them rather than to the input.
/* Search */ #left-bottom .search { overflow: hidden; margin-top: 12px; } #left-bottom .search .left { background:url("../images/sprite.png") no-repeat scroll -5px -203px transparent; float:left; height:27px;
10 of 18
09/09/2013 04:06 PM

margin-left:20px; padding: 6px 0 0 10px; width:158px;
} #left-bottom .search .left input { border: none; background: transparent; width: 100%; } #left-bottom .search .right { background:url("../images/sprite.png") no-repeat scroll -173px -203px transparent; float:left; height:27px; } #left-bottom .search .right input { background:none repeat scroll 0 0 transparent; border:medium none; cursor:pointer; height:27px; width:27px; }
So heres what we have right now in firefox
Step 6 Right Content CSS
11 of 18
09/09/2013 04:06 PM
Here were just floating the list items to get a grid display, we add padding, background color and borders to get a frame for each thubmnail and also add margins for separation. Finally. we have our buttons with a container div that is centered and both links are floated.
/*------------------------------*/ /* RIGHT CONTENT */ /*----------------------------*/ /* Thumbnail Gallery Content*/ #right { width: 758px; float: right; } #right .thumbnails { overflow: hidden; padding:10px 0 0 32px; } #right .thumbnails li { float: left; margin: 0 21px 18px 0; } #right .thumbnails li a { border: 1px solid #eaeaea; padding: 2px; background: #f2f2f2; display: block; } #right .navigation { margin: -10px auto 0; overflow: hidden; width: 50px; } #right .navigation a { background:url("../images/sprite.png") no-repeat scroll 0 0 transparent; display:block; float:left; height:21px; text-indent:-999999px; width:21px; } #right .navigation .prev { background-position: -159px -75px; margin: 0 8px 0 0; } #right .navigation .next { background-position: -186px -75px; }
Heres our first page finished in firefox!
Step 7 Second Page HTML

Moving on to our subpage, what we do is duplicate our index.html and name it something like subpage.html or inner.html, then we take out all the content in our #right container and start building the html needed for our slider gallery and the 3 modules below.
12 of 18
09/09/2013 04:06 PM
We need a div to hold the entire markup for my slideshow, a list of images that will be the slides and well also be using 3 diferent versions of the images so we can see some action later on with the jQuery Cycle plugin. Were also setting a blank div that will be absolutely positioned on top of the images to function as a frame in case this layout ever needs to be implemented into a CMS to get some dynamic content. If this happens, we can just add any image without having to photoshop the rounded corners and shadows before hand. And finally for the slideshow we need to create a navigation div with a couple of links for our previous and next gallery navigation.
<div id="gallery-holder"> <ul class="slideshow"> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/slideshow/slide1.jpg" alt="slideshow 1" width="71 <li><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/slideshow/slide2.jpg" alt="slideshow 2" width="71 <li><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/slideshow/slide3.jpg" alt="slideshow 3" width="71 </ul>  <div class="slideshow-frame"></div> <div class="navigation"> <a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a> </div>  </div> 
Our last block of content has our 3 modules set in their own container, each module being a div on its own that I will float so theyre next to one another. Inside I have and h2 tag for the title and a paragraph for the text.
<div id="modules-holder"> <div class="module"> <h2 class="module-one">Module One</h2> <p>Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices </div> <div class="module"> <h2 class="module-two">Module Two</h2> <p>Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, semper rhoncus diam justo in ante. Aliquam in ultrices e </div> <div class="module"> <h2 class="module-three">Module Three</h2> <p>Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet semper quis, vehicula quis </div> </div> 
Step 8 Second Page CSS

In this particular design, getting the frame for the slides was a bit tricky, so heres what we did: We took the layer called Shape 90 and dropped the fill to 0%. Then right-clicked the layer called 1720729_high, selected release clipping mask and then hid the layer. Went back to the layer Shape 90 and set the opacity to 50%. Right clicked the layer and made a duplicate, selected both Shape 90 layers and merged them. Now you can save the frame as a separate transparent .png and just add some white background in the corners so it covers the images on the back.
13 of 18
09/09/2013 04:06 PM
We set the dimensions for the modules and floated them to get them inline; after that we set up the styles along with the sprite as background image for the icons. We set the list items from the slider to have a position: absolute; with relation to the ul so theyll collapse and look as just one image so we can get the real look of the layout, we will add the functionality after the whole thing is ready. The previous and next buttons are also positioned absolutely so we can get them centered vertically.
/* Slideshow Gallery Content*/ #gallery-holder { position: relative; width: 719px; margin:20px auto 0; height: 442px; } #gallery-holder .slideshow-frame { background:url("../images/slideshow-frame.png") no-repeat scroll 0 0 transparent; height:442px; position:absolute; top:0; left: 0; width:719px; z-index: 10; } #gallery-holder .slideshow li { height:442px; position:absolute; top:0; width:719px } #gallery-holder .navigation a { height:92px; left:0; margin-top:-44px;
14 of 18
09/09/2013 04:06 PM

position:absolute; top:50%; width:47px; z-index:15;
} #gallery-holder .navigation a.prev { background-position:-6px -103px; margin-top:-44px; } #gallery-holder .navigation a.next { background-position:-65px -103px; left:auto; right:0; } #modules-holder { overflow: hidden; margin-top: 24px; margin-left: 20px; } #modules-holder .module { float: left; width: 204px; margin-right: 40px; } #modules-holder .module h2 { font-size:18px; font-weight:normal; margin-bottom:5px; padding-left:25px; } #modules-holder .module h2.module-one { background:url("../images/sprite.png") no-repeat scroll -128px -170px transparent; } #modules-holder .module h2.module-two { background:url("../images/sprite.png") no-repeat scroll -128px -140px transparent; } #modules-holder .module h2.module-three { background:url("../images/sprite.png") no-repeat scroll -128px -110px transparent; } #modules-holder .module p { color: #6a6a6a; line-height: 15px; }
After all this, we can see that the module titles have a Museo font on them which is not a web-safe font, so were going to need to set this up with @font-face. So we ran the font through Font Squirrel (http://www.fontsquirrel.com/fontface/generator) and placed the fonts in their own fonts folder in the root of our Project and set up the CSS in our general settings using the right paths for the fonts.
/*---------------------------------*/ /* GENERAL SETTINGS */ /*-------------------------------*/ body { height:100%; font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif; color: #000; background: url('../images/bg.jpg') repeat #fff; } a {text-decoration:none; color: #000;} a:hover {text-decoration:none; color: #0285da;} @font-face { font-family: 'Museo700'; src: url('../fonts/museo700-regular-webfont.eot'); src: url('../fonts/museo700-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo700-regular-webfont.woff') format('woff'), url('../fonts/museo700-regular-webfont.ttf') format('truetype'), url('../fonts/museo700-regular-webfont.svg#Museo700') format('svg'); font-weight: normal; font-style: normal; }
So all we need to do now is set the font family to our h2 tags, and now our second page is complete.
#modules-holder .module h2 { font-family:'Museo700'; font-size:18px; font-weight:normal; margin-bottom:5px; padding-left:25px; }
15 of 18
09/09/2013 04:06 PM
Step 9 jQuery Magic

Now to add some functionality and animation to our Project were going to be using two plugins: jQuery Cycle for our slideshow (http://jquery.malsup.com/cycle/ ) and prettyPhoto for our lightbox gallery ( http://www.no-margin-for-errors.com/projects /prettyphoto-jquery-lightbox-clone/ ) and then well create a custom function for our menu accordion. Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the js folder, stylesheets to the css folder, etc. ), the cycle plugin can be linked from Github and jQuery can be linked from Google APIs. Well also create a main.js file in our JS folder where we can put our custom function and plugin configuration. So, we reference our stylesheet in the header of the html files
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ShutterPress</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta> <link rel="stylesheet" type="text/css" href="css/all.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" /> </head>
We also reference our javascript files at the bottom of our document just before the closing html tag.
</body> <script <script <script <script </html> type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> src="js/jquery.prettyPhoto.js"></script> src="js/main.js"></script>
Now we go back to our thumbnail list and set up the links with the rel attribute for our lightbox gallery to work. We also have the links pointing at a place holder 500500 image so we can display something on our lightbox
<li><a href="images/500X500.gif" rel="prettyPhoto"><img src="images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>
And finally, we go over to our main.js file and start configuring our plugins. Make sure you read the plugins documentation so you can find out exactly how they work and what options you have to customize them. For our accordion we need to set up a click function that checks if the link has a class of opened or closed. If its closed, then it opens the respective submenu and collapses all others and changes the class of the links so the right icon is displayed. If the one thats being clicked has a class of open, then it just closes it and changes the icon.
$(document).ready(function() { //prettyPhoto LIGHTBOX $("a[rel^='prettyPhoto']").prettyPhoto(); //MENU ACCORDION $('#left .menu li a').click(function(){ if ( $(this).hasClass('closed') ) { $(this).toggleClass('opened closed'); $(this).parent().siblings().find('.sub-menu').slideUp(); $(this).parent().siblings().find('a.opened').toggleClass('opened closed'); $(this).next().slideDown();
16 of 18
09/09/2013 04:06 PM

return false; } else if ( $(this).hasClass('opened') ){ $(this).toggleClass('opened closed'); $(this).next().slideUp(); return false; } }) //SLIDER GALLERY $('.slideshow').cycle({ fx: 'fade', next: '#gallery-holder .navigation a.next', prev: '#gallery-holder .navigation a.prev' }); });
End of Day 3: Review

And now we have a 100% finished Project with working galleries and submenu animations. Enjoy! In the final day of our tutorial series, were going to walk you through how to create your own custom variations of this template using just a couple quick edits. From dark, grungy styles to modern metallic effects, you wont want to miss the final day! Oh! And we mentioned this on the first day of the tutorial, but if youre interested in having a WordPress version of this template made available at ThemeForest, let me know in the comments section!
Coding Credits
The coding and tutorial for this phase of the series was all provided by CodeMyConcept, which offers a wide range of coding services for designers from PSD>HTML conversions to Email templates and WordPress theme conversions. Check out their site at CodeMyConcept.com!
Brandon Jones is MDNW on Themeforest
17 of 18
09/09/2013 04:06 PM
Tags: codeconversiondesignphotographyportfolioPSD>HTMLsitetemplateweb designwebsitewordpress
By Brandon Jones
Brandon Jones is the old Wptuts+ Editor. From sunny Southern California, Brandon has been designing, drawing, photographing, and coding the world around him for the past several years. Not content to pick one media and stick with it has left Brandon with a broad range of talents that have allowed him to work on projects ranging from grungy digital art kits to Fortune 500 software prototyping. He loves design, but even more, he loves the passion and creative spirit that embodies the design community. Check out Brandon's work at ThemeForest.
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
18 of 18
09/09/2013 04:06 PM

Tutorial Psdtohtmlcss8

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tutorial Psdtohtmlcss8

Загружено:

Авторское право:

Доступные форматы

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: HTML/CSS)

Final Product What You'll Be Creating

Intro: Day 3, HTML/CSS Conversion

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Step 1 Basic Folder Structure and Layout

Step 2 Left Menu HTML

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Step 3 Right Content HTML

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Heres how all our HTML should be looking in Firefox

Step 4 CSS Reset and Wrapper

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Heres the result in our browser:

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Step 5 Left Menu CSS

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

So heres what we have right now in firefox

Step 6 Right Content CSS

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Heres our first page finished in firefox!

Step 7 Second Page HTML

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Step 8 Second Page CSS

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Step 9 jQuery Magic

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

End of Day 3: Review

Brandon Jones is MDNW on Themeforest

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: PS...

Tags: codeconversiondesignphotographyportfolioPSD>HTMLsitetemplateweb designwebsitewordpress

Вам также может понравиться