Web Authoring - Level 3 - July 2009

Final Review

Fiona — Sun, 16 Aug 2009 23:40:29 +0000

Final Review

My project was to design a website for a local art shop, with a part of the site dedicated to a gallery of the customers work. The company already had colour schemes and images which I was to take and base a site on.

I created a div based site, using css controlled divs to create the layout. I chose this method rather than using the suggested table based layout as I feel it has the greater flexibility and adaptability. This means that if the owners all of a sudden decided they did not like the fact the site uses a fixed width layout this can be easily made liquid in the css.

I tried to put all unnecessary aesthetic imagery in the css to increase the accessibility of the site. I also used alt tags to help make the site accessible. The only real part of the site that is not accessilible is the gallery part of the site, which is a flash based section, which is not easy to make accessible.

Overall I am pleased with my site it has a simple clean layout and conveys the companies brand successfully. I do not think that I would have done anything much different for the site.

Creative Process

Fiona — Mon, 10 Aug 2009 10:42:03 +0000

Creative Process

Inital Layout

I decided to create my page using div tags and CSS rather than tables. I chose this method as I feel I have greater control of my site.

Another reason for choosing div tags is that the site can be dramatically altered without damaging the source code, meaning that the changes are very easily fixable.

I also decided to start by creating a new template rather than creating a page and then converting it to a template at a later stage. This saves time as I don’t have to mess about fixing the code if the client wants a change.

I work in split view in Dreamweaver and use a combination of codeing and wysiwyg edititng. I started off by coding the inital layout divs and assigning them id’s so that I can apply CSS rules to them.

After setting up the inital layout divs I started formatting the divs using CSS. The #container div is just to centre the site on the page and to constrain the width of the site.

#container{ width:960px; margin:auto; margin-top:0; }

This code sets the width of the page to 960px, this is a suitible width for 1024 screen widths, which I chose as I wanted a fixed width size. The margin is set to auto to centre the pages, auto margins put an equal margin to both the right and left of the div, centring the page whatever the screen size and by setting the top magin to 0 it removes any white space from the top of the page.

After setting up the main container, I then looked at the #content div and the divs nested in it. To get the two column layout I want the easiest way to stop the two columns either going one on top of the other, or both going in the same space is to fix the widths and then float the columns to either side of a container div, in this case the #content div.

#navigation{ float:left; width:150px; }

#main{ float:right; width:780px; }

#footer{ clear:both; }

The #footer div is cleared to remove any float, this stops any other elements on the page floating. The total of the widths of the two floated elements don’t add up to 960px which is to leave allowance for any padding and margins that are applied to the elements.

Aesthetics

After setting up the layout of the site I started to add a colour scheme to the site, the client has a colour scheme which is based round a shade of turquoise blue.

I decided that the header, navigation bar and footer should all have the turquoise background colour, I chose the nearest websafe colour and added the line:

background-color:#00CCFF;

to the css of those 3 elements.

After applying this I noticed that the main part of the page was blending in with the page background due to the fact they are both white. I decided to break this up by adding a border to the right of the main element, by adding the following line to the main elements css.

border-right:#00CCFF solid 10px;

After getting the look of the page right I previewed it in a browser.

After looking at it I realised there was a large amount of white space on screens larger than the optimal size. I decided to counter this by putting a background image in. I decided on a tiled pattern which would repeat. I created an image of some pencils. I orignially created it with rainbow coloured pencils which looked out of place with the rest of the colour scheme, so I changed them to the colours that I planned to use in the site. This new image broke up the amount of white space without looking too in-your-face. I also realised at this point that I needed to set a background colour to the main section as it was currently transparant, and the background image was seen through this. To add the background image to the site I added the following code to the css

body{ background:url(images/background.jpg) repeat; }

