Finding our way around this great area has been fun in the last two weeks since we moved here. Even though I am here I am still working with clients in Florida. I have been making every effort to finish up those projects and coming close to going live with both of them. One being Laserpath in Oviedo, FL and the other being Paratour in Christmas, FL. This is a sneak peak of the paratour site for now. If you go to there site now you will see what I have been working from. Man, tell you what, I am learning as I go here and site redesigns are certainly more work than starting from scratch. Most of the work is restructuring information and making sure the new site flows well, yes that would be UI. I have been reading about another web designers strategies on Viget about processes that can help with PSD files that have alot of layers. Anyway, you pick and choose from all other until you find a way that works.I am a novice coder with graphic design in my blood so working with code can be frustrating. Fortunately I have found some tools that have helped me along the path of making some money selling websites without knowing all the ins and outs of HTML, CSS, PHP or JS languages. I began with not knowing a thing or understanding how the web even works. I didn't get online until around 2000.
The First thing that helped was a community college class.
That was where all the lights turned on for me. The Prof explained the basic elements of what it takes to get a site online and I was like,,,OH my gosh! that is so easy. Here's the basics:
You have your computer that is online and there is another computer lets say in California, where it seems everything is going down. The "server" is that other comp in LA that you pay to rent space on. On your computer you create a file with the appendix like this .html it looks like the other files that have other endings like .jpg or png. you follow? This freaking thing is always putting my text in bold.. see.. I still have alot to learn and here I am trying to help you out! Stupid.. my dad says it's always the users fault.. so thanks dad.. HTML is a language like english that has to have things in a certain order for it to work. Browsers like firefox and internet explorer (lame) read these languages and convert all that funky stuff into nice formatted legible things we read. So you learn what makes a basic HTML file work. You create it in a text editor, and every comp should have one of those, even PC's with windows (YUCK)... ok.. you can see that I don't like Internet Explorer of PCs that run windows or any microsoft makes besides Halo. and yes I have and love a Mac.
So you have a HTML file, then you send it to the server. HOw do you do that? It's called FTP, File Transfer Protocol. The first two words make sense and the last one just means the way something should be done to do what the word is referring to which would be the words around this protocol word. So.. lets say you decide that after you saw a hot super bowl ad that you wanted to use Godaddy to do all that webstuff you've been wanting to do. Well they make it pretty easy and that is where it began for me as well. I didn't see the ad, but I am sure it was a hard to ignore call to action. So you set up your godaddy account and bla bla bla.. I can get all wrapped up in the details, lets keep it light so you can finish this up before your wife calls you up to move that heavy dinner table out of the basement before it gets ruined.
FTP, it allows you to send that HTML file to the server, remember, the other computer where that HTML file will now live in the rented space (hosting) that you bought for $ 50-$90/yr. Now that file was called whatever you named it, mybologna.html or maybe salami.html whatever you called it, that name needs to change to this index.html . so either change it before you upload or after. The server looks at the files you put on it and locates this file and makes it the "home page" of your website. So, as godaddy offered you hosting which you bought , you probly bought a URL- Unique relative Location- that is what thought that meant.. but it actually means Uniform Resource Locator
hmmm. whatever.. let the computer engineers explain that one. So that URL is your Address to the space you rented that will show whoever is visiting the HTML file you uploaded there. Make sense... get the visual... URL-address HTML- lives on server Index file- the new name of the HTML FTP-how you got it there (the mailman, lets say) Server- Rented space on that computer in California and BINGO you have a website!
Not so fast there Carlos!
Yes, there is alot more to it, but that will get you to make what all those geniuses writting books about how to do this, whats called a Hello world website.. your first WORLD WIDE WEB space.. wow.. now everyone can see you salami.html site that your just put up.
I hope that wasn't to tangent full of rabbit trails. Yes, I am certainly a creative and my writting goes all over. The next cool thing that you can do is get photoshop and make your site even cooler.
Photoshop slices make a web pie
ok, this is old school, but you have to learn and start somewhere. All the pros will tell you, Ahhh. don't use this technique to make sites.. well tell em to get the silver spoon outta their A$$ and let you figure it out. Yes.. there are standards when it comes to designing. It isn't just for the sake of doing things just becuase, but there are easier and faster ways that you can learn to create sites, but it takes time to learn these jedi ways. So.. on to photoshop and the lovely SAVE FOR WEB button.
Open up your new doc and make the settings RGB.. which stands for REAL GOAT BUTTER. and choose your dimensions.. then go to town.. paint a little here.. add a style to this layer.. and yes photoshop skills is for another day another time. Just screw around and you'll make something cool eventually, it's digital so you won't hurt or make a mess of anything! how cool is that.
Slice and dice the document with the slice tool... look for it by hovering your mouse over the buttons until you see the words SLICE TOOL. this is goin to slice up your document so that it isn't one huge image when you do the next step. This is where you would slice your navigation buttons up so you can create rollovers later on. For now just slice it up once or twice so you can see how it works.
Go to EDIT/SAVE FOR WEB. a neat little window shows up maybe 4 windows is what you will see. These are just different versions of your document at various quality levels. It's like money, the higher the more quality.. I am talking about images now.. like lets say a picture off of your camera is 4mb (thats megabytes ).. thats pretty big. the picture is probly 2000 pixels wide. (pixels is like inches, but smaller and is how we measure things that are digital) like my 13" screen is probly 1500 pixels wide or so. anyway.. I always pick the 2nd box which is the highest quality besides the original. look around and you'll see. Than you can pick JPG or PNG- the biggest difference is that PNG will save the images with transparency if you designed it that way and JPG won't. Thats how you make your logo show up on your site with the background color of the site bedhind it.
Just pick one and save it.. remember to save all slices and pick a file. now save.
DREAMWEAVER is part of equation
You will need DW to create a site this way. it's not necessary, but it will help you take things further.
you could take your salami.HTML (photoshop created one for you with the save for web button) and all the image files (now all your slices are little jpgs or pngs and live in one folder called images) put both of those on your server and rename the HTML file to index.html and your site will work.
DW is a great help for those of us who learn by reverse engineering or trial by error, which is my preferred method. Take a web class to learn about DW and how it can take your PSD (photoshop) file (the sliced one )even further. DW can make adding rollovers and hotspot links (where visitors can click and be directed somewhere else) and all kinds of things.
Tables are good for eating on and learning web design
now your site is like a bunch of block put together to make one giant seamless block. It is slower to build sites like this, but it will solve the problem of getting a site up and running without hiring a guy like me to make one for you. I have found that the great divide is between design and coding. there are great programmers out there, but they can't design worth anything, vice versa... like me.. no coding expert, but I can create a killer mock up. The goal is to bring those two together and I am glad to be joining forces with Nathan shoultz in Upstate NY. So maybe I can focus on doing what I know how to do and leave the other stuff to him. Well I hope you learned something and don't commment aboutb mdydy writting,.. it's 1am and I am zonked.. peace.
