Thursday, May 28, 2009

Process Diary Time...

Things I have learned...

Building the website:
Don't use tables! I found this out the hard way, consulting advice from various websites and my "Principles of Web Design" book on how to build a website using tables. Looking at my wireframe layout it seemed like using a table to structure the main content and divisions of the page would be best, but this turned out to be very wrong and extremely limiting. I found out that tables in Dreamweaver do not react the same way that they might in InDesign, and I ran into countless problems with alignment issues, spacing, and basically building my page structure. After working through these problems and finding out some tricks to get around this - I came to the realization that I had done everything wrong. At this point restructuring my page using the correct div's turned out to be too challenging, so I continued with using the tables. Never again.

Re-working Javascript:
Although loads of HTML code and javascript code are available on the web, it isn't as easy as cut and paste if you want to customize it. For my website I used a large vertical navigation and wanted to implement drop downs. I found out that using a Javascript accordian menu would help me to acheive this. Finding the right script and editing it to my specifications was very difficult. First I had to figure out how to create :hovers for each menu item, which meant seperate CSS styles for each. Also going back to issues with the tables, I found out that you must leave ample room to include the drop downs in the layout, because even though they are hidden one the script is run, the rest of the page has to account for this exrta information. I believe this was the greatest problem for me related to tables and javascript, and why the menu took so long to figure out. Firstly since it was a vertical drop down and I had information planned for directly beneath the menu, I had to make sure that this information wouldn't 'shift' each time the accordian menu was expanded. To do this I had to place the nav in one row and all the other info in another, and to get the info below the nav to align where I wanted it, I had to create a negative margin. This was the only way I could figure out how to place the info how I wanted it, although I'm sure there is a better way to do it.

No comments:

Post a Comment