How to why create the structure for a webpage, which I already have the content for?

Posted on 2011-09-04
Last Modified: 2012-05-12
I have recently been approved by ClickBank to have my products picked up by affiliates. I'm putting together some resources which affiliates can use to promote the products, and I'm using a free software package called Affiliate Promo Page Generator to help create the code for doing this.

Unfortunately, although the software does what it says, it does not produce any page structure or format, into which I can put the code. I'm finishing up a header and footer for the page, but do not know enough about programming to figure out how to:

- Create a background/wallpaper for the page
- Create a watermark of either text or a graphic image for the wallpaper only
- Create a page content background
- Create a visible rectangle around the page to separate it from the wallpaper background

The HTML page I attached is a test page which comprises enough information to hopefully get the point across for what content there will be. But my lack of programming knowledge or web design knowledge is preventing me from putting it into any kind of professional looking webpage.

If anyone knows of another free or low-cost software app that will create the "complete page," I would love to hear what it is.

If there is no such animal, can you either provide basic code with instructions in the comments tags or point me towards a webpage that goes over that type of thing?

Thank you very much.
Question by:photoman11
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 36483329
w3schools is a good start

Your background info can be done like the examples on css.  Any time you have an image as a background it will repeat from left to right, top to bottom.  

Getting a watermark on the image can be done many ways but it may be easier to just place it on the image.  

You can use gimp to manipulate your images and Amaya to help make your web page

Author Comment

ID: 36485947

I think you give me too much credit!

I have been playing around with the answer for the last hour and a half and still cannot find answers to the following basic questions:

If I have the guts of content for page,

1) where exactly in the code do I place as, an example:


In addition, the specific image which should be used as the background (in the example above, it is "paper.GIF") - are there size requirements for it? And, where do I place the image relative to the HTML document?

Thank you to a novice venturing out into quicksand.
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 36486038
The css can be either an external style sheet or you can embed it in the page inside the head section between the tags <style> and </style>.  It does not matter where in the head section.  I have a sample below.

If you are going to have a folder images named "images" then the url for the background image would be images/paper.gif.  What you have in your example would require the paper.gif to be in the top level with  your pages. If you want the background to repeat throughout the entire body you would just choose repeat.  The repeat-y you have set will make the image repeat only vertically along the left edge.

As far as size, you want it small as possible.  The resolution should be 72dpi

<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	background-image: url(images/paper.gif);
	background-repeat: repeat;

<h1>This is the title</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>

Open in new window

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.


Author Comment

ID: 36486570
I do thank you for your help.

Unfortunately, because of the lack of my coding background, especially CSS, what I thought I knew and could apply is not working in this case. My understanding was that if I had the page where the guts of the page was already completed, and a header was completed, all I would need to do in order to have a background image repeat as wallpaper would be to:

Insert the following code:

<style type="text/css">
body {
      background-image: url(images/teddy_bear.gif);
      background-repeat: repeat;

Somewhere between the Head tags. this assumes of course that I have the image "teddy_bear.GIF" in the images folder which is associated with the page.

Assuming that what I described above is not correct, what am I missing?

Thank you.
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 36486679
These things tend to look like they should be easier then they really are.   Can you post a link to your page.

Author Comment

ID: 36492883

The URL is:

Although it is not the header I would use, let me attach a header to this post and if you wind up doing anything with it I could always substitute the real header for it, after it's designed.

Thank you very much for your help.
LVL 53

Accepted Solution

Scott Fell,  EE MVE earned 500 total points
ID: 36493154
First thing you will want to do is go to and enter in your url and check out the issues that is shows. It will take a little time but will  help you learn what to do.  

As far as your header image where you have <span class="style16">New page title</span> you can replace that with <img src="images/logo-site2.jpg">  (or whatever you end up naming your image).   That will get you a start.

Author Comment

ID: 36507571
I can see that the page is a mess. Unfortunately, there are so many errors on so many pages that it would literally be prohibitive to attempt to fix everything. I realize that is not the purest's answer but it is my reality.

Thank you for your help.
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 36532970
That's the problem with these things. It almost looks like that sample was created a long time ago too.  You would be better off starting fresh with your own page on  your own site.   Good Luck.

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
asp Google Map 2 92
Intranet Site for Medical Practice 7 64
CSS - Centering an image 2 48
HTML CSS and  Table design 4 70
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question