Zum Inhalt springen

HTML profis unter uns ?

SenoL

Von SenoL
in Off-Topic

 Teilen

Empfohlene Beiträge

SenoL

SenoL

Geschrieben
Geschrieben

Ich hab mit Photoshop ein Template für mein HP erstellt.

 

Jetzt will ich es mit HTML PHASE 5 editor bearbeiten aber ich komm nicht ganz klar.:confused:

 

Jetzt hab ich ein paar fragen wie z.B.

 

Wenn man auf ein Button drück wechselt ja die Layout, wie kann ich das machen ?

 

 

Hat jemand zeit und lust, meine fragen zu beantworten.

 

MSN seni-76@hotmail.com

ICQ 494819035

Link zu diesem Kommentar
Auf anderen Seiten teilen
Christian Thomann

Christian Thomann

Geschrieben
Geschrieben
..Wenn man auf ein Button drück wechselt ja die Layout, wie kann ich das machen ?

 

Hoi Senol

 

Kannst du etwas genauer ausdrücken, was du beabsichtigst, mit dem Button? Ich vermute, es hat einfach etwas mit CSS zu tun.

Link zu diesem Kommentar
Auf anderen Seiten teilen
SenoL

SenoL

Geschrieben
  • Autor
Geschrieben

Ich schreib mal auf was ich vor habe.

 

Ich hab mir in Photoshop eine Template für meine Website erstellt

 

template.jpg

 

und dann hab ich die Template in html datei umgewandelt.

 

Und jetzt komm ich nicht weiter, ich weiss nicht was ich in Html editor ändern muss.

Link zu diesem Kommentar
Auf anderen Seiten teilen
Romair

Romair

Geschrieben
Geschrieben
Nein als .html

 

Hallo Senol

 

Ein Webtemplate ist Dein nicht. Das ist ein Bild-Layout Deiner Homepage und das muss man jetzt HTML -und Layouttechnisch zu einem HTML Template umsetzen. Ein HTML-Template brauchst Du dann, wenn Du eben Folgeseiten oder verlinkte Seiten mit oder ohne HTML Frames erstellen willst welche dasselbe aussehen erhalten sollen. Man nennt das Corporated Design.

 

Ich sage das hier nur, dass man nicht in Versuchung kommt, HTML Webseiten in vollen Bilder darzustellen auch wenn unsere Netzanbindungen

viel besser geworden sind. Die Seitenbeschreibungssprache ist nun mal HTML und .jpg, .gif oder .png für Bilder.

 

Versuche Dir mal ein wenig auf die Spur zu helfen. Ich arbeite zwar nicht mit dem Photoshop aber wenn Du mit dem ein Bild als HTML speichern kannst, hast Du vermutlich eine einfache Page mit einem Bild erzeugt und das sieht im Code etwas so aus:

 

<!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=iso-8859-1" />

<title>SENOL's HOMEPAGE</title>

</head>

<body>

<img src="images/template.jpg" width="800" height="556" alt="SENOL" />

</body>

</html>

 

Das ist eine Seite mit einem Bild. Wenn Du nun aus einem Bild heraus HyperLinks erstellen willst, muss man das mit Javascript machen und das sind ImageMaps. ImageMaps muss Dein Editor können. ImageMaps begrenzen die Hyperlinkfunktionen auf eine ausgewälhte Fläche z. B. ein Kopf.

 

Du kannst auch das Bild in Tabelleneinheiten so zerschneiden, dass Du Bildteile wenn man draufdrückt mit einem Hyperlink ausstatten kannst, aber das ist bei Deinem Layout gar nicht so einfach (gibt grössere Tabelle).

 

Mit Deinem Bild als Layout müsstest Du eine grosse Anzahl solcher ImageMaps machen und das gäbe doch etwas lange Ladezeiten und für Suchmaschinen ist das auch ungeeignet.

Suchmaschinen benötigen vorzugsweise auch HTML Texte.

Dein Layout solltest Du aufteilen, in ImageMaps (obere Teil) und ganz normalen Hyperlinks in den News und Links.

 

Damit Du die HTML Links ins Bildlayout setzen kannst, musst Du das Bild zerschneiden und den unteren Teil als Tabellenlayouthintergund nehmen und die Links in HTML in die Tabelle einsetzen. Dein Bild-Layout ist gerade noch so vertretbar als Tabellenlayout. Tabellenhintergründe mit Bildteilen werden heute durch alle Browser dargestellt.

 

Tabellenlayouts sind auch schon nicht mehr das wahre. Heute nimmt man vermehrt CSS als Codesprache auch für Tabellen. Als müsstest Du mit CSS Layouten. Wiederum wäre lernen angegsagt.

 

