Dreamweaver- Assignment 2

For this assignment, what we have to do is creating a website using dreamweaver. The website is mainly about individual website which can will used as a resume for a job seeking reference.

Continued from the first dreamweaver tutorial, I will proceed them by creating new websites. In this website, I hope that my target audience can get my complete info at once. Hence, I include few webpages like homepage (welcoming page), biography, resume and contact. There are total 5 links I made. The links will connect to the respective webpages and my blogsite as well. 

STEPS

Firstly, I has made some buttons for the links by using photoshop. I saved them in png form in order to get a transparent background. 

   

Next, I made my banner and welcome pic as well by using photoshop.

Moving to dreamweaver now. After saving the homepage as index.html, I import all the buttons and images needed. I made my homepage as simple as possible where I only put the banner and 'welcome' image plus links. I plan to use only text for the links that connected to other pages to keep my homepage simple.

homepage

But for the next webpages, I will use the buttons I made instead of the words. Same way in linking webpages to the texts, I link all the buttons to the respective webpages and links. Except for the homepage, I have used the same layout for the rest webpages beyond in order to make my website looks more uniform. 

layout chosen

The next steps continued by typing all the infos needed in respective webpages. In resume page, I had created    

table for education section to insert all my education info in a simplified and complete form. I made some formats on the text and table design by making setting in the properties window located at the bottom. 

resume page 

For the contact page, I link my email address by inserting email link. The audiences can send email to me just by clicking on it by this way.

email link

Last but not least, I will set the background of my website by going modify>page properties. I chose to use an image as my background and hence i go for browsing tab under background image option. I use a simple background to match with my layout design.

page properties

background image

and that's how my website done after I have saved all of them in html respectively.

p/s: I learnt to emphasize white space concept during lecture. So, I decide to simplify my website design by not using too much images and colours. since I used a grey background for my banner, I apply the website design mostly in grey colour but in a diversified form.

DREAMWEAVER tutorial 1

as we completed our first assignment which is the photoshop assignment, we are now proceeding to the 2nd adobe software--- dreamweaver that we going to apply it too for our final assignment.

for the first tutorial, we had learned how to create a website. what we had done were creating few webpages which including homepage, blog, hobby, background and contact.

Here are the steps in approaching dreamweaver during my first tutorial:

1. Open a folder in my pc and named it as "home". then, import any files or images that will be used in the website into it. For our 1st tutorial, we will use our e-wallpaper. hence, I put my e-wallpaper into the folder.
2. Start the dreamweaver and go to site>new site. After putting the name and import the "home" folder, the folder will appear under the files window at the right hand side. 
3. Next, goes to file>new to create a new webpage. We will import e-wallpaper into it by dragging it from the files window. Then, make the page as our  homepage by save it in index.html.
4. same methods goes for other webpages. Type or insert any relevant info to respective webpages and save them at html form respectively as well.
5.  Now, for the links part. In the homepage, we will insert a table and key in the respective titles of the webpages. Link the text (title) then by going to insert>hyperlink and link them to their own html file except for the blog. the blog should be link to the blog website. 



link

6. Saving all the changes and try it by preview in browser.

*the index.html should be in small letter (same for other .html)
  the image import can be in any form. (either jpeg or psd file)
 make preview by using firefox browser.

throughout this tutorial, I had learnt how to insert table, images and links for my websites.

And hence, I will proceed them to my second assignment.