Tip:
Highlight text to annotate it
X
allow me to introduce you to Adobe Dreamweaver
cs6 I'm Janine Warner and over the course of this brief introductory lesson
I will introduce you to the concepts and give you an overview
love what you can expect to learn in the next couple hours to make it
easy for you to follow along I've included all of the images
in the project files included with this lesson so you can
download this entire site set it up in Dreamweaver
and follow along with me step by step as we go through the course
using two relievers new fluid grid layout will create
one HTML document and three sets
a CSS style rules to create an adaptive web design
the changes based on the size of the browser window if I preview this in a
browser
you'll immediately see how this one design
changes based on the size the browser
some people call this responsive web design because it response to changes
the browser
Adobe calls it adaptive because you can truly
adapter designs changing not just by percentages
but even using different images by changing the CSS stylesheets
in this course will start with a blank page and create this site from beginning
to end
including adding features like rounded corners and showing you how to use the
web font manager
to add any fight your heart desires well
armor Ste along the way I'll share some of my long-time favorite tips and
Dreamweaver
as well as some new things you have to get used to like live you
if I click on live you I'm d selecting it now
and you can see that in tremely first design view none of these new css3
features display
there's no text shadow I rounded corners are gone
essentially dream weavers design view works like well
a very old web browser anybody has joined the modern web that is the last
few versions that most web browsers
support rounded corners fonts all of the other features that will cover in this
course
although I won't spend a lotta time in the HTML code
the ability to go into split for you and take a look at the HTML code
can bring you great insight into what's happening in design view
among other things you need to understand that these fluid grid layout
are made up of multiple documents the source code
a boilerplate CSS file a CSS file that you and I will create
in the course of the series lakes to any fonts that you use
and a javascript file which I mostly recommended you leave
alone again we will spend a lot of time in the source code
but occasionally coming in and pointing out what HTML tags were using
in this carefully built web page and how that affects the CSS styles we create is
a great way for hugh
to have a better understanding %uh why we're doing what we're doing
and not just how to do it into remover I always try to make sure that I show you
enough about what's happening behind the scenes you can find the actual CSS code
and that you understand that you're creating three sets of layout
that are targeted using media queries
become a media query as a special message to a web browser that says
if the screen is this wide use this style sheet if it's this wide
use this other style she when you use the fluid grid layout tool
Dreamweaver set up these media queries for you if you ever want to create your
own designs I've included a bonus lesson that the enter this series
designed to show you how to set up your own media queries
so that you can use any sale CT want to create and not be locked into some other
limitations
the fluid grid layouts things like using these funny percentages
do not change these percentages when you're using fluid grid layout
yes that's the kinda tip I will teach you along the way but I also like to
empower you to go beyond my lessons
we will build the site from beginning to end you will learn how these wonderful
tools and Dreamweaver
like you preview your pages and mobile tablet
and desktop sizes and how you can use those same tools
and everything you learned in this course to create your own completely
custom designs
as well join me for the next couple of hours and I'll show you how to create
adaptive web sites that work on all the browsers
that may visit your site