 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
planeswalker
Threadersteller
Dabei seit: 23.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 23.03.2012 11:42
Titel Menü mit Rollover Effekt & Dropdownmenü Dreamweaver CS 5 |
  |
|
hallo liebe Leute,
ich hoffe ich werde für so eine Anfängerfrage hier nicht gleich in der Luft zerrissen 
Also ich soll einem Freund bei der Firmengründung ein bischen unter die Arme greifen und ihm eine Homepage erstellen, da ich aber nur grafische Kenntnisse habe und in Sachen Webdesign ein ziemlicher Laie bin tue ich mir dabei natürlich ein wenig schwer.
Ich habe ein Layout mit Photoshop erstellt, in Slices zerteilt und in Dreamweaver CS 5 exportiert. jetzt gibt es auf dieser Seite ein Hauptmenü das aus .jpgs besteht die in Tabellen eingegliedert sind. Die .jpgs haben einen Rollover-Effekt aber ich soll auch ein Dropdownmenü einbauen nur lässt Dreamweaver oder meine eigene Unfähigkeit das nicht zu.
Der Rollover Effekt funktioniert einwandfrei aber ich kann den Buttons kein Dropdownmenü zuweisen weil die Option Sprungmenü unter "verhalten" immer grau hinterlegt ist. ich bin schon Stunden davor gesessen um eine Lösung zu finden, jetzt bin ich so langsam ein wenig verzweifelt, ich hoffe es kann mir hier jemand helfen.
Ich habe leider nur grundlegende html Kenntnisse und nur wenig Ahnung von css, js und sonstigem daher ist die Benutzung von Dreamweaver leider zwingend erforderlich.
Hier auch der Code, wie gesagt ich bitte um Nachsicht 
| Code: |
<html><head>
<title>layout_plain</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-image: url(bg.jpg);
margin-left: 0px;
margin-top: 0px;
font-size: 12px;
}
#Tabelle_01 tr td {
font-family: Arial;
color: #464646;
}
#Tabelle_02 tr td {
font-family: Arial;
font-size: 12px;
}
#text {
font-family: Arial;
font-size: 14px;
color: #464646;
}
#contentbox {
font-family: Arial;
color: #FFF;
}
#contentbox {
font-family: Arial;
color: #FFF;
font-size: 16px;
}
#bottom {
font-family: Arial;
font-size: 12px;
color: #5a5a5a;
}
.contentbox {
font-family: Arial;
font-size: 19px;
color: #FFF;
}
#contentboxtext {
font-size: 14px;
color: #FFF;
}
tr td {
}
td {
font-family: Arial;
}
#mehrlesen {
color: #FFF;
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
a:link {
font-family: Arial;
font-size: 12px;
color: #5a5a5a;
text-decoration: none;<br>
}
a:visited {
font-family: Arial;
font-size: 12px;
color: 5a5a5a;
text-decoration: none;
}
a:active {
font-family: Arial;
font-size: 12px;
color: #5a5a5a;
text-decoration: none;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('buttons/Bilder/layout_plain_menu_05.gif','buttons/Bilder/layout_plain_menu_07.gif','buttons/Bilder/layout_plain_menu_09.gif','buttons/Bilder/layout_plain_menu_11.jpg','buttons/Bilder/layout_plain_menu_03.gif')">
<!-- Save for Web Slices (layout_plain.psd) -->
<table width="1201" height="841" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
<tr>
<td colspan="17">
<img src="Bilder/layout_plain_01.jpg" alt="" width="1200" height="29" border="0" usemap="#Map2"></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="Bilder/layout_plain_02.jpg" width="274" height="1" alt=""></td>
<td colspan="14" rowspan="2" background="Bilder/layout_plain_03.jpg" width="926" height="77">
</td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<img src="Bilder/layout_plain_04.jpg" alt="" width="274" height="273" border="0" usemap="#Map"></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/layout_plain_05.jpg" width="75" height="23" alt=""></td>
<td>
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image53','','buttons/Bilder/layout_plain_menu_03.gif',1)"><img src="Bilder/layout_plain_06.gif" name="Image53" width="113" height="23" border="0"></a></td>
<td>
<img src="Bilder/layout_plain_07.gif" width="15" height="23" alt=""></td>
<td>
<a href="beratung.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image57','','buttons/Bilder/layout_plain_menu_05.gif',1)"><img src="Bilder/layout_plain_08.jpg" name="Image57" width="148" height="23" border="0"></a></td>
<td>
<img src="Bilder/layout_plain_09.jpg" width="17" height="23" alt=""></td>
<td colspan="3">
<a href="autos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image58','','buttons/Bilder/layout_plain_menu_07.gif',1)"><img src="Bilder/layout_plain_10.jpg" name="Image58" width="86" height="23" border="0"></a></td>
<td>
<img src="Bilder/layout_plain_11.jpg" width="17" height="23" alt=""></td>
<td>
<a href="immobilien.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image59','','buttons/Bilder/layout_plain_menu_09.gif',1)"><img src="Bilder/layout_plain_12.jpg" name="Image59" width="113" height="23" border="0"></a></td>
<td>
<img src="Bilder/layout_plain_13.jpg" width="17" height="23" alt=""></td>
<td colspan="2">
<a href="philo.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image60','','buttons/Bilder/layout_plain_menu_11.jpg',1)"><img src="Bilder/layout_plain_14.jpg" name="Image60" width="113" height="23" border="0"></a></td>
<td>
<img src="Bilder/layout_plain_15.jpg" width="212" height="23" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="Bilder/layout_plain_16.gif" width="926" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="Bilder/layout_plain_17.jpg" alt="" width="651" height="173" border="0" usemap="#Map3"></td>
<td colspan="2">
<img src="Bilder/layout_plain_18.jpg" width="275" height="173" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="173" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="Bilder/layout_plain_19.jpg" width="1200" height="26" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Bilder/layout_plain_20.jpg" width="35" height="366" alt=""></td>
<td rowspan="3">
<img src="Bilder/layout_plain_21.gif" width="1" height="511" alt=""></td>
<td colspan="7" background="Bilder/layout_plain_22.jpg" width="659" height="59"><strong>Herzlich Willkommen bei Carpe Omnia!
</strong></td>
<td rowspan="2">
<img src="Bilder/layout_plain_23.gif" width="1" height="366" alt=""></td>
<td colspan="7" background="Bilder/layout_plain_24.jpg" width="504" height="59"><strong>Featured
</strong></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="7" width="659" height="307" valign="top"><p id="text"><br>
</p></td>
<td colspan="7" width="504" height="307" valign="top"><img src="../../../homepage pics/hands.jpg" width="228" height="228"> <img src="../../../homepage pics/buero.jpg" width="228" height="228">
</td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="307" alt=""></td>
</tr>
<tr>
<td> </td>
<td colspan="15" width="1164" height="154" valign="top"><br><img src="Bilder/facebook.gif" width="100" height="30"> <img src="Bilder/twitter.gif" width="103" height="30"><br>
<span id="bottom"><br>
<br>
<a href="disclaimer.html">Disclaimer</a></span><br></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="145" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/Abstandhalter.gif" width="35" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="238" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="75" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="113" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="148" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="17" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="53" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="32" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="17" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="113" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="17" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="50" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="63" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="212" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<map name="Map">
<area shape="rect" coords="71,15,254,266" href="index.html" target="_self" alt="home">
</map>
<map name="Map2">
<area shape="rect" coords="1005,5,1064,24" href="lageplan.html" target="_self" alt="Lageplan">
<area shape="rect" coords="1078,6,1123,23" href="kontakt.html" target="_self" alt="Kontakt">
<area shape="rect" coords="1142,6,1181,24" href="faq.html" target="_self" alt="Häufig gestellte Fragen">
</map>
<map name="Map3">
<area shape="rect" coords="520,146,627,167" href="philo.html" target="_self">
</map>
</body>
</html> |
|
|
| |
  |
 |
Graphicana
Dabei seit: 17.03.2009
Ort: -
Alter: 33
Geschlecht: 
|
Verfasst Mo 26.03.2012 22:29
Titel
|
|
|
Hi,
das ist nett von dir, dass du deinem Freund da so unter die Arme greifen willst und hier wird niemand zerissen 
Ich will dir nur ein paar Tipps mal allgemein zu deiner Seite geben:
Du solltest dir die slices als "*.png" abspeichern. Die lassen sich viel schneller im Browser laden (kleinere Dateigröße), sind dennoch unkomprimiert (astreine Qualität) und sie können Transparenzen beinhalten.
Ein "*.jpg" hingegen beinhaltet keine Transparenzen - die transparenten Stellen im Bild werden mit der Hintergrundfarbe verrechnet (wahrscheinlich weiß). Ausserdem sind JPGs wesentlich größer von der Dateigröße.
Wenn du etwas HTML und CSS kannst, solltest du wie folgt vorgehen:
- lass dir alle deine Slices in einen Ordner ausgeben und benenne sie (head.png, bg_main_container.png, etc.)
- dann lege dir ein HTML Dokument in Dreamweaver an und mache dir erstmal ein Grundgerüst in HTML
- das Grundgerüst muss "logisch" für den Browser aufgebaut sein - grunsätzlich gilt "von oben nach unten"
definiere in deinem HTML Gerüst alles mit <DIV>'s und ihren zugehörigen classes oder ID's
- beginne dann in einer externen CSS-Datei die classes/ID's zu definieren (Weise beispielweise ".XY" aus deinem
HTML-Dokument in der CSS datei zu .XY { background: #000000; }
Wenn du dir dein Webdesign so aufbaust, kannst du auf deine ganzen Tabellen verzichten, die alle-samt undynamisch sind, so wie sie ausgegeben werden.
Zu deiner Drop-down-Navigation - eine animierte derer kannst du nur mit javscript/jquery erstellen bzw. downloaden. Suche mal in google "script jquery drop down navigation".
Da lässt sich ne Menge gutes Zeug finden und umbasteln - ist auch nach bisschen Einarbeitung für den Laien verstehbar
Viel Erfolg beim Design,
guten Abend
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
Dreamweaver CS4 - Rollover-Effekt - Bug?
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
[CSS] Hor. Menü mit Gif-Rollover?
Rollover Menü aus Illustration erstellen
Dreamweaver - Rollover, ...
rollover effekt
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
