What is Adobe Dreamweaver CC? Developed by MacroMedia, Dreamweaver was built to write code. To follow our web design video tutorials, you can use Note Pad or Sub lime. It´s all code. Whatever works for you is fine. Adobe Dreamweaver CC is not only a code editor, it’s your FTP machine, Inspect Element factory and live view Chrome Browser all in one launch. But tell you what, code is code, write it with crayons and these web design video tutorials still will work for you.

Just like any Adobe Application, Opening Adobe Dreamweaver CC  the first time can be somewhat confusing. All of these panels are there and they really don´t need to be, but somebody at Adobe is putting their three kids through Stanford, so we have to pay for her creativity.

Dreamweaver and Bootstrap have become a team. Adobe has incorporated Bootstrap into the Dreamweaver environment. When I say Dreamweaver and Bootstrap have become a team, I mean that Dreamweaver comes with 7 pre-build, Bootstrap themes to work with.

Before you move ahead with these web design video tutorials, believe it or not, no matter what web site you visit, understand that every single web page item is in a box. Everything you see is in some type of square or rectangle. Even though you may see a page that looks like everything is in a circle or triangle shape, or just stuff laying about here and there, it’s all in some sort of box. That is why this situation of All Things Web is called, “The Box Model.”

Planning ahead for your Adobe Dreamweaver CC Web Site is the most important thing that you can do. Trust me. I have built thousands of sites and I have taught tens of thousand of clients and students how to build sites using a variety of web building tools.

This is Super-Duper Important. This is something that should be #1 above all else you do in Dreamweaver. #1. Defining a Dreamweaver Site is of prime importance. Do this before coffee, shower, kiss the love one, walk the dog, DEFINING A Dreamweaver Site is #1.

There are so many decisions to make in the land of Web Page Image file Formats. Gif, jpg, jpeg, png8, png24, svg. Which one to you use. What do they mean? Is one better than the rest.

You´ve made your wonderful images.  Now it’s time to put them up on the web at a size that will load quickly. What web design video tutorial series could leave this out?

There are so many decisions to make in the land of Web Page Image file Formats. Gif, jpg, jpeg, png8, png24, svg. Which one to you use. What do they mean? Is one better than the rest.

This is a great combination. It´s a show to see. Using Live view, the Inspect Element factor and the CSS Designer panel all together. Good Job Adobe.

Why all the Buzz about CSS, what the heck is CSS. Why use CSS? The mystery is about to be told when you see this video from Bill the Geek.

What is a CSS Rule? What is a CSS Selector? What is a CSS Property? Let Bill the Geek answer your questions right here.

Looking at the Syntax in CSS Rules.  Really a must to understand as you move ahead with CSS.

Classes, or Id´s.  When do I use which one?

It´s your kitchen, just follow the general rules.

Before we move ahead, sometimes it´s a good thing to save some code should you want to use it again and again again throughtout your life with Dreamweaver CC.

What is the difference between putting your css in the html document, in an external css document, or in the body tag of the html document.

Now that you know a little CSS, The CSS Designer Panel can help you do many things.

An Introduction to Laying out your boxes with Divs

Reset Your CSS, Center Your Page with CSS.  Reset is kind of strange.  But, you really need to understand WHY YOU NEED IT FOR SURE!

Float Left, Float Right, Clear Float.  These are concepts that must be understand for sure.

Talk, Talk, Talk.  All this talk and no Do.  Let’s put all of this stuff together and make a page using CSS and a 3 column layout.

Very Important, Padding and Margins

More Padding Just because it´s Fun!

Click a word, go to a different page. Control the link colors, make a rollover color. Click a link, have the page open in a new browser window. Click a link, allow the visitor to send an email.

Many times you need a title that is an H1 tag in the header, to have a different size or color in a different place of your html page. I would call this targeting an html tag, or class in a box.

In the past, Dreamweaver made rollover images pretty easy. To get it done that way was with Javascript. Now, you can use CSS and be WAY, more in Control of the images, and the page.

No more Spry Menus in Adobe CC. Everyone knows that with CSS you can get it done clean, easy, and you can be in control of your menus. See the Video, Download the Sample files.

Using and manipulating Fonts in Dreamweaver CC is a Brand new world. I’ve been using Dreamweaver since the year 2000. This really threw me off when I tried to apply a font in CC. Check out this video is all I can say.

Kerning, leading and Tracking is something that you may know or not. If you don´t know anything about it and you have used any word processing application, then you have wanted to use Kerning, leading and tracking. This video is all about Kerning Leading and Tracking with Css.

In this video you make a form, pretty much fill in one line of code, put it up on your site and when people fill it out, you or your client get an email with the form’s content. It’s pretty straight forward.

List take up about 50 percent of web page space. Here we introduce html list tags and what you can do with list before we move on to vertical and horizontal list.

CSS Vertical List, margin, padding, remove bullets, adding a background, inserting text, tag options.

CSS Horozontal List, padding, width, height, remove bullets, adding a background, inserting text, tag options.

