Theme: Webpage Development (Introductory)

Prerequisite:  Photoshop 1
 

Description: Students are introduced to web design using images obtained from the internet, hardcopy and digital capture devices (scanners, digital cameras).

Parameters: Access to a computer, software (Microsoft FrontPage, Adobe Photoshop CS2, Learning FrontPage 2003 Video Files), scanner and/or digital camera.

Notes:  

You have 18 classes to complete this module.

In this class, time is of the essence and you will not have time to chat with friends, play games or do other assignments. You are allotted 1 class period for each day. If you fall behind, you are responsible for completing all module components outside of class time (before class, lunch, after school) or for homework.

You must NEVER flatten your final images unless specifically told to do so. If you do flatten the image, you will receive and “F” for the assignment.

All assignments are considered due at the end of the class on the due date. Assignments handed in after these times are considered late. All assignments handed in late will receive the following deductions. There are no exceptions.

1 day late – deduct 10%
2 days late – deduct 20%
3 days late – deduct 30%

More than three days late – 0% for the assignment (although the assignment will receive a grade of 0%, it must be completed in order for the student to receive credit for the module).

If the assignments are due on the Wednesday and are not handed in until the Saturday, this will be considered as one day.

Plagiarism or any other form of academic dishonesty will not be tolerated. Students caught trying to copy the work of others will receive an automatic “0%”, and be referred to the administration. In addition, the offence will be recorded in the student’s permanent file.

Grading: Grading your work is straight forward task for your instructors as rubrics are used for each and every assignment. Components for these rubrics dictate what grade you will receive in several specific areas. These component grades are then tallied up and a final grade for your assignment is recorded. Your grades are nonnegotiable.

Interface Essentials
 
As you work with Microsoft FrontPage 2003, you'll discover that there is often more than one way to accomplish the same task. To make the best use of the extensive editing capabilities in FrontPage, you must first learn to navigate the work area.
 
Lesson Overview
 
At the end of this lesson, the student will be able to:
 
Navigate the toolbars.
Effectively use the task pane and menus.
Toggle between page windows and views.
Use the question box.

Navigate through folders.
Use the status bar to obtain information on web folders and files.

Start this section by watching the following videos.
 
Task Pane
Menus
Page Window / Views
Ask a Question Box
Folder Lists
Status Bar
 
Because you may need to review some of the videos and try out some of what you’ve learned on FrontPage, we will give you some extra time to ‘play’.
 
By now, you’ve completed 7 videos and have absorbed a huge amount of information. The good news is that all of this information will be useful in all of your assignments and projects. Another piece of good news is that you can always review a lesson if you forget an important technique.
 

ASSIGNMENT 1 - 1 Day

• Open FrontPage 2003.Click on File > New. A window will open on the right side of your screen.

• Click on One Page Web site. Then, map it to your Schart folder. You’ll need to click browse to find it. If you can’t find it, ask a friend for help.

• Click on One Page Web Site once to highlight it. DO NOT CLICK OK!

• Take a screen shot of this using SnagIt and paste it on a Word document.

• Go back to the Web Site Templates window and click OK.

• Use the question box to find out how to add a background color to a table.

• Take a screenshot and paste it to your Word document.

• Use the question box to ask question about how a link works.

• Take a screenshot of the results and place it on your Word document.

• Name the Word document ‘FrontPage 1’.

• Send an email to your teacher with the Word document attached.

• In the subject of the email, type: FrontPage Lesson 1 – Your Name (i.e. FrontPage Lesson 1 – Joe Smith)

Click here to view the grading rubric for this lesson.

ASSIGNMENT 2 - 1 Day

Now that you’ve finished the videos, you are going to create the skeleton or outline of your website.

• First, create a new one page website.

• Name the website using your first name (i.e. Johns Website or Miriams Website).

• Save it in your Schart folder.

• Inside this new website, create the following pages:

• Change the ‘title’ of the pages so that they’re named the same as the file names.  The title of the Index page should be 'Home'.

• Inside the default images folder, create two new folders, pictures and graphics.

• Take a screenshot of your pages and save it as a JPEG.

• Call it FrontPage Pages.

• Next, take a screenshot of the two folders inside your images folder and save it as a JPEG.

• Call it FrontPage Folders.

• Send an email to your teacher with the JPEG images attached.

• In the subject of the email, type: FrontPage Lesson 2 – Your Name (i.e. FrontPage Lesson 1 – Joe Smith)

