Digital Media 1092701050: Personal Website (Assignment 2)

Hello and welcome to my blog! :)

This time, I'll be explaining on how to create a website.

For our second assignment, every student is assigned to create their own personal website. It should include their background, interest, hobbies, favourite links and others.

Below are the steps taken to complete the assigned task:

Step 1: Create a new html file on Adobe Dreamweaver. Save it as index.html for the first page a.k.a the home page. I then add tables for the header with 2 rows and 5 columns. After that, I merged the several of the cells to get the design I wanted for the header.

Step 2: Insert image in the cell. here, I chose the MMU logo. Note that all images used must me saved on the same file so that I would appear properly on the website and organized.

Step 3: Insert text to the proper columns. I then adjust the size, font, and also the background colour to make it more attractive. I also adjusted the width and padding of the table.

Step 4: I inserted roll-over image to make the website a little more interactive. The images was made using Adobe Photoshop. Notice that I didn't put any background image. This is because I would like the design of my website to be simple, not crowded with heavy images, and a lot of white space. It looks more organized and classy.

Step 5: Create a new html file for the new page. Copied the header/banner from the first one. I then insert tables and adjusted the size. After that, insert picture and text on introduction and about myself. Again, I changed the font type, size and colour according to my taste and also the colour of the background. I adjusted the picture so that it looks more proper and nice.

Step 6: Again, copy the header/banner from the previous pages so that it is themed and synchronised. I chose to insert image placeholder where I can put my image on the proper placing, resized it. Then, I insert the image i wanted which is a mind map of my interest and hobbies. The mind map was made using Adobe Photoshop, consisting of logos, images and texts.

Step 7: I chose to do my contact page first before the links as it is easier. One more time, I insert tables for the contact details. I changed the widths, fonts, size and colour. I also added a chatbox which can be found here. Of course, I adjusted its width to better suit the theme.

Step 8: Assign hyperlinks and adjust its colour so that it doesn't turn dark blue which would make it hard to read. I designed it to be underlined when roll-over.

Step 9: For the link's page, I decided to create a table and divide it into two catagories. I then add images of the respective links, it will function as buttons.

Step 10: Then I insert absolute links on the buttons to link the pages. Both the Facebook and Twitter buttons are directed to my accounts when clicked. In all the steps taken, I aligned every image, text and buttons to the centre.

Step 11: I then decide to change the home page roll-over image and replace it with a flash movie that I've made, I then save it in a .swf file. I choose the add 'media : swf' tool on the left and added my video in a table. The roll-over image was then placed on the 'About Me' page/

Step 11: Test the final website on the web browser to see if it functions properly, all links are working and images and texts are aligned.