Präsentation Bitte Hilfe bei HomeGallery

Aus Gründen der Übersichtlichkeit und der Wiederverwendbarkeit würde ich die Style-Definitionen in eine eigene Datei schreiben:

my_style.css:
HTML: 
  body {color: #000000; background-color: #FFF7EA; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
  td, th, ul, li, input, textarea {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
  a      {color: #222266; text-decoration: none;  }
  a:hover {color: #222266; text-decoration: underline; }
  p {margin: 1em 0 1em 0; }
  p.small {font-size: 80%; color: #808080; margin: 0.5em 0 0.5em 0; }
  h1 {font-size: 24px; font-weight: bold; margin-bottom: 1em; }
  h2 {font-size: 15px; font-weight: bold; margin-bottom: 1em; }
  h3 {font-size: 12px; font-weight: bold; margin-bottom: 1em; }
  hr {height: 1px; border: none; color: #000000; background-color: #000000; }

Die kann dann in jede HTML-Datei einfach im header mit angegeben werden:

HTML: 
<html>
<head>
<link rel=stylesheet type="text/css" href="/pfad/zu/my_style.css">
</head>
<body>
</body>
</html>

ist besonders dankbar, wenn man mehr als drei dateien hat und überall die Überschriftenfarbe wechseln möchte.

Gruß Karsten
 
Hallo Wegus,

prinzipiell hast Du damit Recht, aaaaaber:

Sylvia ist HTML-Anfänger. Deshalb ist die Arbeit mit Stylesheets zum jetzigen Zeitpunkt vermutlich ein wenig zu viel von Dir verlangt

Für die Verarbeitung in Homegallery werden bestimmte Parameter wie Borders URLs etc. per Variable übergeben, deshalb braucht's einen gewissen HTML Rumpf-Code. Außerdem arbeitet HomeGallery auf Wunsch eh mit Stylesheets, die aus den Templates aufgerufen werden können.
 
kuni-r schrieb:
Das &lt;center&gt; muß iinnerhalb des Bodys stehen. also...
....
&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;
...
&lt;/center&gt;
&lt;/body&gt;
Zum Vergrößern anklicken....

So ist aber alles wieder nach links verschoben ???

Lieben Gruß
Sylvia
 
cypho schrieb:
Fürs Homepage basteln nehme ich Phase5. Einfach in der Bedienung und übersichtlich.
http://www.ftp-uploader.de/ftp-download.php4

MfG Peter
Zum Vergrößern anklicken....

Wenn Sylvia über den Dummie-Modus eines Dreamweavers verfügt, sollte sie nicht mehr zu Phase5 wechseln, es sei denn, sie möchte tatsächlich etwas über HTML lernen. Es geht nämlich nichts über den puren Code und dessen Kontrolle unter verschiedenen Browsern.

Ich hab mir die Basis nur mit dem Mix aus Quellcode-Ansicht im IE, SelfHTML, Phase5 (bzw. GoldED auf der AMIGA) und viel Debugging verschafft, möchte aber jedem dringend raten so schnell wie möglich Stylesheets (CSS) mit einzubeziehen, da sie doch einiges vereinfachen und verschlanken, wenn es um ein einheitliches Layout einer umfangreichen Webseite geht.

Ist zwar nicht einfach ein Stylesheet selbst zu stricken, aber gut geklaut (und angepasst) ist eben die halbe Miete, und da hat doch SelfHTML schon einfache Beispiele parat.
Oft hilft aber auch eine der vielen Musterseiten im WWW... (Quelltext auf und nachgeschaut) ;)
 
So ist aber alles wieder nach links verschoben
Zum Vergrößern anklicken....

dann poste doch bitte mal den jetzigen Code ohne die Style-Sheets vom Anfang, die verwirren hier nur. Einfach alles was zwischen &lt;body&gt; &lt;/body&gt; steht.

@kuni-r: das ist mir klar, gerade deshalb sollte man gleich mit geordneten Strukturen lernen. Eine eigene Stylesheet-Datei ist gut für die Struktur und übersicht gerade für Anfänger!
 
Den Quelltext, so wie er jetzt steht - und funktioniert - habe ich doch schon auf Seite 1 gepostet.

Hier ist er nochmal:
HTML: 
<body>

<h1>##GALLERYNAME##</h1>
<p class="navi"><a
  href="##BACK##">&amp;lt;&amp;nbsp;Zurück</a>&amp;nbsp;|&amp;nbsp;<a
  href="##OVERVIEW##">Übersicht</a>&amp;nbsp;|&amp;nbsp;<a
  href="##NEXT##">Weiter&amp;nbsp;&amp;gt;</a>
</p>

##IMAGE##

<p><b>##CAPTION##</b></p>
<p>##DESCRIPTION##</p>
<p class="small">##DATE##</p>
<p class="small">##TECHNICALS##</p>

<p class="navi"><a
  href="##FIRST##">&amp;middot;&amp;lt;&amp;nbsp;Anfang</a>&amp;nbsp;|&amp;nbsp;<a
  href="##BACK##">&amp;lt;&amp;nbsp;Zurück</a>&amp;nbsp;|&amp;nbsp;<a
  href="##OVERVIEW##">Übersicht</a>&amp;nbsp;|&amp;nbsp;<a
  href="##NEXT##">Weiter&amp;nbsp;&amp;gt;</a>&amp;nbsp;|&amp;nbsp;<a
  href="##LAST##">Ende&amp;nbsp;&amp;gt;&amp;middot;</a></p>

<hr>
<p class="small">Bild ##IMGINDEX## von ##IMGCOUNT##&amp;nbsp;&amp;nbsp;##IMGID##</p>
<p class="small">Galerie erstellt mit ##HGVERSION##</p>

</body>
Lieben Gruß
Sylvia
 
Hallo Sylvia,

der Quellcode wie abgebildet ist ok. Du hast hier allerdings die <center> und </center> Tags außerhalb des Bodys gesetzt. Das entspricht IMHO aber nicht den HTML-Konventionen.

Also bei Dir sieht das so aus:

HTML: 
<html>
<head>
...Headerinformationen und Stylesheet...
HTML: 
</head>
<center>
<body>
....Body-Informationen...
HTML: 
</body>
</center>
</html>

Dieser Code wird bei mir zwar von IE und FireFox korrekt angezeigt, mein HotMetal setzt diesen Code beim Öffnen automatisch korrekt:

HTML: 
<html>
<head>
...Headerinformationen und Stylesheet...
HTML: 
</head>
<body>
HTML: 
<center>
...Body-Informationen...
HTML: 
</center>
</body>
</html>
 
Ok, Kuni, ich hab´s jetzt so geändert und es funktioniert. Danke :-*

Noch eine Frage, sind die Leerzeilen im Code wichtig?

Dauert nicht mehr lange und ihr könnt mein Werk auf meiner HP begutachten. Ich sage Bescheid, wenn´s soweit ist.

Lieben Gruß
Sylvia
 
Die Leerzeilen sind nicht wichtig.
theoretisch kannst Du alles hintereinander schreiben.
Leerzeilen mach ich normalerweise keine rein, aber Einrückungen nutze ich, um bessere Übersicht zu gewinnen.

Liegt daran, daß HTML ja zumeist mit einem Start- und einem End-Tag funktioniert.

also korrekterweise sollte das dann so aussehen:

HTML: 
<html>
     <head>
           ...Headerinformationen und Stylesheet...
     </head>
     <body>
           <center>
                   ...Body-Informationen...
           </center>
     </body>
</html>
Auf Deinen Text angewendet, könnte das so aussehen:
HTML: 
<html>
      <head>
            <meta http-equiv="Content-Language" content="de">
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
            <meta name="GENERATOR" content="##HGVERSION##">
                  <title>##GALLERYNAME##: ##CAPTION##
                  </title>
                  <style type="text/css"><!--
                         body
                             {
                             color: #000000;
                             background-color: #FFF7EA;
                             font-family: Verdana, Arial, Helvetica, sans-serif;
                             font-size: 13px;
                             }
                         td, th, ul, li, input, textarea
                             {
                             color: #000000;
                             font-family: Verdana, Arial, Helvetica, sans-serif;
                             font-size: 13px;
                             }
                         a
                             {
                             color: #222266;
                             text-decoration: none;
                             }
                         a:hover
                             {
                             color: #222266;
                             text-decoration: underline;
                             }
                         p
                             {
                             margin: 1em 0 1em 0;
                             }
                         p.small
                             {
                             font-size: 80%;
                             color: #808080;
                             margin: 0.5em 0 0.5em 0;
                             }
                         p.navi
                             {
                             font-size: 18px;
                             font-weight: normal;
                             margin-bottom: 1em;
                             }
                         h1
                             {
                             font-size: 24px;
                             font-weight: bold;
                             margin-bottom: 1em;
                             }
                         h2
                             {
                             font-size: 15px;
                             font-weight: bold;
                             margin-bottom: 1em;
                             }
                         h3
                             {
                             font-size: 12px;
                             font-weight: bold;
                             margin-bottom: 1em;
                             }
                         hr
                             {
                             height: 1px;
                             border: none;
                             color: #000000;
                             background-color: #000000;
                             }-->
                  </style>
      </head>
      <body>
            <center>
                    <h1>##GALLERYNAME##</h1>
                    <p>
                       <a href="##BACK##">< Zurück</a>
                           | 
                       <a href="##OVERVIEW##">Übersicht</a>
                           | 
                       <a href="##NEXT##">Weiter ></a>
                    </p>
                        ##IMAGE##
                    <p>
                       <b>##CAPTION##</b>
                    </p>
                    <p>##DESCRIPTION##</p>
                    <p class="small">##DATE##</p>
                    <p class="small">##TECHNICALS##</p>
                    <p>
                       <a href="##FIRST##">·< Anfang</a>
                           | 
                       <a href="##BACK##">< Zurück</a>
                           | 
                       <a href="##OVERVIEW##">Übersicht</a>
                           | 
                       <a href="##NEXT##">Weiter ></a>
                           | 
                       <a href="##LAST##">Ende >·</a>
                    </p>
                    <hr>
                    <p class="small">Bild ##IMGINDEX## von ##IMGCOUNT##  ##IMGID##</p>
                    <p class="small">Galerie erstellt mit ##HGVERSION##</p>
            </center>
      </body>
</html>

Natürlich nur ein Beispiel ohne Anspruch auf Korrektheit, halt so, wie ich es als Laie mir einteile.
Speziell so formatierte Style-Informationen oder externe Stylesheets sind auf diese Weise einfacher les- und deutbar.
 
Zuletzt bearbeitet von einem Moderator:
Du hast hier allerdings die &lt;center&gt; und &lt;/center&gt; Tags außerhalb des Bodys gesetzt
Zum Vergrößern anklicken....

genau deshalb wollte ich die aktuelle Version nochmal sehen! Das hatte ich befürchtet.
 
Hallo Ihr Nettinnen &amp; Netten,


ich habe auch nur ein paar HTML-Grundkenntnisse und habe daher mit Interesse hier mitgelesen, fg.

Ich benutze auch HomeGallery und leicht abgewandelt ist folgendes herausgekommen:

http://www.langeslaster.de/vkz_galerie/index.htm


(Die dazugehörige Homepage:

http://www.langeslaster.de/vkz/


habe ich mit NetObjects Fusion 7 erstellt.)



Die hier genannten Tipps muss ich mir noch in ein paar ruhigen Stunden verinnerlichen ;-)


Gruß tombo


Nachtrag:
Bevor hier Rückfragen wegen der einfachen Kamera und Bildqualität kommen…
Es war DAS-DAUER-REGEN-Wochenende und zu dem Outdoor-Einsatz wollte ich nichts höherwertiges mitnehmen.
 
So, nun ist es so weit.
Dadurch, daß ich mich mit HomeGallery beschäftigt habe, ist mir einiges in Dreamweaver klar geworden, was ich vorher nicht verstanden hatte :D

Ich habe auch festgestellt, daß sich Dreamweaver und HomeGallery wohl nicht so mögen ::)
Jedenfalls, war es nicht möglich ein Album von HG in DW einzufügen, ohne daß mir die Kopfzeile &quot;gestaucht&quot; wurde. War zwar nur wenig, aber man hat einen kleinen Hüpfer bermerkt.
Also habe ich nun alles in Dreamweaver erzeugt. Und wie ich finde, für den &quot;Dummiemodus&quot; gar nicht so schlecht.

Bin gespannt auf eure Kritik.

Lieben Gruß
Sylvia

Damit keiner lange suchen muß, hier den Link http://www.funnys-hp.de
 
hallo funny,

also bei mir ist nichts gestaucht, loool...zumindest nicht auffällig.
Ist sehr hübsch geworden, tolles Style....gefällt mir sehr gut.

Gruß tombo
 
Kann ja auch nicht mehr gestaucht sein. Wie gesagt, war das nur beim Zusammenspiel von Dreamweaver und HomeGallery so.
Jetzt hab ich alles in Dreamweaver gebastelt. Das habe ich aber erst hinbekommen, nachdem ich mich mit HomeGallery beschäftigt habe.

Lieben Gruß
Sylvia

Selbstverständlich habe ich auch einen Hinweis auf FF eingebaut ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben