Layout
Layout is the way that you organize the visual elements in your site. It might be different in each section or even on each page. Generally speaking, layout involves deciding on positions for repeating elements, such as menus, logos, and other items you might have on a page.
It might be that some sites will establish a layout, and it never changes, but this would be extremely rare. More often than not, at some point, you might end up wanting to rearrange things for a variety of reasons—based on feedback, to emphasize one thing over another, and so on. And in this category, CMS-based sites have an advantage, and Drupal has a nice method of allowing you to rearrange things.
CMS Site
For example, in the current version of the RGBGreen site, there is a “news block” at the top of the site, titled “Green News” (see Figure 4.1).
Figure 4.1. Green News is a modular block of content that can be moved around the page.
Then down below, when I’m logged into the site, you can see the Administer panel known as the Admin panel (see Figure 4.2).
Figure 4.2. The Administer panel appears below, but can be moved.
So what if I wanted to rearrange things, so that the news was at the bottom? No problem. I’d just log in and go into the Blocks area (see Figure 4.3).
Figure 4.3. The Admin area allows you to rearrange blocks of content.
I’d literally just click on the News block and drag it down (see Figure 4.4).
Figure 4.4. Once a block is rearranged here, it affects the layout.
And things will be rearranged automatically on the page (see Figure 4.5).
Figure 4.5. The rearranged blocks in new positions.
This modular drag-and-drop approach is very powerful, especially in comparison to traditional methods of developing a website. For example, you can go to a CMS-based site like rgbgreen.org and “view the source,” which means to look at the HTML code in the site (see Figure 4.6).
Figure 4.6. Looking behind the scenes at a Web page in Firefox.
And you can see where the CMS system is writing, managing, and adjusting the code for you. You might even notice distinct sections of code that correspond to visual elements on the page. For example, in the code below, you can see the “TEKELSEY1” block that we just rearranged to the top of the page (see Figure 4.7).
Figure 4.7. HTML code, basically like a screenplay, gives instructions to the browser to do things.
Now we’ll take a look, to just scratch the surface, at how you build and change a page using traditional HTML code.
Traditional HTML
If you had to manually adjust a page, you’d have to think in terms of tables. When you manually create an HTML-based site, and want to arrange things on a page, it’s all about tables: rows and columns. For example, in this super simple example, we have a basic HTML page, as displayed in the browser, and there are bits of content displaying in a table that has two columns and two rows (see Figure 4.8).
Figure 4.8. The HTML “screenplay” (code) is telling the browser to draw a table and put text in it.
Now, we’ll take a look at the HTML file in Dreamweaver, a common program used to make traditional websites. Basically, what happens when you view a Web page is that the Internet browser is going and getting a file, and then interpreting it.
In this next graphic in Figure 4.9, what we’re looking at in the top is the code, and below is what actually appears on the page. If you go down through each line of instructions and think of it as stage directions in a screenplay, basically the instructions are telling the browser, “Okay, put this content here, and this content there,” and so on.
Figure 4.9. The code in the top area tells the browser to display things as they appear in the preview below.
In a manually created website, you start by creating and changing files right on your computer, and then you have to upload them every time you make a change. For example, on the right side, you can see a file, in the Local Files area, representing the manually created Web page (see Figure 4.10).
Figure 4.10. When you make a Web page without a CMS, you make it on your computer (locally) and then you have to upload it.
In order for the file to appear on the Web, I have to connect to the Web (which also means I need to have an Internet hosting account) and then upload, or put the file on my website (see Figure 4.11).
Figure 4.11. Uploading files—doable, but lots of room for error.
It looks relatively simple, but imagine working at a company where there are thousands of Web pages and files. What happens if you put the wrong file in the wrong place?
Has this ever happened to you? It’s happened to me.
While uploading, you need to decide whether to upload dependent files. This means, if you’ve inserted any files into your Web page, such as images, you have to decide whether to upload them (see Figure 4.12). So then the question becomes, do you have the latest versions of the files on your computer?
Figure 4.12. Do I upload all the files or just some of them? What if someone uploaded more recent files, and I’m replacing those with ones that are out of date? These are some of the issues with traditional sites that have multiple people working on them.
Then, when all goes well, you’ve successfully uploaded a file to the Remote Site, which is simply a computer sitting somewhere in a datacenter, humming along with all the other computers there, which have no monitors or keyboards—they are all just holding Internet files, and are running 24/7 (see Figure 4.13).
Figure 4.13. Now that the file has been uploaded, people can see it on the Internet.
Then, after you’ve uploaded the file, the file becomes part of the link. For example, the “page.htm” file, when uploaded, becomes part of the link http://cftw.com/samplepage/page.htm, as seen in Figure 4.14.
Figure 4.14. A Web address is like a phone number for a file that’s sitting on a computer, waiting to be viewed.
And when you visit this address, the browser takes the file, does what the file tells it to, and displays the text. So you’ve got the files uploaded to the remote computer, also known as a server, and then you’ve got the copies of the files on your computer (see Figure 4.15).
Figure 4.15. Files on your computer.
So the files are in two locations (see Figure 4.16).
And in this scenario, we’re talking about a single person working on a single Web page. So the challenge becomes, what if you want to have other people working on the page? For example, what if Joe makes a change to a file, and it’s out of date? Or what if he updates the page, uploads the file, and overwrites the change I just made? These are some of the things that a CMS system can help with.