Website Development: Lab 06 web fonts and links


In this assignment we are going to create
a list of our favorite links. I’m going to give you, the requirement of having two different
fonts, one for your headings, and once for your links. And I like the Google Fonts because
they’re, well they’re free and they’re really easy to use. So that’s what I’m going to use.
So I’m on google.com/fonts. And I’m just going to take a quick look for something that might
look nice as a heading. Now, heading I’m willing to go a little funkier than I am for things
that I want to be easy to read. This is not necessarily the best font but it is sort of
cool and I do kind of like it. I’m going to hit Quick Use and this is all fine with me.
So I’m going to grab my HTML code here and I’m going to go out to Dreamweaver and I’ve
created an index page. Oh, no I didn’t. Good. So I’ve created an empty folder for lab 6.
And you’ll see that I’ve got some things in my lab 6 folder because you should always
prep your web page before you create it. When you’re prepping your web page, in this case
I have a word document right here. It just has a list of the text I’m going to put on
my Dreamweaver page. And I like to do things in Word first. It’s a little easier than working
directly in Dreamweaver. Especially, if you don’t have Dreamweaver at home. You can prepare
your content in Word. And then I also went out to Illustrator and did a very simple logo
so that I can show you how to add a link to an image. So that was the work I did before
I got started. Now I’m in Dreamweaver and I’m going to choose, I’m going to go to Dreamweaver,
and I’m going to choose File, New, and I want a new HTML. And I’m going to go ahead and
use one column fixed centered. And I want it to be HTML5. And for my layout CSS, I’m
going to go ahead and add it to the heading, or the head section. And I’m going to hit
Create. So this gives me a nice basic page, that I can play with. I’m going to minimize
my files right here. And I’m going to go into split view in just a second. And you’ll notice
it’s already putting in some information for me. And I do like to use the built-in layouts.
And you can get rid of the stuff that you’re not going to need. Now, for the, we’re going
to use some simple ordered lists here. You can go ahead and leave this comment stuff
in here. What I usually do is I go through and I read it, and see if I need it. This
is fine to begin with. I’m going to come back here in just a second. You can go ahead and
read through there on your own. I’m going to see what I want to leave. Most of this
stuff is pretty decent to leave in here. I’ll leave that comment. And that’s fine. I’m going
to play with those colors later. That’s all fine. And so you can just sort of play with
that stuff and read it. We’re not going to be doing left and right here. It’s handy,
it’s good class, we’ll probably won’t need it but I’m going to leave it in here just
in case. Alright, so we have basic good place to start. And I’ve grabbed my code from Google
Fonts. So this needs to be up in the head section. “To embed your collection into your
website, copy it into head section.” So let’s go back over to Dreamweaver. We’ll go up to
the head section before you put in a style, usually right after the title. And I’m going
to go ahead and put in a title here since I’m right here. I can do it here in the code
or I can type right here. “Meri’s favorite links” If you’ve done this exercise with me
in HTML, you’re going to find it so much faster in Dreamweaver. I can’t begin to tell you
how much faster this is going to be. OK, so that let’s me put my code in here and then
it tells me I need to use my font family, wherever I’m going to use it. And so my font
family here, so this would be either cursive. So I’m going to grab this and I want this
to be my heading fonts. So I’m going to be really simple, Dreamweaver actually has dropped
in my h1, h2, h3, h4, etc. I drop it right in here. And I also want to add for my h1,
I’m going to show you Dreamweaver’s way of doing this. It’s so much better than hand-coding.
I can actually go in here and I can add a new, and this is giving me an h1 in the content.
That’s fine. Or I can just go into a tag and I can redefine h1, which is actually what
I want to do. And here, all I really want to do here is go to my, I’m going to put a
color on this font. I’m going to put it purple. I could actually have some fun here. I can
go give myself a background color. We’ll say like grey. And I could put padding and margin
on the h1, which I don’t want to do. Actually I don’t want to do a background on the margin.
We’ll leave that be. But what I do want to do is go to my text align, and I want it to
be centered. And that’s just for the h1 tags. That way when I go in here and I put in my
h1, I’m going to choose h1 there and I’m going to put in “Meri’s”, make sure you click here,
“Meri’s Favorite Links”. Now, it appears that nothing has happened. So I need to save and
this should be index.html. It’s in web175. And it needs to go into labs. And lab 6. And
there you go. You have to actually publish there to see them, though it might, if you’re
live online, live sometimes works, sometimes doesn’t. So it gives you the cursive but not
the real font you’re going to see. Which is fine. OK, so I want you to pick another font
because well, practice makes perfect. So I want you to pick, the next font should be
really clear, easy to read, a sans-serif. OK, so I like this one. So again I’m going
to grab my HTML code here. I’ll go into Dreamweaver and I’m going to paste this right into the
header. Then I’m going to grab this and technically, this should work. Because I’m going to do
all of my links in a list. So I’m going to drop it there for my unordered lists. And
let’s go ahead and just put in my content. Now, I’ve already created it in Word, so I
can just Select All, copy, go into Dreamweaver, and paste it. Now, this is obviously not everything
that I wanted it to be, and it didn’t come in exactly correct. So I’ve already got that
part done so I can delete this. And this is one of the things you’ve got to watch. I still
got blank lines here. And this is why I like to work in my code. Now, when I copied it
from word it dropped in a class here, which is OK, I don’t know if that came from Dreamweaver.
Now these, I want those center aligned so I can do this a couple of ways. I can go in
and add a new class and this is going to be an h2 and I think that’s the way I’m going
to do it. Tag, I’m just going to make it h2. And I’m going to pick a color for those and
I’m going to say that h2 tags are dark red. And I’m going to go to my block, text align
center, Apply, OK. And I want this to be class, I don’t want that, I just want to change the
tag here to h2. And then they’re red. Alright. Now, these are actually going to become links.
And so I’m going to select, I’m actually going to have to put these in here first. I want
these to be h3 tags, h3, h3 and h3. So that’s my different headings. Now, you’re going to
have to have at least 15 links with at least 3 settings. Now, these should be unordered
list and they are. Though I’m checking my code here because you’ll notice I’ve got an
empty list link in each one. This is, I really, it’s important I don’t mind copying and pasting
from Word but you’ve got to go back and read your code. So those are all unordered lists.
Now this is sort of funky, this is not the way that I expected my unordered lists to
appear. So I’m going to have to go up here and look at what we’re doing for my unordered
lists. I don’t know if I actually want a padding of 0. I want a padding of 20. There we go,
I like that better. Maybe I want 25. 25! I’m OK with that for now. Now, I’m going to want
to put in, and you don’t want to highlight the whole thing. Right in front of these I’m
going to want to insert anchors. I’m going to go to insert, named anchor, and so this
one is going to be tutorials. I’m just going to put in a blank line here. OK, and I want
a blank line after Netflix. That looks good. I’m looking at my code here. It’s putting
in non-breaking spaces inside of a paragraph. That’s actually enter a new paragraph, I’m
fine with that. I want my anchor here. Insert, Named Anchor, entertainment, OK. You’ll notice
I get the little image of the anchor where what I want to do is an anchor with an id
entertainment. And I want to put in an anchor right here. And I just saw a Named Anchor.
I’m going to name this education. Not a bad idea to also put one up at the top, which
logically would be called top. So you can see that it actually indicates where the anchors
are. And the cool thing here is that when you do that, now if I link to those anchors,
I can go down to my link section in here and I can just point at the anchor and see it
will link to Tutorials. And then I can select Entertainment and make it link here. And I
can select Education and I can use my little pointing link and select that anchor here.
And I’m going to show you a little shortcut right here. I’m going to put in top and I’m
going to make this a link to the top. Then I can copy this, I want to make sure that
these are set up the same way. So this should’ve had a non-breaking space in front of it. And
if you want to see your code you select this and it shows you I have a non-breaking space
in front of it, which is what I wanted. And then I can
paste it in there. Now, at this point I like
to test these. So I’m going to go preview in Firefox and I’m going to save it. And this
is just my interior. And you can see I’ve got my fancy fonts – Tutorials, Entertainment,
Education. Doesn’t really do much but if I were to shrink it, education, top, tutorials,
top, entertainment, top, then it works. So it’s working just fine. Then again I think
do I like the colors I have for my links? Well, here I can go into my page properties
and if I don’t I can go into CSS and I can pick different link colors. For my visited
links I might go more faded out red. And that’s probably as far as I want to go. and then
I’m going to put in links here. Now here, the best way to do this, so I’ve got tv.adobe.com.
You
actually want to go here, copy the link, and when you select it, paste it in here, and
set your target to blank. Than makes it open in a new page. Same think for lynda.com. I’m
only going to do the first three links here because you guys can copy and paste the others.
So I’ll go to lynda.com, go back to Dreamweaver, pate it in here, and I’m going to set the
target blank. And you’ll notice that each one also has a title option. So my title can
be “Excellent paid resource for software tutorials.” I’ll do this last one merihelp.net, drop that in here, target blank, that opens it in a
new page. My tutorials from my classes. And I’ve only did the titles to two of them. These
is one other thing I wanted to drop in here. And I’m going to put it right here. And I
want to go into Insert, image, and I’m going to
choose my image here merihelp.net logo and
this, I want to center it. The best way to do that, again in CSS styles here. We’ll just
add one for images because this is going to be my only image. So we’re going to have to
go into the tag, block, vertical align, middle, text align center, and then I do actually
like a little bit of padding around mine. I’m going to put 15 pixels of padding around
it. That should have centered this image but it didn’t. Interesting. OK, since that did
not center it, let’s go look at our code. Let’s see. That should’ve worked. Sometimes
you just need to move it further down in your styles, nope, didn’t do it. So sometimes Cascading
Style Sheets aren’t going to work exactly the way you think they’re going to. But I
want this centered, my other option is to do a custom class for this and I frequently
will do this. Now, we have a few choices on this. We can make it semantic. But here if
I’m going to center something that’s the only way I’m ever going to do it. it’s going to
be center, no I don’t want to use it as class name. centeredimages and that’s probably as
semantic as I’m going to get. So I’m going to go into my box here, text align center,
and we’ll go ahead and put my box in here and put padding around everything the way
I normally would. Hit OK, and then we’re going to apply that class here, and we can do that
right this way by selecting centeredimages and it’s still not centering. This happens
more often than you would think. So let’s go ahead and look at this in live view, still
not centering. Let’s take it out of the paragraph and see if that makes any difference. Nope.
We can put it back in the paragraph and the other option that we can do here is we can
make class for centered images apply to the paragraph
and this is why it’s important to, and there
we go. That works. OK, so I’m going to preview this in Firefox and that’s pretty much what
I wanted it to do. My last thing will be actually to turn this image into a link, which was
the whole point of putting it in here. So I’m going to go back here, I’m going to select
that and in the link here I should be able to just, no, I want to put it to, i though
the last thing I copied and pasted was merihelp.net. So http, merihelp.net and I want http, merihelp.net.
And then again test, test, test, you can never test this enough. I’m going to save it, open
up Chrome, looks good. And that takes me to the new page and those are still there. OK,
so make sure you test your links, that’s what I want you to do. You should have two external
fonts, one for your heading, and then I want you to create anchors for your headings and
anchor back to the top. So that you should have, you need 15 links, at least three different
sections, and go through and make them all work. Add an image of anything you’d like,
make it a link to something, and that’s the lab for lab 6.

Add a Comment

Your email address will not be published. Required fields are marked *