RockMug Website r0x0r
Adobe Creative suite was used to create the RockMug website.
Starting with the PhotoShop files I created for the RockMug website a year ago, which were based on the Apple website style, I dragged vertical guides to align with the navigation tabs on top, and horizontal guides wherever it was logically appropriate.
Using the companion program — ImageReady — I created slices from the guides. I combined some slices. Then I named each slice, and selected either gif or jpg format for images, or no image for text areas. The last thing I did in ImageReady was generate the html and images using File>Export>Optimized>html and images. This makes a table out of the original PhotoShop file, and collects the gifs and jpgs in an "images" folder. (repeated for each web page)
Launching GoLive, I opened the files to add functionality. With the existing website open, I copied the text and pasted it into the new site. I created a RockMug CSS (Cascading Style Sheet) with just a few type styles, which I used to format the text. Then I added links: images & text linking to html pages or to urls (such as directions). I made the borders=0, so there would be no blue line around linked images.
Finally, I uploaded it to my own website for viewing, and emailed this address to the core group. RockMug
Please comment here, so everyone can see. Thanks!
Starting with the PhotoShop files I created for the RockMug website a year ago, which were based on the Apple website style, I dragged vertical guides to align with the navigation tabs on top, and horizontal guides wherever it was logically appropriate.
Using the companion program — ImageReady — I created slices from the guides. I combined some slices. Then I named each slice, and selected either gif or jpg format for images, or no image for text areas. The last thing I did in ImageReady was generate the html and images using File>Export>Optimized>html and images. This makes a table out of the original PhotoShop file, and collects the gifs and jpgs in an "images" folder. (repeated for each web page)
Launching GoLive, I opened the files to add functionality. With the existing website open, I copied the text and pasted it into the new site. I created a RockMug CSS (Cascading Style Sheet) with just a few type styles, which I used to format the text. Then I added links: images & text linking to html pages or to urls (such as directions). I made the borders=0, so there would be no blue line around linked images.
Finally, I uploaded it to my own website for viewing, and emailed this address to the core group. RockMug
Please comment here, so everyone can see. Thanks!
posted by Caren at
8:01 AM
3 Comments:
So far so good, nice overall look, and rather clean and uncluttered. And has a nice "apple" feel. Glad you had the time to pull this together.
I am assuming that the net.firms stuff across the top won't be there when posted on the RockMUG Domain?
One thought. Have you considered "floating" the pages horizontally, so that the pages will sit in the center of the users browser window, regardless of the width?
Nice Job.
Kurt
By
Caren, at 6:24 PM
Caren wrote back: "I like the floating idea very much. Do you know the code for that offhand, or maybe I'll look it up."
It's pretty easy, may take a bit of a tweak, but adds a sophisticated look.
You make a table that fills the window, with a W & H of 100%
Then you drop a table containing the page content into the single cell of the Big table.
Set it's alignment to "Center", and regardless the with of the users window, the content will be centered.
Further refinements, you can set the width of the content table to a set pixel width to preserve layout
Or, you can set it's width to a percentage, to give porportional margins.
An example, this site that I built: http://www.robkron.com/
Have fun!
Kurt
By
Caren, at 6:26 PM
This new design looks great to me. I particularly like the raised logo in blue. It's eye catching. I also like the ability to click on other areas available at the top and the bottom. Lastly, the calendar for the year with the apple on meeting dates couldn't be clearer.
Thanks for all your effort.
Al
By
Caren, at 6:26 PM
Post a Comment
<< Home