Learning How to Design for the Web Using Dreamweaver CS4:
For the past few weeks I have been using Dreamweaver (a program that is part of the Adobe suite) to edit and post a web page. Today I experienced that I never fully learned how to use the program, but was merely instructed and shown the way. It is kind of like learning how to drive somewhere when you are in the passenger's seat. Mostly I was just watching how to do things and mindlessly following directions, and it wasn't until a major conflict occurred that I had to stop and actually try and figure out how to get to the final product.
What happened was, somehow, while I was editing and trying to get my links in the footer to line up and not look like they were sloppily thrown across the page I lost the visual of the file. I previewed my work in Firefox, and nothing... I uploaded it, nothing still... I had no idea what to do. I heard that organizing things when you aren't used to a template can be tricky in Dreamweaver, but I had no idea who I lost everything. (I was using a 2 column fluid design with a header and footer, by the way). I called someone over to help, but when he came over he ended up deleting the window I opened for the source code to the version that was working, therefore loosing all the data before the incident. I had to play around with the code for hours trying to figure out what went wrong. I even called an old friend who I thought would know something about coding for a website, but she didn't and we kind of just fidgeted around together through the phone.
Right now I am drinking wine (The Little Penguin's Pinot Noir if you must know) and researching ways to go about fixing this in the morning...
Here are some useful sites/tutorials I have found if you are at all interested in learning some (more/basics) web design:
https://www.youtube.com/watch?v=suMK2pcyqoc
http://css-tricks.com/
http://htmldog.com/
(I probably know of more links if you are at all interested.)
I am going to finish this post in the morning, but here is what I finally got to show up before the computer lab closed:
You may notice that there is no CSS (cascading style sheet(s)) attached and what is displayed only simple HTML... which I thought I fixed before I left, but apparently I didn't. I have no idea how I managed to do that... but I will finish this post after some sleep and I will let you know what happens.
....
NEXT MORNING AND INTO THE AFTERNOON.....
THIS IS WHAT HAPPENED...
for those of you who know, or who are going to start doing some reasearch to find out, in CSS there is a setting called "display" display can be very useful in some cases (like hiding text that the search engines need to see), but when you have "display: none" listed for the entire document.... nothing will show up. That was my problem. I don't know how or when I did it, but one little line in the beginning of my CSS set to "none" made the entire page invisible. The code was still there, but it was essentially useless with that piece turned on.
So that was my major confusing mistake in Dreamweaver that took me hours and at least three or four other minds to help figure it out. I truly love working around other people particularly for that reason. Anyway, here is the design I ended up finishing:

I worked on it using a Mac, but right now the view is from a PC (a rather old one). Every time I look at it in Firefox or Chrome the white box around the Facebook like button isn't visible, but on the PC those browsers weren't downloaded so here is the less impressive version of my first completed web page. I also believe the reason I couldn't really get rid of the white box is because I would have had to alter someone else's code, and who knows what I would end up with doing that to Facebook's like button. About half of the links' code were created by the social networking sites, and the other half I coded myself using badges that the site offers on their website and attaching a link to the image. It is really simple to do, and maybe I will make a tutorial for that in the near future.
This experience goes the show the importance of proofreading, (and now watch there are going to be a bunch of sloppy typos in this entry that someone will later point out to me just because I said that..) and how much one learns from mistakes.
Happy Wednesday!
-Sam