Production Video - contact us page

Hey, my name is Dan. In this production video, we're going to go through and just get our Contact Us page looking a little nicer.

What we're going to do is, we're going to have to adjust this-- what I'd like to do is, actually split this box in half so I can have my email addresses, and my phone numbers. 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 turns into one row, with one column inside of it. It's not going to work for me. So what I'm going to do is, I'm going to delete you guys, I'm going to delete this first paragraph, I don't need him. So I can click Delete on my keyboard.

Now in terms of this one, what I'd like to do, there's another p-tag there I don't need. So I've got a row, with a column inside of it that's stretching out to span 12 of them, at Large. So I'm going to make sure I'm working at Large. Next thing I want to do is, I want to go through and split this to have-- actually I want another row inside of this. So to do that, I've got my first row, I'm going to see if I can zoom over here. I'm going to duplicate, add a new row, and it's automatically giving me my two separate boxes, which is fine. If it didn't, you can go through and shrink these up and delete the columns, or split them into new ones by heading 'Add New Column'.

I'm going to start with this one here, and I'm going to copy and paste my details in. And I've got them, over here, in Exercise Files. Under 'DW Exercise Files' under 'Text', there's a 'text' file. Inside, there is my addresses, I'm going to use this. 'Copy', and I'm going to jump out to Dreamweaver. I'm going to click inside my Column. I'm going to 'Insert', a 'Paragraph' tag please, I'm going to 'Nest' it inside. I'm going to select in there, so it goes orange, paste it all in. And what I want to do is, maybe just split this up. So there's the Address, that's the Phone. I'm putting returns in. And this will split it up into separate p-tags hopefully.

Now, I'm going to create a Class, and use it for our Contact Us details. So what I might do is, 'Main CSS', in 'Global', I'm going to create a 'Selector' called-- I'm going to call this one '.text-body1'. I think I've called something else similar to that, but that's okay. So 'text-body1', his job is going to be-- 'font-size'. I'm going to make him a little bit bigger. He's at 16 now, he's going to go up to 19. And I'm going to Apply it. Call this one 'text-body1'. I can do it to every p-tag, or I can undo. Applying to every p-tag is fine, it will work. I can apply it to this whole column here. So I want to apply it to this whole Column. Everything inside of here can please get a Font Size of 'text-body1', it means everything inside that one. It's just a little quicker ride to do that Container. So everything inside of that becomes 'body1'. And this works because there's only a little bit of text in there.

So, I've got bits of my Contact Details. I'm going to maybe make this here a bit Bold to kind of brighten up the information a little bit. So I'm going to use this one in here. We haven't done this before, it's a strong tag. There's another one called Emphasis here, so 'em' and 'strong'. This is a Bold, it's kind of an old school HTML Bold, works perfect. 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, strongest means Bold. An 'em' is what is used for italics. So if you want to switch these both to em, you'll notice up here it's an Italics version, I'm going to go back to Strong. Go up to Live view, 'Save' the changes. I'm going to highlight you, and I'm going to go 'Bold', highlight General Info. And I'm going to put in 'Bold'.

One of the things that people don't like to do is put their email addresses on a website. Why? Because of lots of things, there's things called Web Scrappers, they just go through finding people's email addresses, try and match up with the key words, and then go off and send those lists to people, and say "Hey, do you want a list of people interested in Photoshop training?" "You could email this guy." And I end up on this big spam list. Now that's a problem. I found that, because I use Google for my professional email address, Google's amazing, sifting through all this spam. I get zero spam through from Google. 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 figure they're going to find it any way. Why make it hard, and it has no ramifications for me. Poor people at Google are probably busy sifting through all of my spam but it never gets through to me, which is great.

One thing you can do though if you're going to use email addresses, like I do everywhere-- because I hate those-- I don't hate them. The forms we fill out where you got to fill out a bunch of fields to contact somebody often can drive people mad. I just want to contact the person and send my own email, not fill out all their pre-defined boxes. You can do that using a form, but we're just going to do just the basic email. But remember, if you're going to do email addresses, put in a hyperlink. Who remembers what it was? We put it in earlier, it was 'mailto'. 'mailto', and I'm going to put in '[email protected]' Remember, there was a question mark, subject, equals, '?subject=' so you can fill up the subject, so it might be a 'web contact'. So that's going to be my length of this.

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 we just did with email, with the phone number. Watch this, I can highlight the phone number, if you put in 'tel', then a colon ':', and then a phone number, so in this case it's going to be '0035316917922'. That just means that, when somebody clicks on this on a mobile device, go to the website that I've uploaded, and give it a click, under Testing, if you click this, and you're on a mobile phone, it will actually pre-load your phone up with it on. You've probably done it before, you've gone to a website using a mobile and you want to get the phone number, and you got to try and highlight it using thumbs, and then copy it and then try and paste it into a phone number, and add extensions. So you can help people out by adding that little bit of this thing here, 'tel=', and that will make it work in terms of a Phone Number.

Let's do the same thing with the address. To make everything a lot easier for people on mobile I'm going to go out to Google, and I'm going to go to 'maps.ie'. And in here, I'm going to type in-- and here's where I work. So a boat and a barge in Dublin. We can go through, and connect that. I'm going to close it down, no I'm not, I'm going to open it up. I click on 'Share', and I'm going to copy this, and paste that in. Now there's another way of doing it. Let's close this down. Let's say we're going to The Art of Coffee. So if that direction thing doesn't appear, and say you want to find-- you found an address, it's this one here, often there's an option at the top, right next to here, these dotted lines, and that will give you the sharing link.

Google Maps keeps changing all the time, so every time I'm at the tutorial it shows you how to get the Map links, it goes and changes so you might have to look around and find out where you can get that shared link. But I've got that one, I'm going to highlight this. And link to it, and I'm going to paste in that. So they're all hyperlinks now. I'm going to go off and test it in my browser. You my friend, let's go over to you. Great. If I click him it's going to jump out into Google Maps. Actually it's not, because we're using this special preview option. So it's one of the little bugs with the preview option. It's not going to go off and do links.

So what I'm going to do is, I'm going to go back to Dreamweaver, and do it this way. We're still going to have a little bit of a problem. You might have noticed what I didn't do. If I click on this, it jumps up. So it can help people on mobile. Phone number here. If I click on this, this one's going to open up my browser phone number. I use Google Hangouts for my phone numbers. This will open up my Apple mail. Now, what we need to is, make sure, when you click on this, I'd like it to open up in a blank window, so that my website stays open but they can jump out to the map in a separate tab, but also come to here quite easily.

The last thing we're going to do is, I'm going to edit this column. So I'm going to make him a little smaller. So this one here is at 6, I want to make him a little bigger because that's where I'm going to put in an interactive map.

And we're going to look at Maps and Embedding in the next video. All right, see you in the next one.