Beim einmaligen Kauf der Dettmer-Seminarunterlagen für ... · Beim einmaligen Kauf der...

Beim einmaligen Kauf der

Dettmer-Seminarunterlagen für Expression

Web können Sie die Dateien für Ihre

eigenen Kurse immer wieder an Ihre

Kursteilnehmer verteilen

Expression Web Einführung Seminarunterlagen | Dettmer-Verlag

22 Musterseite aus dem Dettmer-Verlag, D-76889 Kapellen

www.dettmer-verlag.de

5 Gestalten der Startseite

Startseiten müssen den Dateinamen index.htm, default.htm oder home.htm haben. Die Start-

seite index.htm der Pizzeria Toscana sollen aus mehren Grafiken und einzelnen Texten beste-

hen. Um den Grafiken einen festen Platz zuzuweisen, wird auf das Hilfsmittel Tabelle zurückge-

griffen.

Der Dateiname der Startseite index.htm oder home.htm sollte unbedingt in Klein-

buchstaben geschrieben werden.

Die farbig unterlegten Texte sind als so genannte Hyperlinks definiert. Wenn sie mit der Maus

angeklickt werden, führen sie den Besucher zu einer von Ihnen festgelegten Stelle auf der

Website.

Hyperlinks führen zu einer bestimmten Stelle einer Website

5.1 Eine Tabelle erstellen

Schalten Sie alle Aufgabenbereiche über das Schließen-Symbol oder über das Menü Aufga-

benbereiche aus, um genügend Platz auf dem Bildschirm für die nächsten Schritte zu haben.

Der Cursor blinkt auf der Seite index.htm in der Entwurfsansicht: . Erstellen Sie

eine Tabelle an der Position des Cursors, indem Sie den Menüweg Tabelle, Tabelle einfügen

anklicken.

http://www.dettmer-verlag.de/




Im Dialogfenster Tabelle einfügen ändern Sie die Anzahl der Zeilen von 2 auf 1. Im Bereich

Spalten geben Sie die Zahl 3 ein. Schließen Sie das Fenster mit [_OK_].

Zeilen und Spalten festlegen

Im Bereich Breite angeben können Sie einstellen, ob die Spaltenbreite fest oder rela-

tiv sein soll. Bei der Option Prozent richtet sich die Größe der Tabelle flexibel an

der Größe des Browserfensters aus.

Tabellen helfen, Grafiken oder Texte komfortabel auf der Seite zu positionieren, weil sie einen

genau einstellbaren Bereich für diese Elemente vorgeben.

Einzeilige Tabelle mit 3 Spalten

5.2 Die Symbolleiste Tabellen

Aktivieren Sie die Symbolleiste Tabellen über den Menüweg Ansicht, Symbolleisten, falls

Sie nicht angezeigt wird:





Symbolleiste Tabellen

Symbol Erläuterung

Spalte links einfügen

Fügt eine Spalte links von der Spalte ein, in der der Cursor steht.

Spalte rechts einfügen

Fügt eine Spalte rechts von der Spalte ein, in der der Cursor steht.

Zeile oberhalb einfügen

Fügt eine Zeile oberhalb der Zeile ein, in der der Cursor steht.

Zeile unterhalb einfügen

Fügt eine Zeile unterhalb der Zeile ein, in der der Cursor steht.

Zellen löschen

Markierte Zellen werden gelöscht.

Zellen verbinden

Markierte Zellen werden zu einer Zelle verbunden.

Zellen teilen

Markierte Zellen werden in Spalten oder Zeilen geteilt:

In Spalten teilen

In Zeilen teilen

Oben ausrichten

Der Text in der Zelle wird am oberen Rand ausgerichtet.

Vertikal zentrieren

Der Text in der Zelle wird in der Höhe zentriert.

Unten ausrichten

Der Text in der Zelle wird am unteren Rand ausgerichtet.

Zeilen gleichmäßig verteilen

In einer Tabelle mit unterschiedlichen Zeilenhöhen, wird die Höhe der

Zeilen ausgeglichen.

Spalten gleichmäßig verteilen

In einer Tabelle mit unterschiedlichen Spaltenbreiten, wird die Breite

der Spalten ausgeglichen.





Symbol Erläuterung

AutoAnpassen an Inhalt

Die Tabellenstruktur wird automatisch dem Inhalt angepasst.

Hintergrundfarben

Füllfarbe

Weisen Sie markierten Zellen einen farbigen Hintergrund zu. In dem

Wechselsymbol ist immer die zuletzt zugewiesene Farbe zu sehen.

Möchten Sie bei der nächsten Formatierung wieder diese Farbe ver-

wenden, klicken Sie auf den linken Teil des Symbols. Mit einem

Mausklick auf den Listenpfeil öffnen Sie ein Abreißmenü, in dem Sie

andere Farben auswählen können. Ziehen Sie den Titelbalken des

Menüs, um es loszulösen und permanent geöffnet zu lassen.

Tabelle AutoFormat-Kombinationsfeld

Hier erhalten Sie schnellen Zugriff auf die

Formate des nachfolgenden Dialogfensters

AutoFormat für Tabelle.

AutoFormat wählen

AutoFormat für Tabelle

Ein Klick öffnet das Dialogfenster. Wählen Sie ein vordefiniertes For-

mat, um Ihrer Tabelle ein professionelles Design zuzuweisen:

Vordefiniertes Design wählen





Symbol Erläuterung

Layouttool anzeigen

Standardmäßig sind die Layouttools deaktiviert. Ein Klick auf die

Schaltfläche markiert die Tabelle und mit einem weiteren Klick werden

die Layouttools angezeigt. Die Zahlen geben die Spaltenbreiten bzw.

die Zeilenhöhen an.

Tabelle mit angezeigten Layouttools

Auch im nachfolgend beschriebenen Aufgabenbereich Layouttabel-

len und –zellen können die Tools aktiviert oder deaktiviert werden.

Layouttabelle zeichnen

Der Mauszeiger verwandelt sich in einen Stift. Ziehen Sie den Maus-

zeiger, um die Layouttabelle zu zeichnen.

Layoutzelle zeichnen

Ziehen Sie den Mauszeiger in der Layouttabelle, und fügen Sie eine

Zelle ein. Halten Sie die (Strg)-Taste gedrückt, um mehrere Zellen

nacheinander zu zeichnen.

Aufgabenbereich Layouttabellen

Im Gegensatz zu einer herkömmlichen Tabelle, die

ursprünglich zur tabellarischen Darstellung von Daten

entworfen wurde, erstellen Sie mit der Funktion Lay-

outtabelle professionelle Seitenlayouts, ein ganz

wichtiger Bestandteil eines Webdesigns.

Um den rechts stehenden Aufgabenbereich zu öffnen,

klicken Sie beispielsweise im Menü Tabelle auf den

Befehl Layouttabellen. Die Layouttools werden auto-

matisch aktiviert, wenn Sie eine Layouttabelle hinzufü-

gen.

Im Bereich Tabelleneigenschaften legen Sie u.a. die

Größe und die Ausrichtung einer Tabelle fest.

Expression Web stellt Ihnen im Bereich Tabellenlay-

out eine ganze Reihe von vordefinierten Layouttabel-

len zur Verfügung, die Ihnen bei der Erstellung einer

neuen Website wertvolle Dienste leisten.

Aufgabenbereich Layouttabellen

5.3 Grafiken einfügen

In die linke und in die rechte Spalte soll die Grafik mit den italienischen Farben eingefügt wer-

den. Setzen Sie den Cursor in die linke Spalte. Rufen Sie den Menüweg Einfügen, Grafik, Aus





Datei auf. Wählen Sie den Ordner mit den mitgelieferten Grafik-Dateien. Markieren Sie die Datei

FLAGGE.GIF, und klicken Sie auf [_Einfügen_]. Eventuell erscheint dann die nachfolgende Dia-

logbox, in der Sie einen zusätzlichen Text eintragen können. Dieser Text wird angezeigt, wenn

in einem Browser das Anzeigen von Bildern ausgeschaltet wurde:

Bild aus Datei einfügen

Klicken Sie auf [_OK_]. Diesen alternativen Text, der zu einem Bild gehört, können Sie später

auch jederzeit in den Bildeigenschaften ändern.

Eine eingefügte Grafik in der ersten Tabellenzelle

Die Grafik wurde an der Position des Cursors eingefügt.

5.4 Übungen

Nun kopieren Sie diese Grafik noch zweimal in die linke Spalte und insgesamt dreimal in die

rechte Spalte:

1. Markieren Sie die Flaggen-Grafik mit einem Mausklick.

2. Kopieren Sie das markierte Objekt in die Zwischenablage. Die Befehle entnehmen Sie bitte

der nachfolgenden Übersicht.

3. Klicken Sie rechts neben die Flagge. Der Cursor beginnt zu blinken. Fügen Sie die Grafik

aus der Zwischenablage ein.

4. Wiederholen Sie Schritt 3, und fügen Sie die Grafik noch einmal rechts von der zweiten

Flagge ein.

5. Dass die beiden rechten Spalten jetzt recht schmal sind, ist im Moment unerheblich. Positi-

onieren Sie einfach mit einem Mausklick den Cursor in der ganz rechten, in der dritten

Spalte, und fügen Sie dort die Flagge auch dreimal ein.

6. Richten Sie diese rechte Spalte rechtsbündig aus: .





In der nachfolgenden Tabelle sind die Befehle zum Ausschneiden, Kopieren und Einfügen zu-

sammengefasst:

Übersicht Ausschneiden, Kopieren und Einfügen:

Befehl Ausschneiden Kopieren Einfügen

Menü Bearbeiten: Ausschneiden Kopieren Einfügen

Kontextmenü

(rechte Maustaste):

Ausschneiden Kopieren Einfügen

Tasten-

Kombinationen:

(Strg)+(X) oder

(ª_)+(Entf)

(Strg)+(C) oder

(Strg)+(Einfg)

(Strg)+(V) oder

(ª_)+(Einfg)

Symbole

(Symbolleiste Standard):

Die Homepage mit den italienischen Farben

Als Grafikformate für Internetseiten sind GIF, JPG und PNG geeignet. GIF eignet sich

für kleine Grafiken, JPG ist sinnvoll für große Bilder mit vielen Farben oder Farbver-

läufen. Beim PNG-Format können zusätzliche Informationen, wie Copyright mitge-

speichert werden.

Jetzt ist eine gute Gelegenheit, die Homepage zu speichern. Auf der Registerkarte oben links

sehen Sie beim Dateinamen ein Sternchen *: . Wie erwähnt, weist Sie dieses Zeichen

darauf hin, dass seit dem letzten Speichern die Seite geändert wurde.

Sie werden sehen, wie Expression Web dabei mit der von Ihnen eingefügten Grafik

umgeht. Wählen Sie entweder den Menüweg Datei, Speichern, oder klicken Sie auf

das Symbol.

Expression Web öffnet ein Dialogfenster und fragt, wo die eingebettete Datei, hier ist die Grafik

FLAGGE.GIF gemeint, gespeichert werden soll:





Eingebettete Grafik speichern

Dieses Dialogfenster erscheint aber nur, wenn die eingefügte Grafikdatei nicht in ei-

nem Ordner der aktuellen Website gespeichert ist!

Um zu prüfen, welches Verzeichnis als Standard-Verzeichnis für Grafiken vorgesehen ist, kli-

cken Sie auf die Schaltfläche .

Sie sehen jetzt das Dialogfenster Ordner wechseln. Hier könnten Sie ein anderes Verzeichnis

für die Grafik einrichten. Wir lassen aber den Standard-Speicherpfad für Grafiken eingestellt und

verlassen das Fenster über [_OK_].

Standard-Verzeichnis

Nach dem Speichern der Webseite können Sie überprüfen,

wohin die Grafik gespeichert wurde. Öffnen Sie die Ordnerlis-

te (z.B. mit (Alt)+(F1)).

Ein Blick auf die Liste zeigt, dass die Grafik FLAGGE.GIF im

gleichen Verzeichnis steht, wie die drei Seiten der Website.

Die eingebettete Grafik wurde im Standardverzeichnis gespeichert

Als Nächstes wird die mittlere Spalte ausgefüllt. Hier soll der Name der Pizzeria stehen. Um

mehr Platz für die Bearbeitung der Seite zu haben, schließen Sie wieder die Ordnerliste über

das Schließen-Symbol .





5.5 Text einfügen

Klicken Sie in die schmale mittlere Spalte der Seite index.htm hinein.

Schreiben Sie

Pizzeria Toscana

Markieren Sie die beiden Wörter. Weisen Sie dem Text über die Symbol-

leiste die Formate Standardschriftart, Schriftgrad xx-large (36pt) und Fett

zu.

Schriftgröße

Um den Text mittig in der Spalte auszurichten, klicken Sie auf die Schaltfläche

Zentriert.

Der Text soll nun einen roten Rand bekommen. Lassen Sie den Text markiert, oder stellen Sie

den Cursor in den Text hinein. Gehen Sie dann den Menüweg Format, Rahmen und Schattie-

rung.

Farbigen Rahmen hinzufügen

Im Bereich Einstellung klicken Sie auf Kasten. Im Feld Farbe stellen Sie Rot ein und als Breite

3px (Pixel = Punkte). Die Einstellungen übernehmen Sie mit [_OK_].

Rufen Sie auf: Menü Format, Absatz. Überprüfen Sie bzw. ändern Sie bei dem Vor- und Nach-

Abstand jeweils den Wert auf 0, und klicken Sie auf [_OK_].





Vor- und Nach-Abstand auf 0

Die fertige Überschrift in der Entwurfsansicht

Falls der neue Text in der mittleren Spalte nicht vertikal zentriert ausgerichtet ist, klicken

Sie auf das Symbol in der Symbolleiste Tabelle (Seite 26).

5.6 Vorschau

Lassen Sie sich über den Menüweg

Datei, Browservorschau die Websei-

te anzeigen.

Sie können zwischen den auf Ihrem

System installierten Browsern und den

verschiedenen Bildschirmauflösungen

auswählen, z.B. 1024 x 768. Hier ist

nur der Microsoft Internet Explorer

installiert. Sie sehen nun die aktuelle

Homepage der Pizzeria Toscana im

Internet Explorer.

Über den Befehl Browserliste bear-

beiten in dem Untermenü öffnen Sie

eine Dialogbox, in der Sie weitere be-

reits vorher installierte Browser in die

Liste aufnehmen können.

Auswahl des Browsers





Ergebnis im Internet Explorer

5.7 Übung

1. Klicken Sie auf der Seite index.htm in den Bereich unterhalb der Tabelle. Geben Sie hier

den Text ein:

Wir verwenden ausschließlich frische Zutaten!

2. Zentrieren Sie den Text und formatieren Sie ihn fett.

3. Speichern Sie die Seite index.htm ab.

5.8 Rahmen um die Flaggen erstellen

Die Grafiken mit den Flaggen sollen einen schwarzen Rahmen bekommen. Klicken Sie auf die

