Using Dreamweaver CS6 to create a website (jonnybark.co.uk)

Dreamweaver CS6 is a website design programme that allows both code and design to create a website page. From using Dreamweaver I’ve improved my knowledge of coding and css (cascading style sheets).

Screen Shot 2015-02-06 at 12.34.41\

For my first attempt I used only the code to design the page, creating a header, a menu bar, an image and a footer. It was rewarding to see the effects of the code, but the website design itself didn’t look how I intended. My ideal website has a menu bar on the left hand-side and a sideways scroller for my images moving from left to right. However, the first attempt was successful in teaching me basic code (<p> paragraph, <h1> heading, <font face=””> font, <a href=”#”> link, etc)

Screen Shot 2015-02-06 at 12.34.53

I then attempted to add a menu bar using the design features on dreamweaver, to make the website look a bit better. However, I felt it did the opposite, I felt like an unoriginal addition that made it look a bit old-fashioned.

My research of websites has been based on my favourite photography websites. Alec Soth’s, Mishka Henner’s and Adam Bloomberg and Oliver Chanerin’s. All of their websites are white with black text; minimal colours and minimal distracts. Their websites are simple to operate with compressed information.

I feel like these websites represent what I want and they represent me well. It is important it have a neat, professional looking website. All the websites have white backgrounds which don’t distract and have clear black text. Having a side navigation slide function looks creative to have on a website, and again, being creative myself, I wish to have this function. Furthermore, it gives people a sequence that they have navigate through. My photograph is sequential, I tell stories through sequences, so having this narrative gives my content more meaning, more of a professional look and a creative vision.

Screen Shot 2015-02-06 at 13.19.00

http://alecsoth.com/photography/

Screen Shot 2015-02-06 at 13.19.25

http://mishkahenner.com/

Screen Shot 2015-02-06 at 13.19.50

http://www.choppedliver.info/

I hope to incorporate aspects of their websites in my design

Screen Shot 2015-02-06 at 12.34.56

Next I attempted to add the sidebar that I wanted and mould the design around that. I incorporated a twitter widget from settings on twitter. I was also able to use css to design the sidebar itself. I created paddings, colours, positions, margins and links with CSS. It made the website look more original and work a lot better. I learnt CSS from http://www.w3schools.com/css/, code academy (http://www.codecademy.com/) and a couple of youtube videos.

Screen Shot 2015-02-06 at 13.29.13

After that, I attempted to make the navigation of the scrolling images. It took me ages to figure out how to do it. It was a process of trial and error using div tags. Eventually I was able to create a container that was 7000px wide, and thus creating a place to insert images to side across. The reason why the images don’t appear on the screen shots is because I had issues with locating the files on the documents. It is important to have all the files for your website in one folder, this way they are easy to locate, and will show a preview online. However, I didn’t understand this at the time.

For the scrolling to work properly, the sidebar had to be fixed. Within the CSS for the sidebar, I added…

“.siderbar-cont {height: 100%; position: fixed; left: 0px; background: FFF; }
.sidebar {
height: 500px;
Width: 150px;
position: fixed;
top: 0%;
background: FFF;”

This allowed the sidebar to be fixed while the rest of the page moved. This CSS made my website work a lot better.

Screen Shot 2015-02-06 at 13.37.44 Screen Shot 2015-02-06 at 13.37.52

I played around with the design even more and located the images. I was then able to upload the files using the inbuilt FTP within dreamweaver. It is important to upload all the files used in designing the website onto the domain server. After doing this is was then able to work on it even more and tweak the design and add pages.

Screen Shot 2015-02-11 at 16.29.04Screen Shot 2015-02-11 at 16.32.13

I was happy with the design, but I wanted to add a footer that had copyright information, and a link to my facebook, twitter and youtube social media sites. I edited the CSS to make the text centred, fixed and make sure it fits the whole document. I also wanted to add opacity on the sidebar, so that when you scroll, you can still see images that you’ve scrolled past. After making these changes, I was extremely happy with the results.

Once I had finished one page, I decided to make the whole website. This was a process that involved other dreamweaver documents for each page. I copied across the code for the side bar, because that would stay the same. On the about and contact pages, I needed to change the dimensions of the page to stop the scrolling. I make the website 1000px wide, and create two div boxes, one for the text on the left and the other for the image on the right.

Screen Shot 2015-02-21 at 22.51.11 Screen Shot 2015-02-21 at 22.51.20

I then turned my attention to the work section of the website. It was the same design as my index page, but I added more options to the sidebar with the names of my projects. Instead of adding them to look the same as the other options (<li>), I added them as <p> code, so that they would be smaller, and create an interesting horizontal stripe effect when you scroll. There was a lot of links (<a href=””) that need to be made, but I added them, and they work.

Screen Shot 2015-02-21 at 22.55.43 Screen Shot 2015-02-21 at 22.52.30

Hear are examples of some of my other work pages…

Screen Shot 2015-02-21 at 22.53.00 Screen Shot 2015-02-21 at 22.52.50 Screen Shot 2015-02-21 at 22.52.39

I created a css style sheet for the mobile website, the sidebar was too big, it got in the way of the images. I there for added a link to the document so that it would be used when the pixels go up 800..

<link href=”cssmobile.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-width:800px)” />

photoScreen Shot 2015-02-21 at 22.56.59

Once all the pages are created, it is important to upload them to the server. This was done using FTP inside of dreamweaver. You have to ensure that all the files that you are using for the website, ie the css sheets, the images and the pages are uploaded. You connect dreamweaver to the server by typing in the url, and the admin password. Furthermore, it is important that there are no capital letters or spaces in any of your documents, because the server might not recognise them as files. Here is an example of my FTP when everything was uploaded…

Screen Shot 2015-02-21 at 23.07.47

Once the website was uploaded it was a great feeling. This website was a long process of trial and error, but after making the mistakes and sticking at it, I feel as if I’m now very confident with html and css. Furthermore, i’ve created a website that I’m incredibly proud of.

http://jonnybark.co.uk/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s