Unit 9: Project PlanningAs I have had an extra week to finish the project, I have finally completed the testing and already contacted my client; where we also have had our final consultation of the website. My client is pleased with the outcome of the website, where she thought it looked better than she imagined it to be in the designs.
After the final consultation with my client of the website; I have now uploaded it onto the server, ready for visitors to use now; therefore Dong Bang Shin Ki Online is now complete and finished.
Unit 9: Project PlanningI have finished my client's website on 21st March 2007; where according to the Gantt Chart, I should have already finished everything including the testing and final consultation with the client before I upload it onto the server. However because I was busy with other projects of other subjects, therefore I could only start with the testing today. Therefore, I have requested an extra week with the project, where I have already contacted my client about this.
Unit 14: Developing and creating websitesOriginally, in my Gantt Chart, it is said that I will be testing each features for all of the web pages I have done for my client's website. However, my teacher has given me an outline to what I should be testing on the website, which is different with what I planned on testing originally.
The areas I will need to test on for each of the web pages are:
I also had to create a test plan; where I had to test on the features I used on my client's website such as rollover buttons, video clip, music, image effects.
Unit 9: Project Planning
As I stated in all of the past blogs that the music will be created last after I have created all the pages of my client's website. I am already behind schedule because the "Discography & Multimedia" page took the longest to create, also because of the previous adjustment to the website in the beginning of the project. I should already have finished the project by now and tested it, evaluated with my client as my project deadline on the inital Gantt chart was 20/03/07. As I still need to create the music feature, the schedule has been added an extra week or so; where I have already contacted my client about this issue.
Originally, I stated in blog "Tuesday, November 28, 2006", I have found a suitable music player to be inserted into the website, where they have a choice of four different players, for which I chose to use the Multi Track Music Player:
http://www.premiumbeat.com/flash_resources/free_flash_music_player
The instructions given for this music player looked fairly straightforward; however when I attempted to create this into my client's website, it was too complicated to do as I had to upload the mp3 files for it to be able to retrieve a URL to place into the HTML, also because there were so many different tags I had to use in order for it to work, that it became too complicated and confusing.
Therefore due to this, I have decided to just insert background music, where I have already contacted my client about this issue and she has allowed me to use background music on the website, instead of the music player; even though intentionally she wanted a music player just like the one I found on premiumbeat.com. As I can only have one track playing on each page, my client has chosen "Miss You Ballad Version" as the background music that will play throughout the website.
I found a suitable tutorial for inserting background music into a web page; this is from: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15345
This tutorial is very straightforward and easy to follow, where in order to insert background music into the web page, I would need to create the music file in Macromedia Flash. I had to import my selected soundtrack into the flash document. Once, I saved the flash document, I had to import this flash document into Macromedia Dreamweaver, where I had to change the background of the flash document for it to match the background on the webpage. This process was done to all of the web pages excluding the "Discography & Multimedia" page.
Unit 9: Project Planning
I have received comments about the "Profiles" page and "Discography & Multimedia", where she says there are no need for any improvements for the pages. Therefore I will continue with finishing the website after her confirmation of no improvements are needed. On the Gantt Chart, it is scheduled to create the Fan-Mail page on the 15/03/07; however because I had to manage other projects of other subjects as well as the Multimedia unit, the process of creating the website had to be slightly delayed. However, today I will start and finish the Fan-Mail page.
Unit 14: Developing and creating websites
I had to insert the template into the web page; where I had to insert all of the navigation buttons via using the "Insert Rollover Image" option. I didn't follow any tutorials to create these rollover buttons; as I found this option whilst I was experimenting the program before I started to create the website. The rollover buttons were the navigation buttons that I created in Adobe Photoshop CS2 whilst I was creating all my graphics.
When using the "Rollover Image" option, I had to select the first set of the button (Original image) and then I had to select the second set of the button (Rollover image); the original image was the buttons that had the grey font colour and the rollover image was the button that had the blue font colour. I had to do this for all of the buttons where they were to be inserted into the first editable region of the template; however I had to make sure the "Fan-Mail" button had the navigation button that did not change colour, and just stayed with the blue font colour as this is part of the design; therefore when I had to do the rollover image option, the original image and the rollover image was the same as each other.
Below the navigation buttons, I had to insert the moving image of Dong Bang Shin Ki, which was provided by my client. As this page is for fan-mail, I have used html from "Response-O-Matic" website, where it has created a form for me to use on my client's website by filling in information into their database on "Response-O-Matic" website, where they will generate the JavaScript for me to insert it into the code window of Macromedia Dreamweaver.
Unit 9: Project Planning
As I have finished the "Profiles" and "Discography & Multimedia" page, I have contacted my client with previews of the pages, where she will be able to comment and give any improvements needed for the website.
According to the Gantt chart, it is said that I should be creating the Gallery page on 13/03/07, however because the "Discography & Multimedia" page took a long time to create due to the number of pop-up windows I had to create, place into the images and the fade in/fade out effects; it took longer than excepted. Therefore, today I will be creating the Gallery page; where I will need to make more adjustments to the Gantt Chart.
Unit 14: Developing and creating websites
Today, I will be creating the Gallery page; where I first inserted the template onto the blank web page; where I had to insert all of the navigation buttons via using the "Insert Rollover Image" option. I didn't follow any tutorials to create these rollover buttons; as I found this option whilst I was experimenting the program before I started to create the website. The rollover buttons were the navigation buttons that I created in Adobe Photoshop CS2 whilst I was creating all my graphics.
When using the "Rollover Image" option, I had to select the first set of the button (Original image) and then I had to select the second set of the button (Rollover image); the original image was the buttons that had the grey font colour and the rollover image was the button that had the blue font colour. I had to do this for all of the buttons where they were to be inserted into the first editable region of the template; however I had to make sure the "Gallery" button had the navigation button that did not change colour, and just stayed with the blue font colour as this is part of the design; therefore when I had to do the rollover image option, the original image and the rollover image was the same as each other.
Once all of the navigation buttons, I had to insert all of the 18 preview icons onto the Gallery webpage; where I had to the fade in/fade out effect on all of the preview icons using the html I found from: http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm
I had to insert the first set of html after the "head" tag:
Once I copied and pasted the html into the head tag; I had to insert the html which creates the fade in/fade out effect, where I had to insert this html into the "img" tags of each preview icon:
Once all the fade in/fade out effects were done to all of the preview icons; I had to place pop-up window options into each of the preview icons; where instead of having web-pages linked to the pop-up window, I will be using the original images of the preview icon as the pop-up window. Where under the "Open Browser Window" option, instead of using the URL of the webpage, I will using the URL of the original image of the preview icon. The process is exactly the same as the process of creating pop-up windows for the "Discography & Multimedia" page, which can be seen in 14/03/07 blog as they both are taken from the tutorial of: http://www.cbtcafe.com/dreamweaver/popup_image/index.html
There is no music present on the page, as I will need to finish all the web pages before I can insert the music onto the pages.
Unit 14: Developing and creating a website
I need to finish off the "Discography & Multimedia" page, as in the previous blog I have just inserted the navigation buttons and the images of singles/albums covers. In the design, I have said that under each of the CD covers, there was to be a pop-up window of information about the chosen CD i.e. tracklists. I have researched into how to create these pop-up windows; where I have found that I have to insert "Behaviors" into each of the image; where under each "Behavior" option, I had to select "Open Browser Windows". I also found that I had to create more web pages for the pop-up windows to be linked to. This meant I had to make all the web pages of the CD covers I had in the scroll box; where each of these web pages will feature tracklists of the CD and an image of the CD.
I learnt to create this pop-up windows technique from CBT Cafe: http://www.cbtcafe.com/dreamweaver/popup_image/index.html, where the steps in the tutorials are very straightforward. I had to select the image, where I was to select the "Open Browser Windows" Option under "Behaviors"; where I had to adjust the window to 500 x 500 pixels, with scrollbar; I also had to make sure it was linked to the correct URL of the web page for the image. This was done to all of the CD covers that was in the scroll box.
I had to insert the fade in/fade out effect on all the CD covers; where I have learnt this skill from http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm , where the effect is called Gradual Highlight Image Script.
In the tutorial, they have given me two sets of html, where the first html must be placed after the "head" tag; and the other html is to be placed inside each html codes of the CD covers.
This is the html that had to be placed after the "head" tag:
Once I copied and pasted the html into the head tag; I had to insert the html which creates the fade in/fade out effect, where I had to insert this html into the "img" tags of each CD covers:
Once all the fade in/fade effects have been inserted, I had to insert the video clips; by inserting Plugins. However, I found that I couldn't insert more than one music video as it wasn't avaliable in the option, also because I found the web page loaded very slowly; therefore I have already contacted my client about this issue and she is fine with it. She has chosen Dong Bang Shin Ki's latest music video: "Free Your Mind" as the video clip to be played on the web page.
This is the final outcome of the "Discography & Multimedia" page:
Unit 9: Project Planning
According to the Gantt Chart, I should be creating the Discography page today; where it is said that I will finish the page by tommorow (13/03/07), however I think it will take longer now because my client previously requested that she wants the multimedia section to be also in Discography page, therefore this means I need to insert more contents. I estimate that I will finish the new "Discography & Multimedia" page by 15/03/07.
Unit 14: Developing and creating a websiteI am now starting to create the "Discography & Multimedia" page, according to the designs. I inserted the template of the web page; where I had to insert all of the navigation buttons via using the "Insert Rollover Image" option. I didn't follow any tutorials to create these rollover buttons; as I found this option whilst I was experimenting the program before I started to create the website. The rollover buttons were the navigation buttons that I created in Adobe Photoshop CS2 whilst I was creating all my graphics.
When using the "Rollover Image" option, I had to select the first set of the button (Original image) and then I had to select the second set of the button (Rollover image); the original image was the buttons that had the grey font colour and the rollover image was the button that had the blue font colour. I had to do this for all of the buttons where they were to be inserted into the first editable region of the template; however I had to make sure the "Discography & Multimedia" button had the navigation button that did not change colour, and just stayed with the blue font colour as this is part of the design; therefore when I had to do the rollover image option, the original image and the rollover image was the same as each other.
The layout is similar to the "Background Information" page, where I had to insert a scroll box using the codes I found from: http://www.wowwebdesigns.com/wowbb/forum1/350.html
The codes I have inserted are: (1st code: is for the div in the body, 2nd code: is for the css in the head)
Instead of using text in the scroll box, I had to insert all of the singles and album covers into the scroll box; this is what it looks like so far:
