A beginner tutorial describing from beginning to end how to set up a three page website with a dynamic contact list combined with a detail page, the finished project is included for study.
This tutorial covers: Defining the site, building a page and copying it, setting up a quick Database, creating the connection, using the dynamic data and creating a detail page in full detail, no live objects here.
This tutorial is compatible with Dreamweaver MX, in MX the databindings panel is upgraded to what is now the Application panel.
Building a basic
site with Contact page
Hello and welcome
to this tutorial.
This tutorial will explain how to build a fully functional website consisting
of a Home page, an About page, a Dynamic contact list page with a dynamic contact
What I will NOT explain in this tutorial is how to install UDev and neither
will I explain how to achieve the same end-result of this tutorial using LIVE-objects,
you can read the supplied manual (help pages) to learn about the various LIVE
objects, I will talk you through it step by step
The 4 parts of
1: Basic site building
Here I will explain how to define our new site and we will build the 3 base
pages for our site, actually we will build 1 page and modify 2 copies for our
2: Database setup
Here we will setup the database with info and I will roughly guide you how to
set up a DSN (Data Source Name) so that we can communicate with our Database.
3: Using Dynamic data
This is where we setup our actual contact list page and I will try to explain
the standard behaviors we will use, what they do and how it is done. I will
also explain how to create a Dynamic email link with a much nicer text then
just the emailadress.
4: Building a detail page
Will teach you how to manually set up a detail page for our visitors wanting
more information then the information displayed in the main list, it also involves
setting up more fields in our database and I will try to explain in as much
detail as possible how the passing of parameters works and how it effects our
For this tutorial
- PWS - Personal
Web Server (The Connection is DSN based)
- UDev4 offcourse
- A Database program
- I used Access97, but any program will do.
1: Basic site building.
first, we have to define our new site:
Start up UDev and
in the site window goto menu Site -> New site.
Then in the window
that pop ups, define new site window give it a better name then I did and set
it's local folder, then press on application server, forget the remote info,
we are going to use asp, we don't need that option. (My local folder is: C:\Webpages\TutorContact\
As you can see,
this tutorial will be ASP based and my first site ever in VBScript (not that
it matters at this point, the behaviors manage all scripts for us).
I set the local
network because i'm using PWS, the remote folder where the pages end up on the
server,and last BUT not least I prefer to use localhost while building my sites,
sometimes the URL gives me headaches when my homeip.net name is having it's
problems again, so localhost works fine.
NOTE: make sure to create the remote folder before setting the URL prefix,
you might press ok accidently and then you'll be in trouble, hehe not really,
but always go from top to bottom, there's one exception but that's in another
Making the needed
folders and first page:
So, now we have our site, add some folders by rightclicking in the local folder
in the site window, I named one "images" and the other "data",
i wonder what they're for...
Ok, if you have that standard untitled document open, then save it naming it
index.htm or something similar. If you closed it, or turned that preference
setting off then rightclick in the local folder to make a new file and name
it index.htm. Double click to open it.
Cool, we have a
page, now go to insert -> Table menu at the top, and give it 3 rows,
5 cellpad 3 collumns a width of 100% border = 0 and click okie dokie !
Wow, this is just to ensure we are compatible with all screen sizes, I won't
go into GFX this time, so optionally insert a logo image thingy at the top if
you want and some other neat looking graphics or follow my example and use text
all the way.
But first we're going to click in one of the outer columns, i always do the
left first, after clicking in a cell move the cursor up to the top of the column
and when it changes to a downpointing arrow click the left mousebutton to select
all three cells, go to properties and set the Width value to 15%, do the same
for the other outer column and you have something that resembles this:
copying our page and giving it some content:
Wow, what we have
here is some amazing site design, let's liven it up a little...
Click in the top center cell and add a name for our site, optionally you can
place a image / logo. Now we're getting somewhere. Click in the middle left
cell and click the bullet list button in the properties panel, it is underneath
the big B for bold text, type the words:
Now i can hear
you thinking, what are those for ? it's a secret...
Time to save all
this, do a CTRL + S, got it saved ? then go to file menu Save as...
Save one copy that's called About.htm and another but this one has the .asp
extension, like so: Contact.asp, on the contact.asp page, click in the word
home and click on the <li> tag (not the <lu>) at the bottem
of the document window, go to your properties panel and click the folder, make
it link to index.htm, do the same for about but link it to about.htm, we don't
make the contact a link on this page...
Press the X to
close the window and tell it YES, we want to save our changes, then open about.htm
and transform the home and contact words to links, press X and YES i want to
save, and open index.htm make the about and contact into links like before and
click in the main window, the center cell. Type alittle text, again you can
think something up or follow my example:
As you can see
i added a small email link so people can get in touch if there's questions,
we do that like this: we select the text or image that we want to send a command
to outlook or netscape if our visitors click on it and we type the following
into the Link field in the properties panel: mailto:firstname.lastname@example.org
we can add a subject title by extending the command to mailto:email@example.com?subject=Contact_page.
That is the email link i added, it opens a new message with subject contact_page,
i added the underscore cause most browsers and UDev hates spaces, but
more on that in a little while. Our homepage is complete !
Next is the about
page, open up about.htm and add some text like in the index.htm page, make it
some info about the functions and future of this page, it is all up to YOU what
you put there. Here is my about page:
As you can see
i added a little footer to remind our employees of the company motto.