Web Design MVCS 2016
Class Info     Assignments     Photo FridayResources

Assignments

Cosmonauts working on the ISS
Cosmonauts working on the ISS - Image Credit: NASA
Assignment 1
     The Box Model
Assigned: March 28, 2017
Due: April 7, 2017


Begin by watching and following along with the following videos on the box model:

Next, select two verses or passages of Scripture and put them in a new HTML page. Be sure to include all the usual basic tags.

Add styles to the division tags to match the following:

Verse/Passage 1:
Padding - 30 pixels
Margins - 40 pixels
Border style - double
Border color - some kind of darker blue
Border size - 10 pixels
Background color - a light blue
Text color - the same as the border

Verse/Passage 2:

Padding & Margins - set different sizes for all four sides
Border style - set different styles so that the top and bottom are the same and the left and right are the same but different from the top and bottom
Border color - set different colors so that the top and bottom are the same and the left and right are the same but different from the top and bottom
Border size - set different sizes for all four sides
Background color - set to white Text color - set to black

Put "Your Name's Verses" as the title in the header tags (putting your name in) and save the file as divisions_[your intials].htm.

Double check your document for proper code and correct spelling!

Your document needs to be uploaded to your Sonblazer server account no later than Friday, April 7, at midnight.

Assignment 2
     Banner Fans
Assigned: April 3, 2017
Due: April 14, 2017


Using the Banner Fans web site, create a set of four images that would go together on a single web site, one banner and three buttons. A banner is a wide, short image that can be used as a title on a page. Buttons are smaller, and used as links.

Your banner should be 800 pixels wide by 150 pixels high, and have the title text "Harvest Farms Pecans". It should be saved as a JPEG with the file name: Each of your three buttons should be 250 pixels wide by 150 pixels high, and have the words "Home", "About" and "Products" respectively. They should also be saved as JPEGs with the names: You may use whatever colors, fonts and font sizes you think are appropriate for a website about a pecan farm. The colors, fonts and appearance should be consistent across all four images, and the buttons should each be identical except for the text.

E-mail your images to Mr. Gwin (jgwin@mvcsonline.com) by midnight on April 14, 2017.

Assignment 3
     Tags for Images
Assigned: April 4, 2017
Due: April 14, 2017


Begin by watching and following along with the following videos on the image tags: Save the file as "resize_[your initials].htm". The image you need to use is below. You can download it by right-clicking and saving.

Your document, and the image, need to be uploaded to your Sonblazer server account no later than Friday, April 14, at midnight.






Assignment 4
     Tags for Images
Assigned: April 4, 2017
Due: April 14, 2017


A friend of yours has asked you to produce some graphics for a business web site.

Your friend needs a banner and two buttons for their landscaping business. The banner should be 700 pixels wide by 200 pixels high and include: The buttons should be 275 pixels wide by 155 pixels high. The first button should say "Landscape Design" and the second should say "Landscape Maintenance".

Your friend trusts you to pick colors and fonts that will look both beautiful and professional. A border on each graphic is very important to your friend, but otherwise the design is up to you. Just make sure the fonts and colors match across all three graphics!

Using bannerfans.com, create the three graphics and then build a web page that shows all three images. Name your file "yardology_[your initials].htm" and upload it to the Sonblazer webserver by Midnight on Friday, April 14.

DON'T FORGET THAT YOU MUST UPLOAD YOUR PAGES AND IMAGES TOGETHER! If you don't upload the images the they won't show up! Be sure to check your URL online to make sure that it is uploaded.


Assignment 5
     Copyright and Fair Use
Assigned: April 10, 2017
Due: April 21, 2017


Any time you use images on a web site you need to be aware of copyright. Copyright is law that protects the creative products and property of individuals from being stolen and re-used by others. You are probably familiar with copyright protection of written material (books, essays, etc.). If you copy and re-use someone else's written work as your own, you've plagiarised their work. Copyright protection extends to many kinds of creative materials, including images.

For this assignment you will conduct online research about copyright protection of images and determine how and when it is ok to use other people's images. At a minimum you should consider the following questions: Once your research is complete, create a web page of an outline of your research on copyright and fair use. Use list tags to make your outline. Afer your list, include the links of any web sites that you used for your research.

Your page will also include three images: a photo you took, a graphic you created, and an image that you download. Each image presentation on your page has a set a requirements to be met: Name your file "copyright_[your initials].htm" and upload it to the Sonblazer web server by Midnight on Friday, April 21. DON'T FORGET THAT YOU MUST UPLOAD YOUR PAGES AND IMAGES TOGETHER! If you don't upload the images the they won't show up! Be sure to check your URL online to make sure that it is uploaded.


Assignment 6
     Styling Links
Assigned: April 18, 2017
Due: April 28, 2017


Begin by watching the following videos on the styling links: Create a new web page with a set of link styles in the head (similar to what was set up in the example video).

Put a link in your page to a web site of your choice to show off your new link style. The link should change when the cursor hovers over it, but look the same whether the site has been visited or not.

Name the file as "linkstyle_[your initials].htm" and upload it to the Sonblazer webserver by Midnight on Friday, April 28.

The video includes a demonstration of setting up a thumbnail link. You will not be using that for this assignment, but it will be an important part of next week's assignment.


Assignment 7
     Web Design Research
Assigned: April 18, 2017
Due: April 28, 2017


What qualities do you think make for a good design of a web site? This isn't about the content of the site, but about the appearance and function. Consider the things about a site that make it easy to use, easy to read, attractive, etc. Also consider things about a site that make it more challenging to use, hard to read and unattractive. Make two lists, one for the positive qualities and one for the negative. You may discuss these with your fellow students if you like.

Next, begin researching different web sites. Identify some that you think have good design qualities and others that you think hve poor design qualities. Make a list of the names of the sites, their URLs (addresses) and the reasons why you think they are good or poor designs.

Finally, build two pages, one with at least four global links to web sites that you think have good design qualities and another with at least four links to web sites that you think have poor design qualities. Under each link write two to three complete sentences describing why you think they have good or poor designs.

There should be a local link on each page linking it to the other so that users can easily go back and forth between them.

Name the two pages "gooddesign_[your initials].htm" and "poordesign_[your initials].htm". Be sure to include an appropriate title in the title tags and some sort of heading for each page using the h1 or similar tags.

Use table or div tags to format your pages and incorporate some color possibly even adding some style to the links and text. Think about the good design qualities you identified and apply them to your choices.

Double check your documents for proper code and correct spelling!

Upload your files to the Sonblazer webserver
by Midnight on Friday, April 28.



Click here to view Third Quarter assignments and videos.