Final Website Project (due December 7)

     Include:

• At least eight (8) completed webpages with at least another eight (8) future webpages to be potentially developed later
• The obvious: text, images, and links
• CSS; some of each external, internal and inline
• At least two (2) advanced features: Javascript, forms, php
• Appropriate visual and professional design

Week Eight (due November 23)

     Continue to complete previous assignments and move forward with your final project. Consider this a workday.

Week Seven (due November 23)

     Create a manual or guidelines: "How to Use Wordpress"

Consider a scenario where you have to create instructions or guidelines so that a novice can create a good website using Wordpress.  Think of the novice as a child who understands computers but has never done a webpage before. Think of an older person, maybe a parent or grandparent who has seldom uses computers.  Think of a teacher who has been has taught a long time but doesn’t use computers in the classroom and isn’t certain that they want to but they are told they must create a class website.  Write your guidelines/instructions so each can read them and be successful.

As you personally develop your own website with Wordpress, watch for opportunities to be creative and for specific tasks that one must do to move forward.  Write your guidelines/instructions to allow the readers to be as creative and productive as possible.

As you create these guidelines/instructions clearly include information how to find Wordpress.com and what options they should choose to move forward typically at no cost.  Discuss what other options might offer.  The reader may want to try them.

Think of questions the reader may have and how would you answer the questions before they are asked.
“How to start an account.”  “What is an URL and how will they use that.”  “What should they know when choosing a template.”  “What different features do different templates offer?”  “What advice would you offer when choosing a template?”

 “What is the difference between a blog and a webpage and how do they choose one or the other.”  “How do they choose another page and how do they connect the pages (links)?”  “How do you add images, what size are the images, do they need to change the image size before adding the image, where can they place images on the page?”  “Can they change the font size, family, color, etc and how?”

“What special features can be added like a calendar, or a comment section, or a search box?”  “How can they do that?”  “Can they add audio or video, and how?”  “Are there dropdown menu options?”  “Can they add PayPal?”  “Or enter some of their own HTML?”

Those are just some sample questions, you need to envision your own questions that others might ask and include the answers in your guidelines/instructions.  You know, I can’t envision one writing guidelines for using Wordpress without using at least five pages of a Word document.  If you wish to create a website instead of a Word document, go for it.  Or even if you wish to create a video demonstrating how to use Wordpress, that’s OK also.

Lastly add a paragraph or more about the positive and negative features of using Wordpress.  To whom would you advise to use Wordpress?  To whom would you advise otherwise.

Week Six (due November 23)

     Create at least one page as a .php document with the "include"

Create a webpage as a .php document with the code
     <?php
     include 'footer.php';
     ?>

And, of course, create a .php document named footer.php to compliment the first webpage. The code will start with
     <?php
     print '
followed by the HTML coding
ending with
     ';
     ?>

A strategy when first starting is to

• create a normal HTML webpage in Dreamweaver
• select a portion of the webpage to be used repeatedly in other webpages, typically including and between tags like <tabe></table>, <div></div>, and <p></p>
• copy that section
• create a new PHP document in Dreamweaver
• replace all the code in teh PHP document by pasting what you copied
• type <?php print' before all the code
• type '; ?> after all the code
• save the PHP document under some name such as name.php (note the .php ending)
• in the first HTML document, replace all the selected code with
       <?php include 'name.php'; ?>
• save this HtML document with a .php ending such as webpage.php (this now is also a .php document)
• open the document webpage.php in your browser - this must be done through the Internet because the Internet server must interpret the webpages for the browser
• use the <?php include 'name.php'; ?> code in all webpages where you want that code; remember to save those webpages with a .php ending
• to modify or change the code in the PHP document i.e. name.php, open that document and modify the code (this will change the code for foo the other webpages)

This feature works really well with the portion of the webpage that contains the links. If you have the same links on all pages and want to make a change, the change will occur on all pages. It is consistent and time efficient.

Always consider reference the Internet for tutorials such as w3schools.com.

Week Five (due November 2)

     Create webpages using Javascript code

(Details to this assignment are temporarily missing)

Week Four(due October 26)

     Modify and format images for a webpage

Locate and download images from the Internet, recognizing copyright and creative commons guidelines.

In Photoshop, or other image manipulating program,

• crop an image and use only a portion of the image
• adjust the size of an image as well as the resolution
• create two rollover images
• save the modified images in the images folder with a simple appropriate name

In Dreamweaver, create a webpage, call it discussingimages.html

