I think I have spent more time looking at creating / resizing my images than I wanted to.  I am glad that I have gone through this numerous times now and have learnt several different ways to achieve what I want.

Given the opportunity I think I would be more organized next time, as I was intending to put a form into my website to allow people to get in touch with the community centre, but had little time to get it finished in the end.

Ideally I wanted to know a little more about how to market and promote my website by getting my own domain and putting my website on the internet.

The tutors were very helpful and patient both in and oput of the classroom.

Another thing I didn’t do was screenprints as I progressed through my design stages.  This means you can’t clearly see how I put my website together, although I feel my writeup should demonstrate a good understanding.

I would say I have fitted the brief of the community centre quite well.  I would have liked to have put my animations on the website as I have spent time doing this and I could have been spending more time on other things but this is all practise and I feel confident that i could produce more websites in the future.

So that the public can have access to as much information as possible I have made a list of what I will need to tacke to ensure it works correctly;

Accessability

I shall be concentrating on making my website accessible for partially sighted people, alongside people that find difficulty with using a keyboard and so on.  This can be seen through the use of bright strong colours making it easier to see on a plain white background.  – All these settings can be chnaged in CSS if needed.

Pre Planning Layout Choices

I have sketched the hompage first so that I would have an idea where to put my images and text and this would give me an idea of how many rows and tables colums I would need to plan out my design.

Imapact Level / Image Choices

Then I went on the internet and found some images that I thought were suitable for each different page.  These began to fill up my website and made the design look more user friendly.  Some of the images were either too big / small and needed to be resized within Photoshop to make them fit within the page.

I needed to make sure I saved the images as jpegs at 72dpi to make sure they were ready for the web and my website.  Some of the images were a little blured once resized, so couldn;t be used on my design.

Example of community centre

Example of corporate looking material

Example of a logo

Image of Chestnut Centre - Deighton

Research Material

I also found certain information from other community centre websites to give me an idea on what text to use for such areas as my About page, Contact Us page, etc.

Banner design

I alo designed my own banner in Photoshop.

My finished banner (pre-text added)

I decided to call the community centre ‘All Nations Community Centre‘, bearing in mind that my brief was to promote community cohesion.  Courses on offer within the community centre would be in both English and other languages.

The banner started with the image of people holding hands reflecting the ideas of all nations joining together as part of the community.

I then went on to add text to the banner in Photoshop so you could clearly identify the name of the website.

My finished banner showing added text

The text was created by using the warp text tool in Phtooshop to make the text look as if it’s coming from the red person at the front.

Logo Design

I then thought about my logo design for my website.  To fit in with the name of the community centre I called it (ANCC).

The logo was designed in Flash and aimed to have different elements moving within the design to add some form of visual impact to my website.

Example of flash logo to be used on my website

Note: Unfortunately due to time I didn’t get the opportunity to finish this logo and include it as part of my final design.

Imapact Level: Colour Choices

I have used the same green colour on each of my pages to accent my links and make them easy to find.  To help anybody with visual imaparements I have also made them large in size and change colour where possible.  All of these settings have been done in CSS so I can change them at any time, if needed.

Use of CSS (Cascading Style Sheets) / Templates

I have used CSS Style Sheets to put some padding around and in-between my images on my home page.  This is good because by using these CSS styles, once everything is done on my template, I can save it out and every page linked to the template will stay the same.

With templates you can also have the option of going back in and altering things as many times as you want.  This will save on your time in the development of your website.

At first I did not fully understand how to implement a template, but now I have done this a few times it makes a lot of sense and has become easier to follow.

For the padding on the images I created a CSS rule and used a CLASS to add 10 pixels worth of padding around the images.

I have also used CSS for my links at the bottom of my web pages.  This was done by creating a CSS rule and and choosing the LINK option  and looking at changing both the text font (to Arial) and text size.  I also looked at changing the active and visited link colour so the text changed to yellow / rted when the user rolls over the links.

I also wanted to change the colour for my background of my design so I have used a CSS style nd choose the body tag to change background colour to white.

Interactivity / Rollovers

