Website Portfolio

In this assignment, you will use Pixlr and HTML to create a website portfolio. Throughout the semester you will create various programs that will be added to your portfolio. At the end of the semester, you will have a complete website that will showcase all of your hard work!

• Home page
• My Javascripts page
• My Apps page
• About Me page
  
  

Step 1: Do Khan and W3CSchools Material In The Lesson For The Week

Step 2: Create Images for your Website

Before creating your website template, you must first create some images to place on your website. Pixlr is a free online image editing program that does not require a download. The program is available at http://pixlr.com/editor/.

1. Work with an Original Photograph. Obtain a digital image with you in the photo. Reduce the size and optimize the photograph to make it suitable for your website. Refer to the Pixlr Tutorial for guidance.
   • Save the image as yourname.jpg (where you use your own first name) to your desktop.


2. Create a Background Image. Using techniques learned from the Pixlr Tutorial, create a suitable background image for your website. A suitable background size should be large (approximately 800 pixels wide by 600 pixels high) and should allow for text to be readable when placed over the image.
   • Save your final background image as myBackground.jpg to your desktop.


3. Create Buttons for your Website. Create a button for each of the following pages: "Home", "Javascripts", "Apps", and "About Me". The buttons should be consistent (i.e. use the same color, shape, size, font, style, etc. on all buttons).
   • Make the image size approximately 100-150 pixels wide by 25-50 pixels high.
   • Use a transparent background for the image.
   • Use the "Drawing Tool" to create a shape for the button.
   • Add the text "Home", "Javascripts", "Apps", and "About Me" to each of the buttons (for a total of four buttons).
   • Use at least one layer style (i.e. drop shadow, bevel, etc.).
   • Save the button images as home.png, javascripts.png, apps.png, and about.png, respectively, to your desktop.


4. Create a Banner for your Website. Using this tutorial as a guide, create a banner for your website. Your banner must contain the following:
   • Your first and last name.
   • A picture of you that uses a transparent background.
   • The text "Programming Portfolio".
   • Save this image as myBanner.jpg to your desktop.

Step 3: Use Your Web Server Account On Github Pages

You created a Github Pages account in the previous assignment, which you use to augment your basic web page to become your full portfolio web site. If necessary, review that Githun Pages tutorial and/or the video

Step 4: Create an HTML Website Template

Make the following changes to your index.html default web page. This will be your website's Home page.

1. Title. Give the document a title (title appears in browser tab, not on web page).


2. Background. Change the background color of the web page (you choose the color).


3. Banner. Add the banner image created in Step 2(d) of this assignment.


4. Navigation Buttons. Add a table below the banner that contains each of the button images created in Step 2(c) of this assignment. Each button should be in its own table cell. You will link these buttons to their respective web pages later in this assignment. The Nav buttons should be spaced to look appealing.


5. Headline. Add a headline (e.g. Welcome to my Page!) using a heading tag.


6. Paragraph. Write one or more paragraphs describing the website.


7. Create Additional Web Pages. The additional web pages must each contain a title, the banner, the navigation buttons, a headline, and a descriptive paragraph. Style the pages (text, background, etc) with a common CSS (you can copy the style section to each page or use an external CSS, which is not shown in the Khan lectures, but is described in the W3Schools readings). *HINT: Copy the code from your index.html page and modify it to create the additional pages.
   
   Create an additional web page for each of the following:
   
   
   • Javascripts. This is where you will insert links to your Javascript programs. Leave this page blank except for the required items (title, banner, navigation, etc.). Save this page as javascripts.html.
   
   
   • Apps. This is where you will insert links to the Apps that you write in this course. Leave this page mostly blank except for the required items. Save this page as apps.html.
   
   
   • About Me. This page will contain information about you. Add the following to this page:
     • A paragraph describing yourself.
     • Add a background image instead of a color. Use the myBackground.jpg image that you created in Step 2(b).
     • At least two pictures of you. One of which should be yourname.jpg from Step 2(a). These should be incorporated into the web page nicely (e.g. as a CSS floating image).
     • At least two pictures of things from your life (i.e. hobbies, interests, etc.). These should be incorporated into the web page nicely (e.g. as a CSS floating image). Remember, all web page images must be uploaded to your File Manager.
     • Optional: Links to your social media pages.
     Save this page as about.html.


8. Hyperlink the Navigation Buttons. Now that you have created all four web pages that will make up your website, go back to make the Navigation Buttons (i.e. Home, Javascripts, Apps, and About Me) hyperlinks to their respective web pages. For example, the home.png button should be a hyperlink to the index.html page. The javascripts.png button should be a hyperlink to the javascripts.html page, and so on.


9. Control The Body Content Width. Style the body of the pages so that all content stays within the span of the banner, as in the examples linked above. (Hint use an html div tag with an id styling it to be the width of your banner).