Schriftarten auf html-seiten?

[Scarab]

gibts eine möglichkeit schriftarten auf HPs zu verwenden die nicht auf jedem rechner vorhanden sind? kann man die irgendwo so hochladen das sie von Browsern verwendet werden können? oder gibts irgend ne andere möglichkeit?

[Tayce]

Hmm ich ich denke mit Flash sollte das funktionieren.
Aber wie weiß ich leider auch nicht

[eleanora]

Hallo Scarab

vielleicht hilft dir da dieser Link weiter SelfHTML Downloadbare Schriftarten (http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=Schriftarten)

[Hans]

Ich bin kein Freund davon, dass man feste Schriftarten vorgibt. Standard sind nun mal die Schriftartenfamilien. Wenn es eben geht, dann vermeide ich die Zuweisung von festen Schriftarten, so wie wir das in Wörd un Äxel gewohnt sind.

Bleibt die Frage, ob das mit dem Lösungsvorschlag von Ele so klappt, wie man sich das Vorstellt. Wie sieht da das Ladeverhalten bei Modemusern aus? Hat da jemand Erfahrungen gesammelt?

[Scarab]

Ich bin kein Freund davon, dass man feste Schriftarten vorgibt. Standard sind nun mal die Schriftartenfamilien. Wenn es eben geht, dann vermeide ich die Zuweisung von festen Schriftarten, so wie wir das in Wörd un Äxel gewohnt sind.

Bleibt die Frage, ob das mit dem Lösungsvorschlag von Ele so klappt, wie man sich das Vorstellt. Wie sieht da das Ladeverhalten bei Modemusern aus? Hat da jemand Erfahrungen gesammelt?

mein größter font den ich gefunden hab war 200kb also geht das ja grad noch so, aber kompatibilität passt mir nich so.

werds erstma mit standart fonts machen und dann mal sehen. das was ich mit anderen fonts machen will werd ich als bild abspeichern.

[Hans]

werds erstma mit standart fonts machen und dann mal sehen. das was ich mit anderen fonts machen will werd ich als bild abspeichern.Ich finde, das ist eine gute Entscheidung und absolut für jedes System verträglich, ausgenommen textbasierte Browser wie Lynx.

[Ravetracer]

Hallo Scarab

vielleicht hilft dir da dieser Link weiter SelfHTML Downloadbare Schriftarten (http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=Schriftarten)

Das ist aber als depreceated eingestuft und man bräuchte dann ein spezielles Schriftformat.
Aber gute Entscheidung mit den Standards.

[nepda]

hmmm wenns dir nicht zu viel ausmacht könntest du ein bildchen mit PHP schreiben ;) hab ich in meiner Signatur.... das ist eine *.TTF Schriftart die mittels PHP in ein Bild geschrieben werden kann der Script dazu liegt hier im Forum schon rum ;) (http://www.gimpforum.de/showthread.php?t=6194)

EDIT: ich bin Modem User (noch, bis zum 2.1.2007 dann gibts DSL) und das Bild ist in null,nix da.

[eleanora]

Stimmt, ich find die Lösung die Standards zu verwenden auch besser. Aber es hat doch seine Frage beantwortet und ich hätte nicht so gut erklären können, warum er das besser nicht machen sollte wie der Artikel zu dem ich verlinkt habe Oder?

[Scarab]

Stimmt, ich find die Lösung die Standards zu verwenden auch besser. Aber es hat doch seine Frage beantwortet und ich hätte nicht so gut erklären können, warum er das besser nicht machen sollte wie der Artikel zu dem ich verlinkt habe Oder?
is doch gut das du mir das gesagt hast.
jetzt weiß ich wie kompliziert das ist und kann mich nach anderen möglichkeiten umkuken.

hmmm wenns dir nicht zu viel ausmacht könntest du ein bildchen mit PHP schreiben ;) hab ich in meiner Signatur.... das ist eine *.TTF Schriftart die mittels PHP in ein Bild geschrieben werden kann der Script dazu liegt hier im Forum schon rum ;) (http://www.gimpforum.de/showthread.php?t=6194)

EDIT: ich bin Modem User (noch, bis zum 2.1.2007 dann gibts DSL) und das Bild ist in null,nix da.

das klingt eigentlich ganz gut. allerdings hab jetzt ein anderes mehr oder wenig großes problem. also:

5824

ich will von dem fenster wie das "what is FLAC" mehrere untereinander machen. es ist aber ein bischen zu umständlich jedes mal mit gimp den inhalt rein zu schreiben und dabei die fenster neu zu machen. die größe des innenraums ändert sich ja auch und somit auch die größe und position der fenster. jemand ideen?

[nepda]

kennst du CSS? wenn ja dann machs doch einfach mit einem Layer um die Text-Bilder... das würde sich alles automatisieren lasse ;)