I have made my website interactive by using rollovers for my main links at the top of the page.  Once you roll over these they change to a lighter colour.  This was achieved by creating a brand new CSS rule in the style sheets to change how the table cell interacted when you hovered over the top of it with your mouse.

I also made all my links change colour and size from green to yellow for accessability and to make them easier to find within the website.

Some of my images on the right of the website change when you roll over the top of them.  These also have links to aditional pages.

Having attended various learning centres using different learning methods and been involved in voluntary community work, this is the kind of situation I am familiar with and, I wanted to produce a web site which would contain everything I would hope to see when searching for a community learning organisation on the internet, so I chose a community centre as the subject.

I had to decide exactly what information to enter into each page to categorize separately the functions of the organisation, by breaking down our activities.  Some of this information could over lap from one category to another but I am satisfied with the result although given more time I may improve and elaborate on this.

I have successfully emphasised that we encourage all members of the community to attend and include confidence building, learning and activities, therefore this centre will be a valuable meeting space for all sections of the community.

The fact,  I mention that we provide links with other organisations, and networking opportunities means we promote community cohesion locally and provide links with other communities.

A website like this one would look good along side leaflets and posters as it is a to the point summary but it provides all the necessary information to attract people with many different interests.

We encourage speakers of other languages to improve their English as well as English-speaking people who need help to improve their literacy.

Although we do not teach any other languages at the moment this is some thing we are hoping to look into when we find suitably qualified tutors.  I am confident that at the moment as a new website, this site will attract enough new people as it is eye-catching, to the point and of interest to complete beginners in I.T. to more advanced uses and also to people with other interests.  For learning and recreational purposes.

Initially, if I saw a web site like this one I would be very interested as it covers all I would hope for with this type of centre and there’s plenty of scope for interest to encourage people to contact the centre, so in that respect I am very satisfied.

At first I thought I had picked a difficult subject with which to create a website having very limited experience of using Dreamweaver, but this is the kind of  subject  which I am familiar with and after searching the internet I managed to find suitable images.

Creating the site was not as difficult as I expected by using what I learned on the web authoring course I was able to use  cascading style sheets and tables.  Also what I learned from the previous course saving Photoshop images as J.P.E.G. images and inserting into Dreamweaver corresponds well with this.

I have found the web-authoring course interesting and enjoyable and this knowledge will be very useful in the future within an organisation.  I feel much more confident about using this program as a result of this course.

The Good

The interactivity of this website has certainly got to be one of its strongest points, while also its greatest downfall. However, I feel I have most certainly met the critera of including interactive elements within the webpage in the form of rollover images combined with gif animations. The website is also still clearly navigatable while in a greyscale viewing mode, as the colours don’t closely imitate each other in adjacent areas. I didn’t have to deterr too far from the originally intended colour scheme in order to achieve this flexibility.

The Bad & The Ugly

But in the end, the website is ultimately unfinished at the end of the time period set out by the examination body. I have neglected to create content from the template I barely ‘finished’ designing, so it is hardly fair to name my final result a web’site’, as it only really consists of a single page. The website currently makes minimal use of alt text, header texts or tags, and is therefore unfit for viewing via screenreaders.

Most of the creative process so far as been focused on developing the interactive side of the website’s template layout. However, a number of problems have occured during the coding process, as it appears that Imageready’s HTML code is not entirely flexible or compatible. Such problems have occured such as not being able to have the layers stack in the correct fashion and still remain accessible, the layers not stretching to the page’s width or height, nor will the layers anchor to the top or bottom of the page as originally desired.

Inability to correctly align website’s layers has left the site with an unprofessional appearence

I was blissfully nieve to the fact that attempting to layer a larger table over a smaller one would inhibit the ability to interact with the table lower on the z-index. I was unaware of how Imageready outputted the HTML of the designs, and believed that either the spacing between table cells would be empty, or that if the table cells were devoid of information, properties, styles or images that the table beneith the cells would become accessable. This is one of the many design flaws that caused my website to fail in my ambitions.

The Curse of Bad Layering

