How to test your Dreamweaver website on a mobile phone or tablet.

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

Hi there, in this tutorial we're going to look at previewing our website from Dreamweaver directly on to our mobile phone. And it's going to appear here. See that green background, and then watch this. It's red background. The nice thing about it is we don't have to host it on a website, and we can just make adjustments on Dreamweaver directly, and it automatically updates on a mobile phone, it's really cool. Why am I holding across my face? It's because my camera won't zoom when I get it close to the camera like that. See, so I hold it here. All right, let's get into the tutorial.

The first thing we need to do if we're going to test on a mobile phone is we need an actual website that has some differences when it's on mobile. So, the Desktop view, it's gray, if I get down to Tablet, goes red, and down to cell phone, it's green. We did this in a previous tutorial. Now what I want to do is, down the bottom here, go to Real Time Browser Preview. Clicked on this, and before, we used Chrome, now we're going to use this one. I'm going to have to twirl that up because for some reason my screen drops off that bottom. So you need to be able to see this. And we're going to do two things we do in real life. You can either use a QR code, just scan that, or you can type in that URL, or email that to yourself. So I switch to real life human Dan, and he will show you the rest.

Okay, demonstration time. What you do is you download a QR Code Reader. There's loads of free ones online or through the App Store, I've got mine on an Android here. And pretty much it is pointed at the QR code that we generated. And hopefully-- I'll get close enough. Makes a little beepy noise, and it takes you to the website. Now you're going to have to put in your password for your Adobe ID. And eventually, hopefully, it's going to load. There it is, it's the green version. We have the camera focused on it. And watch this, horizontal, it's the red version for Table, green version for Mobile. It's because it does screen width rather than the actual device. It's too hard to try and pick devices that change too much. So you end up just doing screen widths.

The nice thing about this though is that you get to then stick this up next to your computer and plug it into the power, and just be developing on Dreamweaver, and it instantly updates all the time on your mobile device, you can have a tablet there. Impress the heck out of people, you'll look like a pro. All right, let's jump back into the screen capture version of myself.

So before we go, what we want to do is, we added these crazy colors to prove that Media Queries work, it's not what we want for the long term website. So we're going to go and just remove those. So 'Styles', we're going to find-- we'll do it for Tablet first, 'Header'. Actually we're just going to delete the whole Selector. You can just remove the background color but actually I don't think I need the Header for anything else. But I'm going to hit minus '-', goodbye. Go to one that's similar, find Header, minus '-', goodbye. Now the responsiveness doesn't really do anything but at least our Media Queries are still there for our future work. Tablet, and Mobile view. All right, onwards and upwards.

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