After getting the look of the layout sorted I started on adding content and sorting out the look of that. The client uses the arial font for their materials and wanted to continue this onto their site. To make sure all the fonts were the same on every piece of text on the site, rather than adding the fonts to the individual elements I added it to the body tag css. I also removed the page margin at this point as I wanted the central column to fill the page as much as posisible and remove the small gap at the top of the page.

font-family:Arial, Helvetica, sans-serif; margin:0;

I started by adding the header text to the header div, I put the text in

tags as I was using a text header rather than an image header. The default colour for the text was black and I decided that the black didn’t look very good against the turquoise so i set the font colour to white in any section with a turquoise background by adding

`colour:#FFFFFF;`

to the css of those sections.

I wanted to add the shop logo to the header, I decided to add this via the css as it is only an aesthetic image, rather than one that convays information I added it to the css by

Interactivity

I decided to add interactivity into the site in a few ways.

Navigation - I added rollovers to the navigation, to make it clearer to the users which link they were going to.

Home Page – I added an interactive rollover image to the home page, to add a bit of intrest to the home page.

Gallery - The gallery is a piece of flash that by parsing xml it gets the name of the image and creates a list of buttons, which when clicked shows the image and further details of the picture. By keeping the details in the external xml file it means the user can add new images or change the images without haveing any experience of flash or needing any specialist software.

Accessibility

I added accessibility to the site in several ways

Headers - I correctly cascaded the header tags, and I used the

tag for the main header on each page. I chose to do a text header for the site as it aids those with screen readers and due to the clients requirements it was not necessary to have an image as the header.

Images - I have tried to add alt text for all images where possible, for places where the images are just for page aestheitcs I added them in the CSS so screen readers won’t pick up on the images. If there were alternates to using images by coding via css I took that option.

Flash Gallery – The flash gallery is not really accessible to screen readers due to the way flash handles accessibility. If I had more time I could have created a more accessible version of the gallery using php. I didn’t want to create a plain html gallery as there would have to be a html page for each image rather than just having one page accessing the different images.

Colours – The colours I chose were based around the colour scheme of the company so I had little give there, but I made sure that any colours I chose to go with it would not clash with the colours already there.

Final Reflection

jmcomerford29 — Sat, 08 Aug 2009 14:42:14 +0000

Final reflection.

I think the finished product worked resonable well in that it gave a clear and uncluttered screen to make use easy and unconfusing. The company name stood out, this implied it’s business and location, the images of carpet, laminate and vinyl floor coverings, along with the trade sales, showed the company’s versitilty and with the navigation what other offerings there were with one glance.

The images gave direct and speedy access to their related pages and the main navigation buttons gave a clear and simple direction to other pages on the site, this all helped the site to be more user-friendly.

I think the home page matched the brief in that it reflected the company colours of blue and gold. It showed the company’s core products-carpets -vinyls -laminates along with it’s willingness to sell to the trade and it gave a brief insight into the company with some text. This went into more depth with it’s other pages. The about us page gave details of what the company did and were about. The products page showed the types of floor coverings it dealt in along with thier related products, these led to further pages to list the company’s stock. The links provide for E-mail connection and connection to a futher data-base if uses wanted a perticular product. The contact page gave postal and telephone contacts along with the E-mail address. As the company wanted to show it’s inclination to accomidate trade sales, the trade page showed their offers.

Although the text showed uniformity and continuity with each page, I think I could have inserted a CSS rule to certain paragraphs to change the font size and/or colour, for example, where a price reduction was offered this could be made to stand out. Also, more text could have been used in the pages to give a better and more expansive view of the company.

While the logo broke up and added to the heading banner, I would have liked to have tailored it to give a unique and individual look which is what I intended with the origional proposal. The banner itself could have been made more attractive by adding some curves or toning the colours to give more appeal.

All in all, I think the site just met it’s aim with the brief in that it got across what the company was about and for the users it was quiet clear and easy to use. It stuck to the proposal in all but the logo. The over-all colours could have been tweeked to show more uniformity but only slightly.

