SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Change link font & color
SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.
Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome.
Who should use this?
Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.
What do you need?
- You'll need a laptop (Mac or PC)
- Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.
Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?
No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.
Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.
If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott and I'm a trainer here at Bring Your Own Laptop. What we're gonna look at this tutorial is we're gonna look at styling our links or our hyperlinks in Dreamweaver. So they are these guys here. When clicked, they jumped to another page. They've got some special properties that we're gonna have to remove.
So we start our H ones, which are heading ones, and our H twos, our heading twos and our paragraph tags, our P tags earlier in the tutorial. Now in this one we're gonna look at these guys. So, um, these guys come along with a few defaults. They go blue, they are times near Roman, they're moderate size and they've got this little underline under them. So what we need to do is we need to figure out what the tag is. Now in the previous tutorials it was easy because we actually made this one an H one.
So we really knew that was an H one tag and we created this one, we call it an H two. So in this one though, these guys get made. When we add a hyperlinks, they get a tag added to them, how to figure out what tag these guys are. So we can style them with our CSS. It's quite easy. So I've highlighted the word home and down the bottom here, this is my tag selector.
I love this guy. He tells me what the tags that are applied to this. So the body is the overall part of the website. That's everything that the user sees. Okay? You generally don't have to worry too much about the body tank.
He is in an unordered list, which is a bullet point, and inside this list item, which is the dot itself. Okay? And this is the bit I wanna play around with. This is the A, it's called the active link. So unfortunately, yeah, it's, it's not easy to guess. So it's the A tag is what a hyperlink is.
So if I style my A tag now it will style 1, 2, 3 of my, um, hyperlinks. So let's give that a go. So I've got my cursor flashing in here. Why not? Um, it doesn't really matter where your cursor is flashing. You can type it in afterwards.
I'm gonna go make sure it's going in on my design. Uh, CSS design. I'm gonna make sure it's at the main css. I'm gonna create a new selector and you can see it's brought through whole list. I just want to style the A. So I'm gonna delete everything.
That's not the A. And what I'd like to do is I'm gonna play around with, uh, the color, which is an important one 'cause it's gone blue. So I'm gonna zoom out so you can see everything. So you can see my hyperlinks over here. They're blue. So go down to text and you'll CSS designer font color.
I'm gonna change it to, I'm gonna change it to green. Click enter. You can see my hyperlinks over here. All gone green. Perfect. And the next bit we're gonna do is, um, play around with a font.
So I'm gonna pick my gill sends. Lovely. And the last one is The text decoration. It's this line underneath it. You can see down here under text decoration. There's my options.
I've got one called none. There's the underline, which it's already got applied. There's a overline, which I'm never sure what to use for and the line through. So what we need to do is say none. If you leave it blank, it's gonna stay with the default, which is the underline. But if you tell it, say, I would like you to be none, none of these things, if I zoom out now, you'll see my home about us and contact us.
Have nothing applied there. Great. Um, so that's how you style a slightly more unique tag. Um, and definitely how you style the, uh, hyperlink or the links. Alright, thanks for this. I'll see you in the next tutorial.
So we start our H ones, which are heading ones, and our H twos, our heading twos and our paragraph tags, our P tags earlier in the tutorial. Now in this one we're gonna look at these guys. So, um, these guys come along with a few defaults. They go blue, they are times near Roman, they're moderate size and they've got this little underline under them. So what we need to do is we need to figure out what the tag is. Now in the previous tutorials it was easy because we actually made this one an H one.
So we really knew that was an H one tag and we created this one, we call it an H two. So in this one though, these guys get made. When we add a hyperlinks, they get a tag added to them, how to figure out what tag these guys are. So we can style them with our CSS. It's quite easy. So I've highlighted the word home and down the bottom here, this is my tag selector.
I love this guy. He tells me what the tags that are applied to this. So the body is the overall part of the website. That's everything that the user sees. Okay? You generally don't have to worry too much about the body tank.
He is in an unordered list, which is a bullet point, and inside this list item, which is the dot itself. Okay? And this is the bit I wanna play around with. This is the A, it's called the active link. So unfortunately, yeah, it's, it's not easy to guess. So it's the A tag is what a hyperlink is.
So if I style my A tag now it will style 1, 2, 3 of my, um, hyperlinks. So let's give that a go. So I've got my cursor flashing in here. Why not? Um, it doesn't really matter where your cursor is flashing. You can type it in afterwards.
I'm gonna go make sure it's going in on my design. Uh, CSS design. I'm gonna make sure it's at the main css. I'm gonna create a new selector and you can see it's brought through whole list. I just want to style the A. So I'm gonna delete everything.
That's not the A. And what I'd like to do is I'm gonna play around with, uh, the color, which is an important one 'cause it's gone blue. So I'm gonna zoom out so you can see everything. So you can see my hyperlinks over here. They're blue. So go down to text and you'll CSS designer font color.
I'm gonna change it to, I'm gonna change it to green. Click enter. You can see my hyperlinks over here. All gone green. Perfect. And the next bit we're gonna do is, um, play around with a font.
So I'm gonna pick my gill sends. Lovely. And the last one is The text decoration. It's this line underneath it. You can see down here under text decoration. There's my options.
I've got one called none. There's the underline, which it's already got applied. There's a overline, which I'm never sure what to use for and the line through. So what we need to do is say none. If you leave it blank, it's gonna stay with the default, which is the underline. But if you tell it, say, I would like you to be none, none of these things, if I zoom out now, you'll see my home about us and contact us.
Have nothing applied there. Great. Um, so that's how you style a slightly more unique tag. Um, and definitely how you style the, uh, hyperlink or the links. Alright, thanks for this. I'll see you in the next tutorial.