erste Grafik. Fügen Sie über den Menüweg Format, Rahmen und Schattierung einen Rahmen

(Kasten) mit der Breite 3px und der Farbe Schwarz um die Grafiken ein. Wiederholen Sie die-

sen Vorgang für die dritte, vierte und sechste Flagge. Bei der zweiten und bei der fünften Grafik

dagegen sollen nur oben und unten die schwarzen Linien erscheinen.

5.9 Tabelle ohne Rahmen

Jetzt wird der nächste Teil der Seite index.htm erstellt. Auch er besteht aus einer Tabelle mit

Grafiken und Text, nur dass man, im Unterschied zur Tabelle oben, die Begrenzungslinien der

Tabelle nicht sehen kann.

Weitere Gestaltung der Index-Seite

Gehen Sie mit dem Cursor an das Ende der Seite. Erstellen Sie eine

Tabelle mit der Schaltfläche Tabelle einfügen aus der Standard-

Symbolleiste.

1. Klicken Sie auf das Symbol .

2. Nur durch Zeigen mit der Maus markieren Sie in dem erscheinen-

den Rahmen in der ersten Zeile 4 Kästchen.

Tabelle mit 4 Spalten

3. Klicken Sie auf das vierte Kästchen. Die Tabelle wird an der Cursorposition eingefügt. Der

Cursor blinkt in der ersten Zelle.





5.10 Übung

Fügen Sie die drei Grafiken

Pasta (PASTA05.JPG)

Salat (J0076170.GIF)

Wein (WINEGLSS.JPG)

von links in die einzelnen Zellen ein. Sie befinden sich beispielsweise im Verzeichnis Bilder.

Nutzen Sie den Menüweg Einfügen, Grafik, Aus Datei. Falls eine Dialogbox für den alternati-

ven Text erscheint, geben Sie jeweils passend die Wörter Pasta, Salat und Wein ein.

Einfügen, Grafik, Aus Datei

Speichern Sie die Seite index.htm ab. Auch jetzt werden Sie wieder nach dem Speichern der

Grafiken gefragt (eingebettete Dateien). Übernehmen Sie die Voreinstellungen, und klicken Sie

auf [_OK_].

5.11 Grafiken bearbeiten

Sie können eine Grafik

an eine andere Position ziehen,

mit einem Rahmen versehen,

in der Größe ändern,

zuschneiden.

Um das Bild zu bearbeiten, klicken Sie zunächst auf die Grafik. Als aktuel-

les Objekt ist die Grafik nun umrahmt. Oben links sehen Sie das aktuelle

Tag-Register und rechts und unten sind kleine quadratische Zieh-

punkte (Markierungspunkte) platziert.

Markierungsrahmen mit Ziehpunkten





Über den Menüweg Ansicht, Symbolleisten, Bilder können Sie die nachfolgende Symbolleiste

aktivieren. Die häufigsten Befehle sind auch in einem Kontextmenü zusammengefasst, das Sie

mit der rechten Maustaste aufrufen.

Symbolleiste Bilder

Symbol Erläuterung

Grafik aus Datei einfügen

Das Dialogfenster Bild wird geöffnet. Dieses Symbol entspricht dem Me-

nüweg Einfügen, Grafik, aus Datei.

AutoMiniaturansicht

Um die Zeit bei einem Download zu verkürzen, können Sie mit diesem

Befehl die Grafik verkleinern. Expression Web erstellt automatische einen

Hyperlink zu der ursprünglichen Grafik in Originalgröße. Für animierte Bil-

der (Seite 38) oder für Bilder, die mit einem Hyperlink versehen sind, ist

dieser Befehl nicht möglich.

Eine Ebene nach vorne bzw. nach hinten

Ändern der Reihenfolge eines ausgewählten Objekts: Das aktuelle Bild

liegt auf oder unter den anderen Bildern.

Linksdrehung bzw. Rechtsdrehung

Die Grafik wird um 90° nach links bzw. rechts gedreht.

Horizontal bzw. Vertikal kippen

Klicken Sie auf Horizontal kippen: ein Spiegelbild wird erstellt. Klicken Sie

auf Vertikal kippen: die Grafik wird auf den Kopf gestellt.

Mehr Kontrast / Weniger Kontrast

Wenn Sie die Einstellung Mehr Kontrast wählen, wird die Sättigung der

Farben in der markierten Grafik erhöht. Der Grauanteil in der Farbe wird

geringer, je höher der Kontrast ist.

Mit der Schaltfläche Weniger Kontrast verringern Sie die Intensität der

Farben. Je geringer der Kontrast ist, umso höher ist der Grauanteil in der

Farbe.

Mehr Helligkeit / Weniger Helligkeit

Mehr Helligkeit heißt, dass der Weißanteil in den Farben der Grafik er-

höht wird: Die Farben werden aufgehellt.

Weniger Helligkeit bedeutet, dass der Schwarzanteil erhöht wird: Die

Farben erscheinen dunkler.





Symbol Erläuterung

Zuschneiden

Teile der markierten Grafik können unsichtbar oder auch sichtbar gemacht

werden, je nachdem, ob die Grafik in der Originalgröße vorliegt oder ob sie

bereits zugeschnitten worden ist.

Transparente Farbe bestimmen

Diese Funktion ist z.B. für GIF-Bitmaps, anwendbar. Der Mauszeiger än-

dert sich: . Sie klicken mit der Maus auf die Farbe, die transparent wer-

den soll.

Nachfolgend zeigt die linke Grafik den Stiftbecher mit weißer Farbe auf

grünem Hintergrund. In der rechten Grafik wurde die weiße Farbe ange-

klickt und somit als transparent definiert. Danach scheint der grüne Hinter-

grund durch.

Farbe

Graustufe: Aus dem farbigen Bild wird eine

Graustufen-Grafik.

Verwaschen: Die Grafik wird heller darge-

stellt. Dadurch kann sie als Hintergrundbild

eingesetzt werden. Praktisch nutzbar ist diese

Funktion, wenn Sie in einer Website Ihr Fir-

menlogo als Wasserzeichen darstellen wol-

len.

Abschrägung

Das Bild wird mit einem abgeschrägten Rahmen (ähnlich einem Bilder-

rahmen) versehen.

Erneut einlesen

Die Größe eines Bildes, das Sie aus einer externen Quelle in Ihre Website

eingefügt haben, können Sie mit dieser Option anpassen und das Bild

erneut einlesen.

Auswählen

Wenn der Mauszeiger durch eine vorherige Aktion nicht seine normale

Form zum Auswählen hat, setzen Sie ihn hiermit zurück.





Symbol Erläuterung

Rechteckiger, Runder und Polygonförmiger Hotspot

Zeichnen Sie eine Form in eine Grafik, zu der Sie einen so genannten Hot-

spot hinzufügen möchten. Das Dialogfenster Hyperlink einfügen wird

geöffnet, wenn Sie nach dem Zeichnen doppelt klicken.

Hotspots markieren

Markieren Sie einen Hotspot, wenn die Umrisse, die die Grafik überlagern,

schwer erkennbar sind. Klicken Sie erneut auf das Symbol, um die Grafik

ohne Hervorhebung anzuzeigen.

Wiederherstellen

Mit den anderen Schaltflächen vorgenommene Änderungen an einer Gra-

fik können mit dieser Schaltfläche wieder zurückgenommen werden, z.B.

Zuschnitt, Farbe, Helligkeit und Kontrast. Die ursprünglichen Werte der

Grafik werden wiederhergestellt.

Hotspots sind Bereiche (Text oder Form) innerhalb einer Grafik, die als Hyperlink

