1.  Let’s make our link from yesterday more interesting!

Styling Links with CSS

The four links states are:

a:link – a normal, unvisited link

a:visited – a link the user has visited

a:hover – a link when the user mouses over it

a:active – a link the moment it is clicked

They MUST be in that order if you’re going to use all of those attributes.

Please copy and paste the following code in your internal stylesheet just before the </style> tag:

a:link
{
text-decoration:none;
color:purple;
}
a:visited
{
text-decoration:none;
color:blue;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
text-decoration:underline;
color:green;
}

Check out the different colors and when you see them- when you roll your mouse over a link, when you click on the link, what the link looks like after you have clicked on it, etc.

Try changing the colors.  Notice they are the color names, not hex values.  You can use either.  See a good color list here.

Try changing the text decoration from underline to none.

2.  Creating a mobile site/app

We are going to spend the rest of our class focusing on mobile websites and apps!

Mobile sites and apps are designed to be viewed on mobile devices like smartphones and tablets.

Today you will create a mobile site using Dreamweaver CS6 and PhoneGapBuild.  At the end of the class you should have a mobile site built that we can test on an Android phone.

Check out these two useful app prototyping tools to help you create a rough draft of an app:

https://www.fluidui.com/– Open in Chrome

http://jquerymobile.com/

We are going to use Dreamweaver to build a mobile site.  We will use one of Dreamweaver’s mobile templates.

Your mobile site has five pages- a home page, and four sub-pages.

Each page has a header, body area, and footer.

We are going to edit all of this and add our own content to develop your first mobile site!