HTML and CSS using Dreamweaver CC

Video Lectures

Displaying all 34 video lectures.
Lecture 1
How to define a site
Play Video		 How to define a site
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF


Hi, Welcome, My name is Daniel Walter Scott.
I am a trainer here at Bring Your Own Laptop.
This course is designed for people who have never used Dreamweaver before or are new to Web Design.
The topic we are covering today
is: How To Define A Web Site in Dreamweaver
Lecture 2
How to create an HTML page in Dreamweaver CC
Play Video		 How to create an HTML page in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design.

The topic we are covering today is: How to create your first HTML page.
Lecture 3
How to add text to your website in Dreamweaver CC
Play Video		 How to add text to your website in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and web design. The topic we are covering today is: Adding text to our website.
Lecture 4
HTML tag selectors in Dreamweaver CC
Play Video		 HTML tag selectors in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF


Hi, Welcome,
My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: HTML Tag Selectors.
Lecture 5
Using Special Characters In Dreamweaver CC
Play Video		 Using Special Characters In Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Creating Special Characters.

When we say Special Characters, we are talking about things like the copyright symbol or the trademark symbol, things like that. In this case, we are going to firstly, switch to Design mode. And I’m going to put a return in after my last paragraph and now I’m going to type in ‘copyright 2014’. And now what I want to put in is the copyright symbol.
Lecture 6
How to create Hyperlinks in Dreamweaver CC
Play Video		 How to create Hyperlinks in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Hyperlinks.

A Hyperlink is normally just referred to as a ‘link’. Hyperlink is the technical term. All it is is a way of linking one page to another.
Lecture 7
Inserting Images using Dreamweaver CC
Play Video		 Inserting Images using Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Inserting images to a website
When you create images you need a software package like Photoshop or Fireworks or Gimp for example. In this tutorial we are going to look at inserting them once we have created them.
Lecture 8
Image types in Dreamweaver CC (GIF, JPEG, PNG)
Play Video		 Image types in Dreamweaver CC (GIF, JPEG, PNG)
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: What image type to use?
We are going to look at the different kinds of files that you can use on your website. The first one that you may have heard of is a ‘tiff’. This cannot be used online but it is very good for print. Those of you who are Graphic Designers coming to web design, you cannot use these online.

Basically:
There are 3 other types of images. JPEG, GIFF and PNG.
• JPEGs are good for photography
• GIFFs are really good for logos, icons and type
• PNGs are really good for things that need a transparent backgrounds
Lecture 9
Using Photoshop to make Web Graphics in Dreamweaver CC
Play Video		 Using Photoshop to make Web Graphics in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Photoshop for Web Design
Dreamweaver does not produce images. It is more of a construction tool. You put together all of the elements, e.g You may have typed up your content on Word, you may have made your images in Photoshop or FireFox and you put them together in Dreamweaver. We will be looking at Photoshop.
Lecture 10
Creating Additional Pages in Dreamweaver CC
Play Video		 Creating Additional Pages in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

This tutorial we'll create some additional pages in Dreamweaver so that we can then build a simple navigation.
Lecture 11
Creating navigation in Dreamweaver CC
Play Video		 Creating navigation in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.

The topic we are covering today is: How to create navigation in Dreamweaver

In a Previous tutorial we made three pages, an index page, an about us page and a contact us page. So lets open the index page, So just above the H1 we will put a return in, so that we have the cursor flashing here and I am going to create a link. I don’t want it to be a heading one, so I want it to be just a regular paragraph and im going to create the 3 pages, Index, about us and contact us.
Lecture 12
What is website hosting
Play Video		 What is website hosting
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.

The topic we are covering today is: What Is Web Hosting? Dreamweaver CC tutorial

To get your website from where it is at the moment on your desktop to a website we are going to have to look at two things Domain names and hosting
At the moment we have what’s called a local site. That means that it only exists on our hard drive so that’s called a local website. We want to move it to a remote website which means uploading it to a host.

