Experimenting with slicing and Applying it in Dreamweaver

Screen Shot 2015-04-20 at 14.46.33

To practice with coding and making a website operational from a photoshop file, you would need to know how to use the slicing tool. The slicing tool allows the user to slice parts of a page in order to make that sliced object to be able to send the user to the page that its intended it for. So what i have done here is i have sliced 3 links which I’m hoping the link will send me to each of the pages that i would want it to go to.

Screen Shot 2015-04-20 at 14.53.46

Then i pretty much clicked on the slice options for each one and i just quickly changed the names of each of the slices to a more recognised and reasonable names to make it easier for me to create the site.

Screen Shot 2015-04-20 at 15.05.00

After i sorted out all of the sliced parts of the site i want to create, i then clicked save for web and saved it in a .gif file and the reason for this is because .gif is a good file format for keeping the quality high as well as keeping the file size low so that when it is published on the internet, when people click the site, the website would load up quite fast because of the low file size of the specific page.

Screen Shot 2015-04-20 at 15.05.21

Here is a quick preview of what the root folder would look like and although i didn’t name all the little sections of the site, laying the folder out like this would be perfect as its more controllable and easy to go through. plus when you save a photoshop made file into a .gif it will save all the layers you used and you will see every layer in dreamweaver.

Screen Shot 2015-04-20 at 15.05.58

Here is just a preview of me seeing whats it like for the site to be on safari and as you can the site is on centred and doesn’t look that nice.

Screen Shot 2015-04-20 at 15.13.16

Here is me just saving the site and sorting out the formats of the site so i can edit it in the future.Screen Shot 2015-04-20 at 15.16.28

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