Differences

This shows you the differences between two versions of the page.

--- web:site_organization [2011/07/19 08:08]
cedwards [Website Organization]
+++ web:site_organization [2013/03/05 09:47] (current)
cedwards
@@ Line 1: / Line 1: @@
 ====== 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 of the previous questions, odds are you are feeling that you don't know where to start in either starting a new site 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.
+If you answered yes to any of the previous questions, the odds are that you
+are feeling that you don't know where to start in either starting a new site
+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 =====
-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.  Some of you may remember a few years ago, before each school had their own URL in the form of http://jsbhs.wcs.k12.va.us, you had a URL that looked like this: http://www.wcs.k12.va.us/schools/high/jsbhs.  In the case of this URL, the John S. Battle Web sat down in a folder on our main website.  We had a folder for the **schools**, a folder in that folder 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" folder.
+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.  Some of you may remember a few years ago, before each
+school had their own URL in the form of http://jsbhs.wcs.k12.va.us, that you
+had a URL that looked like this: http://www.wcs.k12.va.us/schools/high/jsbhs.
+In the case of this URL, the John S. Battle Web sat down in a folder on our
+main website.  We had a folder for the **schools**, a folder in that folder
+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" folder.
-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't translate well to a URL.  It ends up sticking a **%20** in place of the space.  For this reason, I recommend **not** using spaces in filenames.  Instead, I recommend using an underscore or a dash.  This keeps the URL still somewhat readable.  One other important distinction is the use of uppercase characters.  When you use uppercase characters in folder, file, and thus URLs, you create an "ugly" URL.  Be consistent in your naming.  In the interest of not confusing people with different cases in URLs, I recommend strongly that you keep all file and folder names lowercase.  It will save you on headache relief down the road.
+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 or other special characters on your own
+computer, this doesn't translate well to a URL.  It ends up sticking
+a **%20** in place of the space or another sequence in the form of
+**%<number>**.  For this reason, I recommend **not** using spaces or
+special characters (other than _ or -) in filenames.  Instead, I recommend
+using an underscore or a dash in place of a space.  This keeps the URL still
+somewhat readable.  One other important distinction is the use of uppercase
+characters.  When you use uppercase characters in folder, file, and thus
+URLs, you create an "ugly" URL.  Be consistent in your naming.  In the
+interest of not confusing people with different cases in URLs, I
+** strongly recommend** that you keep all file and folder names
+lowercase.  It will save you on headache relief down the road.
-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 **/**.  This represents a folder sitting on my computer and the way they are stored on the server.  Each **--** is a file or a folder.  Entries with a **|** below them indicate another folder or file in that folder.
+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 **/**.  This represents a folder sitting on my computer and the way
+they are stored on the server.  Each **--** is a file or a folder.  Entries
+with a **|** below them indicate another folder or file in that folder.
 <code>
@@ Line 34: / Line 74: @@
 </code>
-The key is knowing how the URL works.  In the above example, we have the following URLs:
+The key is knowing how the URL works.  In the above example, we have the
+following URLs:
   * http://school.wcs.k12.va.us
   * http://school.wcs.k12.va.us/contact.html
@@ Line 49: / Line 90: @@
   * http://school.wcs.k12.va.us/contact.html
