21-8-2011 - Flow chart
My part is to do History website and how st.paul hill malacca exist.
25-8-2011 - first design interface
This is basic interface of my webpage, there will be more update soon. as for now this is the design i want it to be.. more or less about history and old pictures of st.paul hill. at the side bar will locate about quick link and other tourism link.
27-8-2011 - the real design background
The interface i draw seems too random and doesnt contain any creativity, therefore i decided use photoshop to create a new background using transparent pages, with
Go yahoo website and search for sky photo as a background.
the reason choosing sky is it look more calm and care free.
Click file>place pictures>to put in another layer of pictures. I had selected old scroll of paper.
This because older days they use animal skin to work as paper.
on the right unhide the sky photo then, use eraser tool on the left to erase the white border on the scroll
slowly erase it up to the size and shape im satiesfied.
now place other pictures that need to be put in this layout as well
After place the pictures, erase the picture in a peaceable size into the scroll.
There will be 4 photos edited, which is St.Paul Church, The Stadthuys, Ship, and A'Famosa.
Here, place edited picture on the side of the scroll so that it doesnt block the contents.
the content in the center of scroll will be historical stories that then to be place in dreamweaver.
Lastly save the files as PSD and JPEG for backup and save a copy of
PNG files to be place in dreamweaver.
PNG files that place in dreamweaver will be nicely place as edited. if use
JPEG there will be a white border in every picture.
Items that need to create this background....
1)sky phto
2)scroll photo
3)map of malaysia photo
4)a'famosa building photo
5)the stadthuys building photo
6)big ship photo
7)st.paul building photo
Here>>>>>>>>the OUTCOME of my background pictures.
after created the design of background using photoshop, i decided to create button will be place at the top to click. this will not interupt the content of my history stories.
that will make reading easier as they read about the history and facts, which is boring.
2/9/2011 - button that will be use in my history website
There will be 6buttons which is HOME, HISTORY, ACCOMMODATIONS, DELICACIES, ACTIVITES, GALLERY. Each of this button will link to each individual pages.
All this 6 buttons were edited by photoshop to remove the white border at the side of picture, so that picture only uploaded and will only show it own shape. Pictures saved as PNG file.
3-9-2011 The early imagination pictures of my web
The background is saved as Jpeg files, the font size of the web will be 12 and the title is 18, using Times New Roman. Pictures that edited using photoshop to be use as button saved as Png. files.
The content is mainly introduce about St.Paul Hill Malacca.
4-9-2011- Creating and finalize the last piece of work using dreamweaver
The background created was places as png files, where a scroll of old map is in the centre of pages. my main point is i want those historical stories place at the centre of map. many break and spaces typed into the coding to make amendment of html.
actually it was quite ugly when i placed the pictures of map as background. but it was my style to have clickable pages instead of doing my web pages look like square square box like usual blog or web.
First thing to do is, click properties then click browse..
from browse then search in the folder to place background picture.
After place background picture need place in table for buttons and tabs.
Table were created to stuff in 3tabs and 6icons as a button.
here, what i updated is 6buttons places in a row, where..
1) Home
2)History
3)Accommodations
4)Delicacies
5)Activities
6)Gallery
where each of this picture will link to each of individual html page of my group mate.
these button where place on top of the map instead of side because of the space of allignment were not fit after placed information about the historical stories.
additional 3 tab of words added into my history pages. where reader click into history page, will get to click into 3different pages. Click to place the tab's background color so that it is noticeable.
instead of creating too many story, i only briefly explain some and placed a map of malacca. actually suppose map of malacca should be in activities page, but i forgot assign this to my group mate.
1) History of st.Paul hill
2)History of The stadthuys
3) Map of Malacca, where can guide you into important places.
the first 2tab's pages i used the background i edited using photoshop >.<"" where a scroll of old map along with 4 historical building pictures.
the 3rd tab, map of malacca pages i used "sky" background, because it is clearer to show the map and word.
These 3tab were places in a row of box with orange color. the 6buttons of pictures were places in a row of box with invisible color.
the 3rd tab, map of malacca pages i used "sky" background, because it is clearer to show the map and word.
These 3tab were places in a row of box with orange color. the 6buttons of pictures were places in a row of box with invisible color.
Content were placed into this part. Alignment of text,
text size and text color can be adjusted from below icons.
Historical stories that placed into here were taken from online references.
*update references at below*
To link the tab, need click on the tab's box and then click the link icon at below..
a box will pop up, click the other html files that like to be link to.
[ Example: this History of Malacca's tab will be link to History Page.html ]
Click on Button's box and click the link icon below to link to another html page.
[ Example: the home picture will link to Hoo.html (HOME PAGE) of this project ]
After link the home button to Hoo.html (HOME PAGE),
if clicked it will turn to this page.
Lastly to save my work, after link all the tabs, buttons then i need save it as html files.
4-9-2011Reference of my content.
The first part of content were taken where from line 1 to line 16 about history of Malacca.
This part were placed into the first tab of history about Malacca.
The history story about A'Famosa was taken from here, line 1 to 15.
the content were placed in history's tab 2 about A'Famosa ,
while The Stadthuy's storied were taken from first link line 17-20.
Pictures of entire website:
1) pictures from yahoo.com gallery and photobucket.com
*link not provided because it is too long for each one pictures.*
*link not provided because it is too long for each one pictures.*
2) all the pictures of jpeg are edited used photoshop and saved as png.files and psd files.
There will be no flash video use in history tab because there is already a gallery tab included video, pictures that can be glance through and play.
5-9-2011- compile HTML file.
All pictures were places in one folder, no flash were used because there is gallery album about st.paul and malacca building. i dont want create repeating thing in my pages, it will create boring in it.
The text were 18pt, on first pages of history of st.paul hill the text were 24pt to make the allignment fit into whole scroll of map. where history of the stadthuys and map of malacca the text remain 18pt.
Pictures were static edited into background, and mainly more on wording to top up reader knowledge historical stories.
total, of 3tab of historic in HISTORY pages, and 6buttons of pictures to link whole website and other pages of my group members. i forgot place the reference and link the storied back to original malacca website.
Overall it remain simplicity and clean as my main purpose. the whole pages is clear blue sky so that it show peace and clam when reading those boring stories.
All link and buttons checked, it does link and all video tested.. it does play. whole web contains 8pages and linked to each others. The progress of places buttons and missing pictures and words from different folders and to compile everything, took me more than 8hours. Added to redo all pictures of every pages to place on right place included mine and my groupmates.
Webpages were compile into one folder, all images, script and video put into one folder and zipped with 258mb submitted on 4-9-2011 8.20pm at cyberjaya.
*********************************End of Project***********************************
No use of tools, not much content, no references. This is week 12. No longer week 8. Need more for progress at this stage.
ReplyDelete