Summer Web Site

what did you do this summer?

some basic html tags...

CSS Topic

What are you doing this summer.

Please add a hair of content to 3 or 4 CSS styled pages (all using one css stylesheet) regarding your summer content.

to place an image on your background use this in your CSS

background-image: url(http://something.jpg);

Quick final project

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.

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.