This is the first of a X part series, (Once I have figured out how many parts there will be, I’ll update that X!) and comprehensive guide on how to design, create, form and install your first content managed web site using Dreamscape. (Much of the series will be based upon Expanse CMS 3.1, though both systems are very similar).
This first article explains where to start in your effort to produce a bespoke custom built web site of your own.
Some tools you will need, as well as some basic knowledge of CSS, XHTML and photoshop (or other graphic studio);
Three simple tools to get you started, we will start off however with good old fashioned pen and paper.
A good place to start is taking a look at the elements that usually build up any web page.
Unless you are like me, who can visualise how a user is going to navigate, open, look through and read a web site in your head, then it is always best to jot your ideas down, and plan your attack on paper, choose an A4 sheet, turn it landscape, and visualise that as your browser window, mark out where you want your logo, how wide you want your content, where the text is aligned, centred to the window, or to the left or right.
Once you have done that, start building elements into the shapes, scribble in your logo, roughly draw a menu, shade in a sidebar, group a footer together, and start to build up your idea of a fully fledged web site which you yourself would want to visit.
Once you have done that its time to open Photoshop or your graphic editor of choice.
Its a good idea to start by knowing how wide you want your content, as you read this, my content is held within a space of 800px - thats 800 pixels. Screens are getting wider with an average screen size being 1024px by 768px, you will want to take advantage of all that screen real estate. If your going to have your content set at 800px create a new document with a width of 1000px by 1000px, this will give you an idea of what your finished article will look like in a browser window.
Once you have created your document, the first point of call will be to add some guide lines, if your using Photoshop grab the rulers with your mouse and drag into position. Depending on where on the screen you wish your content is how you place your guide lines. If your after a centred look, drag your first guide line to 100px, and your second at 900px, this will give you an idea of your workable space between the two guidelines.
Next think about how much space you want to offer up for your "Header", above you will see that I have provided 157px to contain all that I want. But feel free to choose as much or as little as you like.
Bare in mind though your logo, as you will want to add it inside your header (although there is no rule stipulating that you must do it this way). For this tutorial this is where we are going to place it however.
So drag a guide line to the bottom of where your header will appear, then to the bottom of your menu - that is if you are going to have a menu across your page, under the header. Else you can skip that guide line and go straight to your footer, I tend to only provide 50px, but you can have more if your design calls for it.
If your menu is going to go down the page on either side of your layout, go ahead and drag a guideline to where you want it to finish, vertically.
As you can see on my design I have provided 200px on the left hand side of my content for the menu, and some sidebar space if I wish to use it underneath.
What you should have left is a nice area to which to enter your content.
Now is the time to start to add color to your image. Start with the background, are you going to have a white background, a solid color, a pattern, or perhaps a gradient, what ever you can think of, go ahead and put it in.
Do the same for all the elements you have just created, including your logo, what you will have left is the start of something spectacular. Try to think of all the elements your page might have, it is advisable to have several layouts of the same base outline for different pages, for example one for a blog, another for a contact page, and an alternative layout for a gallery page.
Dreamscape lets you have many styles of categories;
Be thinking about what you want your content to look like on these pages as you design, and create a layout for each page.
Posted On: Wednesday, May 14th, 2008 @ 5:51 pm by Ian Tearle
If you would like to discuss anything about this post, please be polite and add your comments below.
No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".
If you would like to discuss anything about your next project please drop me a line.
Projects start at £99.00 per month
We normally book 2–3 months in advance.
No matter how small your project is, or if the prices above scare you, please do get in touch, I shall always listen and will advise freely alternative ideas or solutions. If you are a charity, let's talk!