Web Design IV -2 a Free Host Upload to, Online Web Tools

Bravenet site instruction:
Sign up: click under log in box, join Bravenet, you must use real email. After successfully signing up, if there’s box pop up ask for cell phone number, click on proceed to member’s area button at the end of page and validate your email by clicking on the link and re-login.
How to get free subdomain from Bravenet.com: ( * find “log out” from member tab area or website tab on the right top corner)
Go to bravenet.com join Bravenet, and login.
After login in the membership area
1.Click on free web hosting panel, “get free hosting” button and you’ll be in the “website” tab area;
2.Click get bravehost( It may require you to relog in again)
3.Choose free “signup now” button. You will be in Website Manger area under website tab.
4.Click on the link “Build a new website”
5.Click on “Use a subdomain” and enter a proper name for your subdomain such as yinawu1.bravehost.com.
6. If the subdomain hasn’t be taken, then click on “create a subdomain button” which is a web address use a “.” branch out from bravenet.com for example: http://yinawu.branet.com * note: there’s no www.
Upload to bravenet:
1. Create SFTP account with bravenet try to use the same user name and password and accept their term.
2. On the right panel which represents the remote sever, click on folder icon on the right top corner to get to your subdomain
3. On your left panel is your local site, click on the folder icon to choose where your dreamweaver local site folder at.
4. High light the item, click the >> button to upload to correspondent folder, relatively same structure as your local site. * Whatever folders you have on local site; remote site need to have the same name folders, and same files in that right location as local.
5. If you need to edit a html file with their online editor, choose your subdomain that you want to edit first (you may have more than one subdomain)
6. Click on text/visual editor link
7. Right click on the file you would like to editàchoose visual editor
8. Click on the block of text, while it high lighted, click inside to edit the text.
9. Don’t forget to save (the icon look like a floppy disk on the top left tool panel) and you may view it from the link on the top right corner.

*note: Bravenet .com is the URL where you login, your_subdomain.bravehost is the front side to show your pages.

How to create a template based website on bravenet using their online tool:
1. Click your subdamain
2. Under Website tab choose website wizards
3. Start building your website
4. Quick build from theme (see the color matching boxes, and choose the layout too)
Pick a theme and click on use this theme and fallow the step on first page and other page.
5. If you need to edit the text, click on the file; click inside the box and type your texts.
6. Don’t forget to save and publish
7. Tell your friend and family your website: your_subdomain.bravehost.com

Web Design IV, Apply Style Sheet to html with Dream Weaver

How to apply style to your html
If need detail steps, please follow tutorial: create a new stylesheet
Format your text, link style sheet, edit your style sheet.
CSS style sheet: http://www.adobe.com/go/vid0152.
Or tutorial for Adobe CS5
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt4.html

For CSS3 stylesheet to have special effect on the text while roll over

http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/

Web Design Class III- Using Photoshop to Start with Creating a Page

Why do we use Photoshop to start with for creating a site?
Because designers use Photoshop to show their clients the looks and feels of design.
Transfer from printed material to webpage.
Why do we slice the whole piece of image to smaller ones?
Smaller image’s download time is faster
Since image file is bigger then text/html code, we can delete unnecessary blank image piece, and use background color to replace it. And use real text to replace image text, so we can apply style to it, and make the file smaller for quicker download time.

Create a new site name Quick_Site from your last week’s sliced image:
Create a folder name it “quick” and drag (1) index.html (or if you forgot to name it index, it should be “photoshop” or “design1”) and (2) images folder into your “quick” folder. Define a site by click site menu from Dreamweaver siteànew site and select advance tab from the top, select local info on the left panel. Give a name of the site and click on the folder icon of local root folder: select your quick folder, and then select image folder inside your quick folder as default image folder. Click link relative to document, and leave URL blank (unless you have a site out there running).

Open your site first page: index.html and delete the “text image”, replace it with real text.

3.Create hyper link


Continue with Café Townsend tutorial add text apply CSS style sheet and create a new style sheet

Cascading Style Sheets Video
http://www.adobe.com/go/vid0152.
Open index.html do page space layout using “div” tag or under Layout tab
Insert text, and image by drag from file panel

Flash Aniamtion CS3 Class outlines: Move with guild line and button symbol

1 Review: Use Key frame (F6) on where the object changes (location or shape)*note: don’t convert into symbol for Shape tween Frame (F5) nothing different except for time.

Motion Tween: click 1st frame drag the object to the stage. Click the 20th frame hit F6 to insert key frame, and drag the object to the new place. Click in between frame with right click mouse key to add motion tween. 2. Control g: group together, Control b, break apart, Control z, undo Control a, select all press > forward one frame, < backward one frame press enter to test press Ctrl +enter to play on the window CS3 Video Tutorial http://www.adobe.com/designcenter/video_workshop/