EDIT: Weitere Fragen... weitere Antworten ;)

[Scarab]

kennst du CSS? wenn ja dann machs doch einfach mit einem Layer um die Text-Bilder... das würde sich alles automatisieren lasse ;)

EDIT: Weitere Fragen... weitere Antworten ;)

css hab ich schon mal gehört, was für programme benötigt man?

ich hab mir schon gedacht ich mach den kopf des fenstern in gimp und den rest mit html-tabellen und wenn ich in die tabellen was rein schreibe verscheibts den rest ja nach unten und dann passt das aber dann stimmt das streifen muster im hintergrund nich mehr.

[Ravetracer]

css hab ich schon mal gehört, was für programme benötigt man?

Einfacher Texteditor!


ich hab mir schon gedacht ich mach den kopf des fenstern in gimp und den rest mit html-tabellen und wenn ich in die tabellen was rein schreibe verscheibts den rest ja nach unten und dann passt das aber dann stimmt das streifen muster im hintergrund nich mehr.

Wenn du CSS benutzt, solltest du die Geschichte mit den Tabellen vergessen.
Schau dir mal SelfHTML genau an.

[Hans]

z.B. Notepad.exe. CSS Dateien sind reine textdateien. Unter Linux nehme ich für die komplette HP programmierung Quanta. Ist ziemlich ausgereift und hat z. B. automatische code ergänzung. Wenn man nicht so tief im Stoff ist, hilft das ungemein.

Unter Windows wird's sicherlich auch was geben. Keine Ahnug, ob Free- oder Payware. Nicht mein OS.

[Ravetracer]

Unter Windows wird's sicherlich auch was geben. Keine Ahnug, ob Free- oder Payware. Nicht mein OS.

Für Windows empfehle ich PS-Pad.
Hat auch Hilighting für verschiedene Scriptsprachen usw. Nettes Ding.

http://www.pspad.com/de/

Ich sag' da immer, das "Quanta" für Windows zu ;)

[Renderer]