• describing what you did in Photoshop and Dreamweaver to complete this assignment, including the dimensions of the original image(s), and how you modified the image(s)
• with an image using the tags <map> and <area> to create links
• with an image amid text on the right side
• with an image amid text on the left side
• with an image positioned by using CSS
• with at leat three images that have a shadow, a border and a caption
• with an image with a rollover
  
  

Week Three (due October 19)

     Create two or more webpages to demonstrate the various uses of CSS Styles.

Format by creating CSS for just one of the webpages.
Format by creating CSS for all of the webpages.
Format using <style> in the <head>.
Format using inline formatting.
Format the webpages using a tag, a class and inline

General guidelines to create and format the webpages:

In Dreamweaver, create a new  HTML  webpage,
give it a title, use split  screen
Save the webpage in your website folder
Insert a table (you choose the number of rows and columns, at least 1x1)
Type some text, insert one of more images, create links to connect all the pages
Center the table, set a background color for the table
Format different text with different sizes, families, colors and with other features
Set a background color for the entire webpage
Change link to no underline and black (use Modify->Page Properties)
Experiment with positioning the image and adding a border, changing its size
Repeat the above for several webpages, linking them together

Guidelines for creating and applying formats (in ITC001 on Dreamweaver CC 2015)

            Click on CSS Developer in window on the right side
            Click on + by Sources  -  create for separate document (note new css document in upper left, Save All under File); attach for existing CSS document;  define for this page only
            Click on + by Selectors
                        for tags, type tag name eg table, press return and click on table
                        for classes,  type class name with a period in front
            Click on + by Properties,  deselect Show Set
                        select properties eg background color, font-family
            If Selector is a class, go to CSS in Properties (Window->Properties); highlight text, image or other item; in Class box choose desired property
            Use Modify->Page Properties to edit some formats such as links
            Click on Design screen to see results

Guidelines for creating and applying formats (in Dreamweaver CS4, ie on Remote Desktop)

            Click on Format->CSS Styles->New or Attach CSS Sheet
            • Choose tag or class in Selector type
            • Type tag name or class name
            • Choose CSS style sheet or "this document only"
                        select properties eg font family, font color
            If Selector is a class; highlight text, image or other item; go to Format->CSS Styles and choose name
            or  go to Properties (Window->Properties); highlight text, image or other item; in Class box choose desired property

Week Two (due October 12)

Design your tentative layout of your website.

Start with your homepage, the first page the public will see.  It's a title page and preview of the upcoming story you are about to tell.

Start thinking about what the first page looks like; what's on top of the page, what's on the bottom, how long is it,  is there a picture or several pictures, what's on the left, what's on the right, where is the main content, in general what is the layout.  Don't worry this isn't necessarily the final layout, but a process to be thinking about the final layout.  Consider and offer several layouts.

Add additional pages, the chapters and subchapters  of your story, if you like to thing of it that way, each connected to your homepage, each with a topic or a point to be made.

Again starting thinking about the layout of each page.  Sketch layouts.  Will all pages have the same layout?  Similar layouts? Completely different layouts?  If you have several main topics, will each topic have a layout that is similar?  Where the main content?  What's on the top, bottom, left, right?  Images?

How are webpages related or interconnected?  Sketch with arrows. 

Remember these ideas are not final but the more closely related to the final project, the better off you are.

Week One (due October 5)

     While our eyes are on the big prize at the end of the term, we will take some baby steps along the way, creating, discarding and re-creating, typically a bit here and there and a new feature now and then. Anticipate a folder full of attempts and a circular file full of failures.

We'll start with some talk about motivations and reasons for educational websites

     During classes we will visit a variety of websites, some terrible, some good, and some we like or use often. We'll talk about the audiences of the websites and their apparent general purpose.

     Moving forward we're going to approach this class by doing some little quick and dirty assignments that we don't feel badly about discarding and starting a new and better project. Our first assignment will be to set up a fun, silly, quirky website with two or three pages just to get something online with some links between the pages. An example may be a homepage that asks a questions with the option of clicking on one or two possible answers. If there just one link the second page may say "You're right if you answered ..., and wrong if you answered ...!" If there are two possible links one might say "Right!" and elaborate with an explanation and the other might say "Wrong!" with an explanation.

     Another part of the first week activities will be the most challenging part of this class: deciding what you wish to do for your final project. This will change over the course of the weeks but it will give you a general direction. Your topic, your audience, your objectives for this website will be a part of this assignment. Just generally what do you want to do and why! Plan to submit your plan, your layout to the instructor as a Word document as your second assignment..

     The homework part of your first assignment will be to research tags and come back to the second class with a full report as to what the tags can do for a webpage and how you might recommend using them. You will submit a written report to the instructor as well as give an oral report to the class. You will be assigned certain tags.