So to have a website you need two things a domain name and hosting. The Domain name is the URL and you need to buy one of these for about 15 – $20usd annual. You use the domain name/url to point to a host.
Lecture 13
Connecting via FTP
Play Video		 Connecting via FTP
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.

The topic we are covering today is: Connecting Via FTP

In the previous tutorial we had a quick look at what is a domain name and what is hosting. Now that you’ve signed up you would have got an e-mail and that e-mail will give you details regarding how to set up what is called your FTP. It’s the most common way of connecting you Dreamweaver files to your host so that your world can see your website.
Lecture 14
Uploading a website to a web host
Play Video		 Uploading a website to a web host
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.

The topic we are covering today is: Uploading a website to a web host - Dreamweaver CC Tutorial

We have already looked at how to connect to your host but the next part we are looking at now is now to upload your files to the server. There are 2 ways. First we will look at the long way.
Lecture 15
What is CSS (Cascading style sheets)
Play Video		 What is CSS (Cascading style sheets)
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.

The topic we are covering today is: What is CSS (Cascading Style sheets) Dreamweaver CC Tutorial

CSS will allow us to style all of our HTML. Currently we have our vintage camper page. We have our H1s, our H2s, some paragraph tags, some links but not been able to change colour or font.
Lecture 16
Creating a CSS sheet in Dreamweaver CC
Play Video		 Creating a CSS sheet in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.
The topic we are covering today is: What is CSS (Cascading Style sheets) Adobe Dreamweaver CC tutorial

CSS will allow us to style all of our HTML. Currently we have our vintage camper page. We have our H1s, our H2s, some paragraph tags, some links but not been able to change colour or font.

We are going to create a separate sheet called a CSS sheet and we are going to style those fonts. So, I’ve opened my own website here. I’ve created a CSS sheet for my website. So if I look at this site with the CSS turned off and then turn it back on, I can see that with the CSS on, it changes the site quite substantially. All of the CSS styles, font and layout are different.
Lecture 17
Styling HTML tags using CSS in Dreamweaver CC
Play Video		 Styling HTML tags using CSS in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF
Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott and I’m a trainer here at Bring Your Own Laptop.

Now in our last tutorial we looked at creating our own CSS sheet , which you can see over here called main sheet CSS. We styled our H1 tag which you can see here, which is our H1 selector and we added some values to that. So, what we’ll look at is styling some other tags, which essentially means repeating that process that we did with that H1 a few times so lets get some practice in and give it a go.
Lecture 18
Updating Your CSS in Dreamweaver CC
Play Video		 Updating Your CSS in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi, and welcome to the Dreamweaver tutorial. My names Daniel Walter Scott and I’m a trainer here at Bring Your Own Laptop.

In this video tutorial we are going to look at updated an existing CSS. That might be that you’ve already created it earlier in this tutorial series or you might be having somebody else’s web site that your updating.
Lecture 19
Change link font & color in CSS
Play Video		 Change link font & color in CSS
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott and I’m a trainer here at Bring Your Own Laptop.

What we’re going to look at in this tutorial is we’re going to look at styling our links or our Hyperlinks in Dreamweaver.
Lecture 20
How to use Em measurements for fonts in Dreamweaver CC
Play Video		 How to use Em measurements for fonts in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Hi and Welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott and I’m a trainer here at bring your own laptop.

Now in this tutorial we are going to look at using the Em’s measurements for fonts instead of Pixels or Points. So in the previous tutorial, just to make things easier, we looked at using points to size fonts. Now the reasons we don’t like points is because they are something called an absolute font size, and the real reason we don’t like them is because it doesn’t work for people that are visually impaired that need to increase their font size, and Google doesn’t like the for that reason and we do what Google likes. and one of these things is using these ‘EM’ fonts.
Lecture 21
Creating a class selector in Dreamweaver CC
Play Video		 Creating a class selector in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

How do I create a class in Dreamweaver CC. In this tutorial we'll show you why we create classes and how to make them using Dreamweaver CC. Classes are reusable and important to styling fonts and div tags.
Lecture 22
More about CSS Classes
Play Video		 More about CSS Classes
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Want to learn more about CSS (Cascading Style Sheet) Classes? In this Dreamweaver CC tutorial we'll look at a Class in a little more detail. We'll style specific words and change the color and font.
Lecture 23
Understanding HTML Div Tags
Play Video		 Understanding HTML Div Tags
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

In this tutorial we'll explain what an HTML Div tag is and what it is used for. Essentially a div tag is used to create structure in modern websites. You use CSS to style the div tag to give it a height, width and a background color.
Lecture 24
Centering your website div in Dreamweaver CC
Play Video		 Centering your website div in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Centering your website div in Dreamweaver CC

Now that we understand why we use a div tag this tutorial will show you how to start building your website using HTML div tags. We'll start by creating a container div and centering that in the browser.
Lecture 25
Creating a website using div tags in Dreamweaver CC
Play Video		 Creating a website using div tags in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

We now want to create a website using div tag layout - also known as css layout. We'll create a header div and a div for our navigation. We'll also create a div for our text.
Lecture 26
How to float a div tag in Dreamweaver CC
Play Video		 How to float a div tag in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

How to float a div tag in Dreamweaver CC
How do you float an html div tag using css? How to make div tags line up side by side? The CSS float property will allow you to get your div tags to move from under each other to side by side.
Lecture 27
How to clear float in css in Dreamweaver CC
Play Video		 How to clear float in css in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

So you have a problem with the very next div tag under the floated div. It seems broken or not working. Don't worry - all you need to do is clear the float of the preceding div tag. This Dreamweaver CC tutorial will show you how to clear the float easily.
Lecture 28
Adding content to a div in Dreamweaver CC
Play Video		 Adding content to a div in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

In this Dreamweaver CC tutorial we'll look at how to put text & images inside a div tag website layout.
Lecture 29
Minimum height on a div tag
Play Video		 Minimum height on a div tag
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

How to set a minimum height on a box or div tag so that it doesn't get too small? This minimum height example is created using Dreamweaver CC.
Lecture 30
How to change background colour in Dreamweaver CC
Play Video		 How to change background colour in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

How do you change a background colour for a website using Dreamweaver CC. We'll look at adding a background colour to the container & body tag div in Dreamweaver.
Lecture 31
Add padding to a div tag in Dreamweaver CC
Play Video		 Add padding to a div tag in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

How do you add padding around a div tag in Dreamweaver CC? This Dreamweaver tutorial will show you how to add left padding so that the text moves away from the edge of the box (a.k.a Div tag).
Lecture 32
Making all pages work
Play Video		 Making all pages work
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

Is your CSS not appearing on all pages of your website using Dreamweaver? This web design course will show you how to connect all your pages together so the styling works on them all.

Follow us on Instagram:
https://www.instagram.com/bringyourownlaptop/
Lecture 33
How to make a CSS drop down menu in Dreamweaver CC
Play Video		 How to make a CSS drop down menu in Dreamweaver CC
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

This web design course will show you how to create a full CSS drop down menu in Adobe Dreamweaver CC. It's a rather long tutorial so if you just want to cheat. Jump to the link below and I'll have the CSS menu code that you can just copy and paste.

If you just want the code without doing the tutorials jump to this page on my website: http://www.byol.com.au/tutorial/dreamweaver-33-make-a-css-dr...
Lecture 34
How to add meta description tags in Dreamweaver CC
Play Video		 How to add meta description tags in Dreamweaver CC
Full course at: https://goo.gl/z90Ynd
Free Exercise Files: https://goo.gl/bZdUw1
Free Cheat Sheet: https://goo.gl/eQpzzF

How to add meta description tags in Dreamweaver CC

In this tutorial from our UI & Web Design using Adobe Illustrator CC 2017 course; we'll look at the difference between being a UI and UX designer and what you'll be after completing this course.

Instagram: https://www.instagram.com/bringyourownlaptop
Twitter: https://twitter.com/danlovesadobe
Facebook: https://www.facebook.com/BringYourOwnLaptop

Full course at: https://goo.gl/z90Ynd