Based on the peer review , we had change all the design to make audience easy to access this website , which only have 4 main button on the navigation bar .

and for other content  i show it only in the main homepage .

Below is how this website goes with multiple screen .

In This week i work with the website body part and footer part to all the pages i have .


How to create a image that when i click inside it will link to another page .

First , create a <div class=container >

<a href="#" <img src="*"/></a>
(# put in the link you want to link to )
(*img you want to browse , make sure the images inside the images folder)

*For additional knowledge , how if  i did a responsive website i want the picture to be full screen ?

In bookstrap it has a function to make your photo to be flexible in all of the devices .

<img src="*" class=col-xs-12 col-sm-12 col-md-12 col-lg-12>

add col-xs-12 col-sm-12 col-md-12 col-lg-12 class to your img . What does this mean ?

col-columm
xs mean small devices md -tablet lg -desktop
in bookstrap, their separate the screen size in 12 columm so which mean 12 is full screen size.

if you did not want to create a full screen websize , you just need to add in the width and heigh of the img .

<img src="*" width="200" height="200">


For foother part , i create a form / question form to let the audience easy contact and keep in touch with XPM Welfare society .

Starting on create index.html (homepage)

For the upper part is link to our css file, which show on the top , right besde source code , that the files i link to .

Header part ,

i open a nav and open a <li class="current"> which this css is same function with cursor over the title

<li class="menu"> is the normal navigation style

rmb to close all your <li> with </li>

Learning on the basic layout coding and development on Dreamweaver .

Below is the basic progress on how to used bookstrap to create your own design (my own opinion and progress):

1) First , you need to download the bookstrap from internet or get it from your teacher .

2)Open your own folder to create your own website , which the arrangement , naming and the location is very important , which your website will direct link to your html file .(Do not move your folder simply when you star to create your own web ! If not you will need to relink again to that folder , so to make it simply make sure your folder put it where you want to be . )

3) Make sure 4 file that in your folder  and copy from bookstrap file to your own folder (images , css, js , font )
>images (the images you want to put on your website)
>css (the css is the style of your website )
>font (the font you want to be used on your website)
>js (i am no sure about this )

4)Start create a index html by open html in your DW.

5)Link your folder that contain css, images , js and font.

6)Link your css file and js file by link or typing code .

7) Rename your Title (Which show on the bar you open a website)

8)Crete header , body and footer based on your design .

-The end-

Peer review section to modify our group Final Visual Design on mobile and desktop .

Which comment given by Group 2 other group members.

Here is our Final Visual Design for non-profit website XPM Welfare Malaysia .

for this website we do it as a Responsive website instead of a fixed container .

What different with Responsive Website is Responsive website provide an optimal viewing and interaction experience.Which compare with other Responsive Website is more easy to read and navigation with minimum of resizing , oanning and scrolling across a wide range of devides, for example desktop computer monitors to mobile phones.

On the navigation bar , we have 2 row of navigation bar which navigation bar on top is more important content and second row of navigation is sub content .We highlight the donate bar because this website is a charity website , which this button can catch audience attention on helping other who need help and more easy to access.

For the footer part we have consistent footer which fill in with the contact info.

Here are the visual mock up for our redesign website.

Week 08- Submission Proprosal and Final Visual Design 

Design navigation bar based on the pages we have .We are doing a main navigation bar for the important content. Sub-navigation bar under the main navigation bar for the secondary content.


Modify and double check on the final visual design , make sure every page align nicely and compile it and submit .

Finalize all the design and create visual design by Adobe Illustration.

Come out with a clear wire frame and done final visual based on the final wireframe design .