- Home
- World Wide Web
- Introducing HTML
- Introducing CSS
- Dreamweaver Interface
- Putting it all together!
- Design Principles
- Accessibility
- Useful Links
- Glossary
If you see this symbol in the text it is a Link to Glossary with more detailed information
Website Folder Structure
In this section I want to emphasise the importance of good website folder structure. This could be relevant however you construct your website and is about being tidy and methodical in all your web practices.
When I set up a site for the first time my first job is to design how the pages are going to look then I usually construct the front page. This page should always be called index.htm or index.html. This is because when a user puts in a web address they will probably just type:
Example - if they were looking for the Child Okeford site, www.child-okeford.org.uk by default the server knows to look for the Index page, the home page or front page of the website. The index page is always put in the root of the website folder which is straight inside your website folder, see the diagram below.
After you have defined your site in Dreamweaver you will have a folder that all your website files will be stored. I cannot emphasise enough, it is very important to keep all your files you want on the web in this folder. When you put the whole folder on the Remote server, for example if you have an image in My Documents on your computer, linked to your website it will not show on the Internet when someone views your site.
After I have sorted the index page and the template page I then set up folders inside the website folder. You can do this easily in Dreamweaver by right clicking the website folder and selecting New Folder and the naming it what you want. You can always rename folder and files at any time by right clicking the item and selecting Edit > Rename.
My basic website folder would contain at least the following folders:
- images - containing all your photos logos etc.
- styles - containing your style sheet/s
- pages - containing all your html pages
- template - containing any templates
- documents - containing any documents other than html pages such as Adobe Acrobat files, Word Files etc.
Making folders
In the next Activity we will make some folders in a site
Activity 21
This is a simple exercise for you to practice making folders in Dreamweaver.
In Activity 20 you set up the site Test site make sure the site is selected by going to Site > Manage sites and selecting the Test website from the list (there is probably only this one) click done and your website and folders will appear in the Files panel at the right of the Document window.
Right click on the images folder and select New folder a New folder is made in the images folder and it is ready for you to name it! Call it logos. You can rename or delete folders and files through this method as well. Right click the item and select Edit and there are a number of tasks you can do from this list.
Try making some more folders.
There could be many more than these and the folders themselves could be split into sub-folders, for example the image folder could have your logos and page structure images folder, different folders for school trips and so on. When you come to do some housekeeping it should be much easier to find and remove old pictures.
You can move folders and files around in Dreamweaver and indeed if you need to do it ALWAYS do it within Dreamweaver. Dreamweaver updates any links like navigation you have on the pages and if you do it outside of Dreamweaver your site structure will break down.
In the next Activity we will move some files and folders around in a site
Moving files and folders
Activity 22
You may have noticed there are a couple of files and a document in this website already. But I have put them in the wrong place!
I want the page_2.htm page in the pages folder and the pdf_docs folder with the accessibility.pdf document in the documents folder.
First we will move the pdf_docs folder. Click on the pdf_docs folder and while holding the mouse button down drag it to the documents folder and release the mouse. it will open a Update files dialogue box asking if you would like to update the links Select Update so now any links to this document in your site will have been updated.
page_2.htm should be in the pages folder. Move it in the same way as you moved the folder and make sure you update your links when prompted.
Open the index.htm page and check out your links and your document.
