I am designing a site for my next door neighbour and have attached a wireframe which I based around the 1140 grid.
I have some fundamental knowledge of HTML & CSS and need a summary of how to attack the markup and style sheets. I’ve been through hours of books, tutorials and self study and its starting to make sense but could do with some pointers. Its quite a steep learning curve!
A massive thank you to anyone who can offer any suggestions.
Hi,
I am new to this forum. I have checked the attached image. Seems simple nice design.
If you have the PSD of the same(as design given in attached image), you need to slice the same.
For design using HTML and CSS, you need two file one for HTML and another for CSS. Then you need to call the CSS file in the header section of your HTML file as follows:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example.com The Example site</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
Do not forget to give the path of CSS file if its located in a different directory.
Thanks for the advice! I panicked rather as I haven’t touched HTML or CSS before I didn’t know where to start.
After studying HTML&CSS by Jon Duckett plus a few late nights it is coming slowly but surely and is starting to look good.
So far I have managed to:
Adapt a grid template
Used divs and CSS to style the layout exactly like my Illustrator wireframe.
Given the body of the page and dividers gradient background.
included a js/jquery image carousel on the home page.
I asked a rather open ended question so I’m not surprised that I got hardly any replies. As I research the subject more it is starting to make more and more sense.
Will post a link when its finished so I can get a critique.
i would go with 960 or 1280. 1140 is a bit odd.
Can you let us know why are you basing it on the 1140 grid? What devices are you targeting?
As I naively negotiate the endless bombardment of knowledge I thought 1140 grid was a responsive to larger and smaller monitor sizes?
I’ve actually used a 960 grid as the book I’ve been studying used it.
The devices I would be targeting would be laptop, desktop & possibly tablet. I may trial it on a couple of different sizes as I am keen to learn.
My current problem is a js/jquery image carousel. I’ve included the slideshow from here http://dev.daledavies.co.uk/easyslides/ which worked perfectly as the instructions were easy to follow. However the version from [URL=“http://paulmason.name/item/simple-jquery-carousel-slider-tutorial”]http://paulmason.name/item/simple-jquery-carousel-slider-tutorial has no instructions and I’m at a loss as to were the JS goes and how to set it up. I’ve tried several things using my extremely limited knowledge and they haven’t worked.
I’m finding the process of rather addictive and am starting to really enjoy it and my reading list is rapidly expanding. Hopefully I’ll progress from rank amateur to semi-reasonable one day.