How to embed Youtube, Addthis, Disqus, Google Maps & Eventbrite on a Dreamweaver page

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

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

Download Exercise Files

Transcript

Hi, my name is Dan. In this video we're going to look at a few other things that you could embed that might be useful for you.

So, we were looking out for services that allow paid or free embed codes to make your website do things that potentially could be really tricky for you to do on your own, and manage. So first of all, what I want to do is clear a space for it. So I've cleared a space at the top here for my map. I'm going to come down here and clear these away so I can put some-- something that can really fit in the page. I'm going to dump in lots of bit codes just so you can see how easy they are, and what they get up to.

So in this case, I'm going to grab my Row. There's a Column inside of it, I'll keep that one but I'll delete this Column on this side. I'm going to grab this guy, I'm going to extend him up to about '12'. Where does this want to go? I'll delete this image inside of it, and then drag it out. Dreamweaver is having not a great time with it. So I'm going to make sure I'm on Large. I'm going to switch it here, and set it to '12', force it to go up to-- not sure what's wrong over there. I'll leave it in though because it might happen to you. So I've switched it out, so it's 12, so it fits in. I'm going to stick my Embed code in here. I'm going to hit 'Split' view, so I can see it. And in here is my Column. I'm got put some codes in here.

Let's go and have a look at what's easy to use. You choose probably one of the most common ones used. Here it is here. You can see, I use it on my site, I use Youtube I use a private channel so people-- so I can control it a little bit more, but I get to use the power of Youtube, so I've got one of my videos here, and what I want to do is, we're looking for down the bottom here, there's one called Share. And then, the one I want to call Embed. Remember, Embed's the word. Sometimes they call it widgets in different programs but generally either Embed or Widgets. I'm going to select this.

You can see here, I can pick height and a width. I can go through, and go 'Show More', it could give me more customized. I can just hide things like- I'll turn this off, 'Show suggested videos at the end'. Just to get some inappropriate appearance. I can 'Show Player Controls’, yes, I've had Play and Stop here. All these types of things, I can put in specific height and width. I'm going to leave mine standard Youtube size, and I'm going to grab 'Embed Code'. 'Copy' it, 'Dreamweaver', 'paste' it in here. You'll notice at the top here, I've got a lovely video replay. Then we switch out to-- here we go, here is my map from Google, and here's my video from Youtube playing on my site.

Now if you're not using Youtube, using Vimeo, it does the same thing, or Wistia, does the same thing. Just copy and paste it, and you get the power of their service. So let's jump out and look at a different one. So I'm going to bin Youtube. Let's look at some other ones. Another one in Embed code which is quite useful is a calendar. It might show that-- say you're a professional, and you're available or busy, you can set up a calendar in Google Calendar, which is free. I'm just going to show you how to add the Irish holidays. So I've got this Holiday Calendar set up in Google. I go to 'Calendar Settings', and here, there's an Iframe. You could do this with any calendar you create. Now I just copy it. I could go through and customize the color and size, and different options, but I'm just going to copy it, and put it into Dreamweaver. And I'm going to paste it in here, and voila, hopefully…

Back up to my Preview version. There's a calendar, and it's totally usable. I can switch to Week view, Agenda view. You can customize it a little bit more. It's a great way to get things, like well, holidays in Ireland, I don't have to go through and do anything. Or you can put things like, when you're available. Say you're a personal trainer, or a dentist or anybody that needs to show when there are bookings available. You can show that using Google Calendars. You can't style so much like you can some other widgets. You can do some basic stuff with colors, but it still looks a little bit Googley.

Next we'll look at is something like Eventbrite. Eventbrite, I use quite a bit for, say I'm running in-house classes, and I've got a course coming up to teach Dreamweaver. People can book on it, in Dublin, or in this case, my class is in Auckland. When you're setting it up, it's free to start with, Eventbrite. They take commission on sales. They call these widgets, rather than embed. I click on it, and they got a few different ones. I'm going to use this one here, Ticket Form. And there should be, down the bottom here, a bit of copy and paste code, copy it. And you could see now, I can take payments from my website, hopefully. I get rid of the old Iframe from the calendar, paste this one in. I'm going to check out our Preview version.