Attempts to rectify said problems (Such as converting the website to use div tags and CSS positioning rather than tables, and then use CSS hacks to ‘stick’ a border to the bottom of the screen) have failed constantly, consuming much of the time allocated to completing this project.  This has unfortunately crippled the intended layout of the website, leaving the interactive layouts static and heavily relying on the user’s screen resolution and current magnification settings – Which in turn has crippled the accessability of the website for partially sighted users.

Final Thoughts

Had I more time on the project, I would have scrapped the outer navigation layer and redesigned the said layer to be attached to the main body of content, so that all of the information would be present ‘floating’ in the middle of the user’s screen. However, if I had unlimited time, I would have attempted to continue to re-code the website in an attempt to rectify the problems present. At least, this experience has shown me that complex website designs must also be tackled with an equal degree of skill and understanding HTML code; That of which I definitely lack the latter. This project has taught me that discretion is both the better part of valor and website design, and next time I attempt to design a web page I will be -

1. Making minimal use of ImageReady and its generated HTML code, and opt to design most of the website based upon tables within Dreamweaver insted
2. Will not attempt outlandish techniques or ideas on the first attempt.

Photoshop Design Process

Main Body

I decided to create a frame for the main body of content of my webpages out of an image of a personal amplifier. I decided, after reviewing my initial sketch design, to utilize this design to maintain the feel that the website is constructed from musical instruments and equipment, by using the dials, buttons or switches on the amplifier to act as a navigation menu, and to use the contigious texture of its speaker as a background for webpage content. I found an image of a personal amplifier – Facing flat to the camera, following the appropiate colour schemes depicted in the Design Proposal – and removed the excess ‘white’ background and replaced  this with transperancy.

I had decided that for my interactive buttons, I would use the dials present in the image for the body’s main navigational links. I decided to use the dials only in order to limit the amount of links I would need to create, and to standardize how the links would be presented – I believed that if I had created links from the final two switches on the right hand side, a number of users may overlook these links completely, as they didn’t follow the visual trend of the majority of the other interactive buttons.

I created rollover states for each dial in the image by selected the dial with a elliptical selection tool, creating a new layer, copying the dial onto said layer and then rotating the layer, so it appears as if rolling over the dial has caused the dial to turn. The dials were created in a unusual fashion, however, as I realised that the original image showed the dials fashion that the normal state consisted of layers representing its ‘off’ state were initially visible, and when rolled over they became invisible as to show the ‘on’ state underneath them

I quickly realised that there was not enough space to contain and clearly represent the target of each link. So I decided to attach another image (Which looks suspiciously like an iPhone) to the body which was to contain the text representing the target of each rollver button.

I then began creating a set of text objects each contained within their own folders. First, I created a simple layer of the ‘|’ character, which would toggle on and off in the default state in order to mimic a typing indicator. Then, I created folders and layers for each word I was going to need to indicate the rollover’s target link.

I decided to use a large, green pixelated font to mimic a Liquid-Crystal Display. I chose this particular text as I believed it would stand out against the rest of the web page’s theme, as to immediately catch the eye of the user as they rolled over each dial. In order to further highlight this fact, I created a text layer designed to imitate an engraving on the amplifier, reading ‘Links’.

The text for each link was broken down into a progression of the word’s completion, letter by letter so that each layer could be used as a single frame of animation within Imageready – E.g. Home was broken down into 4 layers, the first of which contained ‘H’ in the selected front. The second layer was ‘Ho’, the third being ‘Hom’, and so forth. This was to create the impression that as each rollover was selected, the target text was being typed into the screen.

Navigation/Product Menu

I began creating the Product menu by firstly deciding upon a broad range of musical instruments to act as an umbrella catagory for each kind of musical instrument that would fall into a simular relation. The instruments were arranged in a fashion so that the further down the navigation bar the user goes, the more tech-saavy and less traditional the instruments became. The instruments I decided upon were, from right to left -

1. Double Bass, Aucostic, for the Stringed catagory.
   
2. Saxaphone, for the Woodwind catagory.
   
