Designing a website for us HTML beginners

I wanted to put out there a list of sites that really, really helped me with my website. I’m a beginner HTML person, and I can get around with a few things here and there, but I needed a lot of help. I designed my first website from scratch using Dreamweaver (for FREE html software, try out Kompozer. I downloaded it and it works great!) to get a basic idea of designing one, but it didn’t quite look professional enough. So I bought a $30 template from TheTemplateStore and updated it for my new site and I’m really loving it.

Here’s my old website: http://www.oldsite.zhollis.com
And here’s my new one: http://www.zhollis.com

I mentioned before, for my new website, that I used Adobe Dreamweaver and Adobe Fireworks and Swish, which all together can cost over $1,000. I had a friend who I borrowed from, though you can get a trial version of Swish. However, my old website, I just picked up a basic design at oswd. Also at a template store, not at the one I used but anyone that sells templates, they can provide you with websites with programming that you can update yourself without having to buy stuff like Dreamweaver. You simply look at the templates that use CSS based layouts. But if you can find a Free Template to update, I would go that route.

CSS – Yeah. That was a new one for me too. What is it? Well basically, if you have like hyperlinks on all your different pages and you wanted to update the look of all of them without having to update every…single…page, you would put a “class” next to every hyperlink, and in the css coding, you can change the color, or what happens if someone hovers their mouse over a hyperlink, in the CSS code that styles your hyperlinks…and it updates all of your pages at once! Pretty cool thing, but you have to know CSS to use it.
I go here to find out the basics of CSS – Introduction to CSS

So on to my list of useful tools….

++++++++++++++

Free web tools to help you design your website.
I use Dreamweaver, but if you want to save some money, here are some free software to help you design your page.
NVU
Hot Dog
Coffee Cup

Free photo editor – GIMP
This was great for me to use. Especially for those pictures where you want to cut out an image and have it floating on top of another image, like your personal photo. I wanted the background to be transparent, where the background of the picture doesn’t have to be a specific color like white or black, because this might not blend in very well with the background of your website. What I’ve learned is that .jpg .bmp .gif can’t have transparent backgrounds–but .png can. GIMP help me put these images, like this one on my site.

HTML – The easy way to understand it.
I use this site all the time to help me figure out what a string of commands mean.
Introduction to HTML

Neat Scripts to add to your website.
I didn’t use any of them, but with my first website, without a template, I was trying to figure out how to do those neat DropDown Menus that are on some sites these days and I found the code at this EarthWeb site
The actual code for the drop down is here:

How to Make a “Contact Us” Form
I really needed help on creating my own form, and the basic HTML site, though it helped with some things about forms, didn’t quite help with HOW to get the information from the form to my email box. PHP Tutorial: Writing Your First PHP script: Feedback Form Script, help me SO SO much. It helped me understand how to get it working and the little bitty things that you have to know like the position of certain strings in the “mail” section and how you want it to look in your personal email. When I change my website to a template, I had to redo my form, and I completely forgot how I got it working. I came back here, did my refresher course, and BOOM…done.

Dealing with Bots
Bots are those robots, or automatic programs sent out by people who spam your email, website, “contact us” page and comments areas. So you know those images in a box where you have to type the characters of the image before hitting the submit button for a form, and the image changes each time you use it? Those can help out with thos nasty little bots. I found reCAPTCH on some Author websites and I was like, “Hey, where they get that?” With some research I found it and it’s just something to help out with those party pooper Spammers. It was a bit complicated to install and the directions on the actual site doesn’t help much at all for us basic HTML users, but this site helped me out A LOT and helped me get it up and running. Installing eCAPTCHA with PHP

Photo Slideshow
My first slideshow on my old website, I used a
Slideshow on Homepage with JavaScript. I couldn’t blend in the background though, yet it was very useful. For my new website, I learned Swish.

That’s about it. All the information dumping I could put on here that helped me. Whew! Hope it helps you out with your next web adventure.