Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-09-04
9
Medium Priority
?
313 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 53

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 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 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
Fill in the form and get your FREE NFR key NOW!

Veeam® is happy to provide a FREE NFR server license to certified engineers, trainers, and bloggers.  It allows for the non‑production use of Veeam Agent for Microsoft Windows. This license is valid for five workstations and two servers.

 

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

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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 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.
0

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

705 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