Microsoft & .NETVisual BasicUsing VB to Build Your Web Site

Using VB to Build Your Web Site content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

These days everybody is making a web site. Almost every business
that has at least one computer in their office now has their own web site, and is paying
for someone to update it etc. Whether you are building corporate sites or a personal site,
you will, at some point want to change the design.

For instance, take this site. When I first designed it back in
August ’98, I knew virtually nothing about Visual Basic programming although I did know a
fair bit about HTML and web design. At that time I redesigned the site twice because I
couldn’t get a domain name (the first attempt was for a domain name).  Anyway, after
about 3/4 months of the site being up, I decided to redesign it again. This was manual
work, and with (at the time) about 160 tips to transfer it took ages. Copy/paste the basic
page design and then paste in the code; format it; and save it. What a job.

I then redesigned the site again, but this time, to save me
copying and pasting the basic design, I made a basic program that did this for me. I
called it ‘PageGen’. Although this program is now in Version 4, it still works on the same
principle. I type in the title of the page, select whether it will be in the root
directory, a sub directory or a sub sub directory, select a place to output it to and
press OK. The program took a header (from a text box), added the title tag and the body
tag, and finished of the HTML of the page. Easy.

Then (not again!) I redesigned the site (don’t worry, this time
it’s the current design!). This time I decided to use include files (.inc) to contain the
header and footer HTML. The header contains the links down the left and right hand side,
the big VB Square image and the link underneath that.

What is now PageGen 4 worked by almost the same mechanism. Inserts
the basic HTML frame with the navbar, subnavbar or memnavbar for the appropriate
directory. Anyway, I’m sure you’re getting bored of all this old news. Lets build

Well, first of all I will take you through building your own
PageGen application. It’s quite simple. You first need to identify different areas in your
HTML page that you might want to change. Here is an example:

<meta name="Keywords" content="Visual Basic">
<title>Test Page</title>
<body background=".,.images/mypic.gif">
<p>Some Text Here</p>

If this was my HTML page, then I would identify 3 sections. The
first would be from the opening <html> tag to the closing </head> tag. This
would be my header. The body section would be my content, and the
</body></html> section would be my footer. Of course my content would probably
be split up into more sections, but I am sure you can identify these yourselves.

Now that you have these sections, you need to identify where
different bits of HTML will depend on which directory the page is in. E.g. If a page is in
the root dir, it will need a different reference to an image location then a page in a sub

I will use the demo page (above) and base the PageGen program
around that. The first place where something will differ from page to page is the
<title> tag. So, I will copy from the first <html> tag to the end of the meta
tag and paste this in a text box called txtHeader. That is the only large amount of text
that I will be using at one time, so I don’t need to copy and more.

OK. Lets put down some code. Open up VB and make a new Standard
EXE Project. Add three text boxes (txtHeader, txtTitle and txtReturn), a command button
(cmdMake) and a combo box (cboDir). Make sure that txtHeader’s and txtReturn’s MultiLine
property is set to True and that you paste in the header text talked about above into
txtHeader with another line at the top (<!–Start Header–>). Also put a space and
then press Ctrl+Enter in the text property of txtReturn as Chr(13) does not act as a very
good carriage return character. Add a common dialog control to the form (comDlg). Copy and
paste this code into the cmdMake_Click procedure:

Private Sub cmdMake_Click()
  Dim strBuffer As String
  Dim strPath As String
  Dim intFile As String

  '// Build the HTML file
  strBuffer = txtHeader & txtReturn
  strBuffer = strBuffer & "<title>" _
    & txtTitle & "</title>" & txtReturn
  strBuffer = strBuffer & "</head>" & _
    txtReturn  strBuffer = strBuffer & _
    "<!--End Header-->" _
    & txtReturn
  strBuffer = strBuffer & "<!--Start Content-->" _
    & txtReturn
  strBuffer = strBuffer & bgImage(cboDir.Text)
  strBuffer = strBuffer & "<!--End Content-->" _
    & txtReturn
  strBuffer = strBuffer & "<!--Start Footer-->" _
    & txtReturn
  strBuffer = strBuffer & "</body>" & txtReturn
  strBuffer = strBuffer & "</html>" & txtReturn
  strBuffer = strBuffer & "<!--End Footer-->"

  '// Set up the common dialog
  intFile = FreeFile
  comDlg.Action = 2
  strPath = comDlg.filename
  If strPath = "" Then Exit Sub

  '// Open/Create the HTML file and write to it
  Open strPath For Append As #intFile
  Write #intFile, strBuffer
  Close #intFile

End Sub

We now need to build the bgImage function found in the above code.
This function takes one parameter, strDir, which is the directory (root sub etc) from
which to create to file to. It looks like this:

Private Function bgImage(strDir As String) As String
  Select Case strDir

    Case "Root Dir"
      bgImage = "<body background=" & Chr(34) & _
        "image/back.gif" & Chr(34) & ">"

    Case "Sub Dir"
      bgImage = "<body background=" & Chr(34) & _
        "../images/back.gif" & Chr(34) & ">"

    Case Else
      bgImage = ""
  End Select

End Function

That’s basically all the code you need. Just add this little bit
to the form’s Load procedure:

Private Sub Form_Load()
With cboDir
  .AddItem "Root Dir"
  .AddItem "Sub Dir"
End With
End Sub

That’s it! You have now created your own version of PageGen. See
the source code download below if you get stuck.

NOTE: Please don’t remove the <!–Text–> tags from the
program, they will be needed in a future part of this series.

Well, thanks for reading. Hopefully now you will be able to adapt
the basic program above and make building your web site easier! Just add more directories
to the combo box and the select case statement, and check for other variables within your
HTML page. Have fun!

If you need to post any comments about this article then please
send them to me at

P.S. If you are having problems with the code download the source code.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories