Solved

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

Posted on 2011-09-04
9
306 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
  • 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now