3. Timpani, for the Percussion catagory.
4. Electric Guitar, for the Guitars and Bass catagory
5. Personal Amplifier, representing itself.
6. A Microphone, also representing itself.
7. An electronic interface, representing electrical equipment and accessories.
8. Grand Piano, representing all forms of Pianos.
9. French Horn, representing Brass instruments.
10. Some kind of handheld percussion bell, representing Handheld instruments.

I acquired an image of each of these instruments, mainly from a website known as Norman’s Musical Instruments, and created a rollover state for each of these images. I firstly removed the image from its containing ‘whitespace’ into a transperant background, and then created a desaturated copy of each of these images. I decided that the desaturated image would be the ‘normal’ state for each rollover, and that the saturated image would be the ‘rollover’ state.

This was to create the impression of the image springing to life when highlighted, however I quickly realised that this approach would not be distinguishable by users affected by colour-blindness. I attempted to create a alternative for each instrument, in which each image would spring out of the page slightly and ‘glow’, but found that the image slices began intersecting each other which caused major problems in the animation/imageready stage. I was forced to resort to the original concept, and hope that the animated text at the bottom of the screen would be enough to attract the user’s attention and indicate that each image was infact a link.

In this image, a number of instruments have been intentionally highlighted in order to represent how the navigation menu works. In practice, only one link would be able to be highlighted at any one time, as most users only use a single mouse.

I decided to follow the same format for representing each link’s location in this navigational bar as I did in the original navigation bar, but with the minor alteration of using a car radio facia rather than a large screen. This was intended to minimize overlap between the products navigation bar and the main body of the webpage, so that as much content would be as visible as possible before the user had to begin scrolling.

Finally, using the paths tool – combined with the layer blending options and a leather texture grabbed from Google Images, I drew out a panel to attach each images to. This was purely for aesthetic reasons, as it lacks any real form of interactivity and was intended to aid guide the user’s eye around the navigational panel, while keeping the instruments from looking as if they were merely ‘floating in space’.

Imageready Animation Process

Main Body

I created a layer-based slice from each rollover dial layer, and from the screen placed at the top of the navigational bar to use as a remote slice for each rollover state, in order to eliminate artifacts and overlapping. Working again from right to left (simply because I was working from top-down in the layers menu) I created an ‘over’ rollover state for each dial, and then turned OFF the appropiate layer in the ‘Dials Off’ layers folder. Then I linked the ‘over’ state slice to the screen layer-slice to create a remote rollover. I repeated this process with each of the dials to quickly create a basic set of interactive buttons.

The dials were created in a unusual, backwards fashion. I realised that the original image showed the dials in a position that would already indicate that they were ‘on’, or at least at half volume. So insted of having layers turn on when the image is rolled over, I created a set of ‘off’ set layers, and had these layers dissapear when the buttons are rolled over – making it appear as if the buttons had changed dynamically, when really they had simply returned to their original position.

Web content panel, showing a rollover states of each button.

Once each rollover state had been created, I began creating animations for each rollover state. I set the looping option in the animation panel to ‘Once’, and set the initial frame to a 0.1 second delay time. I would then turn on the layer containing first letter of the appropiate link’s text, duplicate the animation frame and then turn on the next text layer, turning off the proceeding layer as new animation frames were created. Once the rollover animations were completed, I created a simple two-frame animation to play during the default state – The ‘typer’ layer turns on in one layer and off in the next, looping forever with a delay of 0.5 seconds.

An example of a rollover’s animation frames.

Navigation/Product Menu

The animation of the product menu followed the same process, although the layer based slices were created from the ‘desaturated’ layer of each instrument and linked to a layer based slice created from the car radio facia layer. The only major difference with the rollover states in this section of the websites is that a ‘normal’ or saturated layer would become visible when the instruments were rolled over, as well as the desaturated layer becoming hidden. Not much else can be said for this process, unless I was to describe the myriad of errors and troubles I ran into while attempting to finalize this document. (Not least to say, ImageReady failing to save or output the document due to its memory constraints. On a system that has 4gb of virtual memory though? I’m not sure who’s design is worse – Mine or theirs!)

