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 detail page.
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 this Tutorial:
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 benefit.
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 detail page.
For this tutorial we need:
- PWS - Personal Web Server (The Connection is DSN based)
- UDev4 offcourse
- A Database program - I used Access97, but any program will do.
First things 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 tutorial.
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:
Adding links, 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.