1. Favicons
Finally, let’s add a favicon to our page. Favicons are the tiny icons that appear on the top left next to a website’s name and URL.
First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).
If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.
Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (desktop or My Documents).
Now that you have created your favicon, step two is adding code to your webpage.
Add this to your head section:
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!
2. Links
Linking to outside webpages:
<a href=”http://www.medfordpublicschools.org/”> This is a link to the Medford Public Schools webpage. Example:
<a href=”http://www.medfordpublicschools.org/”>Click here to go to the Medford Public Schools website</a>
To open a link in a new window or tab add target=”_blank”:
<a href=”http://www.medfordpublicschools.org/” target=”_blank”>
Please now add a link to an outside website (school site, Google, class site, whatever)
3. Let’s make our links 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.
4. 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
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!