An example of the ImageReady workspace after completion of all rollover states and animations.

Saving to HTML

Due to a number of troubles I encountered attempting to layer two sets of ImageReady-generated tables, I have decided to dictate ImageReady’s slice output as CSS coding insted. The site layout is now comprimised of <div> tags imitating the original table design. I was hoping that by using CSS to position the site’s layout, I’d be able to circumvent some of the problems I was facing, for example by removing removing <div> blocks that ImageReady outputs in order fill caps between its graphics. However, I’ve spent so much time on this project that I simply no longer have any time to actually work on the code anymore. I can simply remove the tags within Dreamweaver, however attempting to rearrange the z-index stack via CSS would take much more time than I currently possess. The fact that none of my web-browsers will correctly preview .dwt templates, and that trying to save a new HTML file created from the template now, over the 24 hours for reasons unknown, adds ‘../’ infront of any image tags’s source, has greatly exacerbated the issue.

Dreamweaver

Importing

Once ImageReady had outputted both HTML files, I loaded both into Dreamweaver and began to combine the code of the two pages into a single webpage. Firstly, I set up a new site, inputted all of the relevant fields such as website name, root folder and default image directory, and then pasted the HTML from the first of the two pages into the Dreamweaver generated blank page. I then removed the excess information from the code of the webpage that had been pasted in, such as the doctype and header information, and their relevant footer tags. I then did the same with the second set of HTML code outputted by ImageReady, combined the CSS rules present in both documents while removing any duplicate enteries, and then moved the CSS rules into its own stylesheet named “css.css”. Finally, I combined the two preloader javascripts so that script only runs once and preloads both sets of images.

At this point I performed a few minor tasks within Dreamweaver:

• Set the background to an image I created previously and set its repeat options to both X and Y axis.
• Defined each layer as table 01 and 02 in CSS as opposed to its pre-generated name
• Defined a set of new CSS rules in an attempt to force positioning of the two layers: Attempted to force width and height stretching on the product menu layer, while forcing it to stick to the bottom of the browser window, and attempted to centre align the second layer and stick it to the top of the browser window. Eventually gave up after attempting a number of CSS tricks and HTML techniques and reset original div positioning values. (“body, html” CSS rules for defining 100% window width and height can still be found)
• Created a template file from the final revision of HTML code, and defined an editable region inside the <div #bodybackground22-31> block.

Creation a (quick) company logo

Once the process (or absolute ball-ache, as it were) of combining the two pieces of HTML code generated by ImageReady was complete, I began to finally reconsider the content of the webpages I was tasked to create. “What content do I need to create to place within each webpage? How am I going to represent this content in an accesible, yet appealing manner? How much information is necessary for each webpage, such as each product catagory? How will I fit all of that information in the now-constrained space I have to work with, due to the restrictions placed by the use of ImageReady?”

Looking at the site logically, I realised I needed a homepage first and foremost – And that since this website is designed for a company, that company will need a logo to define itself.

First, I created a soft black circle background in Adobe Photoshop by using the elliptical select tool + holding shift to constrain its proportions and filling the selected area with a dark grey. I then created a basic ‘H’ logo by using the paths/pen tool to create the H itself, then filling the paths with a gradient. Finally, I picked an appropiate-looking font and then rasterized the font layer, then converting the layer to a work path and once again filling the paths with a gradient.

I picked the colours of red to orange sunset hues in order to stand out against the web page, while not deterring too far from the website’s overall colour scheme of wood-like/brassy tones and thick greys.

Defining CSS styles and creation of the index/’homepage’

To begin the process of creating content from the newly designed page template, I created a basic table design of 780 pixels wide by 540 pixels high, consisting of 2 columns and three rows, of which the first column had its rows merged. I then placed the company logo in the top left hand corner and used it as a guideline to segment the rows and columns into a 3rd of the table’s overall size. I then wrote a line of text, famous for including every letter of the alphabet, in each header style and paragraph style on separate lines so that I may then visually define the fonts for each header in CSS.

Aim