Top Style lite (http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle&ProdView=lite) ist ein Freeware CSS Editor mit Codeergänzung. Für die HTML-Editoren Web-Craft (http://www.pr0g.net/) und Phase5 (http://www.qhaut.de/forums/index.php?act=home) gibt es ein Plugin, das sie mit TopStyle verbindet. Man kann also aus den Editoren heraus TopSytle aufrufen, die CSS Datei schreiben oder verändern und dann im Editor übernehmen.
Hier (http://cssed.sourceforge.net/) gibt es noch einen OSS CSS-Editor der auch nicht schlecht ist. Und dann gibt es noch SimpleCSS (http://www.hostm.com/css/). Auch nicht schlecht, wie ich finde.
PS-Pad hatte ich mir auch schon angeschaut, aber der hat leider keine Codeergänzung/vervollständigung.

[Scarab]

bei SelfHTML steht ja ganzschön viel zu CSS damit das "projekt" aber auch mal fertig wird mach ich es ERSTMAL so dass ich den hintergrund gimpe und dann ne tabelle drunter krache. dann kann ich mit Strg+C das ganzen inhalt rein krachen und hab erstmal ne ordentliche version online.


ein problem gibts da aber noch das aber warscheinlich ziemlich einfach zu lösen ist, aber um diese uhrzeit krig ichs einfach nich hin:

5852

:oops::oops: wie krig ich den tabellenrand überall 2px breit und in richtigem weiß? :oops::oops:

Quelltext:

<html><head><meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>r5urt</title></head><body
style="background-image: url(file:///C:/Dokumente%20und%20Einstellungen/LF-Scarab.SCARAB/Eigene%20Dateien/Eigene%20Bilder/flachp2a.png);"><table
style="text-align: left; background-color: transparent; width: 886px; height: 219px;"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td
style="height: 127px; width: 244px;"></td><td></td></tr><tr><td></td><td><table
style="text-align: left; width: 622px; height: 179px;"
border="3" cellpadding="0" cellspacing="5"><tbody><tr><td
style="vertical-align: top; height: 99%; width: 622px;"><span
style="font-weight: bold;"></span><span
style="color: rgb(255, 255, 255); font-family: Arial; font-weight: bold;">FLAC
stands for Free Lossless Audio Codec, an audio format similar to
MP3, but lossless, meaning that audio is compressed in FLAC without any
loss in quality. This is similar to how Zip works, except with FLAC you
will get much better compression because it is designed specifically
for audio, and you can play back compressed FLAC files in your favorite
player (or your car or home stereo, see </span><a
style="font-family: Arial; font-weight: bold; color: rgb(0, 255, 0);"
href="http://flac.sourceforge.net/links.html#hardware">supported
devices</a><span
style="color: rgb(255, 255, 255); font-family: Arial; font-weight: bold;">)
just like you would an MP3 file.</span><br
style="color: rgb(255, 255, 255); font-family: Arial; font-weight: bold;">
<br
style="color: rgb(255, 255, 255); font-family: Arial; font-weight: bold;"><span
style="color: rgb(255, 255, 255); font-family: Arial; font-weight: bold;">
See </span><a
style="font-family: Arial; font-weight: bold; color: rgb(0, 255, 0);"
href="http://flac.sourceforge.net/features.html">About FLAC</a><span
style="color: rgb(255, 255, 255); font-family: Arial; font-weight: bold;">
for more, or </span><a
style="font-family: Arial; font-weight: bold; color: rgb(0, 255, 0);"
href="http://flac.sourceforge.net/documentation_tasks.html">Using
FLAC</a><span
style="color: rgb(255, 255, 255); font-family: Arial;"><span
style="font-weight: bold;"> for how to play FLAC files, rip
CDs to FLAC, etc.</span><span
style="color: rgb(255, 255, 255);"><font size="+1"></font>
</span></span></td></tr></tbody></table></td></tr></tbody></table>&nbsp;

[Hans]

Ich sag' da immer, das "Quanta" für Windows zu ;).....und warum in aller Welt nimmst du nicht gleich Quanta? Schau mal hier: http://www.TheKompany.com. Aber: Es war schon immer etwas teurer einen besonderen Geschmack zu haben.

[nepda]

wie krig ich den tabellenrand überall 2px breit und in richtigem weiß?
tja CSS lässt grüßen ;) damit kannst du sowas wunderbar formatieren:


/* ANFANG CSS-Datei */
.zweiPixelRand{
border: 2px white;
}
/* ENDE CSS-Datei */
/* ANFANG HTML-Datei */
<table class="zweiPixelRand" *etc.........*>

....usw.
/* ENDE HTML-Datei */

[Ravetracer]

.....und warum in aller Welt nimmst du nicht gleich Quanta? Schau mal hier: http://www.TheKompany.com. Aber: Es war schon immer etwas teurer einen besonderen Geschmack zu haben.

Hans, ich bin doch Linuxer ;). PSPad war ja eben 'ne Empfehlung für WinUser.
Unter Linux nehme ich ja auch immer Quanta oder KDevelop.
Aber eben kleinere Scripte, die ich für die Firma mal unter Win schreiben muss, mache
ich mit PSPad. Wir sehen nämlich zu, immer kostenlose Software zu nutzen.

[Hans]

Ich bin doch LinuxerHuch, jetzt fühlt er sich beleidigt :mrgreen:

