Web Design Process

Sv Builder

I used Sv Builder to create my web portfolio, this is the main menu that appears when you first click the application. First thing is to gather all the files which will appear on your web portfolio, Then clicking "Browse" you will be able to select all the files you wish to import. At the bottom of the page you can also change the size of your image if you want to "crop to fit" and also change the size in which the file will save as.

Once you have chosen all the files you wish to appear in your portfolio you can then customise how it will look in the browser. Here you can choose the size of the images and also the colour. Thumbnail size images appear on the left side of the page you can also change the columns and rows depending how many pieces of work you have, a preview is shown on the right side of the image above.

Once your happy with how your Sv Builder portfolio looks you then want to publish and save your file. When saving your file I found it much easier to save it into the folder which you want to put the portfolio on. ( I had a folder saved as "Portfolio page" I found that saving the file in here made it easier when the file was put into Dreamweaver so it could them be inserted on the selected page.

Process in web design

If you have made changes to your web page its important that you check what your page is going to look like. This menu above is in file and at the bottom it says "preview in browser' when this is clicked your html document will open in a browser of your choice to show you what it would look like, I found this very useful when making changes to my site so I could ensure that it worked.

This is very important as when creating you webpage you must create a root folder where all your main html documents are, this is so when your working on your webpage nothing goes missing and all your files can be found.

This part of the tab is found at the bottom of dreamweaver when you have a html and screen document open, here is where your spliced image will be linked to its chosen file. In some cases you can write into where it says link if you wanted to link the spliced part of the image to a webpage for example ( www.twitter.com ).

Once all the html files were found, I then could place my Sv Builder portfolio into the space which I had previously spliced. Going to insert and then clicking the name of my portfolio would place the file into the space as a flash image. Although the portfolio image isn't shown in Dreamweaver it was working. (An F for flash was in the box which meant the file placed correctly)

Here is where I imported my Sv Builder portfolio on to the selected page, firstly I had to open up the correct files so I could easily see where all my pages in html form were.

This is how my portfolio came out when I had placed all my images into sv builder, thumbnail size images of my work on the left and the enlarged image of the thumbnail on the right.

This is my home page ready and spliced, saved for web&devices in a html document.

This is my contact page ready and spliced, saved for web&devices in a html document.

This is my about page ready and spliced, saved for web&devices in a html document.

During my development I decided to put a ":-)" face in the center of the page, as this was an object i had to go to transform and rotate the object into the right position, this is shown above.

This is the tools i used in Illustrator to create my "CreativeSince92" slogan. Here I can choose the font I want and also the style in which its in. I can also select different parts of the word that I wish to increase the point size off, I can also change the leading, kerning etc of the word.

This is where the weight tool can be found, this increases the thickness of a line drawn by either the pen tool of the line tool. 

Taking an image into Photoshop, using the splice tool allows me to separate each given area so it makes it into an object which can later be edited.

Once the image chosen has been spliced, I saved the image for web and devices which then comes up with this screen, here you can choose the quality of the image which also effects to load time and speeds of the image when the web page is life, there is also an option to save the image as a gif, jpeg etc.

When you are happy with your file and are ready to save to get the html documents and images this screen will appear, simply give the file its name and then choose the save location of the file, its best to save this into a document which has already been created, this makes things easier and keeps everything in one place.

Once you have the file saved you can then open each individual file, here is the HTML coding for the page which is viewed on the left. Changes can be made through html coding but is much more complicated.

To change an image which is on the current file there is a few things which need to be taken into consideration. When the image has been clicked the properties tab at the bottom will come up with the width and height of the file in pixels, this is very important as this is the exact size of the image that  you have chosen. Having the selected area chosen insert a file which you have created it will then place over the image which you had selected.

When you save the image over the previous image the image tag tab will appear here you can choose alternate text which means text will appear in a small tab when the selected tab is highlighted over.

This is what the file should now look like with your chosen image which replaced the previous, its important the you remember the hight and width of the file as a single pixel out can made the page uneven just as I have done above.