web design with expression web
TRANSCRIPT
WEB DESIGN WITH EXPRESSION
WEB 2An Introduction ndash How it all works and an
overview of Expression Web 2
HOW THE INTERNET WORKS YOUR COMPUTER FINDS CONTENT ON OTHER
COMPUTERS THROUGH INTERNET EXPLORER (OR ANOTHER BROWSER) AND
DOWNLOADS IT YOUR COMPUTER CONNECTS TO OTHERS AND OTHERS CONNECT
TO EVEN OTHERShellipHENCE THE NAME WORLD-WIDE WEB
IN ORDER TO CREATE AND DISPLAY A WEBSITE FOR THE WORLD TO SEE YOU
HAVE TO PUBLISH IT TO A SERVER IF YOUR SITE IS NOT ON THE SERVER YOU
ARE THE ONLY ONE WHO CAN SEE IT (ONLY ON YOUR COMPUTER)
The server allows
other computers
to download
content from it
Your computer
has your site on
it but only you
can see it until
you send it to the
server
IN ORDER TO CREATE A CLASS WEBSITE (OR ANY WEBSITE) THAT CAN
BE SEENACCESSED BY ALL YOUR SITE NEEDS TO BE PUBLISHED ON A
SERVER YOU CAN SEE MINE ON MY OWN SERVER
WWWMITCHELLTEACHERSORG
HOW TO BUILD A WEBSITE ndash COVENTRY SCHOOLS HAS THE WEB
DESIGN PROGRAM ldquoEXPRESSION WEB 2rdquo FOR YOU TO USE ON YOUR
SCHOOL COMPUTER AND YOUR HOME COMPUTER (SEE YOUR
TECHNOLOGY STAFF FOR DETAILS)
HOW IT ALL WORKS
We create web pages publish them to the server
then all can see them via the Internet Herersquos how
it works with Expression Web 2
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
HOW THE INTERNET WORKS YOUR COMPUTER FINDS CONTENT ON OTHER
COMPUTERS THROUGH INTERNET EXPLORER (OR ANOTHER BROWSER) AND
DOWNLOADS IT YOUR COMPUTER CONNECTS TO OTHERS AND OTHERS CONNECT
TO EVEN OTHERShellipHENCE THE NAME WORLD-WIDE WEB
IN ORDER TO CREATE AND DISPLAY A WEBSITE FOR THE WORLD TO SEE YOU
HAVE TO PUBLISH IT TO A SERVER IF YOUR SITE IS NOT ON THE SERVER YOU
ARE THE ONLY ONE WHO CAN SEE IT (ONLY ON YOUR COMPUTER)
The server allows
other computers
to download
content from it
Your computer
has your site on
it but only you
can see it until
you send it to the
server
IN ORDER TO CREATE A CLASS WEBSITE (OR ANY WEBSITE) THAT CAN
BE SEENACCESSED BY ALL YOUR SITE NEEDS TO BE PUBLISHED ON A
SERVER YOU CAN SEE MINE ON MY OWN SERVER
WWWMITCHELLTEACHERSORG
HOW TO BUILD A WEBSITE ndash COVENTRY SCHOOLS HAS THE WEB
DESIGN PROGRAM ldquoEXPRESSION WEB 2rdquo FOR YOU TO USE ON YOUR
SCHOOL COMPUTER AND YOUR HOME COMPUTER (SEE YOUR
TECHNOLOGY STAFF FOR DETAILS)
HOW IT ALL WORKS
We create web pages publish them to the server
then all can see them via the Internet Herersquos how
it works with Expression Web 2
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
IN ORDER TO CREATE AND DISPLAY A WEBSITE FOR THE WORLD TO SEE YOU
HAVE TO PUBLISH IT TO A SERVER IF YOUR SITE IS NOT ON THE SERVER YOU
ARE THE ONLY ONE WHO CAN SEE IT (ONLY ON YOUR COMPUTER)
The server allows
other computers
to download
content from it
Your computer
has your site on
it but only you
can see it until
you send it to the
server
IN ORDER TO CREATE A CLASS WEBSITE (OR ANY WEBSITE) THAT CAN
BE SEENACCESSED BY ALL YOUR SITE NEEDS TO BE PUBLISHED ON A
SERVER YOU CAN SEE MINE ON MY OWN SERVER
WWWMITCHELLTEACHERSORG
HOW TO BUILD A WEBSITE ndash COVENTRY SCHOOLS HAS THE WEB
DESIGN PROGRAM ldquoEXPRESSION WEB 2rdquo FOR YOU TO USE ON YOUR
SCHOOL COMPUTER AND YOUR HOME COMPUTER (SEE YOUR
TECHNOLOGY STAFF FOR DETAILS)
HOW IT ALL WORKS
We create web pages publish them to the server
then all can see them via the Internet Herersquos how
it works with Expression Web 2
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
IN ORDER TO CREATE A CLASS WEBSITE (OR ANY WEBSITE) THAT CAN
BE SEENACCESSED BY ALL YOUR SITE NEEDS TO BE PUBLISHED ON A
SERVER YOU CAN SEE MINE ON MY OWN SERVER
WWWMITCHELLTEACHERSORG
HOW TO BUILD A WEBSITE ndash COVENTRY SCHOOLS HAS THE WEB
DESIGN PROGRAM ldquoEXPRESSION WEB 2rdquo FOR YOU TO USE ON YOUR
SCHOOL COMPUTER AND YOUR HOME COMPUTER (SEE YOUR
TECHNOLOGY STAFF FOR DETAILS)
HOW IT ALL WORKS
We create web pages publish them to the server
then all can see them via the Internet Herersquos how
it works with Expression Web 2
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
HOW TO BUILD A WEBSITE ndash COVENTRY SCHOOLS HAS THE WEB
DESIGN PROGRAM ldquoEXPRESSION WEB 2rdquo FOR YOU TO USE ON YOUR
SCHOOL COMPUTER AND YOUR HOME COMPUTER (SEE YOUR
TECHNOLOGY STAFF FOR DETAILS)
HOW IT ALL WORKS
We create web pages publish them to the server
then all can see them via the Internet Herersquos how
it works with Expression Web 2
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
HOW IT ALL WORKS
We create web pages publish them to the server
then all can see them via the Internet Herersquos how
it works with Expression Web 2
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
TO SEE HOW IT WORKS GO TO
WWWCOVENTRYSCHOOLSNET AND CLICK
ldquoSTAFF RESOURCESrdquo
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
NOW CLICK ldquoRTI ndash RESPONSE TO
INTERVENTION
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
EXAMPLE RTI WEBSITE ndash HERErsquoS HOW IT LOOKS ONLINE
WWWCOVENTRYSCHOOLSNET SERVER IS SENDING THIS HTML
FILE OR PAGE TO MY COMPUTER THROUGH THE INTERNET
Using
Internet
Explorer
online
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
NOTICE THE ADDRESS - WHERE MY COMPUTER RETRIEVES THE
WEB PAGE IT DOWNLOADED THE PAGE FROM COVENTRYrsquoS
SERVER AND FROM THE ldquoRTIrdquo FOLDER
The page
you see is
a file I
created
and
published
to the
server
Internet
Explorer
downloads
and
displays it
for you
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
LOOKING AT THE RTI WEBSITE
THROUGH EXPRESSION WEBFor this tutorial Irsquoll open the existing RTI site I created and demonstrate the tools Expression Web 2 comes with to create and work on a website You should open Expression Web and view the blank layout to follow along
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
OPEN EXPRESSION ON YOUR COMPUTER TO FOLLOW ALONG GO TO ldquoSTARTrdquo
THEN ldquoPROGRAMSrdquo THEN ldquoMICROSOFT EXPRESSIONrdquo AND CLICK TO OPEN ndash YOU
DONrsquoT NEED TO OPEN A SITE (YOU MAY NOT HAVE ONE YET)
To
open
a site
click
ldquoFilerdquo
then
ldquoOpen
Siterdquo
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
TO OPEN AN EXISTING WEBSITE ldquoFILErdquo THEN ldquoOPEN SITErdquo IF YOU HAVE A SITE
TO OPEN GO AHEAD IF NOT YOU CAN VIEW THE BLANK LAYOUT TO SEE THE
FUNCTIONS OF THE PROGRAM IrsquoM JUST SHOWING YOU THAT I AM OPENING THE
RTI SITE I CREATED ON MY COMPUTER TO SHOW YOU WHAT IT LOOKS LIKE IN
EXPRESSION WEB 2
On my
computer I
have many
sites Irsquove
worked on
so they come
up in this
window You
may not
have any
YET Itrsquos
okay Yoursquoll
change that
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
RTI WEBSITE OPENED IN EXPRESSION WEB NEXT WErsquoLL FOCUS ON THE BASIC
LAYOUT AND FUNCTIONS TO MAKE SURE YOUR LAYOUT IS THE SAME CLICK
ldquoTASK PANESrdquo THEN ldquoRESET WORKSPACE LAYOUTrdquo (DEFAULT VIEW OF
EXPRESSION ndash IF SOMEONE ELSE USES THE PROGRAM ON YOUR COMPUTER
THEY MIGHT CHANGE THE SETTINGS ON YOU ndash THIS CORRECTS IT)
Remember
This is my
computer
with the
RTI site
loaded You
donrsquot have
access to
this site
This is to
show you
how it
works
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE FOLDER LIST ndash BEHIND THE
SCENES ONLINE
Working with and organizing the files in your
website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE FOLDER LIST (TOP LEFT) HERErsquoS WHERE
YOUrsquoLL SEE THE FILES AND FOLDERS
CONTAINED WITHIN YOUR WEBSITE
If the file
or page is
not listed
here it
wonrsquot be
published
online
Meaning
people
wonrsquot be
able to see
it on the
Internet
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
RTI MAIN PAGE ONLINE IF YOU WANT TO ACCESS A POWERPOINT OR
GO TO ANOTHER PAGE ON THIS SITE YOU HAVE TO CLICK A HYPERLINK
(LINK OR PATHWAY TO ANOTHER FILE)
If I click
ldquoFormsrdquo it
takes me to
the
formshtml
pagefile
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
WHEN YOU CLICK ldquoFORMSrdquo IT TELLS THE
SERVER TO SEND YOUDOWNLOAD THE FILE
FORMSHTML
Once you click ldquoFormsrdquo it
loads formshtml file or
page in your browser
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE FOLDER LIST THE TOP FOLDER IS YOUR WHOLE SITE
HTTPWWWCOVENTRY THEN ALL FILES AND FOLDERS WITHIN
IT ARE BELOW ITrsquoS LIKE LOOKING AT ldquoMY COMPUTERrdquo ON YOUR
PC
Folders
are listed
first then
individual
files or
pages
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
DIFFERENT TYPES OF FILES EACH FILE IN THE SITE HAS A SUFFIX
THAT SPECIFIES WHAT TYPE OF FILE IT IS - HTML HTM CSS PDF
ETChellip [EXAMPLE INDEXHTML OR EVANSADHDPDF]
html or htm are
basiccommon
webpages
css are
ldquocascading style
sheetsrdquo which
manage the
ldquostylesrdquo of font
background etc
The home page
is called ldquoindexrdquo
which has a
house as an icon
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
USE FOLDERS TO ORGANIZE YOUR SITErsquoS FILES AND
PAGES IF YOU CLICK ON THE ldquo+rdquo SIGN OR DOUBLE-
CLICK ON THE FOLDER NAME IT OPENS
You can see
contained within
the ldquoPowerPointsrdquo
folder the
powerpoint
ldquoDrstonerhelliprdquo fileNotice the PowerPoint
file
ldquoRTIpresentationpptrdquo
You can drag that file to
the folder you want to
keep organized
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
BELOW I DRAGGED THE POWERPOINT FILE
ldquoRTIhelliprdquo TO THE POWERPOINTS FOLDER JUST
HOLD AND DRAG IT
Moving files around
in your site is like
dragging files on
your hard drive in
ldquoMy ComputerrdquoIrsquoll cover this in later
tutorials too ndash This is just
an introduction
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
IF YOU MOVE A FILE YOU SHOULD CLICK ldquoSITErdquo
THEN ldquoRECALCULATE HYPERLINKSrdquo THEN CLICK
ldquoYESrdquo WHEN THIS WINDOW APPEARS
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE POWERPOINT I MOVED IS ldquoHYPERLINKEDrdquo TO ON THE MAIN
PAGE IF YOU MOVE THE FILE AND DONrsquoT CHANGE THE PATH TO
THE FILE (HYPERLINK) YOU WILL GET AN ERROR PAGE
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THIS IS THE ERROR PAGE YOU WILL
RECEIVE IF YOU HAVE A BAD LINK
Bad link
Remember
I moved the
file to a
different
location so
the old link
looks in the
wrong place
now
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
IF THE HYPERLINK IS FIXED IT WILL LOOK LIKE THIS YOUR BROWSER
IS REQUESTING TO DOWNLOAD DR TURCHETTArsquoS POWERPOINT
PRESENTATION THE SERVER WILL SEND IT TO YOUR COMPUTER
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
TAG amp CSS PROPERTIESVery brief overview ndash just enough so you understand what Expression Web is doing behind the scenes for you If this is confusing no worries because you donrsquot have to use it to do most web design
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
TAG amp CSS PROPERTIES PANE IN
EXPRESSION WEB
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
TAG PROPERTIES ARE WHAT DEFINES WHAT
CERTAIN PARTS OF YOUR WEB PAGE DOES
WHEN DOWNLOADED FROM THE SERVER
In many cases you donrsquot have
to use this pane because other
(easier to use) commands in
Expression do it for you
Basically the text and content
in a web page are told how to
behave on the page by these
properties For example is the
text to be centered on the
page When the page loads
what files or pictures does it
place in the browser This is
where these properties are
listed
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
EXAMPLE I CLICKED ON THE IMAGE BELOW AND IN THE ldquoTAG
PROPERTIESrdquo PANE THE DIMENSIONS OF THE IMAGE AND SOURCE
APPEARED
Translation The
image is 175 pixels
high and 223 pixels
wide The source is
in the ldquoimagesrdquo
folder and its name
follows here[ Pixels are the tiny dots of
lightcolor that make up the
images you see on your
computer and TV Your
computer screen might be 1280
x 720 which means you have
that many little dotspixels
across your screen making up
the visual you see now]
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
IN THIS PANE YOU CAN CLICK THE SMALL
ARROWS TO MOVE BETWEEN ldquoTAG PROPERTIESrdquo
AND ldquoCSS PROPERTIESrdquo
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
CSS (CASCADING STYLE SHEETS) IS WHAT
DEFINES THE WAY TEXT BACKGROUND AND
OTHER CONTENT LOOKS ON YOUR PAGE
In this pane you can set up
ldquostylesrdquo which are defined
characteristics of the font
background etc on a page
So you can make a style that
uses white ldquoarielrdquo font and
makes it all lower-case with a
blue background
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
UNDER CSS PROPERTIES YOU CAN SEE THE STYLE ndash FONT COLOR SIZE
BACKGROUND ETC AS YOU GET BETTER AT THIS YOUrsquoLL WANT TO SET UP YOUR
OWN ldquoSTYLESrdquo THAT YOU CAN IMPORT INTO NEW OR EXISTING WEB PAGES
AVOIDING HAVING TO USE THE ldquoBOLDrdquo OR ldquoFONT-SIZErdquo COMMANDS AGAIN AND
AGAIN
The cursor is here on the
page so in the Task Pane it
shows what style is used and
what properties that entails
Font = white for color
ldquoAharonirdquo for type of font
and size = medium
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
APPLY STYLES TASK PANEAn add-on from the Tag amp CSS Properties Task Pane Once again you really can get away without using this pane for much (if not all) that you will do in creating and editing your future website But for the sake of understanding whatrsquos available to youhellip(brief)
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
APPLY STYLES TASK PANE ndash CREATE NEW CSS
STYLES AND MANAGE EXISTING ONES
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
REMEMBER A CSS STYLE IS SET BEHAVIORS FOR THE TYPE OF FONT
SIZE OF FONT BACKGROUND ETC HERE IS WHERE YOU CAN CREATE A
NEW STYLEhellip
In this Task Pane you can
see existing ldquoStylesrdquo that are
used in the RTI website
Style 2 3 amp 4 have
backgrounds to them that
match the color of the
backgrounds used on each
page
Style 3 goes with this
background
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
I CLICKED ldquoNEW STYLErdquo AND THIS WINDOW APPEARS HERE YOU CAN
ADD A NEW STYLE WITH DIFFERENT PROPERTIES SUCH AS ldquoFONT-
FAMILYrdquo OR ldquoCOLORrdquo ETChellip
When you get here in web design it does make things easier but you donrsquot need to use it for most
of what yoursquoll probably do
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
TOOLBOX TASK PANE
Like itrsquos name a bunch of tools to use in web
design but therersquos always another way to get at
the same tool or behavior in Expression Web 2 Irsquoll
explainhellip
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE TOOLBOX TASK PANE INSERT IMAGES HORIZONTAL LINES VIDEO
ETC (YOU CAN ALSO ACCESS THESE TOOLS THROUGH OTHER METHODS
IN EXPRESSION WEB 2)
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE TOOLBOX IS A BUNCH OF SHORTCUTS TO
VARIOUS FEATURES IN EXPRESSION WEB 2
There are many different tools you
can insert into a web page here but
all can accessed through other
features in Expression Web 2 For
example you can insert an image
into a web page by either right-
clicking ldquoImagerdquo or dragging it with
your mouse onto the work space
I recommend moving this Task
Pane to allow more room in your
work space ndash Irsquoll get to how to do
this later
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
REDECORATINGMOVING THINGS
AROUND IN EXPRESSION WEB 2Depending upon what type of site or pages you
create and keep creating yoursquoll want your
workspace to work for you
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
REDECORATING EXPRESSION WEB 2 MAKING MORE ROOM TO
SEE WHAT YOU ARE WORKING ON (SHRINKING THAT WHICH YOU
DONrsquoT USE MUCH)
All of the
Task Panes I
mentioned
can be moved
to another
location on
your screen or
removed from
the screen
entirely
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
YOU CAN CLICK THE TOP BAR OF ANY TASK
PANE AND DRAG IT TO DIFFERENT SIDES OF
THE PAGE
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
I CLICKED ON THE TOOLBOX TASK PANE AND DRAGGED IT TO
THE OTHER SIDE NOW ITrsquoS BETWEEN THE FOLDER LIST AND
THE CSS PROPERTIES
You can also
make them
smaller or
larger by
moving the
mouse over
the border
You can also
remove them
entirely by
clicking the
ldquoXrdquo
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
I DRAGGED THE ldquoMANAGEAPPLY STYLESrdquo TASK PANE AND MOVED IT TO THE LEFT SIDE IF
YOU DRAG THEM ON TOP OF EACH OTHER THEYrsquoLL MERGE AS ONE REMEMBER YOU CAN
MESS THIS UP ALL YOU WANT BC YOU CAN CLICK ldquoTASK PANESrdquo AND THEN ldquoRESET
WORKSPACE LAYOUTrdquo TO GO BACK TO THE WAY IT WAS ORIGINALLY NO WORRIES
The Task
Panes I
dragged over
to the left have
merged with
each other See
Apply Styles
then Toolbox
and you can
use the arrows
to get at the
others
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
THE TASK BAR ON TOP
Always there and easy to use
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
FILE EDIT VIEW INSERT FORMAT ETC
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
LIKE MICROSOFT WORD THESE COMMANDS ON TOP ALLOW YOU TO CLICK ON
ANY ONE OF THEM AND SEE THE TOOLSCOMMANDS LOCATED IN THAT
CATEGORY WErsquoLL GET INTO MANY OF THEM IN OTHER TUTORIALS BROWSE
THROUGH THEM TO SEE WHAT THEY OFFER
A few shortcuts are here to
make things quicker For
example if you click the
little diskette icon it goes to
save the page you are
working on
You an also change the font you are
working with on a webpage here
like in Word Type of Font Size
Bold Color etc
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website
WHEN IN DOUBT ASK FOR HELP
Remember Donrsquot be afraid to play with the program and mess things
up You learn by trial and error When in doubt open a play website
and try new things in it If you mess it up it doesnrsquot matter See the
other tutorials for creating your website