[How²]Erstellen einer Einfachen Webseite (Für Anfänger)

11.05.2008, 18:05

Herzlich willkommen zu meinem kleinem Tutorial zum errichten der ersten Webseite auf HTML Basis.
Das einzige Programm das man sich im vorhinein vielleicht herunterladen sollte ist
Adobe Dreamweaver CS4
Es ist zwar nur eine 30 Tage Testversion reicht aber für unsere Zwecke völlig aus.
Inhaltsverzeichnis:
1. Hoster
2. Der WYSIWYG-Editor
3. Hinzufügen eines Servers
4. Entfernen der Standard Daten
5. Coden und Konfigurieren der Startseite
6. Dupliziern der index.htm für weitere Seiten

1. Bitte legt euch ein kostenloses Konto bei einem Freehoster an.
In unserem Bespiel bplaced.net
Dort einfach anmelden und die E-Mail bestätigen.
Arcor legt diesen Absender Standardmäßig in den Spam Ordner weshalb ihr vergeblich auf die Email mit Outlook warten könnt.
Wenn das getan ist einfach auf

] einloggen.

Ok. Damit wäre die Beschaffung des Webspaces erledigt.

2. Nun kommt Dreamweaver zum Einsatz.
Startet ihn nach der Installation und öffnet den Reiter Dateien auf der rechten Seite.

3. Klickt auf Sites verwalten. Dann auf Neu. Und dann auf FTP -& RDS-Server.
Nun wird sich bei euch folgendes Fensterchen öffnen:

Tragt in Name: den Namen ein der ihr eurem Server geben wollt.
FTP bei Zugriffsart: muss hingegen stehen bleiben.
Bei FTP-Host: muss das ganze dann so aussehen.
In einem kurzen Beispiel erklärt.
Habt ihr bei bplaced den Namen Dummkopf gewählt tragt ihr in dem Feld
dummkopf.bplaced.net
ein
also den Usernamen und dann .bplaced.net
Wenn das getan ist weiter zu Anmeldung und Kennwort.
Einfach euren Benutzernamen und euer Kennwort von bplaced.net eintragen.
Dass war es dann auch eigentlich damit.
Nun noch auf OK drücken und warten bis euer Computer die Dateien geladen hat.
Das muss dann so aussehen:

4. Nun auf jede Datei/Ordner drücken -> Rachtsklick -> Bearbeiten -> Löschen
Wenn das getan ist sollte dort nur noch .ftpquota stehen.

5. Nun ein Rechtsklick ins weiße Feld rechts und auf neue Datei drücken.
Nennt sie index.htm
Doppelklick drauf um sie zu öffnen.
Nun öffnet sich der Quellcode der Seite.
Er sollte bei jedem so aussehen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Unbenanntes Dokument</title>
  </head>
  

  <body>
  <br /><div style="z-index:3" class="smallfont" align="center">SEO by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div></body>
  </html>

Um der Seite einen Titel zu geben ändern wir jetzt einfach mal Unbenanntes Dokument in
Startseite.

Da das erstellen von Websiten via Quellcode etwas schwieriger ist werden wir im Entwurfsmodus weitermachen.
Dafür einfach auf den Button oben klicken

Was sich uns nun Zeigt ist weiß...
Das ändern wir mal fix.
Drückt jetzt Strg+J um die Seiteneigenschaften aufzurufen.
Dort sieht man jetzt mehrere Auswahlmöglichkeiten.
Wir bleiben auf der ersten Seite und wählen unter Hintergrundfarbe eine uns als angenehm vorkommende Farbe aus. In unserem Beispiel #FFE0C1
Das kann natürlich nach Belieben geändert werden.
Das kann natürlich nach Belieben geändert werden.
Nun werden wir eine Tabelle erstellen in den der Seitentitel, Navigation und Inhalt eingtragen werden.
Es ist zu umständlich das jetzt für blutige Anfänger zu erklären weswegen ich einfach den Code der einzufügen ist hierreinschreibe.
Fügt das hier unter
<body> ein.

Code:

  <table width="730" height="78" border="1" align="center">
    <tr>
      <th scope="col">&nbsp;</th>
    </tr>
  </table>
  <table width="730" height="344" border="1" align="center">
    <tr>
      <th width="727" scope="row"><table width="138" height="371" border="1" align="left">
        <tr>
          <th height="174" scope="row">&nbsp;</th>
        </tr>
      </table></th>
    </tr>
  </table>

Jetzt sollte es bei euch so aussehen.

natürlich kommt dass auch auf die Farbe an die Ihr gewählt habt.

Jetzt klickt in die obere Tabelle und gebt den Titel ein den Ihr eurer Seite geben wollt.
In unserem Beispiel wird einfach PCMasters How² benutzt.

Jetzt haben wir den Aufbau und eine Überschrift.
Fehlt noch Inhalt und die Navigation.
Kommen wir jetzt zum zweiten.
Die Navigation zu erstellen ist eigentlich sehr Simpel.
Klickt euch in die linke Tabelle.
Drückt dann oben auf dieses Symbol:

Nun wird sich euch ein neues Fensterchen öffnen.

Tragt bei Text den Namen ein den der Link anzeigen soll.
Nehmen wir einfach mal Hauptseite
Dann da die Hauptseite Standardmäßig index.htm heißt kommt dies dann auch in Hyperlink.
Das wars dann schon also Ok drücken.
Nun haben wir eine leere Seite.
Überlegt euch jetzt was ihr für Seiten haben wollt das es im Nachhinnein etwas schwierig werden kann alles Navigationslinks zu ändern.
Dann macht ihr das gleiche wie mit Hauptseite nur dass ihr jetzt statt index.htm
jeweils den Seitennamen nehmt.
Also wenn der Link FAQ ist nehmt ihr zu der Seite auch faq.htm.

6. Die Seiten bekommt ihr indem ihr einfach Rechtsklick auf index.htm macht

dann auf Bearbeiten -> Duplizieren -> klick auf die neue Datei und F2.
Dann könnt ihr die Datei umbennen wie bei uns jetzt faq.htm.
Dann könnte ihr die jeweiligen Seiten mit Inhalt füllen und euch über eure neue Seite freuen ^^.
Ok
es werden noch Verbesserungen kommen aber vom Aufbau und den Infos sag ich einfach

FERTIG

LOG:
18.5.08: Inhaltsverzeichnis hinzugefügt

13.05.2008, 18:16

Ich würd sagen fertig ^^
würd mich über Feedback freuen und auch gerne einige Ergebnisse sehen

13.05.2008, 18:35

Schaut ganz nett aus, auch wenn ich persönlich kein Fan von <table> bin und lieber alles mit <div> definiere

18.05.2008, 16:18

So
jetzt ist auch ein schönes Inhaltsverzeichnis drin ^^
Wäre nett wenn das Thema ein Mod pinnen könnte

14.03.2009, 17:29

öhhhm

die bilder sind im IE sowie im Firefox nicht sichtbar.
kann das bitte mal korrigiert werden?
danke :=)

14.03.2009, 17:56

Das liegt leider nicht an den Browsern...
sind schlicht und einfach das dieser "nette" Imagehoster sie gelöscht hat....
ich werde sie so schnell wie möglich neu machen und einfügen