Wie Du oben im Code siehst, besteht die Homepage damit meint man immer die erste Seite aus einem <HEAD></HEAD und einem <BODY></BODY> Den HEAD benötigt man für den Titel in allen Seiten andere HEAD-Tags wie KEYWORDS aber eher nur auf der Homepage sprich 1. Seite.

Im Head sind alle Angaben für die Suchmaschine und das Marketing und im Body alle Tabellen, Bilder und HTML Texte. Alles im Body wird wenn richtig coded vom Browser ausgezeichnet.

 

Wie Du hier siehst, besteht eine gute Homepage aus verschieden HTML Techologie Ableger und das muss man Schritt für Schritt lernen.

 

Ich könnte Dir allenfalls eine etwas ältere aber wirklich gute Dreamweaver version abgeben. Dann hättest ein Profieditor.

 

Sonst frage einfach weiter. Bitte lese auch die Todsünden des Webdesigns wie keine unfertigen Baustellen möglichst noch mit einer Baustellenbild animiert. - keine Mailadresse in den Head sonst hast Du Spamflut ohne Ende. Es gibt noch mehrere solche Todsünden. Findest Du im Netz bei Webdesign.

 

Nun, habe einiges gesagt. Gruess Roger

Link zu diesem Kommentar
Auf anderen Seiten teilen
SenoL

SenoL

Geschrieben
  • Autor
Geschrieben

Danke dir Roger

 

So sieht es aus

 

<html>

<head>

<title>template1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- ImageReady Slices (template1.jpg) -->

<table id="Tabelle_01" width="1001" height="695" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="22">

<img src="Bilder/index_01.jpg" width="1000" height="7" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="7" alt=""></td>

</tr>

<tr>

<td colspan="22">

<img src="Bilder/index_02.jpg" width="1000" height="116" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="116" alt=""></td>

</tr>

<tr>

<td colspan="22">

<img src="Bilder/index_03.jpg" width="1000" height="17" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="17" alt=""></td>

</tr>

<tr>

<td colspan="5">

<img src="Bilder/index_04.jpg" width="205" height="14" alt=""></td>

<td colspan="3" rowspan="2">

<a href="index.html"><img src="Bilder/index_05.jpg" width="250" height="71 alt=""></td>

<td colspan="4">

<img src="Bilder/index_06.jpg" width="239" height="14" alt=""></td>

<td colspan="7" rowspan="2">

<img src="Bilder/index_07.jpg" width="162" height="51" alt=""></td>

<td colspan="3">

<img src="Bilder/index_08.jpg" width="219" height="14" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="14" alt=""></td>

</tr>

<tr>

<td colspan="4" rowspan="3">

<img src="Bilder/index_09.jpg" width="185" height="62" alt=""></td>

<td rowspan="4">

<img src="Bilder/index_10.jpg" width="20" height="90" alt=""></td>

<td rowspan="18">

<img src="Bilder/index_11.jpg" width="19" height="540" alt=""></td>

<td colspan="2" rowspan="2">

<img src="Bilder/index_12.jpg" width="192" height="56" alt=""></td>

<td rowspan="8">

<img src="Bilder/index_13.jpg" width="28" height="329" alt=""></td>

<td rowspan="18">

<img src="Bilder/index_14.jpg" width="27" height="540" alt=""></td>

<td rowspan="3">

<img src="Bilder/index_15.jpg" width="180" height="62" alt=""></td>

<td rowspan="18">

<img src="Bilder/index_16.jpg" width="12" height="540" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="37" alt=""></td>

</tr>

<tr>

<td colspan="3" rowspan="3">

<img src="Bilder/index_17.jpg" width="175" height="53" alt=""></td>

<td colspan="7" rowspan="7">

<img src="Bilder/index_18.jpg" width="162" height="292" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="19" alt=""></td>

</tr>

<tr>

<td colspan="2" rowspan="6">

<img src="Bilder/index_19.jpg" width="192" height="273" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="6" alt=""></td>

</tr>

<tr>

<td colspan="4">

<img src="Bilder/index_20.jpg" width="185" height="28" alt=""></td>

<td rowspan="15">

<img src="Bilder/index_21.jpg" width="180" height="478" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="28" alt=""></td>

</tr>

<tr>

<td colspan="3">

<img src="Bilder/index_22.jpg" width="111" height="44" alt=""></td>

<td colspan="3">

<img src="Bilder/index_23.jpg" width="202" height="44" alt=""></td>

<td colspan="2">

<img src="Bilder/index_24.jpg" width="67" height="44" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="44" alt=""></td>

</tr>

<tr>

<td colspan="2" rowspan="2">

<img src="Bilder/index_25.jpg" width="65" height="151" alt=""></td>

<td colspan="5">

<img src="Bilder/index_26.jpg" width="287" height="134" alt=""></td>

<td rowspan="13">

