CSS

Practice

screen shot of TextWrangler and the Hotglue code input.
Screen shot of TextWrangler and the Hotglue code input.

CSS

Loading my images from a file I've set up on buzzo.com makes everything load a lot smoother. As we noticed during studio time that when a lot of us were using Hotglue it loaded very slowly, so outsourcing my images seemed like a pretty good idea. The first step is to open all images in Photoshop and scale them to the right size and export for web usage. This way all my images would be the right size and not take up extra unnecessary space.

I have one master css file that is also stored on buzzo.com, this is called to each page of code on Hotglue.

The video makes much more sense than my description so please watch that!

If not, heres my best description:

The video to the left is a screen recording of the way that I have been editing the site. I have each page of the site saved as a separate HTML file, which are then grouped under their respective 'parent' pages. for example this page is called Practice_CSS.html because it's parent is the Practice page. All images that I wish are edited in photoshop and exported for web devices at the right scale. The images are then uploaded to emily.buzzo.com/hg-images/css_images/ using Fetch, a file transfer client.

The next step is adding the the new image address into the HTML file. I then go to the website and select the page I need to edit and in the address bar at the top of the page I add /code onto the end of the address and I am shown the code input section for Hotglue. I then copy and paste the new HTML code that I've written in TextWrangler into the head section and save. The images are now in place.

The video makes much more sense than my description so please watch that instead!