final project!

specifics:

• 5 pages (3 pages for seniors)
  
• Professional Layout
• Consistent Navigation
• Client/Visitor appropriate colors, theme, images etc.
• Use software of your choice to the best of your ability
• Compare your site to another of a similar topic/theme, how does yours stack up? Our goal is for yours to be equally as impressive.

You need to design a site, using the program of your choice on a topic of your choice.

• To get started please answer the 8 questions here
• Next you need to create a layout sketch for each page in your site. You can do this by hand or using Balsamiq, a web based layout interface.

to make a container:

.container_div
{
border:5px dashed blue;
margin-left:auto;
margin-right:auto;
margin-top:200px;
width:90%;
opacity: .9;
height:340px;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}

CSS 3 pages...

more in CSS...

Task: Tell us about your summer plans... we will be making a 4 page site about that topic. We will change our menu, add different "classes" to adjust styling and make a complete 4 page site.

http://www.cssbasics.com/css-classes/

this is a great resource for finding different styles, etc.

Requirements:

• 4+ pages
• CSS navbar
• colored text box
• colored header
• background color &/or image(s)
• information
• links
• images
• one .css page styling your site
• 4+ html pages with no "style"` on them

Tuesday... start your first CSS site...

http://www.w3.org/Style/Examples/011/firstcss

please do not just copy and paste, but add your own info/ideas etc.

be sure to pay attention to which code you are to be adding, css or html... pay close attention when the tutorial has you copy and paste your CSS into a NEW DOCUMENT and then refer to it in your html document, this steps catches a lot of students off guard. make sure you read through the entire tutorial following each step, in sequence.

OSWD

Open Source Web Design is a great CSS resource. Please find a layout you like and download it. Then open the index.html page as well as the .css page in DREAMWEAVER...

oswd.org

CSS!

CSS
If you like HTML you will LOVE CSS!!!!

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block.

* A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).[
* In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.

we will be following a tutorial to build our first CSS and HTML pages...

http://www.w3.org/Style/Examples/011/firstcss

To Turn in for Flash Web Site:

File > Publish Settings > then export you .html and .swf files to a new folder.

EXTRA CREDIT: Lip Dub Poster...

Title: "All-School Music Video Scavenger Hunt"
Date: May 27 after 4th period

Details: 7 songs from 7 decades

Participation Options:
1. Dress up like your favorite Pop Culture character for the Scavenger Hun!
2. Participate with a club.
3. Dress up like a generic person from a specific era.
4. Wear school colors and go crazy when the camera moves into the gym at the end of the video.

See Mr. Mitchell in D5 for more information.

Images from various decades would be great.

Check out http://www.uglybogus.com/ for a bunch of rock show poster examples... specifics: Document size: 8"x10" Resolution 300dpi or more Program, use Illustrator, PhotoShop, InDesign, but no Flash.

pre-loader for FLASH

FLASH!!!
PRELOADER!!!
for a more in depth preloader click here

We are going to make our loading movie on a new scene

We are going to start off with our preloader first, this frame is only going to have the text "Loading" and it will remain there until the website finishes loading. To do this, click once on the layer labeled Content then pick the Text Tool and write Loading in the middle of the stage.

We are now going to write the code for the preloader, click once on the Actions layer and then right-click it and select Actions to open up the Actions panel. Paste the code below to program the preloader.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void {

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

if (total == loaded) {

play();
this.removeEventListener(Event.ENTER_FRAME, loading);

}

}

This code is explained at AS3 Flash Preloader Tutorial. Please review that tutorial to learn about how this code works.

That completes our preloader part, close the Action panel once you are done to go back to your movie. We are going to start now working on the rest of the website. We will start off now by adding the background. You can use our background here to follow the tutorial. Simply right-click this image and select Copy, we are going to paste it in Flash later.

Intro Movie

You will need to make a new scene to act as an introduction.

• 200+ frames
• skip intro option to enter site
• related to topic
• entertaining
• professional
  

for code:

same code as other buttons but change the navigation to:

gotoAndPlay(frame #, "Scene Name");

frame # = frame 1 (typed out just as 1) generally of your web site
Scene Name = the name of your web site scene in the scene window (windows > other panels > scene)