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.
Using VB to build your web site
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 something.
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:
<html> <head> <meta name="Keywords" content="Visual Basic"> <title>Test Page</title> </head> <body background=".,.images/mypic.gif"> <p>Some Text Here</p> </body> </html>
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 dir.
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 email@example.com
P.S. If you are having problems with the code download the source code.