Ich wollte ja auch nur sagen, Quanta gibt es auch für dieses etwas andere OS.

[Scarab]

tja CSS lässt grüßen ;) damit kannst du sowas wunderbar formatieren:


wenn das so wunderbar einfach geht das schreib die paar buchstaben doch in meinen quelltext rein.
wär echt nett weil langsam verlier ich die lust die ganzen seiten bei selfHTML zu lesen.

[nepda]

buuuuhuhuuuu, diser Quelltext ist echt furchtbar! der ist bestimmt aus einem "Baukasten-Programm".... also wenn du einen Moment Zeit hast sortier ich dir den Text und bau das dir.... also einen Moment bitte ;)


EDIT: ich muss jetzt noch was essen aber danach mach ich weiter....

[Hans]

/OT

aaahhh, freut mich, jemand der noch Wert auf lesbaren Code legt und nicht darauf wie man den am schnellsten mir der Maus zusammenknüppelt.

OT/

[nepda]

...aaahhh, freut mich, jemand der noch Wert auf lesbaren Code legt.....
ganz genau !! danke :p

Also ich bin fertig:
hier die CSS-Datei (sollte später im gleichem Verzeichniss wie die HTML-Datei liegen!!!):
body{
background-image: url(file:///C:/Dokumente%20und%20Einstellungen/LF-Scarab.SCARAB/Eigene%20Dateien/Eigene%20Bilder/flachp2a.png);
}
.Tabelle1{
text-align: left;
background-color: transparent;
width: 886px;
height: 219px;
border: 0px;
}
.Tabelle2{
text-align: left;
width: 622px;
height: 179px;
border: 3px;
}
.TD1{
height: 127px;
width: 244px;
}
.TD2{
vertical-align: top;
height: 99%;
width: 622px;
}
.Span1{ /* gleich wie 2, 3 */
color: #ffffff;
font-family: Arial;
font-weight: bold;
}
.A1{
font-family: Arial;
font-weight: bold;
color: #00FF00;
}
.BR1{
color: rgb(255, 255, 255);
font-family: Arial;
font-weight: bold;
}und hier die HTML-Datei:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="design.css"> <!-- Hier wird deine CSS Datei eingebunden -->
<title>r5urt</title>
</head>
<body>
<table class="Tabelle1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="TD1"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<table class="Tabelle2" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td class="TD2">
<span class="Span1">
FLAC
stands for Free Lossless Audio Codec, an audio format similar to
MP3, but lossless, meaning that audio is compressed in FLAC without any
loss in quality. This is similar to how Zip works, except with FLAC you
will get much better compression because it is designed specifically
for audio, and you can play back compressed FLAC files in your favorite
player (or your car or home stereo, see
</span>
<a class="A1" href="http://flac.sourceforge.net/links.html#hardware">supported devices</a>
<span class="Span1">
) just like you would an MP3 file.
</span>
<br class="BR1">
<br class="BR1">
<span class="Span1">
See
</span>
<a class="A1" href="http://flac.sourceforge.net/features.html">
About FLAC
</a>
<span class="Span1">
for more, or
</span>
<a class="A1" href="http://flac.sourceforge.net/documentation_tasks.html">Using FLAC</a>
<span class="Span1"></span>
for how to play FLAC files, rip CDs to FLAC, etc.
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>ich glaube da kann man mehr erkennen als bei der alten :);):cool:

EDIT: ich glaub ich hab die 2px weißen Rand vergessen :-/ ... Moment bitte :8
EDIT2: ich glaub ich kapier das nicht wo der hin soll!?

[Scarab]

erstmal danke für deine arbeit.
wie muss ich die datein jetzt benennen. ich hab sie einfach index.htm und index.css genannt. das war bestimmt falsch oder?

[nepda]

die HTML-Datei nennst du index.html, schon ganz richtig und die CSS-Datei nennst du so wie sie am anfang der HTML-Datei eingebunden wird, in diesem Falle design.css

achja: ich helfe doch gerne!

[Scarab]

jetzt funtzs genau so wies funzen soll. ich hab die css datei noch n bischen modifiziert und jetz gehts.

