Interaction Design

Taking this site from illustrator and photoshop into Dreamweaver which transferred it to the web was a learning and growing experience.

This was my third website, and it is true the perfect practice makes perfect. However, I’m still trying to practice perfectly. It made it easier to add my navigations through inserts which would update every page simultaneously when I changed something on it. However to do this I had to use php for the first time. That was tricky, but with a good tutor, possible.
Something else that was important and took time was measuring divs and making sure the images I put on would fit how they should.
Overall I learned a lot more about how divs work and how to use css to get the results I wanted. Something I still want to understand is absolute and relative positioning.

Visit my website for the 2009 State of California Public Schools | 5th Grade Science Curriculum | focusing on the water cycle.

http://paradigmredesign.com/

I believe I’ve accomplished each of the steps required for this basic site. The process was difficult at first but once I completed one step, the others were easily doable.

The first thing I looked at was to save my images for web using the appropriate file format. The format was either done with PMG or JPG. For each image I made sure they were the proper size so that they fit in their particular place on the site.

I accomplished the process of markup of my content as HTML. Making sure the content was placed into dreamweaver with the proper fonts and styles as my Photoshop mock up was done took a few more steps then I realized. But it became easy when the CSS styles were implemented to my HTML pages. That leads to the next step to define presentation styles with CSS. This was done with multiple style sheets including my basic CSS style sheet, and the style sheets retrieved offline that would zero out any defaults that different browsers would have.

Another step that made it the way my site should be was to check it in different browsers. They all seem to work pretty well with my site, but the newest version of Firefox is where I based most of my design. I found that there were subtle changes in placement on other browsers such as Safari.

I then made my site live which was difficult. It included several trial and error attempts to get what I needed done. Here is a screen shot of my life site including the toolbar.

Screenshot of my live site - all the buttoms work!!

This seemed to be the most satisfying step in the process. Once I had my style sheet designed, it was only a matter of making a few minor changes between pages to see finally see my webpage come alive.

At first, the fact that I had only one style sheet to build all of my pages from was a slight challenge, but once I wrapped my head around the concept, it was no problem. Another challenge I had was actually getting my website onto my server. There is quite a bit of terminology and other seemingly foreign things that become very confusing when trying to make a site live for the first time. Luckily with a good walk through you can learn the process pretty quickly. You just hope that you will not have to troubleshoot.

As for how my website turned out, I would have done many things very differently. The problem was that I did not know what the possibilities were before I started planning. However, for my first website attempt I am very pleased. I feel like I learned much more than I thought I would, and I would say that that is a success.

I finally got my site live. I still need to flow in the actual content, but at least the navigation is up and running. It’s sad looking at this and seeing how small it is, yet it took SO long to make.

Genetics site

Click here to view my site live.

Well, I know it’s not much. I don’t really love the way the icons turned out. I think they’re a little big, but they work at least.

I have a question, and it’s probably an easy fix, but if you look at my site, I don’t have a horizontal scroll bar, so you technically can’t scroll right. But because I do have a div tag that extends out to the right, if you have a lap top or a mouse with a scroll pad, you can still scroll out to the right, even though there is no scroll bar in the browser. Anyone know how to eliminate this? I’ve tried using a max/min width but it didn’t work, and right now I have my body tag set to width: 100%; overflow-x: hidden; overflow-y: scroll; to hide the scroll bar.