wra 210 april 14th powerpoint
TRANSCRIPT
![Page 1: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/1.jpg)
![Page 2: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/3.jpg)
![Page 4: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/6.jpg)
![Page 7: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/8.jpg)
I'm just wondering how I should start.
![Page 9: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/9.jpg)
Very carefully.
![Page 10: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/22.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/23.jpg)
Sometimes that doesn’t go quite right.
Which sucks.
But it happens. Particularly with fluid layouts.
![Page 24: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/24.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/28.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/32.jpg)
rollover text effects, layer text effects, how to really make my
text shine...
![Page 33: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/33.jpg)
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 35: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/35.jpg)
And two of you asked: I need help with drop down nav
bars in Dreamweaver
![Page 36: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/36.jpg)
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 37: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/37.jpg)
Go here: http://lwis.net/free-css-drop-down-menu
we’ll pick one to play with.
![Page 38: WRA 210 April 14th PowerPoint](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/38.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/39.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051400/55a2b60d1a28abee0c8b46ab/html5/thumbnails/41.jpg)
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…