funktionieren und den Besucher auf eine weitere Seite oder Grafik führen.

Bilder verkleinern

Die Bilder rechts und links sind viel größer als der Salatkopf. Jetzt müssen die drei Grafiken auf

eine annähernd gleiche Größe gebracht werden. Sie können die Größenänderung direkt mit der

Maus oder in einem Dialogfenster vornehmen.

Die Größe mit der Maus ändern

Klicken Sie die linke Grafik mit den Nudeln an, zeigen Sie

mit der Maus auf den unteren rechten Eckziehpunkt, und

ziehen Sie die Grafik bei gedrückter linker Maustaste auf

die richtige Größe. Dabei werden Breite und Höhe in ei-

nem gelben Infofeld angezeigt.

Nach dem Loslassen der Maustaste wird an der unteren

rechten Ecke des Markierungsrahmens ein SmartTag

eingeblendet. Wenn Sie auf diesen SmartTag klicken,

können Sie über die Option

Bild zum Anpassen der Größe erneut einlesen

die Dateigröße an die neuen Maße anpassen. Die Dateig-

röße ändert sich aber erst, nachdem Sie die aktuelle

Webseite index.htm abgespeichert haben!

Bild mit der Maus verkleinern

Die Dateigröße an die neuen Maße anpassen





Die Größe mit der Maus zu ändern, geht schnell, ist aber

manchmal nicht so exakt. Deshalb soll nun die Größe des

rechten Bildes über ein Dialogfenster eingestellt werden.

Die Größe in einem Dialogfenster ändern

Markieren Sie die Grafik mit dem Salat. Wählen Sie den

Menüweg Format, Eigenschaften, oder klicken Sie mit

der rechten Maustaste auf die Grafik Salat und wählen

dann aus dem Kontextmenü den Eintrag Bildeigenschaf-

ten aus.

Klicken Sie auf die Registerkarte Darstellung. Im Bereich

Schriftgrad sehen Sie die Größe der Grafik mit dem Salat

(Breite 154, Höhe 141). Diese Zahlen können Sie auch als

Richwerte für die zu verändernde Weinflaschen-Grafik

nehmen:

Kontextmenü

Größe ändern

5.12 Übungen

1. Markieren Sie die Grafik mit der Weinflasche, und öffnen Sie das Dialogfenster Bildeigen-

schaften. Klicken Sie auf die Registerkarte Darstellung.

2. Im Bereich Schriftgrad geben Sie im Feld Breite den Wert 154 ein. Das Feld Seiten-

verhältnis beibehalten sollte aktiviert sein (mit Häkchen), damit die Grafik proportional

verkleinert wird. Klicken Sie auf [_OK_].

Größe der Grafiken anpassen





Kontrollieren Sie noch einmal die Größe der Grafik in der ersten Tabellenzelle. Gehen

Sie dafür die Schritte 1. und 2. wie oben beschrieben. Ändern Sie ggf. den Wert im

Feld Breite auf 154 Pixel.

3. Tragen Sie in die ganz schmale rechte freie Zelle noch die Telefonnummer ein:

Telefon

012 34 56 789

Nach der ersten Zeile geben Sie mit der Tastenkombination (ª_)+(¢) eine Zeilenschaltung

ein. Das bewirkt, dass der Abstand zwischen den beiden Zeilen nicht so groß wird. Aber

nach der Ziffer 9 am Ende der zweiten Zeile drücken Sie nicht die (¢)-Taste!

4. Formatieren Sie den Text mit dem Schriftgrad x-large (24pt) und in Fett, und richten Sie ihn

zentriert aus.

5. Speichern Sie wie üblich die Seite index.htm.

6. Schauen Sie sich die aktuelle Webseite in der Browservorschau an:

Ergebnis in der Browservorschau

5.13 Animierte Grafik

Die zweite Grafik von links, die Artischoke, zeigt sich in der Browservorschau als bewegtes Bild.

In der Fachsprache wird dieser Effekt als Animation bezeichnet. Dazu eignet sich besonders gut

das Dateiformat GIF (Graphics Interchange Format, engl. Grafikaustausch-Format). Bei dieser

Datei wurden mehrere voneinander abweichende Bilder in einer Datei gespeichert, und der

Browser sorgt dafür, dass diese Bilder laufend wechseln und somit als Animation erscheinen.





5.14 Rahmen für eine Tabelle

In der Entwurfsansicht zeigen dünne helle

Linien die Grenzen der einzelnen Tabel-

lenzellen an. Diese Linien sind im Browser

nicht sichtbar. Sie können aber eine Ta-

belle und/oder einzelne Tabellenzellen

umrahmen oder einen bestehenden Rah-

men wieder entfernen.

Zum Markieren stellen Sie den Cursor in

die Tabelle und wählen den Menüweg Ta-

belle, Markieren, Tabelle.

Oder markieren Sie die Tabelle mit der

Maus: Zeigen Sie mit der Maus auf den

oberen linken Rand , und ziehen Sie bei

gedrückter linker Maustaste die Markie-

rung bis in die rechte Spalte.

Rufen Sie auf: Menü Format, Eigen-

schaften oder Menü Tabelle, Tabel-

leneigenschaften, Tabelle.

Tabelle formatieren

Die Rahmenstärke und die -farbe werden im Bereich Rahmen eingestellt. Zum Ausschalten

geben Sie im Feld Stärke die Zahl 0 ein. Schließen Sie über [_OK_].

Um die einzelnen Grafiken besser zu positionieren, richten Sie alle vier Zellen zentriert aus. Zum

Schluss werden die hellen dünnen Begrenzungslinien zwischen den Zellen etwas verändert:

Bewegen Sie die Maus zwischen die beiden ersten Zellen, und ziehen Sie, wie nachfolgend

beschrieben, die Linie etwas nach rechts. Somit rutscht die Grafik mit den Nudeln mehr rechts.

Zum Verschieben einer Begrenzungslinie zeigen Sie mit der Maus auf

diese Linie. Der Cursor verändert sich in einen Doppelpfeil, und in einem

Infofeld sehen Sie die aktuelle Spaltenbreite. Nun ziehen Sie die Linie bei

gedrückter linker Maustaste auf die gewünschte Spaltenbreite.

Mauszeiger mit Infofeld

Nun schieben Sie die Randlinien der Zellen mit der Weinflasche und der Telefonnummer etwas

zusammen, damit sie kleiner werden:

Neu ausgerichtete Grafiken in der Tabelle

Als Nächstes geben Sie den folgenden Text unterhalb der Tabelle ein. Formatieren Sie die

Schrift in der Standardgröße und in Fett, und richten Sie den Text zentriert auf der Seite aus.

Um nach einem Absatz einen Abstand zu bekommen, drücken Sie nur die (¢)–Returntaste.

Ohne Abstand geben Sie eine Zeilenschaltung mit der Tastenkombination (ª_)+(¢) ein:





Speisekarte - hier klicken

Wir liefern in einem Umkreis von 5 km ab einem Bestellwert von € 7,-

Im Umkreis von 15 km liefern wir ab einem Bestellwert von € 18,-

Im Umkreis von 30 km liefern wir ab einem Bestellwert von € 50,-

Industriestraße 3

12345 Großstadt

Öffnungszeiten:

täglich 11 - 24 Uhr

5.15 Übungen

1. Fügen Sie die Telefon-Grafik Bd10242_.gif unter dem Text ein. Als alternativen Text geben

Sie das Wort Telefonnummer ein.

2. Zentrieren und verkleinern Sie die Grafik etwas.

3. Schreiben Sie den restlichen Text unter die Telefon-Grafik:

012 34 56 789

Hier sehen Sie unser Angebot

