Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Hey everyone, sorry for taking so long in writing this tutorial. I got sick and went downhill for awhile, but thankfully am up and running (though still a little queasy at times). Anyway, I’m back baby, so let’s get started!
In reviewing the last tutorial, we created the full home page of Creative Communications in Photoshop. If you just got to this tutorial, you can visit the beginning of these tutorials at http://www.zioneyemedia.com/free-downloads.php or at http://www.brenelz.com/blog.
In this tutorial, I am going to show you how to slice your images in Photoshop and create your live site using CSS and your favorite text editor.
Outside of the 3 things I mentioned above, you should have all the necessary files that you need to get started. Just to be sure you have it, go through the checklist above.
@charset "utf-8";
/* CSS Document */
/* Generals */
body {background:url(images/body.jpg) repeat; margin:0; font-family:Helvetica Neue, Verdana, Georgia, sans-serif;}
p {color:#e7dfa0; line-height:140%; font-size:14px;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
h1 {color:#e7dfa0; font-size:28px; font-weight:lighter; }
h2 {color:#b36d07; font-size:20px; font-weight:lighter;}
h3 {color:#e7dfa0; font-size:15px; font-weight:lighter;}
ul, ol {margin:0; padding:0;}
.clear {clear:both;}
.color {color:#b36d07;}
.dummy {background:#e7dfa0; width:175px; height:150px;}
#container {margin:0; padding:0;}
#center{width:1000px; padding:0; margin: 25px auto 0;}
hr {color:#2b0d0a; height:1px; border:1px solid #2b0d0a;}
#wrapper1 {background:url(images/wrapper.jpg); height:500px;}
#wrapper2 {background:url(images/wrapper.jpg); height:300px;}
a {color:#b36d07; text-decoration:none;}
a:hover {color:#fc3;}
/* Header */
#header {background:url(images/header.jpg) no-repeat; width:1000px; height:540px; margin:0 auto;}
#headercontent {width:1000px; padding:0; margin:0 auto;}
#header2 {width:1000px; height:200px; margin:0 auto;}
#logo {float:left; margin:0 10px 0 0; padding:0; width:1000px; height:150px;}
#logo img {border:none;}
/*-- subheader --*/
#slider { width: 785px; margin: 0 auto; position: relative; height:70px; padding-right:15px;}
.scroll { height: 222px; width:690px; margin:0px auto; padding:17px 15px; overflow: auto; position: relative; /* fix for IE to respect overflow */ clear: left; }
.scrollContainer {width:710px;}
.scrollContainer div.panel { padding:0; margin:10px auto; height: 220px; color:#f2f2f2; width: 724px; /* change to 560px if not using JS to remove rh.scroll */}
#wrapper {margin:0 0 20px 0;}
.scrollContainer div.panel h1 {font-size:25px; font-weight:lighter; text-align:center; padding:2px 15px; margin:25px auto 15px auto; }
.scrollContainer div.panel h2 {font-size:20px; font-weight:lighter; text-align:center; padding:2px 15px; margin:15px auto 10px auto; color:#e7dfa0;}
.scrollContainer div.panel a {color:#fc3; text-decoration:none;}
.scrollContainer div.panel a:hover {color:#b36d07;}
.scrollContainer div.panel #portimg {width:300px; padding:40px 20px 10px 40px; margin:0 auto; float:left;}
.scrollContainer div.panel #porttext {float:left; width:330px;}
.button {background:url(images/subheader-btn.jpg) no-repeat center; font-size:18px; text-align:center; padding:25px; margin:0 auto; width:165px; height:27px;}
.scrollButtons {position: absolute; top: 135px; cursor: pointer; }
.scrollButtons.left { left: -20px;}
.scrollButtons.right { right: -20px;}
/* nav dropdown */
#nav {color:#e7dfa0; font-size:15px; padding:0; margin:-10px 0 25px 25px; float:right; width:480px;}
ul.dropdown-linear { width: 100%;}
ul.dropdown-linear ul li { float: left;}
ul.dropdown-linear li.hover, ul.dropdown-linear li:hover { position: static;}
ul.dropdown-linear ul ul { display: none !important;}
ul.dropdown, ul.dropdown li, ul.dropdown ul {list-style : none; margin : 0; padding : 0; }
ul.dropdown a {color : #e7dfa0; font-size : 15px; font-weight : normal; text-transform : capitalize; display : block; padding : 3px 15px; border-right : 1px solid #e7dfa0; margin : 0; text-decoration:none; }
ul.dropdown a:hover { color : #b36d07; }
ul.dropdown { position : relative; z-index : 597; float : left; margin-bottom : 25px; width : 100%; }
ul.dropdown li {float : left; line-height : 1.3em; vertical-align : middle; }
ul.dropdown .dir:hover {color:#e7dfa0;}
ul.dropdown li.border {border-right:none;}
ul.dropdown li.hover, ul.dropdown li:hover { position : relative; z-index : 599; cursor : default; }
ul.dropdown ul {visibility : hidden; font-size:14px; position : absolute; top : 100%; left : 0; z-index : 598; border : 1px solid #e7dfa0; background:#2b0d0a ; width : 150%; margin-top : -1px; padding : 3px 0; }
ul.dropdown ul.border {border-right:none;}
ul.dropdown ul li a {width:auto; text-transform : capitalize; border : none; color : #e7dfa0; display : block; text-align : left; padding : 5px 10px 5px 10px; text-decoration:none; }
ul.dropdown ul li a:hover {color : #b36d07;}
ul.dropdown ul li {float : left;padding : 0;margin : 5px 7px;}
ul.dropdown ul ul {top : 1px;left : 99%;}
ul.dropdown li:hover > ul {visibility : visible;}
ul.dropdown li.divider {border : none;}
* html ul.dropdown ul {margin-top : 0;width : 760px;}
ul.dropdown ul li.last {background : none;}
ul.dropdown ul a {padding : 4px 6px !important ;}
ul.dropdown ul *.dir, ul.dropdown ul a.dir:hover {padding-right : 0;background : none !important ;}
ul.dropdown ul span.dir {display : none;}
/* Center Left */
#leftcol {width:630px; padding:0 25px 15px 15px; margin:0; border-right:#2b0d0a solid 1px; float:left;}
#buttonnav {margin:0 auto;}
#mainbtn1 {-moz-border-radius-topleft:13px; -webkit-border-top-left-radius:13px; -moz-border-radius-topright: 13px; -webkit-border-top-right-radius:13px; -moz-border-radius-bottomright: 13px; -webkit-border-bottom-right-radius:13px; border: 1px solid #2b0d0a; width:180px; height:65px; background:#e7dfa0; border-color:#2b0d0a; margin:12px 10px; float:left; padding:0;}
#mainbtn1:hover {background:#be6d07;}
.btncontent { text-align:center; padding:10px;}
.btncontent a {font-size:19px; font-weight:bold; text-align:center; color:#2b0d0a; display:block; text-decoration:none;}
.btncontent a:hover {color:#e7dfa0;}
#sub-photos {float:left; margin:7px; padding:0; }
#sub-photos img {border:#fc3 solid 5px;}
#sub-photos img:hover {border:#b36d07 solid 5px;}
/* Center Right */
#rightcol {width:300px; padding:0 0 0 15px; float:right;}
#rightcol ul {margin:20px auto; }
#rightcol li {list-style:none; float:left; margin:2px; padding:2px;}
#rightcol img {border:none;}
#rightcol img:hover {opacity:60%;}
#rightcol h2 {margin:10px auto;}
#form {width:auto; margin:10px auto; padding:5px;}
.formtext, .formsubmit {font-size:12px; margin:2px; padding:5px; background-color:#2b0d0a; width:248px; border:#be6d07 solid 1px; color:#e7dfa0;}
.formsubmit:hover {background-color:#e7dfa0; border:#2b0d0a solid 1px; color:#2b0d0a;}
textarea:focus, input:focus {border:#fc3 solid 2px;}
/* Footer */
#footer {background:url(images/footer-bg.jpg) center no-repeat; width:950px; margin:0 auto; height:120px; padding:25px;}
.contentleft {width:550px; margin:0; padding:10px; float:left; }
.contentright {width:300px; margin:0; padding:15px; float:right;}
.contentleft p, .contentright p {line-height:100%; font-size:10px;}
<body>
<div id=â€containerâ€>
<div id=â€wrapper1â€>
< ?php require (“header.phpâ€);?>
</div>
<!-- ends wrapper1 -->
<div id=â€centerâ€>
</div>
Insert your contents here.
</div>
<!-- ends leftcol -->
< ?php require (“right-column.phpâ€);?>
<!-- ends center -->
<div class=â€clearâ€></div>
( this is to clear out the left and right float columns and resets the next or following code )
< ?php require (“footer.phpâ€);?>
<!-- ends container -->
</body>
The container div sets up the universal page contents for the main page and its subpages. The wrapper1 div hosts the wrapper image for the jquery portfolio. The header.php is included within the wrapper1 div since the header.php contains the dropdown menu and logo, and we want to show that on top of the wrapper image. The center div hosts both left and right columns, with the left column displaying the main contents and the right column displays the form and social media. The footer contains the footer image and contents.
** NOTE: in a <?php require> you don’t really have to create <html> tags in the required page.
In order for the portfolio to work, you will need to call the jquery scripts in this page. So in your subheader.php page, we’ll start with the script codes, which should look something like this:
<script src="javascript/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> <script src="javascript/jquery.scrollTo-1.3.3.js" type="text/javascript" charset="utf-8"></script> <script src="javascript/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script> <script src="javascript/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script> <script src="javascript/coda-slider.js" type="text/javascript" charset="utf-8"></script>
Then we can create the contents for the subheader. The hierarchy divs of the subheader file is as follows:
So the paginated code will look something like this:
<div id="wrapper"> <div id="slider"> <div class="scroll"> <div class="scrollContainer"> <div class="panel" id="1"> Insert the primary portfolio you want to show </div> <!-- ends panel --> <div class="panel" id="2"> Insert the secondary portfolio </div> <!-- ends panel --> <div class="panel" id="3"> Insert the tertiary portfolio </div> <!-- ends panel --> </div> <!-- ends scrollContainer --> </div> <!-- ends scroll --> </div> <!-- ends slider --> </div> <!-- ends wrapper -->
The panel class on your CSS is created as .scrollContainer div.panel, and contains associated margins, padding, and other formatting for this specific content. In addition, it contains formatting for the content associated with this class, such as any <h> tags, link tags, and my image (portimg), button class, and text content (porttext). The id tags are associated with the respective portfolio, and calls that portfolio to slide through when the arrow buttons are pressed.
How this works in a nutshell:
The complete code of the subheader.php file would be
<script src="javascript/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jquery.scrollTo-1.3.3.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/coda-slider.js" type="text/javascript" charset="utf-8"></script>
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="1">
Insert the primary portfolio you want to show
</div>
<!-- ends panel -->
<div class="panel" id="2">
Insert the secondary portfolio
</div>
<!-- ends panel -->
<div class="panel" id="3">
Insert the tertiary portfolio
</div>
<!-- ends panel -->
</div>
<!-- ends scrollContainer -->
</div>
<!-- ends scroll -->
</div>
<!-- ends slider -->
</div>
<!-- ends wrapper -->
You can read more about the hierarchy and functionality from http://www.jqueryfordesigners.com.
<ul id=&amp;amp;amp;amp;amp;amp;amp;rdquo;nav&amp;amp;amp;amp;amp;amp;amp;rdquo; class=&amp;amp;amp;amp;amp;amp;amp;rdquo;dropdown dropdown-linear&amp;amp;amp;amp;amp;amp;amp;rdquo;>
<li class=&amp;amp;amp;amp;amp;amp;amp;rdquo;dir&amp;amp;amp;amp;amp;amp;amp;rdquo;>Services
<ul> // to host the child pages
<li><a href=&amp;amp;amp;amp;amp;amp;amp;rdquo;#&amp;amp;amp;amp;amp;amp;amp;rdquo;>Insert Child Link of Services</a></li>
<li><a href=&amp;amp;amp;amp;amp;amp;amp;rdquo;#&amp;amp;amp;amp;amp;amp;amp;rdquo;>Insert Child Link of Services</a></li>
</ul>
<!-- ends ul -->
</li>
<!-- ends class dir -->
</ul>
<!-- ends nav -->How the nav dropdown works is that the <ul> tag holding all of the navigation links is associated with the “nav†id and the “dropdown dropdown-linear†class. The nav id generates the general CSS formatting (font color, margin, font size, width, etc.), and the dropdown class generates specific CSS formatting, such as <ul> and <li> padding, margins, colors, heights, backgrounds, and mouse-over states.
In a normal HTML code, each <li> tag should be properly closed out after the content within that <li> tag. To display the child pages of each parent link (or sublinks) in a dropdown format, the <li> closing tag is pushed further down the coding structure, and another unordered list format (<ul> </ul>) is placed within the existing list link <li> to host the child pages.
Below is an example of the hierarchy of a dropdown menu:
Parent Page: <li class=â€dirâ€>
Child set: <ul>
Child page: <li></li>
Child page: <li></li>
End of Child set: </ul>
Child set: <ul>
Child page: <li class=â€dirâ€>
Subchild set:** <ul>
Subchild Page:** <li></li>
Subchild Page:** <li></li>
End of Subchild set:** </ul>
End of Child Page: </li>
End of Child set: </ul>
End of Parent: </li>
As shown, the parent and/or child links are given the dir class to keep the color scheme on the onMouseOver congruent with the rest of the nav functionality. Furthermore, you can add more child pages within your parent links by adding more unordered lists to host your child pages. You can create more sub-child pages to your child pages by inserting the code I’ve asterisked above.
The major difference between header.php (called from the main index page) and header2.php (associated with the page templates/subpages) is that the header in the main index page is calling for the subheader that contains the portfolio slider to be displayed. The header2.php does not. The logo and nav.php functionality still stays the same.
The subpages and page templates are pretty much similar in form and structure, and leaves room for opening the developer/designer to create that which is needed for the business of the site to function and function well. For example, the current code structure of the san-diego-web-design.php page is based on a simple, bare-bones page structure with no script code and minimal CSS.
<body>
<div id=â€containerâ€>
<div id=â€wrapper1â€>
< ?php require (“header2.phpâ€);?>
<div id=â€centerâ€>
<div id=â€leftcolâ€>
Insert contents
</div>
< ?php require (“right-column.phpâ€);?>
</div>
<!-- ends center -->
<!-- ends wrapper1 -->
<div class="clear"></div>
< ?php require ("footer.php");?>
</div>
<!-- ends container -->
</div></body>
In comparison, the san-diego-web-design-portfolio.php page takes the bare-bones page structure and adds an interactive method to increase user engagement. To add a more interactive method of showcasing portfolio images, I augment the HTML code to add javascript scripts to call the lightwindow javascript files. You can download them at www.stickmanlabs.com/lightwindow.
The sub-photos id is added to float the image to the left with colored border widths on static state and hover state. The relationship status on the image, marked by the “rel=lightbox[XXX]†code, categorizes the image and displays only those images within that category once a user clicks on it. For example, I can have 25 portfolio images on this page, and 10 of them have [design] as their relationship association. Once a user clicks on the image with the design “relâ€, the user will only be able to shuffle and see the design images.
Need a more detailed explanation of lightwindow? Check out www.stickmanlabs.com.
Another example of a modified subpage or parent page is the about Creative Communications page (san-diego-marketing-advertising-firm.php). In this page, I am sticking with the bare-bones layout and structure, and to spice up the way to create interest in the company’s employees, I added CSS3 rounded corners as my topical buttons to display content hierarchy.
**NOTE** Using CSS3 will not get that shiny w3c logo for CSS approval, as that only approves CSS2 coding. Also, this method of rounded corners are only viewable in Firefox, Safari, and Chrome. Sorry, IE doesn’t work on this type… yet.
With CSS3, you can create rounded corners using the “–moz-border†and “–webkit-border†code. For example, the CSS for my button on this page is as follows:
#mainbtn1 {-moz-border-radius-topleft:13px; -webkit-border-top-left-radius:13px; -moz-border-radius-topright: 13px; -webkit-border-top-right-radius:13px; -moz-border-radius-bottomright: 13px; -webkit-border-bottom-right-radius:13px; border: 1px solid #2b0d0a; width:180px; height:65px; background:#e7dfa0; border-color:#2b0d0a; margin:12px 10px; float:left; padding:0;}This formatting produces a three-rounded-corner layout, where the top left, top right, and bottom right all have 13px rounded corners. Notice that the –moz-border and –webkit-border allows you to install which corner you want to target and how deep or rounded the curves are.
Here is where we did not use images to create the textarea for the forms. Thankfully, we can utilize the power of CSS to manipulate shapes to our desire. Hence, I am able to create the form structure with the text boxes solely modified by CSS.
I regret that I cannot go deep on the form structure or validation of it, since I wish to not create a working form at this moment. However, if you choose to experiment with form validation and creation on your own, I suggest browsing through Smashing Magazine, Web Designer Depot, or A List Apart for some great tutorials on form creation and validation.
Since we’re using Dreamweaver, we can create a new site, add our contents, and upload online.
Well that’s about it for this one. Thanks for bearing with me and stay tuned for the next tutorial on SEO and keyword research!
November 23rd, 2009 at 12:36 pm
[...] from scratch with Photoshop, laying out positioning and placements of call-to-actions; 3) how to slice and convert images into CSS for HTML uploads; 4) how to conduct, develop, and implement search engine optimization techniques, [...]
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!