I have however, found an easy-to-implement Javascript slideshow which uses jquery which I have used to get the slideshow working.

I’ve found with many tutorials and forums covering Javascript that they are very difficult to understand because as a complete beginner, I’m unsure of how Javascript fits into my existing code.

This link provides all the files required to get a slideshow working, as well as explaining where to input values such as dimensions and captions etc into the code (Dynamic Drive, 2009). In the end it was brain-draining but I’ve managed to get it working and validated. Once my page is up and working, the example will be available here. I’m not sure if I’ll have it up there before Tuesday though.

It was pretty uncertain there for a while, I didn’t realise but many lightboxes are actually built with Javascript and not CSS/HTML.

It seems a little late in the picture to encorporate a whole new language into the page, not to mention that aside from the exercise in week eight I haven’t got any experience in JS whatsoever. There was a lengthy period of panic until I found a post providing code for a lightbox using only CSS.

I’ve found that forums are a great resource for this project. This forum from iVirtua (2007, no author) provided excellent (ie easy to follow for a beginner) instructions for making a lightbox using CSS.

I ‘borrowed’ this code and put it into my HTML and CSS files. I tweaked the size of the frame to fit my images (which are all either of 400w x 500h or 600w x 450h so I created one rule for each dimension in my CSS file and used one or the other). and adjusted the padding accordingly.

The top and left selectors were used to position the lightbox close to the middle of the page. I left the padding, which suited my image, and the z-index and overflow properties were left as per the original code.

I then placed the code for the thumbnail images in between the code provided. For example:

<a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”><img src=”../images/clockchair_thumb.jpg” width=”80″ height=”100″ title=”3 o’clock… 9 o’clock chair: polished aluminium frame with black cotton cord” alt=”Image of 3 o’clock… 9 o’clock chair in black cotton cord” /></a>

It all worked fine and seemed to be solved until I ran the code through the W3C validator and come across several issues.

-moz-opacity: 0.8;
filter: alpha(opacity=80);

These two rules failed validation. I commented out the second one, as it is only for IE, and our projects will be marked using Firefox. I found this site explaining what each of the rules are for. khtml seems to be outdated as I’ve never seen or heard reference to this before. My Mac, which is about a year old is using Safari 3.2.3 so I’m guessing that Safari 1.0 was more than just a couple of years ago.

The -moz-opacity rule is for earlier mozilla browsers (opacity: .80; is for CSS3 browsers and validates using CSS3). After searching high and low, there doesn’t seem to be a solution to this that validates in the W3C validator. The best I could find was this post which uses Javascript instead. I’ve decided to gamble on the assumption that our projects will be marked on later versions of Firefox, which seems the most likely. The alternative at this point would be to figure out how to use Javascript for it instead, and I would prefer to use the time to get the slideshow working instead.

The other thing which failed to validate was that I had this piece of code <div id=”fade” class=”black_overlay></div> in after each thumbnail which utilised a lightbox. I think this fades out the black opacity once the user closes the lightbox. This is when I realised a <div> tag is only for an individual element within one page, and not to be used twice. With some experimenting, it seems I only need this section on my page once, and I’ve put it at the end which seems logical.

Thankfully these steps have fixed all the validation problems with the code.

Later on I noticed that there is a link to a lightbox example provided in the week eight notes. This looked much easier to follow than what I’ve just completed. Hopefully I can find something similar for the slideshow, because I’m pretty sure through my research for this exercise, that I’m going to need Javascript for that…

I thought that because I had used one of the smallest screen sizes available (13inches) and that most people would be viewing this through a desktop or laptop, that I could get away with having a hidden overflow and no one would notice. However, I realised that with the increase in smartphones and mini-pcs it really isn’t acceptable to do this. Particularly if the viewer resizes the window into a smaller viewport, it would be extremely frustrating being unable to scroll across to see the rest of the page.

In any case, on most screens 13inches and above, none of the pages will need to be scrolled…

