digicorp-blog - Tumblr blog

[digicorp-blog]

Finished Website

I believe that I have done quite a good job on the design process of the website, especially with only a few hours of teaching for Dreamweaver. I have taught myself lots of various aspects of Photoshop and Dreamweaver that I had never before knew. I think if I was given more time, I would have been able to complete all 16 pages I had previously drawn out.

Improvements

Some functionalities of the website stay flawed. I physically couldn't move the textarea field (search box) on any of the web pages, even with hours of research on the Internet and books. I found this frustrating, and I believe it lets the sight down a little. Some of the image rollovers still enlarge also, which I can't figure out how to alternate. 

When I was trying to change the left side navigation bar for rollover images, I had massive difficulties changing the colour of the text. When I created the rollover image and imported into Dreamweaver, the same blow up aspect I had previously experienced occurred. I decided to leave the side navigation bar after hours of trying to change it, as I was getting increasingly fed up trying to solve the problem.

Thank you for reading this blog.

Signing out, Matthew Dodgson.

[digicorp-blog]

Saving and Testing Stage

Saving

When I finished all the design prospects of the website, I made sure to save each webpage in dreamweaver to a HTML file. I found this process quite straight forward to do, although I did have a few problems once I was testing the finished website.

Testing

Testing was quite a strenuous stage, as I had quite a few problems trying to get all the hyperlinks to work correctly. One major flaw in the design process was the way in which I sliced all the relevent materials within Photoshop. When I opened the finished website, a few images we're blown up twice their size, after researching through my Dreamweaver CS4 book for a solution, I figured that it was down to overlaps in the slicing stage within Photoshop. 

Some of the rollover images within the website didn't work accordingly as they too blew up twice their size, especially when it came to the footer of the website (Contact Us, FAQ's etc). I simply couldn't fix the rollover image mistakes across 3 webpages, so I figured to take them out of the design process as they would be in-active anyways.

[digicorp-blog]

Entering Image Rollovers and Search Box fields.

Image Rollover - To create an image rollover I had to go back into photoshop, and change the text colour for each of the areas I wanted to change. Once I changed the colour of the text, I had to re-save the selected slices to a designated destination on my computer.

Once I had the rollover images, I had to go back into Dreamweaver, delete the button I wanted to change, the clicked Insert > Image Objects > Rollover Image. A new dialog box will them appear to which you need to need to target the original image (should be in your image files where your original photoshop files are saved), then choose the destination for the rollover image. In my case, I had to choose the pink text that I had previously changed in photoshop. Once this stage is complete, I had to do it for all navigation buttons across all webpages. I then tested the site in Safari to see if the image rollovers worked accordingly (which they did).

Search Box - I specifically designed an area on the navigation bar to which my search box will appear (Photoshop). When I opened the HTML web page file, I clicked Insert > Form > Textarea. Settings will appear for customisation on height, width, position and text you want to appear when the site is live. I did this across all my web pages for Caring Kidz. 

[digicorp-blog]

Once everything was uploaded into Dreamweaver, I had to make sure all the pages linked up to one another. To do this, I simply clicked on the buttons I needed to hyperlink and targeted them to the file location of the other html pages I had created in Photoshop.

I also had to link up each of the social media buttons at the bottom right scree for each of the webpages. I choose to target them starting with a http:// and making sure it would open as a _new file. Opening as a _new file will open the desired page in a new browser window. When I was liking all the navigation bar buttons for each of the web pages I had to make sure they all opened as a _parent file. A _parent file will open the selected hyperlink on the same page, so it makes the web site flow instead of opening each page in a new browser window. 

[digicorp-blog]

Before converting the photoshop files, you need to make sure to slice all the areas of the website you want clickable. To do this, press the slice tool (icon above) and draw a slice box around all the areas you want clickable, make sure not to leave any gaps, or spaces. All areas need to be sliced, if you don't slice all areas, the particular areas that you leave out will not appear in Dreamweaver once the file has been converted over. 

Note: If you want to hide your slices, click View > Show > Slices