Creative process

jmcomerford29 — Sat, 08 Aug 2009 12:20:17 +0000

Creative process.

I started by creating a home page in Dreamweaver by going to new site and installed a table to accomidate the heading banner, navigation bars, a text area and an area for images, this would form the style of all succesive pages. As the brief was to have the company colours of blue and gold to be represented, I chose blue for the background throughout the page and gold for the text in the headings. The width and height was set to fit screen sizes.

The head banner was split to give a small area for the logo and remainder for the company name. A rule was created in CSS to customise the style of the heading.

To give the main navigation bar interactivity with users it was formed in Photo-shop and Photo-shop image-ready. This was done by creating two sets of buttons and then in image-ready so they would roll-over. The colour yellow was chosen for buttons, this contrasted well with the background blue and matched with the gold text, different shades were used in a gradient and a chiselled edge and shadow were added to give them depth. The foot navigation just had a colour change with a link to their related files.

The main body of the page was divided for a text area and image area, so that I could customise the text and image areas I created a CSS styles file, the sseperate table cells were then highlighted and given a IDs so as to have CSS rules attached. I inserted a table into the image area to hold four seperate images three for the company’s core products and one to show it’s sales to the trade. Images were retrieved from the internet to represent carpets, laminate and vinyl flooring, they were then sized in Photo-shop, the forth image would be used as a backgroud. To give the four images a border a CSS rule was created by highlighting each cell and giving it a ID name, inter-activity was achieved by creating a new CSS rule so the border colour would change with a hover, they would link to their related files. All these images are given alternative text. In the text area a CSS rule was createdto custermise the page heading and another for the text itself. The text of the foot navigation was change in Dreamweaver.

Once all the design and links were in place for the home page I could set up a template from it to produce the rest of my pages. Editable regions were asigned to the page title, the text body and the image area. All that was then left to do was to alter the page title, text and the images where required.

Final Reflection

benparker42 — Thu, 06 Aug 2009 13:05:00 +0000

Evaluation

I found that the site fitted almost exactly with the initial brief. I liaised fairly well and understood the needs of the clients. The pages were changed at one stage as the client decided to choose not to use the 2012 Focus page but to instead incorporate a Reiki healing site. From the feedback of the clients they seemed really happy. They are happy that they were able to get a personal web URL foe the site. They were also happy with the interactivity on the banner.

I found the experience of setting up the site a very fulfilling one. I came across a few minor problems. It was difficult to get the text to wrap around the images. This was overcome by not using tables but aligning the images and putting them in there own places. The site had a standard flow to it. It was consistent in its CSS and it was a successful job. It fully fit the purpose and the consistency of the clients needs

Go to www.unnicilli.com to see the final product.

Production Blog (Unnicilli web site)

benparker42 — Thu, 06 Aug 2009 13:02:06 +0000

Production Blog

Overview

The basis of my Idea was in place I had liaised with the client. He had also conversed with the web site partner in America. She was currently creating images for the proposed ideas for the site. For the site it was fully agreed that there would be 7 pages of content. All the pages were agreed on and finalized. The first process was to do the banner.

Production

The first stage was the banner. The creation of the background image of the banner was created by Yesika the female client from America. I specified the size needed for the banner. I emphasized that the banner must be 975 pixels. This size is a standard size for the width of a web page. The width of the page is important. This gives the site a structure so that other images and texts can be sized and structured in there desired place.

As the background to the banner was already created this then involved me doing some interactive parts to the banner.

The Banner background image

I went on to the net and tried to find some buttons/text that would be suitable to go with the banner. I did a search for some Tribal/Mayan images. I chose the Mayan images because the banner had a Mayan pyramid in the background. I searched and found a free font site. I eventually found some symbol/images in a Tribal/Mayan style. I downloaded the Zip file and then extracted it onto the desk top. I then transferred the font into the hard drive and put it into the font folder. Now the font was possible to use in Photo Shop. I then could now do the editing and further construction of the banner in Photo Shop and in Image Ready.