With regard to things left on my list to complete:

a) gallery and lightboxes

b) incorporating more functionality into the front page

I will have to make a choice between them. I’ve only got four days remaining to complete this project and I also have several other assignments due in the next two weeks, so I’ve decided that it is simply impossible to do both.

Seeing as I haven’t any ideas regarding the front page, I will focus my efforts on getting the gallery and lightboxes working.

The following issues are yet to be resolved.
a) image gallery and lightboxes
b) how to manage the extra content on the interior design page
c) whether to leave the front page empty as preferred by Edward, or how to incorporate more functionality to the front page.

Because the Interior Design page content is a magazine article, I’d like to move the content into columns to see if that allows more content to fit in the page. I was a little bewildered as to how to make this happen, until I realised the text is already in a bounding box, and I can use this box to create two divisions, one of which can then be floated beside the other.

This worked quite well. I’ve set two boxes, right and left of 360px each. I’ve decreased the font-size by 1px as well. Although I still wasn’t able to fit the entire article in, I managed to cull enough that what was left fit into the two columns.

I have a week before the assignment is due to sort out how to create either an image slideshow or light boxes to view the full size images of Edward’s projects.

Here are some pages of the nearly finished website.

I did a search on menus and navigation and it took some time, but I finally found a workable solution on http://www.alistapart.com/articles/horizdropdowns/

It was a surprisingly easy process; where the on-hover menu is nested inside a list item (the link that is being hovered over).

The HTML code looks like this:

<div id=”menu”>
<ul>
<li>profile
<ul>
<li><a href=”awards.html”>awards</a></li>
<li><a href=”exhibitions.html”>exhibitions</a></li>
<li><a href=”publications.html”>publications</a></li>
</ul>
</li>
<li>projects
<ul>
<li><a href=”projects/slideshow.html”>project slideshow</a></li>
<li>furniture…</li>
<li><a href=”projects/2009.html”>…2009</a></li>
<li><a href=”projects/2008.html”>…2008</a></li>
<li><a href=”projects/2007.html”>…2007</a></li>
<li><a href=”projects/interiors.html”>interior design</a></li>
</ul>
</li>
<li><a href=”contact.html”>contact</a></li>
</ul>
</div>

Using CSS, the unordered list which is nested inside a list item is positioned absolutely, and has no display until the list item is hovered over.

The following CSS code was taken from the above site with some minor modifications.

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
background: #fff;
padding: 1px 10px 5px 0px;
border: none;
}
li:hover ul {
display: block;
}

a:link
a:visited
a:hover

Using these, I’ve styled the menu links and the logo to turn orange on hover.

I’ve also specified no borders on images, because I strongly dislike the blue border that automatically appears around images that are linked.

For an added style effect, I wanted a small orange arrow to point to the selected (by hovering) link. I found a solution to this on an online forum http://www.webmasterworld.com/forum83/4224.htm

Reading some suggestions, I decided to use the background image function to place a small orange triangle that points to the link that is being hovered over. I made two triangles, one pointing left and one pointing right in illustrator. At first I could not make it work unless it was repeating, which created rows of triangles across the entire text and space of the link. It wasn’t until I realised I had saved the triangles much too large (10px x 10px) that I was able to fix the problem. Once I’d made them smaller, all I needed to do was specify the position I wanted.

The code looks like this.

a:hover {
background-image: url(‘images/leftarrow.gif’);
background-repeat: no-repeat;
background-position: right;

Because I only want it applied to the menu navigation and not the index pages or other links, I also specified for it only to apply to list items.

So the code now looks like this.

a:hover {
background-image: url(‘images/leftarrow.gif’);
background-repeat: no-repeat;
background-position: right;

I’ve made a right arrow for the dropdown links as well, once I’ve worked out how to make this happen.

In the meantime, I’ve also styled the emphasis marks to orange, to create extra effects for the long blocks of text. I was very impressed at how easy it was to do this, once I had a better idea of how CSS works.

Although I didn’t use many examples straight from it, The CSS Anthology (2009, Andrew) gave me a comprehensive idea of how to style elements and which styles can be applied to different types of elements. It isn’t a reference book, because it explains examples much better than other reference books I have seen, but there is a very detailed contents list that covers many things achievable with CSS.

Andrew, R. 2009 The CSS Anthology: 101 Essential tips tricks and hacks. Sitepoint Canada.

I created a ‘leftside’ division to hold the menu and the bottom-left corner image. This was done so that I could specify the width of the left column, and so no elements would be larger than this, it’s surrounding box.

The other elements will be floated to the right of the ‘leftside’ column. I’ve placed the <h1> text into a header division of its own, so that I could specify the margins and padding around the heading to suit the text that follows on each specific page. This was one way I was able to make the text fit to screen without the need to use a scroll bar.

The text also sits within its own division, so that the amount of padding to the left can be adjusted to provide enough space for the hover menu.

The heading and text box are aligned with each other. Edward didn’t like an indented subheading, so all right-column elements are aligned. For the interior design page, there is much more text than can be fitted to one page, and I am not sure exactly how I will deal with this as yet.

Using CSS, DHTML & Ajax … I found a rule which can be used to prevent content ‘overflowing’ past the boundaries of the page.

overflow: hidden;

Hides any content that extends below the bottom of the page. This is particularly helpful in seeing where excess content needs to be culled.

My font selection is arial because it is a smaller and closer spaced font than verdana or helvetica. It fits the style of the page better, and although it is small, web users can easily increase the size of the webpage to suit their preferences.

I’ve used Bell MT for the logo – which is now entirely textual. It is a simple serif-font, but the serifs are very small and I think it contrasts well with arial, while still being consistent with the style of the font.

Because of the simpleness of the page, I also wanted a decorative font that wouldn’t be too intrusive or hard to read. I found the font ‘Kicking Limos’, which is a free Larabie font www.larabiefonts.com/

It took me a while to get the @font-face specification working. By doing a google search for Bell MT, I found a site which provided an exact download location (url) which could be used in a CSS document.

The code now looks like this:
@font-face {
font-family: Bell MT; src: url(‘http://www.free-fonts-ttf.org/true-type-fonts/bell-mt-734-download.htm’);

For the Kicking Limos font, I had to download and unzip the font and save it to my website files in order for it to work. I was faced with many problems here; the first being that I use a mac at home and many font files were made for windows applications. Using Font Book, I was able to download and install the font to my computer. It appeared to work very well, until I tried it on the computers at uni and realised that the site was taking the font from font book and my code was not working. The original file I had downloaded had been a .sit file, however as Chris pointed out, the @font-face style requires a .otf or .ttf file.

In the end I had to trawl through google for a correct file-type. It was easy enough to install after this, but realising what the reason for why it wasn’t working was extremely frustrating.

Colour
Edward changed his mind about the colour scheme of the page, and requested a gray and orange scheme instead. The main colours I am using now are #596f89 which is a dark gray, #41546f which is a darker gray, #ca6a39 which is a brown-orange, and #d1dfe8 which is a very light blue/white colour.

I used adobe’s kuler website http://kuler.adobe.com/ to arrive at these colours, as I found it very hard to find colours that would match well. I also have … which was helpful, but the hexidecimal colour codes provided appeared differently on-screen compared to on print. Using the Kuler website, all the colours were on-screen and I didn’t need to worry about how the colours translate from print to screen.

Because he doesn’t have the time to work on a more detailed profile description, we have decided to use these lists as separate pages within the Profile heading, taking away the need to write the copy for these pages. They will ideally be dropdown links similar to the projects pages.

The only images on the website will be in the projects area. On each project page, there will be 2-3 thumbnails on the right of the image showing an example of the work. Hopefully they will link to a larger picture with a lightbox effect or something similar.

I have used photoshop to reduce the size of these images to 80px x 100px.
The larger images have been saved in different sizes depending on whether they are portrait or landscape images, but the thumbnails have all been saved as portrait-oriented, for consistency across the pages.

All the content of the website is now complete. Each project page with the exception of the Interior design page is separated into:
<img src=”.gif heading”> – Diamond Table
<p>description of materials used to create the project and the dimensions of the project</p>
<img src=”.gif heading”> – Design Inspiration
<p>Text about the inspiration behind the project</p>
<img src=”.gif heading”> – Description
<p>Description of the project.</p>

The Interior Design page will feature excerpts from an article written for In Perspective about Edward’s work in the Akira concept stores.

For stylistic purposes, every page will be designed to fit within the surrounding box without the use of scroll bars.

Because it is a very simple page, I would really like to experiment more with adding design effects such as rollovers and animation. However I’m beginning to think that there will not be any time for me to complete this.

For the Profile pages, I am marking up the content into tables as I think it will be the only way to fit the entire list into one page. I will use colour and font to keep consistency across the pages.

The book is written to follow from cover to cover, rather than as a reference book, and takes a beginner through everything they need to know about HTML to create a working website.

My basic web-page structure should look something like this:
<html>
<head>
<title>Interior and Furniture Design</title>
</head>
<body>
<h1>Edward Wong Design</h1>
<p>body text</p>
<div id=”navigation menu”>
</div>
</body>
</html>

Already having a visual idea of what the site will look like greatly helps in deciding how to mark the page up. Using the idea of the box model, I’ve boxed every element of my page in what I think will be the HTML element.

note: I have no idea why this image will not display in landscape as it was saved. I’ve had a lot of issues trying to use wordpress over the weeks, I’m not sure if its because I use a Mac but I’ve spent hours trying to make the images rotate, but as the original file is landscape and wordpress has no options to rotate images, I am at a loss as to how to get this image around the other way. Or why it has moved itself sideways in the first instance.

As the site I am creating is quite simple, and will most likely only have two ‘columns’ a) the menu and image side and b) the headings and text side, I think that using floats will be the best way to layout the page.

I noticed from one of the exercises in class that floated elements move around when the window size is adjusted. Julian suggested a bounding box around all the elements, so that floated elements won’t move when the window size is adjusted. I’ve named this ‘surrounding box’

Because I wanted to make the textual elements of the logo and subheadings more attractive, I’ve created .gif files in illustrator using different colour and font effects. So I won’t be using the <h1> or <h2> elements used in the diagrams above.

For the navigation, I want the elements on the right side of the middle line to have a drop-down effect when the mouse is hovering over the project link. Since creating the page mock-ups, we have also added a new link, “interior design” to the projects pages, and taken out the “Menu” above the profile link as we decided that it was redundant.

I will be using the <ul> element to markup the navigation menu, as they are list of links. I’m not sure how to create the hover effect as yet, but I think the basic structure will look something like this.

<ul>
<li>Profile</li>
<li>Projects</li>
<li>2009</li>
<li>2008</li>
<li>2007</li>
<li>Interior Design</li>
<li>Contact</li>
</ul>

Edward wanted the projects listed by year rather than by name, to show the progression of his latest work. The interior design feature was completed in 2001, however it is a separate category on its own so we haven’t listed the year.

Stylistically, I need to figure out how to distinguish the year links from the interior design link.

From the HTML lecture, I need to specify a doctype and meta tag. I found these through the www.w3schools.com website.

I’ve decided to use transitional xhtml, as I’ve found more resources to support this format than html 5.0. Being new to all of this, I think format will make it much easier for me to be consistent. I am also using transitional xhtml because it will be more forgiving of errors. Having said this, I would ideally like for my code to be valid for strict xhtml and will experiment with validating it for strict xhtml at the end of the project.

http://www.w3schools.com/Xhtml/xhtml_dtd.asp

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

http://www.w3schools.com/tags/tag_meta.asp

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />