🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

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

0

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

Transcript

Hi, my name is Dan, and in this video we're gonna look at  a few other things that you can embed  that might be useful for you. So remember, we're looking out for services that allow, uh,  paid or free, um, 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 wanna do is clear a space for it. So I've cleared a space at the top here for my map. Um, I'm gonna come down here  and clear these away so I can put some, just, I'm gonna,  it's not gonna really fit with the page. I'm just gonna dump in lots of bid 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  and there's a column inside of it. I'll keep that one, but I'll delete this  column on this side. I'll grab this guy, I'll extend him out for the 12. Come on 12. Ready? Doesn't want to go and delete this image inside  of it and then drag it out.

No, Dreamweavers having, uh, not a great time of it. So I'm gonna make sure I'm on large. I'm gonna switch it here And switch it to 12. Force it to go out. Not sure what was wrong with there. I'll leave it in the tutorial though  because it might happen to you.

And so switch it out. So it's 12, so it fits in here. So I'm gonna stick my embed code in here. So I'm gonna hit split view so I can see it. Um, and here is my column. So I'm gonna put some codes in here.

So let's go and have a look at what's easy to use. YouTube's 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, um,  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, Okay. And what I wanna do is you're looking  for down the bottom here, there's one called share,  and then the one, the one called embed. Remember embeds the words. Sometimes they call them widgets  in different programs, but generally  either embed or widgets. So I'm gonna select this. You can see  I can pick a height and a width.

I could go through and go show more  and it could give me more customize. I can decide things like, um, I turn this off,  show suggested videos at the end of it. Okay? Just in case something inappropriate appears I can  show the player controls. Yes. So that play and stop appear,  all these types of things.

I can put a specific height in a  width, I'm gonna leave mine. Uh, but kind of standard YouTube size. Then I'm gonna grab my embed code, copy it,  dreamweaver, paste it in here. And you'll notice at the top here,  I've got a lovely video to play. Let me switch out to my,  Here we go. There's my map from Google  and here's my video from YouTube playing on my site.

Okay? Now, if you're not using, uh, YouTube using Vimeo,  it uh, does the same thing, or Wistia does the same thing. You 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 gonna bin my YouTube  and let's look at some other ones. So another one of the embed codes  that is quite useful is a calendar.

So it might show that when you are, uh,  you say you're a professional and you are available  and busy, you can set up a calendar in  Google Calendars, which is free. And I'm gonna set up the, I'm just gonna show you how  to add the, um, Irish holidays. So I've got this hol calendar set up in Google. I'm gonna go to calendar settings. And here there's an iframe. Okay?

And you could do this with any calendar you  create and I just copy it. I could go through and customize the color and size  and different options, but I'm just gonna copy it  and put it into Dreamweaver and I'm gonna paste it in here. And voila, hopefully I'll back out to my preview version. There's a calendar and it's totally usable. Okay? I can switch to week view, agenda view,  and you can customize it a little bit more.

Um, and yeah, that's a great way to get things like, um,  you know, holidays in island,  I don't have to go through and do anything. Or you can put things like when you're available,  say you're a, um, personal trainer or a dentist  or anybody that needs  to show when there are bookings available, um, you can show  that using Google Calendars. You can't style it so much, um,  like you can some other widgets. Um, you can do some basic stuff with colors,  but um, it still looks a little bit googly, but that's okay. Next we'll look at is say something like Eventbrite. Uh, Eventbrite I use quite a bit for,  say I'm running in-house classes.

So, um, I've got a course coming up to teach Dreamweaver. People can book on it in Dublin,  or this case is my classes in Auckland. Um, and when you're setting it up, okay, it's free  to start with ver Bright. They take a commission on sales  and they've got, they call these the  widgets rather than embed. And I click on it and they've got a few different ones. And I'm gonna use this one here, ticket form.

And there should be down the bottom  here, but a copy and paste code. I copy it and you can 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 gonna go check out our preview version,  you see on my lovely page. Now I've got the option that people could buy a course  so they could 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 dropdown buttons  and quite technically tough stuff  and setting up payment gateways  and all sorts of, uh, other crazy stuff you can use  and leverage these other bits of,  they're technically called software as service. Okay? So it's a bit of, um, 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 of these embeds to kind  of 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, uh, Twitter. Okay, so this is my Twitter account. I am, uh, here I am here. Dan loves Adobe. Um, follow me if you are a Twitter user. And what you can do in here, say I want my feed  to appear on my website.

So I can go up to my settings here. I can go down to settings. And over here on the side here, there's one called widgets. Remember there's widgets or, um, embed codes. I can click create new. And I'm gonna say,  I'm gonna have this, um, little block here that  displays all my tweets, including excluding the replies,  including the replies, excluding the replies.

And you can pick some basic colors,  some basic heights, um, some little bits. You can't do too much, but I'm gonna click on Create widget. And what happens is, down the bottom here,  there's a little bit of a bid code. We know what to do with that. Now I'm gonna select the all,  copy it, go here, get rid of this guy and paste them in. And hopefully now if I jump out to my preview, there he is  that here's my lovely Twitter feed, okay?

And people can start to see  the things that I've been working on. They can follow me from here. It's a handy little option. Uh, the same thing applies for Facebook. Uh, any other social networks, uh, LinkedIn have embed codes  to show your tweets so you can make your site look. Uh, I, I find these social options gives,  especially if you are active on social media,  it gives your site that might be kind of dead  and doesn't get updated very much.

Give it new content and new updates. I haven't updated mine since  before I went away for Christmas, so it's probably not great  to show that you're not doing anything on social media. So, um, in my case,  I'm not gonna put my tweets up here rather than  show you all the rest of them. 'cause we understand them now we understand pretty much we  find the either the embed code or the widget code  and we just go through and copy  and paste it onto our website. Um, I'll show you a few things  that I've used on one of my sites. So this one here, there's a few things.

This thing here, it's called the add this. So add this.com if you wanna go and have a look. And it's just a really easy thing to get set up. It's free. Um, and where is he there? It allows people to click and share socially.

Um, my page is here now. Um, just really handy. Just copy and paste the code. It handles all the hard work of delivering it off  and adding these updaters here. Other thing that I've used on this page is this thing  here, it's called discuss. I wanted a quick and easy way to get a forum going.

Okay? So where people can add questions and answers,  and technically you'll need a database to do that. And it's quite a bit outta the scope  of our current Dreamweaver class where we, uh, we need  to get into like doing a MySQL 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's using discuss. It's just an easy way to copy and paste other  and use somebody else's technical ability  to add a forum like thing to your website. So check out, discuss for that one. It's, uh, check out the spelling there. D-I-S-Q-U-S. Another thing I'll show you on this site here  that I use is down the bottom here,  there's an email subscribe button to my emailer, okay?

So what you can do if you're not already, go  to bring in laptop.com and go to the bottom and subscribe  and I'll send you updates and links  and all those types of things. But what it does is, oh, into MailChimp. MailChimp is an email system that will send out emails  to people and they'll give you a little embed code so  that people can add their email address, okay? And then hit subscribe and it will handle it  and add it to your list so that when you do have  to send out, uh, a big email Beamer  or email newsletter, um, your list is all created, ready  to go in MailChimp. Now, there are hundreds of other embed codes. I'm not gonna go through everything,  but if you are thinking of doing something  and you're like, how do I, uh, 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. Um, but you could leverage somebody else's work at the  moment and just get going quickly. Alright? That's gonna be it for the embed codes.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025