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:
Unit 9: Project Planning
On 07/03/07, I emailed my client previews of the Home page and the "Background Information" page; where today she has given me opinions of the page, she states that so far it looks very professional and looks better than the designs itself. She has stated that there is no changes needed to be done.
After completing the first two webpages, I will start to create the "Profiles" page; where the schedule of the "News & Notices" page, has now been replaced by the "Profiles" page as the "News & Notices" page was taken out due to client's request. The date to start creating the "Profiles" page is 09/03/07, which is the date I will be creating today; therefore I am on schedule of the project.
Unit 14: Developing and creating a websiteI have completed the "Profiles" page today, as it was very straightforward as I didn't have to input any html or JavaScript into. 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 "Profiles" button had just the navigation button that had 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.
I had to insert a table of 2 rows and 5 columns, where this was where I had to insert the profiles information of each member and the profile images that I created in Adobe Photoshop CS2. The profile images was placed in the top row, where there was profile information inserted below it; where each profile information corresponded with the correct profile image. There is no music at present on the page, as I will be creating the music feature once I finished all of the web pages.
This is a printscreen of the profile webpage I have created:
Unit 9: Project Planning
Previously, I contacted my client about the new designs for the new pages: "Profiles", "Discograhy & Multimedia" and "Fan-mail"; my client said she likes the designs and that it is fine for me to create the web pages according to the design. The creating of new web pages will be done once the "Background Information" page has been complete.
Unit 14: Developing and creating websites
Today I will start to create the background information page, where according to the Gantt Chart I am on track with my schedule.
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 "Background Information" 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.
According to the design of the "Background Information" page, there will be a scrollbar textbox featured on this page, therefore I researched into the type of html I will need to insert into the code window of Macromedia Dreamweaver. I found a website: http://www.wowwebdesigns.com/wowbb/forum1/350.html ; where they provide the codes I need to insert into the code window in order for my scrollbar textbox to be displayed on the web page.
The codes I have inserted are: (1st code: is for the div in the body, 2nd code: is for the css in the head)
In order to change the font and font size in the div box on the background information page, I had to use the html codes for font face and font size. I found that there was a problem in the div box, this was that when I typed the information I wanted into the div box code and wanted create a new paragraph, they wouldn't allow me to just press the enter button to create space, but I had to use the code "p" code.
In the print screen below, it shows the information I have typed into the div box and also the codes needed for the div box to work as well as the fonts I have chosen. The blue text in the codes window shows the codes I have used, these include the font size, font face and paragraph codes.
I had to insert the image that my client wanted to be placed in the "Background Information" page, which was the black and white image of Dong Bang Shin Ki; this was just by inserting the image from the library of the website.
I have finished creating the background information page, where I have also given it a title in Macromedia Dreamweaver when the page opens. For example, when the user clicks onto the background information button on the home page, the title of the page which will load is "Dong Bang Shin Ki Online: Background Information". There isn't any music at present on the page, as I will be creating the music options at the end once all the pages have been created.
I will be contacting my client today; where I will send her previews of the outcome of the Home Page and "Background Information" page; so that I can see whether she likes the outcome or not; and whether any changes are needed to be done.
Unit 9: Project Planning
I have contacted my client about the unsuccessful navigation menu, where she has now decided to go back to the original design of the navigation menu; which was to have the navigation buttons in a row, as the other navigation menu that was in a column did not work. This meant there was no need to change the design of the navigation menu before.
According to the Gantt Chart, I need to start creating the Background Information page on the 07/03/07; however before I create the Background Information page; I had to create new designs for the "Profiles" page, "Discography & Multimedia" page and "Fan-mail" page as I was contacted by my client that she wanted some changes to the design. I have already finished creating the designs of the three new pages that my client has requested; therefore I have sent them off to my client via e-mail, where I am hoping that she will give me comments and confirmation soon.
Unit 9: Project Planning
My client has contacted suddenly that she wants the "News & Notices" taken out of the design as it is no longer needed, she wants the "Discography" page and the "Video Clips" page placed onto the same page and rename it as "Discography & Multimedia" as she wants to save the number of pages on the website, also she wants to introduce a new page into the website, which will be called "Fan-mail"; where she wants the fans to be able to contact the band via a form. She has requested for many changes suddenly during the making; which means that I will need to make big changes with the Gantt Chart.
Originally my design was to have the navigation buttons in a row below the banner; however my client has contacted me, where she wants the navigation buttons to be placed into a column on the left of all the web pages excluding the home page.
Unit 14: Developing and creating a websiteTherefore, in the blog of: "Thursday, November 09, 2006"; where I found a tutorial from
http://www.tutorialized.com/tutorial/Nice-menu-bar/23421
which showed how to create a Flash menu navigation column.
Therefore, using this tutorial to help me as well as my experience with creating rollovers from Unit 11: Multimedia, I began to create the navigation column, for all the webpages excluding the home page; where the navigation buttons have already been created in the graphics process.
Using the two sets of navigation buttons, I have attempted to produce them onto Macromedia Flash 8.0, where I have to import all the files onto the stage, where I had to type in certain actionscripts and use certain layers, to portray the rollover effect. However, as I wanted the navigation buttons to be linked to the specified webpage of the website, I had to enter a certain actionscript where it should open up the webpage (.html file) linked to that certain navigation button.
In the print screen above, it shows the script I had to enter into the action window in Macromedia Flash; where it had to be inserted for each of the buttons I was to use, in the example shown above the script is linked to the home page as the script was designed to be placed for the home page navigation button. This script was used for all the buttons I inserted into the navigation column in Macromedia Flash, all I had to change was the URL of the page it was to be linked to.
Macromedia Flash created navigation buttons:
First print screen is of the navigation buttons created on Macromedia Flash, where when I clicked on the home page button (highlighted in blue), it gave me a blank page (second printscreen)
However, when I imported this flash document into the webpage in Macromedia Dreamweaver; the navigation menu doesn't work as when I clicked onto the buttons the pages do not load. Therefore, I have to contact my client about this issue of the navigation
