Tip:
Highlight text to annotate it
X
Hi, this week we're going to be working with images. We're going to be using Fireworks
CS6. You're going to be focusing on how creating a page banner, the gradient background,
and a concept map. A concept map's basically ... it's been described
as a graphic tool for organizing and representing information knowledge. They allow us to see
the big picture of ideas that are related to a particular concept. An example is right
here. You can see a concept map where Web 2.0 is the big concept. Then the sub-points
below it. You're going to learn how to create something like this in Fireworks
and then bring the image into Dreamweaver and actually make each little spot clickable.
So this is an example of the type of project you're going to be doing this week.
In this project, you will create a Web page that integrates an image with a concept map
drawn on it. The image will be inserted in a Web page, and the image map will be created
to make clickable hot spots on the image. So you can always right click and go to view
page source to see the code. The code here is meant as an example, not to copy. But you
can start to see the way that this was created. The basic parts of this assignment: Select
a concept taught in your content area, or an area that you might want to teach, that
has a main idea and at least two or more sub-related ideas. It's a good idea to create a simple
concept map. Complicated maps do not always transfer well to the Web, because there is
a limited amount of space that you have on a Web page to hold that image and related
text. After you've selected a topic, then start
to look for information on the Internet that relates to the topic. Locate Web sites that
you can link to from your concept map. Create a new Web page for this project, like this
example here. You're going to have an external CSS file, and type a title on your page, then
200 to 500 words of original text about your topic. Once again, this should not be copied,
just like the code here. You want to use your own words always.
You're going to then draw your concept map in Fireworks. Then you're going to insert
your concept map into Dreamweaver. You're going to make, at minimum, two hot spots on
the image. Be sure to see your instructor's rubric to see any other specific requirements
for this assignment. But the gist is, you're going to make something like this. So I'm
going to show you how I made something like this.
Now, the focus isn't for you to follow step-by-step and to recreate this, but rather that you
can get a general idea of how this was created. I'm going to first focus on creating the layout
of the page. Then I'm going to jump into Fireworks, and I'm going to show you how to create a
concept map like this. And then I'm going to show you how to bring this back into Dreamweaver...
this image... and add those clickable hot spots.
Now, there are a few assumptions with this video. I assume at this point you understand
a few of the basics that we've been doing so far, over the last few weeks of this course.
I'm going to go a little faster, especially when just creating the basic layout of this
page. I'm going to create a file... a new file. As always, I'm going to do an HTML5
doctype. I'm going to hit create. And the first thing I always want to do is, I want
to save this. I'm going to save this in my 502 folder. I'm going to call it concept map.
I'm going to add a title. I'm going to go to split view. OK, now that I've added a title
and I've saved my file. The first thing I'm going to do is, I'm going to add some space
under the body tag. I'm going to add the three main HTML5 tags that I'm going to use. I'm
going to use a header tag. I'm just going to add some text in between, so I can see
it in the design view on the right. I'm going to add a section, and I'm going to add a footer.
In addition to these basic HTML5 tags, I will often add a div, with an id="container". Now
this is, as the kind of name suggests, it's a container to wrap around my tags, to just
give me some more control. I'm going to go down here to the arrows. I'm going to do the
paint ... this apply source formatting, just to kind of clean that up just a little. All
right. I'm going to create an image--a banner image--to
actually go in my header tag. So right now, I'm not going to put anything in there. Then,
in my section tag ... I'm going to later put the concept map. But right now, I'm just going
to have that bit of text about my topic. So in this case, I already have this text. And
so after you've done some research, you should hopefully have your text, and you could have
it in, a simple text editor or Word. I'm going to go over to section. I'm going
to go to paste special. This is where I can decide what I want to do here. I'm just
going to do basic text for structure, and there it is. So there I have my text that
I want. I'm going to do one last thing, down at the footer. I'm going to go to insert,
and I'm going to go down to HTML >> special objects >> copyright. I'm going to put
in some copyright information. So now, this is just my basic structure. I'm
going to save this. Now, I'm going to start adding just a few basic things, when it comes
to CSS and adding some style to this page. And so the background ... so if we look at
this example again, that I did, this is a background image that we are going to create
in Fireworks. We're going to create this banner image in Fireworks, and we're going to create
this concept map in Fireworks. But I still want to add some styles to my
text, to my headings, and so forth. Then last but not least, I would validate.
OK, now I'm going to start adding some styles, and I'm going to first start with my body
tag. I'm going to click on body, under the CSS panel. I'm going to click the plus sign,
and get rid of the paragraph tag. I'm just going to do the body, going to do new style
sheet, and click OK. It's going to prompt me to save this, so I'm going to go to my
502 folder, in my styles folder. I'm going to call it concept map, and hit save.
Some basic things that I'm going to do right now; I'm going to later add my background
image, and so we're going to do some things from there. But I'm going to start with adding
some basic things with fonts. I'm going to choose verdana for my font. I'm going to
put my font size at 100%; so that's my base font. Then I'm going to choose
the color to be black. I'm going to do a couple more things.
I'm going to set my background images... my background color to white. Because if we actually
look at this, you'll see that it fades down to white. So that's the decision I'm making
ahead of time. We're going to later explore the background image, after we've created
it. Then I'm going to go to my padding, and my margin. I'm going to put 0px for
both of those. I'm going to hit apply. You can see it making the changes over here
on the right, my design view. The next thing I'm going to do is,
here's an H1 tag. I'm going to click on that. I'm going to click the plus sign.
I'm going to be less specific, because I really just want to add the style to any
H1 tag I use, and click OK. For my H1, I'm going to select my font size. I'm going
to make that bigger. This is based on that 100% I set for the body.
I'm going to set the color. But in this case I know exactly what it is I want. I'm going
to actually just type it in, hit apply, and that's right. Then I'm going to go down to this,
and my margin body I'm going to put as 5px. Really what I'm trying to do there
is, I'm trying to decrease this white space and improve the proximity, if you think about
the principles of CARP that Robin Williams talks about. We
have to later do some things to the paragraph tag as well, but right now we're good to go.
So here, we have an H2 tag. Going to add some styles to that. I'm going to be less specific.
I'm going to make sure it's in my concept map CSS file, and it is. I'm going to
set the font size, select my color. You can always use the color picker. But in this
case, if you know the color you want, you can simply type in the Hex codes.
I'm going to go down to margin-bottom, going to put 0px >> apply >> OK. I'm going
to select my paragraph tag. I'm going to hit the pencil. With the paragraph, I'm just going
to do two things with this. I'm going to be less specific, concept map.
Whenever I have my paragraph tag, I want to one, have a margin-top of 0px. See how
that proximity is much improved. I'm going to go back to my paragraph tag.
I'm going to hit the pencil. Because I want to also do a line height. This is just
to improve readability. You can see what it did. That's why it's nice to hit apply
before you close, because that was simply an error, where I was simply going too fast.
Where now, if I select em, you can see that worked a little better. And so the way the
line height works is, if I do 1.5, you can see what that looks like. In this case, it
just wants something a little more than the basic. You can play with
what looks right, but there we go. So I'm going to now do some things to my container;
all right, that looks good. And the container, I'm going to give a background
color of white. I'm going to set the width to 796px. I'm going to actually make this fixed
width. Go down to margin. I'm going to auto the right and the left. This
will center that div. Then the font, I'm going to choose the font size, so the basic
body font, 0.9em. You can see it applied. It looked a little funky. So I'm going to
actually make sure my font is selected black. All right, hit OK. It's starting to look
good, and more like what I had in mind. So if I look over at the example, I still
want to add black background down there. I need to do some stuff to my learner description
up top. I'm going to -- I can't actually see the footer right here, so I'm just going to
click over here, click footer. I'm going to hit the pencil >> be less specific. I only
have one footer. This is where I'm going to do background of black. Hit apply.
Then I'm going to do my text; I'm going to do like a light grey, and maybe a 0.8em for
the size. We'll see how this looks. As always, you want to start previewing it
in a browser, to see what it looks like. Because what you see in Dreamweaver, is not always
what you're going to see once you upload it, Overall, I think this is a good start.
I think we're ready to jump into Fireworks. I'm going to open Fireworks.
So before I get started with Fireworks, something should be said about finding images. So
while we've spent some time learning about copyright, so you can always be aware that
Flickr is one resource. So when you go to Flickr, if you click on search, you'll
notice that you have this ability to advance search. And one of the things that's great
is that you can choose things that have been creative common licensed. So
basically, can you modify, and perhaps even use them commercially, depending on what you
want to do. You can always search that way. If you
go to, for instance, Google images. They have an advanced search. So you can always
just type in, something like mountains... right? And when you come over here, you'll notice
that you have this advanced search option. Under advanced search, you also have the
ability to filter by license. So can you use it or not??? Then the last one to be
aware of is, you can go to creative comments directly, and once again, choose to search
by things that you can use. In this case, I'm going to select Flickr,
or you could do Google images. I'm going to type in mountain. You can see things
that come up. So the idea with a banner image is, you need space to write things.
Let's take this one here. If I click on it, I can see some rights reserved.
It says I'm free to copy, distribute and transmit, and I can remix it. So that looks good.
I'm going to click on view all sizes and Flickr. I can see this was an image I wanted to
use. But the biggest version they have is only 640px wide, which is not wide enough
for the Web site that I want to use. So, I'm going to go back. At
this point... let's find something in Idaho. OK, after spending a few minutes,
I found another image. I'm going to click on it, click view sizes. This has a big
one. 1024px is what it's showing. That should be big enough. I'm going to save image.
I'm going to save this in my 502 folder, in my images folder. I'm going to give
it a name. In this case, I'm going to call this
concept banner. I'm going to save. So now that I have an image to work from, I'm
going to go into Fireworks. You can click open here, or always go to file >> open. I'm
going to navigate to my image. I'm going to click open... make this small enough
so you can hopefully see it better. The first thing I'm going to do is, I'm
going to make the width smaller. I'm going to go to modify canvas. Let's try that again.
Modify canvas >> image size. I know my width, I want to be 796px ... because
that's actually the width that we set in Dreamweaver of the page. I'm going to hit OK. I can
always go like that, if I want to tighten it up.
The question is about the height. So I start thinking... where do I want to put the name
on my Web site? Often, you want to not have too many distracting things. I want to first
get the crop tool. I click and I drag, and I can start moving this around. But I
know I want the height to be 100px. So over here in the bottom left, I'm going to type
100 and hit enter. Then I can move this around, exactly where I want. If I double
click, it crops it. So I'm going to click my little pointer tool. I'm going to do
a file save, and there we go. And so now I want to add the name of my Web
site. So I'm going to click on my text tool. I'm going to drag it. You can see
right now. It's pretty big because of my settings last time. Down here in the property
inspector, I'm going to change this to, we'll say 40px. Before
I even start typing, I'm going to change the font to something bright, so I can see it.
If I click the pointer tool, I can go over here and stretch this ... let's do undo. Let's
try that again. Right in this little blue box, you can click and drag it. I
can still move this around to exactly where I want it. I can highlight it all, if I want
to. I can change the text. If you remember, in the example, because the
background was a little noisier, is there's actually, an effect ... a filter added.
So that's one way that you can help improve the contrast. If I click on the text
... and you'll notice that depending on what you click on, the property inspector changes.
So the canvas, first the image, first the text. It's important to realize
that in Fireworks. But down here, I have this filter.
You'll notice that if I go down here, things like this shadow. So I can add a shadow or
a glow. You can play with both to see what helps. If I hit the glow,
it starts with that red, which is pretty bad. But if you go to white, every one of these
filters has tools that you can adjust it to make it a little subtler. See how that drop
shadow can sometimes help. It depends really on what the background is. Spend some
time exploring these, to get the effect you want.
I'm going to do a file >> save as. You'll see that you have a few options here, where
you can add some extensions. In this case, I want to save my concept banner as a JPG.
So down here I want to make sure that I have JPG selected, and I'm going to hit
save and replace. I'm going to go to split view. If I go to my header, and it looks
like in my CSS, I've actually added the font ... body font to be white somewhere;
because you notice how you can't see it. The thing to be aware of is, the undo doesn't
always work real well with CSS for some reason, So then the container,
you can see that it's set up as white. So that's probably the area; that's where
I did it. Now I'm going to go to my header tag. I'm going to delete that text. I'm going
to go to insert image. I'm going to add some alternative text. So there it is. So now,
if I go to preview ... it's prompting me, do I want to save it?
I can see, there's my banner image. That's looking great. So now there's two other steps.
I want to add the background image. Then we're going to do the concept map.
Now let's jump back into Fireworks. I'm going to close this. Now
I'm going to create a new file. I'm going to do the width as
20, and the height, we'll say 600; click OK. So now I'm going to go over here to my vector
tools. I'm going to use the rectangle tool. I'm just going to draw a thin rectangle
by dragging and dropping it. Then I'm going to hit my pointer tool. With that
selected, I'm going to go to modify >> fit canvas. Ten just tighten that up for me. So now
my canvas is just one rectangle, that's currently black. Now I'm going to
click on the rectangle. You'll see these buttons down here. This is something new.
But if I click on this one here that says gradient fill, you'll see just like that,
it added a gradient. Now, it's upside-down. We'll work on flipping
that, and that's easy enough. But this is where you can start to adjust the gradient.
Maybe you want it to be more white than black. Maybe you want the black to be more dominant
in it. Regardless, I'm just going to leave it pretty much as is.
Now, if I click on it, you'll notice that it gives me that little... I can try to spin
it, but that's nearly impossible. But if I right-click, I can go to transform. I can
rotate it. I can also go to modify >> transform >> rotate. So I'm going to rate 180. Just
like that, we got it. I'm going to save this as a JPG. I'm going to type
in gradient background. I'm going to choose JPG. Be aware that you always have options,
where you can adjust certain things like the quality, but right now this looks good.
I want to make sure that I'm saving it in my 502 folder, within my images folder.
I am and I already have the file. So I'm going to hit replace. Then we're going
to jump back to Dreamweaver. In Dreamweaver, if you remember when we were working on our
body tag, I'm going to hit the pencil. We're going to go back to the CSS ... that we gave
it a default background color, and that's in case for some reason, something happened
with the image. Now, we're going to actually add an image.
We're going to add that gradient background image that we just created. I'm going
to repeat X only. I'm going to hit apply, and we'll take a look. You can see
that the issue I have right now ... and this was something I think I did earlier, when
I was going too fast ... was my container, I actually want to be a white background.
I think I added a white font. So now I'm going to go back here, and I'm going
to add white, hit apply. I'm going to preview it again. Hit refresh, and there I
can see it. I can already see that I need some white
space and padding there. So I could go to each one of my HTML tags, so I can see
what I have. And you can see that other than footer, I've actually not added any. So,
I'm going to skip the header, because I have an image there. I don't want to actually
add anything there. But I do want to add some padding for my section, and for my footer.
Rather than using the CSS panel in code view, I'm just
typing it in. You can see what that background image, with a gradient, did.
So that looks great. So we're going to save all. We're going to do our last part,
which is the concept map. So, I'm back in Fireworks now. It's
basically asking... do I want to save a PNG of this. If I want to be able
to make changes to it easily, that's the best way to go. If you remember, this is the
concept map in the example. That's what we're going to focus on right now. The
first thing, we're going to create a new document. In this case, we can adjust it later,
but I'm going to guess 400 x 400px, and hit OK.
So with a concept map, you could focus on just using the drawing tools, by doing some
shapes, using the line tool. So you could do something like this. Another
option is that you could just bring in images that you've found on the Web. So you
can go to file import. I'm just going to bring in the image I had before.
But I'm going to click on the scale tool, and bring this down.
So you could do that as well... and draw lines and create a concept
map that way. What we're going to do to create this concept map is, we're going to
go to window >> common library. You'll see it down here. I'm going to double-click
on this to hide that. I'm going to click on these to drag it down. If you start looking
in here, you're going to see all kinds of things. When you click on them,
you'll start seeing different things. These are some great tools.
I'm actually looking for the 2D objects. I could just drag this over, so I hit home,
I add some text under it. I can start using the line tool. If I hold down shift, I can
get a straight line. Maybe I want to make that wider... maybe I want to make that black.
Then I could continue, using different tools down here. I
have the ellipse. If I hold down shift, it makes a perfect circle. In this case,
maybe I want it to be gray. So even when I mouse over it, it'll help give
me these tools to line up. Then I can add more text within.
You get the idea. Then other great things about Fireworks... I can go up to
the styles panel. If I click on styles ... you'll notice that there's actually no styles
for the current document. So with the example that we have for this class, it's
actually using the plastic style. So if I click on the house, and I click on the red
one, you can see that it added that style. I'll close that.
Now, to remind you of the example, we're going to go through and do this real quick.
The first part is looking for the monitor; there it is. Click on that, click over here,
make it bigger, go back to my pointer, and then drag the dialogue over. Select
the film, next.. and then RSS. I can put these roughly where I think I want them
to be, but then I can actually hold shift down, and I can select them. If I go to align,
I can align them, and then I can also group them, if I wanted to.
Once I got them, I could right-click and group. Then when I group them, they'll
go wherever I want. Then once I have that set up, now I
can add my text. And it might be that I need this to be smaller, especially as a sub-point.
So maybe I change it to 20. This is where you could decide where you want to move these.
Then with this, if you have to ungroup, you just simply click on it, you right-click,
and ungroup it. With this, I can always copy/paste it, pull it over, and then change it. Or,
if you right-click, you'll notice that you have this option to duplicate; same idea.
Now I'm going to add my lines. So... if
you hold the shift key down, it helps you do that. If you wanted to make this thicker,
you'd just simply go down to here, there's a 2px. You could do the same with each
one. OK, last but not least, this is where I can go back to the styles. I have the computer
monitor selected. I hit the pencil. I'm going to right-click after I select them.
And just like that. A few last things you'll notice are in the example...
I had some subtext, basically an explanation. Because users don't always know that something's
going to be a clickable link. So click on the image above. I can do something like that.
I highlight it. I chose a 12-point font. But you could play with that. Now, when
this is about where I want it, this is where I can trim my canvas a little. I could use
the crop tool to do this, to tighten it up, or I could go up to modify canvas >> trim
canvas. The problem with that is, you'll see that if I do that, it does it real tight,
and there's no white space around it. So I'm going to undo that. The nice thing about the
crop tool is you can basically add a little bit of white space and padding throughout.
So let's double click. We're going to save this as. We're going to make sure it's a JPG.
There's a lot of options. Generally, you're going to find most of the
time, you're going to be using the JPG or PNG. Every now and then, you might use a GIF.
That's a general rule of thumb. I'm going to call this concept map. I'm going
to make sure I have JPG selected, hit save, make sure it's in my 502 folder. Make sure
it's in my images. So now it's prompting me, do I want to keep a Fireworks version, and
I do. So I'll just hit save. I'm going to return to Dreamweaver.
I'm going to go to the top of my section. I'm going to actually do it right in front
... put my cursor right in front of that H1 tag. I'm going to go insert image,
and do the JPG version. This is where I want to add my alternative text... nice and
descriptive. So I'm going to click on this, and my image tag is selected. I'm going
to click on the pencil. In this case, I'm going to add a class. Call this concept, hit
OK. Go to here, go over to blocks. I'm going to float to the right; clear to the
right, hit apply. You'll notice it didn't do anything yet, because I just created the
class. Now I'm going to click on this image, and I'm going to go down to class and click
on concept. You can see that it floated to the right. So that's pretty much what
I want. So I'm going to move on. You can see that there's Dreamweaver,
especially in the split view, is doing some funky things.
Now, the next steps are, how do I make these little areas clickable? Well, that's
pretty easy. If you click on this, you'll notice down here in
the properties inspector, you have these options down here. So Web 2.0,
if I click over there, I can fix that. It wants you to describe this in the alternative
text. So I'm going to actually undo. Because I want to make sure I have this whole area
selected there. I'm going to click OK. So now, down in the properties inspector,
I'm going to get rid of the pound sign, and I'm going to type in the URL ...so when
people click on this, it's where I want it to take them. Whenever I want a user to visit an external
Web site, I tend to choose blank as my target. So that means it's going to open in a new
window. Then for my alternative text.
So now, I'm going to save it. I'm going to preview it.
You'll notice that when I mouse over, nothing happens around these. But when I mouse
over this one, the cursor changes. And when I click on it, it brings me to my Web site.
Now, you basically continue the steps with creating more hot spots. So I'm going to just
create all three real quick. Now I need to go back and add the information
for each one. I'm going to click back, make sure it's the one selected that I want.
I'm just going to complete these. I'm going to save all >> preview.
You'll notice that now when I mouse over, it's opening in a new window like I expected,
and it's taking the user to the Web site in question.
If we go back to Dreamweaver, so if I click on here, you'll
see that it's actually adding these coordinates. So it's doing a lot of the complex stuff behind
the scenes for you. That's one of the great things about Dreamweaver.
So wrapping up this demonstration, I still need my learner information here. In
this case, I already have the text. Once my text is there, I can create a class
by hitting the plus, and the class ... I'm going to call it .learners. All I'm going
to do... is basically just change the font size. I'm going to go to code view,
because the last few things that I'd want to do ... one, I want to organize my code,
clean it up, then add some comments. Some other things that I'd definitely want to do
is, I would want to also add some class ... some link styles.
I would add my comments to help organize my code, and this is where I would decide what
I want my link color to be. In this case, I know. I'll close it. Then I would keep
doing this... I would add what I want my visited link sto look like. For
instance, a hover. I'm going to close >> save all >> preview. I'll actually
get rid of this space here, and preview it once more. Save all >> hit refresh, and there
you can see the style take effect. In closing, definitely I'd want to spend
some time spell checking, commenting out my code, organizing my code, and then checking
to make sure that my code is valid... so adding the badges below, as you'll see I did
in the example. Then last but not least, uploading it to Edtech2, and then adding the
link with the other assignments. Hopefully, you got a quick, basic idea on
how to create a basic Dreamweaver page, that uses Fireworks to create a banner image, a
background image, and a concept map. Thanks.