<img src="Bilder/index_27.jpg" width="28" height="406" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="134" alt=""></td>

</tr>

<tr>

<td colspan="5">

<img src="Bilder/index_28.jpg" width="287" height="17" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="17" alt=""></td>

</tr>

<tr>

<td rowspan="11">

<img src="Bilder/index_29.jpg" width="35" height="255" alt=""></td>

<td colspan="3" rowspan="2">

<img src="Bilder/index_30.jpg" width="150" height="45" alt=""></td>

<td colspan="3" rowspan="11">

<img src="Bilder/index_31.jpg" width="167" height="255" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="44" alt=""></td>

</tr>

<tr>

<td rowspan="10">

<img src="Bilder/index_32.jpg" width="100" height="211" alt=""></td>

<td colspan="3" rowspan="2">

<img src="Bilder/index_33.jpg" width="144" height="45" alt=""></td>

<td colspan="6" rowspan="2">

<img src="Bilder/index_34.jpg" width="138" height="45" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>

</tr>

<tr>

<td colspan="3" rowspan="9">

<img src="Bilder/index_35.jpg" width="150" height="210" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="44" alt=""></td>

</tr>

<tr>

<td colspan="4">

<img src="Bilder/index_36.jpg" width="168" height="24" alt=""></td>

<body link="#FF0000" vlink="#00FF00" alink="#0000FF">

 

 

</body>

<td colspan="5">

<img src="Bilder/index_37.jpg" width="114" height="24" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="24" alt=""></td>

</tr>

<tr>

<td colspan="8">

<img src="Bilder/index_38.jpg" width="252" height="28" alt=""></td>

<td rowspan="7">

<img src="Bilder/index_39.jpg" width="30" height="142" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="28" alt=""></td>

</tr>

<tr>

<td colspan="5" rowspan="2">

<img src="Bilder/index_40.jpg" width="183" height="29" alt=""></td>

<td colspan="3">

<img src="Bilder/index_41.jpg" width="69" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>

</tr>

<tr>

<td colspan="3">

<img src="Bilder/index_42.jpg" width="69" height="28" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="28" alt=""></td>

</tr>

<tr>

<td colspan="7">

<img src="Bilder/index_43.jpg" width="216" height="29" alt=""></td>

<td rowspan="4">

<img src="Bilder/index_44.jpg" width="36" height="85" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="29" alt=""></td>

</tr>

<tr>

<td colspan="6" rowspan="2">

<img src="Bilder/index_45.jpg" width="197" height="32" alt=""></td>

<td>

<img src="Bilder/index_46.jpg" width="19" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>

</tr>

<tr>

<td rowspan="2">

<img src="Bilder/index_47.jpg" width="19" height="55" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="31" alt=""></td>

</tr>

<tr>

<td colspan="6">

<img src="Bilder/index_48.jpg" width="197" height="24" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="1" height="24" alt=""></td>

</tr>

<tr>

<td>

<img src="Bilder/Abstandhalter.gif" width="35" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="30" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="46" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="74" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="20" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="108" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="39" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="28" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="100" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="92" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="28" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="24" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="24" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="14" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="36" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="30" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="180" height="1" alt=""></td>

<td>

<img src="Bilder/Abstandhalter.gif" width="12" height="1" alt=""></td>

<td></td>

</tr>

</table>

<!-- End ImageReady Slices -->

</body>

</html>

 

<a href="index.html"></a>

 

 

 

 

Die Bilder hab ich schon in Photoshop zugeschneidet

 

Unbenannt-19.jpg

Link zu diesem Kommentar
Auf anderen Seiten teilen
Romair

Romair

Geschrieben
Geschrieben

Hallo Senol

 

Du hast hier ein Photoshop-Tool zum automatischen zerschneiden des Bildes eingesetzt. Diese Zerschnitte wurden dann in in Tabellentags gesetzt. Die Bilder wurden einfach irgenwie fortlaufend benannt.

 

Die Bildelemente die Du für Hyperlink einsetzen möchtest hast Du irgenwie durchgeschnitten nur nicht Hyperlink gerecht. Damit ich da eingreifen könnte, müsste ich von Dir das Bild und haben und das selbst aufteilen und benennen. Das würde dann schon ein umfassendes Design Tabellenlayout bedeuten oder es müsste mit Layer gearbeitet werden aber auch da ist Eingriff notwendig. .

Zeitlich wäre das Imagemap das schnellste aber eben für eine gute Homepage keine gute Lösung. Zu viele Imagemaps.

 

Das Zerschneiden müsste maunell erfolgen so, dass wirklich nur notwendige Bildelemente als Bild in die Tabelle kommen.

 

Ich sagte Dir bereits die Text müsstest Du als HTML linke einarbeiten sonst hast Du ja nur ein Bild-Layout mit jeweils ein Hyperlink als Bild wo aber nur Text drin steht. Keine gute Lösung.

 