-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.  This structure also helps me when it comes time to remove content 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.
+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.  This structure also helps me when it comes time to remove content
+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://school.wcs.k12.va.us/index.html above.  See [[site_organization#the_index_page|The Index Page]] for the reasons why it is not necessary.
+You may have noted that I did not list  http://school.wcs.k12.va.us/index.html
+above.  See [[site_organization#the_index_page|The Index Page]] for the
+reasons why it is not necessary.
 ===== 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 http://school.wcs.k12.va.us/sports, you would be presented with a page that said **Index of /sports**.  It would then list any files or folders that you had stored there.  In the example above, it would show **Parent Directory** (which goes up to the next directory up the chain, in this case sports), **football**, and **crosscountry**.  The latter two would 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://school.wcs.k12.va.us/sports, I will see the file index.html.  If I put an index.html file in the football folder, I will see that page when I go to http://school.wcs.k12.va.us/sports/football.
+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://school.wcs.k12.va.us/sports, you would be presented with
+a page that said **Index of /sports**.  It would then list any files or
+folders that you had stored there.  In the example above, it would show
+**Parent Directory** (which goes up to the next directory up the chain, in
+this case sports), **football**, and **crosscountry**.  The latter two would
+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://school.wcs.k12.va.us/sports, I will see the file index.html.  If I put
+an index.html file in the football folder, I will see that page when I go to
+http://school.wcs.k12.va.us/sports/football.
-Some people have started to understand the value in folders for their organizational benefits and created folders like the sports/football above, but have called the main page football.html file.  The URL then becomes http://school.wcs.k12.va.us/sports/football/football.html.  This URL has redundant information.  Had the file been named index.html instead of football.html, they could have used the URL http://school.wcs.k12.va.us/sports/football because the server automatically 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.
+Some people have started to understand the value in folders for their
+organizational benefits and created folders like the sports/football above,
+but have called the main page football.html.  The URL then becomes
+http://school.wcs.k12.va.us/sports/football/football.html.  This URL has
+redundant information.  Had the file been named index.html instead of
+football.html, they could have used the URL
+http://school.wcs.k12.va.us/sports/football because the server automatically
+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.  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.  I recommend that you use index.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.  I recommend that you use index.html.
+===== 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.  Lets assume that you have a structure for
+your website as I listed in
+[[site_organization#the_url_and_folders|The URL and Folders]].  Lets also
+assume that you have a page down in /sports/football called index.html and
+an images folder in /sports/football and you need to
+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.
+<code>
+/
+|--images
+|  |--site-header.jpg
+|
+|--sports
+|  |--football
+|  |  |--index.html
+|  |  |--images
+|  |
+|  |--crosscountry
+|  |  |--index.html
+|  |  |--images
+|  |
+|  |--images
+|  |  |--sports-header.jpg
+|  |
+|  |--index.html
+</code>
+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/index.html as well):
+<code>
+<img src="../images/sports-header.jpg" alt="Sports">
+</code>
+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.  You could extend the chain of **..**'s in the
+relative link to reference an image in the /images folder as well:
+<code>
+<img src="../../images/site-header.jpg" alt="School">
+</code>
+This time, the browser is looking two levels up and into the images
+folder for a file called site-header.jpg.
 ===== 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?  One option is the use of a little utility called wget.  Wget will allow you to mirror your site in a folder on your computer.  It goes out to your website and downloads all of the resources currently in use on it into a folder, essentially taking a snapshot of your website.
+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?  One option is the use of a little
+utility called wget.  Wget will allow you to mirror your site in a folder on
+your computer.  It goes out to your website and downloads all of the
+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://ftp.wcs.k12.va.us/pub/web/wget.exe.  Save the program to c:\windows or your desktop, whichever you prefer.
+So where do you get it and how can you use it? You can download it from our
+FTP site at ftp://ftp.wcs.k12.va.us/pub/web/wget.exe.  Save the program to
+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.
   - Type in **cd %userprofile%\desktop** and then press the **Enter** key.
   - Type in **wget -m http://school.wcs.k12.va.us** and press the **Enter** key. Obviously, replace school with your school's initials (e.g. vies.wcs.k12.va.us).
-  - Sit back and relax until it is finished and returns to the **C:\Documents and Settings\username\Desktop** prompt.
+  - Sit back and relax until it is finished and returns to the **C:\Documents and Settings\username\Desktop**  (for Windows XP) or **C:\users\username\desktop** (for Windows Vista or Windows 7) prompt.
   - Type **exit** and press **Enter**.  The Command Prompt will go away.
-After it has finished, you will have a folder on your desktop that is named school.wcs.k12.va.us.  Inside will be all the resources that were saved on your website that were linked or embedded, such as images.  Beware, however, that it will not interpret JavaScript and find images that may be rotating due to the use of DynamicDrive's scripts which seem to be popular among the school sites.
+After it has finished, you will have a folder on your desktop that is named
+<school>.wcs.k12.va.us.  Inside will be all the resources that were saved on
+your website that were linked or embedded, such as images.  Beware, however,
+that it will not interpret JavaScript and find images that may be rotating due
+to the use of DynamicDrive's scripts which seem to be popular among the school
+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.  This requires
+communication with your principal and staff because it will take time to
+restructure.  Once you do get it underway, it will be faster to update because
+you will be organized.  It will be easier to remove all old resources if you
+organize the site properly.  For those that are looking for a new site design
+and possibly new site design tools, I **strongly** recommend Adobe's
+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.
-The other option is obviously to start from scratch and build the new site behind the scenes until it is mostly ready to publish.  This requires communication with your principal and staff because it will take time to restructure.  Once you do get it underway, it will be faster to update because you will be organized.  It will be easier to remove all old resources if you organize the site properly.  For those that are looking for a new site design and possibly new site design tools, I strongly recommend Adobe's 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.

Knowledge Base

User Tools

Site Tools

Differences

Page Tools