HTML and CSS using Dreamweaver CC
Video Lectures
Displaying all 34 video lectures.
Lecture 1![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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![]() 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 |