Sorry ich kann Dir hier das lernen eines guten Editors oder HTML nicht abnehmen so müsste ich Dir ja die Homepage erstellen. Dein Bildzerschnitt könnte ich nicht brauchen. (Komische Einzelbilder selektion) Bilder

 

Das Bild ist und bleibt ein Bildlayout und kein HTML Layout deshalb muss es artgerecht designt werden und dazu kann ich die Zeit nicht aufwenden.

 

Senol ich hoffe, Du kannst da selbst weiterarbeiten.

 

Gruess Roger

Link zu diesem Kommentar
Auf anderen Seiten teilen
Romair

Romair

Geschrieben
Geschrieben

Hallo Senol

 

Habe mal kurz den PHASE5 HTML Editor installiert.

 

Das ist ein reiner HTML Texteditor und versteht kein WISIWYG deshalb müsstest Du einges an HTML, CSS und Javascript etc erlernen.

 

Ich empfehle Dir doch mit einem WISIWYG Editor zu beginnen dann musst Du weit weniger SELTFHTML lernen.

 

Bitte konsultiere doch mal diese Seite:

 

http://www.wysiwyg-html-editor.de/

 

Wenn Du das OfficeXP Professional Packet hast, müsste eigentlich der Frontpage dabei sein. Auch wenn er einen nicht ganz reinen HTML Code (teilweise MS-Word eigene Tags) macht, ist er heute doch recht gut.

 

Gruess Roger

Link zu diesem Kommentar
Auf anderen Seiten teilen
Romair

Romair

Geschrieben
Geschrieben

Hallo Senol

 

Einer der günstigsten ist der koreanische WISIWYG Editor NAMO. den kannst Du ausprobieren und er halt schon sehr gute Javascripts dabei.

Schlussendlich musst Du ihn aber auch kaufen.

 

Der Frontpage nachfolger heisst Microsoft® Expression™ Web Designer und ist aber im neuesten Office Packet enthalten. Hast Du den kein Office XP?? Wenn Du den separat kaufts, wird er vermutlich auch gegen die 200.00 fr kosten. Ein älterer Frontpage tuts auch.

 

Empfehlen kann ich Dir eigentlich Dreamweaver welche ich schon mit allen Generationen einsetzte. Es ist der beste aber auch mit Abstand der teuerste. Er macht guten verifizierten HTML code.

 

Nicht empfehlen kann ich Dir ObjectsFusion da dieser den Code nicht so gut offenlegt und Du damit keine grosse Lernhilfe hast.

 

Auch nicht empfehlen kann ich Dir GoLive da viel zuteuer. Dreamveawer gehört ja nun zu ADOBE ist einfach das Tool schlechthin.

 

Nun noch eine Anmerkung:

 

Mach ja keine Webseiten aus Word oder Excel oder Publisher oder sonst aus einem Programm auch wenn Du HTML speichern kannst. Alle geben Codemässig eine Katastrophe.

 

Ich wohne ab Juli 08 am Wochenende teilweise in Biberist und könnte Dir dann schon mal ein wenig behilflich sein.

 

Hier im Thread sagte ich Dir bereits, dass ich Dir durchaus eine ältere Version des Dreamweavers senden könnte.

Dazu müsstest Du mir nur eine PM senden.

 

Also weiter in Deinen Recherchen. Eine gute Homepage erstellen ist halt doch ein wenig mehr als eine Homepage basteln wir das oft so dargestellt wird.

 

Roger grüsst

Link zu diesem Kommentar
Auf anderen Seiten teilen
Romair

Romair

Geschrieben
Geschrieben
Das hier empfehle ich dir...

 

http://www.adobe.com/de/products/dreamweaver/

 

cheers,

tobi

 

Hallo Tobi

 

Dreamweaver ja aber!!!!!!!!!!!!!!

 

Gut und recht. Hast Du ihm denn auch den Preis genannt????

 

Neupreis ca. 780.- und Upgrade ca. 400.- aus 8/MX

 

Der Senol muss ja irgendwo anfangen. SELFHTML wäre doch Gratis.

Dann müsste er von der Basis auf lernen.

 

Gruss Roger

Link zu diesem Kommentar
Auf anderen Seiten teilen
Stefan Gschwind

Stefan Gschwind

Geschrieben
Geschrieben

Hallo Senol

 

Mal noch eine andere Zwischenfrage. In deinem allerersten Satz benutzt du das Wort Template. Bastelst du wieder an einem PHP Script rum? Weil dann sieht die ganze Sache nochmals etwas anders aus las nur "normales" HTML lernen.

 

 

Stefan

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung jetzt entfernen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht
×
×
  • Neu erstellen...