PDA

View Full Version : How was this site made?



JesseW316
03-08-2011, 06:23 PM
Hello,

I'm very new to this and just registered my first domain. I'm in the process of learning how to design the looks/layout of my site using the tools given to us by Westhost (Website Creator, Softaculous), but I'm not really seeing anything that I like.

The site www.urbanchestnut.com has a look/feel that is similar to what I'm looking for, but I'm not seeing anything in Website Creator or Joomla/Drupal that is similar. I was assured when I opened an account here that I would easily be able to do something similar to www.urbanchestnut.com, but I don't know where to begin.

Does that site look like it was done with a theme/template in Joomla/Drupal or some other design tool available in Softaculous? If so, where can I go to find a theme/template that is similar?

wildjokerdesign
03-09-2011, 07:18 AM
Wow now that is an approach to web design I don't think I have seen before. :) The pages are one big image that has been cut up or sliced in a program called ImageReady it looks like. ImageReady is an image editing program sold by Adobe (http://www.adobe.com). This is not a good way to build a site in my opinion.

Can you tell me what are the elements of the site that you do like? Do you like how their actual blog looks? It is a Wordpress blog. They do seem to use ImageReady slices on a lot of thier pages so it is possible that they are also using one of the other Adobe products to actually create the HTML that then plugs in the ImageReady slices.

JesseW316
03-09-2011, 08:49 AM
I like how the background kind of looks like a spotlight focusing only on the middle, which reveals the gold repeating logo. I'd like to do something similar only in my color palette. I like having the links at the top of the page as opposed to down a column. I like the consistency of the nice, simple logo being prominently placed in the top left corner of each page. I like the easy-to-read color palette. I like the fixed-width design and almost twitter-like main box.

I want to have something similar (with my restaurant's logo prominently placed at the top of each page (probably in the center for me), with the major links lined up under it (across the top), and probably a fixed-width single-column main body that is in contrast with the black/spotlighted background. I also like the way that their main body seems to be one column, but most of the pages have their hours and a map placed in that tiny column on the right (a good place for twitter/facebook links, etc, as well).

I am not going to have a lot of content on my site, it is going to be pretty simple, so the layout is way more important to me. I want it to be simple and easy to read and I definitely do not want it to look like a blog. I will use any of the tools that Softaculous can give me or Website Creator, and I've found a few wordpress themes and drupal/joomla templates that I like, but they are all premium and I really require a free template/theme.

wildjokerdesign
03-09-2011, 09:15 AM
Ok well that helps quite a bit knowing the elements that you like. :)

First I would suggest Joomla over Drupal. Joomla is a bit easier to learn, maintain and manipulate then Drupal is in my experience. If you are on a tight budget and can not afford to purchase a template you like then you are going to have to do some research and learn some things about the template system of Joomla. Your first stop will be http://docs.joomla.org/ The Administrator and Web Designer areas are what you want to have a look at.

Layout wise I think you are actually looking for a two column layout since you like the idea of having info in the right column. The spotlight effect can be achieved by CSS and setting a background image to the body of the page.

Let me do some searching and see if I can find a simple free template for Joomla that you could start with.

JesseW316
03-09-2011, 09:19 AM
Thank you so much. Is Joomla what you recommend over all of the other tools available in Softaculous?

I also found this site in my research and I think it's powered by Wordpress: http://www.ginger-restaurant.co.za/

It isn't exactly what I was talking about before but I do really love it. I almost definitely want my site to be centered rather than left-aligned. And I love the more thin, fixed-width look with the patterned background.

wildjokerdesign
03-09-2011, 09:58 AM
Yes the Ginger Restaurant site is powered by Wordpress. Looks like they have a custom template that was created for them by this company. http://www.yellow-llama.com/ They did some really nice work with this template.

I think that Wordpress or Joomla are pretty flexible but to make either not look like your standard blog can take some time and talent. From the two examples you have pointed out that you like I can see that your taste and needs are far beyond what you are going to find as defaults or free in any of the programs that are available in Softaculous.

How much time are you willing to put into this project? The reason I ask is that rather you choose Wordpress or Joomla you are going to need some basic knowledge of the programs themselves and of CSS and HTML. I don't want to discourage you from the project but I do want you to realize it is not a week end project. :)

Both HTML and CSS have a ton of documentation on the internet that is free. The basics of both and be found at http://www.w3schools.com/

Wordpress and Joomla are both what are called PHP programs. As a rule to work with the templates of such programs you don't need to know too much about PHP but often templates to include some PHP code. A good resource for this is http://php.net In the top right corner is a search for box. It can come in handy if you see some php code in a template and need to learn something about it. By default it is set to find info on PHP functions. So if you saw something like this in a template:


<?php foreach ($arr as &$value) {
echo $value;
} ?>
You could go to php.net and search for the term "foreach" or even "echo" and find out more about what is going on.

JesseW316
03-09-2011, 10:26 AM
I'm willing to work quite a bit if it means getting it how I like it, this is my only assignment at work right now. If I am able to use something like Paint Shop Pro (which I have on my computer) to design some type of faux "screenshot" of what I want would that help me at all/could I use it somehow?

Given that I have a pretty clear idea of the type of thing I want, what would be your recommendation? If I love the Wordpress template that the Ginger Restaurant site used, what would be the easiest way to get it/use it or get something similar?

I can't imagine that what I want is so complicated to make, with all of the free themes/templates out there is there nowhere I can go to find something that essentially gives me an outline like this: http://img851.imageshack.us/i/siteoutline.jpg/

I just threw that together in <10 mins, there has to be an easy way to make a webpage like that.

JesseW316
03-09-2011, 10:41 AM
Also, what exactly is a "What you see is what you get" html editor? Is that something I can use to design a site just beginning with a blank page and only putting in what I want, and not have to worry about finding some perfect template or theme and being limited to what those designers allow me to change?

wildjokerdesign
03-09-2011, 11:37 AM
Do you have a Skype, or other messanger account? We could get more done in a chat session. :) Also see the the link in my sig for EditPlus? It is a "free" program to download. If you continue to use it after 30 days it keeps asking you to upgrade (well worth it I think). It could be a very useful tool for what you want to do.

Yep the mock up you designed could be pretty easy to create with basic HTML, CSS and Edit Plus.

WYSIWYG editors are ok and mean just what they say. Could use one but I would suggest not using them. Again they can limit you in what you can do.

JesseW316
03-09-2011, 12:21 PM
I don't have any messaging programs, but how about if I was able to get my hands on something like Dreamweaver?

wildjokerdesign
03-09-2011, 12:59 PM
Yes Dreamweaver is an option. I don't like it but it is an option. :) It might be the best thing for you to start out with. When I first started I used it to quickly layout sites. It too had limits for what I wanted so I soon dug in and learned about the code behind the scene. If you can get your hands on a copy of it then I say give it at try.

I did do a quick mock up of code based on your image. It requires three files. One called test.html another called style.css and then an image called bodyback1024x768.png.

test.html:

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="wrapper">
<div id="logo">LOGO</div>
<div id="links">LINKS</div>
<div id="content">
<div id="altbody">
ALTBODY
</div>
<div id="body">
BODY
</div>

</div>
</div>
</body>

</html>

style.css:

html,body,div,span,applet,object,iframe,h1,h2,h3,h 4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi g,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,s mall,strike,strong,sub,sup,tt,var,b,u,i,center,dl, dt,dd,ol,ul,li,fieldset,form,label,legend,table,ca ption,tbody,tfoot,thead,tr,th,td{margin:0;padding: 0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:bef ore,blockquote:after,q:before,q:after{content:'';c ontent:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}

html {
height: 100%;
width: 100%;
overflow: hidden;
}

body {
height: 100%;
width: 100%;
overflow: auto;
background: #000000 url(bodyback1024x768.png') no-repeat center;
}

#wrapper {
width: 960px;
margin: 20px auto;
text-align: center;
}
#logo {
width: 500px;
height: 150px;
background: #ffffff;
color: #000000;
margin: auto;

}

#links{
width: 800px;
height: 20px;
background: #ffffff;
color: #000000;
margin: auto;
}

#content {
color: #000000;
background: #ffffff;
width: 100%;
height: 600px;

}

#body{
width: 800px;


}
#altbody{
float: right;
width: 150px;
height: 100%;
border-left: red solid 2px;

}

I've attached the image file. If you downloaded Editplus then you could open it up and copy and past the above two bits of code into two files appropriately named and the upload those and the image file to your public_html directory. Then go to example.com/test.html and you should see something similar to what you mocked up in your photo program. No rounded edges on things or any real content or logo but those things are easy to add in really. This is just an example of things... don't expect that you can use it as is. :)