When beginning the design process for this website I was slightly unsure on what the best platform would be to build it with. I had already had skills instruction on dreamweaver although I didnt feel very confident about using the software. I decided to bite the bullet anyway and build my website using adobe dreamweaver.
Before making any mockups I did do a bit of research into web design, I started by looking at website templates.
A lot of the tutorials I had looked at on youtube, all talked about importing an already made template taken from the internet and importing that into dreamweaver. However I didnt want to do this as I felt it would be cheating therefore I gave it at a go at creating my own template. It allows you to have much more freedom with your website as you can design it down to the very last detail.
Before I began making the website, I decided to do a few mockups in photoshop to help with the layout of the page and what design I wanted to go for. By doing design beforehand this would hopefully save me time while I was designing because I would already have a basic plan to work with instead of trying to design it as I was building it.
This is my first mock up of my home page – I decided to go for a natural colour scheme of light green and brown, I thought that by having a natural theme it would be a good design for the background as it was simple but still kept it interesting. As you can see it is a very basic home page, I centred the text and images to keep it neat and tidy. Both images are of myself working on projects during my time at university.
The mock ups were intended as a rough plan so that I knew the layout of the page, which images were being placed on and where they were being postioned and where the text was being placed. Although while I was producing these mock ups of my web design, I still wasnt happy with the design and decided to start again and experiment with a new mock up.
This was the final mock up I did, I was much happier with this design because it incorporated my blog design by using the same banner as displayed on my blog I felt it would begin to create an identity for myself. I thought the colour scheme and compostion of the page in comparision to the first design would work better so I stuck with and carried on. I did find designing the website rather frustrating just because I wasnt happy with the design and I didnt wanna pursue to the building stage untill I knew that I was producing something, I knew I had put everything into . However Once I was happy with the mock up and I knew the basic layout for each page, It was time to begin the work on dreamweaver.
I called the website AP Productions mainly because its the initials of my name and its a website built purposely to show the productions I have been apart of and made during my time at university in this first year.
Building the website.
Firstly I opened up dreamweaver and clicked on the HTML page. Once the page had opened up I needed to create a new site. I called my site AP Productions and then made a folder in my documents called Dreamweaver hand in 26th this became my root folder. All the content in this folder would be put onto the pages in the website, to keep everything organised I created sub folders called Images, Audio, Videos, Templates and kept all the relevant content in each one so I could access it much easier then having to go into my document folders each time. I placed the content in the document folder which opened up automaticly in the root folder. Clever Dreamweaver.
Dreamweaver content page + New Site
I decided to start by making a template which I would apply to each page to keep the consisten design the same, By making a template first hand it saves time and allows you to have the same design on each page by adding the template to the page instead of having to keep making each page from stratch.
My template consisted of my banner, navigation bar, table (set out that each page would have the same layout) and colour scheme. I found by applying the template to each page half the work had already been done and for me it was only a case of applying the images specificly for that page and the text.
While I was working in photoshop, I was experimenting with the tools and figured that I could use the eyedrop tool to highligh over the background colour of the banner and use it as my background colour, keeping the page under the same colour scheme. Clever times.
The table was very tricky to control and I felt very frustrated with them because you couldnt aligh the images very easily, however it got better with practice. I learnt how to align the text and I began to understand how the tables worked the more I worked with them. Using the tables made the layout of the page look much neater and in line and although the tables were tricky to work with, they are worth the pain because the page looks more tidy and consistent.
For the font design, I decided to keep the brown colour because it worked well on the page, I experimented with the heading tools which all offered different sizes. I didnt experiment with the fonts too much because I didnt know too much about the css fonts so I kept with a simple font and colour. I am still unsure on the size of the font, Im not sure if it will appear too big but I wasnt sure if it was better to have the size bigger then smaller.
Once the template was done, every time I opened a new page I could apply the template to it at the same time.
All the pages had a consistent design and feel by applying the key conventions e.g banner, colour scheme, table layout, navigation bar helped to portray the design across the website.
Applying links to each page was difficult as first because I couldnt remember how to do it, I had been taught in the dreamweaver skills workshops but once I let my mind refresh back It was simple to do.
Firstly I highlighted the text and at the bottom in the properties box
in the link box it has a compass looking icon that you click and it allows you to point to the page in the root folder and it links it for you. I did this for every page and previewed it in explorer to check the links worked on each page and that the website functioned properly. I had a few minor complications while doing it with the links not working constantly through the website, however I kept with it and worked out what the problem was and solved it.
Embedding content was my next issue, I needed to embed videos and audio which after reading my dreamweaver book and looking at tutorials online it was simple to do.
When I was certain that I was using dreamweaver to build the website, I borrowed a dreamweaver manual off a friend. I like to research into programs and to be able to teach myself how to do things on the software.
I found these tutorials very easy to follow and help me to learn how to use the software. A lot of the learning came from practice and just giving it ago and working through it. Each problem could be resolved by just working and getting a feel for the design software. Once you had learnt the foundations of the program and the tools you could use it was much easier. Embedding videos was literally a case of copying the embedding the code for the website, in my case either youtube or vimeo and pasting it into either the spilt or code section of the website.
Having finshed the website and now I guess I must reflect back on this creative process. I enjoyed making the website on dreamweaver and I feel a huge sense of acomplishement for having made an actual website from pretty much nothing. I dont bejudge anyone who used an online web tool to make their website. I am just glad I choose to do it with dreamweaver although it was much harder and did take a lot more time, then if I would have done it on wix or moonfruit. However I have learnt a lot from using dreamweaver and I hope to be using it again in the near future and experiment with making other websites.
I wouldnt say I am completely happy with my final outcome, there are a few things I would have like to of made look more appealing but unfortanely my skills in using this software just let me down slightly as I felt I was at a disadvantage because I often didnt know what I could achieve in dreamweaver. However I am extremely proud of myself for not backing out and going for the easier route, It was hard going but it was worth it. I hope you can see how much effort I have put into this website although it may not appear to be much, sweat and tears went into the making of this website. Enjoy it 🙂