Creating a Website in Dreamweaver
Creating a new Web site in Dreamweaver is something new and a little foreign to those of us
who have never used a WYSIWYG before. However, you must take care to do the steps in
order and following all rules, or Dreamweaver will not be as helpful as it can be. All of the
steps I will be giving you below are in your text book as well, but I will put them all here and
you will have them in one area to refer to when you are creating a NEW Web site.
Site Definition Our site definitions in Dreamweaver are used to HELP us with file and folder
structure, uploading files to our live hosting site, creating a site map, etc. You can most
definitely use Dreamweaver without having a site definition, but you will be taking much more
time than needed AND you will not truly be learning Dreamweaver, because the Site Definition
is indeed one of the most powerful aspects of the software. Please read through the notes
provided with the steps below. The notes are very important.
1. Creation of the Root Folder=Local Site Folder (Textbook page 1-22 and 1-23)
This root folder location should always be the same, so be careful with flash drives that may
load as E: one time and F: the next. If you are going to move the location of your Root
folder, you will have to redo/verify all of the steps in this document. Note that you do not
have to have an HTML document open at the time. You must think of the site definition as
being a separate component from what is going on in the Dreamweaver workspace…not an
easy concept…but they are separate! Below, I am creating a New Root Folder on my Local
Disk C: in the StarkStateCollege folder. I have right-clicked on that location in the Files Panel
and will select “New Folder”. pp 1-22, 1-23
I now have a “Striped_Umbrella” folder showing in
my Files Panel in Dreamweaver. This one is on the
Local Disk inside the StarkStateCollege folder. You
can put your root folder anywhere, as long as the
position does not change, or you will need to
update your Site Definition right away. Please
NOTE: NEVER, NEVER, NEVER use Windows
Explorer to move, copy, add files in
Dreamweaver!! DW wants to know “ALL” and if
you make changes in Windows Explorer, DW does
not know about it and will not be able to update
the site layout/file structure within the software.
2. Creation of the Site Definition in Dreamweaver (Textbook page 1-24)
You can do this by
1. Using the “Site” menu option, then New Site
2. Click “Manage Sites” then “NEW” button
3. Dreamweaver Site from the opening window
For this screen, you need to enter:
a. Site Name: This can be “Anything”
b. Attach the Root Folder=Local Site Folder - you will need to browse to the folder
that you created in Step 1.
3. Enter Remote information in Dreamweaver (Textbook page 1-24)
Click on “Servers” on the menu. The following screen appears:
Note that this information is only needed if you are going to upload to a live site….which
you will be doing in this class.
Click the + to add a new server and enter your server information:
The screen above appears. The video in your Dreamweaver Week One Materials folder
uses a free hosting site that you can sign up for online. You also have 25MB of space on the
Web server at school. I am going to list both options below, with screenshots and
information to help you set up the remote information in Dreamweaver.
OPTION 1: Using Stark State’s Web server.
We all have some space on the server at the college. The hostname does not use ‘words’,
however, and looks a little funny. It is the actual IP address. Last year, this hostname was
206.244.75.249 and I am trying to verify that it has not changed, but the helpdesk is not
available over the holiday, so I will get back to you on this one. Your username and
password are the same username and password that you use to login to the classroom
computers. Ex: rtoomey0422, ret.’first 6 of ssn’. You MUST use SFTP here!
Once logged in, you will have a public_html folder. You should put all files in this folder or
subfolders of this folder. The URL to your site will be in the form of:
http://206.244.75.249/~username The tilde (~) is important. The setup in Dreamweaver
should look something like this:
**note, I could not verify this today with holiday. It did not work for me, but it may just be that the server is down. I will verify
tomorrow and update if needed
CLICK SAVE!
OPTION 2: Using the server from a free hosting site (from video in Materials Folder)
I used X10hosting.com to sign up for a free hosting
site:
PANEL A
Once signed up, you will get a confirmation email and will have to follow the link to confirm
your email address. THEN, your hosting site setup will be entered into a queue and will take
an hour or two to complete.
Hey there!
x10Hosting client accounts need a confirmed email address in order to use our services.
Your email address can be confirmed quickly and easily by using the following URL:
http://x10hosting.com/control?account&contact&c=e547ce4a2c650
Confirm by logging in, and then your site creation will take a little while. Check back in an hour
or two.
Once your site has been set up, you can log in to X10 hosting and get your account
information. With the examples above, my setup in Dreamweaver looks like this:
Username from Panel A above.
Password from Panel A above.
Must put /public_html/ here!
Must put ftp here, then your site that you picked from Panel A above.
Notes:
a. You do NOT have to go to the CPanel and create a new FTP account. X10 creates the
default one for you, using your username and password that you used to create the free
hosting site when you first logged into X10hosting.com.
b. You do NOT use a third party ftp client like Filezilla, CoreFTP, or Cyberduck. Our third
party FTP client IS Dreamweaver!!
c. Once they say that your hosting site is created, simply fill out the panel in Dreamweaver
as I did above, using the information you typed into Panel A above.
CLICK SAVE!!
4. Create Assets Folder in Dreamweaver (Textbook page 1-28 and 1-29)
This folder is used by Dreamweaver to put your default images into. Right-click on the
(Striped_Umbrella) root folder in the Files panel in Dreamweaver, select New Folder and name
it Assets. Again: It is important that you do not do this in Windows Explorer, as Dreamweaver
will not know about its creation! Your Assets folder must be contained within the root folder.
Follow the directions here and in your book on 1-28 and 1-29.
You must then Edit your site definition by selecting “Manage Sites” from the drop down
menu in the Files Panel. Then, highlight the site name and select Edit.
Select “Advanced Settings”, and “Local Info” to get to the screen below:
Then, browse for your Assets folder that you just created in the Files Panel by
clicking on the folder icon to the right of “Default Images Folder”.
Click SAVE!
5. Create HomePage in Dreamweaver (Textbook page 1-30)
You will then create the homepage and additional pages to your Web site. Your homepage
MUST be named index.html. You cannot name it anything else, because the first page that will
open in your hosting domain is index.html, so you have to overwrite it with yours!!
6. Adding Images in Dreamweaver (Textbook page 1-31)
When selecting an image to use on your pages, do not put them in the Assets folder directly –
select them from their current position and allow Dreamweaver to do the work. If you run
through the Striped Umbrella example in your chapters and follow the directions, these will be
the steps you use when applying to your own Web site projects. Do not veer from the steps.
Do the work in the chapters and you will have minimal questions when applying it to your own
labs.
IMPORTANT!!
The site definition is NOT a part of your Dreamweaver files or your Web site project. It is
saved in the registry on your computer. Therefore, if you are working on more than one
computer, it will ONLY be on the computer that you were using at the time of setup. To copy
it to another computer, you need to export and import it. You can read about this in
Chapter 7 of your book, Lesson 5. Always make sure you have the updated site definition
when working on your Web site!
IMPORTANT!!
To be sure that your browser updates and refreshes every time you make a change, you will
want to check your browser settings. Without setting it to refresh each time, you may not see
updates that were actually made. Here is an example of the settings panel from IE: