Graphics, Media, Content Management Systems (CMS) and Forms

>> male speaker: Excuse me, I'm sorry.
Is that thing on?
Ha, you wish!
Ha, that's right.
Yeah, alright.
Yeah, we got a little bit out of sequence because of the weather
and I gave you some extra time to work.
>> male student: [unclear dialogue].
And actually, actually if you need me to
I can reset your submission if you'd like to take...
Okay, because I may just go ahead and do that for everybody.
>> male student: [unclear dialogue].
>> male speaker: What we're going to discuss
this week, and what you're going to have the opportunity
to work on, are--well actually we can put it
in this frame of reference.
What you did last week was really basic.
There was nothing to it.
It just, by the time you were done you had hand-coded
a website that took you through to some
really blank, really bald pages.
And well it can be easy after you do it
like five or six times.
Yes, so what we're going to work on this week is we're going to
work on jazzing up these pages.
Specifically, we'll talk about graphic preparation,
the way that we install graphics and place media as well,
inside of pages.
Also, content management systems and forms,
which if you end up creating a website for your customer
and they don't have any of these tools implemented right now,
and they don't have any desire to learn what Dreamweaver is
and how it works, they will super appreciate
some of these things.
Because I know that people in the past who used these tools,
and they used them pretty effectively,
so that's what we're going to be covering.
On a side note, I was up until 11:30 last night because one
of the--I like to use free resources and one of my free
resources was just not working, so I had to kind of change
the tutorials that you're working on this week.
But it'll be good, I think that it'll be an important
learning experience for you.
You'll have an opportunity to expand on the knowledge
that we have a little bit further.
Let's first talk about topics of graphics and the reason
why we use them period.
One of the main reasons that we use graphics is
that they inform the audience.
If we place a logo on a webpage or we place a graphic out there,
it should be relevant to the information that's on the page
and also be able to grasp attention.
That's part of the reason that we do graphics on there.
You don't have any graphics on there now,
by the time you put graphics on there and you're done,
people should be able to look at it and say
"hey, this looks pretty nice", "this is appealing",
"this is something that I can work with",
"I could work with these people".
But another thing that we also use graphics for are
design elements, believe it or not.
You'll notice that a lot of the headings, the backgrounds
and everything else that we have in our navigation bar
is pretty plain Jane.
We hover over the top of a link and it switches colors--it
changes from grey to white, shows us which link and shows us
which page should be active, but we'll find out that you can also
use graphics as those design elements using the CSS
and Div tags that you were coding last week.
So if you put those together properly--you've got them loaded
up--then it should be pretty easy to implement some graphics,
some really simply graphics that you created in Photoshop
using the CSS and Div tags.
So there's a variety of different configurations
that you can use.
What we're going to talk about are the configurations
that you can use and also discuss
the preparation techniques for images.
And what I'm actually talking about right here is in terms of
we're just going to use images that we create in Photoshop
for the purpose of graphic elements on the pages.
That's my intent for this lecture and the demonstration
and also for the packet that you have put together.
We should all probably know how to prepare an image
for the web already.
It's pretty simple, we should at least know what
a good image or a good photograph looks like.
So we'll take a look at preparing images
and logos using Adobe Photoshop, okay.
Alright, some of the--what the heck's so,
what are you talking about?
What are you talking about?
Hey, hold on a second!
What are you doing, I'm up here lecturing,
I'm trying to give information to the rest of the class
and I find it to be very disrespectful whenever
you're back here just chatting away, okay.
Alright, let's make it clear right now.
I'm trying to help you learn and I can't help you learn if
you're back there just chatting it up, having a good time.
Alright, so preparing images.
What you should already know is whenever you put these images
together that we need to make sure that we have the proper
resolution and color mode, and file type as well.
That is that, if we remember, that a lot of graphics
that we prepare for the web should be 72 DPI.
We should try to save them in an RGB color format because
it matches the monitor or the output device
that we end up using.
Also, we should design our graphics using dimensions
and pixels, and I'll show you the difference between
designing your graphic using inches versus using pixels
because there's quite a bit of difference between those two.
As far as the formats that are acceptable, you'll use a JPEG
typically for photographs, especially if you want a
smaller file size and you're looking for a lower quality.
PNGs however--which I'm going to make sure that
you use for the tutorials that I've put together.
I like using PNGs better, that's why--I think the quality
that you get is a little bit better, even though it's
a larger file size, but also that issue of transparency.
The ability to have a background color be able to flow through
or show through, it's really important especially for
things like logos that you may put up on your page.
And of course, you can use a GIF.
Those are also acceptable.
I prefer not to use them because they're the
lowest quality that you can get out of a graphic file type.
They also reproduce the smallest amount of color as well.
I think I showed the "save for Web and devices" tool already,
but I can go ahead and show you how that works again just
for your information.
Alright, let me take a look here.
I downloaded an image for us to use as an example.
Oh, come on now.
Oh, here we go, alright.
For the examples that I've put together for you, there will be
some that are going to be basic graphics that
you can put together in Photoshop pretty easily.
For the rest of them, I've told you to go to a stock photo
website, freepixels.com, just to be able to pull your images.
And we can use this just as an example that we have right here.
So the characteristics of this image that we can identify.
First of all, when we look at it and notice that it's already in
the proper RGB color mode, so we're in good shape
for this image if we want to use it.
You'll also notice that the file format is JPEG,
it's a photograph, and I think what I may end up doing with
this photograph later on is I'm going to
use it as a background for my webpage,
so I'll be in pretty good shape there.
What I need to pay attention to is the resolution.
So if we go up to the image size real quick, you'll notice that
the resolution--okay, it's already in 72 DPI,
but we're in pretty good shape for that.
But one of the topics that I have on here is that we need to
design using dimensions and pixels, so these dimensions
right here are doing to be our focus instead of
designing using inches.
The way that this image is set up right now is
it's 25 inches by 16.667 inches, so if we were to
go to print it out, it would be a relatively large document.
The reason that we pay attention to pixel size actually
deals with how the monitor displays information.
What you'll find it is that the majority, or 90 percent,
of the monitors that are used to be able to browse the web
have a resolution or pixel dimensions of 1024 x 768.
What that translates into is if you were going to use
this photograph that we have up here on the screen,
you'll notice that our pixel dimensions are 1800 x 1200.
So they're bigger actually than 90 percent of the monitors
that are used to be able to place it on there.
So what'll happen is if you try to place this photograph
on your webpage, it will get clipped off.
It'll be chopped off, and especially if they do end up
going to a smaller monitor because, believe it or not,
there are people that use 800 x 600 to be able to look at web
pages, and that's going to clip off almost half the image
overall, so the way that we compensate for that is we
take into consideration how much of the graphic
we actually want to clip off.
Knowing that 90 percent of the monitors use a 1024 x 768, I
adjust my image so that the dimensions for the width
and the height either fit closer to the size of the monitor
that I have--that's one of the first things that I can do--
or the second thing that I can do is I'll have it fit
what I call my pre-allocated space, which is the size
of the layout that I actually have allocated.
And if you remember for some of the images, or some of the
CSS rules that you put together, you put in dimensions of
700 x 160 or 250 x 100 or 400 x 150, right?
You've entered those values in your CSS sheets.
Let me open up the page just as an example.
Here we go.
And let me zoom out here a little bit.
So I'm going to take a look at my header, which is up at the
top of my page that I have, and if I take a look at the CSS rule
that I created last week using my header,
you'll notice that the height of it is only 150 pixels
and the width is 690 pixels.
So the image that I have here in Photoshop--
if I tried to place it in a 1800 x 1200, what's going to happen?
Eighteen hundred and 1200 won't fit into 690 x 150,
will it--your dimensions?
No, not a chance, it won't fit in there period.
So what you either have to do is you constrain it--you move the
size down smaller--or what you can also do is resize it so
that it fits the overall image better, and in this case
I think that I'm just going to resize it as an example.
So in this case--it said it was 690--I'm going to make it
closer to the size and I'm going to make sure that
I scale it proportionally, okay, constrain proportions.
That way it fits it.
So you'll notice that the width will match up a little
bit closer and the height will still be a little bit too big.
That's okay, I can get my crop tool, change the resolution to
72 and what I'm going to do is I'm going to adjust my width
to 700 pixels and my height to--what did it say?
It said it's about 150,
so I'll make it just a little bit bigger--150 pixels.
I'll grab my crop tool and I'll drag it across
my point of interest.
Let's try that, let's go with that, see how that looks.
Okay, that'll work.
I'm going to use this as the header for my webpage.
I've just resized it and I'll go up to use the
"Save for Web & Devices" function and I'm going to
save it as a JPEG because it's more of a photograph,
medium quality.
Whenever I go to save it, make sure that I save it to my images
inside of my site root.
I'll give it an appropriate name.
And then whenever I go to place that graphic inside of my
header, as a background image--there you go--
you'll notice that it fits the space that we have allocated
relatively nicely.
Because if I try to do it--let me back up here and show you
what it'll look like if I try to put it in there at full scale.
I'll save this as another version--save it as "header2".
And if I go to place it in my layout now, instead of having
this notice this is the one that I've sized proportionally
and scaled it and cropped it to fit that space,
and I try to use "header2".
See how much my image actually get's cut off,
clipped out--yeah, Shelly?
>> Shelly: [unclear dialogue].
>> male speaker: Yes, the reason that I have
it just a little bit bigger is to account for the other
measurement that you put in there, which is your padding.
Because what padding actually is, if you remember,
it's actually kind of like buffer zone that you'll place
on the inner borders of your Div tag to give it
a little bit of space.
And because I have padding of 5 pixels,
that goes on all 4 sides, so if you have 150 pixels for
your height and then you have 5 pixels of padding
on the top and on the bottom, that's an extra 10
so it's actually a 160 is the size of that space.
Same thing for your width.
You'll notice that it says 690, the padding goes
on the left and the right, so 690 plus 5 plus 5 equals 700.
So that's why I make it just a little bit bigger.
I'm going to switch that back to the original header that I had
for right now.
The other way that I could use this graphic, is instead of
using it as a header, what a lot of people have a tendency to
want to do is they also like to use big graphics or
large images as background images that they place in the
background of a webpage.
We still need to be considerate of the width
and the height of the graphic.
In this case it's 1800 x 1200, but the majority of monitors are
1024 x 768 and--let me also say one thing--
they're at least that big.
This monitor that I have up here in front of you right now,
if I go to look at the dimensions for the way that
it's set up, it's set up for 1024 x 768, but you'll notice
that there are dimensions that go up to 1280 x 800,
1344 x 840 and also 1680 x 1050.
So in this case, if I wanted to try to cover the majority of
ranges--or at least for the monitors that I know viewers
might be looking at them on.
Instead of doing 1800, which I just feel is way,
way too big for a background image,
you can scale it down even smaller to be 1600 pixels,
because 1600 by 1067, even though that won't
cover the entire range, it will cover the majority of the range.
As I probably will go back and do some more research on this,
we may found more statistics that the amount of web users
are actually using monitor resolutions higher than that.
My recommendation is to not use the image at full scale size
because what will happen is for some of the stock photos that
you pull off, they may have an image size--if I can pull it up
here--they may have an image width and
height of 2300 pixels or 2500 pixels or 2800 or 3000 pixels.
That's much, much too big for a background graphic
and even too big to try to use in a layout.
That's why we scale them down smaller to either dimensions of
1600, to be able to fit better on the page
or we fit it to the pre-allocated space.
The pre-allocated space was the first example
that I had shown you.
This second example is what you would do in the case of
using it as a background image.
So I'll go ahead and save this and I'l save if for
Web and devices.
And whenever I save it, I'm going to save this as
"background", okay.
And then whenever I go back into Dreamweaver to insert it--
let me see if I've got a, here we go, my body rule.
I'll apply another CSS rule, background image, background,
whenever I say "choose" you'll notice that it fills the space
behind our website a little bit more fully.
That way you don't have the unsightly color in
the background, it fills it up, makes it look
a little bit more presentable.
So that's the reason that we have to
design graphics using pixels, not using necessarily just
the image that we pull off a website.
We always have to scale them down to some extent,
so either fit it to the pre-allocated space
or fit it to the background of the layout.
Questions on that.
That's strictly just for photographs.
Now, there is another sort of a background graphic which you'll
find or use very frequently in your navigation bars.
And these graphics are considering the heights
and the widths of the page and the Div tags
that contain the content.
The background graphics that I just showed you actually,
you have a fixed width and height to fit
that pre-allocated space,
which you just place it once and it doesn't repeat itself
on the page, It just stays put.
Those are the examples that I just showed you for your header
and then for your body, for your background.
But another commonly used graphic type is also
a fixed height, okay.
This graphic you don't have to make very big.
You'd actually be kind of shocked at how easy it is
to be able to make these graphics and all they do is
they just repeat themselves on the x-axis.
Now the rules for these still apply for the color mode,
the resolutions and the pixel dimensions, okay.
And I can show you how quick and easy these are to create
and to implement.
Really the only new CSS rule that you'll be applying this
week will be one that just says background image, that's it.
You won't have to apply anymore.
I will show you that you can go back and you can manipulate
some of these CSS rules to make your page look
a little bit more appealing.
Now in the packet that I've given you, I've given you these
dimensions as well to be able to create the background graphics.
Let me show you first of all what you probably
ended up with last week.
Let me see where I'm at--here we go.
What you should've ended up with for your navigation bar--
that's what we're focusing on--is something like this.
You'll notice that you've got the home activated,
then whenever you click on another link, that'll switch.
It's kind of plain, there's not really anything that's
popping off of the screen.
Just as I inserted a background image up here for the CSS rule
for the header and also for the body, you can do the same thing
with your navigation bar, but photographs don't work the best
because photographs really don't have a whole heck of a lot of
contrast that makes it easy to be able to view them
or see them.
Kyle, are you on your phone?
Okay, what's that in your hand?
>> Kyle: [unclear dialogue].
>> male speaker: Why today, Lord?
Alright, so these graphics are easy,
super easy to be able to create.
The dimensions I've given you in this packet that I've
put together for you.
I think the really popular thing to do is you see something that
kind of looks like a gradient, you'll see a navigation bar
that looks almost 3-D.
Those aren't really difficult to do.
If I go up to create a new document, we'll make sure that
we follow our rules that we have set forth which is the
resolution needs to be set properly
and then we also design using pixels.
This example that you're given is actually an example of,
it's going to have a fixed height but it's going to repeat
itself all the way across the graphic.
So in this case it's only going to be 5 pixels wide
and 27 high--why?
Because if we go back and we look at the navigation bar,
you'll notice that the height that we have set up is
27 pixels wide right now but the width itself
is actually much larger-- It's actually 700 pixels.
So instead of creating a graphic that fills that entire space,
we actually create a really small graphic and it just
repeats itself all the way across the page.
And it saves time and information.
So I'll make a graphic, make it transparent--
doesn't look very big right now.
I'll go up to my navigation bar and, in this case,
I'm going to do this.
I've got two colors picked out here, just two varying shades
of grey, just because I'm trying to stick with the same
design that I had before.
I'm going to ask you to customize your entire site
whenever we're all done with this lecture here.
I don't want it to look anything like what I did.
I'd prefer that you use the principles of graphic design
and also color to be able to put together a
pleasing color scheme.
That's what I'm looking for, that's ultimately the goal.
I'll put it together, I'll get the proper gradient tool and I'm
just going to drag from the top of this window to the bottom,
holding the shift key, because that'll make everything straight
and it will make a graphic that's just filled with a
lighter grey to a darker grey.
Then whenever I go to save it for Web and devices, I'll save
it as a PNG because I want the transparency to show up
and I will call this "navlist.png".
And then that "navlist.png" will correspond with the
CSS rule that I created last week.
We go to add a property and then I go to insert my graphic.
Look at that.
So it's a little bit more three-dimensional
if you're looking at it.
There's a little bit of trans--, it's a little dark.
I may have to go back and change these colors,
but it makes the navigation bar pop off a little bit
if you try to make it look like it's three-dimensional.
You can do the same thing for your rollovers as well.
In this case, let me actually just do this.
I'm just going to lighten that.
Oh, wrong spot, "Save for Web & Devices".
And that's going to be for my hover rule.
Navlist, hover, save it and whenever I go to place it in
Dreamweaver--background image, navlist, hover, there we go--so
it shows the difference between the two graphics
and as you roll over there's a little bit more contrast that
actually shows up between the graphics.
The graphic's not very big.
Once again it's the same height, but it's a much smaller width
and it just repeats itself across the entire link and
it also repeats itself across the entire navigation bar.
You can also do the same thing for your footer if you were
really really inventive, if you just wanted a footer.
That looked a whole heck of a lot better.
You would just go to your footer
and let's take a look real quick--how big our footer is.
It's 50 x 690, but it's got a padding of 5 all the way around
it, so in this case I know that 50 plus 5 on the top, 5 on the
bottom is 60 and then the width will be 700, but that's
unimportant so I'm going to go back and create a new graphic.
That's actually 60 high, transparent.
I'll jazz up my color scheme so that it's
a little bit lighter--that's not enough for me.
There we go.
Get my gradients tool, hold the shift key--actually I'm going
to do this from the bottom up so that it looks like that
and whenever I go to "Save for Web & Devices"...
Let me go back and insert that.
We called that footer, right?
"Choose", there we go.
Oh, and that's probably not the best.
I thought that that would've looked a lot better than that
but that has to deal with the color of my links.
But it starts to make the page look
a little bit more dynamic, okay.
It's a little bit more appealing by the time you start to
add some of those background images into there.
So that's how we work and we design with background graphics.
That's going to encompass sections 2 through about 4
of the packet that you'll be working on.
Now another item that you may prefer to use on your
website--sure graphics are cool, you can put a PDF file on there,
you can also put your images or photographs on a web page.
That'll work, but what's also kind of interesting
is to embed media.
This is a really kind of hot thing for us to do.
You've got all these tools that you use on Facebook that
you might embed an app or say that you like this
or that you might put a map for a business or a location
or other sorts of information.
If it's a YouTube video of an event, of a concert or something
like that--people like to post those, we like to share those.
Those Web 2.0 technologies are really helpful and they're kind
of a hip thing to do especially with people about our age.
It works for us, we understand that if you're on Twitter or
Facebook that's a common social media tool that we like to use.
Those are super easy, by the way, to place
inside of your document.
A lot of times, all it requires you to do is just
to find a free tool, enter information from a few fields
and you're ready to go.
It can be things like video, it can be maps, anything from
Facebook or Flicker or LinkedIn or even Google's calendar
function--people put all of that information in there, and the
coding languages that they use on the back end of it actually
uses a lot of Java script, IFrames and AJAX.
We don't get into a lot of that, but we can get into, in this
class, how to implement these--relatively easy and
appealing way that will appeal actually to your customers.
Alright, let's take a look and see how easy some of these
are able to do.
I swear to you that the majority of this is either just entering
information or just copying and pasting code in the right place.
It's not that difficult to do at all.
Tell you what, how about simplest thing--and I'm going
to throw out examples that your customers may actually want
in their website.
Because it's important that these skills that you
learn--sure it's good for your own personal development,
but it's a lot better for transfer of knowledge,
to transfer it into the project that you're doing
for your customer.
So, let say, as an example, you need to find on a map--
I'm just going to throw one out here--
Joey's Place, Charleston, Illinois.
Okay, here we go.
And I just use this as an example because it's family
and they have really sweet brownies.
I'm actually kind of shocked that none of you went
and talked to my cousin Mark about being a business forum
because that guy right there,
he's got tons of stuff that you could use--really disappointed,
that's okay though.
So if we pull up your business on Google Maps--we do a search
for it, figure it out--what you might think is
'oh, well what if I just took a picture of that
and I put it on the website?
'That would work, that would suffice the need
to show people where it is.'
It's actually a lot easier than that.
If you see this spot over here that says "link" on the side?
If you click on that, and then you see this spot where it says
"Paste HTML to embed in website".
Well I'm just going to copy that, and I'll go over here
and I'm just going to use my home page as an example.
And I'm actually going to put some space in here.
Go to paste it right here.
It's inside of my left tag.
It should hopefully fit, and whenever I press "F5",
nothing is going to show up in Dreamweaver.
That's okay because the majority of these embedded media links
won't work or won't display in Dreamweaver.
However, whenever you go to preview them they show up
just fine provided that you have an Internet connection.
And it'll have all of the information that
you need there, okay.
So that's a really easy one to do.
Let's do another one real quick.
Actually I think I have the links here somewhere,
I'll just bring them up because I don't tell which one
of these to use specifically.
I throw probably 5 or 10 out there for you to look at
and then you can read the resources,
so in this case Facebook.
A lot of businesses or places like to have
that little "Like" button on the side.
They like to say 'hey, people like this place, it's awesome'.
So let's take a look at it.
Social plugins--oh, here we go, the "Like" button.
Sign up, see what you are like--I'm going to go ahead
and click on this.
"Get Like Button Code", okay.
So, I'm going to use EIU as an example.
So in this case I'm just entering information--
showing me what standard, shows me what the counter is,
got a box that it counts.
So it's a got a few different styles that you can use.
You can adjust the width--in this case,
I don't think it's necessary to stick just that one little
box over here in the left side because it's so big.
I'd probably drop it over here on the right-hand side, okay.
That would probably be more appropriate.
If I look at this for my right tag, I'll notice that width
is only 185 pixels, so I'm going to make it fit that space--185.
We're going to change it to "recommended",
and what kind of font am I using on my website now?
Looks like an arial, so I'm going to switch it to an arial
and that dark color seems too--well, let's try the dark.
I'll say "get code".
Copy that code.
I'll go over here to my right tag,
and what I think I'm going to do is clear out some of this.
F5, once gain our media isn't showing up but whenever we
go to preview it, there you go.
It shows up in that little box over there on the side
and if you click on it, it'll ask you to log into Facebook,
so it's doing its job, it's getting the connection,
it's getting the familiarization with the social media tools
that you can use.
That was Facebook, Google, what else do I have up here?
I found a lot whenever I started to look through it.
YouTube's super easy.
Actually you don't even have to do this.
I'll let you have your own fun with that later on,
but you can also imagine if they've got training tutorials
or an event that they really wanted to highlight.
I know that some of my students,
they did some work for Jackson Avenue Coffee.
One of the hot things that they like to do was their
open mic night, so they put some videos inside that website
and to be able to do that, they make it really easy.
You just say embed, it gives you the code right there,
and if I go back into Dreamweaver--let me see,
I want to follow this right here.
Paste it here.
And it's a little bit big, I want to make it just
a tad smaller.
Ta-da, and it's right there in the webpage
so you don't have to go out and seek it.
They can have that information right there.
You've got a lot of these different tools laid out for you
to be able to work with, to be able to embed media
in a tutorial.
If you find some other ways or some other media for you to be
able to implement, then by all means go ahead,
but I found some things that you can do with Twitter.
A lot of companies will have a Twitter page,
they might even have a Flickr if they've got a lot of pictures.
If they ask you to develop something because they say that
instead of putting pictures on the website just take a whole
bunch of pictures of their company,
create a Flickr page for them and then you can
embed a slide show right there within that page.
It's really easy for you to be able to do.
I do have a generic one down here at the bottom that'll tell
you just about how to embed anything,
but anything that's out there, effectively,
you could probably put into the website.
So you'll need to make sure that you take a look at that,
especially if you're trying to improve the interactivity
and trying to grasp attention because text and images,
that'll do okay, but you put a video,
you put a little bit of sound and some interaction
inside of that site--gosh that just makes it a whole heck of
a lot better and it'll really impress your customer
that you end up doing your work for as well.
I do have a tool that I also use that's sort of like
an embedded media, but it uses Java script for you
to be able to do the work.
This is s scripting language that makes sites more dynamic
and interactive and the reason why I kind of introduce it here
is because a lot of devices, they don't--well, I'm sure that
we probably all heard the debate of why Apple,
it won't support Flash media.
Because they say that it's not universal, it burns up a lot of
battery time on your devices and everything else, okay.
That's one excuse and it's for good reason, but Flash,
I do have to agree, is not universal, whereas
things like CSS, Java script and Div tags are universal.
You can use those on any mobile device and on any computer.
They're understood by just about anything that can interpret
HTML, so Java script is one of those interactive things
that we can use to make your sites dynamic.
And the tool that I've actually got to introduce to you is
called Lytebox, and you might be familiar with this already.
If you have an image that's on a webpage and you click on it
and it pops out of the page, makes itself
a whole heck of a lot bigger and then it rocks, okay.
It's absolutely amazing and it's not really that hard to do,
providing that you can just cut and paste some code.
That's actually how I learned of this tool and it seemed easy
enough to be able to teach and implement in these classes,
so for me to do this--wait a second, let me make sure that
everybody's got this down.
I'm going to go back to freepixels.com real quick,
and I'm just going to grab some other photographs
maybe to work with.
How about we go with architecture,
I'll grab this house.
This is kind of a cool looking house.
I'll download that.
And let me see.
Alright, this is kind of cool as well, I'll download that.
I'll download this building real quick.
They keep popping up on me as soon as I download them.
Here we go.
And let me see if I can find one more.
Maybe this, it's kind of interesting.
Yeah, there we go.
So, let's see...
That one download-- yes, it finally did.
So I've got a few images here that I've downloaded from
a stock photo website.
You may end up working with images that you either have to
take at your customer's location or you may have to end up just
pulling old photos that they have and scanning them
or if your customer says "I don't have anything,
I don't think you should take any pictures from here,"
see if you can find some good stock photos.
You'll come to the place that I've just shown you right here,
it's freepixels.com.
That is an error in your packet.
I put it down as freepixels.net.
I'm sorry I get my .nets and .coms confused sometimes
because a lot of the free resources that I use
vary between the two of them.
So I've got my four graphics, take them into PhotoShop.
Okay, okay, okay and okay.
First thing I'll do is I'll make sure they're the proper size
and resolution--1600 x 1200 is way too big.
I'm going to scale these down to about 500
so that it better fits my pre-allocated space.
The place where I'm planning on having these images go
is right here in the left tag.
If you look at the size and restraints of the left tag,
it's only 475 pixels wide so I've got to make it
a little bit smaller to fit in that space.
Otherwise, it'll chop it off or throw everything off.
So I'm going to change that resolution,
"Save for Web & Devices" and this is a photograph
so I'm going to save it as a JPEG.
We'll call it "image10".
"File," "Save As," "image"--no, wrong spot.
JPEG, "image11", save that.
"File,"Save As," no--why do I keep doing that?
Command option, there we go.
Wait, I didn't change the resolution on this, did I?
I'm getting ahead of myself.
"Image12".
And finally--there we go.
And "image13".
Saved them all, proper size format, proper file format
and they should all be saved inside the images
folder inside of my root.
Let's take a look real quick, images--
there we go, 10, 11, 12, 13.
So my images are prepared, that's the important part
of being able to put those together.
I think I actually have you prepare your images
before you play with the Lytebox.
The Lytebox only requires you to cut and paste things
into the right place, and just re-name a few things,
so it's not tough to do.
In this case, what it will tell you to do first of all is you
have to find the head tag in your document and copy and paste
this code.
Where's my head?
Right here, oh and it looks like I pasted it from the last time
I was here--that's okay, I'll go ahead and paste it again.
Make sure that that matches up with what my instructions say
they should--that's correct.
After that it says "copy and paste this example first", okay,
so the example number one.
So I'll just copy that code and it goes inside of my left tag.
Put some space in here, copy that code.
What's going to happen by default is it's going to say
'I can't find a graphic,' it'll give you the broken link,
the broken error message, okay.
To be able to fix this is really kind of super easy because all
you have to do is just find the graphic that's supposed
to go there now, and in this case I'm going to do "image10:
and scale that down.
So I'll scale that down and then I'll also change my link to
"image10", so I'm only changing two pieces of
information in there as well.
So the code is relatively easy to go back and fix.
There are also some resource files which you should have
copied to your drive earlier, but then as soon as you have
the code in there, scroll to the bottom of the page
and I go to click on it, then a larger image will
actually appear.
That's just a single image example.
It has you also do a multiple image example,
which isn't difficult to do at all.
it's just repeating the same information again.
Just copying the code, going into Dreamweaver,
pasting the code.
In this case, I'm going to make things a little bit quicker
using the "Find and Replace" file name 11 [unclear dialogue].
Say "Refresh", and it automatically replaces
the graphic there.
"Find and Replace", this is a handy tool especially for
some of the things that you're going to be doing.
If you just need to change one bit of code throughout your
layout, which I have it set up here, then all you have to do
is just make sure that you're typing it in right,
so "image12"...
Not found.
[unclear dialogue].
It's not working properly, so I can go back
and just do this manually.
"Image12", here we go.
And 13.
Okay so all I did was I just copied the code,
just updated a few links and then instead of just having
the single image example pop up, it treats it more like
a slide show now and I can click through
and view the different photographs.
So it's another form of interactive media that you
don't just cut and paste from the website.
You just actually cut and paste from the document that I've put
together for you, and then just make some changes in the code
and it's relatively easy to use, but embedded media--
this picture probably would be just as effective like it is
here, but it's not as dynamic as whenever you click on it,
so what most people do with slideshows is they'll put
a line of text over the top of it that says
"click for a larger view of the image" and that makes it that
much more dynamic for your customer to be able to use that.
And it's really very easy, very simple for you
to be able to implement.
Almost there, only got two more topics I want to cover
here real quick.
Now, of any of the things that you can do to your website--
and I mean anything that you can do to make your customer really
appreciate all the work that you've done and that you've put
in for them--it is ultimately putting a content management
system in place for them to be able to use it because just
about everybody that you're working with probably won't know
how Dreamweaver works and they won't have $200
to drop on that to be able to do maintenance on their website.
Now they probably are pretty proficient at using
what we call WYSIWYG interfaces, okay, which is
"what you see is what you get".
It's just a text editor like Microsoft Word to be able to
update information and really all they'll update is
they'll update things like links on a web page,
they'll update some images, they'll update text
from time to time.
If they've got specials going on, they'll put
hey, we've got a fried chicken special, fish fry or
we've got another event coming up this Saturday night, okay.
They can do that on Facebook, but if not every body looks at
their Facebook page, then they'll go to their website.
And you can embed Twitter as well, but this is just another
means of being able to update the website as a whole, okay.
So a CMS you'll hear me call it, or content management
system--it's going to allow a customer or a user, an end-user
in this case, not a person who's going to be a developer
or coder, to be able to publish, manage
and organize a variety of content on a website.
It's going to save your customer time and money obviously because
they won't have to be frustrated from going around through
Dreamweaver and also the money aspect--
they won't have to invest the money into buying the package.
Also, the CMS that I'm going to introduce you to--and you'll
find out that there are a lot of them that are free,
absolutely free--everything that I try to do,
I try to make it free.
It also means that you don't have to have a
whole heck of a lot of knowledge about coding for the Web,
which is really good.
So things that you can update using this editor are text,
images, links and then of course you have other information
like your embedded media.
Your embedded media, you get to actually do through the content
management system, which is actually how I have it designed
in the packet because there is an ability to cut and paste
HTML code into your page using that WYSIWYG editor.
The specific content management system that we're going to use,
you'll find that a lot of the information is transferrable to
just about anything else.
To build a CMS you'll find out it actually requires a whole
heck of a lot of knowledge of programming languages
and databases like PHP, MySQL,
something that we don't touch on in this class,
but we do have free downloads that are available.
If you've ever used Joomla or you've heard of Joomla,
that's a content management system.
Wordpress, I know a lot of people use it for blogs.
Drupal, Mambo.
EIU actually uses a tool called OmniUpdate to be able to
maintain and update websites that I think the problem got to
be that there weren't enough people proficient in Dreamweaver
for who the people who were responsible to be able to update
these pages, so they went to a content management system
because all it really requires is a username and password
and just some knowledge of how to use Microsoft Word,
and they were able to update their pages,
create pages relatively easily.
They're free, some are really difficult to set up
and require server and database access.
The CMS that we're actually going to use, all it's going to
require you to do is set up your pages,
just defining what regions or what parts of your page
you want to be edited or editable and then
all you have to do is define what your FTP connection,
that's it.
After that then it's pretty much just click and drag,
type and click "publish" and it will be good to go for you.
Alright, give me a second here.
One of the things that I found out specifically was that
some of these free tools that I'm using, they don't interface
with the EIU web server as well as I thought that they would,
so it's going to require us to have to go ahead
and get a free hosting site.
So I've actually set up one, or found one, that you can go to,
don't have to pay any money and it will work for our purposes,
so I've just got to upload some files here real quick for that
hosting site, so if you'll give me one second here...
Alright, and then disconnect from this connection
and open a new connection.
The website that you're going to have to go to
is called zymic.com.
Z-Y-M-I-C-dot-com.
And you'll have to set up a user, host
and all that good stuff.
So, Grant.zymichost.com.
Oh, let's see if you're going to work today.
Gorgeous, let's take a look real quick here.
I'm going to dump some of this stuff that I had in here
from last night whenever I was testing.
Oh, are you going to take forever?
Probably, I should've anticipated this.
Here we go, and in this case this is the root
of my hosting account.
It's a little bit different than EIU--
you don't have HTTP or WWW folders--
but this will still work to serve our purposes,
so I'm actually going to drag the content out of the folder
and copy it to my hosting.
Oh, come on now, you can work a little faster than that.
That's okay, while that's uploading I can go ahead
and show you the tool "CushyCMS" that you'll use.
It's kind of a sweet little graphics that they have
for their logo, right?
Nice little couch with a tag, a closing tag right there
at the end.
I thought it was clever, okay.
Now, the way that this tools works is--
I had told you earlier that you had to establish some sort
of a setup and that set up actually has to take place
in the code for your web page for it to be able to recognize
what content it can edit and what content it can't edit.
Does anybody remember putting the code editable at all?
Class equals editable for the left and--oh, don't tell me.
Oh no--that's alright, we've still got all of
the information here, I can roll with this.
Well, we've got to go back and modify that just slightly
because the source I had before isn't going to work
but that's okay.
So I've got it set up in the packet where you'll do a simple
find and replace and what you'll actually do is
you'll replace editable with CushyCMS.
Now the purpose for this is actually, what Cushy will do is
it will go through and it will scan all of the pages for your
site and whenever it finds the word CushyCMS
inside of that Div tag or that class like that,
it says "oh, well I can edit everything in this Div tag".
That's what it does, it goes out and searches for that--
it's a pretty handy tool.
A lot of other content management systems,
the free ones, they just look for that class equals editable
and then they'll say "okay, I can edit that spot"
or "I can edit that tag", so that's all you're looking for.
That's the only thing you have to do to be able to make a page
recognize certain parts, okay.
So I'll go ahead and log in.
You'll need to create an account here--and it's already up,
I've already got it configured.
That's cool, I can go ahead and roll with this, okay, but you'll
go ahead and you'll add a new site and the information that
you'll actually end up entering is just your URL,
which is the address for the website,
then you'll enter the FTP information.
That's it, that's all you have to do.
From this information, what Cushy actually does is it says
"okay, I've got an FTP connection so instead of
you using Cyber-Duck to go back and forth to pull
those files back and forth, I can access it".
So once you have it set up, then you can go through
and you can assign your pages.
And in this case, let's look at my index.html page.
Okay, I'm going to select that, I'll give it a name--
this is my index page.
Then I'll be the allowed editor
and I'll say let's assign this page.
Thank you--it was hanging up on my last night.
I was really worried that it wasn't going to work tonight.
But I've got one page, I'll just go ahead
and add a couple more pages just so you can
see how easy this is.
I'll add my contact page as an example.
Contact page--really all you're doing at this point is you're
just telling Cushy what pages it can access and edit
and what pages it can't access and edit.
Say I didn't want it to go to my print page,
I'd just say I'm going to remove this page.
Then I'll add one more page, let's add my resume page
as an example.
I'll assign the page.
The reason that you go through and you add these pages to this
is so that you can go back and modify the content.
Now the way that these web pages have been set up right now is
you only give your customer or yourself access to
two areas of content, okay.
The areas of content you give them access to are to the
left and the right tag, the left and the right side of the page.
The reason that you want to do that is because if you gave them
access to the whole freaking page--if you gave them
access to the header, the navigation, the footer--
the odds are that they'll screw it up.
And I'm not trying to be mean or anything or trying to
put anybody down here, but that's generally the case.
And really if you put the navigation together correctly
for your customer, and the footer and make a good header
and the background and everything else,
then all they'll ever need to touch is really just
the left or the right side because all they're doing
is just updating information consistently.
So let's take a look real quick at the page as it is right now.
Let's look at my contact page, see if it shows up--here we go.
So my contact page is completely blank, okay,
that's what it's showing me right now.
It's hosted on zymic--that's the only thing that's going on,
so let's put some content in here because that's
the whole idea behind the content management system.
You want some graphics, you want some text,
you maybe even want some embedded media.
So I'll go over here and I'll click on the text directly.
Up should pop the left and right tag and your WYSIWYG editor.
Looks a lot like Microsoft Word.
"What is going on?"
Okay, you can add text real easily, highlight it, bold,
italic--if you need to create a link, just highlight the text
right here, you got a linking function built in right there
and you just type in the URL where you want it to go to.
Ta-da, and then you've got a basic link.
If you want to insert an image, let's say it's an image that you
have located on your computer.
You can go up here to upload the image,
choose whatever file you're looking for--
let's try this one real quick, I'll choose that.
Send it to the server.
You can resize it--maybe I'll only make it 300.
I can put a border on it--align it to the left side of the page,
no, maybe I'll do it to the right side.
I'll call this "quid pro quo".
And what else do I need to do?
I can put some other information here as well,
but as soon as I have it, I say okay.
The graphic's posted right there on the page.
You can continue to do some other things.
Let's say, as an example, I go back to my Facebook "Like" thing
and I need to paste that HTML code in this browser.
If you take a look up here on this side, it actually gives you
a source view, so it shows you the HTML code that you can use,
so I can delete all this--actually, in this case,
I may just use the, that right there.
I'll paste that, I'll make that smaller to fit in my spot.
Shows up and I click "publish page" and it says the page
was saved, and if I go back to look at the contact page
to see if it's updated, there you go.
Your graphic shows up, and I probably should've made that
map a little bit smaller to fit that space.
Gosh, Nate is out--look at that guy.
We were here for like 10 minutes just looking at you.
You started to snore, too.
>> Nate: These chairs are comfortable.
>> male speaker: You can sit on the floor
Indian-style, we could do that.
But that's as simple as it is, so if...
Like a lot of people have anxiety, really a lot of
anxiety--they don't feel like they can do Web design period,
if you just give them access to Cushy CMS
and set this up for them, they can update the information
themselves just as they need it, or as it's necessary,
and it's really simple to use, really easy to implement.
One that I ended up--I work with this place a lot--
is the Newman Center there at the edge of campus.
And they like to use it for their Facebook and Twitter.
They included a Flickr slideshow as well that shows up
on their main page.
They also put in their mass schedule,
any special events that they have.
I won't mess it up because they've got stuff going on here,
but you can kind of see what their page looks like right now.
So if they needed to they could go back and modify
any of that content at any given time, which really works well
because the guy there--I don't know
if any of you go to the Newman Center--Roy, he's kind of a nut
and he doesn't know a whole heck of a lot about technology.
He's kind of anti-technology, as a matter of fact I was actually
the one that set up his Facebook page
and he didn't even know about it for like two months,
but it was awesome.
But he uses is every day now, just like he uses this
every day.
Your customers, if they have a wireless internet access they
can sit down on their computer and do this.
Actually, I think this tool is so effective that if you have an
iPod touch or an iPad, you can actually update it right there
through your iPad--it's really super powerful
because it runs on that back end information.
So that's the content management system--super super effective
at helping your customers update their pages.
If you put this in their for them--if you get them a free
hosting through zymic, you put a Cushy CMS in for their
web page--I guarantee you they're going to be pleased,
they're going to be shocked.
They're never going to have this much access or control over it.
What else--I think I've only got one more content topic to cover.
Cushy CMS--well, one thing I do want to say about Cushy SMS,
that it's a service, okay.
If your customer wants some more power or to be able to brand it
a little bit more, they'd have to pay money, but right now,
the way that you'll set it up and the way that
I'm setting up everything, is it's absolutely free.
This is free, free, free, okay.
All they have to do is set up your FTP connection
and you can go.
That was not a difficult demonstration at all.
I just entered some information and that might be
the biggest problem you have is just
"oh where do I enter this information?"
At some point, it's going to become automatic for you.
You keep repeating these things over and over again,
you'll see how it works.
The only downside is that some people say that because it's
accessible from any computer anywhere,
that it's less secure and they are right about that.
Somebody, if they really wanted to, they could go after your
password with an email address and see if they could access it,
but that's inherent with just about anything.
If you have a Facebook page or a Twitter page or a GMail
or anything else, people can hack into that
if they really wanted to.
Once again the advantage, it interfaces with the Div tags
you built last week into your site, so it's super easy.
It's not even difficult to do it.
You'll just make one change in the code for the class
and then you can update your site, but your text, images,
media can all be done and you don't have to be
a rocket scientist on how to use it.
I guess I just can't emphasize enough the importance for
your customer that whenever you put together your final website
for them that you give them this service,
you give them access to this because it will probably be
one of the most important and vital tools that you can use.
Alright, one more thing.
Sorry, I'll back up, because I saw that
Ashley is still writing.
But the last thing that we're going to cover is
the use of forms.
And I think in 1363 you probably created a really basic form
using Dreamweaver that was really kind of clunky
and I'll go ahead and be the first one to admit, they are,
I don't know, I don't like making forms in Dreamweaver.
They're really tough and they don't always look pretty
by the time I'm done with them.
I've got another tool that's available for you that's going
to make it easier to be able to collect information, okay.
And that's the whole purpose of a form, whenever you fill out
a form online, people are collecting information.
You're filling out an order saying
'hey, I want to purchase this item'
or you're inquiring about more of the products and services.
People want to fill out forms most the time
because the anonymity--
you can be anonymous and provide feedback to a person.
It's also less forward than a phone call.
Whenever you pick up a phone and you try to call somebody,
sometimes you may not always get a person or you may get a person
you don't want to talk to, okay.
So I think that's just a generation thing--before,
my folks, they wouldn't have a problem picking up a Yellowbook
and calling but now I don't think people make phone calls
as much as they used to to businesses, although I will say
my brother-in-law, he called up like 300 places, which was
really weird just cold-calling after he graduated to get a job,
and he ended up getting a job that way.
It was kind of creepy, kind of weird.
It's a lot faster than sending a letter as well,
and it's more private than an email.
Again, you can have forms set up so that they're completely
anonymous and we use forms for surveys or for
online orders, for feedback or just maybe
to send a quick email message.
Now the way the majority of your forms work,
if you remember using Dreamweaver,
is that whenever you click the submit
button on a form, it usually launches your email application.
That's the way a majority of them work,
so either Outlook pop-up, or mail or any other email client
that you have installed on your computer.
which is horrible.
Nobody wants to send an email using their
personal email account.
What they prefer to do is whenever I say 'hey, submit,'
it goes through the browser and it submits the file
like I want it to.
That's what everybody wants an email form to do, but
unfortunately to be able to do that actually requires a great
deal of knowledge of PHP and MySQL, which if somebody
wants to finish my sentence here about PHP and MySQL
in this class--Sarah, are we going to be dealing with it?
No, nada, so what do you think I probably have for you that will
allow you to process a form right there in a browser?
You could probably put the word "free" on the front end of it
and you could also probably put "easy to use" on top of if
and then the third thing is you'll have to create account.
It's a form processor.
And these are not as common as your content management systems,
but they're still pretty frequently used.
The first scenario is the one that I talked about that
we learned how to make in 1363.
It's a fundamental idea for foundation for knowing
how a form works.
The hardest ones are the ones that you have to code through
PHP, and I'll go ahead and tell you that whenever,
because I don't do it very often, I'll literally spend 20,
maybe 30 minutes just to change an email address
because what a form actually is, whenever you do it in PHP,
it's not just one page, it's actually a combination
of three pages that you have to change and update.
So it's super tough, super difficult to do.
You use these PHP form processors and combine your
knowledge of HTML coding and PHP servers--
it's an external service like a content management system,
so you actually, whenever you click submit,
their server processes the form and sends out the email
however you need it to go.
Alright, let's look at how easy these are to work with.
And the great thing about these too is that all you're doing is
cutting and pasting HTML and you can cut
and paste it directly into your content management system,
so that's why they're handy to use.
The tool's called Response-O-Matic--
you'll have to set up account here.
I know--set up account, set up account, set up account.
I wish there was one universal tool that we could use--
maybe I'll work on it, maybe I won't.
If we click on the icon to create a new form,
let's give it a new name.
And they've upgraded this a little bit,
so my screen captures might be a little bit out of date.
Hello, I just put it in here.
Oh, what's my password?
Okay, here we go.
Oh, here we go, so by default it will pop in a couple of fields.
It'll say 'hey, put your name and email address down here.
Okay, so that's really easy to do.
You can modify these, you can make them required or
non-required fields--it's really user-friendly interfaced.
You need to add a few more questions, you can do a short
answer question, if you do a long answer it'll give you
a bigger text box, give you radio buttons, select box,
which is a drop-down like that.
Pop in your answers.
[audience laughter].
Don't tell my wife, okay.
So we save and then you can see how those work.
You can add whatever forms you need to.
You'll say continue.
You'll probably want to show them a thank you page
and then you might want to re-direct them
to a website--generally, back to your personal website,
which I forget what that is exactly.
You can also send an email to yourself telling you
'hey, you got a new form'.
This would probably be for the business owner.
And then if you pay for it more, they actually add some of these
other things like, you know, SMS, text message--
that'd be a really hot thing to do [unclear dialogue].
Say continue, bam, that's HTML code.
Copy, contact, left side, source, paste.
Oh--copy, paste, there you go.
Go back, automatically it pops it into your page.
You say publish, it says okay, you look at it,
it's right there.
And then, whenever I click "submit form",
instead of bringing up that annoying message, it goes out
and it processes it for you right there in the browser.
Unfortunately, one of the problems with using free things
is there's ads.
Continue, continue, there you go.
So the information automatically is directed, sent back to
your email account and then you can go back through
and you can actually see the submissions, you can view them.
So here's one right here, okay.
So what we'll have in store for Wednesday and Friday of this
week is I've got a packet put together on WebCt.
It's really just an extension of what you did last week,
so you'll need to make sure that you have your files, okay.
If you accidentally took last week's quiz--and I apologize,
I went back and I updated the date on it--come see me
and if you need me to reset your submission, I'll be more than
happy to do it, okay.
[unclear dialogue].
Yeah, you'll probably do better the second time too.
[unclear dialogue].
Yeah, I'll go ahead and put your name down.
I'll reset it.
What's up, Dennis?
[unclear dialogue].
Yeah, can you bring me a pamphlet from the funeral?
Okay, we'll be good then.
[unclear dialogue].
Look away for a second, I don't want you seeing.
Yeah, you took it and you did pretty well on it.
You got a 28 out of 30.
If you want to leave it like that, we can leave it like that.
Okay, yep.
[no dialogue]