html Anfänger braucht Hilfe beim Aufbau einer responsiven Website

[-dAtA-TRoN-]

hallo liebe html-gemeinde,

ich habe mich hier eben gerade mal angemeldet da ich bis zum ende dieser woche eine website zu unserem studentenprojekt erstellen muss aber leider nicht viel ahnung von der materie habe. die website an sich soll nicht wirklich komplex aufgebaut sein. im gegenteil, sie soll sogar recht simpel werden. Sie verfügt nur über wenige buttons und soll nur eine haupt -und eine unterseite beinhalten. bilder vom Layout befinden sich im anhang. wichtig ist das die website eine vordefinierte größe haben soll und nicht scrollbar ist. sie soll sich nur von selber skalieren können. Wie auf den Bilder zu sehen ist soll ein video-trailer über die hälfte der seite dargestellt werden. dieser soll vom betrachter nicht steuerbar sein, also über keine video-player buttons verfügen und ohne sound in schleife abgespielt werden.

wie gehe ich jetzt am besten vor?

für welche elemente wäre es sinnvoll div-container zu erstellen?

wie bekomme ich die einzelnen elemente responsiv?


wenn ich hier noch ein paar wichtige dinge vergessen haben sollte zu erlklären dann fragt mich einfach dannach. :)

gruß und danke im voraus!

 

[NetAktiv]

Zu deiner Frage will ich nicht antworten, aber beim Design solltest du dich doch an die üblichen Regeln halten, was du bei der deutschen Sprache scheinbar nicht schaffst oder zumindest nicht willst.

 

[nookie]

Also es gibt da nur eine Vorgehensweise und die heißt sich in die Materie einzuarbeiten.

1. Lerne valides HTML und CSS zu schreiben
2. Beschäftige dich mit Mediaqueries und Bootstrap

Hier mal ein Link, wie man bspw. einen Fullscreen Video Background realisiert. Musst du dann natürlich an deine Verhältnisse anpassen.

 

[-dAtA-TRoN-]

@nookie danke für deine schnelle antwort und deine nützlichen tipps. werde ich so umsetzen.
zu html & css habe ich schon ein kleines grundverständnis. mediaqueries sagen mir ebenfalls etwas. bootstrap sind mir jedoch neu. :)

werde nun mal schauen wie weit ich komme. werde sicher weitere fragen haben.

aber vielen dank nochmals!

gruß

 

[-dAtA-TRoN-]

@NetAktiv
bitte nur antworten die brauchbar sind. danke.

 

[NetAktiv]

@NetAktiv
bitte nur antworten die brauchbar sind. danke.

Spätestens, wenn deine ersten JavaScript Programme nicht funktionieren, weil du die Methode getelementbyid oder die Property innerhtml verwendest, wirst du merken, dass meine Anmerkung durchaus ihren Sinn hatte.

 

[-dAtA-TRoN-]

@NetAktiv mag sein, aber dann ist es zu spät.
darum nochmal: bitte nur kommentare abgeben die dazu führen, dass ich evtl. noch die chance habe, die page innerhalb von einer woche erstellt zu bekommen.

sprich: in deinem ersten kommentar hättest du eigentlich schon ab dem ersten komma aufhören können zu schreiben. ;)

ps: noch mal ganz explizit für dich damit wir uns nicht länger angiften müssen: einfach nicht mehr schreiben. von dir möchte ich keine tipps. solltest du doch schreiben werde ich dich ganz einfach ignorieren.

habe wirklich keine zeit dafür!

 

[Tronjer]

bitte nur kommentare abgeben die dazu führen, dass ich evtl. noch die chance habe, die page innerhalb von einer woche erstellt zu bekommen.

Von Null auf Bootstrap in einer Woche? Na dann viel Glück.

Alternativ dazu würde ich die Jobbörse empfehlen.

 

[-dAtA-TRoN-]

Von Null auf Bootstrap in einer Woche? Na dann viel Glück.

Alternativ dazu würde ich die Jobbörse empfehlen.

@Tronjer Danke für die antwort.
Muss es denn mit "bootstrap" gemacht werden? -habe das wort heute das erste mal gehört. die website muss jetzt nicht supertoll werden. ich möchte doch nur die oben beschriebenen ziele erreichen. eine seite, welche sich in einem browserfenster automatisch skaliert, sobald dieses kleiner dargestellt wird. das kann doch nicht so schwer sein, oder?

gruß

 

[Tronjer]

Müssen nicht, aber es ist immer noch einfacher das Grid-Layout von Bootstrap zu verwenden als eine responsive Seite manuell umzusetzen. Zumal eine Woche kaum ausreicht, um auch nur die Grundlagen von CSS zu erlernen.

