ideas...

http://sixrevisions.com/web_design/40-useful-photoshop-web-layout-tutorials/

http://dzineblog.com/2008/07/best-photoshop-layout-design-tutorials.html

http://www.1stwebdesigner.com/tutorials/90-new-and-high-quality-photoshop-web-layout-tutorials/

Photoshop Layout and Slices

For this assignment you will be making a web site for your favorite beverage, real or fictional. You will have 3+ pages.



here is a quick and overly simple example of a layout. Your goal is to make your layout fit the style, colors and mood of your topic (i.e.e maroon and white for Dr. Pepper).

start with a new document as below:

You need a minimum of 3 buttons on your site layout.
They Styles window may be helpful:
Additionally, you may want to look here for web layout tutorials for more ideas and advanced techniques.

Once your layout is complete we will be slicing them up to make portions "active"

this image is a link to a slicing tutorial if you need to follow along

FLASH Web Site Critique

You need to fill out 2 crit forms, thus 2 should be filled out for you. Be thoughtful and insightful... Take your time, put a little effort into this as it will benefit the recipient.

Next you will make any needed changes and then publish your site.

File > Publish Settings > Publish HTML and SWF to a new folder

You can then open this in Dreamweaver and change things like background color, page title, etc.

We will be turning this "root" folder in. All that should be inside of it is your HTML file, SWF file, and a JS file.

Like this, but using the naming convention!

Web #2

CSS is fun! You can add LOTS of decoration to your tables etc with unique borders, shadows and lines.

http://www.sohtanaka.com/web-design/css-border-tricks-tutorial/

and

http://www.thewebsqueeze.com/web-design-articles/unique-css-borders-boring-borders-step-aside.html

Your task for today is to create 3 versions of your index page for bretney's site with different CSS rules applied to your table/divs. To do this you will need to follow these steps:

• File > Save As and name it index1, 2, 3 etc.
• Do the same for your CSS page
  
• Now reline index pages to new CSS pages
• once relinked you can add CSS rules to modify your site aesthetics. alter each of these index pages for a different aesthetic. you can add borders to areas of text, images, banners, headers, buttons etc. Experiment a bit, play with different types, sizes, colors etc.

have fun!

web design 1 progress check

http://learn.shorelineschools.org/shorecrest/bstory/index.php?section=discussion

MONDAY

Your goal is to FINISH your flash web site this week. All the info you need is on the blog. Remember the criteria are:

• 3+ "pages" (areas in your time line with info)
• advertising a product
• intro page/scene
• loading page/scene
• transitions between pages

Also, remember to use Flash to your advantage. It is an animation program, you should not have much on your site that is static! Make it engaging, entertaining, informative and hopefully not too cheesy.

TRANSITIONS

Once you have a random image generator working, you can add transitions to it:

http://js-image-transition-library.appspot.com/demo/demo1.html

http://www.pearsonified.com/2006/10/simple_random_header_images_for_your_blog.php

http://www.itechies.net/tutorials/jscript/jsexample.php-pid-image1.htm

WEB 2 - java randomness...

If you could choose between a static home page or a dynamic one, which would you take?

Dynamic every time…but wait, doesn’t that require work to pull off?

Oh, and you could use this for more than just header images; I just figure that most folks will want to rotate their headers, since they tend to be the most dominant visual elements.

Are you ready to go random? Let’s do it!

1. Prepare Your Header Files

For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg

One thing worth noting here is the fact that all of your images should have the same file extensions. If you’re using .gif files, then make sure that each header image has the .gif extension. Photographs will look infinitely better if saved as .jpg, though, so that’s why I’ve chosen that extension here.

Upload the images to your desired directory on your server. If you’re using WordPress, I’d suggest uploading the images to the images folder within your active theme directory. Once your images are on the server, it’s time to install the random header code.

2. Code It Up!

This free script provided by

JavaScript
Kit

PRELOADER

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.

timeline and code for buttons

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

function functionname(event:MouseEvent):void
{
gotoAndPlay("your frame label");
}