my project that i chose was the promotion of spirituality which the background info staes that the client is looking to promote the art of spiritualityand how this can become a part of everyday life how i have constructed this website by using the basic guidelines when opening a new site go to the top of the screen and select new site

putting the site together

i think personally this was the hardest part of the project because i didnt want to copy anyones ideas and do the same as them because everybody in the class has selected a different subject matter so there isnt anyone to compare to this was my basic layout of the homepage

this is the homepage with the title and the navigaton bar below i think this is basic compared to some of my peers projects were quite technical because of the chosen issue the promotion of spirituality i took a more subtle appraoch and thought this would make an impact i chose pictures frm the web from google i chose images like clouds and images of the buhdda to promote spirituality i think i achieved this because all the images were assiocated with spirituality.

i found this easy to put together because of how basic the website layout was i used bright colours to make the website stand out as much as possible also i put a definition of spirituality from wikepidia which i tranlated into my own word because the idea of copy and past will not work because there is just too much text to read and you could be there forever reading text that dosent corespond with the subject chosen

discussions page

now with this page i wanted to give the viewer the idea that the page they have entered is a discussions page where different people have dropped comments on the page with their email the effect that i wanted to give was that there are different meditation tecniques and the one which is most freqently talked about is the best tecnique that should be used

Looking back at my proposal most if not all the elements were used in the design the tables worked quite well and nesting them together in that way made it quite useful for all the products to be displayed on the main page with enough room for the gallery, This is quite an important pages the brief gives set guidelines with regards to the interconectivity between the products and the artist work being displayed in the gallery ,I have tried to be as colour full as possible with this page and concentrated on full impact using as much colour as possible. and using rollover Images to show case the artist work within the gallery giving the impression that this is the place to display your work on the internet. The products page works quit well also using tables to their best advantage and nesting them together so that we could display as many products as possible and at the same time keeping every thing under the same umbrella and interactive along with links that connect to the over five pages. If I could go back and start again I think I would make the main page more colourful It dose look quite clear but in comparison to the other pages it seems a bit dull if you look at the about the artist page and the gallery and products pages they all seem more vibrant than the home page for some reason , I think its part of the learning curve things look better as you go on and start to  come to terms with dreamweaver and the way it works and trying to keep to the clients brief,and make sure that all the bases have been covered, but in general I think I have managed to include all the clients requests .I have included with this blog screen dumps of the home page as well as the gallery products and about the artist, I think when you see them next to each other you get a better look at the overall design and whether you think it works or not .

About the artist

The Products page

The Gallery

we have used photoshop to incorporate some images into our website by using image rollover and by applying different layers to images and flash based buttons

i found to use photoshop quite hard to do at first but i did eventually grasp it in the end but for my website proposal i didnt really incorporate any pictures fom photoshop into my project the project that i chose was the promotion of spirituality i chose this website because i thought this would be an easy subject to do myself persoanlly this is a preview of what my webpage would look like

i chose the promotion of spirituality because i thought it would be a challenge for me do do something that would be so easy to think of to do but it was a case of putting the whole thing together so it works best for me

Plan of action

initial project ideas: i have chosen the promotion of spirituality website to do for my project i have come up with the idea to promote this by putting together a website that will show the promotion of spirituality by using tecniques such as meditation to show this is one form of spirituailty by demonstrating certain meditation tecniques like yoga for example

Layout design ideas

For the website to be fully acessable to the viewer i have drawn some sketckes of waht i would want the page layout to be like hence the screenshot at the top of the page this is what my homepage would look like i have gone for the basic layout like what a normal website would look like i have the different pages for example my disscussions page looks like this i came up with the idea of a discussions page to have a review of the different tecniques used to meditate by making the page like people have dropped comments on the chosen form of meditation and which one is the most frequently used

Impact level

The initial colurs that i wanted to use are vibrant bright colurs that will make the website stand out with colurs like purple yellow kermit the frog green and white for some parts of the text and for the fonts to be as big as possible so they stand out because i want the site to be a bright as possible so it catches the viewers eye straight away.

inteactivity

