It is a couple of years since I designed an internet site . and have discovered We have forgotten a whole lot. I am carrying out one now for the friend and desire to use a additional interesting font for any name of your page. Schwarzwald. Is it acceptible to try a graphic of the particular heading done throughout Schwarzwald and put on the page for image
Many thanks
Welcome for the forums!
Also may MY PARTNER AND I add that you’ve posed a fascinating question, one that’s changed the best way I look at typography over the internet today.
You will discover two main methods to doing what you happen to be asking, and nevertheless remaining standards/accessibility compliant!
The first is called FIR, Graphic Rreplacement. It alternatives a graphic using text. Read about how precisely to do that here.
Cost-free way is IFR (funny more than enough, the two techniques share the identical letters, but are not related in the way they fuction. It’s the brainchild of Shaun Inman as well as Mike Davidson. You can figure out how to do it these.
Right now, IFR is a number of CRAZY stuff that helps you use any font (yes, ANY FONT) and still have it displayed anti-aliased within perfect graphical mode on anyone’s laptop or computer that supports Thumb 5 and previously mentioned (I think we’re approximately 95% support pertaining to Flash 5). And lastly, if they don’t possess it, or lack javascript, regular text of one’s choice is shown. The best part about this is that it truly is fully dynamic. You type in HTMl, out will come Anti-aliased custom font statements. There are a number of limitations, however many were solved with WAC-FR (search intended for this) but it’s just a lot harder for you to implement.
So excellent luck! I hope this assists you to with your query.
Brak
Thanks for reply plus your welcome to this page. The second FIR may be a bit technical for me but I can understand the 1st one. What is the difference between doing it that way(CSS) as well as the way I possess inadvertently done the item: I created the heading in Corel by using Schwarzwald and employed a graduated colouring pens, then saved this to be a transparent GIF that we then inserted against the page just as one image. It checks available in Firefox (my browser) as well as IE. Is it only finding out about because I possess Schwarzwald on this computer Or will probably it display on anyone’s computer as a possible image Thanks
The problem really only comes as a result of writing semantic HTML CODE.
Say someone is browsing your site w/ images/styles off of saving bandwidth (unlikely), or say that will someone is browsing your site with a filter reader.
By using my method, the graphical headline is seen (or spoken) while regular text. A similar applies to search engines like yahoo – it spiders it as text, not as the image. Using an image is fine, but semantically this doesn’t happen make sense. The image is not a graphic in any respect, but rather text – and needs to be treated as consequently.
Brak : thanks, yes, I can see the reason behind it now. Will present a go.
Brak
I never gone on much beyond HTML CODE so spent the afternoon coming to grips with CSS. I see ideal is to make use of an External Style Sheet for many pages. So much, I want the identical background color as well as my graphic (text) going on each site.
So to set up a style linen, and save it to be a. css file, I would have: –
body background-color: #FBDBC4
h1
Am completely stumped in respect of how to make my heading (if that is the attribute I need to be using) which is often a. gif. I are interested at the top centre from the page.
I understand once I include set this upward I add this to each website within the < head> section with all the < link> tag.
That address of this graphic is N: \Documents\webfileswildflowerdesigns\title. gif and also the actual text is usually Wildflower Designs.
Hope We have made myself clear. Thanks
Acceptable, here’s how the idea goes.
Within your html, have:
< h1> Wildflower Designs< /h1>
Now within your CSS have:
h1 text-indent: -9999px; border: 0; padding: 0; size: imagewidthpx; height: imageheightpx; background: url(url to image here) no-repeat;
Swap out the thing in brackets and you ought to be good to move!
Brak – I hardly understand where I work with each bit.
Wherever you say " Within my html" : where does in which bit go, in the external style sheet
Moreover, where does that CSS go – is niagra in the Alternative Style Sheet also If that’s the case, where exactly
Sorry that they are so dense. Many thanks for such fast replies.
Basicly you split the 2 main different languages a part, you keep your entire CSS contained from the external style published and only html inside the web page once more.
< html> < head> < title> Wildflower Designs< /title> < design type=" text/css" title=" default" media=" all" > scan " yourstylesheet. css"; < /style> < /head> ... < body> < h1> Wildflower Designs< /h1> < p> Page text goes these. < /p> < /body> < /html>
Once you’ve changed the yourstylesheet name and so the page links to your style sheet may well display your image title followed by the ‘Page text goes here’ underneath as one example.
Trico
Elements are slowly getting clearer. So CSS is almost an advance about page layout and so forth, not a replacement HTML. So what you’ve got illustrated is this particular web page I believe. So what must put in the particular style sheet if it’s not at all too much problem Thanks
Make reference to the last post made by Brak about in respect of what you place inside style sheet. I would upload an case in point but this forum doesn’t manage to allow. css accessories.
Your own right CSS, isn’t able to doing away using html completely, but it may be used to style/position/structure the grotesque design that pure code outputs. In quick, it’s very helpful. If you’d like ideas on CSS then you can do a search…
searchwebAdvantages connected with CSS/searchweb
Trico (and Brak)
Thanks quite definitely. Will now see what I’ll do. Will post back la