Lessons

Lesson Info

Links, Google Analytics, & Creating a Menu

No, I need to set links. And I want to make sure before we conclude that I show you what us that links because links or what makes the Web go around right way Don't really have much of a web if we don't get to link things together. So I'm gonna link these three pages to each other and then maybe throw in an external link in the email link if you want to see how those work. So the link these together, I'm gonna link these images so that I'm gonna link the index one page in the index to page, right? So I'm just gonna select that arrow now, like anything else in Dreamweaver, there are multiple ways to set links, but from the insert panel, you will find a hyperlink box. That's a relatively easy option. If I choose that, I get a few more choices than I didn't do in some other places. So this is kind of handy. Now it's saying, Do you want a link text? No. I want a lengthy image that I select it so I can leave that blank. This little icon that looks like a folder that tells me It's a browse b...

utton that always means browse and dreamweaver so I can browse and I could just select the page. I want a link to click open, and it's going to set the link to that for me automatically. Very handy target. Let's me choose if I want this open in a new browser or a new tab. My general rule on that is, if you're linking to an external website, opening in a new town might be worth doing. If you're linking within your own site, I would never do that. It's very confusing to people in terms of interface. If you want to change that, it opens in a new browser. Windows choose. Blink here. I'm not gonna do that, cause the's Air Internal Links titles are optional, but they're useful inaccessibility that sometimes help with search engine optimization. So I could say, uh, Link Teoh second page in Siris. Or I could put, you know, linked to our photo. If this was a link to another website, this would make even more sense linked to the digital family dot com site. Again, that's optional access and Tabar also used for usability and accessibility that give me special key commands that let me move around a page with my fingers. If I can't see a swell or if I have less dexterity than some of us, those could be useful again, making this a quick crash course. I'm not gonna go into too much detail, but I've no made that arrow hopefully linked to the next page. For some reason, it didn't do it. Let's see why. Um hyperlink Did I not hit? Okay when I was done, let me do it a different way this time just to show you another way. So selecting that arrow clicking down here, down here at the bottom of the page, you'll see this is the source. This is where that image lives and this is the link. And if that Lincoln set properly, that would show here for some reason it didn't. So let's just do it again. I was having some trouble as I was practicing for this class. It made it a text link when I did that, getting the arrow links to work properly, I think that the best way to do it is down here. So I'm linking Teoh Index too. So let's go to index to and here I'm gonna link that arrow to index three. So select the arrow link to index three. Make sure it's really there. Save. I'm gonna go back and set the previous arrow back to index one. So I'm just creating a nice little loop, and then I gotta index three and I'm gonna make this one link back to the first page so I can go all the way around. Just link this to Index. And over here, I'm gonna make this one link back to Index to save and on the index page. I could make that back arrow go back to index three just so that it goes all the way around. Okay, let's see if it worked. Preview it in Google Drumaville, please. So click, Click, click. Know something's not set, right? That's right. Let's go fix it real quick. I'm just gonna close up. Some of these tabs happens after you've been working for a while, so this is a really easy thing. Especially when you're half distracted and talking out loud while you work. I don't know if you do this at home. Talk to yourself. Boy work. I have friends who do it. My husband's walked in on me doing it more than once, I'm sure, but it does make it harder to focus. So somehow that one jumped all the way to three. I want that one to go to index to. So let's watch closely. Like I said, I had a little trouble when I was doing this. That I think sometimes if you don't completely de select something, Dreamweaver can be a little bit funny about how it manages stuff like that. Okay, so that one goes to index to and that one goes back to index three and on index to that one should go back to index one. Yeah, and that one should go on. He somehow that changed index. Oh, there we go. Yeah, it just you think you've selected it, and you haven't quite so watch that you've really selected it. Very easy, toe. Do that. And again, it's not you. It's Dreamweaver. Misleading. You okay, Um, and back to index. Let's see if it works this time. Okay? Yes. All right. So we're on the home page. There's our 2nd 1 the owl. See, we couldn't miss that picture. I like that picture. And then we get to our little quail when we come back. So very simple little way didn't even have to get a fancy slideshow tool. If this were a little bigger screen, it would look better. If this were a responsive design, it would probably adjust and make itself a little smaller. I'm gonna take this down just a little so you can see the whole thing at once. How the how smoothly that works. Because remember, even though these air three separate HTML pages because this up here is just text and these images, once they're loaded in the browser, are cached. It almost seems like it's a slider. It almost doesn't feel like three pages getting loaded together because I'm only changing one element of these three pages because I very carefully set it up. And that template helped me do it so that they're exactly the same positioning as we went through. And that makes it a lot easier to manage its another advantage of templates. So the tablets help you with elements like words and links that are actual parts of the content, and the CSS hopes you with all of the sile information. But those to work really nicely together. And and you can imagine if this were 50 pages, how helpful it would be able to go back to that template and make changes to go be able to go back to that style sheet make changes takes a little more time to learn Web design today than it used to. But let me tell you, as you move forward, it's really worth it in the long run, some to stop for a second, take some questions. There are several other things that I can throw in here, but I just want to see where we are. If there any pressing, this is your chance to ask me anything. One of the things I'm thinking about showing us how to put Google analytics code into the back of your pages and how templates help with that. So I'll probably do that no matter what, what else? When people are wells, Um, if you wanted a slider because that's something you could build in Dreamweaver, or would you recommend using 1/3 party software like Java? RJ Query. Let me go back to because I know not everybody watches every second of all of these videos, and this morning I showed some of my favorite options for Dreamweaver extensions. You see if I can get this to fit back on this page now me one second to make this work. What? I'm trying to show you our Dreamweaver extensions and on the Adobe website. If you go to adobe exchange dot com, you'll find extensions. And then these four companies, I think in the order that I like them with test them out include things like an image rotator A really know the pop. The Pop menu Magic three. For drop down menus, I found quite an extraordinarily useful tool for creating very complex drop down menus. And Dreamweaver that's a feature that used to be in during were six in previous versions they ripped it out of during Weaver CC. You can't even make drop down menus anymore unless you add an extension. So it's nice for that. The J query Power slider from Extent studio I used on my site for quite a while till I finally upgraded toward press because my site just got too big to manage in Dreamweaver. You can certainly, in theory create your own slider. Dreamweaver will let you write the JavaScript, html and CSS. But you have to know javascript html and to do that. So these tools much like plug ins and WordPress just save you those steps. And those two in particular, the drop down menus and the power slider in those 1st 2 I have personally used and found very helpful. Great question. Perfect. Thank you. And another question about workflow and your best practices. Yeah, You design a website and you've got whether whether you design it in, you know, whether the photo shop or illustrator or in design and then do you then right all your CSS or do you write it as you go? Such a good question. Honestly, it really depends on the kind of sight I'm creating. So if I'm creating a really complex website, um, I'm I'll give you Ah, client have shown many times here, and I'm about to redesign. So stay tuned for a completely new look at ex vivo dot net. This is a scientific animation company. This is a really complicated site. We had a whole complicated workflow. We developed wire frames of how things were gonna link together and wire frames just a fancy way of saying something that shows the boxes in the structure of things. We did all the design work and Photoshopped layered PSD is and got them working the way we wanted. Those layer key STs were then passed on to a very sophisticated programmer who created a very complicated template with all kinds of CSS and JavaScript so that these things could move around. This is actually a WordPress site on. And this is a WordPress site that we built seven years ago, way before WordPress sites ever looked like this. So this site now is getting ready to get a whole new parallax cool, wonderful, divine. But in its day, this was a particularly unique look for a WordPress site because it was so highly customized and on a site this complicated, we spent a lot of time thinking about what's the workflow of the people who work there? What are they gonna want to update on the site? Oh, every time they create a new animation that they want a feature in their gallery of animations, they're gonna need an easy way to upload a video and an image and some text. So we spent a lot of time thinking about their workflow in managing it as well as our workflow in building it. So with the high end of workflow, workflow can be two tiered. What's my workflow in my teens workflow to build this. But then what's the workflow of the people that I'm gonna pass this on to update it later at the simple end, if you're just creating a site like this one, I didn't even go into photo shop and do this. I just started creating it. You know, I'm creating a super basic class on Dreamweaver. There's only so much I can teach in a day. This I can just mock up right here in Dreamweaver and in some ways that kept me restricted to what I could teach efficiently. And I'm still not getting to everything I wanted to show you. There's just not enough time. Most like the more complicated than that. And it's a very common workflow to start Photoshopped or in design, whichever you're more comfortable in, get things the way you want TEM and then recreate hm in Dreamweaver and the Photoshopped generator trick that I showed earlier that ability to added that J. peg to any layer and use the generate assets. If you missed that, you have to see it. So I have multiple layers here to this image and I go to file generate image assets. This is a new feature in cc dot I don't know. It came months after Sisi was first launched. This image assets option automatically generates J pegs for you. You can even specify things like how much compression you want. And if you have a really complicated layout where you have, you know all the header elements and all the slider elements of multiple sliders at the high end of Web design, you can end up with very, very complex PSD files. If those air organized well into subdirectories, each of those folders can automatically be turned into one nice che peg with this photo shop generate option. Huge time saver. The safer Web dialog box is great, but photo shops new generate really can save you a lot of time. So that's a little bit of work flow and a really good question. I think one of the things that sets beginners apart from more experienced people is that beginners are just trying to figure out how it works and the more experienced ones are working a workflow because they need to be able to do a lot of these. And it's part of why I wanted to show you from the start templates and CSS because combining the power of templates and CFS is really what makes workflow a lot better later. The other thing I'll remind you is live you that we're not really seeing what this looks like until we get to live you. Then you get to see that cool form. But, um, so don't forget that when you're working in Dreamweaver in design view, you're really looking at what this would look like in a very and I mean very old Web browser, like four or five versions, old kind of Web browser versus Live You, which is pretty close to the latest version of the latest browsers. Again, I say pretty close because even all of the latest versions of the latest browsers don't agree on 100% on all of the ways to display all of the different HTML and CSS features available. That is the biggest challenge of what design but is less of a challenge day than it used to be, Believe it or not. Okay, let me show you how to slip some code from something like Google analytics. This also works. If you have a YouTube video that you want to put in any time you need to take code from 1/3 party site and put it in your website, this is all it takes. So I have set up in the magical. I am a chef. I've already prepared something's way. I have set up an account at Google Analytics for my California Wildlife photography site. You can do this too. It is free. Just go to Google Analytics, Google, Google Analytics. You will learn everything you need to know about Google Analytics. What's really powerful about it is that you insert a little snippet of code, this being that stepping of code, and it tracks the traffic toe all of the pages in your website, and then you go back to the Google Analytics site and you can get very, very detailed reports about where people come from, what time of day they come, which pages they look at on your site, which pages they land on what keywords they searched for Google to find you in the first place when they got there, where they went all kinds of information that you can get their entire classes just on all the rich data you get from Google analytics. So I highly recommend it. It's a standard part of my routine for any client what I do. And here's an advanced tip for Web designers out there. With all my clients, I set up a special new Gmail account just for the client. So let's say it's ex vivo. I might create an email address. That's ex vivo website at gmail dot com. That's just for them, just for managing all their accounts. And then I used that email address to set up the Google Analytics account so that it's all theirs at the end and then at the end, I can give them a document says Here's your special little email account that goes with your YouTube account and goes with your Google Analytics account and goes with your video account and anything else have set up for you, I can turn all over to you. There's an email address I've been able to access to make all this work for you, but now it's yours. If I get hit by a bus, you can do everything yourself. If you choose to replace me, you have that option. I never believe in holding my clients hostage. I always try to empower them to do what they want. I'm very fortunate. They tend to stay with me for long periods of time. But I think that's a really good practice to set up these third party accounts for your client in a way that you could easily give it back to your client when you're done. But with Google Analytics with YouTube, with Google AdSense with the another tool that I like a lot that works this way, I'll just show you real quick. Um, as I'm talking about is, add this. I think that's the right girl. Um, and this puts all those social media sharing icons on there, and when you click on him, it goes to Facebook and it actually starts the post on Facebook, or it starts the post on Twitter again, very easy to add to a website. You set up an account for free and add this and then you copy and paste a little snippet of code from Add this into your Web pages. So how do you do that? Well, it's pretty easy, But there's a trick, especially for Google analytics that goes with the templates and why. It's a nice compliment to showing you how to use templates. So if I copy this little snippet of code and this is just a little script, no Google will tell you that it's best to put this at the bottom of your Web pages. You should put it on every page you want to track, so I could and Dreamweaver go into the code, do in every one of these pages and paste it in here. They'd be pretty tedious. It would be much more efficient now that I have a template to go into my template. Put that in the bottom of my template and it will show up on every page on my site. And as I create new pages, it'll automatically be there because Google only tracks the pages that have a code. But notice something here. That creditable region in the template is designated with a comment tag, right? It's green. It's a special comment tag that Dreamweaver makes screen so you can see it. The creditable region starts here, includes all of my main content information and ends here. I need to make sure I put this code after that Edit Herbal Region ends or it won't get applied to all the pages. Right? So if I paste that in there now, I'm just pacing that code. Always paste code in the code, so you have to be encoded you when you place it. And now when I say that it says, Do you want to add that all of those pages on again? Even if I had 50 pages on the site, I would just say, Yep, update that for me. By the way, if you don't see this part, this little thing, that's a show log. Put it a little check box on there because it's really nice to be able to actually see that it really did update those pages. And once in a while you get a hiccup in there. I like to keep an eye on it, so by default that's not selected. If you click that, you'll get to see exactly which pages were updated, and you can confirm that it's there And of course, if we want to really, really make sure we can go open any one of these, go to split view, scroll down and notice that it's great out. I can't edit it here, right? It's in a locked region of the template similarly, and this is another thing that throws people. How come I can't edit that here? Well, that can only be edited in the template itself, and that's why I can use it to update multiple pages. I say that over and over. Some people get it right away and think I'm being repetitive. Other people trust me that I have a little struggle around edit herbal areas of the template, so just trying to reinforce that. So we've got some Google AdSense code in here. We've linked a bunch of pages together with these templates will use styles we've packed a lot into one day. Any other burning questions? Well, let me let me take a look. Should I just throw some more? ASHA, I know there are always a little bit tricky, so let's see. Um, would you create a menu bar as a component? Does that exist in Dreamweaver the way it didn't go live. So there's no feature in Dreamweaver like there was and go live or front page. That kind of automatically creates a menu bar. But when I was thinking about throwing one more thing in, that's what I was thinking of at this point, I have a choice. Where would I put that menu? I would definitely put it in my template. I would definitely put it in the locked region of my template because I might want to add new sections later. So let's just go into the template and end with that. Oh, by the way, I'm gonna want to change that caption on all those pages. So if you notice that, uh, my probably have the wrong caption on these because that's an inevitable region. I could easily change that, too. But not in live you not in this version coming soon, you ai quail in northern California. So again, anything inevitable region has to be changed specifically on each of the pages. I believe that was a great horned owl. Correct me if I'm wrong, Okay. But in the template in the locked region, which I can Onley change in the template itself might be a really good place to add navigation. And now I need to do this. I want it appear at the top again. There multiple ways to do it. So let me just hit return for now, and I'll just put in a series of links I'm gonna have a link to, um, think ahead. This site will be built out further. I'm gonna go ahead and the scene. There will be different sections. I'm gonna have an about page about the photographer, about the site, whatever. That's pretty common thing to have. And I might have a series of galleries, not just this 1st 1 So maybe I'd have gallery one gallery to gallery three. Now what I did before we just create three pages and link them together. I could making each of those the front of the galleries and linked to those or I could create additional pages for the galleries and link those to the galleries. That's how we envisioned the sights. I'm gonna do that. And I want to just show you a quick a couple other things about sites, structure and organization. I haven't created these pages yet. It's a little tricky to link to a page you haven't created yet. I could highlight this. And just right down here in the Link box gallery one dot html because that's when I think I'm gonna name it. But let me warn you, one little typo on you're dead. Your links don't work. So what I find to be a better strategy, rather than trying to type things in multiple times and risk typos, is to just go ahead and create new pages, even if there's nothing on them yet and just replace those pages later. So I know the name. Stay consistent. So if you right click or option click. One of the options here is new file, and I could just create three new files Gallery one and calorie to know there's nothing in these. Just think of them as quick placeholders. But what's really nice about, um let me get in there. There we go is that they give me something toe linked to, and I don't have to worry about that. By the way, sometimes people ask me, Sometimes people will email me and say the stuffing my files panel is not the same order as yours is the first time I got this. I wasn't sure what they met. If you click on local files, you can switch that order much like in the finder. You can change things alphabetically, so just click on that to get it to the order that you want it to be in. The other thing I'll show you is that I start to get really busy here now in my website and I If you have 50 pages in here, it could be a mess. So another thing that's kind of nice to be able to do is I can create a new folder called Gallery One. And I could drag that gallery one page into the gallery one folder, and Dreamweaver is gonna offer to update any links that might already be there and take care of it for me. So it's not gonna break any links and even way after you've built a website, you can organize it quite a bit. And I may ultimately want a folder for each of those galleries because in addition to the front page of the gallery, I might have 50 more pages in each of those galleries, and having those in subdirectories just saves the clutter so many times when I'm inherited a website that somebody else built years ago. You go up to the server and you just see, like, 500 files, just all at the top level. It's like, Okay, first thing we gotta dio is get some order here, right? So bring it into Dreamweaver, set it up, and then you can start creating folders dragging things around. And Dreamweaver will very nicely, very helpfully, um, fix things for you now gallery one gallery to that's Should they be capital? Should they be lower case Really again. A subjective choice for a brief period of time when, um x html strict with a common thing. And that meant that all the HTML had to be written in lower case because that was one of the requirements most of us did lower case file names just to keep everything consistent. HTML five is not that picky. You can use mixed case in HTML again. It's still maybe not the best practice. And for that reason I'm in the habit of making everything lower case and file names. But it's not a requirement. And indeed, if you look at the one folder that dream We were created for me over here. The template folder. It's got a capital T, and it has to keep that capital. T or Dreamweaver will lose track of your template, and it'll stop working. One other thing about templates I've found sometimes when you move a site from one computer to another, even if the template still available Dream we were just kind of loses track, and sometimes you just have to re associate it. Um, this is another advanced tip, but you can modify template, apply tough flip to page and reapply the same template to the page and just remind Dreamweaver where that template is. So if you've ever moved a slight and your templates didn't work anymore, go to modify templates apply template to page. Reapply the same template. And you just kind of remind Dreamweaver where it is and your templates over back toe working. Very common problem. Unfortunately, now there are all kinds of CSS style options that I could use to make this navigation bar look a lot better. But now I'm actually running out of time pretty fast, so let's let's just do one quick thing. I'm gonna put a diff tag around it number. I'm just selecting it, using Div wrapping it around there, and I'm gonna call this knave are very common to create a day of called now bar and keep all your links in it. Just creating a really simple file just so that I can not have it so far hanging off on the left. But it looks terrible. When I end the class. I'm gonna coming here. I've got it selected. And if I click add selector. Dreamweaver should be smart enough to do it. I can keep it specific. Or I could just make it map bar. In this case, I'm just gonna have nab our and all I'm gonna do. For now, it's just add a little space from the left. What was that? About? 150 pixels. I think I figured out. But I've all in it. Yeah, middle line up with the, um, title at the top. Maybe I'll make the text. Not a Sarah font of sand syrups. That's not I could change the color, but let's let's do a sand, Sarah. Yeah, there we go. Just a little cleaner. Um, and now I'm gonna set links. So I. Actually, I think the one thing I didn't create was an about page. Let's just so if I do one more page here and maybe I'll keep this one of the top level. It's not a problem to have pages of the top level. It just gets messy If all your pages air there so I can select this and I can use that little, um, icon toe selected, find it. But there's a really nice trick. If you're linking a bunch of things at once, just open each of these folders, so it's easy to see those files. If I want a link Gallery one down here so you can see what I'm actually doing. You see this little thing? That's his point to file. If you've ever wondered what that was, it is the coolest little shortcut to setting links, so selected that when a click and drag them a link to Gallery one and then I'm gonna select gallery to and just drag that little arrow to gallery to on then Gallery three and just dragged that little arrow over to Gallery three. And when I say this, it's gonna update all of those pages and those links are added to every one of those pages. So does Dreamweaver have a knave? Our feature like Oh, I didn't know. But this Dreamweaver make it really easy to create a knave. Are that you can update across all those pages? Absolutely. Because it has templates and templates do so much more.