Dreamweaver Site Definition Project
Part One: Naming Conventions in a Web Design Context
The goal of Part One is to learn the correct method of naming files and folders in a web design context. The method described in the linked podcast will be used for the rest of this course. Mastering the simple principles presented and employing them correctly will insure that your website will never fail because of improperly named files and folders.
- To begin this lesson, download and listen to the naming_conventions_podcast.
- As you proceed with Part Two of this tutorial, remember that you must use only the four acceptable elements when naming your files and folders, as outlined in the podcast.
| The Four Acceptable Elements in Web Design |
| lowercase letters |
| numbers |
| underscores |
| the period, or dot |
Part Two: Creating a New Root Folder in Windows Explorer
The goal of Part Two is to correctly create the necessary files and folders for your new website. This is a preliminary step before creating your Site Definitions in our web design application, Adobe Dreamweaver.
- Right click your start button, and choose Explore
- Navigate to your network folder
- Right click inside your network folder, and choose New<Folder
- Name this new folder lastname_firstname_personal_website
| Key Concept: The folder you just created is the Root Folder of your new website. A Root Folder in web design is the folder that contains every element of your site- sub folders, html files, image files, audio files, and so forth. In order for your new website to work correctly, everything you use on the site must be properly saved and stored in this Root Folder. Also, you must be careful to make sure that everything you save in your Root Folder is named according to the The Four Acceptable Elements in Web Design you learned about in Part One of this lesson. Remember, most of the time you have to rename files before you save them in your Root Folder in order to achieve the end result of having short, logical names that adhere to The Four Acceptable Elements in Web Design. |
- Double click your new Root Folder to open it.
- Right click inside your Root Folder, and choose New<Folder
- Name this new folder images
| Key Concept: We create sub folders such as this new image folder so that we can employ that old axiom, "A place for everything, and everything in its place." Since websites invariably contain images, it is customary to create this folder as a container for the images that we are sure to add as we begin developing our web pages. |
- Right click inside your Root Folder, and choose New<Text Document
- Name this new text document index.html
- You will get a warning message as soon as you hit enter. As always, read the warning message carefully, but click Yes anyway. In this instance, the warning does not apply.
| Key Concept: The file name index.html has a special meaning in web design. It is synonymous with your home page. Web browsers are designed to open this page first when the end user visits a new site. As long as you always name your home page index.html visitors to your site will always see your homepage first, and this is exactly what you want. If you name your homepage anything other than index.html there is no way of predicting what page the end user will see first. This is exactly what you don't want. |
- Congratulations. You have now created a Root Folder, a folder for your images, and an index.html page (also known as a home page). You are now ready to configure your Dreamweaver Site Definition.
Part Three: Creating a New Site Definition in Adobe Dreamweaver
The goal of Part Three is to create a Site Definition for your new web site in Adobe Dreamweaver. A site definition is a collection of settings that we enter into Dreamweaver in order to allow the application to monitor and coordinate all aspects of our website's file structure. This includes such tasks as re-linking webpages automatically and checking for Web Browser compatibility. Creating a Site Definition in Dreamweaver is the first step towards building your new web site.
- Open Adobe Dreamweaver
- At the Welcome screen, choose New>Site
- The Site Definition dialog box will open. Click on the Advanced Tab.
- Leave the Category set to Local Info
- In box next to Site Name, enter the name of your website as follows:
- lastname_firstname_personal_web_site
- Next to Local root folder, click the small folder icon
- Navigate to your network folder.
- Double-click your Root Folder. It's the one you named lastname_firstname_personal_website in Part Two.
- Confirm that the folder named lastname_firstname_personal_website appears at the top of the dialog box next to Select:
- Click the Select button.
- Next to Default images folder, click the small folder icon.
- Double Click your root folder (lastname_firstname_personal_website).
- Double Click your images folder
- Confirm that the folder named images appears at the top of the dialog box next to Select:
- Click the Select button
- In the Site Definition dialog box, click Okay
- Dreamweaver will then create your new site definition.
- You're done!
If you have done everything correctly, you will see your Root Folder (lastname_firstname_personal_website) on the right hand side of the screen under Files. You will also see your images folder as well as your index.html page. As long as these elements are visible, you will receive full credit for your work. If there is any deviation at all- for example, using uppercase letters or spaces in your file or folder names, or saving your work someplace other than your network folder- credit will be deducted. Small details make a big difference in web page design, and you want to have all of your small details in place right from the start as you create your first website.
You now have a solid foundation upon which to begin building your new website. As long as you continue in this manner, carefully naming and organizing your files and folders, your website will be well organized and easy to work with. Collaborating with other web designers (including your teacher!) will be much easier because you have named your files and folders according to the accepted methods that are at the heart of successful websites.
Congratulations on creating your first Dreamweaver Site Definition!
Discussion Forum:
After completing this tutorial, please visit our Goggle Group Discussion Forum and respond to the questions posted there.
To learn more...
Click here to access an excellent video tutorial that describes the process of building a site definition in Dreamweaver. |
