I have to design a website, but I'm not sure where to start

I volunteer for a local animal rescue, and they've been looking to revamp their website for some time. They can't really afford to hire anyone for the job though, and asked if I could help. I told them I didn't really have any experience, but I'd see what I can do.

I'm pretty efficient with Photoshop, and I know some html and css from creating Myspace layouts and divs. I thought making a website wouldn't be that difficult, but the more I learn, the more daunting the task seems. I have Dreamweaver, and I thought I could learn it as easily as I did Photoshop, but now I'm being told I should use a CMS like Wordpress, Drupal, or Joomla. Or that I should learn to code by hand with Notepad++.

I just don't know which method to use or how to get started. And I was hoping you could give me some advice. This is the site they'd like to emulate: http://www.richmondspca.org/

 

Myspace layouts and "divs" is something completely different.

If you have no clue about HTML/CSS you should start at w3schools.com ... if you have no clue about CMS then I would say first get the basics of HTML/CSS before installing/using a CMS and trying to customize a theme.

The http://www.richmondspca.org/ site is a custom coding (it's done bad, because tables are used for the layout).

Anyway, get the basics first before using CMS or building a site like http://www.richmondspca.org/

Using PS and "slicing" the site into tables (and using DreamWeaver then) is not the best way to do a site.

Good luck anyway

 

If you ready to pay for the service, you can get a cheap deal done in BST. No assurance on quality. Otherwise, Wordpress pretty straight forward.

 

Having a photoshop experience is a bonus already but spend sometime understanding the basics of css and html.

 

Company background, likes and dont's start from there.

 

If you're not confident in your ability to make something nice you don't necessarily have to fork out for a custom job, you could set up a WordPress site for free (or close to it) and buy a ready-made template for a ridiculously low price.

There are lots of free WP templates out there too but you need to know what you're looking for re: hidden spam links and things so I'd recommend spending a tiny amount on a safe one instead.

Sites like ThemeForest and MOJO Themes have ridiculously good quality stuff for basically nothing.

If you're determined to do this yourself you've got two main choices:

1. Create something using just "HTML and CSS" which will mean the code needs updating whenever something new is added to the site.

2. Use some sort of CMS, of which WordPress is only one example, so new content can be added through an admin panel.

If you go with option 2 you'll need to know a little bit of PHP on top of the basic HTML and CSS, but it is the better option as far as futureproofing goes. One way to do it is to create your layout in plain HTML/CSS first and then learn how to add in the PHP tags for your chosen CMS once it's working in its basic format.

But yeah if I were you I'd just buy a WordPress theme and maybe change some CSS to make it unique.

 

I think word-press will be good option for you coz its easily customizable plus there is lot of themes, you just have to change graphics to make it unique and i think it will not difficult for you as u said u r good in Photshop..

 

The easiest way to get going is by using Wordpress.
If you have hosting with cpanel and Fantastico (or simple scripts) - it takes just a couple of clicks to set up.

I agree that you can spend a lot of time finding a suitable theme - and the one you choose, will probably depend on what you are looking to do.
But to get started, I would check out the free version of Flexibility 2 http://www.flexibilitytheme.com/
Or if you want to create something 'pretty' for $50 you can buy Artisteer that lets you create your own WP themes at the click of a buttom

 

If I download a CMS, pick a theme, and want to customize it...do I do that in Dreamweaver?

And why is Word Press a better choice than either Joomla or Drupal?

 

WP isn't necessarily "better" in terms of what it can do, but it's widely considered to have the most intuitive and easy-to-use backend which makes it extremely popular among people who are new to the whole CMS thing.

If you pick a decent theme it'll have lots of ways to customize it built into the settings anyway (changing headers and colour schemes and whatnot usually), I'm sure you can edit the code in Dreamweaver if that's what you need to do but I've never used that so can't be much help with specifics.

 

Well, if you pick a theme, then you can change the images in photoshop, and then, on the FTP of your server, you can change the old images with the new ones.

 

Just pick a template from oswd.org and load it up on Dreamweaver and edit your contents.Or use Wordpress and there are tons of free templates on Internet.

 

Use any WYSIWYG editor or text based editor whichever you are comfortable with.

"Better" is not the right word, may be you can say "preferred" CMS and reason is already pointed out by kiramanic.

Just make sure if you are picking up free theme, pick from reliable WP theme provider.

 

from my experience,when we talk about website design then you must manipulate html tag. even we used CMS system i think html is a core of everything

 

Does anyone have any good tutorials or websites that explain the process of making a website using Word Press as a CMS?

 

first u have to think about the company profile , stucture and other thing which is necessary for starting the company website..ad after tht u can make it using zoomla or wordpress....

 

wordpress would be a good starting point.

 

You are correct - wordpress by itself isn't necessarily better than alternatives, such as Joomla or Drupal.
But, just as Microsoft owns most desktops because of the vast array of software other people have written, Wordpress own DB type websites because of the vast array of themes and plugins other people have created for it.
Best way to learn is actually by doing it yourself - it takes just a couple of clicks from a cPanel hosting account using Fantastico.
Then play with your site through it's dash-board - changing themes, adding plugins and trying out widgets.
If you already know some HTML, you'll pick this up pretty quickly

 

I downloaded and installed WordPress, and set up a local server on my computer so I could play around with it. I found a theme I want to use too, but I'm having a lot of trouble getting it to look the way I want. It also looks different in different browsers.

http://www.proudthemes.com/demo/academica/

This is the theme. Mainly what I'm having trouble with right now is getting the navigation menu set up. In the preview, all of the menu items are clickable links, but I want my menu to just be text with the roll over drop down menus which have links to the other pages. Does that makes sense? I guess I don't know all of the lingo yet.

 

I'm not quite sure, but I think where you would want to edit would be right here:

      
        <div class="widget"><p class="heading">Start here</p><div class="menu-homepage-container"><ul id="menu-homepage" class="menu"><li id="menu-item-60" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-52 current_page_item menu-item-60"><a href="http://www.proudthemes.com/demo/academica/welcome-to-social-university/">Welcome to Social University</a></li>
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-61"><a href="http://www.proudthemes.com/demo/academica/about/">About Us</a></li>
<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-62"><a href="http://www.proudthemes.com/demo/academica/admissions/">Admissions</a></li>
<li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-63"><a href="http://www.proudthemes.com/demo/academica/conferences/">Conferences</a>
<ul class="sub-menu">
	<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-66"><a href="http://www.proudthemes.com/demo/academica/conferences/upcoming-events/">Upcoming Events</a></li>

	<li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-67"><a href="http://www.proudthemes.com/demo/academica/conferences/past-events/">Past Events</a></li>
</ul>
</li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-64"><a href="http://www.proudthemes.com/demo/academica/research/">Research</a></li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-65"><a href="http://www.proudthemes.com/demo/academica/page-templates/">Page Templates</a>
<ul class="sub-menu">
	<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="http://www.proudthemes.com/demo/academica/page-templates/full-width/">Full Width</a></li>
	<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-69"><a href="http://www.proudthemes.com/demo/academica/page-templates/only-left-sidebar/">Only Left Sidebar</a></li>
	<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-68"><a href="http://www.proudthemes.com/demo/academica/page-templates/only-right-sidebar/">Only Right Sidebar</a></li>

</ul>
</li>
<li id="menu-item-79" class="menu-item menu-item-type-taxonomy menu-item-79"><a href="http://www.proudthemes.com/demo/academica/category/news/">News</a></li>
<li id="menu-item-80" class="menu-item menu-item-type-taxonomy menu-item-80"><a href="http://www.proudthemes.com/demo/academica/category/blog/">Blog</a></li>
<li id="menu-item-81" class="menu-item menu-item-type-taxonomy menu-item-81"><a href="http://www.proudthemes.com/demo/academica/category/gallery/">Gallery</a></li>
</ul></div></div>

HTML:

When I started doing web design I found it easier to write my page using Notepad++ and the validation tools provided by W3C. That way I knew exactly how my code was supposed to operate.