Hey, my name is Dan and in this production video we're  gonna go through and just get our contact dust page,  uh, looking a little nicer. So what we're gonna do is we're gonna have to adjust this. Um, 'cause what I'd like  to do is actually I wanna split this box in half  so I can have my email addresses and my phone numbers  and um, physical addresses on the left  and have a map on the right. So what I need to do is this structure  that I've got in terms of one row with one column inside  of it is not gonna work for me. So what I'm gonna do is I'm gonna delete you guys. So I'm going to delete this first paragraph.

I don't need him, so I'm just have delete on my keyboard. Now, in terms of this one, what I'd like  to do is another P tag there. I don't need what's up here. Nope, it's all fine. Great. So, um, I've got a row with a column inside of it  that's stretching out, um, to span 12 of them at large.

So I'm gonna make sure I'm working at large. There we go. And next thing I want to do is I want to go through  and split, um, this to have,  actually I want another row inside of this. So to do that, uh, I've got my first row  and I'm gonna see if I can zoom over here  and I'm gonna duplicate at a new row  and it's automatically giving me my two  separate boxes, which is fine. And if you didn't, you can go through and shrink these up  and delete the columns. Okay.

Or split them into new ones by heading add new column. Okay, so I'm gonna start with this one here  and I'm gonna copy and paste my details in  and I've got them over here in the exercise files. And uh, during exercise files, under text,  there's a text file and inside there is my addresses. So I'm gonna use this copy  and I'm gonna jump out to Dreamweaver. I'm going to click inside my column. I'm gonna go insert a paragraph tag please.

I'm gonna nest it inside. I'm gonna select in there so it goes  orange, paste it all in. Okay. And what I wanna do is, uh, maybe just split this up. So there's the address, there's the phone  I'm putting returns in and this will split it up into  separate PT tags hopefully. So what we're gonna do now is I'm gonna create a class, um,  and use it for our contact us details.

So what I might do is main CSS in global,  I'm gonna create a selector called um, text  slash to slash I'm gonna call this one  body one. I feel like I've called something else  similar to that, but that's okay. So text body one, his job is going  to be font weight, no font size. Gonna make him a little bit bigger. So he's at 16 now he's gonna go up to 18, 19. Okay, I'm gonna apply it, pull this one.

Text body one. Okay, I can do it to every P tag  or I can undo and I can do it. So applying it to every PT tag's, fine, it'll work. But I can apply it to this whole column here. So I wanna apply this whole column. Everything inside of here can please get a font size  of text.

Body one means everything inside that one,  it's just a little quicker, right? To do the container. So everything inside of  that become body one. And this works because there's  only a little bit of text in there. So, great, I've got bits of my contact details. I'm going to maybe make this here a bit bold to make it kind  of break the information up a little bit.

So I'm gonna use this one in here. We haven't done this before. It's a strong tag. There's another one called Emphasis here. So e, m and Strong. This is a bold, it's kind of an old school H TM L Bold.

It works perfect. Okay, so instead of having  to create a class that's called Bold  and applying it just to this little bit,  you can just click this. And what happens is in code, let's have a look,  it gets wrapped up in this strong tag. Strong just means bold and em is what is used for italic. So if you wanna switch these both to em,  you'll notice up here it's an italic version. Go back to strong, go to live view, save the changes.

I'm gonna highlight view  and I'm gonna go UB bold, highlight general info  and I'm gonna put in bold. Great. And one of the things that people don't like  to do is put their email addresses on a website. Why? Because, uh, there's lots of things. There's, there's things called web scrapers  and they just go through finding people's email addresses,  try to match it up with the keywords and then go off  and sell those lists to people and say, Hey,  do you want a list of people that are  interested in Photoshop training?

You could email this guy and I end up on this big spam list. Now that's a problem ish. I have found that 'cause I use Google  for my professional email address. Google's amazing at sifting through all the spam. I get zero spam through from Google. Um, so I'm a little bit, I probably shouldn't,  but I'm a little bit lackadaisical when it comes  to putting my email address on things.