Bestellformular für unseren Prospekt oder die Mittagstisch-Angebote

4. Die Telefonnummer wird mit dem Schriftgrad x-large (24pt) und in Fett formatiert, der Rest

hat die Formatierungen Standardgröße und Fett:

Schriften formatieren

5. Speichern Sie die Webseite, und schauen Sie sich das Ergebnis in der Browservorschau

an.

6. Schließen Sie die Seite index.htm.





6 Die Seite speisen.htm gestalten

Nun wird die zweite Seite der Website mit Inhalt gefüllt. Öffnen Sie die Datei speisen.htm mit

einem Doppelklick.

Ausschnitt aus der Registerseite Website

Zunächst wird der obere Teil dieser Seite gestaltet:

Der obere Teil der Seite speisen.htm

Datei einfügen

Damit Sie nicht den ganzen Text eingeben müssen, haben

wir ihn als HTML-Dokument mitgeliefert. Diese Datei wird

jetzt in die Seite speisen eingebunden.

Gehen Sie den Menüweg Einfügen, Datei. Stellen Sie

den Dateityp auf HTML-Dateien (*.htm;*.html) ein. Wäh-

len Sie den Ordner und das Dokument Daten für die Sei-

te speisen.htm aus, und klicken Sie auf [Öffnen].

Menü Einfügen, Datei





Datei einfügen

Die Tabelle aus dem HTML-Dokument wird eingefügt:

HTML-Dokument eingefügt

Beim Einfügen von Dateien besteht die Gefahr, dass die Webseite danach nicht mehr

mit dem gewünschten Dokumenttyp kompatibel ist. Den eingestellten Dokumenttyp

können Sie in der Statusleiste unten rechts ablesen, in unserem Beispiel XHTML 1.0

Transitional (auch Seite 73).

Speichern Sie die Webseite ab, um den bisher erreichten Zustand zu sichern. Nun

müssen die einzelnen Zellen gestaltet werden, Grafiken werden noch eingefügt und

farbige Umrandungen definiert.





Tabelleneigenschaften

Klicken Sie mit der rechten Maustaste in eine Zelle, und wäh-

len Sie im Kontextmenü den Befehl Tabelleneigenschaften.

Im nachfolgenden Dialogfenster stellen Sie die Breite der

gesamten Tabelle für den Anfang auf 90 Prozent ein:

Breite der Tabelle festlegen

Kontextmenü

Vertikal zentrieren

Öffnen Sie die Symbolleiste Tabellen (Seite 26), falls Sie geschlossen ist. Der Text

soll in allen Zellen vertikal zentriert werden. Markieren Sie die Tabelle: Zeigen Sie

mit der Maus auf den oberen Rand der linken Spalte , und ziehen Sie bei gedrück-

ter linker Maustaste die Markierung bis in die rechte Spalte. Klicken Sie in der Sym-

bolleiste Tabellen auf das Symbol Vertikal zentrieren.

Vertikal zentrieren

Format übertragen

Für die nachfolgenden Aufgaben können Sie sich die Arbeit erleichtern. Wenn Sie einen Text in

einer bestimmten Art bereits formatiert haben, können Sie die Zeichen- und Absatz-Formate auf

einen anderen Text übertragen:

1. Markieren Sie den fertig formatierten Text.

2. Öffnen Sie die Symbolleiste Standard, und klicken Sie auf das Symbol Format

übertragen.

3. Der Mauszeiger hat sich geändert: . Sie fahren mit der Maus über den Text, der das

gleiche Format erhalten soll. Wenn Sie mehrere Stellen gleichzeitig mit dem neuen Format

überstreichen wollen, führen Sie einen Doppelklick auf die Schaltfläche aus. Mit einem

einfachen Klick auf diese Schaltfläche oder mit der (Esc)-Taste schalten Sie die Funktion

wieder aus.





6.1 Ihre Aufgaben

Gestalten Sie den Text für die Seite speisen der Pizzeria Toscana folgendermaßen:

Pizza, Pasta, Salat, Getränke Schriftgrad x-large (24pt), fett, zentriert.

Telefon: Schriftgrad x-large (24pt), fett, linksbündig.

012 34 56 789 Schriftgrad x-large (24pt), fett, zentriert.

Margherita, Funghi, Salami, Schinken, Quattro Stagioni, Spaghetti, Lasagne, Combinazione, Itali-

enischer Salat, Hawaii Salat, Cola, Fanta, Sprite, Wasser, Lambrusco, Bier Schriftgrad Standard-

größe, fett, linksbündig.

Preise in €, mittel, groß Schriftgrad Standardgröße, fett, zentriert.

Restliche Texte Schriftgrad Standardgröße.

6.2 Übungen

Als Nächstes werden die zwei Grafiken entsprechend den unten stehenden Bildern eingefügt:

Grafiken einfügen

1. Klicken Sie in das Feld rechts von dem Begriff Pizza, unterhalb der Telefonnummer.

2. Fügen Sie auf dem üblichen Weg die Grafikdatei PIZZASLI.JPG mit dem alternativen Text

Pizza ein (Seite 27).

3. Ziehen Sie die Grafik am unteren rechten Ziehpunkt auf die von Ihnen gewünschte Größe.

Größe der Grafik ändern

4. Fügen Sie die animierte Grafik J0076120.gif (Artischocke) in der Zelle rechts von dem

soeben eingefügten Bild ein, und ziehen Sie sie auf die richtige Größe.

5. Speichern Sie den Zwischenstand der Website ab. Sie werden gefragt, ob Sie die eingebet-

teten Dateien in das voreingestellte Verzeichnis speichern wollen. Klicken Sie auf [_OK_].





Webseite mit den eingebetteten Dateien speichern

6. Fügen Sie die restlichen Grafiken wie bei den nachfolgenden Bildern ein, und bringen Sie

diese alle auf eine Höhe von 110 Pixel. Dabei wird das Seitenverhältnis beibehalten (Sei-

te 37).

7. Überprüfen Sie auch die Formatierung der Texte.

8. Speichern Sie den Zwischenstand der Webseite ab. Sie werden wieder gefragt, ob Sie die

eingebetteten Dateien speichern wollen. Klicken Sie auf [_OK_].

PASTAS04.JPG

J0076170.GIF

WINEGLSS.JPG





6.3 Zellen farbig gestalten

Um der Website ein "italienisches" Aussehen zu geben, sollen die Farben der Italienischen

Flagge - Grün, Weiß, Rot - in die einzelnen Zellen eingefügt werden. Außerdem sind die Zellen

der Überschriften-Zeile mit einem dunklen Rahmen einzufassen.

Beginnen wir mit den grünen und roten Rahmen um die Begriffe Pizza, Pasta, Salat und Geträn-

ke ganz oben auf der Seite:

Überschriften-Zeile nach der Formatierung

Die Breite der Spalten weicht vielleicht auf Ihrem Bildschirm von der in dieser Unterla-

ge gezeigten Breite ab. Dies hängt von der von Ihnen vorgenommen Größenände-

rung der Grafiken auf der Seite 44 ab.

1. Stellen Sie den Cursor am Seitenanfang in das Wort Pizza, und gehen Sie den Menüweg

Format, Rahmen und Schattierung.

2. Klicken Sie im Bereich Einstellung auf Kasten.

3. Wählen Sie die Farbe Grün aus.

4. Legen Sie die Breite auf 3px fest.

5. Klicken Sie auf [_OK_].

6. Auch für die drei anderen Wörter fügen Sie einen Rahmen ein:

Pasta: Rot,

Salat: Grün,

Getränke: Rot.

Farbige Rahmen zuweisen