Click here to view the grading rubric for this lesson.

Now that you’ve finished the videos, you are going to create a banner for your website. You will want to use Photoshop to create your banner - make it graphically appealing. You will then insert this banner into your page as shown in the previous videos.

• Your banner must adhere to the following criteria.

• The Alignment should be to the left.
• Your margins on EACH page should be '0' on all sides. You will have to set this by going to Page Properties.

Example:

Click here to view the grading rubric for this lesson.

• First, open all of your pages in FrontPage.
• Put the curser after your banner and then hit the enter key 3 times.

• Type the name of each of your pages one on top of each other (these will serve as labels for your pages and will later organize them horizontally at the bottom of the page)

• Do this for all pages. Each page will look the same. If you do this using copy and paste, it'll make things much easier.

• Now, hit the enter key another 3 times after the last typed word.

• Then, type the name (Use an 18 pt font and make it red in color) of the individual page that you're working on. This will help you identify it later on. In the case of the example below, it's the Family page.

• Repeat step 5 for all of your pages. There should be 6 in total.

• Now, hyperlink the menu on each page to the appropriate page. Below is an example of the Family page being linked to the Bio page.

• Do this in all pages. Every page will have 6 links and they will link all of the pages to one another.

• Save your work and then click the Preview in Brower button . All of your pages should be linked. If they do, you've just created your first working webpage.

Click here to view the grading rubric for this lesson.

On each of your pages, you are going to insert a series or tables and cells. They are going to be the same for every page. For this reason, you will need to either repeat these steps for each of your pages (Home, Bio, Family, Friends, Interests, Links) or think of a quick way to do it once and apply them to all tables.

• Open your index page.
• Place your cursor to the left of your banner and click the enter key a few times. The exact number isn't crucial. You just want some space to work.
• Create a new 1 x 1 table.
• Right click on the table and go to tables properties and change the following:

• Right click in the table and click cell properties. Set the vertical alignment to top.
• Place the cursor inside of the new table. Hit the enter key 10 times.
• Have your teacher look at your page and give you the ok to move forward.
• Place the cursor inside your new table and create another 1 x 1 table with the following table properties:

• Click below the table you just created and create a new 1 x 2 table with the following table properties:

• Right click inside the left cell of this table and choose cell properties.
• Set the cell width to 200 pixels.
• Click in the right cell of the 1 x 2 table and set the cell properties width to 550 pixels.
• Note how the 200 pixel cell and 550 pixel cell add up to 750 pixels; the same as the outer table. This is important!
• Click inside the left cell of the 1 x 2 cell and create a new 6 x 1 table (note: you will see 6 cells on top of each other, not 6 cells side by side). Set the table properties:

• If your page looks like the one below, you've done everything correct. If something looks incorrect, simply review the steps and make sure you haven't missed anything.

Click here to view the grading rubric for this lesson.