I don't mind. I figured they're gonna find it anyway. Um, why make it hard? And it has no ramifications for me. Poor people at Google, probably busy, uh, sifting  through all of my spam,  but it never gets through to me, which is great. Um, one thing you can do though,  if you're gonna use your email address like I do everywhere,  um, 'cause I hate those, I don't hate them.

And the forms where you fill out whether you've gotta fill  out a bunch of fields to contact somebody, it's often,  it often kind of drives me a bit mad. I just want to contact the person  and send my own email,  not fill out all their predefined boxes. You could do that using a form. Um, but uh, we're just gonna do, um, just a basic email. But remember if you're gonna do email addresses,  um, put in a hyperlink. Who remembers what it was we put it in earlier, it was yeah,  mail two mail to,  and I'm gonna put in Daniel at BYOL Doye  and remember there was a question mark.

Subject equals, so you can fill out the subject. So it might be a web, um, web contact,  great capitals, right? So that's gonna be my link for this. And one of the other things you can do to make life easier  for people, especially when they're on mobile,  is you can do a similar sort of thing that we just do  with the email, with the phone number,  which this I can highlight the phone number  And if you put in tell and then a colon  and then the phone number  and then the phone number. So in this case it's going  to be  0 0 3 5 3 1 6 9 1 7 2 2. Okay?

That just means  that when somebody clicks on this on a mobile device, um, go  to the website that I've uploaded  and give it a click under testing. Um, if you click this  and you're on a mobile phone,  it'll actually preload your phone up with it on rather than,  um, you've probably done it  before where you've gone to a, a website using your mobile  and you want to get the phone number and you've gotta kind  of like try and highlight it using your thumbs  and then copy it and then try  and paste it into a phone number and add extension. It's pain the bu so you can help people out by adding  that little bit of, um, this thing here tell equals  and that will make it work. In terms of a phone number, let's do the same thing  with the address, okay? To make everything a lot easier for people on mobile,  I gotta go out to Google and I'm gonna go to  Maps, ie. And in here I'm gonna type in you  and here's where I work.

It's on a boat in a barge in Dublin. And um, we can go through and connect that. I'm going to close it down. No, not I'm gonna open it up. I click on share and I'm gonna copy this and paste that in. Now there's another way of doing it.

Um, let's close this down. Let's go to, let's say we're going  to The art of coffee. Okay? So if that directions thing doesn't appear  and say you wanna find,  you found an address, it's this one here. Um, often there's an option at the top. Um, right next to here has dotted lines, okay?

And that will give you the little sharing link. Uh, Google Map schemes changing all the time. So every time I make a tutorial that shows you how  to get the map links, it goes and changes. So, um, you might have to have a look around  and find out where you can get  that shared link, but I've got  that one. I'm gonna highlight  This, Add a link to it, and I'm gonna paste it in that. Great.

So they're all hyperlinks. Now I'm gonna go off and test it in my browser. You my friend, let's go look at you. Great. Um, if I click him,  It's gonna jump out into Google Maps. Actually, remember it's not because we are using this, uh,  special little preview option.

So it's one of the little bugs with the preview option. It's not gonna go off and do links. So what I'm gonna do is I'm gonna go back to Dreamweaver  and do it this way. We're still gonna have a little bit of a problem. You might have noticed what I didn't do. Okay?

If I click on this, it jumps out lovely. So that can help people on mobile. Uh, the phone number here, um, if I click on this,  this one's gonna open up my, um, browser phone number,  which is I use Google Hangouts for my phone numbers  and this'll allow for open up my um, apple mail. Now um, what we need  to do is make sure when you click on this, I'd like it  to open up, remember it in a blank window so  that my website stays open. Um, but they can jump out to the map in a separate tab,  but also come back to here quite easily. Alright, so the last thing I'm gonna do is I'm gonna edit  this column, so I'm gonna make 'em a little smaller.

So this one here is set to six. I wanna make 'em a little bigger 'cause that's  where I'm gonna put an interactive map. And we're gonna look at maps  and embedding in the next video. Alright, see the next one.