This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
web:site_organization [2007/09/18 13:54] cedwards |
web:site_organization [2013/03/05 09:47] (current) cedwards |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Website Organization ====== | ====== Website Organization ====== | ||
- | Have you spent years editing pages straight from the web through Netscape Composer, Mozilla Composer, Nvu, or Seamonkey Composer and you are wondering how many unused images and unlinked pages are sitting out there somewhere and are wondering how you can clean it up? Are you just starting out or have decided to start from scratch on your entire site? | + | Have you spent years editing pages straight from the web through Netscape |
+ | Composer, Mozilla Composer, Nvu, or Seamonkey Composer and you are wondering | ||
+ | how many unused images and unlinked pages are sitting out there somewhere and | ||
+ | are wondering how you can clean it up? Are you just starting out or have | ||
+ | decided to start from scratch on your entire site? | ||
- | If you answered yes to either | + | If you answered yes to any of the previous questions, |
+ | are feeling | ||
+ | or how to get your sanity back from the years of editing pages straight from | ||
+ | the web. I can help you get this task under control by showing you a few | ||
+ | tips and tricks that will help you understand a bit about websites in | ||
+ | general, your own website, and maybe a few tools that you can use. | ||
===== The URL and Folders ===== | ===== The URL and Folders ===== | ||
- | First, let us take a look at a Uniform Resource Locator or URL for short. | + | First, let us take a look at a Uniform Resource Locator or URL for short. |
+ | On the web, a URL consists of **http:%%//%%** or **https:%%//%%**, | ||
+ | the hostname (e.g. ges.wcs.k12.va.us) and possibly a few other things as well. | ||
+ | Typically, things that follow the hostname are a **/** for the main page of a | ||
+ | website, a directory after this slash, or even more items separated by slashes | ||
+ | or other characters. | ||
+ | school had their own URL in the form of http:// | ||
+ | had a URL that looked like this: http:// | ||
+ | In the case of this URL, the John S. Battle Web sat down in a folder on our | ||
+ | main website. | ||
+ | for **high** schools, and in that folder, a folder for **ahs**, **hhs**, | ||
+ | **jsbhs**, and **phhs**. As you drill down through the folders, each one of | ||
+ | those folders stacks on the end of the URL. You can use this technique to | ||
+ | organize your own website just as you would organize folders on your desktop | ||
+ | or in your "My Documents" | ||
- | One important difference between the way you name folders and filenames on your computer and the way you should name them on the web is that when you name files or folders with spaces on your own computer, this doesn' | + | One important difference between the way you name folders and filenames on |
+ | your computer and the way you should name them on the web is that when you | ||
+ | name files or folders with spaces | ||
+ | computer, this doesn' | ||
+ | a **%20** in place of the space or another sequence in the form of | ||
+ | **%< | ||
+ | special characters (other than _ or -) in filenames. | ||
+ | using an underscore or a dash in place of a space. This keeps the URL still | ||
+ | somewhat readable. | ||
+ | characters. | ||
+ | URLs, you create an " | ||
+ | interest of not confusing people with different cases in URLs, I | ||
+ | ** strongly | ||
+ | lowercase. | ||
- | I recommend using folders to help you organize your site. Below is a diagram showing an example school site. I signify the top of the website with **/ | + | I recommend using folders to help you organize your site. Below is a |
+ | diagram showing an example school site. I signify the top of the website | ||
+ | with **/ | ||
+ | they are stored on the server. | ||
+ | with a **|** below them indicate another folder or file in that folder. | ||
< | < | ||
Line 34: | Line 74: | ||
</ | </ | ||
- | The key is knowing how the URL works. | + | The key is knowing how the URL works. |
+ | following URLs: | ||
* http:// | * http:// | ||
* http:// | * http:// | ||
Line 49: | Line 90: | ||
* http:// | * http:// | ||
| | ||
- | As an internet user, I should be able to figure out pretty quickly what each of these URLs will show me. As a web designer, it also helps me keep all of my clubs in one folder, events in another folder, and sports separate as well. The images folder at the top of the site I use to store images that are used across many pages on the site. A common use of this is a logo, or navigation. | + | As an internet user, I should be able to figure out pretty quickly what each |
+ | of these URLs will show me. As a web designer, it also helps me keep all of | ||
+ | my clubs in one folder, events in another folder, and sports separate as | ||
+ | well. The images folder at the top of the site I use to store images that are | ||
+ | used across many pages on the site. A common use of this is a logo, or | ||
+ | navigation. | ||
+ | from the web as well. If I have all the photos from the prom kept in the | ||
+ | images folder inside the prom folder, I will know exactly where to find them | ||
+ | when it comes time to remove them and I will not accidentally remove other | ||
+ | important photos. | ||
- | You may have noted that I did not list http:// | + | You may have noted that I did not list http:// |
+ | above. | ||
+ | reasons why it is not necessary. | ||
===== The Index Page ===== | ===== The Index Page ===== | ||
- | The next important concept of URL design and publishing to the web is the concept known as the index page. Each folder above, and each URL in the above examples needs an index page. If you were to create these folders and upload them and go to for example | + | The next important concept of URL design and publishing to the web is the |
+ | concept known as the index page. Each folder above, and each URL in the above | ||
+ | examples needs an index page. If you were to create these folders and upload | ||
+ | them and go to http:// | ||
+ | a page that said **Index of / | ||
+ | folders that you had stored there. | ||
+ | **Parent Directory** (which goes up to the next directory up the chain, in | ||
+ | this case sports), **football**, | ||
+ | have little folder icons beside them. If, however, I put a file called | ||
+ | index.html in the sports folder and publish it, when I next go to | ||
+ | http:// | ||
+ | an index.html file in the football folder, I will see that page when I go to | ||
+ | http:// | ||
- | Some people have started to understand the value in folders for their organizational benefits and created folders like the sports/ | + | Some people have started to understand the value in folders for their |
+ | organizational benefits and created folders like the sports/ | ||
+ | but have called the main page football.html. | ||
+ | http:// | ||
+ | redundant information. | ||
+ | football.html, | ||
+ | http:// | ||
+ | knows to send the index.html file. A good rule of thumb is that when you | ||
+ | create a folder, put an index.html file in it to serve as the main page for | ||
+ | that folder. | ||
- | Please note that for historical reasons, some of your sites may be setup so that you publish your main page as the page default.htm or default.html. | + | Please note that for historical reasons, some of your sites may be setup so |
+ | that you publish your main page as the page default.htm or default.html. | ||
+ | You may use either of these names for your index page in your folders, but do | ||
+ | not use a combination of these, because you may not get the results you | ||
+ | expect. | ||
+ | ===== Linking ===== | ||
+ | |||
+ | Linking can be a frustrating topic and I am going to try and make it as simple | ||
+ | as I can. You have two types of links -- absolute links and relative links. | ||
+ | An absolute link looks just like a URL. These types of links should be | ||
+ | external to your own web page. Relative links, on the other hand, are | ||
+ | trickier, but just as important. | ||
+ | your website as I listed in | ||
+ | [[site_organization# | ||
+ | assume that you have a page down in / | ||
+ | an images folder in / | ||
+ | link to an image in the /images folder and the images folder in football. | ||
+ | I've also added an images folder to crosscountry as well. | ||
+ | < | ||
+ | / | ||
+ | |--images | ||
+ | | |--site-header.jpg | ||
+ | | | ||
+ | |--sports | ||
+ | | |--football | ||
+ | | | |--index.html | ||
+ | | | |--images | ||
+ | | | | ||
+ | | |--crosscountry | ||
+ | | | |--index.html | ||
+ | | | |--images | ||
+ | | | | ||
+ | | |--images | ||
+ | | | |--sports-header.jpg | ||
+ | | | | ||
+ | | |--index.html | ||
+ | </ | ||
+ | |||
+ | In order to link to an image in the sports folder images from index.html | ||
+ | in the football folder, you should use a relative link. Here is how you | ||
+ | would link it (the same relative link could be used in | ||
+ | crosscountry/ | ||
+ | < | ||
+ | <img src=" | ||
+ | </ | ||
+ | |||
+ | The **../** tells the web browser to look in the folder just above this | ||
+ | one (sports) and in the images folder below it and then for a file called | ||
+ | sports-heading.jpg. | ||
+ | relative link to reference an image in the /images folder as well: | ||
+ | < | ||
+ | <img src=" | ||
+ | </ | ||
+ | |||
+ | This time, the browser is looking two levels up and into the images | ||
+ | folder for a file called site-header.jpg. | ||
===== Moving Forward ===== | ===== Moving Forward ===== | ||
- | After seeing how the URL works in relation to a folder structure, you begin to see some advantages to structuring your site. Your once small website has grown beyond one or two pages and you are updating it regularly by adding and removing images from the many pages and never removing old files that were used. How can you clean up the clutter? | + | After seeing how the URL works in relation to a folder structure, you begin to |
+ | see some advantages to structuring your site. Your once small website has | ||
+ | grown beyond one or two pages and you are updating it regularly by adding and | ||
+ | removing images from the many pages and never removing old files that were | ||
+ | used. How can you clean up the clutter? | ||
+ | utility called wget. Wget will allow you to mirror your site in a folder on | ||
+ | your computer. | ||
+ | resources currently in use on it into a folder, essentially taking a snapshot | ||
+ | of your website. | ||
- | So where do you get it and how can you use it? You can download it from our FTP site at ftp:// | + | So where do you get it and how can you use it? You can download it from our |
+ | FTP site at ftp:// | ||
+ | c:\windows or your desktop, whichever you prefer. | ||
- Click **Start**, click **Run**, then type in **cmd**, and press **OK** or the **Enter** key. This should bring up a Command Prompt Window. | - Click **Start**, click **Run**, then type in **cmd**, and press **OK** or the **Enter** key. This should bring up a Command Prompt Window. | ||
- Type in **cd %userprofile%\desktop** and then press the **Enter** key. | - Type in **cd %userprofile%\desktop** and then press the **Enter** key. | ||
- Type in **wget -m http:// | - Type in **wget -m http:// | ||
- | - Sit back and relax until it is finished and returns to the **C: | + | - Sit back and relax until it is finished and returns to the **C: |
- Type **exit** and press **Enter**. | - Type **exit** and press **Enter**. | ||
- | After it has finished, you will have a folder on your desktop that is named school.wcs.k12.va.us. | + | After it has finished, you will have a folder on your desktop that is named |
+ | <school>.wcs.k12.va.us. | ||
+ | your website that were linked or embedded, such as images. | ||
+ | that it will not interpret JavaScript and find images that may be rotating due | ||
+ | to the use of DynamicDrive' | ||
+ | sites. | ||
+ | |||
+ | The other option is obviously to start from scratch and build the new site | ||
+ | behind the scenes until it is mostly ready to publish. | ||
+ | communication with your principal and staff because it will take time to | ||
+ | restructure. | ||
+ | you will be organized. | ||
+ | organize the site properly. | ||
+ | and possibly new site design tools, I **strongly** recommend Adobe' | ||
+ | Dreamweaver software because it lets you design site templates for your pages | ||
+ | and is designed from the ground up to support Style Sheets to ease formatting | ||
+ | information uniformly across your site. |