Web Design Day 4

Website Design Day 4

1.      Youtube videos (3 different ways)

In your existing table write in the following à reminders

IFRAME - boat	IFRAME - animal	IFRAME - car
OLD code  - Bill Nye	OLD code - Nikola Tesla	OLD code - stephen hawking
FLV  - Nasa	MP4 -mythbusters	MP4 – Life hacker

 In the first 3 cells:

Embed a youtube video using the IFRAME option

In the second 3 cells:

Embed a youtube video using the OLD code option

In the third 3 cells:

DOWNLOAD THE MOVIE

Insert a downloaded MP4 or FLV file using any website which allows you to download “youtube” videos.

(download the movie to your “files” folder inside “website”)

If JAVA is not recently updated keepvid and savemedia will not work.

http://keepvid.com/

http://www.ixconverter.net/

http://savemedia.com/

 USING Dreamweaver

If “MP4” type movie CODE mode Type <vid  à choose video Hit space bar, type sr à choose scr then browse … find your MP4 movie Hit space bar, type contr à choose controls After controls="controls" hit space bar type “>” then space bar </ The line will look something like this: <td> <video src="files/Flyingcar.mp4" controls="controls"> </video></td>

If “FLV” type movie Insert à media à “FLV” Browse for the “FLV” move Click on “Detect” size   NOTE: If there is a space in the file name it will not work AT ALL.

Create a new table on the Youtube page
3x3
populate this with your own videos

music, trailers & TV

mp4	iframe	flv
mp4	iframe	flv
mp4	old code	old code

 

 

Web Design Day 3

1.      Rollover images
2.      Add link to your Blog Site

index.html
Roll over images:

Use http://cooltext.com/ to create 2 different images for each of:

Home Page, About Me, YouTube, Search, Games, My Work

          Name them HomePage-1, HomePage-2 etc….   NO SPACES!
            Save to the “images” folder.

          Open index.html
          Insert 1 x 6 table at the top of the page
          add numbers to cell padding and cell spacing
          insert rollovers into each cell
         

This is an example for the a rollover link to the Home Page (index.html)

Using Dreamweaver-choose INSERT-Image Objects-Rollover Image

          Original Image-browse for first image i.e. HomePage-1
          Rollover image- browse for second image i.e. HomePage-2
          When click, Go to URL: choose index.html
    
            Once all the links are complete for this page.
           Go to the “CODE” copy the table for the Rollovers
           Paste on each of the other web pages - go back and copy the "SCRIPT" in
           the head section and paste in the other web pages.
aboutme.html
            copy and paste rollover links from aboutme.html
youtube.html
            copy and paste rollover links from aboutme.html
search.html
            copy and paste rollover links from aboutme.html
games.html
            copy and paste rollover links from aboutme.html
mywork.html
            copy and paste rollover links from aboutme.html

Add website link to your blogsite

Use http://cooltext.com/ to create “MY Web Site” image

          Download to your image folder.
         
Launch DropBox Website
            Right click on the index.html file – Copy Public Link
Launch your BlogSite
           Create NEW post “ MY WebSite”
            Insert the image “My Web Site”
            Insert LINK – paste

Title each Page

Go back to each page 
use http://www.3dtextmaker.com/image_editor.html 
create an image of the name of each page
save into the "image" folder
Place this image at the very top center of the page   

 

Web Design Day 2

Place content on these pages:

aboutme.html

            copy your weemee to the image folder
            insert image: Your weemee
            Insert a table ( 3 rows              4 columns)
            COPY your 12 pictures (from the collage) into the images folder
            Insert 1 image in to each cell of the table.
            NOTE: click the cell in the table first before choosing Insert-image

youtube.html

            Insert youtube logo
            Create a link to youtube
            Insert a table ( 3 rows 3 columns)

 search.html
            Insert a table (1 rows 6 columns)
            Get logos from search engines
            Google, Yahoo, plus 4 more
            LINK the LOGO to the search engine.

 games.html

            Create a link to http://www.thegamehomepage.com/freesitecontent/

            Get the logo from the website
            Insert a table ( 2 rows             2 columns) BORDER thickness 10

 mywork.html

            Copy your collage, and 4 tattoos to the “work” folder
            Insert a table (3 rows  2 columns) BORDER thickness 0  (zero) (hidden table)
            Insert collage into the top row - then merge the two cells together

 

 

Web Design Day 1

Website Design
Create a dropbox account to host your web pages.
 
Dropbox account: http://db.tt/GrAozZWP
Download and install the client.
 
Sign in - then click on:
https://www.dropbox.com/enable_public_folder
Verify your email then choose the above link again
At this point the “public” public should appear.
 