ich hab bei der tabelle jetz folgende einstellung:


.Tabelle2{
text-align: left;
width: 622px;
height: 179px;
border: 2px; white
border-width:2px;
border-style:solid;
border-color:white;
padding:0.5em;
}

[nepda]

schön, das freut mich! soweit ich weiß kann man den border Teil noch ein bisschen kürzen;)
.Tabelle2{
text-align: left;
width: 622px;
height: 179px;
border: 2px solid white;
padding:0.5em;
}

[Scarab]

mal ganz schnell ne frage: wie mach ich ne rollover-grafik mit stinknormalem html?
als ich noch dreamweaver hatte war das kein problem aber jetzt mit KompoZer:(

[Scarab]

habs jetzt hingekriegt. mit google findet man nur tuts wie das mit java oder css oder php geht, habs mir jetz mit html gebastelt. das ist viel übersichtlicher und einfacher als mit java, css und php und geht auch mit wirklich jedem browser. warum kompliziert wenns auch einfach geht?

n kumpel hat mir das geschickt. weis nich ob funktioniert, hab mir daraus meins zusammen gebastelt:

<body onLoad="MM_preloadImages('BILD ohne overdings.jpg')"><a href="LINK" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','BILD ohne overdings.jpg',1)"><img src="BILD_over.jpg" name="Image1" border="0"></a>


meins:

<a href="http://www.google.com">
<img style="border: 0px solid ; width: 108px; height: 24px;" alt=""

src="2a.gif"
onmouseout=" src='2a.gif' "
onmouseover=" src='2b.gif' ">

</a>

link bild wenn die maus nich drüber is bild wenn die maus drüber is

[Scarab]

ihr schreibt ja heute viel :(

noch ne frage an die css profis: kann man das so machen das der hintergrund zusammen gesetzt wird aus dem banner teil und einem teil darunter der sich immer wieder wiederholt?
so wies jetzt ist müsste ich den hintergrund 6000px hoch machen und der wäre dann 700kb groß. der hintergrund ist für 8 seiten der gleiche also würde man das bild nur für eine seite laden müssen aber 700kb ist vielleicht doch n bischen viel oder?
geht das vielleicht irgendwie mit php oder css?

[eleanora]

hallo Scarab

jap ein Bild für das Web sollte nicht größer als 80KB sein. Einige sagen sogar nicht größer als 40KB.
Je nachdem wie du deine Website aufbaust, und ich gehe nicht davon aus das du mir Frames basteln möchtest, wird das Bild immer wieder neu geladen.

Also einen Hintergrund eine Höhe von 6000px zu geben halte ich für übertrieben. Hier kannst du vielleicht bessermit % - Werten arbeiten. Wie du das machen kannst kannst du in diesem Tipp im NVU-Forum (http://www.nvu-composer.de/forum/viewtopic.php?p=7490#7490) nachlesen.

Gruß Eleanora ;)

[Ravetracer]

ihr schreibt ja heute viel :(

Du, wir sind nicht alle hier, nur um DEINE Beiträge zu lesen. Hab' Geduld!

Nun denn... dein Hover-Effekt bekommst du mit CSS aber wirklich leicht hin. Ich wüsste
nicht, was daran schwer sein soll.


<html>
<head><title>Testsite</title>
<style type="text/css">

a.meinlink { background:url('normal.png'); }
a.meinlink:hover { background:url('mouseover.png'); }
a.meinlink:active { background:url('klick.png'); }

</style>
</head>

<body>

<a href="linkto.html" class="meinlink">Klick mich</a>

</body>

</html>



Fertig!

</body>

[Scarab]

jap ein Bild für das Web sollte nicht größer als 80KB sein. Einige sagen sogar nicht größer als 40KB.

naja, es gehen ja nicht mehr viele leute mit modem ins internet. eine durchschnittliche seite hier im forum ist auch ca. 1mb oder größer. und da das hintergrund bild fast das einzige bild ist und der rest text, wäre das gerade noch akzeptabel, aber vielleicht kann man die dateigröße ja doch ein bischen reduzieren.