Tutorial Psdtohtmlcss19

How to Code a Stylish Portfolio Design in HTML/CSS
Over on my Blog.SpoonGraphics design blog this week, I posted a Photoshop design tutorial that takes
you through the process of building a stylish portfolio design concept. Follow this second part of the
tutorial here on Line25, where well code up the design into a fully working HTML and CSS website.
Stick around for part three, when well go a step further and convert the static website into a WordPress
build.
The design concept
If you missed the post on Blog.SpoonGraphics, head over to find out how this design was put together
in Photoshop. When youre ready, continue on to start part two: The HTML and CSS.
View part one: Creating the PSD concept
Exporting the image graphics
Before coding up the website, we need to export a series of image graphics from the Photoshop
concept. Start by making a selection of the background texture and saving it as a PNG file. This will be
used to repeat across the body of the web page.
Another image that needs to be exported is the logo. This image will overlap the header area, so we
need to make it a PNG-24 file to make use of Alpha Transparency.
Toggle off the text and button layers from the header and export a selection of the grey background.
This image will be used as a background image in the headers CSS.
A selection across the content area right up to the 960px guides will repeat so the content area can be as
long as required.
Once all the interface graphics have been exported its time to move on to setting up the actual web
page documents.
The HTML structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chris Spooner Design Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
The HTML page begins with a typical document structure comprising of the Doctype, head and body.
A link to the CSS stylesheet is added and the document content starts with a container div to enclose all
the following elements.
<p id="logo"><a href="#"><img src="images/logo.png" alt="Chris Spooner logo"
/></a></p>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="header">
<h1>Hello, I'm Chris Spooner.</h1>
<h2>I craft websites that are beautiful on both the inside and out.</h2>
<p class="btn"><a href="portfolio.html">View my portfolio</a></p>

</div>
Despite the navigation coming first in the concept, well add the logo first in the HTML document to
keep everything structured. The logo is added as a <p> element, the navigation items as an unordered
list and the intro headings as <H1> and <H2> elements.
<div id="content">
<h3>About Chris Spooner</h3>
<p>I earn a living by creating custom brands and logo designs from scratch,
as well as designing and building high quality websites and blogs, but I also enjoy
producing the odd t-shirt graphic, illustration or character design. I pride myself
in having the nerdy skills to build top notch creations online, as well as being
knowledgeable in the print side of design.</p>
<h3>My latest work</h3>
<p>Im forever creating design work for both myself as personal projects
and as a hired gun for clients from around the world. Heres a few of my most
recent works.</p>
<div class="portfolio-item">
<a href="#"><img src="images/portfolio-1.jpg" alt="View more
info" /></a>
<p class="btn"><a href="#">See more</a></p>
</div>
info" /></a>
</div>
info" /></a>
</div>
info" /></a>
</div>
</div>
<div id="footer">
<p id="copyright">© Chris Spooner / SpoonGraphics (Please dont steal
my work)</p>
<p id="back-top"><a href="#">Going up?</a></p>
</div>
The ordering of the headings continues as the next level is a <H3>. The main body copy is then added
within the content div, followed by a series of divs containing portfolio project thumbnails. In the final
WordPress theme each of these items will be created as an individual post. The page is then finished
off with a footer area which contains a copyright notice and back to top link.
Full annotated HTML