Inside this “public” folder create a folder called “website”
-inside the “website” folder create folders: "images" also "work" and then "files"
 
Webpages to create using Adobe DREAMWEAVER: save all of these inside the "website" folder
 
index.html
            Welcome message …
            Your animal picture
            Link to your blog       
            Link to this blog
aboutme.html
youtube.html
search.html
games.html
mywork.html

 

Valentine's Card

Due by the end of February 14
 
Use publisher to create a Valentine’s Day Card
Go to "Greeting Cards"

– choose any template that will result in a

Quarter-Sheet Side Fold

– CREATE

Delete the parts you do not want
Create a unique Valentine’s Day card


PAGE 1:
2 pictures
To: 
Happy Valentine’s Day!
Background colour

PAGE 2-3
4 pictures
Witty Valentine’s message
http://www.brainyquote.com/quotes/topics/topic_valentinesday.html
Background colour

PAGE 4:
1 picture
Weemee or clayperson
·         a weemee (http://www.weeworld.com/ ) choose Create Your Weemee
·         a clay person of yourself ( http://www.clayyourself.com/ ) allow popups then download from the headshot galler
Your name
Background Colour

Rules:

1. Get images off the internet
2. All writing must come from ONLINE resources - such as:

Some require the SNIPPING Tool to copy them to Publisher

     ·         www.cooltext.com 

     ·         http://www.3dtextmaker.com/image_editor.html 

·         http://www.familylobby.com/create-glitter-text-graphics.asp

·         http://www.sparklee.com/

·         http://www.pageplugins.com/generators/flash_glitter_text/

·         http://www.textspace.net/glitter_text/

·         http://www.flamingtext.com/

·         http://glowtxt.com/

·         http://www.fodey.com/generators/animated/ninjatext.asp

Save as a JPG file    
- HAND IN    .PUB and .JPG
- POST the JPG file

Tattoo

Tattoo  (4 in total) (4 separate posts)

Get coloured picture of tattoos “on skin” off the internet

Example

 Picture 1: Dragon

Open in Photoshop
Duplicate layer (ctrl-J)
Convert to grey scale (do not merge layers)
Set up a black background on a new layer (behind the tattoo)
Remove the background of the tattoo (magic eraser or magic wand or lasso)
Remove the light tones and midtones (color select)
Remove all BUT the main features of the image (keep the outline and structure)
Bevel and emboss
Erase until a minimal amount of the original exists but the image is still recognizable
Redraw the areas lost – and where it needs more structure.

When you are finish- the tattoo should looked like the bone structure of the original

The final project should also look 3-D
Save for web:  as a jpg
Hand-in psd and jpg
Blog jpg
NEXT
Picture 2: Skull
Picture 3: your choice
Picture 4: Your choice

Collage

Create Your Name

 

·         12 PICS of things about you

·         Your animal ·         Your car ·         Your food

·         Your band ·         Your hair ·         Your clothes

·                     Your movie ·                     Your drink ·                     Your place

·                     Your vacation ·                     Your sport ·                     Your hobbie

 

·         your first name– www.cooltext.com  – 1 PIC

·         your last name - http://www.3dtextmaker.com/image_editor.html  – 1 PIC

·         non-distracting background – winter scene – 1 PIC

·         a weemee (http://www.weeworld.com/ ) choose "Create Your Weemee"

·         a clay person of yourself ( http://www.clayyourself.com/ ) allow popups then download from the headshot gallery

 = 17 pics!

Use Photoshop

File

  New

Width                                    11 inches

Height                                   8 inches

Resolution                          72

Background contents     transparent

 

Open your picture folder AND photoshop.

Resize until you can see both – then Drag and drop – resize and rotate

Duplicate each – CTRL J

Add different filters to each "COPY" item

Make sure the background is the bottom most layer and your names the top most layers.

Save – .psd (photoshop document) - hand-in

save  .JPG file - hand-in and blog

 

 

Create a BlogSite

Create a BLOGSITE

1. Create your own Infotech 9 Blog on http://www.blogspot.com/
2. Blogger will take you through the steps you need to follow.
   Decide which template you wish to use along with your choice of colors and fonts and complete your profile.
3. For your first posting, write a description of yourself with a picture of an animal that represents you.
4. If the upload picture control fails to show use Chrome.

After creating your digital blog, email your URL to Mr. Bilesky dbilesky@sd35.bc.ca

Welcome to Semester 2

Welcome to Semester 2
This blog site will house the links of each student in Info Tech 9-10-11-12

We blog everything we do...Do it right - Hand it in - Blog it.