6.4 Formatvorlagen

Einige Zellen sollen mit der Hintergrundfarbe Grün formatiert werden, z.B. die Zellen mit dem

Eintrag Telefon. Hier bietet es sich an, eine Formatvorlage zu erstellen, die Sie vielleicht auch

schon von Word kennen. Eine andere Bezeichnung für eine Formatvorlage ist Stil, und auf Eng-

lisch heißt die Formatvorlage Stylesheet oder kurz Style. Der große Vorteil: Falls Sie die Hin-

tergrundfarbe für diese Zellen ändern möchten, ist eine Änderung nur einmal bei der Formatvor-

lage notwendig.

Klicken Sie in die Zelle mit dem Wort Telefon:, und wählen Sie den Menüweg Tabelle, Markie-

ren, Zelle. Nun rufen Sie auf: Menü Format, Neue Formatvorlage.

1. In dem Dialogfenster ist der vorgeschlagene Name neueFormatvorlage1 markiert. Tippen

Sie den neuen Namen grün ein. Der Punkt am Anfang bleibt stehen!

2. Aktivieren Sie am oberen Rand das Kontrollkästchen

Neue Formatvorlage für Dokumentauswahl übernehmen.

Damit wird auch gleich die neue Formatvorlage auf die markierte Zelle übertragen.

3. Klicken Sie auf die Kategorie Zeichen. Übernehmen Sie die Schriftgröße (font-size) und

die Schriftauszeichnung (font-weight =Schrift-Gewichtung) aus dem nachfolgenden Bild:

Neue Formatvorlagen (bold ist die englische Bezeichnung für eine fette Schrift)

4. In der Kategorie Hintergrund wählen Sie als background-color die Farbe Grün:





Hintergrundfarbe Grün

5. Klicken Sie auf die Schaltfläche [_OK_]. Die Zelle wird formatiert.

6. Speichern Sie wieder ab.

6.5 Ein neues Symbol in die Tabellenleiste aufnehmen

Für die nachfolgenden Arbeiten ist sehr häufig eine einzelne Zelle zu markieren. Um dafür den

Menüweg Tabelle, Markieren, Zelle abzukürzen, fügen Sie die Schaltfläche Zelle auswählen in

die Symbolleiste Tabellen oder auch in jede andere Leiste ein:

1. Öffnen Sie die Symbolleiste Tabellen (Seite 26), falls sie geschlossen ist.

2. Wählen Sie den Menüweg Ansicht, Symbolleisten, Anpassen.

3. In dem Dialogfenster Anpassen markieren Sie auf der Registerkarte Befehle in der Kate-

gorie Tabelle den Befehl Zelle auswählen:





Eine neue Schaltfläche in eine Symbolleiste ziehen

4. Ziehen Sie die Schaltfläche bei gedrückter linker Maustaste in eine oder auch mehrere

Symbolleisten. Danach schließen Sie wieder das Dialogfenster Anpassen.

Neue Schaltfläche Zelle auswählen

6.6 Übung

1. Stellen Sie den Cursor in der Spalte Salat in die Zelle rechts von der Telefonnummer, und

markieren Sie sie über die neue Schaltfläche Zelle auswählen.

2. Erstellen Sie eine neue Formatvorlage unter dem Namen rot für die Hintergrundfarbe Rot,

und übertragen Sie damit auch das neue Format auf die markierte Zelle.

6.7 Aufgabenbereich Formatvorlagen übernehmen

Es werden noch grüne und rote Rahmen benötigt. Auf der Seite 46

haben Sie ja bereits in der ersten Zeile dieser Webseite jeweils um

die Wörter Pizza, Pasta, Salat und Getränke einen Rahmen gezo-

gen. Und das hat sich das Programm Expression gemerkt.

Stellen Sie den Cursor in der ersten Spalte unterhalb des Wortes

Telefon in das zentrierte Wort Pizza, und markieren Sie diese Zelle

über die neue Schaltfläche Zelle auswählen. Rufen Sie den Me-

nüweg Aufgabenbereiche, Formatvorlagen übernehmen auf. Der

rechts stehende Aufgabenbereich wird geöffnet. Neben den beiden

von Ihnen bereits erstellen Formatvorlagen .grün und .rot wurden

auch automatisch von jeder Formatierung weitere Formatvorlagen

festgehalten. Diese Formatvorlagen haben den Namen .style mit

einer Zahl. Diese Zahl kann in Ihrem Beispiel vom rechts stehenden

Bild abweichen!

Formatvorlage zuweisen





Klicken Sie mit der rechten Maustaste auf die Formatvorlage mit

dem grünen Rahmen, in diesem Beispiel mit dem Namen .style6. In

dem Kontextmenü wählen Sie den Befehl …umbenennen… Der

neue Namen ist rahmen_grün:

Formatvorlage umbenennen

Kontextmenü

Die Bezeichnung Klasse in diesem Zusammenhang, wollen wir zunächst einmal ignorieren.

Nachdem Sie über [_OK_] die Dialogbox geschlossen haben, klicken Sie im Aufgabenbereich mit

der linken Maustaste auf die Formatvorlage rahmen_grün. Die markierte Zelle mit dem Wort

Pizza ist jetzt grün umrahmt.

6.8 Übungen

1. Markieren Sie unterhalb der Telefonnummer die ganze Zelle mit dem "Pizzastücken".

2. In dem Aufgabenbereich gibt es auch bereits eine Formatvorlage für den roten Rahmen, im

oberen Bild mit dem Namen .style7. Ändern Sie den Namen in rahmen_rot.

3. Formatieren Sie die makierte Zelle mit der Formatvorlage rahmen_rot.

4. Gestalten Sie die Zellen nach dem folgenden Bild, indem Sie die entsprechenden Format-

vorlagen verwenden:

Farbige Gestaltung der Zellen

Hintergrund Grün

Hintergrund Rot

Rahmen Grün

Rahmen Rot

5. Speichern Sie regelmäßig die Zwischenstände ab.





6.9 Formatvorlage ändern

Um eine Formatvorlage zu ändern, klicken Sie wieder im Aufgabenbereich mit der rechten

Maustaste auf die entsprechende Formatvorlage. In dem Kontextmenü wählen Sie den Befehl

Formatvorlage ändern. Es erscheint das nachfolgende Dialogfenster, das vom Aufbau dem

Fenster von der Seite 47 entspricht:

Formatvorlage ändern

Nehmen Sie die Änderungen vor, und klicken Sie auf [_OK_].

6.10 Tabellenzellen trennen

Um die Preise für die Pizza besser zu platzieren, ist ein Teil der zweiten Spalte in drei Spalten zu

trennen. Markieren Sie mit gedrückter linker Maustaste die folgenden Zellen:

Zellen markieren





Wählen Sie den Menüweg Tabelle, Ändern, Zellen teilen. In der folgenden Dialogbox stellen

Sie 3 Spalten ein und klicken auf [_OK_]:

3 Spalten

Das Ergebnis:

Nach der Zellteilung

Schneiden Sie die Daten aus den Zellen rechts aus, von groß bis einschließlich 7,50, und fügen

Sie sie links davon wieder ein.

6.11 Spaltenbreite und Zeilenhöhe einstellen

Gestalten Sie die Textausrichtung der Preise nach dem folgenden Bild. Bei

der Einstellung der Spaltenbreite gibt sich das Programm etwas spröde. Über

das rechts stehende Symbol können Sie misslungene Schritte wieder rück-

gängig machen.

Symbol Rückgängig

Aktivieren Sie in der Symbolleiste Tabellen die Schaltfläche Layouttool anzeigen. Am oberen