On my lovely page now, I've got the option that people could buy a course, so they can join my June 13th one. They can pick 'Quantity', and book now, and pay now through my website. So instead of trying to set it all up yourself in Dreamweaver with this booking, and drop-down buttons, and quite technical stuff, and setting up payment gateways, and all sorts of other crazy stuff, you can use and leverage these other bits of-- they're technically called Software Service. It's a bit of website that will do all the processing of your events for you. And to be honest, it saves a lot of time. And if I'm honest, I use a lot these embeds to leverage other people's knowledge and learning, and IT support, and technical abilities. So I just use a lot of Embed Codes for lots of different things.

Let's look at a couple more before we move on, like Twitter. So this is my Twitter grab, here I am here. danlovesadobe, follow me if you are a Twitter user. What you can do in here, say I want my feats to appear on my website. So I can go to settings here, I can go down to 'Settings'. And over here, on the side here, there's one called Widgets. Remember, it's Widgets or Embed Codes. I can click 'Create New'. I'm going to have this little block here that displays all my tweets, including 'Exclude replies', 'Include replies', 'Exclude replies'. And you can pick some basic colors, some basic heights. Little bits, you can't do too much. But I'm going to click on 'Create Widget', and what happens is, down the bottom here, there's a little bit of Embed Code. We know what to do with that now. I'm going to 'Select' it all, 'Copy' it, go here. Get rid of this guy, paste him in. And hopefully now, if I jump out to my Preview, there he is there. Here's my lovely trophy. People can start to see things that I've been working on. They can follow me from here. It's a handy little option.

The same thing applies for Facebook. Any other social networks, LinkedIn have Embed Codes to show you tweets. You can make your site look-- I find these social options gives, especially if you are active on social media, it gives you stuff that might be kind of dead and doesn't get up anywhere very much. Give it new contents and new updates. I haven't updated mine since before I went away for Christmas. So it's probably not great to show you're not doing anything on social media. In my case, I'm not going to put my tweets up here.

Rather than show you all the rest of them, because we understand them now, we understand pretty much. We find everything, the Embed Code, or Widget and we'll just go through, and copy and paste it on to our website. I'll show you a few things I've used on one of my sites. So this one here, there's a few things, this thing here is called the Addthis. So 'addthis.com', if you want to go and have a look. And it's just a really easy thing to set up, it's free. It allows people to click and share socially. My pages here, just really handy, just copy and paste the code. It handles all the hard work of delivering it off, and adding these updates here.

Other thing I've used on this page is this thing here, it's called Disqus. I wanted a quick and easy way to get a forum going where people can add questions and answers. Technically you'll need a database to do that. It's quite a bit out of scope of our current Dreamweaver class where we may be into doing large scale database. Which is something you might want to go and do, but to be honest, this thing here, you'll see, the style of it, it's quite common. Why? Because everybody is using Disqus, which is an easy way to copy and paste rather than use somebody else's technical ability to add a forum like thing to your website. So check out Disqus for that one. Check the spelling there. D-I-S-Q-U-S.

Another thing I'll show you on this site here that I use. Down the bottom here, there's an email subscribe button to my emailer. So, what you can do - if you're not already - go to bringyourownlaptop.com, go to the bottom and subscribe, and I'll send you updates and links, and all those types of things. What it does is-- I'm into MailChimp. MailChimp is an email system that will send out emails to people, and they will give you an Embed Code, so people can add their email address, and then hit 'Subscribe'. And it will handle it, and add it to your list so that when you do have to send out a big email bill, or email newsletter, your list is all created, and ready to go in MailChimp.

Now there are hundreds of other Embed Codes. I'm not going to go through everything, but if you are thinking of doing something, and you're like "How do I add this to my website technically using Dreamweaver?" you might go off and see if there's a company that you can sign up for. Often there's free options that you can then just embed on your site, and potentially later on go and build it yourself. But you could leverage somebody else's work at the moment and just get going quickly. That's going to be it for the Embed Codes.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024