How do I make a template in Adobe Dreamweaver?

Course contents

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

Hello, lovely Dreamweaver people, it's time to make a Template. In this video we're going to make this thing here. It looks exactly the same as the last video but now it's called a '.dwt', and we have this thing called an editable region. What that means is I can make loads of pages and update the Template, which has got my Header and Footer, and it will spill through, and update all the pages in one big file swoop. Okay, let's learn how to do that in Dreamweaver.

First thing I want to do before I make my Template, is actually, there's a bit of text in here I want to get rid of. You can do it in Code view or Live view, doesn't matter, I prefer it in Code view. So Text gone. Now we're going to save it as a Template. Now if I've got anything selected up here in my Live view and I go 'File', 'Save as Template', it's grayed out for some reason, but if I click down here, in Code view, and go to the exact same option, comes to life, not sure why. Okay, 'description', I never give it a description but in terms of 'Save As', this is quite important. So 'index' is a bad name for it. We're going to call ours 'portfolio-template'. No spaces, don't use any crazy characters. And click 'Save'. 'Update Links?', Click 'Yes'.

One of the problems I had when I was making this course is, back in video 4, I, under 'Site', 'Manage Sites', under my site name, when we named this, I put in 'apostrophe s' both in the site name and in the folder that's on my Desktop. That caused problems for nothing except for this Template. So it was a bit of an eye opener for me. So just make sure, if you are having problems with your Template, that you don't have any funny characters in either the site name, or the local folder name. I'm pretty sure it was the local folder name that was causing the issues. Cancel all that, done, it all saved to Template, awesome.

Now what's actually happened, couple of things, a bit of code that's been added, that wasn't there before. You can see, 'TemplateBeginEditable' doctitle, there's a bunch of these that have been added. The other thing is, you can see up here, the extension 'dwt' is been added, that is Dreamweaver Template. We've also noticed, in our site files, you can see here, that's a new folder that's been made. Inside of it, there's my portfolio. Also, when you're working with Templates you'll notice that Live view doesn't work as well as it used to. Still functioning, and works kind off, but it's a little bit harder to use than it was when it was not a Template. That's no problem, and I also find that when I first generate it, if I close it down and reopen it, it's going to say, "Warning: You don't have any editable areas," and I'm like, "Cool, I need to fix that." Let's close it, reopen it back up. Generally works a whole lot better. Quirks for Dreamweaver, lovely, we love them.

So now what I want to do is I need that editable region, because at the moment, everything's part of the Template, and if I make new pages based on this Template, there's going to be nothing I can do to it, they're all locked. So what I want to do is, click where our-- remember, our main Content Box was here. You'll notice, it didn't highlight like it used to, it's one of the quirks. It has highlighted down here. But if I go to 'Insert', 'Template', 'Editable Region' remember, it doesn't really work for working in this Live view anymore, so we have to use a little bit more Code view.

So I'm going to highlight these guys. 'Main', because that's the bit that I want to be editable. Go to 'Insert', go to 'Template', and I'm going to make this my 'Editable Region'. What am I going to call it? 'Editable Region 3'? Let's call this one 'main-content'. Click 'OK'. You'll see, it gets wrapped up in this tag, and that's going to allow it to be editable. Let's hit 'Save'.

And that is how you create a Template. In the next video we'll show you how to generate a page from this Template. All right, let's go and do that now.

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