For this project I was asked to create a web site design for my portfolio, I would have to successfully create my links and design for my website. The target audience for my website would be 16-35+, and anyone who is interested in graphic design. The website will be displaying work of mine from the first and second year of college. With my website I felt that I met all the outcomes of the brief, as I have complete what has been asked successfully, with my tutorials and also a fully functional website.

With this project I have learnt a lot of different techniques and skills throughout. As creating a website was new for me, everything was basically new for me. I used Dreamweaver to create my website which was something different for me, where I had to insert Divtags, Images and Text. To place the images into my website I had to edit them in Photoshop and save them to web, which again was also different for me as I had to play around with the settings and pixels etc.  I feel that I successfully completed all of these outcomes and also inserted all my information correctly. At first I had to draw up some initial thumbnails that would help me when it came to creating the layouts in InDesign, software I am familiar with. And once my layout was complete I would then progress my designs in Dreamweaver.

I researched a variety of different websites from a lot of different agencies, where I felt helped me in creating a lot of my designs. I looked at a lot of different types of websites from sport to fashion, so I could get an insight how a lot of companies layout their sites. A lot of these websites helped gave me my inspiration for when it came to creating my website, as I felt that a lot of them where very creative and different, and some of the designs where very simple and effective. Through my work it is clear a lot of my designs and layouts are from inspiration from my research that has inspired me.

For my final designs I felt the home page was possibly my most successful feature, as I managed to make the image into a link and also use navigation along the top of the site that would take the viewer to different parts of my website. I also felt that my portfolio page, where the boxes of my work where, was also very successful as it was very easy to navigate your way through. I felt that once the viewer accessed a lot of my work it was very easy navigate your way through, back to home and other parts of my website. The hardest part of the project was possibly working in Dreamweaver and getting used to it, as I felt it was very difficult to use, but once I had got the hang of it I find it very effective and useful. If I was to improve anything in the project it would possibly be placing more appropriate images into my website, as I felt some of them where awkward sizes and I had to adjust a lot of my Divtags to fit in with them. I felt this project went very well and I felt that I met the outcomes of the brief and I created an effective and useful website for my portfolio.


Editing the appearance of your Div tags …

  • To change the appearances firstly highlight what you want to change 
  • Then create a new CSS rule and make an ‘A’ tag
  • Go onto your CSS page in Dreamweaver and copy and paste the rule four times, so you can edit the appearance differently for each link.

Now change each ‘A’ tags headings using in the following order;

  • a:link – this changes the general appearance of the link.
  • a:visited – this changes the appearance when you’ve already visited it.
  • a:hover – this changes the appearance when your mouse is hovering over the link.
  • a:active – this changes the appearance when you are currently using the link.


  • With these you can edit the Sizing, colour and typeface making it much more appropriate for your website.
  • Make sure the link headings are in order otherwise the CSS rule won’t work properly

Creating Navigation …


Anything in can be made into a link for the website as long as it has the accurate codes.

  • <a = indicates the start of the link and denotes the link
  • </a = indicates the end of the link
  • href = indicates the reference to where its linking to.

There are 3 ways of create links, for example;


  • Selecting the object/text you wish to create into a link
  • Click the file next to the link box and select the file you wish to link your page to


  • Selecting the object/text you wish to create into a link
  • Click the drag tool located next to the link box and drag it to the file you intend to link your page to. This will be located in the ‘manage sites’ file in the bottom right.


(If the page isn’t created)

  • Selecting the object/text you wish to create into a link
  • Type in the link box the name of the page you wish to link it to, and then create the page later and naming it what you entered in the link box.

Making Images Into Div tags …

  • Firstly create a new file in your root folder named ‘images’ so you can store all the images for your website.
  • Go to the HTML and find the image you that you want to place into the Div tag.
  • Open the image into Photoshop.
  • Before doing anything make sure the file is in RGB.
  • Use the crop tool to adjust the image to the right sizes of your Div tag.
  • Before changing the sizes, make sure you make the sizing pixel/inches. And the resolution 72 as it’s the standard resolution for wed based designs.
  • When complete, insert the accurate sizing’s of the Div tags on the image.
  • If the image is digital based save it as a GIF, if it’s a photographic image save it as a JPEG.
  • With both settings you can change the sharpness of the image helping it fit best with your website.
  • Once you have completed this save the image to your file on the root folder, but make sure when closing Photoshop you click don’t save as it will save it as the cropped image otherwise.
  • Delete the text in your div tag and click insert image, and chose the image you previously cropped.  Make sure you fill in the description box with the appropriate text describing the image.
  • Finally open up the images in a browser to see if it is all successful.

Designing a website …

  • Create a Root Folder
  • Open Dreamweaver and click manage site 
  • Name the site without using spaces or numbers
  • Browse to find the root folder 
  • Create a new HTML page and save it in the root folder as Index.html
  • Open a new CSS page and link it to the html page (Always link from the HTML page)
  • Click Insert, Layout Object, then div-tag on the drop down bar
  • Give the div-tag an appropriate name in the ID box
  • Create another div-tag but click after tag, after the one before
  • Click inside the header and click new CSS rule 
  • Alter the positioning and change it to Absolute
  • Then enter the height and width of size you want the div-tags 
  • For the first div tag have top 0 and left 0 then edit the rest depending on the positioning of the other tags
  • Alter the colours of the div-tags of your choice
  • Save as Index.html
  • Open in all browsers to check if its ok.

TepTek …

TepTek …


The Navigation for this website is very unique and effective as by finding what you want you have to click a box with an image of what it is you are looking for. This website has made it very easy to navigate as once you have chosen what it is you want to look at it stays on the same page and scrolls down on its own, but if the user wants to get back to the homepage they then click the home simple on the blocks on the side of the website, I find this very effective and helps keep the audience interested. The user can also click the blocks to choose what page they want to go onto to view things, and because of this the viewer doesn’t have to press the backspace button as it is all on one page.


The Design of this website is very unique but I feel it is also very effective as it is all based around one theme and has stuck to the theme throughout the whole design of the website. I like the way that the website is all on one page as it is much quicker and easier to navigate the way around, but the only thing is that before you enter the website you have to wait for it to load up due to all the content being on one page. But I find that once it has all loaded it is a very effective design, as it helps keep the user entertained and helps the user want to continue looking through.


This website is very influential as I feel it is a very design and structure around it which could help me in designing my website as I feel that this website is very easy to navigate around and also very interesting to browse through as it a continuous page but in different sections which helps make it much more interesting. 

DougHarrisDesign …

DougHarrisDesign …


The Navigation on this website is very interesting as the page has the search bars towards the left hand side of the page where they stay when scrolling down the page so the viewer can still search for something else when half way down the page. The website has the logo in the top left of the page where if clicked will take the viewer straight back to the home page instead of continuously pressing back space, I find this very helpful as it helps the audience navigate there way round much easier.


The Design of this website is very basic and simple as it doesn’t really have much information on it, making it much simpler. I like the way the designer has designed the page though, as I feel it is very simple but still manages to catch the audience’s attention, I feel this is mainly because of the large images of their work which are easily available to scroll through. I think that this design is effective as it can help the audience look through the work without leaving the page so they can look at something else straight after looking through some images. I like the way that the search bars are on the side of the page instead of along the top as it makes it look much different to other websites, and makes it look unique, but I also like the way it stays in the same place so the viewer doesn’t have to keep scrolling to the top of the page to search for things.


This website is very influential as I feel that the way it is designed to a look different is very effective as it makes it stand out much more, I feel using a design similar to this would help me in creating a useful and engaging site for my work.