Nightlyre's Realm: Artwork: Art Galleries:

Other Nightlyre's Realm Designs

Main | Art Galleries | Multimedia | Crafts

Nightlyre's Realm Screenshot Nightlyre's Realm Screenshot

Nightlyre's Realm (Website Design)

The images above are two screenshots from the most recent design of Nightlyre's Realm. I did quite like the design, but it was time for a change. This previous design was coded in Dreamweaver, and was originally pure HTML with some Javascript rollovers. As time progressed, I learned a bit about CSS, and incorporated that into the design. Later, I learned how to work with server side includes, which I used for the navigation and a few other things, such as copyright notices.

The first screenshot above was the homepage, the second was the main Artwork page, which used a large image, cut up in Photoshop and put back together using tables. Each link was a Javascript rollover, and would light up when the mouse was hovered over it. The main page was made to fit within a browser at a screen resolution of 640 by 480, and was centered. The rest of the side navigation (like that at the top of the Artwork page) scaled in width to cover the whole screen. I have always been happier with the look of scalable designs than fixed-width ones, though they tend to be more difficult and unpredictable to code properly. (At one point, I had to recode the entire top navigation for my site because a friend let me know that it didn't work at all in Firefox.)

Now that I know more about HTML itself (I now use HomeSite, which is a pure code editor), SSI, and learned a good deal more about CSS and Javascript, I decided it was time to design my site from the ground up.

Nightlyre's Halloween Page Screenshot

The Halloween page was part of the same design, but I wanted a different look for that section. I removed the background image, and changed the site-wide navigation to monochrome. The gargoyle (and for the main page, the animated lantern) were added, with only slight hints of color to break up the grayscale look of the page. The main page also included a Javascript countdown to Halloween, which was a free script available from a Javascript resource site. I never got around to rewriting it, but it did irk me a bit as I would have to go in and change the date each year after Halloween for the countdown to start over.

Nightlyre's Realm Screenshot Nightlyre's Realm Screenshot

The two designs in the screenshots above were possibilites for how the redesign would end up looking. The first screenshot was for a site-wide navigation, with vines curling around the top of the page. It would work at a minimum screen resolution of 800 by 600, but would scale up to larger resolutions easily. I kept the same background which has been on my site for ages.

The second screenshot would've been for a redesign of the main page only. It scaled not only horizontally but vertically, and was a precursor to how I ended up redesigning my site. I let the idea for this one go though, as it was still based around tables, didn't work entirely as I would've liked at a screen resolution smaller than 1024 by 768, and could easily be too dark depending on how viewers' monitors were set up. Even though the graphics were optimized as best as I could make them, it still would've been a heavy page to load for those visitors still on dial-up. I also wanted to branch off from the violet look my site has had for ages. I was still quite pleased with the design, though!

One feature I played with on the second design was Javascript mouseovers and mouseouts. First, I coded the rollovers so that they not only affected the navigation words, but the pawprints that corresponded with them as well. For some, it was all one image, for others, the pawprint was not directly beside the word, and had to be a separate image. Secondly, instead of rolling over one image and having it immediately brighten, I used mouseover to call an animated .gif which faded brighter, and then mouseout to call an animated .gif which faded back to the dark color and stayed there. The effect was very cool, more reminiscent of Flash than of an HTML/Javascript combination. Of course, that was also one of the biggest contributors to the file size of all of the images used on the page...