A place for customers to chat about Realmac and its products - RapidWeaver, Clear and Ember!

Anfänger ->Projekt realisierbar?

kallistokallisto Posts: 1Members
edited April 2012 in German
Hallo,

ich möchte eine Webseite in einem bestimmten Stil erstellen. Auf der Suche nach dem passenden Programm bin ich auf RapidWeaver gestossen. Ich hab ein wenig rumexperimentiert und bin auch zuversichtlich dass ich es irgendwie hinbekomme, jedoch fehlt mir der entscheidende Anstoss...

Ich würde gerne eine Frontpage mit einem Menü ähnlich dieser Seite erstellen:

http://www.respiro-pflege.de/

Was benötige ich um solch große frei anpassbare Buttons (sind doch Buttons, oder?) zu erstellen. Meine ersten Gehversuche mit Blocks waren leider nicht von Erfolg gekrönt und weiß nicht welches Plugin für meine Zwecke das richtige wäre. Codierkenntnisse habe ich leider nicht... :(

Recht herzlichen Dank im voraus.

kallisto

Comments

  • marianmarian Posts: 1,579Members
    edited April 2012
    Ich bräuchte eigentlich eine Vorlage wo die Hauptnavigation horizontal ist und für "Unter"/"Sub"/oder wie du das benennen möchtest eine vertikale Navigation hat. Für diese Navigation (die NUR Unterseiten hat) müsste man die Farben der Links in der Navigation ändern können (dafür kann man in RW Stile abspeichern, siehe in Seiteninspektor bei Stile in dem unteren rechten Eck des Fensters ein Zahnrad um das Speichern und daneben den Ordner um bestimmten Seiten ein Stil der Vorlage zu vergeben).
    Ab jetzt ist ein bißchen klarer. Die Seite die du als Link benannt hast hat erstmal vier Hauptseiten: Startseite, Unternehmen, Kontakt und Referenzen.
    Wenn wir zuerst die Startseite rauslassen, dann ist klar dass für diese andere drei Hauptseiten die Farbe in der Unternavigation rot ist.
    Jetzt die Startseite ist eigentlich nur eine "Aneinanderteihen" von drei Links (ambulanter, beatmund und anästhesie). Oder von drei Bereiche die etwas Text haben auf einer Seite und ein Bild auf der anderen Seite. Das wen man mit der Maus über die Bilder fährt und dadurch die "Farbe" sich ändert, ist nur ein bißchen JavaScript:
    onmouseover="this.src='/dna_images/template_respiro//images/krankenpflege_01_hover.jpg';document.getElementById('gruen').style.opacity='1.0'" onmouseout="this.src='/dna_images/template_respiro//images/krankenpflege_01.jpg';document.getElementById('gruen').style.opacity='0.7'"
    
    (mit der Maus drauf - onmouseover - soll an dem Bild - und kommt der Link zu Bild - eine 1.0 Deckkraft sein - style.opacity='1.0
    wenn die Maus weg ist - onmouseout - soll an dem Bild eine Deckkraft von 0.7 sein - style.opacity='0.7)
    Das bekommst du auch hin (ein bißchen Code "anschauen" und "abschreiben" wird schon erlaubt sein - Wissen war, ist, und wird immer ein bißchen von da und von da "sich etwas aneignen" ;-) ).
    Wo diese Lins der drei Breichen hingehen sind Unterseiten und Unter-unterseiten die eine bestimmte Farbe für die Links in der Navigation haben.
    So, die anderen "Kleinigkeiten" (dass jedes "Unterbereich" ein Headerbild hat und dieses ist unter ein Logo oder dass die vertikale Navigation und das Headerbild auf einer Ebene sind etc) die sind wohl nicht von Bedeutung, glaube ich, da ich verstehe diese Link-Homepage war nur ein Beispiel und du möchtest nicht sie nachmachen. Es heißt also dass du durch die Vorlagen die für RW gibt (und das heisst du sollst Live-Homepages die die Entwickler erstellt haben anschauen) mit dem Auge an die "Möglichkeiten" in Navigation dir anschaust.
    Grüße,
    marian
  • kallistokallisto Posts: 1Members
    Vielen Dank für deine Antwort. Hat mir schon weitergeholfen. Zu Beginn steht man echt wie der Ochs vorm Berg...

    Gibt es ein Plugin welches mir erlaubt die "Blocks" bei Mouseover zu verändern, z.B. leicht anheben oder eben die Farbe ein/ausblenden? Oder gibt es nur die Chance das ganze per Hand zu schreiben?
  • marianmarian Posts: 1,579Members
    Gibt es ein Plugin welches mir erlaubt die "Blocks" bei Mouseover zu verändern, z.B. leicht anheben oder eben die Farbe ein/ausblenden? Oder gibt es nur die Chance das ganze per Hand zu schreiben?
    Vielleicht irgendwelches Stack aber ich bin nicht gerade der Freund der Stacks.

    Wenn du willst, ich kann dir zeigen wie du so etwas per Hand "mal schnell" bauen kannst. Du wirst sehen dass eigentlich mehr ist das Gerede und Geschreibe als der Code in sich.

    Ich verstehe so dass du drei Bereiche hintereinander haben möchtest (wie in dem von dir geposteten Link) wo mal mit der Maus drüberfährt, das Bild sich ändert und beim Anklicken es wird "irgendwo" geöffnet.
    ERSTMAL versuchen wir NUR mit den Bildern, wenn Erfolg gewesen ist, kann man auch Text reinbringen.
    Brauchst drei Bilder. Nicht große damit man erstmal genug Platz hat. Sagen wir 200*100px (200 Breite, 100 Höhe). Sie heissen testbild01.jpg, testbild02.jpg und testbild03.jpg.

    1. Erstelle in RW eine HTML Code Seite.
    2. Die drei Bilder die du hast/erstellt hast verschiebst du in RESOURCES (auf der linken Seite des Fensters, da wo der Name der Seite steht, drunter steht auch RESOURCES)

    Jetzt kommt der Code in der Seite.
    Was wollen wir?
    1. die Bilder untereinander. Deswegen wird JEDES Bild in einem div geschrieben.
    2. die Bilder sollen Links sein. Deswegen wird jedes Bild in einem a geschrieben.
    3. Die Links sollen eine NEUE Seite erzeugen. Warum? Die Links werden Seiten öffnen die NICHT aus der Homepage stammen. Deswegen werden die Links ein rel="external" bekommen
    4. Dieses Mouseover soll per CSS gemacht werden. Deswegen wird noch ein CSS Code in dem SeitenInspektor Fenster (klick da das Icon Kopfzeile und dann den Reiter CSS. Der Code wird in benutzerdefiniertes CSS Feld eingefügt. Aber nicht jetzt, ich schreibe schon ;-) )
    5. Wohin sollen die Links gehen? Zu http://www.linguee.de/ zu http://www.google.de und zu http://dict.leo.org/

    Das waren die Vorgaben. Der Code für den Inhalt ist:
    <div>
    	<a href="http://www.linguee.de/"; rel="external" title="Linguee" class="highlightit"><img border="0" src="%resource(testbild01.jpg)%"></a>
    </div>
    <div>
    	<a href="http://www.google.de/"; rel="external" title="Google Deutschland" class="highlightit"><img border="0" src="%resource(testbild02.jpg)%"></a>
    </div>
    <div>
    	<a href="http://dict.leo.org/"; rel="external" title="dict.leo.org" class="highlightit"><img border="0" src="%resource(testbild03.jpg)%"></a>
    </div>
    

    Und der CSS Code (in SeitenInspektor) ist:
    .highlightit img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    }
    
    .highlightit:hover img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }
    

    Ich nehme nur den Code für das erste Bild und erkläre kurz:
    <div>
    	<a href="http://www.linguee.de/"; rel="external" title="Linguee" class="highlightit"><img border="0" src="%resource(testbild01.jpg)%"></a>
    </div>
    
    - der Link (mit <a anfangend und mit /a> aufhörend) befindet in einem div (am Ende /div). Das weill die divs IMMER vom Anfang der Reieh anfangen.
    - in dem Link selbst ist die Adresse wo es gehen soll (fängt mit href an).
    - rel="external" haben wir gesagt, eun neues Fenster soll mit dem neuen Link geöffnet werden. ACHTUNG! das geht in RapidWeaver nicht. RW kann nicht neues Fenster öffnen. Um das zu sehen muss die Seite in Safari geöffnet werden (links unten Zahnrad anklicken und da Vorschau und dann Safari anklicken!)
    - title="Linguee" ist ein Tooltip wenn man mit der Maus über das Bild drüberfährt. Die Leute die mit speziellen Browser in Internet sind brauchen das!
    - class="highlightit" ist die Klasse für diese Links (siehe der CSS Code). Die normalen Bildern mit dieser Klasse haben eine Deckkraft von 50% (opacity=50, moz-opacity: 0.5, opacity: 0.5;) Warum drei mal? Um mehrere Browser kompatibel zu haben.
    - das Bild selbst fängt mit <img an
    - das Bild soll nicht ein Rand haben (border="0")
    - src= ist die Adresse woher das Bild kommt. Hier ist von Vorteil wie RW mit den Resourcen umgeht. Alles was man da reinbringt kann man in JEDER Seite mit %resource()% aufrufen.

    Wie ich schon sagte. Viel schreiben um zu erklären als der Code selbst.

    Schon im Vorschau siehst du wie die Bilder aus einer milchigen Deckkraft in vollen Deckkraft sich ändern wenn du mit der Maus drüberfährst. Wenn du die Seite in Safari öffnest dann kannst du sehen auch wie jetzt ein Bild anklicken ein neues Fenster geöffnet wird und dadrin ist die neue Seite.
    Grüße,
    marian
  • marianmarian Posts: 1,579Members
    edited April 2012
    Hier noch wie du auch Text reinbringen kannst.
    Ich würde so vorschlagen: Text in der linken Spalte, Bild in der rechten Spalte.
    Es ist eigentlich einfach. Es werden zwei divs geschrieben. Diese divs haben ein style (werden "gestylt" :-):
    <div style="
    Auf der linken Seite gibt man dem div eine Breite, sagen wir in Prozent, aber man kann auch in px geben. Also 47% und wird expliziet auf der linken Sete gestellt:
    <div style="width: 47%; float: left;">
    
    Die zweite Spalte wird auch in einem div "gesteckt" und gestylt wird nur der linke "margin" (wo es anfangen soll. Auch in Prozent:
    <div style="margin-left: 53%;">
    
    Was man NICHT VERGESSEN muss ist dass bei einem "float" (erste Splte ist links) MUSS man ihn wieder "aufheben" (clear). Das macht man mit einem Footer nach den zwei Spalten. Sonst fangen die nächsten ab der Mitte der Seite. Dieser Footer braucht nichts drin haben. Aber er kann gestylt werden. Ich habe ihm eine Höhe von 15px. Deswegen fangen die nächsten Spalten etwas tiefer:
    <div class="2SpaltenFooter" style="clear: both; height: 15px;"></div>
    

    Hier der Code:
    <div style="width: 47%; float: left;">
    	<p>
    		<a href="http://www.linguee.de/"; rel="external" title="Linguee">Link zu Linguee</a>
    	</p>
    	<p>
    		Dynamicus nihil possim odio dynamicus usus.<br />Autem ut placerat typi aliquam iriure.
    	</p>
    </div>
    <div style="margin-left: 53%;">
    	<a href="http://www.linguee.de/"; rel="external" title="Linguee" class="highlightit"><img border="0" src="%resource(testbild01.jpg)%"></a>
    </div>
    
    <div class="2SpaltenFooter" style="clear: both; height: 15px;"></div>
    
    
    <div style="width: 47%; float: left;">
    	<p>
    		<a href="http://www.google.de/"; rel="external" title="Google">Link zu Google Deutschland</a>
    	</p>
    	<p>
    		Liber elit dolore in dolor tincidunt.<br />Lorem eleifend commodo et gothica ea.
    	</p>
    </div>
    <div style="margin-left: 53%;">
    	<a href="http://www.google.de/"; rel="external" title="Google Deutschland" class="highlightit"><img border="0" src="%resource(testbild02.jpg)%"></a>
    </div>
    
    <div class="2SpaltenFooter" style="clear: both; height: 15px;"></div>
    
    
    <div style="width: 47%; float: left;">
    	<p>
    		<a href="http://dict.leo.org/"; rel="external" title="dict.leo.org">Link zu dict.leo.or</a>
    	</p>
    	<p>
    		Decima est ex dolore et delenit.<br />Eorum facit ad Investigationes legentis quarta.
    	</p>
    </div>
    <div style="margin-left: 53%;">
    	<a href="http://dict.leo.org/"; rel="external" title="dict.leo.org" class="highlightit"><img border="0" src="%resource(testbild03.jpg)%"></a>
    </div>
    
    <div class="2SpaltenFooter" style="clear: both; height: 15px;"></div>
    
    Grüße,
    marian
Sign In or Register to comment.