Dieses Layout wollen wir erstellen:

Vorweg möchte ich mich bei allen Mac-Anwendern entschuldigen. Mein altes IBook lässt GoLive CS 2 nicht mehr zu und mein neuer Mac Intel wird erst in den nächsten Wochen bestellt. Deshalb zeige ich hier alles auf dem PC auf. Andererseits ist es ja heute überhaupt kein Problem mehr, weil die Programme auf PC und Mac sehr ähnlich sind.

Fragen, Kritik, etc. zum Workshop können im entsprechenden Forenthema [0] geschrieben werden.

Startseite:
 Folgeseite:
projektansicht_home projektansicht_folge

Vorbereitungen

Als erstes erstellen wir in GoLive eine neue Web-Site:
Datei - Neu - Web-Site - Web-Site erstellen - Name "Snowball" und Speicherort festlegen - weiter - weiter - wir legen keinen Server fest = Fertig stellen.

Danach lade das zip "medien" [1066] runter, entpacke es und lege es in den Stammordner der eben erstellten Web-Site "Snowball" (also in das Verzeichnis "web-content".

Ansicht im MS Explorer: Ansicht im Dateimanager von GoLive:
verzeichnisstruktur verzeichnisstruktur-gl

Die erste Seite

Erstellen des Layouts im HTML-Code

Ich habe mir lange überlegt, ob wir hier nun den Weg des "früheren" Webdesigns mit Tabellen in GoLive oder gleich einen professionelleren Weg gehen sollten. Ich habe mich für die zweite Variante entschieden. Dabei müssen wir etwas Code schreiben, doch ich denke, dass dies in einem kleinen Umfang und deshalb durchwegs einfach und lernbar ist.

Wer etwas weniger im Code arbeiten möchte, kann diese Layer auch im Layout-Editor von GoLive erstellen und anschliessend das CSS in ein externes CSS exportieren. Hier [0] wird beschrieben, wie dies machbar ist.

In diesem Workshop coden wir nun aber: ;)

Öffne die bereits erstelle Seite "index.html" und ersetze das "Unbenannte Seite" mit "Startseite Snwoball". Anschliessende wechsle in das Register "Quelle". Für unsere Website haben wir nun eine sehr einfaches Grundlayout das folgendermassen aussieht:
Den äussere Layer nennen wir "container". css-layoutDie anderen Layer gemäss nachfolgender Auflistung:
- top
- navi
- img-row
- content
- bottom
Zuerst erstellen wir nun den HTML-Code und nachfolgend die zugehörigen Cascading Style Sheets.
Wir beginnen mit dem Erstellen des Containers, welcher die Website automatisch horizontal zentriert darstellen soll. Nachfolgende Codezeile setzen wir an Stelle des vorhanden

 

innerhalb des tags.


Und nun sollen in diesen Container hinein alle übrigen Div's platziert werden. Wenn wir die abzählen sind es insgesamt noch fünf weitere Layer (DIV's) welche wir in den Container hinein platzieren müssen. Diese fünf DIV's müssen vor dem End-Tag des Container-Div's reingesetzt werden. Wir machen es uns sehr einfach und kopieren die obigen Codzeile fünffach in den Layer des Container's. Danach benenne wir diese nach bereits erwähntem Schema und füllen in die Tags auch gleich noch den Namen der einzelnen DIVs ein, was dann folgendermassen aussieht:

html-code

Es ist empfehlenswert, bei Verschachtelungen von DIV's die jeweiligen End-Tags zu beschriften (siehe letzte Zeile), damit jederzeit die Übersicht über den Seitenaufbau besteht.

Gratulation - die erste Website im HTML-Code ist geschrieben!!!

Im Layouteditor sieht dies nun natürlich aus, als ob wir einfach einige Zeilen übereinander geschrieben hätten:

layout_ansicht_html

 

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.11.2021 - 10.12.2021

Digicomp Academy AG, Zürich
Freitag, 05. Nov. 2021, 13.00 Uhr - Freitag, 10. Dez. 2021, 19.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: 3'250.– zzgl. 7.7% MWST
Dauer: 8.5 Tage (ca. 56 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB

Veranstaltungen
14.02.2022

Zürich, Online
Montag, 14. Feb. 2022, 07.30 - 18.00 Uhr

Word Press / Digitalisierung / Selbständigkeit

Digitalisierung und KMU's in der Schweiz Leistungsfähig im Zeitalter der Digitalisierung Machine Learning Künstliche Intelligenz CRM Change Management Kommunikation im Betrieb Kommunikation digitale Medien Digitale Vertriebsmodelle

Ja

Organisator: B. Isik

Kontaktinformation: B. Isik / Daniela Lovric, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/website-mit-wix-erstellen/

HDS Portalpartner
HDS Portalpartner
PBU_Logo_weiss
HDS Portalpartner
callas_grau
HDS Portalpartner
AXA_Company_logo_rgb_Graustufen