Organize multiple websites on Macbook - macos

Question

What steps are needed to complete adding another website to OS X (Lion) ?
I want to have the 2 websites organized in 2 folders under 'Sites', but not sure how to get there. As can be seen in the image below, the MB currently has the 'default' (first) website spread out in Sites. I am concerned that putting this default site into a folder of Sites, call it 'siteA' will cause it to disappear.
These sites are not hosted on this MB. (OK, well they are, ...) It is being used for the development, viewing and testing within BBEdit.
After the steps below, the URL http://bella, replies Forbidden - You don't have permission to access / on this server. (??)
Suggestions welcomed. Thanks in advance.
So far, I've added or amended:
-- private/etc/hosts (added the following)
127.0.0.1 bella
-- private/etc/apache2/http.conf (uncommented 2nd line)
# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf
-- /private/etc/apache2/extra/httpd-vhosts.conf (added 2 VirtualHost blocks)
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
DocumentRoot "/Library/WebServer/Documents"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Users/dolan2go/Sites/Bella"
ServerName bella
</VirtualHost>
The directory structure of my Macbook currently looks like:

Answer 1

Have to make a few modifications to get this to work. With the desire to have folders 'FirstSite' & 'Bella' in the 'Sites' folder. (My User directory structure has been altered because of a HD & SSD hardware mod)
Amend the hosts.conf file to: (last 2 lines - see note below)
127.0.0.1 bella.local
127.0.0.1 firstSite.local
Uncomment the line to use the vhosts.conf file (as in original question)
Amend the httpd-vhosts.conf to:
# Localhost first
<VirtualHost *:80>
DocumentRoot "/Volumes/HDD 1/<username>/Sites"
ServerName localhost
</VirtualHost>
# local test Sites
<VirtualHost *:80>
DocumentRoot "/Volumes/HDD 1/<username>/Sites/FirstSite"
ServerName firstSite.local
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Volumes/HDD 1/<username>/Sites/Bella"
ServerName bella.local
</VirtualHost>
# Allow from localhost only or other directives
<Directory "/Volumes/HDD 1/<username>/Sites/FirstSite">
Order Deny,Allow
Allow from 127.0.0.1
Deny from all
</Directory>
<Directory "/Volumes/HDD 1/<username>/Sites/Bella">
Order Deny,Allow
Allow from 127.0.0.1
Deny from all
</Directory>
Now I can access the local version of both sites with http://bella.local & http://firstSite.local (I decided to add the local to help distinguish between the local and remote versions.)
A reply by twtwtw 3/4 down the page at Local Web Server for Lion really helped clear the issue.