Criterion E: Product Development Complex Techniques Used:

❏ Technique: Managing the site and templates for Dreamweaver ❏ Technique: Using photoshop to edit/customize pages and improve functionality ❏ Technique: Manipulate graphics ❏ Technique: Use of HTML to customize pages and improve function

Organization of the website (Document object model) This indicates how the website is structured:

The website falls under four tabs that all link to one another. The index (home page) is the opening page when the website it opened. Along the top of that page there are links to all other pages as shown above. Along the top of every other page, there are links to the other pages as well. Each page is sorted into an appropriate category with the appropriate files attached to each page. For example, all information on how to contact Jeanne is under the page titled “Contact”. Every file used to create the website is within one folder titled “Dreamweaver” and separated into two files within it titled “Design files” and “Web files”.

The organization and structure of the webpages: Technique: Adobe photoshop Rather than creating the website in full through Adobe Dreamweaver, I chose to create the base of the picture through Adobe Photoshop. I found background images for all of the pages and then incorporated text and separate images on top of that background image. This eliminated the need for excessive coding and therefore saved me time. Each page was its own file within Photoshop and was created separately. Below is a table in which the setup of each page is described:

Description of each webpage

Index The index (home page) consists of a background image of my client (Jeanne) feeding one of the babies she looks after. This is the only image on the page, all other additions were text boxes. There were multiple text boxes added onto this page. 4 of which were titles of all of the existing pages that scrolled along the top. The other was of the phrase, “Jeannes at Home Daycare.”

Profile The profile consists of a background image, text boxes, and an additional image. The background image is on taken from google, it is children's handprints in the shape of a circle. On top of that image, along the top of the page, are the text boxes of the pages of the website. A description of Jeanne takes up most of the page. However, a photo of one of the baby’s she babysits breaks the text of the top right side.

Images The images consists of a background image, text boxes, and additional images. The background image for this page is also taken from google. It is colorful ice cream cones. Along the top, there are the boxes for all of the websites pages. In the center of the page there is a text box depicting what surrounds it. Surrounding the text box are images of Jeanne and the children she babysits.

Contact The contact consists of a background image and text boxes. The background image is taken from google. It is an image that says the words “Contact me”. There are boxes along the bottom of this page (the top was taken up by the above phrase) for the pages of the website. There is also text within the middle of the page that provide Jeanne’s email and phone number.

After creating the pages in Photoshop, they were saved as both photoshop images and a “jpeg”.

Technique: Linking files into dreamweaver In order to access all of the files used within the website the folder containing all of the items had to be linked to dreamweaver. After linking it this is what the sidebar on the right side of the screen looked like.

Under the tab labelled “files” all of the documents and images from my dreamweaver folder are listed. This allows for easy access to each other needed files.

Technique: Transferring pages into dreamweaver After saving the edited photos from Adobe Photoshop onto the desktop, I opened Adobe Dreamweaver. In order to create the new project I had to create a new one and select what type of coding I was going to use, in this case it was HTML. After creating the project I was left with a white screen with toolbars and other things that I would need to create the website. However, in order for the correct toolbars to be shown, you had to switch the mode into “Design,” which can be seen in the screenshot below.

After switching into design mode, the pages created in Photoshop had to be inserted into the program has different webpages. After creating and naming the pages, the saved photoshop edits had to be imported into the program.

Each page was titled and put in the preferred order. The order is based upon how they would be listed along each page.

Now came time to import the actual images that were to be the pages. In order to do so, the images must be inserted from the side bar on the right side of the screen.

Since my pages were all images, I selected the option for importing images and found my pages one by one.

Technique: Create hotspots In order for a website to work properly, the pages must be linked together. That is what the hotspot tool is for. To create the hotspot, there were multiple choices for what type of shape you could make the area. I chose rectangles, so I then took the tool and dragged my mouse over the space in which I wished for there to be a hotspot.

After created, the hotspots looked like this. The shaded blue area covered the space in which you could click on to be taken to the linked page. In order to link the page…

You would type in the page name you were attempting to link it to. For example, if wanted to link the home page…

To the Images page…

Then when typing in the link, I would type in “images.html” being sure to include the “.html” at the end. This hotspot allows for the user to clink on, or around, the name of the page they wish to visit, and they will be sent to that page. The following are the links used to link all of the pages...

Technique: Overview of all pages After creating the project in Dreamweaver, making each other webpages, and linking each of them to one another, it came time to do an overview of the product before discussing it with my client. The home page…

All of the links worked and the webpage is appealing visually.

The profile page…

The links to all of the pages were even across the top of the page and all worked properly in navigating from one page to another. The description of Jeanne and her life was all written by Jeanne prior to the website being made so all provided information should be accurate. The images page…

The background images used for both this page and the previous profile page were chosen by Jeanne. The links to all other pages were even and worked properly. All images Jeanne wished to be displayed on the website were showcased through this page and in a visually appealing way as well. The contact page…

The contact page did not have any additional images that were to be added. The email and phone number were provided by Jeanne and said to be the best and easiest way of contacting her. The links to other pages cannot be seen in this image, they are along the bottom of the page. However, the links function properly and navigation between each page is effortless. Word Count: 1281