Rand der ersten Zeile wird jetzt die Spaltenbreite in kleinen Infofeldern angezeigt, z.B. :





Textausrichtung und Spaltenbreite einstellen

Um die Breite einer Spalte zu ändern, klicken Sie in dem betreffenden

Infofeld auf das kleine Dreieck und wählen in dem Spalten-

menü den Befehl Spaltenbreite ändern. In der rechts stehenden

Dialogbox geben Sie die Breite in Pinxeln ein. Schalten Sie die Kon-

trollkästchen aus.

Spaltenmenü

Die Spaltenbreite einstellen

Zeilenhöhe

Bei allen Zellen, in denen der Text "nach oben" steht, ist noch die

Zeilenhöhe zu vergrößern. Klicken Sie am Zeilenanfang in dem jewei-

ligen Infofeld auf das kleine Dreieck, und wählen Sie in dem

Zeilenmenü den Befehl Zeilenhöhe ändern. Geben Sie eine Höhe

von 34 Pixel ein, und schalten Sie die Kontrollkästchen aus.

Die Höhe festlegen

6.12 Dialogfenster Suchen und Ersetzen

Da die Infofelder den Text "nach oben" teilweise verdecken, können Sie nach dem Text suchen

lassen. Wählen Sie den Menüweg Bearbeiten, Suchen. In dem nachfolgenden Dialogfenster

geben Sie den zu suchenden Text ein und klicken auf die Schaltfläche [Alle_suchen].





Nach Texten suchen

In einem zusätzlichen Fenster

unterhalb des Entwurfsfensters

werden nun die Fundstellen auf-

gelistet. Mit einem Doppelklick auf

eine Zeile markieren Sie den Text

im Entwurfsfenster.

Doppelklick auf die Fundstellen

Allerdings sind jetzt die Tabellen-Layouttools nicht mehr sichtbar. Falls Sie noch die Zeilenhöhe

einstellen möchten, können Sie auch mit der rechten Maustaste das Kontextmenü aufrufen und

den Befehl Zelleneigenschaften wählen. In dem nachfolgenden Dialogfenster tragen Sie die

Höhe ein:

Auch hier können Sie die Höhe angeben

Ersetzen

Wenn Sie in der oberen linken Ecke des Fundstellenfensters auf das grüne Dreieck klicken,

öffnet sich wieder das Dialogfenster Suchen und Ersetzen. Um Texte auszutauschen, klicken

Sie auf die Registerkarte Ersetzen. Möchten Sie nicht nur auf der aktuellen Seite Texte suchen

und/oder ersetzen lassen, aktivieren Sie in den Suchoptionen den Suchbereich Alle Seiten.

Zum Schließen des Fundstellenfensters klicken Sie unten links auf das Symbol .





6.13 Übungen

1. Deaktivieren Sie in der Symbolleiste Tabellen die Schaltfläche Layouttool anzeigen. Die

Symbolleiste aber geöffnet lassen, da Sie wieder die Schaltfläche Zelle auswählen benöti-

gen.

2. Gestalten Sie die Seite weiter entsprechend den folgenden Bildern. Arbeiten Sie nach Mög-

lichkeit mit den Formatvorlagen.

Hintergrund Grün

Hintergrund Rot

Rahmen Grün

Rahmen Rot

Pasta

Salat





Getränke

Nun wird noch der untere Teil der Seite gestaltet. In der vorletzten Zeile oberhalb der Telefon-

nummer sollen von links die ersten drei Zellen mit einem grünen Hintergrund formatiert werden.

Am Ende der Tabelle ist noch eine Zeile anzuhängen, deren Zellenhintergrund auf Rot einge-

stellt wird.

3. Stellen Sie den Cursor am Ende der Tabelle in die rechte Zelle, und drücken Sie die Tabu-

lator-Taste: Expression Web fügt eine neue Zeile unterhalb der Telefonnummer ein.

4. Für diese letzten drei Zeilen legen Sie eine Zeilenhöhe von 34 Pixel fest.

5. Gestalten Sie für die ersten drei Zellen in der drittletzten und in der letzten Zeile noch den

Hintergrund:

Eine weitere Zeile am Ende der Tabelle einfügen und den Hintergrund festlegen

Sie können mehrere zusammenhängende Zellen markieren und ihnen ein Format

zuweisen.

6.14 Tag bearbeiten

Wie bereits kurz auf der Seite 10 erwähnt, wird in der Code-Darstellung der Anfang und das

Ende eines HTML-Befehls durch spitze Klammern markiert, z.B. <strong>Hallo!</strong>.

Diese Markierungen werden in der Fachsprache Tags genannt. Im nachfolgenden Bild wurde

auf einer neuen, leeren Seite nur der Text "Hallo!" geschrieben und fett (strong) formatiert. Über

die Schaltflächen unten links wurde in die Ansicht Teilen umgeschaltet:





Die Ansicht Teilen

Im oberen Teil des Fensters sehen Sie den Code und im unteren den Entwurf. Die Trennlinie

zwischen den beiden Teilen können Sie wie üblich mit der Maus verschieben.

Der Text "Hallo!" ist markiert. Die aktuellen Tags der Cursorposition sehen Sie aber nicht nur in

der Codeansicht, sondern in der Entwurfsansicht auch am oberen Rand in einer Leiste

unterhalb der Seiten-Register:

Die Leiste Direktauswahl von Tags unterhalb der Seiten-Register

Falls die Leiste Direktauswahl von Tags nicht sichtbar ist, wird sie im Ansicht-Menü aktiviert.

Wenn Sie mit der Maus auf einen Tag nur zeigen, ist zum einen in der Schaltfläche zu-

sätzlich ein Listenpfeil zu sehen und zum anderen wird der betreffende Bereich im Entwurfs-

fenster mit einem blauen Rahmen gekennzeichnet. Mit einem Klick auf den linken Teil der

Schaltfläche wird der betreffende Bereich (Text, Zelle, Zeile, Tabelle, Bild etc.) markiert.

Dagegen öffnet ein Klick auf den Listenpfeil ein Auswahlmenü, wie es im nachfolgenden Ab-

schnitt zu sehen ist.

Der Direkt-Editor für Tags

Nun wieder zurück zum Ende unserer Speisekarte. In dem folgenden Bild wurden aus Versehen

auch die Zellen der rechten Spalte mit den Formatvorlagen Grün und Rot formatiert:

Aus Versehen wurden auch die Zellen der rechten Spalte grün und rot formatiert

Natürlich können Sie diese Zuweisungen gleich wieder rückgängig machen:





(Strg)+(Z)

(Alt)+(æ__) Rücktaste

Symbol Rückgängig

Menü Bearbeiten, Rückgängig.

Wenn Sie aber erst später den Fehler bemerken, stellen Sie den Cur-

sor in die falsch formatierte Zelle. Zeigen Sie oben in der Leiste Direk-

tauswahl von Tags auf den Tag , und klicken Sie auf den Lis-

tenpfeil . Aus dem Menü wählen Sie den Befehl Tag bearbeiten.

Der Direkt-Editor für Tags wird geöffnet. Markieren Sie die Zeichen-

folge

class="grün"

Tag-Auswahlmenü

Auch hier kann der Code bearbeitet werden

Die abschließende spitze Klammer > wird nicht markiert! Zum Löschen dieser markierten

Zeichenfolge drücken Sie die (Entf)-Taste und klicken auf das grüne Häkchen. Der Di-

rekt-Editor für Tags wird geschlossen. Entfernen Sie ebenso die Formatvorlage mit dem

roten Hintergrund.

6.15 Zellen verbinden und Trennlinien einfügen

Ganz am Anfang unserer Speisekarte soll

unterhalb der Überschriftenzeile eine horizon-

tale Linie eingefügt werden. Sie soll sich

durchgängig über vier Zellen erstrecken.

Um die vier Zellen in der dritten Zeile zu ver-

binden, müssen Sie diese zunächst markie-

ren, z.B. mit der Maus links von der Tabel-

le. Wählen Sie dann den Menüweg Tabelle,

Ändern, Zellen verbinden. Die einzelnen

Zellen werden verbunden.

Menü Tabelle, Ändern, Zellen verbinden

In der dritten Tabellenzeile sind jetzt die Zellen verbunden





Klicken Sie in die verbundenen Zellen

hinein. Über den Menüweg Einfügen,

HTML, Horizontale Linie fügen Sie eine

Linie ein.

Der Cursor blinkt nun am rechten Rand

der neu eingefügten Linie. Drücken Sie

jetzt einmal die (¢)-Taste (Return- oder

Eingabe-Taste), um die Zeilenhöhe zu

vergrößern:

Horizontale Linie einfügen

Eingefügte Linie mit dem Cursor unten links

Speichern Sie wieder ab, und betrachten Sie das Ergebnis in der Browservorschau (Seite 31).





Inhaltsverzeichnis 1 Vorbemerkungen .................................................................................................................... 5

1.1 Tasten-Bezeichnungen .................................................................................................. 5 2 Wissen rund um das Internet ................................................................................................ 6

2.1 Das World Wide Web .................................................................................................... 7 2.2 Das Modem .................................................................................................................... 9 2.3 Internet Service Provider (ISP) ...................................................................................... 9 2.4 HTML - Die Web-Sprache............................................................................................ 10

3 Planung der Internet-Seiten ................................................................................................ 11 3.1 Allgemeine Überlegungen ............................................................................................ 11 3.2 Die Schulungs-Firma in dieser Unterlage .................................................................... 11

4 Das Programm Expression Web ......................................................................................... 13 4.1 Expression Web starten ............................................................................................... 13 4.2 Eine neue Website anlegen ......................................................................................... 14 4.3 Den Seitennamen umbenennen .................................................................................. 16 4.4 Der Expression Web Bildschirm .................................................................................. 16 4.5 Weitere Seiten hinzufügen ........................................................................................... 18 4.6 Übung ........................................................................................................................... 19 4.7 Die Aufgabenbereiche ein- und ausschalten ............................................................... 20

5 Gestalten der Startseite ....................................................................................................... 22 5.1 Eine Tabelle erstellen ................................................................................................... 22 5.2 Die Symbolleiste Tabellen ............................................................................................ 23 5.3 Grafiken einfügen ......................................................................................................... 26 5.4 Übungen ....................................................................................................................... 27 5.5 Text einfügen ............................................................................................................... 30 5.6 Vorschau ...................................................................................................................... 31 5.7 Übung ........................................................................................................................... 32 5.8 Rahmen um die Flaggen erstellen ............................................................................... 32 5.9 Tabelle ohne Rahmen .................................................................................................. 32 5.10 Übung ........................................................................................................................... 33 5.11 Grafiken bearbeiten...................................................................................................... 33 5.12 Übungen ....................................................................................................................... 37 5.13 Animierte Grafik ........................................................................................................... 38 5.14 Rahmen für eine Tabelle .............................................................................................. 39 5.15 Übungen ....................................................................................................................... 40

6 Die Seite speisen.htm gestalten ......................................................................................... 41 6.1 Ihre Aufgaben ............................................................................................................... 44 6.2 Übungen ....................................................................................................................... 44 6.3 Zellen farbig gestalten .................................................................................................. 46 6.4 Formatvorlagen ............................................................................................................ 47 6.5 Ein neues Symbol in die Tabellenleiste aufnehmen .................................................... 48 6.6 Übung ........................................................................................................................... 49 6.7 Aufgabenbereich Formatvorlagen übernehmen .......................................................... 49 6.8 Übungen ....................................................................................................................... 50 6.9 Formatvorlage ändern .................................................................................................. 51 6.10 Tabellenzellen trennen ................................................................................................. 51 6.11 Spaltenbreite und Zeilenhöhe einstellen ...................................................................... 52 6.12 Dialogfenster Suchen und Ersetzen ............................................................................. 53 6.13 Übungen ....................................................................................................................... 55 6.14 Tag bearbeiten ............................................................................................................. 56 6.15 Zellen verbinden und Trennlinien einfügen .................................................................. 58

7 Textmarken und Hyperlinks definieren .............................................................................. 60 7.1 Übung ........................................................................................................................... 60 7.2 Übung ........................................................................................................................... 61





7.3 Die Hyperlinks ausprobieren ........................................................................................ 62 7.4 Übung ........................................................................................................................... 63 7.5 Seitenübergreifende Hyperlinks ................................................................................... 63 7.6 Übung ........................................................................................................................... 64

8 Ein Bestellformular entwerfen ............................................................................................ 65 8.1 Formularsteuerlemente ................................................................................................ 65 8.2 Textfelder ..................................................................................................................... 66 8.3 Tageigenschaften......................................................................................................... 66 8.4 Übungen ....................................................................................................................... 67 8.5 Übung ........................................................................................................................... 68 8.6 Die Schaltflächen Absenden und Zurücksetzen .......................................................... 68 8.7 Übungen ....................................................................................................................... 70 8.8 Formular testen ............................................................................................................ 71 8.9 Die Ansicht Hyperlinks ................................................................................................. 72

9 Kompatibilität ....................................................................................................................... 73 9.1 Kompatibilitätsprüfung .................................................................................................. 73

10 Grafiken bearbeiten .............................................................................................................. 74 10.1 Übungen ....................................................................................................................... 75

11 Website veröffentlichen bzw. aktualisieren ....................................................................... 76 11.1 Änderungen übertragen ............................................................................................... 78

12 Frames ................................................................................................................................... 79 12.1 Neue Website anlegen ................................................................................................. 79 12.2 Seitenvorlagen ............................................................................................................. 82 12.3 Hauptframe .................................................................................................................. 83 12.4 Bannerframe ................................................................................................................ 84 12.5 Inhaltsframe ................................................................................................................. 85 12.6 Übungen ....................................................................................................................... 87 12.7 Trennlinien ................................................................................................................... 88 12.8 Seitentitel...................................................................................................................... 90

13 CSS-Datei .............................................................................................................................. 91 13.1 Eine CSS-Datei erstellen ............................................................................................. 91 13.2 Formatvorlagen in die CSS-Datei verschieben ............................................................ 92 13.3 Formatvorlagen ändern ................................................................................................ 93

14 Dynamische Webvorlagen ................................................................................................... 94 14.1 Übungen ....................................................................................................................... 94 14.2 Webvorlage anlegen .................................................................................................... 94 14.3 Inhalte kopieren ............................................................................................................ 97 14.4 Bearbeitbaren Bereich einstellen ................................................................................. 97 14.5 Neue Webseite mit einer Vorlage erstellen .................................................................. 99 14.6 Übungen ..................................................................................................................... 100 14.7 Webvorlage ändern .................................................................................................... 101 14.8 Übungen ..................................................................................................................... 102 14.9 Übungen ..................................................................................................................... 103

15 Stichwortverzeichnis ......................................................................................................... 105


Beim einmaligen Kauf der Dettmer-Seminarunterlagen für ... · Beim einmaligen Kauf der...

Documents

Transcript of Beim einmaligen Kauf der Dettmer-Seminarunterlagen für ... · Beim einmaligen Kauf der...