Once you have sliced all the relevant areas on the page (for this particular guidance, I'm slicing my home page), you need to click File > Save for Web and Devices.

A new dialog box will appear to which you can view selected slicing areas. Then click on Save and another box will appear, I had to change the settings in this particular box so the format was HTML and Images. Then I customised it so it can generate slices through CSS by clicking on the custom settings drop down box. 

Once that is complete, I opened the designated HTML files in Dreamweaver. Making sure I did the same throughout all web pages that I had created. 

[digicorp-blog]

With no previous skills in Dreamweaver, I had to choose carefully which books to use to guide me through certain aspects with the design process. One helpful guidance was through 3 sessions in University learning the basic tools within Dreamweaver with Mike from BestWay Design Agency. 

Although these sessions we're great to learn the basics, I did feel like I hadn't learn't enough and would have appreciated a few more hours learning the basics. 

The book attached to the photo above by Steve Johnson, I found was crucial for the design process of the website. It helped me out in so many levels, especially when it came to slicing and importing the correct format from Photoshop into Dreamweaver. 

Other aspects of the website I needed guidance with was the way in which rollover images are implemented into the website. I was taught by Mike in the Dreamweaver sessions how to create rollover images, but I felt unconfident with the process. However, these books in particular helped me out substantially. 

[digicorp-blog]

This video tutorial website was crucial the the success of the Caring Kidz website. This particular tutorial website has professional videos on a lot of the design aspects typical web designers use on a daily basis. 

In particular, the rollover image tutorial taught me how to create text boxes that change colour once the mouse hovers over it.

Take a look yourself...

[digicorp-blog]

Design - Sign In Page

As previously mentioned, I used all the background/navigation buttons from the home page by duplicating the layers. With the sign in functionality of the website, I have chosen to copy a text area fields from another website by screenshot. I then added text boxes for all the information (email address, password, create, sign in and cancel buttons) making sure I stuck to the colour scheme of the website. 

I have also stated on the actual website that the sign in function will not be available as the site is still under construction. 

[digicorp-blog]

Design - News Page

For this page, I used the same background fundamentals from previous pages. For the latest news section, I copied a previous layer from the home page (latest news layer) and added some more dates with information on latest news. 

As I would only have time to create 5 pages for this website, I thought it was best to add contact information on this page also, as I would be missing out the Contact Us page. I also added fake email addresses (so don't try to email them!) to each of the staff members of Caring Kidz.

[digicorp-blog]

Design - Get Involved Page

Using the same peripherals from previous pages, I began to create the 'Get Involved' page. This was also quite simple to do, as I already had the background and navigation buttons in place. I also decided it was best to copy a donate section from another charities website. I would then be able to edit this in Dreamweaver so it will be able to enter donation amounts.

[digicorp-blog]

Design - What We Do Page

After finishing the home page of the website, others seemed to fill in place quite sufficiently. I used the same principles from the home page to design the second 'What We Do Page' inserting pictures and texts where appropriate. 

I used some of the information from the group presentation, explaining what the charity believes and does. Take a look at the picture above to see the finishing page.

[digicorp-blog]

Design - Main Page

Once all background layouts are in place, I then began to add pictures from various charity websites to the main page, making it appeal to audiences and easy to view.

Once pictures we're in place, I then decided to add a Latest News text box at the bottom of the page to fill up more room.

If you go back to the design page for the website, you can see slight variations have been made. I underestimated how difficult it would be to implement flash picture boxes onto the website.

I then added the Facebook, Twitter and RRS Feed pictures in the left hand side of the website, creating text boxes to the right of them, explaining which picture is for which social media platform. 

[digicorp-blog]

Now the fundamental design features are in place, I decided to group all the layers together to make it easier for me to copy and transfer them into another page. I selected the layers by holding shift (then click on each layer), right click > Group.

I then right clicked on the selected layers and duplicated the layers. A box appeared asking where the destination of the selected layers you want to be placed. I simply choose the drop down box, and created a new page. The great aspect about copying layers is they save all the settings from the previous page. 

Once I did the laid down the fundamental layers in my second page, I did the same for the remaining 3 pages. I then had the basic backgrounds for all five pages of the Caring Kidz website. 

[digicorp-blog]

The next stage was to add text boxes on the navigation bars. This was also quite easy to accomplish. I created a new text box (within a new layer), changed the colour to white (for easy viewing) and added the correct text.

I then duplicated each of the text layers and renamed/repositioned them to fit within the separator fields.

If you use your arrow keys, you can move any layer to each pixel. Alternatively, when moving a layer, if you hold down 'ctrl' the layer will snap the the hidden guide.

[digicorp-blog]

Creating the footer bar was also quite simple, as I simply created a white text field, duplicated the layer (right click on layer > duplicate), and moved where appropriate. 

When I was researching various website, I found that it was important to include copyright material for the website, with various company information, including charity number, head office location and VAT number. I simply went on the NSPCC website, and copied the information on their copyright material and changed it accordingly to fit Caring Kidz.

[digicorp-blog]

Creating a background and choosing the correct format for screen size.

During the first stages of the design process, I had to make sure that Photoshop was in design mode. Then I created a new project. It was important to change the screen size of the website to 1024 x 768pi because this is the lowest screen size users will be expected to use to be supported by their computers/web browsers. 

I then left the background colour white, and added a pink strip at the bottom using the brush tool (I made sure to create a new layer for this process). I then used the smudge tool to evenly combine the background and footer of the page to blend it all together.

[digicorp-blog]

The logo was easy enough to create, thanks to Ben Carroll for designing with the aid of website http://www.logomaker.com. I simply imported the logo by dragging the file from my desktop, into Photoshop.

The next stage was to include the side and top navigation bars, which was easy enough to do. I simply created 2 grey boxes and filled them in. I then used the Line drawing tool for white separators for each of the buttons (to be hyperlinked in Dreamweaver).