CSS3, Things You Must Know
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.
CSS3, Layout Essentials
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.
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.
The Powerful CSS3 List
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.
Building for Phones, Tablets, and Desktops
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.
CSS Dropdown Menus
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.
Adobe Dreamweaver CC, CSS3 Responsive Slideshows
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.
Animated CSS Menu Tutorials