Creating your first website – Part 1: Set up your site and project files
What do I need?
This tutorial requires no previous knowledge of Dreamweaver. However, familiarity with web design concepts such as HTML and CSS will be helpful. The tutorials in this series are designed to be completed in order. In order to make the most of this article, you need the following software and files:
This tutorial series shows you how to build a simple website in Dreamweaver CC, guiding you through the process of defining the site, building the structure with HTML (Hypertext Markup Language), adding text and images, and styling the pages with CSS (Cascading Style Sheets). You don’t need any previous experience of Dreamweaver. Nor do you need to know HTML and CSS, although basic understanding of both technologies will be an asset. To keep the tutorial series to a reasonable length, you’ll build only two web pages; but once you have done so, you should have sufficient knowledge to create more pages on your own.
The most common approach to creating a website with Dreamweaver is to create and edit pages on your local computer, and then upload copies of those pages to a remote web server for viewing on the web. In this first part, you'll set up only the local site so you can begin building web pages right away. In the final part, you'll learn how to upload your files to a web server.
In this first part of the series, you will complete the following tasks:
- Learn about Dreamweaver sites
- Set up your project files
- Define a local folder
Note: This tutorial series uses Dreamweaver CC, which manages CSS in a fundamentally different way from previous versions. Although older versions of Dreamweaver are capable of building the same website, it is recommended that you use Dreamweaver CC for this tutorial. If you don’t have a subscription to the Creative Cloud, you can use the 30-day free trial.
Learn about Dreamweaver sites
In Dreamweaver, a site organizes on your local computer all the documents associated with your website and lets you track and maintain links, manage files, share files, and transfer your site files to a web server. A typical Dreamweaver site has at least two parts:
- Local Folder: This is your working directory—usually a folder on your hard drive. Dreamweaver refers to this folder as your local site root.
- Remote Folder: This is where you store your files on the computer that's running your web server. The web server is often (but not always) the computer that makes your site publicly available on the web.
In some circumstances, you might have more than one remote folder. For example, if you work in a team environment, all members of the team might upload their files to a common testing server before they are deployed on the live website. Also, it's normal to set up a testing server when developing websites that use a server-side technology, such as PHP. You can define multiple remote and testing servers for each site. However, only one of each can be selected within Dreamweaver at any given time.
All you need to start working is to give your site a name, and tell Dreamweaver where you want to store the files on your local computer. Dreamweaver CC automatically prompts you for further information about the site setup only when it's needed.
Set up your project files
When you create a local site, you can place any existing assets (images or other pieces of content) in the local site's root folder (the main folder for the site). That way when you add content to your pages, the assets are there and ready for you to use.
The download files contain assets for the sample website you'll build in this tutorial series. The first step is to copy these assets to an appropriate folder on your hard drive:
- Decide where you want to store your website files on your hard drive. The folder can be anywhere on your computer, but the less buried it is the easier it is to find later. For example:
- Mac OS X—Your home folder already includes a folder called Sites.
- Download and unzip the first_website_pt1.zip sample files from the link at the top of this page if you haven't done so already.
- Open the first_website_pt1 folder. It contains two folders (bayside_beat and content) and an image (see Figure 1).
Figure 1. Inside the main folder are two other folders and an image.
- Copy the bayside_beat folder into the Sites folder.
The bayside_beat folder is the folder you will use as the root folder (main folder) for your Dreamweaver site. The content folder contains two rich text format (.rtf) files with text content for the web pages you'll build in this tutorial. The bayside_beat_comp.jpg image shows the design for the main page of the website (see Figure 2).
Figure 2. This is what the website will look like at the end of the tutorial series.
Note: The local root folder of your Dreamweaver site is normally the main or top-level folder for your website. It usually corresponds to a folder called public_html, www, or wwwroot on your remote server.
Define the local site folder for the Bayside Beat site
You must define a Dreamweaver local site folder for each new website you create. Dreamweaver needs to know where your site files are to create all the internal links correctly, and to update them when you move files to a different location within your site.
Next, set up the site for this tutorial series, and define as your local site folder the bayside_beat folder you copied into your Sites folder:
- Start Dreamweaver and select Site > New Site. The Site Setup dialog box appears.
- In the Site Name text box, enter "Bayside Beat" as the name of the site. The name is used internally by Dreamweaver to identify the site. It doesn't matter if it contains spaces.
- Click the folder icon next to the Local Site Folder text box to browse to and select the bayside_beat folder.
The Site Setup dialog box should now look like Figure 3.
Figure 3. Defining the local site folder for the Bayside Beat site.
Note: The file path for Local Site Folder might differ, depending on where you copied the bayside_beat folder on your hard drive.
- Click Save. That's it!
The Files panel in Dreamweaver now shows the new local root folder for your current site (see Figure 4). The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a desktop.
Figure 4. List of files in the Files panel.
You've now defined a local site folder for the Bayside Beat site. This is where you keep the working copies of web pages on your local computer. Later, if you want to publish your pages and make them publicly available, you'll need to define a remote folder—a place on a remote computer, running a web server that will hold published copies of your local files. You'll learn how to do that in part 6 of this tutorial series.
Best practices for naming files and folders in a website
- File and folder names in websites should never contain spaces or any of the following characters: /\?%*:|"<>.
- Although other special characters are permitted, it's generally a good idea to confine yourself to alphanumeric characters, hyphens, and underscores.
- Most file and folder names end up as part of a web page's URL, so keep them short, but meaningful. Long URLs are difficult for users to remember and type into browsers on a mobile device.
- The vast majority of websites are hosted on Linux servers, which are case-sensitive. Using all lowercase letters for file and folder names avoids problems with files not being found.
Where to go from here
Now that you have finished defining your site, you can begin building your web pages by following part 2 in this series, Creating the page structure.