Was ich an deiner Stelle tun würde: Mir Bootstrap soweit anzuschauen, wie es für die Aufgabenstellung notwendig ist. Dazu reicht die Einbindung des CSS Files aus dem CDN
http://getbootstrap.com/getting-started

und der Abschnitt über Grids.
http://getbootstrap.com/css/#grid

Falls dich das nicht zum Erfolg führt und die Sache wirklich so eilig sein sollte, der Auftrag an die Jobbörse. Das kostet zwar Geld, aber ein erfahrener Entwickler baut dir das in zwei Stunden.

 

[-dAtA-TRoN-]

@Tronjer danke für deine antwort. die jobbörse kommt nicht in frage da ich das auf jeden fall selber probieren möchte. aber danke für die sicherlich hilfreichen tipps. werde ich mir anschauen! :)

gruß

 

[-dAtA-TRoN-]

so, erstes problem:
wie bekomme ich ein img immer mittig zentriert dargestellt? also genau genommen habe ich das schon hinbekommen aber das mit der skalierung klappt irgendwie nicht. also dass sich das pic bei gleichbleibenden seitenverhältnissen verkleinert wenn man den sichtbereich des browserfensters kleiner skaliert.

hat da jemand einen tip?

gruß

 

[nookie]

Wenn ich mich nicht täusche hat Bootstrap dort eine Helperklasse ala "img-responsive".

 

[-dAtA-TRoN-]

wieder danke für deine schnelle antwort :).
habe mir "bootstrap" angeschaut, mich aber dagegen enschieden da ich nicht viel zeit habe das zu erlernen.

ich schreibe die website jetzt ohne vorlagen selbst, also ich versuche das zumindest... :)

ich benutze dreamweaver CC.

 

[-dAtA-TRoN-]

hier ist ein screenshot von meinem aktuellen stand. der kristall (dieses weiße objekt oben links) soll mittig über dem video "fliegen". er soll immer an dieser stelle bleiben, egal wie groß das browserfenster ist. ausserdem soll sich die größe des kristalls automatisch kleiner skalieren wenn man das browserfesnster verkleinert.

wie genau stelle ich das an?

 

[nookie]

Dann schau dir doch einfach mal in der Dokumentation von Bootstrap diese Klasse an, dann weißt du wie die es lösen. Ansonsten ein paar Wörter in Google eingeben.

https://www.google.de/search?q=css+...&oe=utf-8&gws_rd=cr&ei=ZTXHVsipNenKygOPgKmwBw

 

[-dAtA-TRoN-]

es ist nicht so, dass ich nicht gegooglt habe. habe es auch schon selber versucht. will aber irgendwie nicht klappen. habe mich doch extra an euch profis gewendet um ein paar nützliche tipps von euch zu erhalten :) -dass man nach sowas googlen kann weiß ich doch auch aber ich habe leider nicht mehr genug zeit um die passenden artikel zu finden.

was ich z.B. gefunden habe war das hier:

das funktionierte auch. also der kristall ist dann mittig aber wenn ich dann versuche parameter wie "width: 100%" für die skalierung einzugeben, dann hat das merkwürdigerweise keinen einfluss mehr auf den kristall.

ich würde gern wissen wie genau ihr sowas löst. ich habe im moment keine ahnung.

gruß

 

[nookie]

ass man nach sowas googlen kann weiß ich doch auch aber ich habe leider nicht mehr genug zeit um die passenden artikel zu finden.

Schmarn.

Ich hoffe mal nicht das du dir die Website mit Dreamweaver zusammen klickst, dann kann das auch nichts werden.

Ich löse sowas meist mit Helperklassen von Bootstrap o.Ä.

img {
    max-width:100% !important;
    height:auto;
    display:block;
}

 

[-dAtA-TRoN-]

habe wirklich nicht mehr viel zeit. ist kein schmarn. ich google auch selbstverständlich immer erstmal bevor ich andere leute mit meiner unwissenheit auf die nerven gehe. ich habe jedoch leider nichts gefunden und nur bemerkt dass mir die zeit davon läuft. ehrlich.

großen dank für deinen code.
werde ich gleich mal ausprobieren! ;)

gruß

 

[-dAtA-TRoN-]

hmmm, keine ahnung was ich falsch mache. bekomme es irgendwie nicht mit deinem code hin.
nur "text-align: center;" klappt.

dann ist der kristall mittig aber keine ahnung wie ich den dann skalierbar bekomme.