Do the exam:
Take the survey:
Make signs for Conservation department in the town.
Meeting Tuesday after the second exam in room 136.
Robotics
Build Repair
C++
Web Design
Make lots of brief entries.
Check out your Manage posts page.
It should show all of your entries.
It should show the tags on your entries.
The tags will make your blog searchable.
Search for your blog name in a search engine
Check to see what kind of traffic you are getting.
Search for 50imacs
Search for viral video
Search for viral media
It is hot outside, hotter than the room.
This room gets hot.
The hall is cooler.
A fan by the hall door will bring in cool air from the floor.
The warmer air will flow out to the hall.
Get your layout to work.
make several entries on your topic.
You should be adding several entries per day to your blog.
They may be brief, and may link to other internet resources.
Do not extensively quote, but rather put links to pages of interest.
Include your own opinions and thoughts.
Modify your css layout - http://www.pyzam.com/
You can replace the css of your page with a different one.
If you want to make one yourself from scratch you can.
Making a css this complex would take a lot of time.
There are lots of very interesting blog css templates.
Search for "blog css template" and blogger or whichever service you are using.
If you want to add a video to a blog, it is pretty easy.
On youtube, there is a link to embed a video on a page.
Here is an example of an entry with an embedded video - link
You can also embed other things on your pages.
Look for the embed link and html code to be able to do it.
You should be adding several entries per day to your blog.
They may be brief, and may link to other internet resources.
Do not extensively quote, but rather put links to pages of interest.
Include your own opinions and thoughts.
Tags are words that help define an online object or writing.
Tags should be about what is in the writing, video, picture, audio etc.
Tags are incredibly useful when you want to create a searchable database.
You can create your own tags for things, and you can use tags that others are using.
In blogger, tags need to be separated by a comma.
In flickr, tags are separated by a space.
You should be adding more information to your blog/project throughout the period.
If you are not writing about your topic, you should be gathering information
Post the information as a blog entry.
You could also find information to add to the side or top divs
You may want to or need to go into the css to modify it and make it more interesting looking.
Do a search for "blog css template" to get examples
You should have way more than a single entry for each class.
If you are not blogging, you should be modifying and customizing the site.
You might want to add things like slideshows and streaming video links to your site.
More do, less watch.
You can use Gimp to make graphics for the site.
you can make things to standard sizes to make them fit
These are some standard ad sizes - http://www.webpencil.com/bannersizes.htm
You can make a different background image
Use an online banner ad creator .
Or you could use gimp.
Place the ad on your blog or site.
These are the standard ad sizes - http://www.webpencil.com/bannersizes.htm
The ad should promote your site.
Print your ad this period.
Get rolling
Put a link on the front page of your wiki this period
Check out your work, your classmates' work
Get rolling
Put a link on the front page of your wiki this period
Senior Exam Maxi block
Get the project complete by tomorrow
All links work online
Text on every page
check the project description
With a few weeks left in the year, it is time to think of some individual projects that you can work on.
Write up a brief proposal of what you will do with this project.
What is the goal?
How will you use web 2.0 tools?
Will you work solo or in a pair?
What will you personally be responsible for?
Proposal due next class
when you have the proposal and the $7 a gallon project done, check with Mr. Connors before starting on the individual projects
mcas maxi block
When you are online, you might see some error messages.
The most common is 404, meaning that the page or other resource you have requested does not exist.
Another common one is 403, which means that you do not have permission to view the resource. If there is no index.html in the directory, and your link is not directed at a specific page or resource, then a 403 will result.
IndividualProjectsSpring08
With a few weeks left in the year, it is time to think of some individual projects that you can work on.
At this point, we have worked with several different languages and ways of working with web design:
Many free websites use a file manager system to have you handle the files that make up your website.
While this can be a convenient way of working, it can also be difficult because you need to learn a new system and interface.
FTP stands for file transfer protocol
In FTP, there are two main parts of the system that concern us:
Most web services have an ftp host or server to receive files from web designers.
Windows has a built in ftp client.
Follow the directions to sign on to an account and then manage your files for the website.
Notes on the files that are up on the servers
Make the links work on all your pages.
Make the css work on your pages
Center Content - Each page should have two paragraphs of text content that you have written. Here is an example - http://duxtech.zymichost.com/transportation.html
Index Content - You should introduce your viewer to the concept of the site and explain some of what you have learned.
Upload your work to the online server
Test your links
Get your pages to work online
Check your work from the link on the StudentWork page.
Change the work on the local computer/hard drive, then upload it to the server.
This might be good to add to the right side of your pages
http://zfacts.com/p/48.html
Upload your work to the online server at zymichosting.
Test all your links
Get your pages to work online
Check your work from the link on the StudentWork page.
If it does not work, your index.html may not be in place.
Edit your pages on the hard drive, then transfer them up to the server.
This will make sure you have a backup, and don't have extra versions of the pages.
Develop the content for the center div
On each of your pages, you should have links to external sites that relate to the content of your page.
Each of these links should open in a new window, so you will want to use the code:
Set up the right divs on your pages. Each page should have 3-5 links to pages that relate directly to the theme of the page.
On each of these pages, you should be adding content to the text of the page. The text should be in the center div.
The resources page will be used to build the right column of your individual pages.
The right column will be different on each of your pages, based on topic.
You will need at least 3-4 links for each right column
As you have been working on this project, you have already looked at many good web pages.
At this point, you need to find those pages and collect their addresses.
Separate your resources page into sections
Break the sections down by the topic of each page
Collect at least 3-4 links for each of the sections of your resources page
Hand in the display of your page this period
As you work, you should begin to fill in the content of the pages
The basic question is:
What is the effect of increased fuel prices on (page topic)?
Resources page
Collect links that will help you gather information for the content of the pages.
Organize them by topic
Put the links in the center div.
Use an h tag to separate the links
Find photos to go on each of the pages in the center div.
Content of the pages
What have you found out about this topic since starting it?
Embedded Styles
Each page should have a different picture in the center div
The picture should be related to the overall topic
The picture should have some relationship to the content of the page.
Use the external style sheet as much as possible for common design elements
Use embedded style sheet for page specific elements
Put all graphics in your folder. Addresses of pictures can change, they can be deleted.
Use whitespace in your code.
Put a background photo on your site's css document.
|
If you did not hand in your template html and css yesterday, do it at the start of the period.
Your navigation system should be in place.
Make the pages for the site.
Use your template to make the pages.
Start to collect information for the center part of the page.
Check the questions on the project description for some ideas on the content.
You should have at this point:
|
Make a folder for this project on your hard drive
Set up a template to hold your information
The template should have three columns, left, right and center
Use divs for the columns example
Set up your css document to handle the columns
Use the template to make the pages of your site
Page names should have the topic followed by .html example transport.html
|
8 weeks to the End of the semester
PossibleProjectsSpring08
WhatDoYouKnowApril08
SevenDollarsaGallon
CssLinks
Use an EmbeddedStyleSheet
CssPoem
Make a page that uses an embedded stylesheet and makes use of the following:
Positioning - http://www.w3schools.com/Css/css_positioning.asp
size and shape - http://www.w3schools.com/Css/css_dimension.asp
Opacity - http://www.w3schools.com/Css/css_image_transparency.asp
z positioning - http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex2
CssLinks
Positioning. With CSS, you can set the position of objects in your layout.
http://www.w3schools.com/Css/css_positioning.asp
You can set the size and shape of an object: http://www.w3schools.com/Css/tryit.asp?filename=trycss_clip
You can position things in a two dimensional manner through its location: http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex2
Use a web page like what you made yesterday, sizeandposition.html
Try the techniques, make the objects viewable on the page.
When you have a good idea of how to handle them, bring them onto your external css document and modify your site.
With classes in your css, you can have subcategories of your tags.
Each of the subcategories can be given different commands as to color, placement and other attributes.
here is an example of using columns by specifying classes
columns.html
Make a page that uses two columns to lay out information.
For text, you can use content from any source.
Use an external style sheet called twocolumns.css
Reference the style sheet from the head of the page that will use it.
Here are some examples and resources:
http://dhswebdesign.pbwiki.com/f/groupstyle.css
http://dhswebdesign.pbwiki.com/f/index.htm
http://www.glish.com/css/9.asp
Make a new ExternalCss for the site.
Change the look and feel of the site by having a different style sheet.
See CssZengarden.com for examples
update on your SideProjectCss
|
CssWebSite - Make a new ExternalCss for the site.
Change the look and feel of the site by having a different style sheet.
See CssZengarden.com for examples
update on your SideProjectCss
Botball Announcement
LOOKING FOR ANYONE WHO WOULD LIKE TO PARTICIPATE IN UMASS LOWELL's BOTBALL ROBOTICS TOURNAMENT on SATURDAY. Will look great on your brag sheet. FIinal build is Friday afternoon. We'll be leaving the competition at 6:30 Saturday morning and will get back at 6:30 Saturday night. If you would like to join the team, please see Mrs. Lewis or Mr. Connors for a permission slip.
ExternalCss
Make a document on your hard drive called external.css
comment your name, the file name and date into the top of the page.
Add the code to call the external css in the head of an html document
Use some content that describes css to see what the effect of the code is.
Hand in your css document and the html document by the end of the period.
flip - http://www.revfad.com/flip.html - Use it carefully....
ExternalCss
finding css use in web pages
looking at a page's css
could you join us on Saturday?
Write a description of what you have done on your SideProjects used as an assignment earlier in the course. It is understandable if your project has evolved from when we first discussed the project.
Provide links if possible to examples of your work.
The projects should be primarily about web design, creation of content and using the tools we have been exploring in class for your own projects.
Use your CssTemplate to start the page.
Use EmbeddedCss to format the page.
Save the page to your wiki. Make a link to it from your front page.
http://dhswebdesign.pbwiki.com/f/index.htm
The computer lab rebuild has been done.
When you log on to the computers, you will agree that you will follow the school's acceptable use policy.
The computers are for educational purposes. They are not toys, and they are not something that you should break. Please pay attention this matter.
Make a folder for your work in the my documents folder.
Don't mess with any other folder than that.
Log off the computers at the end of class.
Write a description of what you have done on the SideProject used as an assignment earlier in the course. It is understandable if your project has evolved from when we first discussed the project.
Provide links if possible to examples of your work.
The projects should be primarily about web design, creation of content and using the tools we have been exploring in class for your own projects.
Use your CssTemplate to start the page.
Use embedded css to format the page.
Save the page to your wiki. Make a link to it from your front page.
Free robotics competition this weekend in Boston - http://www.bostonfirst.org/
|
EmbeddedStyleSheets
Also called internal style sheets They are a type of cascading style sheet.
Find a short story on the subject of your choice.
Make a copy of your template.
Change the title, remove all style from the body element.
Add a style section to the head element.
Comment your name and the date into your page.
Copy the text into the body.
Format the text with some plain html.
Put all the text inside div tags.
Include an h1 for the title.
Include some smaller h tags for section heads of some or all of the paragraphs.
Put p tags around each paragraph.
Add an hr tag to the page.
Adjust the style of the page with the style sheet in the head.
Add a picture to the background of the div
You can also add a picture to the background of the body
Put your time into customizing the page and making it look better, more interesting and more polished.
Print the head of the page and the first few paragraphs when you are done.
Select the text.
Use print selection to print just the head.
Links:
http://webdesign.about.com/od/beginningcss/a/aa021807.htm
|
EmbeddedStyleSheet
Continue working with embedded style sheets.
See what you can do to control the appearance of the pages through the styles specified in the head.
There are a lot of elements you can adjust with this technique.
Your html should be as spare as possible.
Control everything through the style sheet.
here is a link to the sample page from yesterday - css-1.html
This gets you to some editors for background in css - http://www.w3schools.com/css/css_background.asp
The menu on the left of the above link has lots of other try it editors.
Test them out and use the techniques.
this page has a good chart with many css properties and sample code - http://www.katpatuka.org/pub/doc/stylesheet.html
Make sure you upload your files to your wiki
|
EmbeddedStyleSheet
Add styling to the head of a page.
With an embedded style sheet, you can add styles to every html tag in a page. This way, you just write straight html in the page, then control its appearance from the embedded style sheet. If you want to change all of the p tags, you just change it once.
For this, you will need to make an html page. Use your template.
Remove the styles from your template. We will style it with css.
Name the page movie.html
Get a few paragraphs of text about a movie.
Format the page so it looks readable in notepad.
Add P tags before and after each paragraph.
Add a div tag at the top and bottom of the page.
Write a headline for each paragraph.
Add an hr
In the Head of the page, you will add a style tag and a close style tag.
Use this: <STYLE type="text/css"> and </STYLE>
In between the two tags, you will add styles that will control the html elements of the page.
Control the BODY, P, HR, H tags and others.
Give them color, margins, padding and find some other ways of adjusting the elements.
Lay the commands with whitespace so they are easy to read.
Upload your page to your wiki and see how it looks online.
|
Make a background picture in gimp BackgroundPicture
Add it to your HOWTO page in the div tag
Make sure the text is readable over the picture.
The picture should support and not distract the user from the content of the page.
Adjust your HOWTO page so that it is readable and appears carefully crafted.
|
InlineCss
Make a page called InlineCss on your wiki.
Leave a link to it on your FrontPage
the title tag.
Find some text that explains how to do something: Type HOWTO and another word in a search engine to get a page that explains a process.
copy the text and place it in the body of your page.
make a div tag that contains all of your content
Format the text with P tags, h tags and numbered lists
Use InlineCss on the page to control the tags.
Use a background image in the div tag
Here is a link to a page with background images - http://www.backgroundcity.com/
This page has a lot of try it editors for css - http://www.w3schools.com/css/css_examples.asp
wikipedia entry on css - http://en.wikipedia.org/wiki/Cascading_Style_Sheets
|