The next stage was to use the text tool to type in 7 Mayan text/buttons. The buttons went in the horizontal top half of the banner. Then the buttons needed to be given an outline colour and also the buttons needed to be coloured in. I chose different colours for each button. I also put effects on the buttons. I used a small outer glow and also used bevel and emboss in the effects panel. It gave a nice 3 dimensional effect to the buttons.

I was now happy with the buttons. Each button was on its own layers also there needed to be some button text. The text would need to go above each button and it needed to interact and turn on and off as I hovered over the button. The text was created in Photo Shop but after that the initial interaction would be done in Image Ready. Image Ready is better for getting images ready for the use on Web sites.

In Image ready I could now use the slice window as well as the layers and web content window. These three windows where the only windows that I needed to work with.

Each button needed to be on its own layer based slice. In the web content button I right clicked on each button and then added a rollover for each button. For each rollover for each button I then had to go into the layer panel. In the layers panel I had to do indicate the text visibility for the text for each button. This was done for each button. As the eye in the layers button was switched on in each rollover state. This would interactively make the text appear in each rollover state. I made all the buttons interactive then I viewed the banner in the FireFox browser.

The final banner is pictured bellow. To see the interactive elements of the buttons you must view the banner in the browser this can be done by going to the web site URL at www.unnicilli.com.

The banner with the buttons

Into Dreamweaver

It is important to say that as I saved the banner it was saved out for Web content into the root folder. All websites must have a root folder when working with Dreamweaver. The route folder holds all the pages and files that are linked to your website. So as I saved the banner I had to also create a root folder to save the banner in.

The next stage was to go into Dreamweaver and go to the site option. In the site menu is an option to create a new site here in the new site window I can name my web site and also link Dreamweaver to my root folder. Once this is done I can now successfully start to work on the site.

I started first by making an index page. The index page is another name for the home page but it is also the over ridding format page for the rest of your site. This is were the initial template can be created for the whole of the site.

First stage after the set up of the root folder it was now time to create the tables for the site. I had decided from my initial plans to just use fewer tables and use templates in so areas so that the text would wrap around my images better.

In the insert option I went to the table option and added a table. I chose a table that was 975 pixels wide and had no borders but had 3 rows and no columns. This was a basic table but it would run through out the whole of the site.

As the table was made I could now place the banner in place. This was simply done by dragging and dropping the banner into the table. When the banner was put into place a box appeared. It asks you to name the image that is being put into place. This is done with all images. As you name and add the text it names the image so that people with visual impairments that can not see the image can use programs to listen so they know what the image is.

I then went and created a lower banner. The lower banner was set to a width of 975 pixels like the other banners. I lower banner was set as a background as it had no interactivity. The lower banner was then incorporated with text to cover the links to different pages. The text was done in standard web text. As the text was in place it was then highlighted and then a link was made to each page i.e. for the home page “index.html” etc.

All the banners were now in place. I now needed to create page templates. The page incorporated a H1 (Heading 1) size text and also paragraph text. For the Heading, page text and the lower banner links I added CSS. CSS is cascading style sheets. The cascading style sheets use html text to pinpoint the table and text that you want to edit. The CSS runs throughout the rest of the site. It saves time on editing each page one by one. I used CSS for my links and page and headings. I could choose the text to use the color and also the spacing I wanted around the text. The options are very vast and the true depth of CSS is endless.

The Template

