In this lab you will make some modifications to your Xanga page, using some of the material covered in lectures. You will use some CSS (Cascading Style sheets) code to modify the overall appearance of your Xanga page, and add a repeating image.
Access W3Schools or the lecture notes on CSS, explored the Westciv web site, or had a look at the list/ of other interesting web sites.
Go to your Xanga Look and Feel page
. You find this by clicking on
your Xanga name on the small menu list at the top right of your main
page. (You have to be logged in to be able to do this.) Then click
on look and feel
in the menu list on the left.
In another window or another tab in the same window, go to the
lecture notes on CSS. (From campus type escience/nm
or from
off campus type escience.anu.edu.au/nm
and scroll down to Lecture
6 on CSS.) Find the slide which deals with Writing the HTML
,
and copy the navbar
bits into the website stats
box
in the Xanga look and feel. Please remember we are really adding
some html to an existing page, so we don't need to (or want to) add
<html>, <head>, or <body> tags.
Now go through the slides from the CSS lecture, and paste in the <style> tag and contents, previewing how each additional chunk of CSS changes the look. Are there any differences to how the results looked in the lecture slides? Do you have any idea why? Modify the CSS to make the results more pleasing or more in tune with the look of your site. Refer to the W3Schools site for help, as well as your tutor.
So far, we've added some html and modified the style, but we've
mostly left the Xanga code alone. This task is to modify the look
and feel of the left panel of your website, which is provided by
Xanga for you. Use the view source
or view selection
source
to identify how the components of the left panel are
specified, and experiment with modifying the left panel. I suggest
starting with text styles, but its really up to you.
You may have already done this, as the Other Examples
slide shows how to do this. I suggest using a small image (or a
small version of an image) repeating on your page. If you use it
on the left, you may need to work out how to move the left panel
out of the way. This may or may not be easy. Please also think
about whether you can use a repeating image usefully / meaningfully /
esthetically. (If you decide against a repeating image, please leave
it on your site until your next lab though, to make sure we've seen
that you've tried this out.)
Examine the CSS which Xanga uses, by using view source
.
Figure out which buts you alredy understand, and look up those you
don't (e.g. in W3Schools or by Google or other websearches).
This task is most easily done in parallel with the other tasks.
Please don't forget to create an event for today's lab which gives a brief description of what you've done, e.g. how you modifed the left panel in Task 3.