WEB1 Folder

You need to be ready to hand in your web1 folder by the end of block day, Wednesday, September 25, 2019. Make sure you have changed the name so it’s called 5lastnameweb1.

This folder counts for 75% of your marking period grade!

Inside your web1 folder you should only have HTML files. Inside the web1 > images folder you should only have JPGs and GIFs.

Make sure web1 folder is renamed: 5lastnameweb1.

IMAGES all go in “images” folder

Open your PSDs for LANDSCAPE and TWINS. Change the Image Size to 800pxW x 400pxHt. Save each one as a JPG, 6 quality should be fine. Make sure each of these JPGs is inside the web1 > images folder

Save your COLORTABLE as a GIF. Place this inside web1 > images

Place you NAME LOGO JPG and one GALILEO BANNER JPG (your choice) into web1 > images folder

HTML pages in web1 folder

Open index.html with ADOBE DREAMWEAVER CC.

There are PLACEHOLDER IMAGES on index.html. Mr. Machtay will show you how to click on one of these Placeholders and replace it with your new image.

In the HTML code for index.html, go to <body tag. Add in the attribute <body background=”bgX.gif”> Select one of the BG GIFS you created for the tiling.html page

Write 100-200 words on “IF I COULD SPEAK TO A MILLION PEOPLE…” what would you want to tell them?

On the upper right of index.html there are links to:

  • color.html
  • tiling.html
  • stylesheets.html

The code for a link is <a href=”color.html”>COLOR</a> a=anchor, href=hypertext reference.

Note that the open Anchor tag <a href> requires a close Anchor tag </a>.

<a href=”color.html”>color.html</a>

<a href=”tiling.html”>tiling.html</a>

<a href=”stylesheets.html”>stylesheets.html</a>

The Tag is a=Anchor. Attribute is href=Hypertext Reference. Value is the path to the linked page. Your linked pages must be inside the same web1 folder for them to link.

ADD STYLES

Use the CSS stylesheets in stylesheets.html to create styles for index.html.

ONE MORE WEB PAGE

If you’ve got everything else done, add one more webpage and create a link on index.html to that page.

Use content from a project you did for another class (History, Science, whatever). Make sure you have text and image(s) to use on the page. You can use the same background and same text styles used on your index.html page.

QUALITY ASSURANCE

Look over all the assignments that are part of web1 folder. Is everything complete and as good quality as you can make it?

If everything else is done, create one more web page inside this folder. Use the writing (and images) from a project you did for another class (science class, history class, language class?). Fill in the content on the page using all the skills and code you learned from working on the other pages. This will add extra credit to your grade. (But first make sure everything else is done and good quality.)

GRADING WEB1 FOLDER

WEB PAGES

  1. web1: should have background image or color. Make sure all images are displayed and other web pages should be correctly linked. (This will only work if everything is inside the folders where they belong.) Make sure you’ve written: “If I could speak to a million people…”
  2. color.html: all colors should be changed to reflect the words written inside the table cells. Make sure it’s easy to read each table cell (light on dark or dark on light). Remember to change the page background to Orange <body bgcolor=”xxxxxx”>.
  3. tiling.html: make sure each table cell has a unique background image that tiles. Make sure it’s easy to read the text in each table cell (dark background for white text, light background for black text).
  4. stylesheets.html: make sure you have written unique definitions for each of the Properties used on the page. You can get a little crazy, but have your definitions make sense (“small” should be smaller, “headline” should be larger).

PHOTOSHOP

  1. Name Banner: 800pxW x 200pxHt, JPG
  2. Galileo Banner: 600pxW x 300pxHt, JPG
  3. Twins Picture: 800pxW x 400pxHt, JPG
  4. Landscape: 800pxW x 400pxHt, JPG
  5. Color Table, 600px x 600px, GIF
  6. all backgrounds: bg1.gif to bg16.gif