Category Archives: IWWD Posts

IWWD Final Project

Leave a Reply

Final Project – Complete Web Site

Read ALL instructions before you begin! Ask questions BEFORE you begin!

It’s time for your final challenge, where you’ll have to put your knowledge of HTML, CSS, and JavaScript to the test by building a functional, realistic website!

This is your final exam for the course, and will count for 20% of your overall mark.

If you wish, for this assignment, I will allow you to use DreamWeaver, which may make life a bit easier.

The topic of your site is somewhat up to you, but it has to have a clear purpose, theme, design, etc. This time, you’re more interested in the overall usability/aesthetic of your site than you were before. Your site should be:

  • organized
  • easy to navigate and understand
  • appealing
  • interesting
  • useful
  • appropriate for the topic

You must make good use of the following concepts:

  • HMTL Basic Structure
  • Proper use of headings, paragraphs and div tags
  • Use of borders, shading, horizontal rules, or other design/layout elements to break up page content.
  • CSS used for decorating page elements (borders, padding, text color, etc).
  • CSS should set the fonts, colours, and text formatting options your way. I’ll be looking for spacing, alignment, decoration, and other options you’ve learned and should now be able to apply
  • CSS rules for borders, shading, background options, rounded corners, etc.
  • CSS rules should target specific areas of your page/site (for example, give the header or navigation links a distinct format/look)
  • Images with text wrapping around them
  • A menu with hover colours. Links to other site pages are set to launch in the same window
  • External links that send users to other sites, set to launch in a separate window. These should be links to sites that provide more information/resources for users of your site
  • Use of a table for structuring information
  • Use of a list for organizing information – can be ordered or unordered, depending on your content
  • Anything you want to throw in to impress me (must work properly and look good)
  • JavaScript elements added to at least one page. I’d recommend using a “store” type page, and referring to the JavaScript for WebDesigners tutorials for assistance. You will have to copy SOME of the information used in the site worked on there (we didn’t get into enough detail for you to write it all yourself), but you will have to CUSTOMIZE it yourself (ie you’ll sell your own products, use Canadian provinces instead of states, adjust the tax rates (5% GST, 8% PST in Manitoba, only apply GST (no PST) to other provinces)

Your site must adhere to the following specifications:

  • It must be a website of at least 4 pages stored in a folder called “lastnamefirstinitial_WDFinalProject”.
  • All pages must have a similar structure, with some differences. The overall “look” of the pages will fit together, but each will have individual elements
  • All pages must be linked to every other page (these links launching internally) and each page must include a link to another site (that launches externally)
  • You must use an external CSS document to decorate your website. I will expect to see you using CSS rules and classes.
  • You must include either a horizontal or vertical navigation bar that connects all of your main website pages. These links must be set to behave as rollover links, and should suit the color scheme and design of the rest of the page.
  • Your color scheme for the page should be reflective of the issue that you are raising awareness for.
  • Remember that including different sections with various borders and background colors on your pages creates unique and interesting designs.
  • Also keep in mind that the images that you include are very powerful in promoting your cause/message/product. It is important that you choose them carefully, and make your text wraps neatly around them. Use good quality images! Using images that look bad or have ugly watermarks on them will make your site look bad, and this should look professional!
  • Be aware of the use of padding in elements so that things do not look cluttered.
  • Be sure to use an example of an image background that is not repeating either as the background of the entire page or in a single element.
  • All pages should be properly written (indented code that is properly spaced and easy to read) and all pages must validate.

Site topics:

You should choose something that is interesting/relevant to you. If you’re involved in an activity, organization, group, class, etc. you will have better knowledge of the topic and purpose, and won’t have to waste time researching or checking out other sources.

  • musician/band website
  •  social justice cause/organization
  • club/group/organization
  • sports team
  • teacher/class website
  • other topics are certainly possible, but need to be approved by Mr. Robson!

When finished, place a copy of the entire folder “lastnamefirstinitial_WDFinalProject” in your shared DropBox or Drive folder.

 

Adobe DreamWeaver

Leave a Reply

We’ve been learning how to write code ourselves, which is a very important, valuable skill. However, when it comes to making sites in the real world, you’ll often end up using a program like Adobe DreamWeaver, which does a lot of the coding for you. Since you know what code looks like and how it’s written, you’ll have the ability to do a lot of customizing while using DreamWeaver.

You probably won’t find DreamWeaver in your dock, so you’ll have to find it in your Applications folder or search for it

Screen Shot 2014-01-15 at 11.03.02 AM

As with most programs, the opening splash screen offers links to resources that will help you with the program

Welcome_Screen_and_Adobe_Dreamweaver_CS6-5

You can create a variety of files. In our case, we want multiple files combined into a site

Welcome_Screen_and_Adobe_Dreamweaver_CS6-3

You’ll be asked to choose a name for your site and a location where it will be saved. As usual, I like folders to have your last name on them and the project title. I also always recommend that you save your work in your DropBox or Drive folder, but NOT in the folder you share with me. When completed, you can move your folder into your shared folder for marking

Screen Shot 2014-01-15 at 10.41.01 AM

It would be wise to look under “Local info” and set the location of your images file.

Screen Shot 2014-01-15 at 10.42.15 AM

You will have to CREATE a New Folder. Our previous examples contained a folder called _images so I would recommend using that.

Screen Shot 2014-01-15 at 10.41.31 AM

Welcome_Screen_and_Adobe_Dreamweaver_CS6-4

Site_Setup_for_Unnamed_Site_4_and_Welcome_Screen_and_Adobe_Dreamweaver_CS6-10

Welcome_Screen_and_Adobe_Dreamweaver_CS6-4

Screen_Shot_2014-01-16_at_9_04_34_AM-5

New_Document_and_Adobe_Dreamweaver_CS6_and_CWC_team_info_and_application_-_CANADA_docx-14

You’ll have to specify a name and location for your css file. We’ve used files called main.css and styles.css, so I’d recommend one of those.

Screen Shot 2014-01-15 at 10.54.52 AM

You should, of course, save your work ASAP. Call your first page index.html (important!)

Screen Shot 2014-01-15 at 11.44.00 AM

New_Document-4

Screen_Shot_2014-01-16_at_9_20_04_AM-11

Screen_Shot_2014-01-16_at_9_15_30_AM-3 Screen_Shot_2014-01-16_at_9_15_35_AM-5 Screen_Shot_2014-01-16_at_9_15_45_AM-3 Screen_Shot_2014-01-16_at_9_15_53_AM-5

Dreamweaver is pretty easy to pick up and work with, but if you need them, here are links to more Dreamweaver resources/tutorials:

Adobe TV

Adobe tutorial

Beginner handbook

Training course

Good ol’ YouTube

 

 

Assignment 2 – Internet Explainer Video

Leave a Reply

You will be using a fun animated presentation creator site called Powtoon. Please join our class by going to: https://www.powtoon.com/edu/join-group/ then put in the code: Lzxg

WD-Assign2 – Internet Explainer Video
 
Create an animated explainer video that explains and illustrates the concepts of how the Internet works. Make sure you include the following terms and a brief explanation with each item.
You must include: client, server, TCP/IP, routers, IP address, & DNS Server
You will be using a fun animated presentation creator site called Powtoon. Please join our class group here: www.powtoon.com/edu/join-group/Lzxg/
How the Internet Works:

Internet Exchange Map: http://www.internetexchangemap.com/
WD-Assign2 – Internet Explainer Video
 
Create an animated explainer video that explains and illustrates the concepts of how the Internet works. Make sure you include the following terms and a brief explanation with each item.
You must include: client, server, TCP/IP, routers, IP address, & DNS Server
You will be using a fun animated presentation creator site called Powtoon. Please join our class group here: www.powtoon.com/edu/join-group/Lzxg/
Your PowToon can have the information written out or you can record your voice as the narrator.
WD-Assign2: Internet Explainer Video
Student accurately explains all required terms in detail                      /10
Video demonstrates a clear understanding of the processes              /10
of the Internet
Overall Impression of finished product                                                /5
(images, text styles, voice over?, etc.)
Figured out and incorporated PowToon tools well.                              /5
____________________________________________________________
Total                                                                                                             /30

Technology at St. James Collegiate

Leave a Reply

Here at St. James, we’re pretty proud of how our students use technology to learn and create amazing things. We provide you with high quality tools, give you the best instruction we can, and let you take care of the rest; and you do! Below is a short movie highlighting some of the technology courses offered here, as well as some of the amazing work created by our students.

The St. James Collegiate Open House is coming up on Monday, February 10 at 7pm. If you know anyone in middle school or who might be interested in coming to St. James, please encourage them to join us!

And if you’re currently a student here, we’d love it if you’d consider signing up for one of these courses. Feel free to stop by Room 213 if you have any questions or want to see more!

SJCITechFlyer

Basic HTML/CSS Page Assignment

Leave a Reply

Once you’ve finished the tutorials and labs for the first part of the course, you will create your own basic web page that demonstrates all that you’ve learned.

You must WRITE the code for this page YOURSELF – NO COPYING CODE from any other source (except for one minor exception, included in the instructions)

You can view my sample here

Please make sure that you read ALL of the instructions before you start.

Choose a topic that is interesting for you. I can assign you a topic if you like, but you will have more fun with it if you choose your own. Look at the things you have to include to make sure that you can integrate the right elements.

You can download the full instructions here: HTML_SiteAssignment

HTML Document Structure

Leave a Reply

Basic Page Structure 

Now that we have a background in how the Internet works, it is time to begin our study of the HTML Language. This is what we will use to build our own webpages.

Markup Tags

HTML markup tags are HTML element names enclosed in angle brackets, or wickets. Tags are the essential building blocks of HTML files. They tell the browser what to do with the stuff inside the container. For example, using a heading tag around a sentence would make the sentence appear as a heading. There are two types of tags that you will learn how to use in this course:

Container Tags vs. Empty Tags

Container Tags – come in pairs and use an opening and closing tag.

<title>My Home Page</title>

Empty Tags – stand alone. This means that it has no closing tag. This is used when you wish to place something into your Web page. These tags must always end with a space and then a slash before the closing wicket. The code below is used to insert a picture into a page. It is a perfect example of an empty tag.

<img src=”http://www.picture.com” />

 So What Are the Pieces of A Tag?

Tags are really quite simple to understand. Each tag may contain the following:

  • An Element provides the main instruction for the tag. This must be in the tag
  • An Attribute specifies a quality or a certain aspect of the element. It is usually optional.
  • A Value gives a value to the attribute.

In the code example below, you can see that the paragraph element (<p>) contains an align attribute whose value is “center”

<p align=”center”>This text would aligned to the center</p>

Please note that attributes and their values always go inside of the opening tag.

Basic Web Page Structure

Every Web page must have the following elements in order to work properly, and be considered valid.

1. The Document Type Declaration (DTD) – this tag does very much what its name suggests. It describes the nature of your HTML code. Don’t forget, there have been different versions of HTML. You need to tell the browser what version of HTML you are using. We are going to be writing HTML 4, because it’s a bit easier and more forgiving. As we move along, we’ll look at some of the more current, rigid versions.

This is what the basic DTD that we will start with looks like:

<!DOCTYPE HTML>

If this seems scary, don’t worry. All you have to do is copy and paste your DTD into your page. I don’t expect you to memorize every piece of code; I just want you to understand what it is and why it is used.

2. <html> Container – A container , by definition, holds something. These containers are how the computer knows what to display on the screen and what to read as code. When your browser opens a Web page, and finds the <html> container it knows that it is dealing with an HTML document, and then follows that appropriate rules to displaying the information.

This is what your document will look like after you add the <html> tag.

<!doctype html>

<html>

</html>

Remember that a container has a top and a bottom. Whatever you want to be interpreted as HTML must be inside the opening and closing tags.

3. <head> Container – The head container is one that is found inside of the <html> container. Its purpose is to hold information that will never be displayed directly inside your page. The elements that go into the <head> of a document are usually for scripts, and search engines. They provide information about the page.

When you add the <head> container to your document it now looks like this:

doctype html>

<html>
<head>

</head>

</html>

4. <title> Container – The title container is one that is found inside of the <head> container. Its purpose is to give the title of the page to the browser so that it can display it in the title bar.

If you add the <title> container to your document it now looks like this:

doctype html>

<html>
<head>
<title> My Webpage </title>
</head>

</html>

When choosing a title for a Web page you should remember that it should be specific to the content that is on that particular page. For example, if boardersanonymous.com had a page in their site that had contact information this page should be named:

“Boarders Anonymous.com – Contact Information”.

Just keep in mind that the title provides information about the page, and if the user does not see what they are looking for, they may leave right away.

5. <body> Container – The body container is where most of your information will go. It comes directly after the <title> tag closes. If you add the <body> container to your document it becomes a complete HTML document. Think of the template below as the structure of a house.

doctype html>

<html>
<head>
<title>          </title>
</head>
<body>

</body>
</html> 

***NOTE***

You have been given my permission to use the above code in the template repeatedly in this course, and in any future courses or Web pages that you may want to do. Copying and pasting any other code in this course is not allowed. Last year several students received a mark of zero because they decided to copy code from HTML Editing programs. Remember, code examples are meant as a guide in this course so that you can learn how to do this yourself. It is expected that you will learn to write the code and not simple paste my code into your assignments. This would be plagiarism and would result in a mark of zero for the assignment, and possible further disciplinary action. The same rules apply to code that has been lifted from other sources on the Web, and from other students’ work.