Giving your site some basic organization is important. As I said back in the module, it's not like this structure won't change; it will. But, you need to start thinking about structure early in the process and getting one in place. It's good to practice organization now even before you're considering your project for the semester.
I've always seen 2 major issues at work in site structure from a back-end perspective. When you're designing a site's structure, ask yourself:
Can I find what I'm looking for when I go to edit?
Can other people find it if I got the most-horrible-flu ever and was off work for two weeks?
You'd be surprised at how many people create their own site and then can't find anything. They've built the site much in the same way they would thrown random files onto their computer's desk top. Stuff is everywhere and nowhere at the same. It's important you create an organizational plan that allows you to find and manage the information you're creating. That means you need to use sensibly-named folders and file to contain your content.
In my view, there's two groups of people you need to consider here: the site's visitors and the site's maintainers.
Of course, people coming to a site should be able to make sense of the site not only by the labels but by following your conventions. On page 99, Baehr gives an example of NASA's solar exploration site map. It's easy to imagine the following paths under the first heading, "News & Events":
Visually, the folder structure would look like:
You also need to consider a structure for maintainence. This is a big one. Afterall, while many people are hired as outside contractors to design and develop sites, the finished product is usually left in the hands of someone else to update the content. That person needs to find content easily via your site structure AND your naming conventions. In a similar vein, it's a good idea to keep in mind the hit-by-a-bus rule. If you were unable to continue with the site for whatever reason, your structure should be so clean and easy that anyone could leap in and carry on. Disaster planning scenarios are, by the way, one reason why we develop styles guides.
So, what's my site looking like so far? Right now, there's nothing fancy going on here. The DOCTYPE isn't declared on this page because I'm hand-tagging; thus, the HTML is basic 4.0. I'm doing bare bones pages and organizing my material for week-by-week deployment via named folders.
I keep all my images in the images folder and all my documents (PDF's, Word files, etc.) in the documents folder. As the semester progresses, I can add more week_X folders.The file default.html is always at the top level of the site. It's the page people land on first.
Notice some of the naming conventions at work in my structure. Everything is lowercase. Trust me here...it's just easier in the long run if you're consistent and use all lowercase. There are differences, depending on the web server, between Documents and documents. Also, there's no blank spaces in names of folders or files. Notice the underscore.
What is Linux? Linux is a free, open-source operating system. Most web servers (the machine sitting in a cold, dark room) run Linux
When you're creating pages or naming documents, images, and other media, it's important to use the proper capitalization, since Linux is case-sensitive. In other words, a link to "resources.html" and "Resources.html" is two different pages! Likewise, a link to "file.pdf" will not work the same as "File.pdf" on the web server, even if it does work properly on your computer.
Your computer, while it is your DEVL environment (Development), it's not the same as a VERF or PROD (Verification, Production) environment. Most companies try out their code on a VERF or test server. That server isn't live to the public but it's formatted exactly the same way as the PROD server. When it's all good in VERF, the content is ported over to PROD and goes live. What I'm saying here in all this babble? You've got to be super-OCD-consistent in your naming conventions. You're not running a VERF environment--you've got DEVL and PROD only. Most of the problems people have with pages not working [insert panic here: Dr. P! Dr. P!!!!!!!!!!! My pages don't work] are related to file names.
The OS (Operating System) on your PC or Mac is isn't Linux. Therefore, we all learn not to care about about capitalization/spacing in file names. Linux changes our world in ways we don't often like. Linux cares!! It will stop you by displaying FILE NOT FOUND messages if you goof up your conventions.
Same goes for spaces. It's best practice to avoid spaces in filenames that will be accessed on a web server; use a dash or underscore character instead. Personally, I'm an underscore kind of gal, but that's just my preference. If you don't, people can still access your file if it's linked properly, but it's not easy to read the file name. PLUS, nothing makes you look more like a total rookie than this. It screams "green horn" loud and proud.
So if you're linking "My File.pdf" on your site, the link will show up on most web servers as My%20File.pdf. Notice the nasty, nasty percentage mark. Instead, use one of the following varations:
We're going to read about TAXONOMIES this week. Part of building an effective taxonomy for a website [yeah, I like it as one word...old, old habits die ever so hard] is getting all of your conventions ratified early on.
You're not stuck with this architecture forever. But I want you to get a little practice visualizing your site and representing it via a graphic:
After archiving your first default page from last week, I want you to create two pages this week: a new default page AND another page
The content should have some information about you, what's currently on the site and what you plan on hosting here by the end of the semester. You'll need to use these tags, at a minimum, for this assignment:
<HTML>
<HEAD>
<TITLE>
<BODY>
<P>
<H1>, <H2>, <H3> and more, if you'd like
<UL> or <OL> or both
<A HREF> I want you to link from your default page to a new page you create.
<IMG SRC> I want you to insert the image of your nascent site diagram on the second page. Put some text on the page, too.
All of the tags you'll need to use are visible via VIEW SOURCE for this page. When you're done, you'll upload your new default page to your site (using FTP or the file transfer program that works with your site). You'll also have to make sure your folders and their contents make their way to your site too.
FTP: if you don't know what this is, look up the term. I'll be teaching you to FTP next week...even though I think it's a "Dinosaur Skill" straight out of my days in Jurassic Park, it's still extremely useful.
You need to consider how you'll be archiving your work. I'm archiving in a very specific way for my purposes teaching.
Week 1: my first default page
Week 2: an archive of my 2nd default page and my site structure file.
Week 3: archive of my 3rd default page and my linked page (etc).
Week 4: [etc.]
You may want to create an archive folder and move older work into that folder. I'll leave that facet of organization up to you.
Question: Are you finding the hierarchy variations of horizontal and vertical confusing? If you've not done web design before, this switch of orientations is always disconcerting at first. While most site structure diagrams are drawn horizontally, Dreamweaver's default displays information vertically. The shots I'm showing you are captures of how Dreamweaver is displaying my site. You'll get to Dreamweaver next week.
Remember, your default.html page iteration for week 2 needs to use hand-tagging. No editors. No fancy stuff. One of the reasons I don't want any of the fancy stuff yet relates to bad habits. I don't want anyone formatting text features (colour, size, font, etc.) by any other method than CSS. And I don't want inline CSS. I've seen instructors show students some fun and nifty stuff early on by just doing local HTML modifications. However, most of the time students then have to "unlearn" that fast n' fun way. It's better to learn to handle presentation attributes correctly from the start rather than unlearning.
You're only using basic HTML 4.0 tags which are outlined to you in our textbook. You should, by the way, if you're not used to reading tags, always look at the VIEW SOURCE of my pages. Everything you'll need is here....some of it's a little oblique, but it's here.