Criterion E: Product Development

Techniques I used in making my website:

Insertion of Buttons to link to certain pages

Manipulation of HTML code to alter Header

Insertion of background pictures

Creation of recipe files

Organization of Website

This is how my website is organized. From the Home page, a user can view the Home page itself or go to the Contacts page or Recipes page. The Recipes page has buttons that are linked to each of the recipe category pages. A user can either click these buttons to get to the desired page or can click the desired page from the drop down list when the mouse hovers over the Recipes tab. Each of the category pages has 3-5 PDF files attached. Each file is a specific recipe, with a title, ingredient list, and directions included in each. Recipe files are easy to access on each page with a simple download.

Home Page

Recipes Contacts

Name Email

Breakfast Dessert Chicken Beef Appetizers/Etc.

The Structure and Organization of Webpages Technique: Weebly Template

I made my website using the online website service Weebly. Weebly is a free service where one can create a website from scratch or through the use of one of their useful templates. I used a template to start my website. It served as a base that I could build upon and create my own website out of. From this I used the other techniques described later to complete my website.

Here is an example of what a template from Weebly would look like:

From this, I deleted the generic aspects of the template and added my own pictures and information to better fit the purpose of the website. Instead of being a Summer Collection for clothes, I changed it so I could  store  my  mother’s  recipes  in  one  easy-to-access site. The techniques I used to adapt this template are explained further later in this document.

Internal Structure and Organization of Website Here is a picture of what the final website looks like:

The website is organized into multiple pages and subpages off of them. There are three main pages: Home, Recipes, and Contact. There are five subpages off of the Recipe page, which include: Chicken, Beef, Breakfast, Desserts, and Appetizers/Etc. This is shown in the picture below:

Navigation Pane

Background

Description of website

The subpages allow for a drop down list to appear when the mouse hovers over the Recipes heading in the top pane of the website. A user can click any of these subheadings and be taken to that page. When creating this aspect of the website, I altered the HTML code to give it a more pleasing look. I personally did not like the block letters, so I changed the code to fix it. I also added a light green as a background color and I added borders between each of the entries. Here is what the drop down list looked like before I altered the HTML code:

Here is what it looked like after:

The new code to accomplish this is listed:

/* Navigation Submenu’s --------------------------------------------------------------------------------*/ #wsite-menus .wsite-menu li a { font-family: 'Roboto', sans-serif; color: #8e8e8e; background: lightgreen !important; font-size:13px; text-transform: propercase; border: 5; padding: 10px 20px; } Each of these aspects were combined to create my website.

Technique: Creation of Buttons to link to other pages

One technique I used was the creation of buttons to ease access through my website. I first inserted each button specifically onto the Recipes page. I then modified each button so that it would link to another page. The buttons on the Recipe page now can be clicked to access the categories pages. The Steps are shown below:

1. Click Button to insert a button onto the page:

2. Click Link, then Standard Page to choose which page the button will link to:

3. Select a page and type in the title of the page to finish the button

Technique: Manipulation of HTML Code to alter Header

When creating my website, I noticed that the header itself was not as aesthetically pleasing as I would like it to be. The text itself seemed very block-like, and were spread apart to the very sides of the viewing page. I changed the HTML code of the website to bypass this. I changed the case of the text in the header and shifted the position to “central”. Each of these advanced changes achieved what I was desiring to improve my website.

Before:

After:

Here is the code I changed:

/* Header --------------------------------------------------------------------------------*/ #header-wrap { background: @headerBg; text-align: center; border-radius: 0.1px; /* iPhone 6 Plus box shadow fix */ -webkit-box-shadow: 0px 0px 3px rgba(99, 99, 99, .1); box-shadow: 0px 0px 3px rgba(99, 99, 99, .1); backface-visibility: hidden; -webkit-backface-visibility: hidden; }

#logo { max-width: 300px; font-weight: bold; text-transform: propercase; font-size: 1.75em; }

Technique: Insertion of Background Pictures

From the template made by Weebly, I added background pictures downloaded from the internet to customize my website. Here is what the original pages looked like:

I then clicked Edit Background to open the Background window, from which I clicked Replace.

Once on this page, I dragged the downloaded JPG file of the background into the available window to insert the picture into the website, which resulted in the finished page.

Finished page:

I changed the backgrounds on each page to something that related, such as a roast chicken on the Chicken page. Each picture adds meaning and a sense of originality to the website. The pictures add a design aspect that may have been lost if not completed through Weebly.

Technique: Creation and Insertion of Recipe Files

On each of the recipe pages, I inserted all of the recipe files. These files were created by transcribing my mother’s  recipes  into  Microsoft  Word and saving them as PDFs. Once I had each saved file, I clicked the File button on the Weebly program to link files into it.

I then dragged the File tool onto the webpage, which resulted in an empty link where I could choose which file to add.

I clicked this link and chose the desired file to insert it into the website, which resulted in this:

I repeated this technique many times to insert in all of my recipe files.

Word Count: 1044