• Move your banner graphic into the top cell you created. The cell you created is the very same size as your banner (750 x 100 pixels.
• Go into Photoshop and create 6 button graphics for your webpage (Home, Bio, Family, Friends, Interests, Links). Make sure these images have the same or complimentary colors/patterns as your banner so that they do not clash. Make sure the text is legible.
• These will go into the 6 x 1 cells you created. Remember, the graphics must be the same size as the individual cells (200 pixels wide x 50 pixels high).
• When you save these, they must go inside your images folder in a new folder called buttons.
• They must be save as GIF files using the save for web command in Photoshop. Your teacher will show you how to do this if you're not sure.

Click here to view the grading rubric for this lesson.
 

• Open you index page. It should have six buttons (Home, Bio, Family, Friends, Interests, Links) and your banner.
• Right click on each of the buttons and click hyperlink.
• Hyperlink each button to the appropriate page.
• All buttons will have a hyperlink.
• Right click on your banner and hyperlink it to your index (home) page.
• Click file > save as and save this page as your Bio, Family, Friends, Interests, and Links page. You will be asked if you want to overwrite the pages. Say 'yes'. By doing this, you don't have to change the hyperlinks on all of these pages. On each page, type the name of the page in the large cell to the right of the buttons. You must do this for every page. Save the changes and then click file > preview in browser. Check to make sure your pages are all linked.

Click here to view the grading rubric for this lesson.

Now that you have the 'bare-bones' of your website complete, it is time to start putting on the 'meat', or in this case, the content. Up to this point, you have been given explicit instructions as to what your site needs to look like, and you may have started to think that you don’t want your site to look like the guy or girl sitting three chairs down from you. Adding the content will truly make the site 'yours' and give it some personality in a way that only you know how.

There are a few stipulations or guidelines that you will be asked to follow so please read on carefully.

Index Page (Your Homepage)

• This is the first page that anyone who enters your site sees, so make it catchy and interesting with a “clean” layout and organized information.
• 3 pictures – 1 must be a self portrait and the other two must include you in some way (i.e. you playing soccer, hanging with friends, etc.).
• Pictures must have captions.
• Introductory paragraph – this should introduce the viewer to the site, discuss yourself (brief biography).
• Pictures and text must be in separate/individual cells.

Bio Page

• This page is about you and your life…likes and dislikes, favorite foods, brands of clothing etc. Who cares if nobody else likes your choice of music, they clicked on your site and are here to find out about you!
• Minimum 5 pictures – Captions of each picture describing them.
• 2 links to outside websites (i.e. DC shoes, Armani, Hello Kitty, etc.).
• In-depth Biography – describes your likes and dislikes in terms of clothes, music, food, people, animals, etc. Should be several paragraphs and the pictures included should match up to topics you discuss (i.e. “I absolutely LOVE my Hello Kitty lunch box! - insert picture of Hello Kitty lunchbox here – I feel naked without it, and always make sure that my maid/mom packs it”).

Interests Page

• Talk about things that interest you. For example, why pink is your favorite color or how you like to collect Barney toys. Maybe you like taxidermy and have an army of stuffed squirrels in your bedroom and want to share your love (and fear) of the little rodents. This page is all about what interests you (and gives some insights into your psyche.
• Pick 3 topics/things that interest you and write a couple of paragraphs about each one.
• Include relevant pictures that enhance the text (min. 3).

Family Page

• We want to find pictures of your family on this page along with brief descriptions of them.
• 1 paragraph description of family in general.
• 1 picture per family member (include captions with each).
• Brief, 1 paragraph descriptions of each individual family member.
• 3 pictures of entire family in an activity (i.e. games, dinner, etc.)

Friends

• This is the place where you can show off all of your friends and their talents, hobbies, and what makes them worthy of being your friend. You can also provide links to their websites.
• 1 picture per best friend with a caption and a 1 paragraph description.
• 3 pictures of you and friend, or just friend engaged in activity (see previous examples of activity shots).
• Links to friends’ pages on MySpace, FriendBook, PicZo, etc.

Links

• You must list each site that you have a link to combined with a brief description of what can be found at that site and how it connects with your site. Check with your teacher if you're unsure about how to do this.

Note: Make sure that your pictures are optimized and non-pixilated and the appropriate resolution. Also, remember to designate each picture with its own cell in the table, separated from text.

Click here to view the grading rubric for this project.

Project 2 - 5 Days

Option 1
Take an existing company’s website and redesign it using the same content. You can only use the content available on that site. If it is a large site, use selected pages/content.

Site Requirements:

Site needs to consist of at least 5 pages and must have a combination of images and text. You are to redesign it giving it a unique new look. Consider different types of layouts that would work.

Project Task List
* On a piece of paper, sketch out possible layouts and label the different parts- present to the teacher.
* Create a new layout that is practical yet stylish. The layout must be different than that of project one.
* You must utilize Photoshop to create interesting header banners, buttons and other graphics
* Theme of design must match the company’s area of focus (technology, medical, sports, etc). If it is a technology firm, then the design needs to be streamlined, organized and sharp. If the company is a birthday party planner, it can be fun and quirky
* Images need to be laid out in a logical fashion and tables/cells need to be utilized to create a nice flow of text around the images. If there is a gallery of sorts, then the gallery needs to be symmetrical and uniformed

Option 2
Create a new site for yourself. You may choose the content of the site but it cannot be a “personal website” like the previous one.

Site Requirements:

Site needs to have at least 5 pages, header banners, linked buttons, a background, text and images including a gallery of at least 20 images. The layout MUST be different than the first one.

* On a piece of paper, sketch out possible layouts and label the different parts- present to the teacher.
 

Site ideas:
* Band site
* Sport site (team, sport, league, etc)
* Informational/educational
* Hobby (art, music, etc)
* Car site (make, type of car, etc)