to make my website interactive with the viewer i have made the navigation buttons on the top of the page interactive by using css rules for the navigation buttons so that when you haver over the button and click onto it it then takes you to the desired page that you wish to see

2. The table size was decided to be 900 pixels wide and at least 130 pixels deep. The size for the column was not set because this would automatically adjust. To summarise the table would have 3 rows and 4 columns. The top row would be merged to hold in place the logo. The middle row would hold 4 columns and would not be merged or split. The final columns would be merged into two cells, one cell merged, to form block A and the other cell merged to form block B. ( See Fig. 1).

 3. Table Fig. 1

4. Save the above ( Fig. 1) as the basis of my page layout, ready to add additional content.

5. Open Adobe Photoshop to design the logo – “J Coffee”
           – Click on File, select new.
           – Insert ‘Name’, set the width as 900 pixels and the depth 50 – these may be changed as and when required.
           – select the colour from the two squares, green and cream, dragging the cursor button to where the pattern of the selected colours is to formed, in this case to be formed vertically.
           – the logo should now be saved as a jpeg otherwise more commonly known as jpg.

6.Text should now be added to the logo. This is achieved by highlighting the “T” button and dragging along the logo where the text is needed. The colour and font can be changed at this point, the text should be centred vertically and horizontally using the move tool.

  Fig. 2

        The second and fifth from the left both respectively align text horizontally and vertically.

7. Text in Icon
           – Text should now be added on, the “T” button should selected and highlighted over the relevant icon such as “Home”.  The move tool should then centre the text and the text centred vertically and horizontally. The icon should now be saved as a jpg.
           - The above should now be repeated for the other icons, Ethics, Products and Contact Us

 Fig. 3

               – The first top-right is the move tool.
               – The third from the top down on the left hand side is the cropping tool.
               – The sixth down on the right hand side is the gradient tool. Right clicking on this produces the gradient tool and allows a wider selection of colours and patterns for the web-designer.
               – The two squares, above as example show the two different colours that are available for the background of the logo and icons.
               – The text “T” colour is also dependent on the colour of the first square.

8. Design of non-rollover icons
           – save as jpg
           – Again using Adobe Photoshop, open a file, new followed by typing of Name of icon. For instance, Home. The icon should measure 225 pixels wide by 50 pixels. The value of 225 pixels across is derived from the value of 900 pixels across divided by 4, the number of columns.
           – Again similar to that of designing the logo, two colours should be selected, this should then be desaturated using the gradient tool.
           – The size and background colour should be saved at this point as a template.
           – Text should be a colour that “stands out” from the desaturated colour background.
           – Icons with colouring and text should at this point be produced for Ethics, Products and Contact Us.
           – The icon sixth down from the right-hand-side, is the gradeint  icon. This allows two colours or more to be merged and from any selected direction. The two ‘large’ coloured square icons – colour picker – determine what colours are used for the two colours to be merged.
           – Select the colour picker allows two or more colours to be used. For simplicity only two colours will be used. ( green and cream/white and grey for text).
           – Where necessary the cropping tool and will be used. This will remove any unneccessary ‘images’. 
          – Fig. 4 below allows a wider range of colours that can be used, in the icons, logo or even background.

Fig. 4 ( see below)

Fig. 5 (see above)      

   – The colour pattern above (Fig.5) allows multiple colours to be selected at the same time. This allows various colour patterns. But for simplicity only two colours will be selected.

 9. Step 7 should be repeated for the rollover icons, except for the colour of the background of the icon should be different. This means the colour of the icon will change when the cursor rollover it after being saved and previewed in Firefox. (See below).

Fig. 6 (see above).

10. The image name is home, ethics, products and contact us. The alternate text is home, ethics, products and contact us respectively for each hyperlink.

11. The original name is the name of the hyperlink, not rolled over. The rollover name is that which is to be rolled over.

12. Up-to-date
           – Logo designed and saved as a jpg – saved in jcoffeeproject1
           – Navbar designed, icons designed for viewing and rollover, all saved.