Motion tween with guideline.

1.On frame 1draw an object, converted object into symbol (button or movie clip symbol)

2.While the object layer is highlighted, click the add motion guide (next to insert new layer button). Note: the object must be under the guide layer.

3. Click on the guide layer, use pencil to draw a wavy line across stage on the guide layer.

4.On frame1, use pointer tool (the arrow) pick the object onto the line; make sure the center snap onto the guide line’s beginning,

5.on frame 50 insert new key frame on both object and guide layer,

6.drag the object to the end of the guide line. 7.Test it by control enter.


Make a Button Symbol :

1.Insert another new layer name it button, and on that layer draw an oval shape, right click mouse select convert to symbol àbutton.

2. Double click the button symbol into button edit mode;

insert keyframe on every section “up”,“over”, “down”, “hit” by click under the word “up” on the timeline and insert key frame by F6.

And repeat the same on “over”, “down” and “hit”.

And then change color or shape on “over” keyframe by double click again get into group mode, repeat the same on “down” keyframe for another color or shape.

“Hit” is only a place holder that will not show anything.

In case you want an invisible button, delete the images on Up, Over Down, but keep a space by draw anything on “Hit”, when using invisible button, make sure audience will know where to click.

Check user’s Version of flash player File -->Publish setting -->html tab select detect Flash version button

Trouble shooting and helphttp://www.adobe.com/support/flash/

Flash Animation II

Review:

Always go back to selection tool

Creating a new layer

Keyfram and frame

Creating a motion tween

Import an object

Shortcut keys:

Insert a new keyframe: F6

Insert a new frame: F5

Convert to symbol. Or right click convert to symbol, F8

Group together: Control + G. First use selection tool to select all the objects,

Objective:

Nest animation: Creating an animation within the animation

Preparing the background

1. Down load a background image: by right click mouse--> save picture. Save image to your new folder and name it “background” and then

2.Import background image to library: from Flash file-->import-->library

Create background layer, helicopter layers

3.Name or insert a new layer by click on the tiny icon on the lower left of timeline.

4.Drag images from library to the stage onto the background layer (if library is not open, check from window menu or on your right panel’s triangle tab to expand it) and name the layer to “bg” which is always the bottom layer.

5. Insert 3 new layers, by click icon or insert menu--> time line -->layer and double click layer2, 3,and 4 and rename to rotor, chopper , and tail.

6. Import 3 parts of helicopter to library.

7. Drag parts from library to stage and assemble them, then use transform tool to reduce size.

*make sure they have been converted to symbols already.

Nesting Animation

Double click on the rotor to enter rotor itself animating mode (if object hasn’t converted to symbol, it will be paint edit mode)

Note: this is only one level behind the since.

8 Insert keyfram on 5, 10 on the rotor animation mode and use the free transform tool to rotate the object on frame 5 and 10.

Click in between frame1, 5 on timeline right click--> motion tween

Click in between frame 5, 10 create motion tween

Hit enter to test

9. Back to scene 1 by click on the since icon locate under timeline

10 Repeat step 8-9 on tail

11 Group together all 3 parts by using selection tool select them, then, Control +G

12 Create motion tween for the helicopter from on place to another place by entering

keyfram on since 1(I expect you know how to do it now)

13. Add music layer, import music to library and drag onto stage on music layer

14 Control + Enter to test play.

Web Design Class II

A recommended book to read from Google's free book online

Web Class

Review:

1. Before jump into create a new page from Dreamweaver, better create new ___SITE______ first; and before create new site, better have __PLAN_______.

2. tag which contains information for searching engine is located within __HEAD______ tag; and your page contents should be within __BODY______ tag.

(1) …. (2) ….

Short cut for fast web page development.

3. From IE Browser click ___PAGE_____àview Source to see the source code, so you can learn/borrow code from other web site.

From IE Browser Click Fileà Save as from internet site to your local folder and open Dreamweaver.

4. What should you name your default first web page of your site ___INDEX____________.html

Other ways to do a simple web page

Online editing tool provided by the webhost. such as Drople, Bravenet...

Photoshop a image, then use slicing tool to cut and then FILEà save for web and device

Demo Page Design and Layout
Process for designing a web page: Plan, sketch, take photos, and put elements in image tool such as Photoshop or Illustrator, then finally use Dreamweaver to assemble a web page.
Copy Café Townsend folder inside: T driveàwebclass_wu to your H drive, then do the tutorial:

1. Create Dreamweaver site

2. Layout with

3. Add contents:

Adding image by dragging it from the right File panel or Insert image

Adding Flash from Insert---media ---flash

4. Format the content with CSS style sheet (will talk about this next time)

Cascading Style Sheets Video

http://www.adobe.com/go/vid0152.