Heres an overview of the full HTML page, complete with handy annotations and notes:
View the annotated HTML
The CSS Styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset,
input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #f2f0eb url(images/bg.png);
font: 16px Helvetica, Arial, Sans-Serif; color: #636363; line-height: 24px;
}
#container {
width: 960px; margin: 0 auto;
}
#logo {
margin: 10px auto 0 auto; position: relative; width: 183px;
}
The CSS file begins with a simple reset to remove the browser defaults, then we can start adding global
styling to the body. First the background texture image is added followed by the general font styling for
the page. The container div is given its 960px width and margin: 0 auto; used to centre it up on
the screen. Our logo can then be positioned centrally with the same margin: 0 auto; declaration.
ul#nav {
width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px
auto;
}
ul#nav li {
width: 126px; height: 33px; float: left; padding: 13px 0 0 0;
background: url(images/nav-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
}
ul#nav li:nth-child(1) {
margin: 0 60px 0 0;
}
margin: 0 316px 0 0;
}
margin: 0 60px 0 0;
}
margin: 0;
}
ul#nav li a {
color: #616369; text-decoration: none;
}
ul#nav li a:hover {
color: #a12121;
}
The navigation menu needs a range of properties to convert the basic list into a layout that resembles
the concept. The whole <ul> is first moved upwards to overlap the logo using negative margin, then
each <li> is given specific dimensions, a background image and font styling to match the PSD. In
order to match the layout of the concept, the CSS3 :nth-child(); selector is used so different
margins can be added to each of the four list items.
Some basic styling to the anchors finishes off the navigation menu.
#header {
height: 244px; padding: 52px 0 0 57px;
background: url(images/home-header.jpg);
}
#header h1 {
font: 38px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px;
margin: 0 0 20px 0;
text-shadow: 0px 3px 3px #494949;
}
#header h2 {
width: 510px; font: 30px Georgia, Serif; color: #f2f0eb; letter-
spacing: 2px; margin: 0 0 20px 0;
text-shadow: 0px 3px 3px #494949;
}
#header p.btn a {
display: block; width: 225px; height: 50px; overflow: hidden;
background: url(images/home-header-btn.jpg); text-indent: -9999px;
}
The header area makes use of the grey background image, so an exact height is added to match the
dimensions of this image. Padding then helps move the text elements away from the edge and into
position to match the concept. Each of the headers is then given a range of CSS font styling to match
the text as Georgia with increased tracking. The drop shadow effect from Photoshop can be replicated
with text-shadow while a width on the H2 will force the long sentence to wrap.
The paragraph element with the btn class can then be converted into a button style graphic using
simple CSS image replacement to show the graphic in place of the default HTML wording.
#content {
background: url(images/content-bg.png) repeat-y;
padding: 57px 69px 50px 69px; overflow: hidden;
}
#content h2 {
font: 30px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0;
}
#content h3 {
font: 26px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0;
}
#content p {
margin: 0 0 30px 0;
}
#content a {
color: #a12121; text-decoration: none;
}
#content a:hover {
color: #671111;
}
#content .portfolio-item {
width: 182px; padding: 4px; background: #eee; text-align: center;
float: left; margin: 0 7px 14px 7px;
}
#content .portfolio-item p.btn {
margin: 0;
}
#content .portfolio-item p.btn a {
display: block; width: 183px; height: 29px; padding: 7px 0 0 0;
background: url(images/see-more-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
text-decoration: none;
}
Next up is the main content area. This is first given the repeating background image to fill the whole
area with white. Padding then pushes the content away from the edges to match the original design.
overflow: hidden; is added to the content div to make sure all floats contained within the div are
cleared so they dont break the layout.
Simple styling is added to the content that makes up the body copy, including headers and paragraph
elements. Then the portfolio thumbnails are styled up. These portfolio items are given the light grey
background and floated side by side, then the anchor links inside these divs are styled as buttons using
a PNG background image.
#footer {
background: url(images/footer-bg.png) no-repeat; padding: 40px 0 0 0;
overflow: hidden; margin: 0 0 30px 0;
}
#footer p#copyright {
font-size: 12px; float: left; margin: 0 0 0 30px; color: #b8b6b2;
}
#footer p#back-top {
font-size: 12px; float: right; margin: 0 30px 0 0;
}
#footer a {
color: #a12121; text-decoration: none;
}
#footer a:hover {
color: #671111;
}
The bottom of the page is then finished off with the footer div. The bottom edge of the content area is
added as a background image to the footer, then padding is used to push the footer content down below
the image. no-repeat is added to the background image to make sure the graphic only appears once.
The copyright and back to top links are given basic font styling and floated to the left and right to
position them at either sides of the page.
Browser testing
A quick test in the most common browsers shows no problems with Firefox, Safari and Chrome, but as
always Internet Explorer has problems. The CSS3 :nth-child(); selectors used in the navigation
menu arent supported by IE, but instead we can use jQuery to help with a fix.
$(document).ready(function() {
$("ul#nav li:nth-child(1)").css("margin-right", "60px");
});
To fix this, we just need to use jQuery to add the relevant margins. When the same CSS is applied with
jQuery Internet Explorer has no problem implementing it.
Finishing up the inner pages
Now the homepage is complete, we can continue building the inner pages of the site. The overall
structure of the pages is roughly the same, with just a shortened header and different content on each.
<div id="header" class="page">
<h1>About Chris Spooner</h1>
</div>
To style up a different header, we can simply add a class to the header of the inner pages, then give this
particular header a smaller size and the plain background image.
Weve already created the code for the portfolio items, so this can simply be duplicated for each new
design project. All that needs changing is the thumbnail image.
On the contact page the form can be styled up using tips from my recent HTML5/CSS3 contact form
tutorial. Just adjust the dimensions of the fields and the colours and the form design is all set.
#content #social {
width: 371px; float: left;
}
#content #social ul {
list-style: none;
}
#content #social ul li {
float: left; margin: 0 20px 20px 0;
}
#content #social ul li a {
display: block; width: 100px; padding: 5px 0 5px
45px;
background: url(images/social-icons.png) no-repeat;
}
#content #social ul li a.twitter { background-
position: 0 -3px; }
#content #social ul li a.youtube { background-
position: -172px -1px; }
#content #social ul li a.facebook { background-
#content #social ul li a.flickr { background-
position: 0 -71px; }
#content #social ul li a.digg { background-
#content #social ul li a.lastfm { background-
position: 0 -140px; }
The contact form and social links are enclosed in their own divs so they can be floated side by side.
Then the social links are laid out with another unordered list. A sprite image is added as the background
as this contains every single icon. All you need to do is adjust the background-position so the
correct icon appears next to each of the links.
The final portfolio website demo
Now all the pages are in place the portfolio website design concept is complete. Stay tuned for the next
tutorial where well convert the static HTML and CSS design into a fully working WordPress theme.

Tutorial Psdtohtmlcss19

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutorial Psdtohtmlcss19

Hochgeladen von

Copyright:

Verfügbare Formate

How to Code a Stylish Portfolio Design in HTML/CSS

The design concept

The HTML structure

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<p class="btn"><a href="portfolio.html">View my portfolio</a></p>

<h3>My latest work</h3>

Full annotated HTML

View the annotated HTML

The CSS Styling

Finishing up the inner pages

Das könnte Ihnen auch gefallen