Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Web Design Fundamentals is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing.
Previously we discussed organizing your site through information architecture. In this movie I want to focus on the physical organization of your site and discuss several techniques for keeping your site clutter free and easy to navigate. No matter how large a site you're working with, at the end of the day it's really nothing more than a collection of files and folders. Just like any project you work on, if the files aren't organized properly your site will quickly become a mess that makes your life harder and can confuse most visitors to your site, to say nothing of your site's lack of search engines support.
Before we get to a few ideas on how to best organize your site let's take a minute to review hosting servers and how sites are organized on them. Depending upon what type of server you're working on, your website will be located in either a folder called public_HTML or named www. And often these are the same directories and uploading files to either one will usually do the trick. On some servers, you might be part of a shared server and have a dedicated directory that has your name or the name of your site. Either way this folder is often referred to as the root directory, and it will contain your entire site.
When developing locally, you need to create a root directory on your network or personal computer. For the most part your local directory structure should mirror the remote directory. Changes made locally or remotely are typically synchronized so that both locations have the most current version of the site. This directory is where your default page will be located. The default page, named either index or the default depending on which type of server you're using, is the page will be served to any visitor to your site that doesn't request a specific page.
Often this page is referred to as the home page, and it's almost always found within the root directory. From there, site structures are often broken into tiers. Any page located directly in the root folder is said to be a Tier 1 page. These are often the most important or top-level pages and are frequently given more weight by search engines. Subdirectories can add additional structure to your site, and are usually used when a specific subject or areas of focus have multiple pages. If your site offers multiple products, you might not only have a product subdirectory, but also a subdirectory for each product type.
Keep in mind that this adds to a site's complexity and should be decided upon as part of the organizational process. In fact most directory structures are planned very early in the site's design process. It's a good practice to review the site structure throughout the site's development to make sure it still enhances the overall organization and clarity of the site. Regardless of the number of directories and files in your site, they should all follow standard naming conventions. Keep all filenames lowercase, as some servers are case sensitive.
Really anything that's used as a resource by your website. Organizing those files is crucial to the success of your site. In most cases these assets organized in their own directories based on file type. Take a look at this directory, for example. This is a mess. Images and CSS files are right on the root directory, making it hard to find anything. Let's add some asset directories and tidy the place up. There, that's better. Now I typically add an underscore to the names of these directories. This causes them to be listed at the top of the directory list and makes them easier to find and update.
Now another site organization technique that I recommend is to create an assets directory in your local site. Here you can store all of your larger original file files, such as Word documents, Photoshop files, Flash files or other source documents used to create assets for your site. I'll usually place subdirectories in this file to make sure that my source Photoshop, Flash, Illustrator, Word and other files are easier to find and update. This folder is also easy to cloak and remove from the FTP uploading process.
Unless you're working in a collaborative environment there is little to gain from uploading these very large files to your remote server. For those of you out there that are thinking well, what about uploading them so have a backup. Well, you really should be backing up your site to multiple locations and having a local backup is a must. Finally, be very very careful when moving or deleting files and directories. This can cause broken links or orphan files within your site. Working with tools like Dreamweaver can prevent such problems.
Dreamweaver offers site management capabilities that will warn you when such a move will have detrimental effects and even offer to update links or pages throughout your site when making such changes. An organized, well-planned side will be easy to update and maintain, make linking to pages within your site easier, and assist with your page rankings in search engines. It's also another aspect of your site that you should keep a close eye on. As sites grow, the organization often suffers. Make sure that as your site changes you're taking time to review the site structure and changing the organization of the site when necessary.
There are currently no FAQs about Web Design Fundamentals (2010).
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.