Χωρισμος σελίδας

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

Χωρισμος σελίδας

Δημοσίευση από geotheod » 28 Απρ 2005 01:27

Γεια σας παιδια,

προσπαθω να μαθω πως στο καλο μπορω να χωρισω την σελιδα μου στην ακρη, δηλαδη να αφησω ενα περιθωριο στα αριστερα και εκει να βαλω μενου με κουμπια...

Καμμια ιδέα;;

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Χωρισμος σελίδας

Δημοσίευση από softius » 28 Απρ 2005 09:57

Πιο κάτω γίνεται αναφορά στους τρεις κύριες τεχνικές δημιουργίας του layout που επιθυμείς. Αρχίζοντας από τη πρώτη, η οποία είναι πιο κατανοητή για ένα αρχάριο χρήστη αλλά ταυτόχρονα όχι και τόσο ικανοποιητική... και καταλήγωντας σε τεχνικές για εξειδικευμένους χρήστες....

Frames
Τα frames χωρίζουν μία σελίδα σε δύο ή περισσότερες σελίδες. Στη πραγματικότητα εμφανίζονται δύο ή περισσότερες σελίδες σε ένα μόνο παράθυρο. Έτσι μπορείς να έχεις ένα frame για το μενού και ένα για το κύριο μέρος του παράθυρου. Αν και ο απλούστερος τρόπος δεν θεωρείται και ως ο ιδανικότερος.

Table Layout
Τα tables πέραν από την αναπαράσταση δεδομένων χρησιμοποιούνται αρκετά συχνά και για τον καθορισμό του layout. Αποτελούσε την κύρια μέθοδο καθορισμού layout μέχρι πριν 1-2 χρόνια. Αυτό που ζητάς μπορείν να γίνει δημιουργώντας ένα table με δύο στήλες. Στην πρώτη (αριστερή στήλη) θα υπάρχει το μενού, και στη δεύτερη το κύριο μέρος.

CSS Layout
Παραδείγματα μπορείς να βρεις αρκετά έτοιμα στο διαδίκτυο. Απαιτεί στοιχειώδης γνώσεις CSS. Τελος, θεωρείται ως η πιο μοντέρνα τεχνική layout και η ιδανικότερη για πολλούς (μέσα κι εγώ).

Προσωπικά θα σου πρότεινα τη δεύτερη τεχνική. Είναι απλή τόσο στην ιδέα όσο και στην υλοποίηση και χρησιμοποιείται ακόμη σε μεγάλο βαθμό.

Άβαταρ μέλους
ArchangelX
Honorary Member
Δημοσιεύσεις: 2430
Εγγραφή: 24 Μαρ 2004 13:33
Τοποθεσία: 7ος Ουρανός
Επικοινωνία:

Χωρισμος σελίδας

Δημοσίευση από ArchangelX » 28 Απρ 2005 12:43

Τί λέμε τώρα? Μιλάμε για τις βασικές αρχές στησίματος σελίδας και εσύ φίλε geotheod ρωτάς "πώς στο καλό γίνεται"?

Να ανοίγουμε και κάνα βιβλίο...
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Χωρισμος σελίδας

Δημοσίευση από skeftomilos » 28 Απρ 2005 18:22

Ένα παράδειγμα με CSS.

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>Two Column Layout</title>
    <style type="text/css">
      body &#123; background&#58;black; margin&#58;0px; padding&#58;0px &#125;
      #content &#123; background&#58;pink; margin-left&#58;200px; height&#58;100% &#125;
      #menu &#123; background&#58;cyan; position&#58;absolute; left&#58;0px; top&#58;0px; width&#58;200px; height&#58;100% &#125;
      #content div, #menu div &#123; padding&#58;10px &#125;
    </style>
  </head>
  <body>
    <div id="content">
      <div>Content...</div>
    </div>
    <div id="menu">
      <div>Links...</div>
    </div>
  </body>
</html>
Σε αντίθεση με το table hack υπάρχει ελευθερία στη σειρά τοποθέτησης των στοιχείων στη σελίδα. Στο παράδειγμα το δεξί div#content προηγείται του αριστερού div#menu. Το πλεονέκτημα είναι ότι οι επισκέπτες μας θα βλέπουν να κατεβαίνει πρώτα το περιεχόμενο που τους ενδιαφέρει άμεσα, και μετά τα links που είναι χρήσιμα αργότερα. Επιπλέον το κείμενο δε θα αναπηδά κατά το φόρτωμα όπως με τα tables, γιατί τα div έχουν σταθερή και προκαθορισμένη θέση στη σελίδα.

Να σημειωθεί ότι η παραπάνω τεχνική με το αριστερό περιθώριο στο div#content δεν είναι η μοναδική. Υπάρχει και λύση με floating elements, που κατά άλλους είναι προτιμότερη.

- Positioning tutorial
- Three column layouts
- Συνέντευξη Big John
_______________________________________________________

EDIT: 1/5/2005
Το παραπάνω παράδειγμα προκαλεί την εμφάνιση ενός bug του Firefox σχετικό με το height:100%, όταν τα περιεχόμενα ξεπεράσουν το ύψος της σελίδας. Ένα workaround είναι η χρήση του min-height αντί για το height, το οποίο όμως δεν υποστηρίζεται από τον IE. Ξαναγράφω παρακάτω το CSS κομμάτι, με το workaround για τον Firefox και το αντι-workaround για τον IE:

