WRA 210 April 14th PowerPoint

41

Transcript of WRA 210 April 14th PowerPoint

Page 1: WRA 210 April 14th PowerPoint
Page 2: WRA 210 April 14th PowerPoint

TODAY

1)Checking in again– one last try at

explaining Module 6 #savagePhillure

2)Call and Response

3)Reminders

4)Homework

Page 3: WRA 210 April 14th PowerPoint
Page 4: WRA 210 April 14th PowerPoint

Module 6

Okay, first… all that stuff I said last class.

But two things I think are not communicating

well:

1) The idea of Module 6 was for you to create

a design (using CSS and HTML) then apply it

to Tumblr

2) If we can’t get that far, that’s okay. The

mock up is what matters

Page 5: WRA 210 April 14th PowerPoint

Module 6

We will try, that last week of class, to get your

Mod 6 design to your Tumblr, but if you can’t,

please don’t freak out.

It’s not meant to be a colossal task. I am sorry

it got so confusing. I take responsibility for

that.

*I* thought I was being clear, but I made PW

mistake #1– I didn’t interrogate my audience

well enough. It’s a teachable moment. :)

Page 6: WRA 210 April 14th PowerPoint
Page 7: WRA 210 April 14th PowerPoint

Call and Answer

The next several slides will be your questions

followed by my answers.

They were great questions. Some of them will

require doing some work in other windows,

though, so be ready for me to alt-tab away.

Page 8: WRA 210 April 14th PowerPoint

I'm just wondering how I should start.

Page 9: WRA 210 April 14th PowerPoint

Very carefully.

Page 10: WRA 210 April 14th PowerPoint

I need to learn how to put (X)HTML and CSS files onto the

internet using GoDaddy, ect. Do you have to alter file

locations in da code?

Page 11: WRA 210 April 14th PowerPoint

Good question! You don’t have to do anything

special to the code, just remember that your links, when working in Dreamweaver, will be “relative.” So if everything is in one folder on your machine… it

needs to be in one folder online.

Page 12: WRA 210 April 14th PowerPoint

I'm actually not sure about the best way to get out final sites up

and accessible online...Should we be using our web folder? How?

Page 13: WRA 210 April 14th PowerPoint

That is the easiest way. To make a page live on the web using your MSU web space, all you have to do is copy it over to your “web”

folder on the network. You can host anywhere you’d

like, though.

Page 14: WRA 210 April 14th PowerPoint

Two things to remember:1) Links are relative. So you need

to move things so that they are in the same relative place on

the server 2) If you have an index.html, you

can link to the folder. If not, you must include the “x.html”

with your links.

Page 15: WRA 210 April 14th PowerPoint

to begin, how to put active links on my site.

…how to make it so when you click

on a certain word it links to a different website

Page 16: WRA 210 April 14th PowerPoint

how to make different pages of the same site in

Dreamweaver, and how to connect them.

…I want to be able to use images to

link to PDF files on my portfolio website

Page 17: WRA 210 April 14th PowerPoint

Links are actually deceptively easy. You just need to highlight

what you want to link in DW then type the link address into the box

(remember– relative!)

Page 18: WRA 210 April 14th PowerPoint

If you create your custom nav and the standard elements for your

page first, you can create the sub-pages by saving the file as a new

name.DW supports another way to do

this, but switching machines when you use that method is sloppy, so

we’re avoiding it.

Page 19: WRA 210 April 14th PowerPoint

You can link from any element– a picture, text, etc. If you link

something that is not text, you will need to remove the border or

you will have a link colored borderline.

Let me show you. (to the other window!)

Page 20: WRA 210 April 14th PowerPoint

Everything in Dreamweaver is a mystery, but a quick question

would be "Whats the difference between the AP div and div tag?“

…Good question!

Page 21: WRA 210 April 14th PowerPoint

Everything in Dreamweaver is a mystery, but a quick question

would be "Whats the difference between the AP div and div tag?“

…Good question!

Page 22: WRA 210 April 14th PowerPoint

That’s a question no one has ever asked me. An AP Div is “absolutely positioned,” which means you can

put it wherever and it will stay there (it should, in DW, set

coordinates for where it sits relative to the edges of the page).

Page 23: WRA 210 April 14th PowerPoint

Sometimes that doesn’t go quite right.

Which sucks.

But it happens. Particularly with fluid layouts.

Page 24: WRA 210 April 14th PowerPoint

A div, or a div tag, is just a div without the absolute positioning, which means if you don’t give it position properties… it’ll just sit

where it is in your code. You may need these in some

cases.

Page 25: WRA 210 April 14th PowerPoint

I've been having trouble incorporating what are essentially custom fonts. Typefaces that don't

come standard with most machines.

Page 26: WRA 210 April 14th PowerPoint

There’s three ways to handle that (two I’d call bad and one I’d call

good).1) You can offer the font for

download (not such a good idea, particularly if it isn’t

free)2) you can embed the font

(ditto)

Page 27: WRA 210 April 14th PowerPoint

The good way is to use Photoshop to make whatever pieces you

need in that custom font.

This means you probably won’t want large chunks of body-text in non-standard fonts. But that’s a best practice for design anyway.

Page 28: WRA 210 April 14th PowerPoint

In PS when you have an image w/a background but you just want

the image, not the background stuff, how to cut out a clean image

Page 29: WRA 210 April 14th PowerPoint

The answer to this one depends on how perfect you need it to be and how difficult the image is to

work with. Let me give two examples.

Page 30: WRA 210 April 14th PowerPoint

This one is easy money. The background is a solid color, so all you’d have to do is magic wand the background (set your tolerance so it gets all the white and no Spider-man), go to “select” and “select inverse” then hit ctrl+J to make a new layer. Turn the original layer off, and there will be transparency around Spider-man. Save him as a .png and you’re good to go.

This also applies to text elements. If you want transparency, you want .png (for detail) or .gif (for speed but less colors).

Page 31: WRA 210 April 14th PowerPoint

This one is a bit tougher. Notice that the background behind our webby friend is color and isn’t uniform.

You can take a few different approaches here. One—which is not the best method but some people swear by– is to just grab ye old lasso tool and trace around Spidey.

A second is to use the pen tool to trace an area around him. I’ll show you this in a second.

Any method that works for you is the right method.

Then there are these methods: http://blogs.sitepoint.com/masking-techniques-photoshop/

Page 32: WRA 210 April 14th PowerPoint

rollover text effects, layer text effects, how to really make my

text shine...

Page 33: WRA 210 April 14th PowerPoint

The roll-over effect is done in Dreamweaver. The other

elements are done in Photoshop.I’m going to show you how to

make the following image in the other window.

Page 34: WRA 210 April 14th PowerPoint

http://www.phillalexander.com/quickie

Page 35: WRA 210 April 14th PowerPoint

And two of you asked: I need help with drop down nav

bars in Dreamweaver

Page 36: WRA 210 April 14th PowerPoint

This one is a little tougher to answer. I think Dreamweaver will animate one for you, but… those

usually suck.

You should find what you like online and then replicate it.

Like so…

Page 38: WRA 210 April 14th PowerPoint

And that was all of your twitter questions.

Remember, no class next Tuesday, the 19th but you should be

working on your site and your Mod 6. Mod 6 mock-ups are due

that day via email.

Page 39: WRA 210 April 14th PowerPoint

Also on the 19th, you should post the following response to your

Tumblr:

Describe one thing you are trying to do with your website that you haven’t been able to pull off. Be

descriptive and specific.

Page 40: WRA 210 April 14th PowerPoint

On the 21st we will put Module 6 in the ground (six mod feet under)

and talk through your Tumblrresponses.

If you need me before then, let me know via

email, IM, phone, whatever.

Page 41: WRA 210 April 14th PowerPoint

Do NOT take a week off from working on your materials for

class because we’re not meeting Tuesday. You will be deathly sorry.

Remember your sites will be due in 3 weeks.

TiCkTiCktIcKtIcKTiCkTiCk…