Here above is an image of my basic template in Dreamweaver. The next process was to link my upper banner buttons to each page link. And then when this was done after I had checked to site in FireFox. It is important to check the site regularly in the browser. And also check in different browsers as there is not always a Universal use of the same browser. As the next stage as the index was now the main template. The page needed to be saved as a dwt file as a Dreamweaver template. As the initial template was made it was now that the main process of the web creation was done. It was now important that each copied template page was saved as an html page using the same names as what I had set the links to the page as. So now I should have 7 html pages all with different names but initially all the same. Now the next stage was to transfer the images across to each page as well as text and the headings. All the images that I used were all of the same size. The site was now almost in its final stages of completion. It is important that I keep saving each page and checking the site for faults. The last thing I did was to add a video. I used an option in FireFox to download the video on to my desk top as a Flash file. After it has been downloaded it was now possible to transfer the video onto my site without having to use an embedded web link.

So all the text, images, headings and videos were all incorporated in the site. There was a flow of CSS throughout the site and all content was active with the CSS. So initially the site was complete.

The images and the text throughout the site had a standard flow to it. I checked the site in two of the main browsers FireFox and Internet Explorer. And all the images had text linked to them to cater for the visually impaired. It was now a case of uploading the site on the net.

Uploading the Site

I created an individual client web domain. This was very personal to the site. I managed to purchase a unnicilli.com web domain. This has to be paid for every two years. I also got a free web hosting for the client at 000webhost.com. I used Dreamweaver as the program to upload the site on to the net. I checked the site online and it had sucessfully uploaded and was ready to use. The preferences were all saved in the Dreamweaver site folder.

Evaluation

Go to www.unnicilli.com to see the final product.

Blog 3 – Review of Final Project – Will Lockwood

wlockwood — Thu, 06 Aug 2009 10:56:05 +0000

Blog 3 – Review of Final Project

August 9th 2009

Will Lockwood

Meeting The Brief

Overall I think I designed the website well and produced a site that met the requirements laid out in the brief. I felt that my design came together well, and the process of producing sketches that I could work from made the design process much easier when working in Dreamweaver. As started in the brief, I had various key areas that needed to be part of the website, the products/services that the company provide, which include ‘fault finding’, ‘hardware installation’ and ‘virus checking’. These key areas made up most of the content of the website and from following my initial flow chart, I produced the required content for the site.

As the brief had stated that the company was aimed at PC users not wanting to use services from companies such as PC World, so within the index or homepage of the site I tried to promote the fact that the company had a good trade history, and that the customer had a guarantee that the work would not be chargeable if the computer problem was not fixed. This should hopefully give confidence with the customer and promotion of experience and expertise of the company. As the brief hadn’t given any pricing for there products, I approximately used the prices from another site, http://www.computerrepairshop.co.uk/ . I did this so that my prices would have hopefully be realistic as there where taken from a company that was currently trading.

The Overall Design Process

I found that sketching out my designing before I started was a big help, as it allowed me to get a good mental image of what the site was going to look like and also allowed me to make good estimates of the sizes of the webpage, banners and boxes of the site. Using templates made it easy to make any global changes to my website, and also made it easier to re-produce pages quickly, using this technique. I tried to use colours that would standout against each other, as I had used a lot of background images for the webpages and some of the buttons, white text seemed to stand out the best especially on the darker backgrounds on the banner and the main pages. I also tried to make sure that the site was consistent in style though each webpage. This was done though the template design stage, where I made sure to using consistent fonts and background colours throughout the site. Again as I had used templates, it was nice easy to update any changes that I might want or need or templates can automatically update any pages designed with the template.

Overall I think that I meet the brief that was laid for the company, and that I produce a colourful, bright and themed website for the company. I tried not to make the site to complicated, as the desired users would probably be computer novices, the site could potentially put off customers of it was too complicated. Largely for this reason, is why I used nice bright colours for the navigation bar, so that it stood out and was easy for the user to see and use.

Review of final project

jda5blz — Thu, 06 Aug 2009 10:39:02 +0000

Graham Walsh blog 3

Web Authoring

Tutor Paul Scarth

July/ August 2009

Upon starting the project i already knew a little about Castle & Minster being that i am already a member.
I also went into the office in Huddersfield and picked up as much literature and information as i could about the company.

