I’m ready to kick off a web site project and more or less starting the skills from scratch to make it happen. I’ve been reading creating a website: The missing manual and also bought:
I broadly understand html and css from the missing manual series but I feel I’m all over the place and still can’t focus on how to get this project going from psd > dynamic site, So would love any advice on additional books I may need etc.
I attached my current design which exists only in psd format atm.
My understanding is I need to learn HTML > CSS > Javascript > Scripting language (I’ve opted for asp.net but open to moving to php if it will suit me more).
I’m trying to get this design from psd to a page template using as much css to style it as possible but retaining the exist photoshop design. (As an aside I’m a bit worried I’ve set the canvas too large but need the space for the final layout of dynamic content). That’s my first hurdle one which I seem perpetually stuck with as I used to do all this with tables (I know it’s criminal!).
So any tips and would I benefit from buying the sitepoint Build Your Own Website the Right Way Using HTML and CSS 3rd Edition or any other manuals.
Finally might it be better for me to have it sliced and then try to understand how it was done and why? I saw reference to a company http://www.markupbox.com/psd-to-html.html that do this.
I’m mainly struggling to get my head around what needs to be a graphic what doesn’t and how the page would come together in markup to look the same without tables.
To be honest, it’s better to think like a coder when planning a website than as a designer. Some designs are not very practical for the web. You mentioned ‘slicing’ the psd, which to me suggests you are still working with the old table mentality. Will CSS, you really shouldn’t ever have to slice an image. You’ll often just have HTML elements that have a background image on them, but it’s just the one image rather than a bunch of slices in cells. Those curvy bits are fine as long as they are decoration, but when they are mixes with elements—especially like form element—the design becomes less practical. Remember that the web is fluid, so that, if nothing else. you don’t know how large the text will be in a user’s display, meaning that it is unlikely to align perfectly with your ‘inelastic’ background design. (These are more general comments than specific criticisms of your layout, but worth noting for where they might apply.)
I guess the first question I’d ask is—do you need a dynamic site? If so, do you know much programming, or are you better off using a pre-built CMS?
Why not use one of the popular CMS packages (Wordpress, Drupal, Joomla) and simply create a template that looks the way you want? Why try and create the entire site from scratch?
The idea of the project is as much about training and learning essential skills as it is about just making something cool. I’d suggest it is more a teaching tool for myself so I can learn:
Atm I have a stack of books each each topic and am focused on the first bit. A CMS wouldn’t really help me as I want to build and understand as I build because the skills I intend to pick up will be applicable for my work environment, possible future career move and just making me feel that at 32 I can still improve!
As you can see it will certainly be dynamic, I intend to build a template page then work on:
A News system.
Login and session system.
A simple trading system for purchasing virtual items from a marketplace with virtual currency (I create both etc).
A forum construct
I’d then like to look at how to refine it through asp to make it quicker more efficient and more flexible.
All done to web standards.
I know it’s a bit of a bite to chew off but I needed something substantive to concentrate on with some long term goals.
It’s ironic that my first problem is not code (I did do a course in vb programming years ago and 2 years of a bsc computer science), but getting my mindset right to forget tables and put that design into workable html & css.
Do you think buying the Build web sites the right way would help me with this initial part? I’ve read the missing manual but still don’t seem to grasp what you’re describing to me as in how to use just css to build the majority of that page.
Designing for the web is rather different from designing for print; things that work well in one medium may not work in the other. That’s one reason why a lot of designers - me included - don’t start with a Photoshop layout which needs to be “converted”. You have to remember that visitors to your site will be viewing it on a range of devices with a range of screen sizes/resolutions, and you want to be able to accommodate most, if not all, of these comfortably. Photoshop generated layouts tend to be aimed at a fixed size, and may not be workable at other sizes.
In addition, if your visitors may be using slow connections or mobile devices, you need to keep the page size down as much as possible. Images add far more to the weight of the page than HTML or CSS, so you don’t want to use images to do things that can be achieved by CSS.
The CSS Zen Garden site is worth looking at, to give you an idea of what can be achieved with CSS. These examples all started with the same HTML page, which the designers then styled as they chose. You can look at the CSS files to see how they’ve created their very different effects.
I’ve had a slight change of direction after getting some encouragement from work and am turning my focus to recreating a design I mocked up in photoshop entirely in css with perhaps a single background image.
What I’m having trouble with atm is getting it to all line up properly in my container and extend the white centered background the entire extent of the page irrespective of content and apply the gradient then add the grey top bar. I’m working with the sitepoint book as well but it’s fairly time critical to at least show some progress on my idea.
Would be grateful for any tips that could speed me on the way to recreating my design.
First, I would make some changes to the HTML. Correct the doctype (no need to close it), change the charset metatag (after all, you are using HTML5) and move it to the top of the head and get rid of the type=text/css.
I would then put in an extra div for the grey topbar.
html, body {
height:100%;
margin:0; /* make sure you don't mess up your 0's and your o's. Happens to me too sometimes. :) */
padding:0
}
body {
background: #000 url(path/to/your/images/nameOfTheImage.jpg) repeat-x; /* the image is the gradient across the whole screen .*/
font-family: Calibri, Verdana, Arial, sans-serif; /* It's called Arial, not Ariel. */
}
#content {
width:950px;
min-height:100%; /* this should make the #content stretch all the way down to the bottom of the screen. */
margin:0 auto;
background:#fff;
}
#someStuff {
height:...px;
background:yourColor;
}
Ah thank you that is superb and yeah I hadn’t even seen I’d used a o.
I’m trying to use notepad atm to hand code it rather than an IDE to develop good practices and to better understand the underlying code.
Really appreciate the code you’ve provided, got it layed it next to mine so I can have a look over the differences. Really help
I’ve been having a play with the code again today and gotta say it is fun and very much enjoying this.
My problem atm is to do with the content div again, the code didn’t stretch the background color to the base of the page. I looked up all the properties for the background but nothing seems to do the trick.
It simply expands based on what content it contains. Any ideas on what I’m doing wrong here, I’m sure it’s connected to the properties of the background.
Here’s what I have atm:
html, body, #container {
height:100%;
margin:0;
padding:0
}
body {
background: silver;
font-family: Calibri, Verdana, Arial, sans-serif;
}
p, h1 {
padding:21px;
}
#content {
width:950px;
min-height:100%; /* this should make the #content stretch all the way down to the bottom of the screen. */
margin:0 auto;
background:#fff;
}
#header {
width:950px;
margin:0 auto;
background:url(image/grad.jpg) repeat-x;
}
#tbar {
width:950px;
height:auto;
margin:0 auto;
background:#484343;
color:white;
text-indent:21px;
}
.nav {
width: 100%;
}
.nav ul {
margin: 0; padding:0;
float: left;
}
.nav ul li {
display: inline;
padding: 21px 22px;
}
I have tried peeking at some code on other sites to try understand what is going on here like the microsoft website but to no avail yet.
My company insists on using IE6 so I don’t think it understood the min-height value.
I added height:100%:
#content {
width:950px;
height:100%;
min-height:100%; /* this should make the #content stretch all the way down to the bottom of the screen. */
margin:0 auto;
padding:40px 0;
background:#fff;
font-family:Arial, sans-serif;
font-size: small;
}
Would anyone have a suggestion on how to go about starting the tabbed form and rounded content frames? The final design is for an intranet using IE6 so it rules out using the brilliant new CSS3 elements.
Would I best best setting the frame as a background image and then use an image for each of the tabs or is there an easier way to style them with css and perhaps javascript?
Yeah that makes good sense as essentially the tabbed panel would I imagine be a container with a row of rollover images. As it’s a form I am presuming I could make a div container as <div id=“fentry”></div>. Then I presume I could create the tab titles as a unordered list styling it with my nav class and inserting a background image of the tab onto each?
Then maybe the rounded box could be created as a background image with 0 margin to sit flush to the tabs using the relative value. From here I could add the form elements into that frame like a container using absolute values?
As a quick aside I’ve spent hours researching .net again as that is where my ultimate interest lies and my god is it confusing!
I’ve got the manuals to learn asp.net web forms as I discovered from my research but their are two newer frameworks MVC3 and web pages.
From what I’ve read it seems webmatrix with the default web pages framework is the best place to start with asp.net then graduate to visual web developer with MVC3.
Again from what I can see web forms is more orientated to those moving from a desktop application development environment which I’m not.
Have I understood that right and going back to my original project and indeed this other one would it pay to go for webmatrix with web pages as my principle IDE / framework to learn then move to MVC3 and visual web developer once I start grapsing the concepts?
You don’t need a div to contain tour tabs, just a simple <ul id=nav"> will do. The background-image should be attached to the anchot tags, one for the normal and one for the hover state. Let’s say the tabs are 200px wide and 30px high:
*nav {
margin:0;
padding:0;
}
#nav a {
display:block;
width: 200px;
height:60px; /* They need to be higher than what they appear to be on the page because the first one goes behind the rounded corner of the container! */
background: url(path/to/your/images/image.gif) no-repeat 0 0;
}
#nav a:hover {
background: url(path/to/your/images/image-hover.gif) no-repeat 0 0;
}
Better yet, use an image sprite, just one image for both states. If you are not sure how, here is a great explanation:
To make the tabs 30px high instead of the 60px they are now, just give your content div a negative margin of 30px so it will cover the lower part.
About .net and stuff: don’t look at me, I’m purely a front-end guy, javascript is as far as I want to go
Edit: overlooked your question about absolute positioning of your Content elements. Unless your are absolutely sure about the size of the elements (especially the heights) I would advise against it. Absolute elements are taken out of the document flow so other elements have no way of knowing where they start or end so they can ruin your design. Just stick to the default positioning.
