How to create a new website in 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

Hey there, in this video we are going to create our Site Definition. We need to do this for every single brand new site we're going to make in Dreamweaver. It's super easy. You can see out over here, I've got a folder, and inside, it's got an Images folder. It's all we need to do. Let's go and do that now.

If you're following on from the last tutorial, we're just going to close down that thing we made. And we're going to set up our Site. You need to do this at the beginning of every new site. If you're a Web Designer and you've got 10 different clients, you're going to have to do this 10 different times. If you are working on your own website, and you've only got one of them, you'll just have to do this once.

So let's go up to 'Site', 'New Site'. Give your Site a name. I'm going to call ours 'Dan's Awesome Portfolio'. Where are we going to put it? The site name doesn't actually have any repercussions other than what you use in Dreamweaver to find all your files. And that's what I thought, forever. I thought there's no repercussions for this, you can call it anything you like. Now I'm coming back from the future. I'm Dan from Video22, you're Video4, and I've come back to tell you, "Don't put the apostrophe in." Because it worked fine the whole life, putting anything in here, I thought. But I don't think I've ever put an apostrophe in this little site name. I'm not sure if it's the site name that has the problem, or it's the folder name. One of them is the problem.

Now instead of going back and re-recording the 2 days’ worth of video which I've got with the apostrophe in here, I've just come back in time to say, "Don't do it, don't put it in." And then, for the next 22 videos you're going to see that apostrophe, and look at it, and go "Knock knock, Dan, don't put apostrophes in there." So stick away from any foreign keys like asterisks and ampersands, just have real uppers and lowers. And that will not cause any problem later on when we make a template. So carry on and do everything except put apostrophes in the local site folder, in the site name.

So back into your regular videos, and I hope I don't run into my past self. Nobody seen 'Back to the Future?' Hopefully you're not that young. Surely everybody's seen 'Back to the Future'. All right, enough, back into it. Local site folder, this is where, on your laptop, this is going to be kept. I'm going to put mine on my 'Desktop'. I'm going to put mine in a new folder here, and I'm going to call it 'Dan's Awesome Portfolio'. Awesome! Also, that physical name for the folder doesn't have any repercussions. Some things do obviously, but that doesn't, click 'Choose'.

The last thing we want to do in here, is go to 'Advanced Settings' and let's go to 'Default Images Folder'. Click on that little 'Browse'. You can see it's put it inside that new folder that I just made. Let's make a new folder in here, and call it lower case 'images'. This is something specific. Call it 'images' with a lowercase 'i', no spaces, let's click 'Create'. Click 'Choose'. What that does is just help ourselves later on when we're dragging in images from all over our computer, Dreamweaver knows where to put them. That's it, click 'Save'.

And that my friend is all we need to do. If you can't see it, let's switch to 'Files' along the top here. If you can't see 'Files', go to 'Window', 'Files'. You'll see, there's my little folder. And also, on my 'Desktop', there it is there, 'Dan's Awesome Portfolio'. And there's nothing in here, except for this one folder that has images, and there is nothing in it. But just so you know, you design your site locally on your own computer first, and when you're finished, you push it up to your host. Somebody like GoDaddy, or Bluehost. And they will serve it to their world.

All right, so that is it for setting up our site. You need to do that for every single site. You'll see on my one here, I've got lots of sites that I work on. If you've done it wrong, you can't go to 'Site', go to 'Manage Sites', and you'll see them in here, there's 'Dan's Awesome Portfolio'. Double click it, and you can get back to that same screen. All right, let's get into the next tutorial.

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