I looked at the existing website and upon first glance it seemed a bit dated and it didn’t seem to give any of the information that you would expect from a reputable firm such as C&M. The first thing you see when you visit the about us page on their web site is an advertisement for and insurance product and mortgage cover.

There was no section at all about the sorts of accounts that C&M deal with either so i thought a complete remake would be the right course of action to take

I gathered all the information i needed and after i had inserted my table into dreamweaver, i chose the colours that the Castle & Minster use on their leaflets which are two shades of blue, one light and one dark.

After i had drawn the trademark curves, added my C&M logo, set my buttons and added the colour. I set to work on the main content of the text on the about us page and off the leaflets that i had gathered the about us page is just about them, it says that they are aimed towards people living or working in Kirklees, how many members they have, what the benefits are of saving with them and what it takes to start saving with them.

I then added the content for the accounts page and i took of the information that i had gathered about accounts from the C&M office and i just straight out put down the different types of accounts that they deal with, and some information on what they have got coming soon.
The links page was straight forward enough all i had to do was create my links on my page and add and link them to where they needed to go…i did seven in all, ranging from Abcul to Western Union, they were also checked and the accessibility and links worked fine.
I copied text from the loans leaflet that i had collected and also added the loans calculator that was on their existing website into my loans page. The calculator would only work if it was linked back to their existing web site and thats what we had to do, it was a bit of a dissapointment but it works well so i can’t complain.

Being that this is the first time i have ever done a webpage and i am happy with the piece of work that i have created, i came across a few hurdles, but after a bit of direction and recaps on certain things, the simplified and uncluttered approach that i took worked the best and the final piece of work met the brief and came up to the specification of what Castle & Minster are about.

Blog 2 – Creative Process – Will Lockwood

wlockwood — Thu, 06 Aug 2009 10:36:41 +0000

Blog 2 – Creative Process

4th August 2009

Will Lockwood

I first started by sketching a rouge layout of my website, so that I could workout approximate page width and height and also the dimensions and positions of the navigation bars and content regions. This allowed me to workout how many columns and rows I would need to plot out on my base table in dreamweaver.

Designing the Navigation Bar

I decided to move onto designing the main navigation bar which I did in Photoshop and Imageready. I first worked out the width of each box on my nav bar, as I knew the width was 960 pixels and I had 4 boxes, the desired box size was 240 pixels. I decided to choose the height of the boxes by eye, and picked what I felt looked the right height which was 60 pixels. Using the gradient tool and my custom colours selection for the fill I used a strong but not aggressive blue for the colours of my buttons. As I was shown in class, I then copied each box using the ‘alt’ key (which copied it onto its own layer) and filled the box with the rest of the buttons. I then added the text, and choice a funky font of Comic Sans MS and added the text on each button, again on its own layer. I could then add my, what will be later, rollover layer using a strong grey-scale fill, I choose this so it would standout when the user was highlighting or select the button on screen. Now that I had all the text and buttons onto there own layers, I could import them from Photoshop to Imageready. Now that they where loaded, it was case of distributing the layers into slices, and then selecting the bottom layer of each button and then adding the rollover selection.

Once this was complete I could then save it optimized and load it up as an html in Dreamweaver. I could now start to plot out my layout into tables.

Designing the Template

Following my sketches, I laid out the tables positions, my nav bar in the second row, and my secondary nav at the bottom of the page. I could then design and add my banner. I designed the banner by simple using an image from google, and adding it as a layer, in Photoshop, onto a blank page with the correct dimensions of 960 by 150 pixels. I also added some text, using the Comics San MS font to keep the site consistent. As the text I was using was not a default font for the internet, I had to save a banner for each button. I then added the banner to the template, so I could see how it looked. I wanted to have the page size, to fit nicely into the browser and decided to have the left hand box as the image for each page, and also the buttons on the products page. Doing this I felt that the height of the box would be 475 pixels, as it fitted nicely into the browser window.