13. Content for A and B
                                 Webpage              A                                                             B
                                  Home                   Description of J Coffee                   Images of and Drinks and Food
                                  Ethics                   Decsription of Fairtrade Ethics  Images of Fairtrade
                                  Products             Images of both Food and Drink in both Blocks of A and B
                                  Contact Us          Address  details                                Map of Huddersfield

14. Once the logo has been saved it can be dragged and dropped into the logo space.

15. Rollover Images
           - To highlight a hyperlink a rollover image will be used.
           - First Insert from the top bar menu, followed by image objects finally by rollover image.
           – This is followed by image name, such as home, the original image jpg will then be found in a folder named as “jcoffee” under the title “home.jpg”
            - It should be noted the cursor should be placed where the icon is needed.
            – The alternate name is for the hard to see.
            – This will then be repeated for the rollover image, that is, homeroll.jpg and the subsequent web pages, that is, for ethics , products and contactus
 

Fig . 7 see above

16. Up-to-Date
            – At this point, the table size has been designed
            - The logo has been designed and dragged and dropped into the logo space
            - The icons, hyperlinks are yet to placed.

17. Hyperlinks should be used at this point. A hyperlink should be typed in, including the “.html”, 
             - for example, index.html linked to Home
                                          ethics .html linked to Ethics
                                          products.html linked to Products, finally
                                         contactus.html linked to Contact Us.

18. Areas A and B should be higlighted as editable regions. This is achieved by Insert followed by Template Objects followed by Editable Region. The Editable Region is used because it allows the highlighted region to be further edited, similar to a template. Editable regions allow a webpage template to be changed

Fig. 9 see below

19. The Logo, Icons should now be in a template. This is achieved by the following, dragging and dropping the logo into the relevant top bar. Steps 7, 8 and 12 should fill the navbar.

20. This should now be saved as a template. File, Save As Template, Template followed by Save.

Fig. 10 see below

21. To open a new template. File New, select the correct file name from Templates, that is, jcoffeeproject1 followed by create.

22. Step 18 should then be repeated for ethics, products and contact us.

23. Images and a map are downloaded from the internet.

24. The Home page contains information about the Coffee, this is in box A. In box B images of food and drink.

25. The ethics of coffee is that of a strong belief in Fairtrade products. In a shorter box B, Fairtrade logos is placed.

26. The box size was changed first by splitting the cell into two columns. This was then followed by a merger of the left hand side of box B.

Website is to be split, an extra column has been created in column B this forms three columns. 

 The left-hand-side column of column B is now to be merged to create a larger area for text see below. This is the shorter box B. This is for the ethics webpage.

 This can now be repeated, in reverse for ‘Contact Us’ with the image of a map.

27. The Products webpage in boxes A and B show images of various drinks and food.

28. The contact us webpage was first was split into two. Then the right hand side cell was merged with box B, the map was then added. This is similiar to the ethics page but should be in done in ’reverse’ for the image of the map to fit into the enlarged box B.

29. Adope Photoshop was used to crop images that been “Screen Dumped”.  Images that been screen dumped was then opened in Adope Photoshop. In Adobe, this was opened up as File, New – given a name then saved as a jpg. The cropping tool was then used and cropped around the area required. To enlarge the image the magnifying tool was used. The image was then uploaded into this file.

30. The cropping tool is the third from the top on the left-hand-side. Whereas the magnifying tool is the 11th from the top right-hand-side. The tool panel in question can also be found in step 6.

31. Images used were selected from the web. These were then saved as a picture into a relevant file, ready to be opened up later under insert and the relevant picture selected.

I feel that I have created a website what completely covers the original breif, advertising all there food and drinks which also gives additional nutritional information. The website shows that they  are well established in the Huddersfield area, and have fair trade products.

Criticism

Although the website has everything the client asked I think the pictures could of been better, if I had more time I would of been able to of found far better pictures.

I think the background image could of been a different colour for contrast and to let the main table stick out a little better.

Although the colour choice was to relate to a phoenix (and fire) I think this could of been a better colour.

Overall

Minus my personal criticism overall I feel that I have done well to say this was my first website and my first time on dreamweaver. I show a good understanding of techniques (rollover, css) and have used them in my website.