By Ryan S.
In my first lesson, I mentioned that I would show how to add designs to the messages. However, after I realized that the tutorial was too long, I decided to put it in another message. Please note, this message deals with theory, not actual in practice genuine 100% working code. You might have to do some tweaking to get the effect you want.
First, you must decide how you will want to put the message. Do you want it to have 1 Image as a background, and all the different cards fit in the certain specifications, or do you want to have a way for it to be randomly defined, or in the least, dived into multiple sections with multiple images?
I'm opting for the multiple image option. If you have already completed Lesson 1, and have the database with the table SentMessages, or Messages, or whatever you called it, open it in design mode. This time, add a field called "THEME", with a text datatype. I chose text because it makes it easier to populate a drop down list box. Next, onto the code.
I want the layout to be divided in a table. I want a top corner, top center, top right corner, middle collums left and right of the actual message area, and then a bottom area mimicing the top area. For the design to work with the graphics, you have to set the maximum amount of text you want to receive. I'll let you pick the number, and you will just need to remember this for the message composing section (I've already discussed the new inbox, the view message, and will be doing composing in my next lesson)
Here is how the general design will look:
For each of these cells, there will be an image background. This image
will correspond with a directory namaed the same as a the theme, and then
the jpegs will be named after the image cell. For example:
But before you can do that, you have to read the message out of the database. This builds on the viewmessage.asp code. Just insert this instead of the from/subject and all that. I hope that made sense.
Here is how some rough HTML for the table would be
<table width=500 heigh=500 cellspacing=0 border=0 cellpadding=0>
<tr width=500 height=75>
<td width=75 background="/<%=rsTemp("Theme")%>/1.JPG"> </td>
<td width=350 bakcground="/<%=rsTemp("Theme")%>/8.JPG"><font
<td width=75 background="/<%=rsTemp("Theme")%>/2.JPG"> </td>
<tr width=500 height=350>
<td width=75 background="/<%rsTemp("Theme")%>/3.JPG"> </td>
<td width=350 background="/<%rsTemp("Theme")%>/9.JPG">
<textarea (then set your attributes relative to your
<tr width=500 height=75>
<td width=350 background="/<%=rsTemp("Theme")%>/8.JPG">
<h3>From: <%=rsTemp("From")%></h3> <--- actually, replace
the FROM with the crosslinking code I discussed in the second tutorial.
As you can see, this is very elaborate yet very simple. Anybody who knows tables knows that I did the cellpadding/cellspacing/border attributes to make sure that there are no gaps between the cells. That way, the image looks like it "flows" into the other cells. Each cell has a background attribute, that goes with its appropriate area. The subject is displayed in area 7, who it is from in area 8, and the message in area 9. While I realize this may not produce pretty tables, tables really aren't my forté. This is just rough, straigh up code that I cobbled in order to show you that doing designs is not hard at all. I had all the width/heights defined absolutely because of the message. If you want to get rid of the postcard look, try creating a continous image. I recommend something along the likes of 100 pixels high, and 1000 pixels wide. The 1000 pixels wide is to keep it looking good for people who view it on 1024x768 (like me) or the 1280x1024 resolution. When you count in the scroll bar, the table layout, and all that, it becomes simple. If you made that one image, you would just do something like this
<td>(put all the message code here </td>
Very simple code.
In the next lesson, I will show you the inbox mechanism. The one that shows all the messages. It will be short and sweet, and easy to understand, if you have read lesson 1. Adieu!
Happy Coding and God Bless from Ryan S.