Solved

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

Posted on 2011-09-04
9
310 Views
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.
affiliate-promo-page-testing.html
0
Comment
Question by:photoman11
[X]
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
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 36483329
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
 

Author Comment

by:photoman11
ID: 36485947
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
 
LVL 52

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 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:photoman11
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;
}
</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
 
LVL 52

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.
0
 

Author Comment

by:photoman11
ID: 36492883
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 36493154
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
 

Author Comment

by:photoman11
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.
0
 
LVL 52

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.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

740 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