GIMP & Website

FMI

Hi,

Looking for advice here spent past 2 days looking at tutorials reading up on HTML and CSS etc.

I have developed an image i.e. background image of which looks good i.e. template for website. But i think i've missed the whole point.

I have on my left Home, Services, Contact and FAQ on the left as stated above these are part of the overall background.

How can i make these links? i.e. part of the picture become a link?
DO i have to go back to basic and remove this part of the picture i.e. Home, Services etc and then use HTML CSS adding the text Home, Services etc? or can i put in for example transaprtent text in the area HOME(background image) so when mouse hovers over this area its clickable?

Do you understand what i mean i dont really wnat to change backround image as its exactly how i want my page to look, i thought it could be done but i think im after mixing the two thinsg up?

Any advice cheers.

FMI

P.s. have Komposer as well

Kersmash

I think what you're talking about is image mapping. I'm pretty certain this is possible with gimp, but I don't actually use gimp so I'm not entirely sure. I did a quick google and found this tutorial which may help, if I''ve understood your question correctly.

http://www.createblog.com/all-other-tutorials/14042-image-mapping-in-gimp-2.6/

From what I understand, you have a background image on your webpage which has a menu on the left of it, which you want to make clickable. fair enough you want to do it that way, I'd find it easier to do the nav bar in html and css but to each their own I guess.

FMI

Hi Kersmash,

Been thinking what you've said as i made my whole website template as an image casue visually it loooks good (my opinion :-)), this will obviously cause problems with my site appearing on search engines as all my text is an image?

So mayby its best just to leave colours and desgins as background image and insert links and text through HTML/CSS on top of my background. That way i will appear in seach engines? I need to read up on this bit as well.

There is so much information out there which is great but if a newbie like me it can send you slightly down the wrong road.

Is this the best way? i.e insert all text in site by HTML and CSS so it increases chances of moving up search engine?

Thanks again and for tutorial.

FMI

louie

creating an image template is the easy part.
Now you have to slice that image into small parts and implement it into your HTML using CSS.
After creating a template, I never use more than 25% of it for creating the REAL layout in HTML. They are all made out of bits N pieces put together.

Liam Byrne

FMI wrote: »

Been thinking what you've said as i made my whole website template as an image casue visually it loooks good (my opinion :-)), this will obviously cause problems with my site appearing on search engines as all my text is an image?

No question about it. Having all "text" as an image is a non-runner (apart from maybe some leeway in headers, but even then you're affecting your SEO).

FMI wrote: »

So mayby its best just to leave colours and desgins as background image and insert links and text through HTML/CSS on top of my background.

You're missing a lot of the capabilities of design by trying this. Each element on a page is "layered"; e.g. the background for the PAGE is behind the DIV elements within the page, the DIV elements are behind the headers & paragraphs, etc......and the background for each of those elements is behind its content.....so you can put background images behind different elements and then have their content within those, achieving a very nice design (and one that, if implemented properly, can allow "boxed" areas to expand to the length of variable content).

FMI wrote: »

Is this the best way? i.e insert all text in site by HTML and CSS so it increases chances of moving up search engine?

Absolutely no question about it. That and the correct page headers, h1 elements, descriptions as well as alt/title tags for images.

You just need to look into how best to style and combine all of those.

And experiment or take cues from wherever you can, and don't beat yourself up for getting it wrong (I think we've all fallen off bikes and stalled cars while learning)......despite what many people want to believe, you cannot learn good web design within a few days........truly understanding everything that's possible, best-practice, and works in real life takes years.

Best of luck, and enjoy the discovery!

FMI

Hi Guys,

Thanks for tips above im trying the Html and CSS route and Liam as you mentioned its not something you can learn overnight.

My biggest struggle at the moment is the i have 5 different areas on my webpage where i want different text/ different positioning font size etc.

The positioning bit is a nightmare as cant get it to work. I could get it to work under one <div> with positioning from top to bottom but this would mean having to use space bar an line breaks going down the page which im sure would not be very stable for website?

Can you recommend how i can have 5 different blocks of text with its own properties i.e. colour/Font/Positioning on webpage etc.

For example below is the start containing x2 of the 5 bits of text

html>
<head>
<title>New Webpage
</title>
</head>
<body background="New Webpage.png" ;
background-position: 50% 50%;
background-repeat: no-repeat;}>
<div style="position:absolute;top:300px;left:424px;color:Black>

xxxxx xxxxx xxxxxxx?<br><br>
xxxxxx xxxxxx xxxxxxx?<br><br>
xxxxxx xxxxxxx xxxxxxxxx?<br><br><br>

xxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxx<br>
xxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxx<br>
xxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxx <br>
xxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxx<br>
xxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxx<br>
hxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxx.<br><br>


xxxxxxxxxxx xxxxxxxxxxxxxx <br>
xxxxxxxxxxx xxxxxxxxxxxxxx <br>
xxxxxxxxxxx xxxxxxxxxxxxxx <br>
xxxxxxxxxxx xxxxxxxxxxxxxx <br><br>
<div/>
<div style="position:absolute;top:300px;left:224px;color:Black>
Pricing<div/>
<div style="position:absolute;top:300px;left:260px;color:blue><div/>

</body></html>

Liam Byrne

Where possible, you should avoid absolute positioning, and yes, you should avoid using surplus <br> tags to "push" content around.

What you're attempting might be possible by adding paragraphs - using the <p> tag, which you haven't used on your example page at all - and setting the margins of those paragraphs, either as a group or individually.

It's not the best practice, though, as if you make a paragraph longer it might wrap and push the remaining content down, making future edits a LOT more hassle than they should be.

Are you trying to force the content to fit a specific graphic that wasn't designed with content & font sizes and spacing in mind ?

FMI

Hi Guys,

Thanks for everything being trying to do this all day and it was a stupid " that i did not add in which has been changing structure every time i copied and pasted a bit of Css text which appeared to work.

Lesson learnt dont copy and paste and assume its correct feel like and idiot, just can believe i've wasted about 6 hours working on this watching tutorial after tutorial and something so simple......

Happy and relived,

FMI

daymobrew

I think that you are looking to do something similar to a PSD to HTML tutorial.
I found a page that describes How to Slice an Image in The Gimp.

There is also a GIMP plugin that might help.

FMI

Hi Guys,

I got it in the end my problem was when assiging the Fixeded postion for text when i had copied and pasted id left out the " in each of the lines and therfore fromat did not work text just alligned to the left.

SO when i figured that bit out i.e. add in the " all worked well, there i was thinking i was great and did a brilliant job and thne stupid IE wanted to start playing games with my head after working 3 full days on creating my site and studying youtube using Mozilla.

Thankfully the solution was not to use position:fixed and use absolute instead so all worked ok. i didnt go for the slicing images managed to create background as big image so covers full screen with limit to scrolling so all looks ok.

Now to do page 2-5 hopefully will have website done by the weekend considering template is sorted.

Thanks again for all help and support.

FMI