Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Adobe Dreamweaver CC Web Design from Adobe Illustrator Mockups

Daniel Scott, Adobe Certified Trainer & UI/UX Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
36 Videos (3h 49m)
    • Introduction

      2:33
    • Exercise files

      1:56
    • Setting up Websites

      3:13
    • How to create a new website in Dreamweaver

      3:56
    • 05 How to create a new HTML page in Dreamweaver

      5:27
    • How best to preview your website in Adobe Dreamweaver

      3:47
    • Moving tags around in Dreamweaver

      3:29
    • How to create edit style your first CSS style sheet in using Dreamweaver

      9:24
    • How to change or adjust the CSS styles in your Dreamweaver website

      4:50
    • How to center your website in Dreamweaver using a container

      8:05
    • How to a website that changes for mobile cell phones tablets using Dreamweaver

      8:07
    • How to test your Dreamweaver website on a mobile phone or tablet

      3:23
    • How to create a hamburger mobile drop down menu in Dreamweaver Part1

      11:10
    • Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver(2)

      13:03
    • Styling our hamburger menu getting our ul menu to stack side by side

      9:29
    • How to add different fonts to a website in Dreamweaver

      5:52
    • Fixing the style of the mobile burger drop down menu in Dreamweaver

      5:45
    • Planning for our Dreamweaver template

      2:21
    • Add a background image that is outside our main container in Dreamweaver

      7:38
    • How to use the HTML5 main tag in Dreamweaver

      4:14
    • How to add the HTML5 footer tag to a website using Adobe Dreamweaver

      9:51
    • How do I make a template in Adobe Dreamweaver

      3:43
    • How to create new pages based on a Dreamweaver template

      3:49
    • How to create a responsive hero box for our website in Dreameaver

      8:25
    • Fix problems with div tags when you float left in Dreamweaver aka clearing the float

      9:09
    • How to add and change the styling of a horizontal rule HR in Dreamweaver

      2:36
    • How to create a button in Adobe Dreamweaver CC

      5:22
    • Change fonts spacing of a website for Tablet Mobile sizes using Dreamweaver

      5:49
    • How to turn off parts of a website in different views like mobile or desktop

      6:39
    • How to create a responsive image grid in Dreamweaver

      8:26
    • How to make your images responsive in Dreamweaver to match the page size

      5:40
    • How to make different columns for desktop tablet mobile websites in Dreamweaver

      5:25
    • How to create a clearfix pseudo after class in Adobe Dreamweaver

      6:27
    • How to create & link new pages in Dreamweaver using templates

      14:21
    • How to upload your website to the internet hosting via Dreamweaver

      9:58
    • How to adding Google Analytics to your Dreamweaver website

      5:55

About This Class

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.

d475b06f

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!

a41dd8dc

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. 

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.

803a620e

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.

6 of 6 students recommendSee All

Daniel's courses are excellent, easy to follow and take what you have learned to be able to put to actual use. It also helps he is great at narrating giving complete descriptions of the task and doesn't wander off subject. .
Awesome class Daniel, thanks so much for your constantly high quality tutorials.

161

Students

--

Projects

Daniel Scott

Adobe Certified Trainer & UI/UX Expert

I'm a Digital Designer & teacher at BYOL international. Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.

I have a w...

See full profile