It was just over a week ago I think when I managed to get hold of the access information for the Salford Sirens mini-site. For those who are unaware, I am a cheerleader, coach and committee member of the Salford Sirens, which are Salford University's cheerleading squad. I'm also sort-of the unofficial web-administrator, though I do so voluntarily and happily (if you know me at all you'd probably already know that I love to sink my claws into a project.)
As the Sirens are a part of the USSU, they get an 'activities' mini-site on the Student Union's home page, which are to be created and updated by members of the activities clubs and societies themselves. So my task for the past week has been to turn the Sirens' page from a one-page information sheet with a few scraps of what cheerleading is about and some measly pictures to... well, something presentable.
The format is similar to that of a single blog entry, anyone familiar with the likes of Blogger, Wordpress, Tumblr or any similar blogging platform will know what this means. You are given a white box, and some meta buttons over the top to 'help' with designing the page. I tend to write everything in code, that way I know exactly how it's going to look and I don't need to worry about the design being incompatible with different browsers (which is a particular issue considering most of the browsers at university run on an older version of IE.) I'm the same with blog posts or other data entry which offers 'advanced' HTML help in the format of a font or colour drop down box, I just don't trust em...
Anyway, back on topic. As you can imagine, setting up a multi-page mini-site was no small task thanks to this little lack of functionality. For the other non-code/design literate groups it's fine to just pop some information on a one or two page mini-site, I'd imagine not many clubs or societies have a web designer as a member (unless there's a Web-Design society I don't know about, there's an idea...) so I can't really blame the other sites for their simplicity. Fact is I had a lot of time on my hands and I'm a stickler for detail, and making things look pretty.
It went from a simple five pages to a slightly more complex seven pages. The news page is probably one of the first times I've really hammered the social network connectivity on a site which is non-blog related. It's much more difficult on a web-site than a blog, as most modern blogging software offers the connectivity in the form of widgets or plugins, whereas this is just straight up code (iframes and the like.) A few more hoops to jump through but otherwise I am pleased with the result, it means that there is a little bit of dynamic content on a page which may end up neglected if I get too busy with Uni work (or I don't manage to teach the others how to update it.)
Another thing to note is the menu bar. I am particularly pleased with this as it is all done using image sprites. I'll try and explain a little about the process, but there are plenty of tutorials online that go into more detail about it such as
this one and
this one (and maybe even
this one.)
For the uninitiated, CSS is a method of separating style from content in web design. You can use CSS to control elements such as background colour, height, width, alignment blah blah, basically you can adjust a LOT with CSS without effecting the actual element itself. So if you have a table with a CSS class, and you adjust the class, it will adjust the table (and all other tables with the same class.) I'm possibly not being very clear, so here's a picture...
...very helpful. The reason why CSS is so useful for web designers is that not only can you manage the style using any number of attributes, but those three tables can be on three seperate pages. Say you have a table on three different pages with your birth certificate, pin number and home address, and you want those three tables to look the same on every page? throw a class="AllMyPersonalInformation" in a style sheet and link it to those web pages (again, not going into detail here, google it if you wanna' find out how) and BAM, those three web pages will have the same table on each one. I don't think I explained that very well, oh sod it...
...I think that makes even less sense, I'm not very good at explaining things I suppose. The software on the mini-sites did NOT come with the sort of interconnectivity I am used to using so having the pages link to a single cascading style sheet wasn't possible. As such, I had to insert all the code that I used to make the menu and image sprites work individually on each page (which is a ball ache when it comes to editing the menu later on.)
