Tips and Slicing
- Thread starter Nolan
- Start date
break your site down into its main components, then break down the sub components of such
header
--ad placeholder
--socialmedia widget
nav
--logo
--navbar
content
--searchbar
--leftcol
----slideshow
----projects (x6)
----ad placeholder
--rightcol
----login
----ad placeholder
----contact form
footer
so therefore make your html match the components, and stick it all within a wrapper to keep it tidy. ie.
all your styling is to be done in your css file, although I cant be bothered to write that out right now...
header
--ad placeholder
--socialmedia widget
nav
--logo
--navbar
content
--searchbar
--leftcol
----slideshow
----projects (x6)
----ad placeholder
--rightcol
----login
----ad placeholder
----contact form
footer
so therefore make your html match the components, and stick it all within a wrapper to keep it tidy. ie.
HTML:
<body>
<div id="wrapper">
<div id="header">
<div class="ad_placeholder">AD GOES HERE</div>
<div id="SM_widget">SOCIAL MEDIA GOES HERE</div>
</div>
<div id="nav">
<img src="#" alt="#" id="logo" />
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</div>
<div id="content">
<div id="seachbar">SEARCHBAR GOES HERE</div>
<div id="leftcol">
<div id="slideshow">SLIDESHOW GOES HERE</div>
<div class="projects">PROJECT 1 GOES HERE</div>
<div class="projects">PROJECT 2 GOES HERE</div>
<div class="projects">PROJECT 3 GOES HERE</div>
<div class="projects">PROJECT 4 GOES HERE</div>
<div class="projects">PROJECT 5 GOES HERE</div>
<div class="projects">PROJECT 6 GOES HERE</div>
<div class="ad_placeholder">AD GOES HERE</div>
</div>
<div id="rightcol">
<div id="login_box">LOGIN GOES HERE</div>
<div class="ad_placeholder">AD GOES HERE</div>
<div id="contact_form">CONTACT FORM GOES HERE</div>
</div>
</div>
<div id="footer">FOOTER GOES HERE</div>
</div>
</body>all your styling is to be done in your css file, although I cant be bothered to write that out right now...
http://www.w3schools.com
Start with the HTML Phreadee posted, then position using the CSS you'll have to learn from the site I linked to above. To do what you're wanting, you need to learn some code. I realize it's probably not what you were hoping to hear. Photoshop *can* do it for you, but it will be broken, misaligned, and you'll have a website full of nothing but a million little images that are absolutely positioned. Then, if you try to change any text or images, it'll jack the whole thing up. And, if you need to make any other changes, you'll have to start the whole process over again. In the long run, it'll be easier to just learn the code. And, who knows, maybe you'll end up loving it. That's how I got into it (well, back into it, but that's another story).