Web design

Mike Murphy · 09-07-2008, 12:42 AM

Ok, maybe I'm daft or maybe it's just late and I need o go to bed, but who can tell me how to place text on top of graphics in Frontpage?

Do our web designers here just do the text in Photoshop and paste it in?

I'm no HTML guy and am more a WYSIWYG kind of dude. Is there a better web design software out there for me?

Thanks
Mike

jcoolbaugh · 09-07-2008, 01:00 AM

Mike -

Type and format your text, then select your graphic and click on the "Position Absolutely" button in your picture toolbar. Place the graphic over the text, then click on the "Send Backward" button. Then all you need to do is position it where you need it behind the text.

HTH

Jessalynn

Michael Mayhew · 09-07-2008, 09:52 AM

To edit the graphic itself here's 2 great free graphics programs.

Paint.net
Redirecting ...
&
gimp shop
Announcing GIMPshop | Plastic Bugs

Either work great. I like Gimp Shop.

Stephen Saha · 09-07-2008, 11:08 AM

I always prefer using Tables for an image Text combination.
Place the image as the table/cell background and type the Text on it.
You can format the text as you wish.

I have found better result with it in all browsers.

Stephen

Mike Murphy · 09-08-2008, 11:04 PM

When I go to place text on the picture, it says "the image will be converted to gif...." which reduced the quality and makes it looks pixelated and nasty....

Stephen Saha · 09-09-2008, 12:16 AM

Hi Mike,

Are you getting this message in 'Frontpage' ??

Stephen

jjpmarketing · 09-09-2008, 12:35 AM

Put the image as the background in a cell in a table. Then put the text wherever you want within the cell. You shouldn't have to worry about a pixelated image then.

BIG Mike · 09-09-2008, 02:01 AM

Use CSS to do it - it's fast, clean and less hassle. Something like this:

Code:

 
<table>
  <tr>
    <td style="background-image: url(image.jpg); background-repeat: no-repeat; height: 100px; width: 600px;">
        Your Text Goes Here
    </td>
  </tr>
</table>

Set the width and height of the cell to match the image size. Use the backgroundrepeat attribute to allow smaller images to repeat horizontally or vertically if needed.

Here's the same thing in a <div> (poreferable):

Code:

 
    <div style="background-image: url(image.jpg); background-repeat: no-repeat; height: 100px; width: 600px;">
        Your Text Goes Here
    </div>

09-07-2008, 12:42 AM	#1
Mike Murphy Advanced Warrior War Room Member Join Date: Nov 2007 Location: Ontario, Canada. Posts: 615 Thanks: 68 Thanked 60 Times in 44 Posts Social Networking	Web design - Words on Graphics Ok, maybe I'm daft or maybe it's just late and I need o go to bed, but who can tell me how to place text on top of graphics in Frontpage? Do our web designers here just do the text in Photoshop and paste it in? I'm no HTML guy and am more a WYSIWYG kind of dude. Is there a better web design software out there for me? Thanks Mike
	Guitar Video PLR - Your Guitar Site is DEAD Without Video! 5 LIES that Will Stop You From Ever Making Money Online - Click Here to Learn Them Now

09-07-2008, 01:00 AM	#2
jcoolbaugh Marketing Mum War Room Member Join Date: Mar 2007 Location: Somewhere In-Between Manic Mondays Posts: 253 Thanks: 176 Thanked 34 Times in 22 Posts Social Networking Contact Info	Re: Web design - Words on Graphics Mike - Type and format your text, then select your graphic and click on the "Position Absolutely" button in your picture toolbar. Place the graphic over the text, then click on the "Send Backward" button. Then all you need to do is position it where you need it behind the text. HTH Jessalynn
	~Jes Coolbaugh Video Marketing Power Holiday Offer Only $10! Includes Video Landing Page Templates! veni, addidicī, vici.

09-07-2008, 09:52 AM	#3
Michael Mayhew Senior Warrior Member War Room Member Join Date: Aug 2002 Location: Nashville, TN , USA. Posts: 3,121 Thanks: 38 Thanked 107 Times in 75 Posts Social Networking	Re: Web design - Words on Graphics To edit the graphic itself here's 2 great free graphics programs. Paint.net Redirecting ... & gimp shop Announcing GIMPshop \| Plastic Bugs Either work great. I like Gimp Shop.
	I'll Train You In the Lucrative Final Expense Insurance Business. Top Contracts Available Nationwide! http://imopartnership.com

09-07-2008, 11:08 AM	#4
Stephen Saha Senior Warrior Member War Room Member Join Date: Mar 2006 Location: City of Joy! Posts: 1,023 Thanks: 7 Thanked 4 Times in 4 Posts Contact Info	Re: Web design - Words on Graphics I always prefer using Tables for an image Text combination. Place the image as the table/cell background and type the Text on it. You can format the text as you wish. I have found better result with it in all browsers. Stephen
	http://eCoverExpert.com - Get 50% Discount on Minisite order. Limited time offer. http://design4banners.com/free_banners.html - Grab your pack of Free Banners Now! Follow me on Twitter (o)>

09-08-2008, 11:04 PM	#5
Mike Murphy Advanced Warrior War Room Member Join Date: Nov 2007 Location: Ontario, Canada. Posts: 615 Thanks: 68 Thanked 60 Times in 44 Posts Social Networking	Re: Web design - Words on Graphics When I go to place text on the picture, it says "the image will be converted to gif...." which reduced the quality and makes it looks pixelated and nasty....
	Guitar Video PLR - Your Guitar Site is DEAD Without Video! 5 LIES that Will Stop You From Ever Making Money Online - Click Here to Learn Them Now

09-09-2008, 12:16 AM	#6
Stephen Saha Senior Warrior Member War Room Member Join Date: Mar 2006 Location: City of Joy! Posts: 1,023 Thanks: 7 Thanked 4 Times in 4 Posts Contact Info	Re: Web design - Words on Graphics Hi Mike, Are you getting this message in 'Frontpage' ?? Stephen
	http://eCoverExpert.com - Get 50% Discount on Minisite order. Limited time offer. http://design4banners.com/free_banners.html - Grab your pack of Free Banners Now! Follow me on Twitter (o)>

09-09-2008, 12:35 AM	#7
jjpmarketing Senior Warrior Member War Room Member Join Date: Sep 2007 Location: Louisville, KY Posts: 1,131 Thanks: 41 Thanked 90 Times in 71 Posts	Re: Web design - Words on Graphics Put the image as the background in a cell in a table. Then put the text wherever you want within the cell. You shouldn't have to worry about a pixelated image then.
	JJP Internet Marketing

09-09-2008, 02:01 AM	#8
BIG Mike Drunken Greek War Room Member Join Date: Dec 2004 Posts: 9,630 Blog Entries: 1 Thanks: 1,847 Thanked 3,671 Times in 1,070 Posts	Re: Web design - Words on Graphics Use CSS to do it - it's fast, clean and less hassle. Something like this: Code: <table> <tr> <td style="background-image: url(image.jpg); background-repeat: no-repeat; height: 100px; width: 600px;"> Your Text Goes Here </td> </tr> </table> Set the width and height of the cell to match the image size. Use the backgroundrepeat attribute to allow smaller images to repeat horizontally or vertically if needed. Here's the same thing in a <div> (poreferable): Code: <div style="background-image: url(image.jpg); background-repeat: no-repeat; height: 100px; width: 600px;"> Your Text Goes Here </div>
	Last edited by BIG Mike; 09-09-2008 at 02:02 AM. Reason: Brain Fart (Wet one)