Κώδικας: Επιλογή όλων

<style type="text/css">
  body &#123; background&#58;gray; margin&#58;0px; padding&#58;0px &#125;
  #menu &#123; background&#58;cyan; position&#58;absolute; left&#58;0px; top&#58;0px; width&#58;200px; min-height&#58;100% &#125;
  #content &#123; background&#58;pink; margin-left&#58;200px; min-height&#58;100% &#125;
  * html #menu, * html #content &#123; height&#58;100% &#125; /*IE hack*/
  #content div, #menu div &#123; padding&#58;10px &#125;
</style>
Τελευταία επεξεργασία από το μέλος skeftomilos την 01 Μάιος 2005 12:35, έχει επεξεργασθεί 1 φορά συνολικά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

Χωρισμος σελίδας

Δημοσίευση από geotheod » 30 Απρ 2005 02:01

Eυχαριστω πολυ skeftomilos! Ευχαριστω επισης και τον φιλο softius.

Δοκιμασα τον κωδικα σου skeftomilos και οντως δουλευει ομως στο μυαλο μου ειχα κατι διαφορετικο, δηλαδη το κομματι που χωριζεται στην ακρη να λειτουργει αυτονομα με μπαρα κυλησης κτλ.

Εψαξα λιγακι και βρηκα πως διναται να γινει με τον παρακατω κωδικα:

<html>
<frameset rows="50% 50%">
<frame src=page1.html name="frame1">
<frame src=page2.html name="frame2">
</frameset>
</html>

Δυστυχως ομως δεν μου δουλευει! Τινα φταιει αραγε;

Να ειστε καλα και καλο Πάσχα!

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Χωρισμος σελίδας

Δημοσίευση από softius » 30 Απρ 2005 02:10

OK... επιλέγεις frames λοιπόν. Η ακόλουθη σελίδα θα σε βοηθήσει να εντοπίσεις τα λάθη σου :D

:arrow: http://www.w3schools.com/tags/tag_frameset.asp

Άβαταρ μέλους
ArchangelX
Honorary Member
Δημοσιεύσεις: 2430
Εγγραφή: 24 Μαρ 2004 13:33
Τοποθεσία: 7ος Ουρανός
Επικοινωνία:

Χωρισμος σελίδας

Δημοσίευση από ArchangelX » 30 Απρ 2005 16:04

Ενα πιο σωστό σύνολο για το παραπάνω θα ήταν το εξής.

Κώδικας: Επιλογή όλων

<html>
<head>
<title>mplampla</title>
</head>

<frameset framespacing="0" border="0" cols="50%,50%" frameborder="0">
  <frame name="left" src="menu_page.htm" scrolling="auto">
  <frame name="right" src="contents_page.htm" scrolling="auto">
  <noframes>
  <body topmargin="0" leftmargin="0">

  <p>Αμα θές να δείς τα frames, να πας να βάλεις ένα browser της προκοπής...</p>

  </body>
  </noframes>
</frameset>

</html>
Με λίγα λόγια το λάθος σου ήταν ένα κόμα εκεί που ορίζεις το μέγεθος των frames...
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Χωρισμος σελίδας

Δημοσίευση από skeftomilos » 01 Μάιος 2005 12:39

Με λίγες αλλαγές στο CSS μπορεί να γίνει απόλυτη προσομοίωση των frames! Το μόνο που προσέθεσα είναι overflow:hidden στο body και overflow:auto στα elements #menu και #content.

Κώδικας: Επιλογή όλων

<html>
  <head>
    <style type="text/css">
      body &#123; background&#58;gray; margin&#58;0px; padding&#58;0px; overflow&#58;hidden &#125;
      #menu &#123; background&#58;cyan; position&#58;absolute; left&#58;0px; top&#58;0px; width&#58;200px; height&#58;100%; overflow&#58;auto &#125;
      #content &#123; background&#58;pink; margin-left&#58;200px; height&#58;100%; overflow&#58;auto &#125;
      #content div, #menu div &#123; padding&#58;10px &#125;
    </style>
  </head>
  <body>
    <div id="content">
      <div>Content...</div>
    </div>
    <div id="menu">
      <div>Links...</div>
    </div>
  </body>
</html>
Τα frames μπορεί σε ορισμένες περιπτώσεις να βολεύουν και ακόμα να ελαφραίνουν τις σελίδες μας, αλλά με κόστος την αυξημένη πολυπλοκότητα του site. Οπωσδήποτε είναι ακατάλληλα όταν οι σελίδες μας περιέχουν άφθονο κείμενο για ανάγνωση, και μου κάνει εντύπωση που δεν το έχουν καταλάβει ακόμα οι σχεδιαστές της Microsoft. Το να διαβάζεις on-line το documentation των προϊόντων της είναι σκέτη απελπισία, αλλά φαντάζομαι στα 21'' μόνιτορ των σχεδιαστών και με ADSL internet connections οι σελίδες θα φαίνονται πολύ όμορφες.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες