COM271—Tasks 5&6 from home

Working on Tasks From Home
A Suggestion

Syllabus | Assignments | References and Useful Links

What's This?: Snowed out for 3 Mondays in a row? Unbelieveable!!! If you are looking for something to do, here's a suggestion for working from home.

Coding Setup

Purpose: Using Sublime Text from home.

If you haven't already tried this, take a look at Sublime Text as a coding expediter. (Course References and Useful Links>Coding & ftp Options>Sublime Text; or just use http://www.sublimetext.com/. It's good, free (for at least 30 days), and flexible (lots of add-ons: see the Coding & ftp options page for one example).

Some Goals for This Week

You might want to take a look at tasks 4 and 5, even if you still haven't yet finished 3. Here you will set up a better version of navigation (see below), make it into an external file, and link to it from within pages by using a server-side include on a .shtml page. And you should get a start on a style sheet, make it external, and begin to link to it from all future pages.

Reading: As you come to need them, read the following:

Things to Do

Server-side include of navigation file

Follow the instructions of task 5 down through step 6. This will place a copy of whatever navigation you've created into a file inside a folder for server-side includes.

Instead of leaving your file as links inside of paragraphs, rewrite your links so they look like this instead:

You now have in-line elements contained in an html5 <nav> element (read all about nav and other HTML5 Semantic Elements (week 2 notes) here).

You can continue, following task 5, to include this file on all pages, using a server-side include. Note that you can include a link to this navigation file on all pages (index, 2_bio, etc., but that you must convert all pages that have a server-side include so that they use the shtml file extension (see task 5 and reading on linking to external files, etc., above).

Style sheet for page and for navigation links

The links inside the <nav> element will display as in-line elements unless you include on your page a style sheet to change their display. If you haven't already done this (possibly in task 4), include a style sheet on the page (for now, just copy from here and paste it in the <head> element like this):

<title>Your Page Title</title>
<style type-"text/css" media="screen">
body{background-color:#33f;color:#fcc;font:16px arial, helvetica, sans-serif;}
nav a{display:block;text-design:none;padding:5px;border-bottom:1px solid $ccc;font:18px verdana, sans-serif;}
</style>
</head>

This will set a common font style, background blue, and cream-color for fonts. It will also set rules for all <a> elements inside the <nav> element, including removing the default underline, setting a font size and family, setting padding and a nice bottom border between links; most importantly, it will cause the links to be displayed as block elements instead of in-line. We'll be reading and discussing this in class, soon.

Task 5, steps 10-13, (and the reading, above) will walk you through making this style sheet into an external style sheet, with a link to any pages that use it. You may copy this link to your index.shtml (note the .shtml, now) and other pages with the new external navigation server-side-include to complete task 5.

If you attempt this exercise and have problems, feel free to email me for help (or I'll see you in the next not-snowed-out lab sections).