Now that I had the base dimensions of the template, I could move onto adding some background to the webpage via the page proprieties settings. I found a nice image on google, but I felt it was too bright for a background, using Photoshop, I adjusted the hue settings so that it looked much more suitable as a background image. I also added an image in grayscale to the background of the table, again using the proprieties panel. I now set the page settings to a gray background, to blend with the background image and used a white text to go with the nav bar text colour and also so it stood out over the gray background.

Now that I had everything layout, I could start to add links to my buttons and the nav bar. I did this using the proprieties panel, and using simple and easy to remember webpage names, that I could create later such as home.html and aboutus.html. Now that all my links have been added, I could finalize my template design. I did this by adding and select areas of the page that would be editable such as the banner and the main windows. I also created an information box on the right hand table, I used a 1 by 1 table so that I could give it a background colour and change the font, again I used the same style as on the rest of the page, expect this time I used CSS settings. In order to use CSS settings I needed to label the tables, I did this using the Table ID setting on the proprieties panel.

Re Creating The Pages

Now that template was complete, a lot of the hard work was over. I could now easily create the base pages for the main buttons. I searched and found various images, which I then scaled to fit nicely in the left window, using Photoshop, and adding suitable content in the editable text area. Quite quickly I had created the three single pages of home, about us and contact us. I then moved onto the products page, this was going to have 6 more pages for the links that would be on the page. I created the links, using suitable images, scaled to fit a pre-defined table, and simple had the full colour image as the hoover, and a hue adjusted image as the default. I had previously plotted the buttons design out, so that I knew exactly when size the buttons need to be so that they fitted neatly

Now that I had buttons in place, I create the links to the buttons, again using simple names such as hardware.html and internet.html. I then moved onto creating each sub page, this was done by using the template, and re-using the original pictures, I had used for the buttons as the picture for the page. This kept the site consitent and familiar for the user.

Now that the website site was pretty much complete, it was a case of simply checking that the accessibility settings where present for things such as pictures and buttons. By selecting the buttons in the templates page I found there where no entries for the alterative text, so I add them via Tag settings and saved the template, then updated all the pages with these setting.

Plan of Action

jmcomerford29 — Tue, 04 Aug 2009 14:36:34 +0000

Plan of Action.

The brief I have selected is for a carpet fitting company. A small team selling and fitting carpets, laminate and vinyl coverings. They want pages to reflect there company colours and highlight there product range.

Layout and design ideas.

From the home page other pages are created with trade options, about us, products, etc. more pages flow from products which are the main products of carpets, vinyls and laminates. All these pages will have the same basic format with a heading banner, navigation bars and an area divided for text and images.

Impact level.

The choice of colours for the pages will be blue and gold as specified in the brief. This will be done by producing a backgroud incorporating these colours, as well as the borders of text and images.

Text fonts will be verdana for crisp and clear reading. the weight will be governed with how it will contrast to the background. The heading will be larger and possibly coloured. CCS rules could be used for text and headings, with using CSS style sheets, this will have a consistant look throughout the site.

The images I would like to use would be of layed floors, laminates in halls and kitchens, vinyls in bathrooms and carpets in living rooms and offices.

The logo will be put together in Photoshop, possibly of a van and a man holding carpet fitting tool.

The layout of the pages will have a heading and logo, navigation bars at the top and bottom of the pages, page title and text and image boxes. Templates can be used to reproduce this design, with editable regions to change images and text. These pages will be sized to fit a 1024 pixel screen. The home page will have images that will link to pages and page infomation.

Interativity.

The interativity with site visitors will be created with the use of roll-over buttons on the main navigation bar this will be produced in image-ready and Photo-shop and the foot navigation will be done in Dreamweaver. Images could be made to interact by showing the box change and maybe show a dialogue box. This would be achieved through image-ready in Photoshop and creating CSS rules which will change the customised borders and text, these will be lnks to relevent pages.