• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 324
  • Last Modified:

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

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.
affiliate-promo-page-testing.html
0
photoman11
Asked:
photoman11
  • 5
  • 4
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
w3schools is a good start http://w3schools.com/html

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 http://www.gimp.org to manipulate your images and Amaya to help make your web page http://www.w3.org/Amaya/
0
 
photoman11Author Commented:
Padas,

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:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

???????????????????????
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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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 http://www.gimp.org/tutorials/Lite_Quickies.

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

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

Open in new window

0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
photoman11Author Commented:
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;
}
</style>

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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
These things tend to look like they should be easier then they really are.   Can you post a link to your page.
0
 
photoman11Author Commented:
Absolutely.

The URL is: http://www.photoebooks4u.com/Miscellaneous/affiliatepage.htm

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.
logo-site2.jpg
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
First thing you will want to do is go to http://validator.w3.org 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.
0
 
photoman11Author Commented:
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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now