Images in a list.

Helpful Free online List.

What is Responsive Web Design (RWD)? They say it was the biggest development in the history of the internet. Why? It´s a big world out there and people love the internet. People have figured out how to use the internet in ways that I can´t even believe. This is an introduction.

My clients always ask, “What is a Responsive Web Design Media Query?” I Tell them it´s more or less a question of “IF.” If this is true, show that, If that is true, show em this, of none of this or that is true, take a break and go to the beach.

In this video, we present an introduction to the code behind Responsive Web Design. With the video we provide a link to our web site where you can download the pages and play with the html and the css. This way you can adjust the main css as well as the media queries in the resize css files.

It’s your Kitchen. You can use pixels to build your pages or percentages. There are many models out there. I like percentages a lot. In this part of the series, we share our model concept with download sample files.

Scaling images is not really that hard. It only involves 2 real lines of code. Of course with any code, it depends on where you put them and the values used. Again, we include the code so that you can download it and play.

There are many concepts about RWD floating around the web. I fought this idea. But after days and days of many designs and multiple sites and projects, this concept has won me over.

The display:block, display:none, CSS Property can hide and show elements on your page. Show on a phone, hide on a big screen or vis versa. IT´S REALLY FREAKING COOL!!! Also, the Adobe Dreamweaver CC CSS Designer panel. Adobe did a very good job with this. VERY POWERFUL!

The CSS and Html to make a YouTube Video Responsive

Flash is Far from Dead. With Flash and Responsive Web Design, you can show every visitor to your site exactly what you want them to see.

Howdy. Welcome to the land of Adobe Dreamweaver CC CSS Responsive Drop Down Menus. This is a four part series that started about a year ago when we had a single video about how to make CSS dropdown menus. Since then, so much has changed. Thus, we present this 5 part series, “Adobe Dreamweaver CC CSS Responsive Drop Down Menus.”

In our Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, we start out with an introduction showing you what each part of the series will cover. For each part of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, you will see a download button at the bottom of the page, above the video.

After the introduction video, you will see Part 1 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series. In this part we show you how to make your drop down menu. In this video, the end result gives you drop down menus, but they are not at all responsive.

Part 2 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series get you to the point where we make the page responsive, but we don´t include the menus just yet. What you will also find in Part 2 is a lesson in itself about resizing a centering background images with the no-repeat CSS function.

In Part 3 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, we get to the responsive menu, but it´s not real snazzy. Of course, to get to this point, you may want to go to our video that is all about “display:block, display:none;”

Finally in Part 4 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, we get you to the point where you see the drop down type menu that you see in all the cool web pages, where you have a menu item, and you click on the menu item to reveal the entire menu.

Here you will find 10 videos. Our goal in this 10 part , “ Animated CSS Menu Tutorials” series is to take you step by step in understanding how to build 100%, PURE CSS3 Menus. No JavaScript. No Jquery. Only CSS3.

What is Bootstrap? Bootstrap is some computer, web code, a combination of html5, css3, and javascript that helps a web page show up on all internet viewing devices accordingly. What is Bootstrap? If you build a page right in with Bootstrap, then the page will show up on Desktops, Laptops, Tablets, and all phones so that everybody that views your page is happy and will buy your stuff. We kick off this, “Adobe Dreamweaver 2015 Bootstrap Video Tutorials,” introducing the major concepts behind Bootstrap.

What is Bootstrap? Bootstrap is an answer to the question, “How do I make my page responsive to all viewing devises, desktop, laptop, tablet and mobile phones without me going crazy writing the code or building the site and make the page look good.”

Moving ahead in these, “Adobe Dreamweaver CC 2015 Bootstrap Video Tutorials,” we introduce make a blank Bootstrap page in Dreamweaver.  Making a Blank Bootstrap Page in Dreamweaver is kind of simple, but it’s no picnic if you are doing for the first time. Making a Blank Bootstrap Page in Dreamweaver is no picnic even after 5 times so here are the step by step instructions to get you going.

You may be asking, “Why are you making a blank bootstrap page in Dreamweaver when Dreamweaver comes with all of those predefined templates that you can use?” Well, here is my answer to, “Why are you making a blank bootstrap page in Dreamweaver when Dreamweaver comes with all of those predefined templates that you can use?” viewing devises, desktop, laptop, tablet and mobile phones without me going crazy writing the code or building the site and make the page look good.”

Now it is time to use Bootstrap rows and columns in Dreamweaver. Using Bootstrap rows and columns in Dreamweaver is kind of strange when you first get started. The whole concept of using Bootstrap rows and columns in Dreamweaver is just strange. Using Bootstrap rows and columns without Dreamweaver is strange but this video will get you on the right track.

Adding rows and columns is one thing. Controlling them is just a must.

The fact of the matter is, you can make a Bootstrap page look anyway you want to. That is why creating Dreamweaver Bootstrap Columns in Columns is such an important concept to understand.

The concepts are pretty simple, but when you actually start using Dreamweaver Bootstrap Nested Columns, the logistics get pretty consuming.

The concepts are pretty simple, but when you actually start using Dreamweaver Bootstrap Nested Columns, the logistics get pretty consuming.

Adding Images in Dreamweaver Bootstrap is not that difficult, especially when it comes to doing this in the Dreamweaver environment. Adding images in Dreamweaver Bootstrap is all about drag and drop if you like to do things the easy way.

Isn’t it funny how we can get so happy when we get what we want and then,,,,,,,,,,,, we realize what else is needed. Smile gone.

It is very simple to drop a background image into any CSS or Bootstrap Column container ( of course all Bootstrap columns are simply CSS containers). The challenge is that if you want the images to be fully responsive, there is some CSS and, OH NO, math to work with.

To move beyond the pack with your web design, you may consider wrapping text around your Bootstrap images.

Once you know what you are doing, you can make Dreamweaver Bootstrap Menus in a matter of minutes.

Once you get started, creating some Dreamweaver Bootstrap Responsive Menus, you really will not be able to stop.

Dreamweaver Bootstrap Responsive Dropdown Menus? Well, for you CSS3 coders that have been pulling your hair out since 2013, the official year of “Responsive Web Design,” figuring out how to make CSS3 dropdown menus, this might be a real treat.

Creating vertical responsive menus really only takes about one line of code but there are always issues to consider.

Making Dreamweaver Bootstrap Slideshows is pretty damn cool and fun. It is also a great way to sell product because people all over the world love slideshows. Making  Bootstrap Slideshows is pretty simple to do especially the way that Adobe Dreamweaver helps you click a few buttons and drop rows, columns, slideshows and images on your page in a matter of minutes, if not seconds.

Part One

Part Two

Part Three

See all five videos.

Introduction to the 6 Part Series

Making a basic one image slide do something.

Making a one basic image do many things using keyframes.

How to make the z-index ( stacking of images in layers ), work for you.

Making your slideshow 100% full screen width and Responsive Too ( YaaaaHOOOOO).

Let’s make a fading show instead of a sliding show.

Put the slideshow somewhere that works for you in a page.

Take the next step. Here are some downloadable files to play with.

All the web was once done with Tables. Many still use Tables to create web pages. This is an example of making a Basic web page in Adobe Dreamweaver CC with Tables, from Bill the Geek.

The Table Tag has Properties, the TR tag has Properties, the TD tag has properties. How do you use these properties to control your html5 tables in Adobe Dreamweaver CC. And, what the heck is a property. A fun session with Bill the geek via sillybilly.com

Of course the world used to be all html tables, now it´s almost all CSS. But, if you´re going to use Tables, its sometimes good to put Tables in Tables, or Tables on top of, or under tables to organize the structure of a Web Page.

No matter how you are putting together a web site, it is very important to plan, pixel by pixel or em by em the width, height, and placement of every object on your home page. If you do that correctly, the rest of your site could be finished quickly if you have the images and content ready. This is a quick, 4 page web site created from html5 tables.

When dropping images into tables and table cells, it is best to plan ahead. You really want to know pixel by pixel the width and height of every image you are going to use and make sure you have planned the width and height of the box it’s going into.

Background Images are great. Because you can put them anywhere, then type over them.

One of the most fun and easy things to do in all things web is to create Rollovers with images and then use the images to link to actions with Dreamweavers built in JavaScript Functions.

You can put a video into a Table cell via an html5 video Tag or use a YouTube feature. This video Shares with you your options

If you are new to web design, just watch these three videos and keep the concepts in the back of your head, then come back. I just want to up these in your brain before you move ahead.

If you are new to web design, just watch these three videos and keep the concepts in the back of your head, then come back. I just want to up these in your brain before you move ahead.

Here it is, the Magical Php code in Use. The Magical, “php include” action with sample files to download. This might change your life.

I only used ONE LINE OF PHP CODE to do it. This is Real Life PHP. My php is not good enough to send a rocket ship to Mars, but with the one line of real life php I know, I have made my life much easier.

Find and Replace is like PHP for the lazy man that does not want to even think about PHP. With Dreamweaver Find and Replace, you can select massive amounts of code (like total nav bars with images, or total footer or side bar code), find that code in 1000 pages, and replace it all with new WHATEVER code in all 1000 pages in seconds, and with a click of a button.

This is great for when you don’t want a whole WordPress site, you just want a certain form, slideshow, search box or comment section. Why buy the whole house when you just need the bathroom.

All Content with Links

What you need to do to get your computer ready to actually use Dreamweaver to edit a WordPress theme in the most effective manner.

This part is really important, and unless your read the directions carefully can really make you pull your hair out. But it’s all worth it in the end.

The song and dance changes a little here compared to defining a static site.

You don’t have to do it. But if you don’t, YOU´LL BE SORRY!!! Really sorry!

We’re here! Now you can use Live view, and the Inspect Element buttons, along with the CSS Designers panel to see your creations, and edit your css and or php.