Moving tags around in Dreamweaver.

Course contents

Questions

Course info

38 lessons / 4 hours

Overview

Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.

We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.

I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas 2017. I’m even inside your version of Dreamweaver right now... go on try it... open Dreamweaver > Go to Help > quick tutorial - I’m right there!This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design experience. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well.

In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML, CSS & Javascript. We will make our own navigation. We will make adjustments so that everything looks great on different mobile devices.We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site.
 Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.

Check out this link here www.byolisawesome.com, for the site we build together. Let's get excited about finally being able to build a website like a professional web designer. See you in class.


What are the requirements?

  • You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
  • No previous web design skills are needed.
  • No previous Dreamweaver skills are needed.

What am I going to get from this course?

  • 39 lectures 3+ hours of well-structured content!
  • You'll learn to build a responsive portfolio website from scratch.
  • Learn how to take a design from Illustrator & create a professional website.
  • How to use templates in Dreamweaver.
  • Create mobile, tablet & desktop versions of the website.
  • Build our own custom responsive navigation with burger menu.
  • Introduction to Javascript & jQuery.
  • How to publish your website to the internet.
  • Ways to preview your designs straight to your mobile device.
  • How to get the most from your portfolio Images.
  • How to use beautiful web fonts in your designs.
  • You will get the finished files so you never fall behind.
  • Downloadable exercise files & cheat sheet.
  • Forum support from me and the rest of the BYOL crew.
  • All the techniques used by professional website designers.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.
  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration approx 4 hours + your 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

In this video we're going to put Tags inside other Tags and introduce you to this DOM panel. Let's go and do that now.

So the first thing we need to do is, we're going to put in our Header Tag. Now, over here, under 'Insert', in 'HTML', your website's going to have three major chunks to it. It's going to have a Header, a Main Section, and a Footer. So the top, middle, and bottom. The Header and Footer are generally going to be the same on every page. We'll turn that into a Template later on. And the Main is where everything's going to change for your actual page.

So we'll put the Logo in first, which is kind of bit weird. You probably put your Header in first, and then the Logo inside of it. I've done it because I want to be able to show you how to re-order Tags if you get it in the wrong place. So what we're going to do-- it doesn't really matter where you clicked over here in the Live view, click on the 'Insert', 'HTML', click on the 'Header'. And it will appear somewhere, doesn't really matter if it's below or above the Logo here.

Now what Dreamweaver does as well is that it adds some pre-existing Text here. Just place holder Text, because if this Text does not appear here-- you can't actually see it, because it has no height, no width, no dimensions. The Header kind of goes in, and you can't see it, so it's a bit dumb. So that adds some Text in here to be helpful. This Text gets deleted pretty much straightaway once you've started using it.

First thing I want to do is, I want to put my Logo inside of my Header. You can kind of see down here in my Code view, there's my Header. Beginning and ending. Here is the Logo with the Hyperlinks and you can see the Alt Text, and the size of it. This thing I would like to go inside Header. There's kind of two main ways of doing it, it's actually a few. It's up to you whether you prefer sticking to the tools or you like working in Code view, it's totally up to you. Let's use the official way that Adobe recommends.

I work in my DOM panel here. If you can't see it, it's under 'Window', 'DOM'. And here is the Head of my site. That's all the stuff that the computer sees. You can see, here's my Title in here, tells me what kind of keyboard I'm using, but the user doesn't see any of that Head. It's easier to stuff it in the Body. So the Body contains my Header, contains my Image. And that's about it at the moment.

So over here, in my DOM panel, you can see, there's my Body. I'll twirl this down. There's my Header, separate from my a-tag which is this Link with my Image in it. You can just click and drag the 'a' inside the Header and it goes inside, and they become one happy family. Then I can go through and delete this Text, place holder Text. You can do it from up here. Actually we'll stick to doing it here in Live view. Click off. And now, that's it, we've got a Header that has my Image inside of it, with my a-tag.

That is how to kind of-- if you get things in the wrong place you're going to either have to drag them in the DOM, just drag them into the right Tag, or do what I tend to do, is I'm going to undo all of that. Here's my Header Text, I'm going to delete the Text here. Grab all of that, so, from a-tag to a-tag, cut it. Put my cursor in there, and paste it. It doesn't really matter how you like doing it. Dragging it by the DOM, or just copying and pasting down here. Just lots of times where it's easier to do one, and the other. So I'm giving you both techniques, so you can work through this course.

All right, let's hit Save, 'File', 'Save'. Let's move on to start styling our Header.

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