Πρωτοσέλιδο πώς να δημιουργήσετε μια σελίδα τίτλου. Δημιουργία ιστοσελίδων χρησιμοποιώντας το FrontPage. Πίνακας τρόπων λειτουργίας
Η εικόνα δείχνει το πρόγραμμα Microsoft FrontPage 2003 (1995-2003). Ο επεξεργαστής έχει ρωσική διεπαφή και ρωσική βοήθεια. Βάρος 113 MB.
Από τη Βικιπαίδεια:
1995 - Microsoft FrontPage 1.1
1997 - FrontPage 97 (2η έκδοση)
1997 - FrontPage Express 2.0
1998 - Microsoft FrontPage για Macintosh
1998 - FrontPage 98 (3η έκδοση)
1999 - FrontPage 2000 (9η έκδοση)
2001 - Microsoft FrontPage 2002 (10η έκδοση)
2003 - Microsoft Office FrontPage 2003 (11η έκδοση)
Το FrontPage διακόπηκε το 2003 και αντικαταστάθηκε από προγράμματα της Microsoft όπως π.χ Microsoft Office SharePoint DesignerΚαι Microsoft Expression Web.
Το πρόγραμμα Microsoft FrontPage είναι απλό και λογικό και ταυτόχρονα έχει εξαιρετικές δυνατότητες.
Για όσους γνωρίζουν το Microsoft Office Word, η εμφάνιση του FrontPage δεν θα είναι κάτι καινούργιο. Η γραμμή μενού και οι γραμμές εργαλείων είναι παρόμοιες με αυτές του Word, οι περισσότερες εντολές είναι ίδιες.
Η εργασία στο FrontPage (σε οπτική λειτουργία) είναι επίσης βασικά η ίδια με την εργασία στο Word.
Το FrontPage έχει 4 τρόπους λειτουργίας: σχεδιαστή (δημιουργία σελίδας σε οπτική λειτουργία), κώδικα (δημιουργία κώδικα σελίδας), προβολή και λειτουργία διαχωρισμού του παραθύρου του προγράμματος σε κώδικα και προβολή.
Σε οπτική λειτουργία, το FrontPage μπορεί να μορφοποιήσει κείμενο (και να επισημάνει όλα τα ορθογραφικά λάθη του σχολείου σας με μια κόκκινη γραμμή), να εισάγει εικόνες, πίνακες, συνδέσμους, πλαίσια, φόρμες και πολλά άλλα με όλες τις ρυθμίσεις.
Στη λειτουργία κώδικα, το FrontPage είναι πολύ πιο αδύναμο και κατώτερο από τους καλούς επεξεργαστές κώδικα· πολλές λειτουργίες οπτικής λειτουργίας δεν είναι διαθέσιμες εδώ (αυτό το χαρακτηριστικό είναι γενικά εγγενές σε συνδυασμένους επεξεργαστές, με εξαίρεση το Dreamweaver). Μπορείτε να δημιουργήσετε μια ιστοσελίδα σε λειτουργία κώδικα, αλλά είναι προτιμότερο να χρησιμοποιήσετε αυτήν τη λειτουργία για να επεξεργαστείτε ή να διορθώσετε τον κώδικα που δημιουργήθηκε σε οπτική λειτουργία.
Το μεγάλο πλεονέκτημα του προγράμματος είναι η ρωσική διεπαφή, η βοήθεια, καθώς και ένας μεγάλος αριθμός εκπαιδευτικού υλικού στο FrontPage στα ρωσικά.
Μεταξύ των μειονεκτημάτων του προγράμματος, μπορεί να σημειωθεί ότι το πρόγραμμα δεν είναι γρήγορο - χρειάζεται πολύς χρόνος για να ανοίξει και υπάρχει κάποια βραδύτητα κατά την εκτέλεση ορισμένων εντολών. Μερικές φορές ο συντάκτης παίρνει ακατάλληλη πρωτοβουλία και μπορεί να κάνει κάτι που δεν θέλατε.
Εάν, κατά τη δημιουργία υλικού κειμένου σε οπτική λειτουργία, το FrontPage παράγει συνήθως καθαρό κώδικα, τότε κατά τη διάρκεια άλλων λειτουργιών μπορεί να χύσει πολλά περιττά πράγματα στη σελίδα. Αυτό το πρόβλημα μπορεί να λυθεί εν μέρει από το προσαρμοσμένο εργαλείο βελτιστοποίησης κώδικα HTML που είναι διαθέσιμο στο πρόγραμμα επεξεργασίας.
Το πρόγραμμα δεν μπορεί να θεωρηθεί απολύτως αξιόπιστο· μερικές φορές συμβαίνουν απροσδόκητες δυσλειτουργίες. Και δεν λειτουργεί πολύ καλά· το FrontPage 2003 μοιάζει με έναν μεγάλο μηχανισμό στον οποίο κάτι κροταλίζει, κουνιέται και γλιστράει.
Αλλά πολλοί χρήστες έχουν προσαρμοστεί στις αδυναμίες του και το FrontPage εξακολουθεί να χρησιμοποιείται ευρέως.
Υπάρχουν πολλά μαθήματα στο Διαδίκτυο για το FrontPage. Εδω είναι μερικά:
FrontPage Express
FrontPage Express (1995 - 1997, βάρος 4,3 MB) - μικρό, γρήγορο και ωραίο πρόγραμμα. Η λειτουργικότητά του είναι κοντά σε ένα πρόγραμμα επεξεργασίας όπως το NVU. Είναι μια ελαφριά έκδοση του FrontPage.
Παραπάνω είναι ένα σχέδιο της γραμμής εργαλείων του FrontPage Express.
Το πρόγραμμα επεξεργασίας θα σας βοηθήσει να σχεδιάσετε τις επικεφαλίδες σας και να επιλέξετε διαφορετικούς τύπους γραμματοσειρών, μεγέθη, στυλ και χρώματα. Θα σας βοηθήσει να εισάγετε εικόνες, βίντεο, ήχο φόντου, ειδικούς χαρακτήρες, κινούμενα σχέδια, λίστες, μικροεφαρμογές Java, αναρριχητικά προγράμματα, φόρμες, συνδέσμους, πίνακες κ.λπ. σε σελίδες.
Αν και στον επεξεργαστή η σελίδα δημιουργείται σε οπτική λειτουργία και δεν υπάρχει τρόπος να επεξεργαστείτε τον κώδικα, ο κωδικός εξόδου αποδεικνύεται αρκετά καθαρός, χωρίς περιττές συμπεριλήψεις.
Σήμερα το FrontPage Express είναι ήδη κάπως ξεπερασμένο. Για παράδειγμα, δεν υπάρχει ενσωματωμένο πρόγραμμα περιήγησης για την προεπισκόπηση της σελίδας που δημιουργείται, δεν υπάρχει εργασία με φύλλα στυλ (το πρόγραμμα επεξεργασίας δεν ανταποκρίνεται καθόλου στα φύλλα στυλ) κ.λπ.
Κατεβάστε το FrontPage- από τα αρχεία στο Διαδίκτυο
Περιλαμβάνεται στο πακέτο του προγράμματος το γραφείο της Microsoft περιλαμβάνει πολλές εφαρμογές που σας επιτρέπουν να δημιουργείτε, να επεξεργάζεστε και να φιλοξενείτε ιστοσελίδες. Ένα από αυτά είναι ένα σχετικά απλό πρόγραμμα Εξώφυλλο . Με τη βοήθειά του, μπορείτε να δημιουργήσετε πολύ περίπλοκες σελίδες που θα ικανοποιήσουν τις ανάγκες ακόμη και ενός επαγγελματία σχεδιαστή Ιστού.
Όταν δημιουργείτε μια ιστοσελίδα, θα πρέπει να προσπαθείτε να της προσφέρετε ελκυστική εμφάνιση, επειδή μια ελκυστική σελίδα επισκέπτεται συχνότερα. Ταυτόχρονα, η σελίδα πρέπει να συνδυάζει δύο αντιφατικές ιδιότητες - ελκυστικότητα και ελάχιστη μνήμη. Μπορείτε να χρησιμοποιήσετε έναν περιορισμένο αριθμό μέσων χαμηλής έντασης, για παράδειγμα, λουλούδια αντί για σχέδια, για να δημιουργήσετε μια αραιή, αλλά πολύ ελκυστική σελίδα και, αντίθετα, μπορείτε να την εξοπλίσετε με πολλά σχέδια, χρώματα, μορφές και άλλα στοιχεία σήμανσης, το σετ και η τοποθέτηση του οποίου θα δώσει μια σελίδα που μπορεί να θεωρηθεί παράδειγμα πλούσιου κακού γούστου . Η διαδικασία δημιουργίας μιας Ιστοσελίδας είναι δημιουργική, γι' αυτό και ονομάζεται συχνά σχεδιασμός Ιστού. Είναι γνωστό ότι ορισμένοι σχεδιαστές ιστοσελίδων ξοδεύουν αρκετούς μήνες δημιουργώντας μια όχι και τόσο περίπλοκη σελίδα, επιστρέφοντας σε αυτήν πολλές φορές, αναζητώντας τον πιο εκφραστικό τρόπο εφαρμογής της, ενώ μια σελίδα με το ίδιο περιεχόμενο θα μπορούσε να δημιουργηθεί σε όχι περισσότερο από μία ώρα εργασίας. . Εάν ένα κοστούμι, αφού ραφτεί, είναι δύσκολο να αλλάξει πολλές φορές, τότε μια ιστοσελίδα μπορεί να «αλλαγεί» και να βελτιωθεί όσο χρειάζεται, ακριβώς σύμφωνα με το πώς ένας ποιητής βελτιώνει το έργο του, φέρνοντάς το στο απόγειο της τελειότητας.
Ωστόσο, δεν συμμερίζονται όλοι αυτήν την άποψη, σημειώνοντας εύλογα ότι μια ιστοσελίδα είναι πληροφορίες για διανομή και γι' αυτό δεν είναι καθόλου απαραίτητο να μετατραπεί σε έργο τέχνης, ειδικά επειδή αυτό απαιτεί πολύ χρόνο.
Ένα πρακτικό συμπέρασμα προκύπτει από αυτό: οι σελίδες κεφαλίδας, τίτλος και διαφήμισης πρέπει να γίνονται ελκυστικές και οι σελίδες που προορίζονται για τη διάδοση «στεγνών» πληροφοριών, για παράδειγμα, κείμενα παραγγελιών, περιγραφές θέσεων εργασίας, τυχόν σχέδια, κ.λπ. ελάχιστη σήμανση.
Διασύνδεση 1.FP
Το Front Page, ένα πρόγραμμα για τη δημιουργία και την επεξεργασία ιστοσελίδων, βρίσκεται στο φάκελο Προγράμματα του Office Microsoft Office.
Μετά την εκκίνηση του FP, εμφανίζεται ένα παράθυρο στην οθόνη, η εμφάνιση του οποίου φαίνεται στην Εικ. 1. Για αυτό το παράδειγμα, αυτό το εγχειρίδιο, το οποίο γράφτηκε με χρήση του FP, είναι ανοιχτό για επεξεργασία στο παράθυρο του προγράμματος.
|
|
| Ρύζι. 1. Παράθυρο προγράμματος Εξώφυλλο |
Το πρόγραμμα περιέχει ένα μενού και πολλές γραμμές εργαλείων. Όταν ένας χρήστης FP αποφασίσει να ασχοληθεί με τη σχεδίαση Ιστού, είναι συνήθως γνώστης της οικογένειας προγραμμάτων Word του Microsoft Office, επομένως η διεπαφή τύπου Microsoft του FP, η οποία είναι πολύ παρόμοια με τη διεπαφή του Word, δεν θα δημιουργήσει ειδικές δυσκολίες στην εργασία.
Η διεπαφή του προγράμματος - μενού, πίνακες, κουμπιά και άλλα στοιχεία - είναι πιο βολικό να εξηγηθεί καθώς χρειάζεστε τα στοιχεία του κατά τη δημιουργία ή την επεξεργασία ιστοσελίδων, παραδείγματα των οποίων θα συζητηθούν σε αυτό το κεφάλαιο.
Κατά την ανάπτυξη μιας σελίδας, το πρόγραμμα δημιουργεί αυτόματα ένα αρχείο σήμανσης, το κείμενο του οποίου το FP γράφει σε HTML (HyperText Markup Language). Μπορείτε να κάνετε αλλαγές σε αυτό το αρχείο με μη αυτόματο τρόπο (επιπλέον, το κείμενο του προγράμματος μπορεί να μεταγλωττιστεί σε ένα κανονικό πρόγραμμα επεξεργασίας κειμένου, ακόμη και σε ένα απλό, όπως το Σημειωματάριο, αλλά αυτό είναι πολύ περίπλοκο). Για να μεταβείτε στον ενσωματωμένο επεξεργαστή κειμένου FP, κάντε κλικ στη συντόμευση στο κάτω μέρος του παραθύρου Κώδικας, στη συνέχεια κάντε αλλαγές στο πρόγραμμα επεξεργασίας κειμένου. Εάν ο προγραμματιστής δεν είναι σίγουρος για τον επαγγελματισμό του, τότε είναι καλύτερο να μην κάνετε αλλαγές στο κείμενο HTML, καθώς τα σφάλματα επεξεργασίας θα είναι δύσκολο να διορθωθούν. Για να επιστρέψετε στη σελίδα που επισημαίνετε, κάντε κλικ στη συντόμευση Κατασκευαστής.
Για να δείτε πώς θα φαίνεται η σελίδα στο πρόγραμμα περιήγησης, κάντε κλικ στη συντόμευση Θέα. Θα πρέπει να σημειωθεί, ωστόσο, ότι μόνο πολύ απλές σελίδες εμφανίζονται σωστά σε αυτή τη λειτουργία. Επομένως, είναι καλύτερο να προβάλετε τη σελίδα σε ένα επαγγελματικό πρόγραμμα περιήγησης, για παράδειγμα Firefox. Για να το κάνετε αυτό, βρείτε το αρχείο σελίδας στο φάκελο και ανοίξτε το σε ένα πρόγραμμα περιήγησης (συνήθως όλες οι ιστοσελίδες ανοίγουν σε ένα πρόγραμμα περιήγησης).
2. Δημιουργήστε μια νέα ιστοσελίδα
Για να δημιουργήσετε μια νέα ιστοσελίδα, κάντε κλικ στο κουμπί Δημιουργία νέας κανονικής σελίδαςπου βρίσκεται στον πίνακα Πρότυπο. Ορισμένα κουμπιά αυτού του πίνακα με τα αντίστοιχα σχόλια φαίνονται στην Εικ. 2.
Μπορείτε να δημιουργήσετε μια νέα σελίδα διαφορετικά. Στο μενού Αρχείοκάντε κλικ στη γραμμή Δημιουργώ. Το πρόγραμμα στα δεξιά θα εμφανίσει ένα παράθυρο με τυπικά πρότυπα σελίδας. Μπορείτε να επιλέξετε ένα πρότυπο από αυτό και να το χρησιμοποιήσετε ως βάση για μια μελλοντική σελίδα. Εάν χρειάζεστε μια κενή σελίδα, πρέπει να κάνετε κλικ στο πρότυπο Κενή σελίδα.
Στο FP, μπορείτε επίσης να δημιουργήσετε πλαίσια που σας επιτρέπουν να βλέπετε πολλές ιστοσελίδες στην οθόνη της οθόνης σας ταυτόχρονα. Τα πλαίσια είναι ιστοσελίδες πολλών παραθύρων. Ένας αρχάριος σχεδιαστής Ιστού θα πρέπει να απέχει από τη χρήση πλαισίων.
Τώρα μπορείτε να αποθηκεύσετε τη σελίδα. Για να το κάνετε αυτό, κάντε κλικ στο κουμπί Αποθηκεύσετε, στη συνέχεια αποθηκεύστε τη σελίδα ως αρχείο στο δίσκο του υπολογιστή σας. Κατά την αποθήκευση μιας σελίδας, είναι καλύτερο να δημιουργήσετε αμέσως έναν ξεχωριστό φάκελο για αυτήν με το όνομα που πρόκειται να δώσετε στο αρχείο. Οι ιστοσελίδες συνήθως αποθηκεύονται σε αρχεία με την επέκταση .htmή .html(από το όνομα της γλώσσας HyperText Markup Language - hypertext markup language). Για παράδειγμα, εάν πρόκειται να αποθηκεύσετε ένα αρχείο με το όνομα περίπου.htm, τότε θα πρέπει να δημιουργήσετε ένα φάκελο με το όνομα σχετικά με, στην περιοχή του δίσκου στον οποίο θα βρίσκονται οι ιστοσελίδες σας. Πριν αποθηκεύσετε την πρώτη σελίδα, είναι καλύτερο να δημιουργήσετε αμέσως μια τέτοια περιοχή με τη μορφή φακέλου, για παράδειγμα, έναν φάκελο με το όνομα Ιστοσελίδες της Fedorova. Τώρα πρέπει να δημιουργήσετε τον αναφερόμενο φάκελο σε αυτόν σχετικά μεκαι σε αυτό – αποθηκεύστε τη σελίδα περίπου.htm.
3. Ιδιότητες ιστοσελίδας
Στη συνέχεια, πρέπει να συμπληρώσετε ορισμένες σημαντικές ιδιότητες σελίδας με τιμές. Για να το κάνετε αυτό, κάντε δεξί κλικ στην περιοχή της σελίδας και, στη συνέχεια, στο μενού περιβάλλοντος - στη γραμμή Ιδιότητες σελίδας. Θα εμφανιστεί ένα πλαίσιο διαλόγου για την εισαγωγή ιδιοτήτων σελίδας (Εικ. 3). Το παράθυρο έχει πέντε καρτέλες
Είναι κοινά, Μορφοποίηση, Επιπροσθέτως, Αλλα, Γλώσσα .Στο Σχ. 3 ο σελιδοδείκτης είναι ενεργοποιημένος στο παράθυρο
Είναι κοινά. Στη γραμμήΟνομα πρέπει να εισαγάγετε τον τίτλο της σελίδας.Εδώ μπορείτε να συνδέσετε ένα αρχείο ήχου στη ζώνη
Ιστορικό ήχος. Ο ήχος θα συνοδεύει την προβολή αυτής της σελίδας στον υπολογιστή που την άνοιξε. Φυσικά, για να ακούσετε ήχο φόντου, πρέπει να εγκαταστήσετε ένα ηχείο στον υπολογιστή του χρήστη. Συνήθως, ο ήχος παρασκηνίου αναπαράγεται με κύλιση σε ένα αρχείο ήχου με την επέκταση .wav. Για να συνδέσετε το αρχείο, κάντε κλικ στο κουμπί Ανασκόπησηκαι χρησιμοποιήστε το πλαίσιο διαλόγου για να συνδέσετε ένα τέτοιο αρχείο. Για μια κανονική σελίδα, δεν είναι απαραίτητο να συμπεριλάβετε αρχείο ήχου.για να δημιουργήσετε ένα φόντο σελίδας. Το φόντο είναι το κύριο φόντο της σελίδας. Το φόντο μπορεί να είναι χρώμαή σχέδιο. Η προβολή του παραθύρου ιδιοτήτων σελίδας στην καρτέλα Φόντο φαίνεται στην Εικ. 4.Εάν πρέπει να επιλέξετε φόντο με τη μορφή χρώματος, τότε πρέπει να κάνετε κλικ στο κουμπί Λίστα φόντου
και επιλέξτε ένα χρώμα από ένα τυπικό σύνολο χρωμάτων. Η αρχική κατάσταση ορίζεται στο προεπιλεγμένο χρώμα. Συνήθως το προεπιλεγμένο χρώμα είναι το λευκό.Εάν τα προτεινόμενα χρώματα δεν σας ταιριάζουν, κάντε κλικ στο χρώμα
Εθιμο(έθιμο). Στο παράθυρο διαλόγου που ανοίγει, μπορείτε να επιλέξετε ένα χρώμα από οποιαδήποτε από τις 16"777"216 αποχρώσεις. Το παράθυρο για την επιλογή ενός προσαρμοσμένου χρώματος φαίνεται στο Σχ. 5.Για να επιλέξετε ένα προσαρμοσμένο χρώμα, πρέπει πρώτα να αντιστοιχίσετε ένα βασικό χρώμα από την κύρια παλέτα και, στη συνέχεια, κάντε κλικ στο κατά προσέγγιση χρώμα στο τετράγωνο της παλέτας στα δεξιά (αυτό το σημείο σημειώνεται με ένα σταυρό) και, στη συνέχεια, επιλέξτε την επιθυμητή απόχρωση στη στήλη στο το δεξί (σημειώνεται με ένα τρίγωνο δίπλα στον κέρσορα του ποντικιού). Στο πλαίσιο "Χρώμα/Γέμισμα" μπορείτε να αξιολογήσετε οπτικά το επιλεγμένο χρώμα. Στα δεξιά του, εμφανίζονται τα φασματικά χαρακτηριστικά του επιλεγμένου χρώματος. Αυτά τα χαρακτηριστικά μπορούν να αλλάξουν χειροκίνητα.
Εάν το επιλεγμένο χρώμα είναι ένα μη τυπικό χρώμα (απόχρωση) και πρέπει να χρησιμοποιηθεί πολλές φορές σε μια περίοδο επεξεργασίας, τότε μπορείτε να το τοποθετήσετε στη λίστα "Πρόσθετα χρώματα" που βρίσκεται κάτω από την κύρια παλέτα. Για να το κάνετε αυτό, πριν το επιλέξετε, κάντε κλικ στο πρόσθετο πλαίσιο χρώματος, επιλέξτε μια απόχρωση και κάντε κλικ στο κουμπί "Προσθήκη στο σετ". Για έξοδο από το παράθυρο, κάντε κλικ στο κουμπί ΟΚ.
Εάν το φόντο της σελίδας πρέπει να είναι εικόνα, τότε θα πρέπει να ανοίξετε την απαιτούμενη εικόνα σε αυτήν την καρτέλα
. Συνιστάται αυτό το αρχείο να βρίσκεται στο φάκελο στον οποίο είναι αποθηκευμένο το αρχείο σελίδας. Στο Σχ. 6. δείχνει ένα παράδειγμα φόντου με τη μορφή εικόνας αποθηκευμένης σε αρχείο πεταλούδα.gif.Όπως φαίνεται από το Σχ. 6, το φόντο είναι ένα επαναλαμβανόμενο μοτίβο που απεικονίζει μια πεταλούδα ( πεταλούδα).
Για σύγκριση, στο Σχ. Το 7 δείχνει το ίδιο το σχήμα ξεχωριστά.
Ας σημειώσουμε αμέσως ότι το παραπάνω παράδειγμα αποτελεί παράδειγμα κακής επιλογής υποστρώματος, καθώς η εικόνα κρύβει το περιθώριο της σελίδας και το κάνει, όπως λένε, «θαμπώνει στα μάτια». Το μόνο του πλεονέκτημα είναι ότι δείχνει καθαρά πώς το σχέδιο δημιουργεί το φόντο στη σελίδα.
Εάν θέλετε το φόντο να είναι στατικό, δηλαδή, ώστε κατά την κύλιση μιας μεγάλης σελίδας στο πρόγραμμα περιήγησης το φόντο να παραμένει ακίνητο, πρέπει να ορίσετε την επιλογή Κάντε το υπόστρωμα.
Στην πράξη, οι ελαφρώς κορεσμένες εικόνες επιλέγονται συνήθως ως φόντο προκειμένου να δημιουργηθεί το επιθυμητό φόντο, αλλά όχι να εστιάσουν την προσοχή του θεατή της σελίδας σε αυτό. Ωστόσο, η επιλογή του φόντου είναι θέμα γούστου
Ιστός σχεδιαστής.Συνήθως, οι εικόνες φόντου έχουν τις ακόλουθες μορφές:
bmp, gif, jpg , png .Θα πρέπει να ληφθεί υπόψη ότι μια εικόνα είναι συνήθως το στοιχείο που απαιτεί μεγαλύτερη ένταση μνήμης μιας ιστοσελίδας. Επομένως, χρειάζεται ο μεγαλύτερος χρόνος για να το κατεβάσει το πρόγραμμα περιήγησης από τον διακομιστή. Εάν η ταχύτητα σύνδεσης είναι χαμηλή και η σελίδα που φορτώνεται περιέχει πολλές μεγάλες εικόνες, τότε η φόρτωση αυτής της σελίδας μπορεί να διαρκέσει λίγο. Ο θεατής μιας τέτοιας σελίδας μπορεί να κουραστεί να περιμένει να ολοκληρωθεί η λήψη και να την ακυρώσει. Επομένως, θα πρέπει να προσπαθήσετε να ελαχιστοποιήσετε τον όγκο των σχεδίων και τον αριθμό τους στη σελίδα.
Θεωρείται ότι το φόντο έχει αποδεκτές διαστάσεις εάν ο όγκος της εικόνας δεν υπερβαίνει τα 1–5 kilobyte (K). Είναι καλύτερα αν είναι λιγότερο από ένα κιλομπάιτ. Για σύγκριση, ας πούμε ότι ο όγκος της ίδιας της ιστοσελίδας συνήθως δεν υπερβαίνει τα 10–20 K. Μόνο οι σελίδες με μεγάλη ποσότητα κειμένου είναι μεγάλες. Ο λόγος είναι ότι μια ιστοσελίδα είναι ένα πρόγραμμα (οδηγίες) σχετικά με το πώς και τι να τοποθετήσετε στην οθόνη του προγράμματος περιήγησης του χρήστη. Για παράδειγμα, εάν σε ένα τέτοιο μέρος στην οθόνη πρέπει να τοποθετήσετε μια εικόνα μεγέθους 150 K, τότε σε μια ιστοσελίδα η οδηγία για αυτόν τον σκοπό μπορεί να πάρει μόνο 50 byte, δηλαδή 3000 φορές λιγότερο από την ίδια την εικόνα, που μεταφέρεται στον υπολογιστή του θεατή ξεχωριστά από τις ιστοσελίδες. Δεδομένου ότι ο αριθμός τέτοιων οδηγιών είναι μικρός, το μέγεθος της ίδιας της σελίδας είναι επίσης σχετικά μικρό
Στον σελιδοδείκτη
ΜορφοποίησηΜπορείτε επίσης να ορίσετε το χρώμα του κειμένου. Εδώ μπορείτε να ορίσετε τα χρώματα των υπερσυνδέσμων κειμένου που θα εμφανίζονται στο πρόγραμμα περιήγησης που προβάλλει τη σελίδα: το χρώμα όλων των υπερσυνδέσμων κειμένου, το χρώμα των υπερσυνδέσμων στους οποίους έχει ήδη προσπελάσει ο χρήστης, το χρώμα της υπερ-σύνδεσης στην οποία αιωρείται ο κέρσορας του ποντικιού .Στον σελιδοδείκτη ΕπιπροσθέτωςΜπορείτε να ορίσετε τις εσοχές σελίδας από την επάνω αριστερή γωνία της θύρας προβολής του προγράμματος περιήγησης. Από προεπιλογή, το padding έχει οριστεί σε 8 pixel.
Στον σελιδοδείκτη
ΓλώσσαΜπορείτε να ορίσετε ειδικές γλώσσες κωδικοποίησης κειμένου για αποθήκευση και φόρτωση σελίδας.4. Χρήση πινάκων
Οι πίνακες είναι ίσως το πιο αποτελεσματικό και απαραίτητο μέσο για τη σήμανση ιστοσελίδων. Εάν μπορείτε να κάνετε χωρίς φόντο, τότε χωρίς τραπέζι είναι σχεδόν αδύνατο.
Κάθε πίνακας αποτελείται από κελιά που είναι ταξινομημένα σε γραμμές και στήλες. Μπορείτε να συγχωνεύσετε μεμονωμένα κελιά, να ορίσετε την εσοχή του εσωτερικού περιεχομένου από τα σύνορά του, να ορίσετε την απόσταση μεταξύ των κελιών, να ορίσετε τη θέση των στοιχείων που τοποθετούνται μέσα σε αυτά, να δημιουργήσετε φόντο ξεχωριστά από άλλα κελιά, να δημιουργήσετε περιγράμματα, να εισαγάγετε άλλους πίνακες μέσα στα κελιά και πολλά άλλα .
Εισαγωγή πίνακα
Για να εισαγάγετε έναν πίνακα σε μια σελίδα, πρέπει να εκτελέσετε την εντολή μενού
Τπίνακας/Εισαγωγή/Πίνακας. Στο παράθυρο που ανοίγει, το οποίο φαίνεται στο Σχ. 8, πρέπει να οριστεί ο αριθμός των γραμμώνκαι στήλες. Εκεί μπορείτε επίσης να ορίσετε τη θέση του πίνακα στη σελίδα. Συνήθως αφήνεται η προεπιλεγμένη θέση. Ωστόσο, εάν είναι απαραίτητο ο πίνακας να είναι πάντα προσανατολισμένος στη μέση στην οριζόντια κατεύθυνση όταν προβάλλεται στο παράθυρο του προγράμματος περιήγησης, τότε πρέπει να ορίσετε την επιλογήευθυγράμμιση στο κέντρο.Η επιλογή μεγέθους περιγράμματος έχει σχεδιαστεί για να ορίζει το πάχος των γραμμών που οριοθετούν τον πίνακα και τα κελιά. Εάν έχει οριστεί στο μηδέν και το πλαίσιο ελέγχου είναι επιλεγμένο Σύμπτυξη περιγράμματος πίνακα, τότε τα περιγράμματα δεν θα είναι ορατά στο πρόγραμμα περιήγησης. Αυτό σας επιτρέπει να χρησιμοποιήσετε έναν αόρατο πίνακα για τη διάταξη σελίδας.
Ιδιοκτησία
Πεδίο κυττάρωνπροορίζεται να υποδεικνύει την προσθήκη σε pixel από το εσωτερικό περιεχόμενο για όλα τα κελιά του πίνακα. Ιδιοκτησία Διάσταση κελιώνσας επιτρέπει να ορίσετε την απόσταση σε pixel μεταξύ όλων των παρακείμενων κελιών πίνακα. Ρύθμιση πλάτουςπροορίζεται να ορίσει το πλάτος του πίνακα σε pixel ή ως ποσοστό σε σχέση με το πλάτος της θύρας προβολής, ανεξάρτητα από το μέγεθος των περιεχομένων του. Από προεπιλογή είναι απενεργοποιημένο. Αυτό σημαίνει ότι το μέγεθος του πίνακα θα καθοριστεί από το μέγεθος του περιεχομένου του.Εάν πρέπει να ορίσετε τη σήμανση στυλ και φόντου του πίνακα, αυτό μπορεί να γίνει στο ίδιο παράθυρο.
Όταν ολοκληρώσετε τη σήμανση του πίνακα, κάντε κλικ στο OK.Διάταξη κελιών πίνακα
Οι λειτουργίες σε μεμονωμένα κελιά ή σε ολόκληρο τον πίνακα θα πρέπει να ξεκινούν επιλέγοντας τα κελιά. Μπορείτε να επιλέξετε με το ποντίκι, το πληκτρολόγιο ή χρησιμοποιώντας εργαλεία
F.P. Για να επιλέξετε με το ποντίκι, πρέπει να τοποθετήσετε τον κέρσορα του ποντικιού σε κάποιο κελί της επιλεγμένης περιοχής, να πατήσετε το αριστερό κουμπί του ποντικιού και, ενώ κρατάτε πατημένο το πλήκτρο, να το μετακινήσετε ομαλά πάνω από τα κελιά. Για να επιλέξετε με το πληκτρολόγιο, πρέπει να τοποθετήσετε τον κέρσορα του πληκτρολογίου σε ένα κελί, να πατήσετε το πλήκτρο Shift και, ενώ κρατάτε πατημένο το πλήκτρο, να πατήσετε τα πλήκτρα που θέλετε για να μετακινήσετε τον κέρσορα του πληκτρολογίου (πάνω, κάτω, αριστερά, δεξιά) μέχρι το επιθυμητό επιλέγεται η περιοχή των κελιών. Μπορείτε να επιλέξετε μια στήλη ή μια γραμμή, καθώς και ολόκληρο τον πίνακα.Για ενώσειςεπιλεγμένα κελιά, πρέπει να μετακινήσετε τον κέρσορα πάνω σε οποιοδήποτε από αυτά και να πατήσετε το δεξί κουμπί του ποντικιού. Στο αναδυόμενο μενού περιβάλλοντος, κάντε κλικ στη γραμμή Συγχώνευση κελιών. Μπορείτε να διαγράψετε κελιά με τον ίδιο τρόπο.
Αν χρειαστεί σπάσιμοένα ή περισσότερα κελιά σε πολλές σειρές ή στήλες, πρέπει να τα επιλέξετε (όταν χωρίζετε ένα κελί, δεν απαιτείται επιλογή), εκτελέστε την εντολή Διαίρεση κυττάρων. Στο παράθυρο διαχωρισμού που εμφανίζεται, πρέπει να υποδείξετε τον τρόπο διαχωρισμού – σε στήλες ή σειρές. Στη συνέχεια, θα πρέπει να καθορίσετε τον αριθμό των στηλών ή των γραμμών. Αυτό το παράθυρο φαίνεται στο Σχ. 9.
Εδώ μπορείτε να ορίσετε τη θέση των περιεχομένων του οριζόντια ή κάθετα. Για να το κάνετε αυτό, επιλέξτε την επιθυμητή οριζόντια θέση (κέντρο, αριστερά, δεξιά) ή κατακόρυφη θέση(στην κορυφή, στη μέση, στο πολύ κάτω, σε σχέση με τον άξονα). Στο Σχ. 10 κάθετη θέση του κελιού – πάνω από(όταν τοποθετηθούν, τα εσωτερικά στοιχεία θα πιεστούν στο επάνω άκρο του κελιού), οριζόντια – στο κέντρο(το περιεχόμενο θα είναι στο κέντρο).
Μπορείτε να ορίσετε το πλάτος και το ύψος του κελιού σε pixel ή ποσοστά.Στην ενότητα φόντου, μπορείτε να ορίσετε το φόντο του κελιού ως χρώμα ή μοτίβο με τον ίδιο τρόπο που προγραμματίζετε ένα φόντο σελίδας.
Εάν πρέπει να αντιστοιχίσετε τα ίδια χαρακτηριστικά σε πολλά κελιά, για παράδειγμα, να τα ορίσετε στο ίδιο φόντο, τότε αυτό μπορεί να γίνει σε ένα βήμα. Θα πρέπει να επιλέξετε τέτοια κελιά και, στη συνέχεια, να τα σημειώσετε με τον τρόπο που περιγράφεται. Εάν πρέπει να αντιστοιχίσετε ορισμένα χαρακτηριστικά σε όλα τα κελιά, τότε είναι καλύτερα να τα εκχωρήσετε στον ίδιο τον πίνακα. Για να το κάνετε αυτό, πρέπει να κάνετε κλικ σε οποιοδήποτε κελί και να εκτελέσετε την ίδια εντολή.
5. Εισαγωγή και μορφοποίηση κειμένου
Για να εισαγάγετε κείμενο σε μια σελίδα, πρέπει να κάνετε κλικ με το ποντίκι για να τοποθετήσετε τον κέρσορα του πληκτρολογίου στην επιθυμητή θέση και να εισαγάγετε κείμενο εκεί από το πληκτρολόγιο ή να το αντιγράψετε από οποιοδήποτε άλλο έγγραφο χρησιμοποιώντας το πρόχειρο των Windows. Με αυτόν τον τρόπο, μπορείτε να εισάγετε κείμενο απευθείας στη σελίδα ή σε κελιά πίνακα.
Η μορφοποίηση αναφέρεται στον σκοπό της γραμματοσειράς, το μέγεθός της, τη χρωματική σήμανση, την έντονη γραφή, την πλάγια γραφή, την υπογράμμιση, τον οριζόντιο προσανατολισμό του κειμένου και μια σειρά από άλλες ενέργειες. Αυτές οι λειτουργίες εκτελούνται σύμφωνα με τα πρότυπα που έχουν υιοθετηθεί στο πρόγραμμα επεξεργασίας του Word: πρώτα πρέπει να επιλέξετε ένα τμήμα κειμένου και, στη συνέχεια, να εφαρμόσετε μια λειτουργία μορφοποίησης σε αυτό.
Διαφορά από το πρόγραμμα επεξεργασίας του Word είναι μόνο αυτό όταν πατάτε ένα πλήκτροΕισαγω (για να εισαγάγετε μια νέα παράγραφο) υπάρχει πάρα πολύ κενό μεταξύ των παραγράφων. Εάν θέλετε η απόσταση μεταξύ των παραγράφων να είναι ίδια με εκείνη μεταξύ των γραμμών μιας παραγράφου, πατήστε το πλήκτροΒάρδια και, χωρίς να το απελευθερώσετε, το κλειδίΕισαγω.
6. Εισαγωγή υπερσυνδέσμων
Υπερσύνδεσμοςείναι οποιοδήποτε στοιχείο μιας ιστοσελίδας στο οποίο μπορεί να εκχωρηθεί ένας σύνδεσμος σε άλλη ιστοσελίδα, μια διεύθυνση email, μια εικόνα ή, γενικά, οποιοδήποτε αρχείο ή σελιδοδείκτης στην ίδια σελίδα. Ενεργοποιούνται κάνοντας κλικ στον υπερσύνδεσμο. Μπορείτε να αναγνωρίσετε μια υπερ-σύνδεση σε μια ιστοσελίδα κατά την προβολή της σε ένα πρόγραμμα περιήγησης από την εμφάνιση του δρομέα του ποντικιού: εάν το στοιχείο είναι υπερσύνδεσμος, τότε όταν τοποθετείτε το δείκτη του ποντικιού πάνω της, ο κέρσορας παίρνει τη μορφή εικονιδίου.
Για να δημιουργήσετε έναν υπερσύνδεσμο, πρέπει πρώτα να επιλέξετε το στοιχείο σελίδας που θα γίνει ο μελλοντικός υπερσύνδεσμος. Εάν ο υπερσύνδεσμος είναι κείμενο, τότε για να τον επιλέξετε θα πρέπει να μετακινήσετε ομαλά το ποντίκι πάνω του με πατημένο το αριστερό πλήκτρο ή τα πλήκτρα για τη μετακίνηση του δρομέα του πληκτρολογίου με πατημένο το πλήκτρο
Βάρδια. Εάν ο υπερσύνδεσμος είναι εικόνα, τότε για να τον επιλέξετε, πρέπει απλώς να κάνετε κλικ σε αυτόν., η εμφάνιση του οποίου φαίνεται στο Σχ. 12.Εάν ο υπερσύνδεσμος πρέπει να είναι δείκτης προς μια άλλη σελίδα που βρίσκεται στο δίσκο του υπολογιστή σας, τότε πρέπει να κάνετε κλικ στο παράθυρο Εικ. 12 κάντε κλικ στο κουμπί με την εικόνα του φακέλου και επιλέξτε μια ιστοσελίδα στο δίσκο (συνήθως ένα αρχείο με την επέκταση htmlή
htm ) . Σε αυτήν την περίπτωση, θα εμφανιστεί στη γραμμή διευθύνσεων σχετική διεύθυνσηαρχείο με μια ιστοσελίδα. Η σχετική διεύθυνση μιας σελίδας που βρίσκεται στον ίδιο φάκελο με τη σελίδα που δημιουργείται είναι απλώς το όνομα του αρχείου, για παράδειγμα "photo2.htm". Εάν ο σύνδεσμος οδηγεί σε ένα αρχείο εκτός αυτού του φακέλου, τότε ο υπερσύνδεσμος μπορεί να έχει τη μορφή της συμβολοσειράς "../../HomePage.htm", δηλαδή έναν σύνδεσμο προς τη σελίδα HomePage.htm στον ίδιο υπολογιστή, αλλά σε διαφορετικό φάκελο που βρίσκεται δύο επίπεδα πάνω από τον τρέχοντα φάκελο. Οι σχετικές διευθύνσεις είναι πολύ χρήσιμες όταν δημιουργείτε μια ομάδα ιστοσελίδων που βρίσκονται στον ίδιο διακομιστή αλλά σε διαφορετικούς φακέλους και συνδέονται με υπερσυνδέσμους. Αφού προετοιμάσετε τις σελίδες σε έναν κανονικό υπολογιστή, μπορείτε να τις στείλετε στον διακομιστή Web χωρίς φόβο ότι θα διακοπεί η σύνδεση μεταξύ των σελίδων και των υπερσυνδέσμων, καθώς στον διακομιστή η σχετική δομή της τοποθέτησής τους θα παραμείνει η ίδια και, επομένως, οι υπερσύνδεσμοι θα "λειτουργούν".Για τη δημιουργία απόλυτος
διευθύνσεις, πρέπει να εισαγάγετε την πλήρη διεύθυνση της σελίδας. Για παράδειγμα, εάν πρέπει να δημιουργήσετε έναν υπερσύνδεσμο στη διεύθυνση του ιστότοπου του Κρατικού Πανεπιστημίου της Μόσχας, τότε πρέπει να εισαγάγετε το κείμενο του ονόματος τομέα στη γραμμή URL http://www.msu.ru. Μπορείτε να εισαγάγετε κείμενο που υποδεικνύει τη διεύθυνση IP, για παράδειγμα http://192.206.228.46.Για να δημιουργήσετε έναν τέτοιο υπερσύνδεσμο, εισαγάγετε κείμενο όπως αυτό στη γραμμή διευθύνσεων mailto:διεύθυνση. Για παράδειγμα, εάν είναι απαραίτητο αφού κάνετε κλικ σε έναν υπερσύνδεσμο, θα εκκινηθεί ένα πρόγραμμα-πελάτη ηλεκτρονικού ταχυδρομείου για να στείλετε μια επιστολή στη διεύθυνση ο [email protected], στη συνέχεια στη γραμμή εισαγωγής διεύθυνσης πρέπει να εισαγάγετε το κείμενο mailto:ο [email protected] . Μπορείτε επίσης να κάνετε κλικ στο κουμπί με την εικόνα ενός φακέλου και στο παράθυρο που ανοίγει να εισάγετε την ίδια διεύθυνση χωρίς να καθορίσετε το πρόθεμα mailto:.
Μερικές φορές χρειάζεται να δημιουργήσετε έναν σύνδεσμο προς μια σελίδα που βρίσκεται ήδη στο πρόγραμμα περιήγησης. Για παράδειγμα, πρέπει να επιστρέψετε γρήγορα στην κορυφή της σελίδας, σε κάποια παράγραφο, κ.λπ. Συνήθως, η ανάγκη για τέτοιους συνδέσμους προκύπτει σε εκείνες τις σελίδες που περιέχουν μεγάλο όγκο πληροφοριών. Η διεύθυνση μιας τέτοιας υπερσύνδεσης ονομάζεται σελιδοδείκτη.
Πριν δημιουργήσετε έναν υπερσύνδεσμο σε έναν σελιδοδείκτη, πρέπει πρώτα να δημιουργηθεί ο τελευταίος. Για να το κάνετε αυτό, πρέπει να επιλέξετε έναν μελλοντικό σελιδοδείκτη (ένα τμήμα κειμένου, μια εικόνα κ.λπ.) και να εκτελέσετε την εντολή Εισαγωγή/Σελιδοδείκτης. Στο παράθυρο που ανοίγει, η εμφάνιση του οποίου φαίνεται στο Σχ. 13, πληκτρολογήστε το όνομα του σελιδοδείκτη στη γραμμή εισαγωγής και κάντε κλικ στο κουμπί OK. Στο παράδειγμα που φαίνεται στο Σχ. Η Σελίδα 13 έχει ήδη έναν σελιδοδείκτη που δημιουργήθηκε προηγουμένως Καρτέλα 1και το κείμενο προετοιμάζεται στο παράθυρο εισαγωγής Σελιδοδείκτης 2άλλος σελιδοδείκτης. Στη συνέχεια, θα πρέπει να βγείτε από το παράθυρο δημιουργίας σελιδοδεικτών, να επιλέξετε το στοιχείο υπερ-σύνδεσης με τον σελιδοδείκτη στο παράθυρο δημιουργίας σελίδας και να κάνετε κλικ Σελιδοδείκτης(Εικ. 12) επιλέξτε τον επιθυμητό σελιδοδείκτη από τη λίστα. Το κείμενό του θα τοποθετηθεί στη γραμμή διευθύνσεων. Για παράδειγμα, εάν έχει επιλεγεί ένας σελιδοδείκτης Σελιδοδείκτης 2, τότε ο υπερσύνδεσμος στη γραμμή διευθύνσεων θα μοιάζει με συμβολοσειρά #Σελιδοδείκτης 2. Αφού κάνετε κλικ στο OK, θα δημιουργηθεί ένας υπερσύνδεσμος στον σελιδοδείκτη.
Προγραμματισμός του παραθύρου της οθόνης
Αφού κάνετε κλικ στον υπερσύνδεσμο προς ιστοσελίδααρχίζει να φορτώνει στο πρόγραμμα περιήγησης. Συνήθως φορτώνεται στο ίδιο παράθυρο με τη σελίδα κλήσης. Εάν χρειάζεστε τη φόρτωση της σελίδας σε νέο παράθυρο, θα πρέπει να χρησιμοποιήσετε το παράθυρο στην Εικ. 12 κάντε κλικ στο κουμπί στα δεξιά της ετικέτας εισαγωγής Επιλογή πλαισίου. Στο παράθυρο που ανοίγει, επιλέξτε τη γραμμή Νέο παράθυρο. Τώρα, αφού κάνετε κλικ σε μια τέτοια υπερ-σύνδεση, θα ανοίξει ένα παράθυρο στο πρόγραμμα περιήγησης και το περιεχόμενο με δυνατότητα λήψης θα εμφανιστεί σε αυτό.
Εκτός από αυτή που συζητήθηκε, υπάρχουν πολλές άλλες επιλογές για την παρουσίαση της καλούμενης σελίδας στο πρόγραμμα περιήγησης. Ανήκουν σε πιο σύνθετες – σελίδες πλαισίου, που έχουν σημαντικά μεγαλύτερες ευκαιρίες για Web design. Τα χαρακτηριστικά σχεδιασμού των σελίδων πλαισίου θα συζητηθούν παρακάτω.
7. Εισαγωγή στοιχείων εκτός κειμένου
Για να εισαγάγετε στοιχεία μη κειμένου σε μια σελίδα, χρησιμοποιήστε ένα στοιχείο μενού Εισάγετε. Η ίδια λειτουργία για ορισμένα στοιχεία μπορεί να αντιγραφεί από πίνακες FP.
Η λίστα μενού φαίνεται στην Εικ. 14. Οι γραμμές που περιέχουν υπομενού επισημαίνονται στα δεξιά με έναν δείκτη σε σχήμα τριγώνου. Οι λειτουργίες που μπορούν να αντιγραφούν χρησιμοποιώντας τα πλήκτρα συντόμευσης επισημαίνονται με το όνομα του συνδυασμού πλήκτρων.
 |
Ρύζι. 14. Βασικό |
Ακολουθούν μερικά από τα πιο συχνά χρησιμοποιούμενα στοιχεία του μενού Εισαγωγή χωρίς κείμενο:
- Χάσμα . Μετακίνηση σε νέα παράγραφο χωρίς ειδικό διάστημα (ίδιο με το Shift + Enter).
Ας δούμε μερικά χαρακτηριστικά της εισαγωγής αυτών των στοιχείων.
Οριζόντια γραμμή
Για να το εισαγάγετε, κάντε κλικ στην επιθυμητή θέση στη σελίδα, επιλέξτε τη γραμμή από το μενού Εισαγωγή/Οριζόντια γραμμήκαι κάντε κλικ σε αυτό για να εισαγάγετε το στοιχείο. Εάν πρέπει να αλλάξετε τα χαρακτηριστικά μιας γραμμής, μετακινήστε τον κέρσορα του ποντικιού πάνω της, κάντε δεξί κλικ για να εμφανιστεί το μενού περιβάλλοντος και κάντε κλικ στη γραμμή ΜΕιδιότητες μιας οριζόντιας γραμμής . Θα εμφανιστεί ένα παράθυρο με το ίδιο όνομα στο οποίο μπορείτε να αλλάξετε τα χαρακτηριστικά γραμμής: πλάτος, ύψος, χρώμα και άλλα χαρακτηριστικά.
Συχνά υπάρχει ανάγκη να εισαγάγετε μια γραμμή με ήδη εκχωρημένα χαρακτηριστικά σε διαφορετικά σημεία της σελίδας. Για να το κάνετε αυτό, κάντε κλικ στη γραμμή και μετά στο κουμπί
αντιγραφή στον πίνακα Πρότυπογια να αντιγράψετε τη γραμμή στο πρόχειρο. Τώρα πρέπει να κάνετε κλικ στο επιθυμητό μέρος στη σελίδα και μετά στο κουμπί εισαγωγήςγια να επικολλήσετε τα περιεχόμενα του buffer στην επιλεγμένη θέση. Με αυτόν τον τρόπο, μπορείτε να εισαγάγετε μια γραμμή πολλές φορές σε διαφορετικά σημεία της σελίδας.Σημείωση: Η περιγραφόμενη μέθοδος μπορεί να χρησιμοποιηθεί για την αντιγραφή οποιωνδήποτε στοιχείων μιας ιστοσελίδας.
Μια εικόνα είναι το πιο σημαντικό στοιχείο μιας ιστοσελίδας. Είναι σπάνιο να βρεις μια σελίδα που να μην έχει σχέδιο. Εκτός από τον κύριο ρόλο της μεταφοράς μιας εικόνας, τα σχέδια χρησιμοποιούνται για τη διαμόρφωση επιγραφών, τη δημιουργία διαφόρων γραμμών, πλαισίων, την απεικόνιση γραφημάτων, δηλαδή όπου είναι απαραίτητο να παρουσιαστούν πληροφορίες με τη μορφή γραφικής εικόνας.
Για να εισαγάγετε, πρέπει να κάνετε κλικ στο μέρος της σελίδας όπου πρέπει να βρίσκεται η εικόνα, να εκτελέσετε την εντολή Εισάγετε
/Σχέδιο/Από αρχείοή κάντε κλικ στο κουμπί Εισαγάγετε μια εικόνα από ένα αρχείοστον πίνακα Πρότυπο(Εικ. 5.2). Στο παράθυρο που εμφανίζεται, επιλέξτε το αρχείο με την εικόνα στο δίσκο και κάντε κλικ στο OK.Μετά την εισαγωγή, μπορείτε να επισημάνετε την εικόνα ή να την αφήσετε αμετάβλητη. Για να επισημάνετε, πρέπει να κάνετε δεξί κλικ στην εικόνα και μετά στο μενού περιβάλλοντος στη γραμμή
Ιδιότητες εικόνας. Στο πλαίσιο διαλόγου, η εμφάνιση του οποίου φαίνεται στο Σχ. 15, μπορείτε να επισημάνετε την εικόνα.Στον σελιδοδείκτη Είναι κοινάκαθορίζεται το όνομα του αρχείου που αντιπροσωπεύει το σχέδιο. Μπορείτε να αλλάξετε την εικόνα επιλέγοντας ένα διαφορετικό αρχείο.
Στη γραμμή ΚείμενοΜπορείτε να εισαγάγετε κείμενο για να αντιπροσωπεύσετε την επεξήγηση εργαλείου. Όταν ένας χρήστης σε ένα πρόγραμμα περιήγησης τοποθετεί τον κέρσορα του ποντικιού πάνω από μια εικόνα, θα εμφανιστεί κάτω από τον κέρσορα για μικρό χρονικό διάστημα.
Εάν η εικόνα πρέπει να χρησιμεύσει ως υπερσύνδεσμος, μπορείτε να επιλέξετε τη διεύθυνση υπερ-σύνδεσης στην ίδια καρτέλα.
Εάν χρειάζεται να δημιουργήσετε εσοχές για μια εικόνα από γειτονικά στοιχεία σελίδας, μπορείτε να χρησιμοποιήσετε τις ιδιότητες διαστήματαγια οριζόντια επένδυση αριστερά και δεξιά και για κάθετη επένδυση πάνω και κάτω. Στο τμήμα ΜέγεθοςΜπορείτε να αλλάξετε το μέγεθος της εικόνας και τις αναλογίες της. Η εικόνα μπορεί να τεντωθεί και να συμπιεστεί προς την επιθυμητή κατεύθυνση χρησιμοποιώντας τις ιδιότητες του πλάτους και του ύψους. Οι διαστάσεις μπορούν να καθοριστούν σε απόλυτες μονάδες—pixel—ή σε σχετικές μονάδες—ποσοστά σε σχέση με τις πραγματικές διαστάσεις της εικόνας. Εάν είναι απαραίτητο να διατηρηθούν οι αναλογίες της εικόνας κατά την παραμόρφωση, θα πρέπει να ορίσετε την επιλογή Διατηρήστε τις αναλογίες.
Μορφές εικόνας
Υπάρχουν σχέδια που έγιναν σε μορφή ράστερ γραφικάκαι σε μορφή διανυσματικά γραφικά.
Στα γραφικά ράστερ, οι πληροφορίες για όλα τα εικονοστοιχεία της εικόνας καταγράφονται σε ένα αρχείο και κάθε εικονοστοιχείο αναπαρίσταται ως μια ακολουθία bit που αποθηκεύει τα χαρακτηριστικά του εικονοστοιχείου - χρώμα, φωτεινότητα, αντίθεση, συντεταγμένες και άλλα χαρακτηριστικά. Οι μορφές ράστερ μπορούν να ονομαστούν φυσικές, επειδή οι πληροφορίες σχετικά με την εικόνα αποθηκεύονται με τη μορφή με την οποία παρουσιάζονται στην οθόνη της οθόνης, επομένως απαιτείται ελάχιστος χρόνος για την εκτέλεση λειτουργιών εξόδου. Ωστόσο, τα γραφικά bitmap συνήθως απαιτούν πολλή μνήμη για την αποθήκευσή τους, επομένως η τοποθέτηση μόνο μικρών γραφικών σε μια σελίδα είναι δικαιολογημένη. Για να μειωθεί το μέγεθος ενός αρχείου εικόνας ράστερ, χρησιμοποιούνται μέθοδοι συμπίεσης. Σε σύγκριση με το πρωτότυπο, ένα συμπιεσμένο σχέδιο συνήθως καταλαμβάνει δεκάδες φορές λιγότερη μνήμη. Οι συμπιεσμένες εικόνες bitmap φορτώνονται πιο γρήγορα, αλλά χρειάζεται λίγος χρόνος για να αποσυμπιεστεί η εικόνα.
Τα διανυσματικά γραφικά χρησιμοποιούνται κυρίως για την απεικόνιση γεωμετρικών σχημάτων χρησιμοποιώντας μαθηματικούς τύπους. Αυτή η μέθοδος αναπαράστασης ενός σχεδίου είναι πολύ αποτελεσματική, καθώς δεν απαιτεί αποθήκευση δεδομένων για κάθε εικονοστοιχείο και η αναπαράσταση ενός σχεδίου περιορίζεται σε μαθηματικούς υπολογισμούς και εκτέλεση εντολών για τη διαμόρφωση ενός γραφικού αντικειμένου. Τυπικά τέτοια σχέδια χρησιμοποιούνται σε προγράμματα σχεδίασης, για παράδειγμα
ΠΑΛΗΑΝΘΡΩΠΟΣ.Υπάρχει επίσης μορφή μετα-αρχείου, το οποίο συνδυάζει και τους δύο τύπους γραφικών. Ένα παράδειγμα είναι τα αρχεία με την επέκταση .wmf. Τέτοια αρχεία χρησιμοποιούνται, για παράδειγμα, για την αναπαράσταση σχεδίων στο δημοφιλές πρόγραμμα επεξεργασίας του Word, όταν για να δοθεί στα έγγραφα κειμένου η απαιτούμενη εμφάνιση, οι διαστάσεις των σχεδίων πρέπει να αλλάζουν συχνά.
Υπάρχουν δύο ευρέως δημοφιλείς μορφές ράστερ που χρησιμοποιούνται αυτήν τη στιγμή μεταξύ των προγραμματιστών ιστοσελίδων: GIF(Graphics Interchange Format), που αναπτύχθηκε το 1987 και βελτιώθηκε το 1989 από την CompuServe και JPEG, το οποίο έλαβε το συντομευμένο όνομα της ομάδας ανάπτυξης Joint Picture Experts Group.
Σε μορφή GIF (αρχεία με την επέκταση
.gif) η εικόνα κωδικοποιείται χρησιμοποιώντας τη μέθοδο μπλοκ. Μόλις ληφθεί στον υπολογιστή, αποκωδικοποιείται και αναπαράγεται στην οθόνη της οθόνης. Η μορφή GIF παρέχει τη μικρότερη ποσότητα μνήμης αρχείων για σχέδια που έχουν περιορισμένο αριθμό χρωμάτων.Η χρήση της μορφής GIF σάς επιτρέπει να δημιουργήσετε πολλά εφέ, μεταξύ των οποίων διαφάνεια
(διαφάνεια). Αυτό το εφέ χρησιμοποιείται ευρέως όταν ένα σχέδιο πρέπει να παρουσιαστεί σε μορφή διαφορετική από την ορθογώνια. Σε αυτές τις περιπτώσεις, ένα μέρος της ορθογώνιας εικόνας βάφεται με ειδικό χρώμα διαφάνειας και το άλλο με κανονικά χρώματα. Μόλις τοποθετηθεί στη σελίδα, το σχέδιο σε εκείνα τα εικονοστοιχεία που είναι γεμάτα με το χρώμα της διαφάνειας αντικαθίσταται από εικονοστοιχεία στο χρώμα του φόντου και τα υπόλοιπα εικονοστοιχεία αναπαράγονται με τον συνηθισμένο τρόπο, δημιουργώντας έτσι το αποτέλεσμα της διαφάνειας. Τώρα το ίδιο σχέδιο μπορεί να τοποθετηθεί σε υποστρώματα διαφορετικών χρωμάτων χωρίς φόβο ότι εάν τα χρώματα δεν ταιριάζουν, θα αναπαραχθούν ανεπιθύμητα ορθογώνια περιγράμματα του σχεδίου. Μπορείτε να χρησιμοποιήσετε πολλούς επεξεργαστές εικόνας, όπως το Photo Shop, για να δημιουργήσετε διαφανή GIF.Ένα άλλο αποτέλεσμα είναι ο τρόπος με τον οποίο αποδίδεται το ληφθέν GIF στο πρόγραμμα περιήγησης. Εάν η εικόνα έχει αποθηκευτεί στη μορφή πλεγμένα(interleaved), στη συνέχεια, όταν μεταδίδεται στο πρόγραμμα περιήγησης, φορτώνεται από διαφορετικά μέρη της εικόνας. Σε χαμηλή ταχύτητα σύνδεσης, δημιουργείται το εφέ μιας σταδιακής εμφάνισης της εικόνας, από θολή στην αρχή της λήψης έως διαγραφή στο τέλος. Τα πλεονεκτήματα των γραφικών με παρεμβαλλόμενη μορφή είναι προφανή επειδή συχνά, πολύ πριν ολοκληρωθεί η φόρτωση της σελίδας με το ανεπιθύμητο γραφικό, ο χρήστης μπορεί να σταματήσει τη φόρτωση, εξοικονομώντας έτσι τον χρόνο που θα έπρεπε να ξοδέψει σε αναμονή για ολόκληρο το γραφικό κανονικής μορφής να μεταφερθεί. Το πρόγραμμα FP σάς επιτρέπει να δημιουργήσετε ένα εφέ διαγράμμισης για οποιαδήποτε σχέδια GIF.
Τα GIF μπορούν να χρησιμοποιηθούν για τη δημιουργία πρωτόγονων κινούμενων εικόνων που χρησιμοποιούνται σε ιστοσελίδες για να ζωντανεύουν ("ζωντανεύουν") το περιεχόμενό τους. Τα εφέ κινούμενων σχεδίων αναμφίβολα διακοσμούν τη σελίδα και συχνά χρησιμεύουν ως μέσο προσέλκυσης της προσοχής στα μεμονωμένα κομμάτια της. Το μειονέκτημα είναι ο αυξημένος όγκος αρχείων που περιέχουν κινούμενα σχέδια. Για να δημιουργήσετε κινούμενα GIF, μπορείτε να χρησιμοποιήσετε πολλά προγράμματα - από απλά έως πολύ σύνθετα, επιτρέποντάς σας να δημιουργήσετε ολόκληρες ταινίες κινουμένων σχεδίων σε ένα αρχείο. Ένα παράδειγμα απλού προγράμματος κίνησης είναι το MP Gif Animator (από τον V. Pham). Ένα ισχυρό πρόγραμμα κινουμένων σχεδίων είναι το Ulead GIF Animator Lite (προϊόν της Ulead Systems).
Σε μορφή JPEG (αρχεία με επεκτάσεις .jpg, λιγότερο συχνά .jpeή jpeg) είναι προτιμότερο να αποθηκεύονται πολύχρωμες εικόνες, όπως φωτογραφίες φύσης, εικόνες υψηλής ποιότητας με πλούσια χρωματική παλέτα, σε συμπιεσμένη μορφή. Όταν αποθηκεύετε ένα σχέδιο σε προγράμματα επεξεργασίας γραφικών (για παράδειγμα, Photo Shop), μπορείτε να ελέγξετε το μέγεθος του αρχείου και την ποιότητα του σχεδίου, τα οποία σχετίζονται αντιστρόφως μεταξύ τους. Αυτή η ιδιότητα χρησιμοποιείται συχνά από προγραμματιστές ιστοσελίδων για να ελαχιστοποιήσουν τα αρχεία με εικόνες, χάνοντας κάπως την ποιότητά τους. Συχνά τέτοιες εικόνες είναι πρακτικά δυσδιάκριτες οπτικά, αλλά μπορεί να διαφέρουν κατά 1,5–3 φορές στο μέγεθος των αντίστοιχων αρχείων.
Δεν μπορείτε να αγνοήσετε αρχεία με σχέδια σε μορφή BMP (αρχεία με την επέκταση .bmp). Αυτή είναι μια από τις πρώτες μορφές γραφικών. Τα σχέδια σε αυτή τη μορφή καταλαμβάνουν πολλή μνήμη, αλλά χρησιμοποιούνται ακόμα σήμερα, αλλά μόνο για την αναπαράσταση πολύ μικρών εικόνων.
Πρόσφατα, μια νέα μορφή εικόνας PNG αναπτύχθηκε ειδικά για το Web, η οποία θα πρέπει να αντικαταστήσει τη μορφή GIF.
Ένας σοβαρός πόρος για τη μείωση του μεγέθους των αρχείων γραφικών είναι η ειδική επεξεργασία εικόνας σε προγράμματα επεξεργασίας γραφικών. Αρκετά συχνά είναι δυνατό να μειωθεί το αρχείο πολλές φορές χωρίς ουσιαστικά καμία επιδείνωση στην ποιότητα του σχεδίου. Στο Σχ. Η Εικόνα 5.16 δείχνει ένα παράδειγμα επεξεργασίας μιας εικόνας χρησιμοποιώντας το πρόγραμμα επεξεργασίας γραφικών Photo Shop.
Κατά τη μετατροπή μιας φωτογραφίας χρησιμοποιώντας έναν σαρωτή σε αρχείο, ακόμη και σε μια τόσο μικρή περιοχή της εικόνας όπως ο γιακάς ενός λευκού πουκάμισου, σχηματίστηκαν πολλά pixel με διαφορετικά χρωματικά χαρακτηριστικά. Η διατήρηση αυτών των χαρακτηριστικών κατά τη συμπίεση μιας εικόνας απαιτεί μια «ατομική» προσέγγιση σε καθένα από αυτά, η οποία έχει ως αποτέλεσμα ένα αδικαιολόγητα μεγάλο μέγεθος αρχείου.
Αριστερά στο Σχ. Το Σχήμα 16 δείχνει τη γραμμή εργαλείων του προγράμματος επεξεργασίας γραφικών, στη μέση παρακάτω είναι μια φωτογραφία, στην κορυφή είναι ένα μεγεθυσμένο κομμάτι της φωτογραφίας (η δεξιά πλευρά του γιακά), στα δεξιά είναι μια μεγεθυμένη όψη του ρετουσαρισμένου τμήματος. Το ρετούς περιλάμβανε την κατασκευή του γιακά του πουκαμίσου. Είναι σαφές ότι εάν κάνετε τα εικονοστοιχεία που εμφανίζουν το ονομαζόμενο τμήμα μονόχρωμα, η ποιότητα της φωτογραφίας δεν θα επιδεινωθεί, αλλά όταν αποθηκευτεί με συμπίεση, οι πληροφορίες για όλα τα μονόχρωμα εικονοστοιχεία θα καταγραφούν μία φορά, με αποτέλεσμα το το μέγεθος του αρχείου έχει γίνει μικρότερο. Μια παρόμοια λειτουργία εφαρμόστηκε σε διάφορα κομμάτια της φωτογραφίας, γεγονός που επέτρεψε τη μείωση του μεγέθους του αρχείου κατά 2,5 φορές. Το ρετούς γίνεται με τη χρήση διαφόρων εργαλείων πάνελ, συμπεριλαμβανομένου του
Εργαλείο μολυβιού (μολύβι), το οποίο επισημαίνεται με το ενεργό χρώμα στον πίνακα.Για να ελαχιστοποιήσετε το μέγεθος των αρχείων εικόνας, μπορείτε επίσης να χρησιμοποιήσετε ειδικά προγράμματα που αφαιρούν από αυτά μη γραφικές πληροφορίες που έχουν τοποθετηθεί από προγράμματα επεξεργασίας γραφικών κατά την ανάπτυξη και αποθήκευση μιας εικόνας. Για παράδειγμα, ο συγγραφέας αυτών των γραμμών χρησιμοποιεί το πρόγραμμα Advanced GIF Optimizer από την Gold Software. Η χρήση βελτιστοποιητών μπορεί συχνά να μειώσει το μέγεθος ενός αρχείου GIF κατά 10-60%.
Για να επιταχύνετε τη φόρτωση μιας εικόνας, μπορείτε να την κόψετε σε ξεχωριστά μέρη και στη συνέχεια να τοποθετήσετε αυτά τα μέρη σε σελίδες σε διαφορετικά κελιά πίνακα. Όταν προβάλλεται στο πρόγραμμα περιήγησης, ένα τεμαχισμένο σχέδιο εμφανίζεται το ίδιο με ένα μη κατακερματισμένο σχέδιο. Το πλεονέκτημα του κατακερματισμού είναι ότι οι εικόνες, όπως και άλλα στοιχεία σελίδας, φορτώνονται στο πρόγραμμα περιήγησης παράλληλα, γεγονός που βοηθά στην επιτάχυνση της φόρτωσης της σελίδας. Επιπλέον, το πλήρως φορτωμένο τμήμα εμφανίζεται αμέσως στο πρόγραμμα περιήγησης, το οποίο σας επιτρέπει να δημιουργήσετε την ψευδαίσθηση ότι η εικόνα θα φορτωθεί γρήγορα. Σε συνδυασμό με τη δυνατότητα μεταφοράς εικόνων GIF και JPEG και πόρων επεξεργασίας, μπορείτε να επιτύχετε αξιοσημείωτη επιτάχυνση στη φόρτωση εικόνων σε σελίδες.
8. Σελίδες με πλαίσια
Αυτές οι σελίδες είναι οι πρώτες που χρησιμοποιούνται για το πρόγραμμα περιήγησης Netscape Navigator. Μια τέτοια σελίδα αντιπροσωπεύει ένα σύνολο ανεξάρτητων παραθύρων πλαισίων στο πρόγραμμα περιήγησης, το οποίο καθιστά δυνατή την επέκταση των δυνατοτήτων ταυτόχρονης εμφάνισης μεμονωμένων σελίδων ή διαφορετικών τμημάτων μιας σελίδας, ιδίως, επιτρέποντάς τους να κάνουν ανεξάρτητη κύλιση. Κάθε πλαίσιο αντιπροσωπεύεται από ένα ξεχωριστό αρχείο και ένα άλλο αρχείο χρησιμοποιείται για να περιγράψει τον τρόπο με τον οποίο εμφανίζονται τα πλαίσια στο πρόγραμμα περιήγησης, το οποίο είναι ένα αρχείο πλαισίου. Κάθε πλαίσιο είναι ένας Ιστός σελίδα και μπορεί να προβληθεί ως ξεχωριστή σελίδα σε ένα παράθυρο.
Στο Σχ. Το Σχήμα 17 δείχνει μια ιστοσελίδα που σας επιτρέπει να πλοηγηθείτε σε σελίδες που εμφανίζουν ηλεκτρονικό διδακτικό υλικό του τμήματος.
|
| Ρύζι. 17. Παράδειγμα ιστοσελίδας με πλαίσιο |
Η σελίδα είναι οργανωμένη σε μορφή μενού και αποτελείται από τρία πλαίσια
: το ένα βρίσκεται στην κορυφή, τα άλλα δύο είναι κάτω από αυτό - στα αριστερά και στα δεξιά. Το επάνω πλαίσιο αντιπροσωπεύει τον τίτλο της σελίδας. Τα κάτω πλαίσια έχουν σχεδιαστεί έτσι ώστε να μπορεί να αναπαραχθεί και να χρησιμοποιηθεί ένα μενού δύο επιπέδων. Το πρώτο επίπεδο μενού είναι οργανωμένο στο αριστερό πλαίσιο. Σε αυτό, ο χρήστης μπορεί να επιλέξει την επιθυμητή ειδικότητα, το γνωστικό αντικείμενο ή να μεταβεί από αυτή τη σελίδα στην αρχική σελίδα του τμήματος κάνοντας κλικ σε έναν από τους υπερσυνδέσμους. Στο Σχ. 17 στο αριστερό πλαίσιο, κάντε κλικ στον υπερσύνδεσμο με την επιγραφή Επιστήμη των υπολογιστών, όπως μπορεί να κριθεί από το διακεκομμένο πλαίσιο που οριοθετεί την υπερ-σύνδεση. Μετά από αυτό το κλικ, μια σελίδα που περιέχει τις επικεφαλίδες του διαθέσιμου διδακτικού υλικού για αυτόν τον κλάδο φορτώνεται και αναπαράγεται στο δεξιό πλαίσιο. Στο δεξί πλαίσιο, ο κέρσορας του ποντικιού αιωρείται πάνω από τη γραμμή Ανοιξεσε μια από τις επικεφαλίδες. Έτσι, το δεξί πλαίσιο λειτουργεί ως κοντέινερ υπομενού, δηλαδή ενεργό μενού δεύτερου επιπέδου.Η περιγραφόμενη μέθοδος οργάνωσης σάς επιτρέπει να δημιουργήσετε, σε μια φιλική προς το χρήστη μορφή, μια αυθαίρετα μεγάλη λίστα επιστημονικών κλάδων και ειδικοτήτων στο αριστερό πλαίσιο και μια αυθαίρετα μεγάλη λίστα υλικών για κάθε ειδικότητα ή κλάδο για εμφάνιση στο δεξιό πλαίσιο. Σε αυτήν την περίπτωση, στη λίστα του δεξιού πλαισίου μπορείτε πάντα να δείτε τα περιεχόμενα της επιλεγμένης θέσης από τη λίστα του αριστερού πλαισίου.
Κατά το σχεδιασμό μιας σελίδας πλαισίου, οι ακόλουθες σελίδες δημιουργήθηκαν αρχικά μεμονωμένα:
- header.htm – σελίδα που θα αντιπροσωπεύει την κεφαλίδα της σελίδας πλαισίου.
- menu.htm – σελίδα για την εμφάνιση του μενού στο αριστερό πλαίσιο.
- informatique.htm – σελίδα για την εμφάνιση λίστας διδακτικού υλικού για τον κλάδο Επιστήμη των υπολογιστών;
- Certificate.htm – σελίδα για την εμφάνιση λίστας διδακτικού υλικού της ειδικότητας Πιστοποίηση;
- tms_metod.htm – η πραγματική σελίδα πλαισίου.
Για να δημιουργήσετε την τελευταία σελίδα, οργανώνεται ένα νέο αρχείο χρησιμοποιώντας το μενού Αρχείο /
Δημιουργώκαι επιλέξτε μια ομάδα Αλλα πρότυπα σελίδες...από το παράθυρο εργασιών Δημιουργία.Στο παράθυρο διαλόγου που ανοίγειΠρότυπα σελίδες, επιλέξτε καρτέλα Σελίδαδομή , το οποίο εμφανίζει πρότυπα ιστοσελίδων με δομή πλαισίου που αποτελούν μέρος του FP (Εικ. 18).
Το παράθυρο της ιστοσελίδας των νέων πλαισίων (Εικ. 19) θα χωριστεί σε μέρη σύμφωνα με την επιλεγμένη δομή.
Κάντε δεξί κλικ για να ανοίξετε το μενού περιβάλλοντος, το παράθυρο ιδιοτήτων σελίδας και εισαγάγετε το κείμενο στη γραμμή τίτλου
Μεθοδολογικό υλικό του τμήματος, το οποίο συνήθως εμφανίζεται στο επάνω μέρος του προγράμματος περιήγησης και αποθηκεύστε τη σελίδα tms_metod.htm.Στη συνέχεια, κάντε κλικ στο κουμπί διαδοχικά Ορισμός αρχικής σελίδαςστο επάνω και αριστερό πλαίσιο και δημιουργήστε μια σύνδεση μεταξύ του αντίστοιχου πλαισίου και της σελίδας σας χρησιμοποιώντας το τυπικό παράθυρο για τη δημιουργία υπερ-σύνδεσης, που φαίνεται στην Εικ. 12. Αφού κάνετε κλικ στο κουμπί, στο επάνω πλαίσιο εκχωρείται η διεύθυνση header.htm, στο αριστερό - menu.htm, στο δεξί - μια κενή σελίδα (χρησιμοποιώντας το κουμπί Δημιουργήστε μια σελίδαστο Σχ. 19).
Για να διασφαλιστεί ότι τα αρχεία informatique.htm και Certificate.htm εμφανίζονται στο δεξί πλαίσιο μετά την κλήση τους από υπερσυνδέσμους, οι υπερσύνδεσμοι προς αυτές τις ιστοσελίδες στο αρχείο menu.htm εκχωρούνται με μια προεπιλεγμένη τιμή home.
9. Παράδειγμα ανάπτυξης μιας ιστοσελίδας
Στο Σχ. 20 παρουσιάζονται
Ιστορία ιστοσελίδων.htm , εμφανίζοντας ένα σύντομο ιστορικό του τμήματος TMS του KSTU.
Ρύζι. 20. Προβολή ιστοσελίδας σε πρόγραμμα περιήγησης
Η προβολή της επισημασμένης σελίδας στον επεξεργαστή FP φαίνεται στην Εικ. 21. Αρχικά, δημιουργείται μια νέα σελίδα. Στη συνέχεια, κάνοντας δεξί κλικ με το ποντίκι, εμφανίζεται ένα μενού περιβάλλοντος, στο οποίο γίνεται κλικ στη γραμμή Ιδιότητες σελίδας. Στο παράθυρο ιδιοτήτων σελίδας που εμφανίζεται (Εικ. 3), εισάγεται ο τίτλος της Ιστορία του τμήματος TMS. Στον σελιδοδείκτη ΑλλαΚάθε μία από τις επιλογές εσοχής περιγράμματος σελίδας έχει ένα σημάδι επιλογής και οι τιμές τους είναι μηδενικές. Αυτό σημαίνει ότι όταν διαβάζεται στο πρόγραμμα περιήγησης, η σελίδα θα πρέπει να εμφανίζεται χωρίς καμία προσθήκη από το επάνω και το αριστερό περίγραμμα της θύρας προβολής. Κάνοντας κλικ στο κουμπί Αποθηκεύσετεη σελίδα αποθηκεύεται στο δίσκο με το όνομα history.htm.
Στη συνέχεια, χρησιμοποιώντας την εντολή εισαγωγή πίνακα, τοποθετείται στη σελίδα ένας πίνακας με τέσσερις στήλες και τέσσερις σειρές. Στα κελιά της επάνω σειράς, τρεις εικόνες h1.gif, h2.gif, h3.gif τοποθετούνται διαδοχικά από αριστερά προς τα δεξιά (οι εικόνες είχαν σχεδιαστεί προηγουμένως στο πρόγραμμα επεξεργασίας γραφικών του Photo Shop). Το πρώτο σχέδιο (KSTU) έχει μέγεθος 4 K, το δεύτερο (TMS) - 3,6 K, το τελευταίο - 1,4 K. Όλα τα σχέδια είναι επιγραφές σε μπορντό φόντο. Το τελευταίο σχήμα (με την επιγραφή HISTORY OF THE DEPARTMENT OF MECHANICAL ENGINEERING TECHNOLOGY) γίνεται μικρότερο σε πλάτος για μείωση της μνήμης.
Ρύζι. 21. Προβολή μιας επισημασμένης ιστοσελίδας στο πρόγραμμα επεξεργασίας FP
Στη συνέχεια, κάντε κλικ στο κελί της πρώτης σειράς και κάντε εντολή Πίνακας/Επιλογή σειράςΗ πρώτη σειρά κελιών έχει επισημανθεί. Στη συνέχεια τοποθετήθηκε ο κέρσορας πάνω του και έγινε κλικ στο δεξί κουμπί του ποντικιού. Η εντολή που επιλέχθηκε στο μενού περιβάλλοντος Ιδιότητες κυττάρωνκαι στο παράθυρο που εμφανίζεται (Εικ. 10), σε όλα τα επιλεγμένα κελιά εκχωρείται ένα φόντο με τη μορφή εικόνας bg.gif (είναι επίσης προετοιμασμένο στο πρόγραμμα επεξεργασίας Photo Shop). Αυτό το σχέδιο είναι μια μονόχρωμη εικόνα 8x8 pixel με τα ίδια χαρακτηριστικά. Το μέγεθος του αρχείου φόντου είναι μόνο 46 byte. Το φόντο είναι απαραίτητο ώστε ολόκληρη η πρώτη σειρά του πίνακα να είναι βαμμένη με το ίδιο χρώμα (οι εικόνες γίνονται με φόντο του ίδιου χρώματος).
Προκειμένου η στενότερη εικόνα h3.gif να τοποθετηθεί κάθετα στη μέση του κελιού, η ιδιότητά της Κάθετη θέσηεκχωρημένη τιμή Κέντρο. Η οριζόντια θέση παραμένει ως προεπιλογή, δηλ. πιέζεται στην αριστερή άκρη του κελιού. Για το τελευταίο κελί της πρώτης σειράς του πίνακα (είναι κενό), η ιδιότητα Πλάτοςη τιμή εκχωρείται στο 600. Αυτό είναι απαραίτητο ώστε ολόκληρη η πρώτη σειρά του πίνακα να είναι εγγυημένη ότι ταιριάζει σε όλο το πλάτος του παραθύρου (ακόμη και να παρέχει κάποιο περιθώριο), το οποίο, κατά την προβολή της σελίδας, θα δημιουργήσει το εφέ ενός μονοχρωματική σκίαση της κεφαλίδας (banner) στο πρόγραμμα περιήγησης (Εικ. 20).
Στη συνέχεια, ανατέθηκαν δύο υπερσύνδεσμοι - στον ιστότοπο του KSTU και στον ιστότοπο του τμήματος TMS. Είναι απαραίτητες ώστε ο θεατής της σελίδας να μπορεί, εάν το επιθυμεί, να προχωρήσει στην προβολή αυτών των σελίδων. Στην πρώτη εικόνα (h1.gif) έχει εκχωρηθεί ένας υπερσύνδεσμος http://www.kgtu.runnet.ruστον ιστότοπο του KSTU (Εικ. 5.12). Το δεύτερο (h2.gif) – υπερσύνδεσμος προς την ιστοσελίδα του τμήματος TMS http://tms.kgtu.runnet.ru. Στη γραμμή κειμένου των ιδιοτήτων εικόνας, εκχωρείται το πρώτο κείμενο Στον ιστότοπο του KSTU, το δεύτερο - Στην ιστοσελίδα του τμήματος TMS. Αυτές οι γραμμές είναι απαραίτητες ώστε ο θεατής της σελίδας, όταν τοποθετεί τον κέρσορα πάνω από την εικόνα, να μπορεί να διαβάσει τον σκοπό των υπερσυνδέσμων στις συμβουλές εργαλείων. Για να μην είναι ορατά τα περιγράμματα των εικόνων υπερ-συνδέσμων στο πρόγραμμα περιήγησης, η ιδιότητα πάχους περιγράμματός τους ορίζεται στο μηδέν και το περίγραμμα συμπτύσσεται (Εικ. 15). Αυτό ολοκληρώνει τη σήμανση της πρώτης σειράς του πίνακα.
Στη δεύτερη σειρά του πίνακα, τα δύο πρώτα κελιά περιέχουν την ίδια εικόνα από το αρχείο arrow.gif. Η εικόνα αντιπροσωπεύει ένα βέλος που δείχνει προς τα πάνω. Το μέγεθος του αρχείου είναι μόνο 324 byte. Σκοπός των εικόνων είναι να ειδοποιήσουν τον θεατή για το γεγονός ότι υπάρχουν υπερσύνδεσμοι από πάνω τους που μπορούν να χρησιμοποιήσουν. Για να διασφαλίσετε ότι τα βέλη βρίσκονται ακριβώς κάτω από τις αντίστοιχες εικόνες, το ακίνητο οριζόντια θέσηστα κελιά εκχωρήθηκε μια τιμή στο κέντρο.
Το κείμενο της σελίδας βρίσκεται στην τρίτη σειρά του πίνακα. Πριν από την εισαγωγή του κειμένου, το δεύτερο και το τρίτο κελί αυτής της σειράς συγχωνεύτηκαν. Πριν από τη συγχώνευση, επιλέχθηκαν κελιά και στη συνέχεια εκτελέστηκε η εντολή μενού Πίνακας/Συγχώνευση κελιών. Στη συνέχεια, ο κέρσορας τοποθετήθηκε στο κελί και το πλήκτρο Enter πατήθηκε αρκετές φορές για να εισαγάγετε κενές παραγράφους.
Στην πρώτη παράγραφο του κελιού, το πάνω μέρος του κειμένου πληκτρολογείται από το πληκτρολόγιο (προηγείται της λίστας των υπαλλήλων που κατά καιρούς κατείχαν τη θέση του προϊσταμένου του τμήματος TMS).
Παρακάτω είναι ένας πίνακας με μία γραμμή και δύο στήλες. Στην αριστερή στήλη αναγράφονται τα ονόματα των υπαλλήλων και στη δεξιά τα έτη ηγεσίας τους στο τμήμα. Τα κελιά του πίνακα έχουν μορφοποιηθεί έτσι ώστε η ιδιότητα κατακόρυφος προμήθειεςέχει το νόημα πάνω, ιδιοκτησία οριζόντιος θέση – στην αριστερή άκρη. Αυτή η οργάνωση θα επιτρέπει την τοποθέτηση επωνύμων και περιόδων στο πρόγραμμα περιήγησης σε δύο παρακείμενες στήλες ακριβώς η μία κάτω από την άλλη.
Κάτω από τον πίνακα υπάρχει κείμενο που συμπληρώνει την περιγραφή της ιστορίας.
Όλο το κείμενο είναι με γραμματοσειρά Arial, ορισμένα από τα θραύσματά του είναι με έντονους χαρακτήρες. Αυτά περιλαμβάνουν ημερομηνίες, επώνυμα, κωδικούς ειδικότητας και άλλα στοιχεία που πρέπει να προσέξετε κατά την προβολή της σελίδας.
Δεν χάθηκε η ευκαιρία να τονίσουμε ένα ενδιαφέρον χαρακτηριστικό ενός από τα τμήματα κειμένου: εάν δημιουργήσετε μια συντομογραφία από τα πρώτα γράμματα των ονομάτων των ειδικοτήτων που διδάσκονται στο τμήμα TMS, τότε θα επαναλάβει τη συντομογραφία που αποτελείται από τα πρώτα γράμματα του ονόματος του τμήματος, δηλαδή πάλι παίρνετε «TMS» (σε Αυτό το μέρος του κειμένου δεν είναι ορατό στα Σχ. 20 και 21. Αυτό το χαρακτηριστικό τονίζεται από το γεγονός ότι τα πρώτα γράμματα στα ονόματα των ειδικοτήτων επισημαίνονται στο τολμηρό και κόκκινο.
Τέλος, όλα τα κελιά της κάτω σειράς του μεγάλου πίνακα συνδυάζονται και τα δεδομένα εξόδου του τμήματος εισάγονται στο κελί που προκύπτει με μικρότερη γραμματοσειρά - διεύθυνση, τηλέφωνα, διεύθυνση e-mail.
Το Microsoft FrontPage για Windows 10 σάς επιτρέπει να δημιουργείτε ιστότοπους χωρίς να χρειάζεται να μάθετε HTML. Απλά πρέπει να τοποθετήσετε το απαιτούμενο κείμενο στη σελίδα του έργου, τοποθετώντας εικόνες στα κατάλληλα σημεία. Η ανάπτυξη προσθηκών και εφέ είναι διαθέσιμη, χωρίς τη χρήση πολύπλοκων βοηθητικών προγραμμάτων ή ειδικών σεναρίων.
Η εφαρμογή διαθέτει ένα σύνολο εργαλείων για αλληλεπίδραση με τον ιστότοπο. Τα ενσωματωμένα πρότυπα χρησιμοποιούνται για τη δημιουργία βασικών σελίδων στο Διαδίκτυο ή γενικά περιεχομένου. Είναι δυνατή η χρήση επαγγελματικών τεχνικών σχεδίασης και στυλ κειμένου. Υπάρχει μια σειρά επιλογών για να ενσωματώσετε το προσωπικό σας στυλ. Συνιστούμε τη λήψη του Microsoft FrontPage για Windows 10 στα ρωσικά χωρίς εγγραφή και SMS από τον επίσημο ιστότοπο.
Πληροφορίες προγράμματος- Άδεια χρήσης: Δωρεάν
- Προγραμματιστής: Microsoft
- Γλώσσες: Ρωσικά, Ουκρανικά, Αγγλικά
- Συσκευές: Η/Υ, netbook, φορητός υπολογιστής (Acer, ASUS, DELL, Lenovo, Samsung, Toshiba, HP, MSI)
- Λειτουργικό σύστημα: Windows 10 Home, Professional, Enterprise, PRO, Enterprise, Education, Home Edition (ενημερώσεις 1507, 1511, 1607, 1703, 170
Εάν νωρίτερα φαινόταν ότι η δημιουργία ιστοσελίδων ήταν αρκετά περίπλοκη και αδύνατη χωρίς ειδικές γνώσεις, τότε μετά την κυκλοφορία των επεξεργαστών HTML με τη λειτουργία WYSIWYG, αποδείχθηκε ότι ακόμη και ένας απόλυτος αρχάριος που δεν γνωρίζει τίποτα για τις γλώσσες σήμανσης μπορεί να δημιουργήσει έναν ιστότοπο . Ένα από τα πρώτα προϊόντα λογισμικού αυτής της ομάδας ήταν το Front Page on the Trident engine από τη Microsoft, το οποίο περιλαμβανόταν σε διάφορες εκδόσεις σουιτών γραφείου έως και το 2003. Τελευταίο αλλά εξίσου σημαντικό, χάρη σε αυτό το γεγονός το πρόγραμμα γνώρισε τόσο μεγάλη δημοτικότητα.
Το κύριο χαρακτηριστικό του προγράμματος, που προσελκύει ιδιαίτερα τους αρχάριους, είναι η δυνατότητα διάταξης μιας σελίδας χωρίς γνώση κώδικα HTML ή άλλων γλωσσών σήμανσης. Αυτό γίνεται δυνατό χάρη στη δυνατότητα WYSIWYG, το όνομα της οποίας είναι μια αγγλική συντομογραφία της έκφρασης που μεταφράζεται στα ρωσικά ως "ό,τι βλέπετε είναι αυτό που παίρνετε". Δηλαδή, ο χρήστης έχει την ευκαιρία να πληκτρολογήσει κείμενο και να εισάγει εικόνες στη δημιουργημένη ιστοσελίδα σχεδόν με τον ίδιο τρόπο όπως στον επεξεργαστή κειμένου Word. Η κύρια διαφορά από το τελευταίο είναι ότι η Front Page έχει περισσότερα διαφορετικά στοιχεία web διαθέσιμα, όπως Flash και XML. Η λειτουργία WYSIWYG είναι ενεργοποιημένη όταν λειτουργεί σε "Κατασκευαστής".
Χρησιμοποιώντας τα στοιχεία στη γραμμή εργαλείων, μπορείτε να μορφοποιήσετε κείμενο με τον ίδιο τρόπο όπως στο Word:
- Επιλέξτε τύπο γραμματοσειράς.
- Ορίστε το μέγεθός του.
- Χρώμα;
- Προσδιορίστε τη θέση και πολλά άλλα.
Επιπλέον, μπορείτε να εισάγετε εικόνες απευθείας από το πρόγραμμα επεξεργασίας.
Τυπικός επεξεργαστής HTML
Για πιο προχωρημένους χρήστες, το πρόγραμμα προσφέρει τη δυνατότητα χρήσης ενός τυπικού επεξεργαστή HTML χρησιμοποιώντας γλώσσα σήμανσης.
Split Editor
Μια άλλη επιλογή για εργασία με το πρόγραμμα κατά τη δημιουργία μιας ιστοσελίδας είναι η χρήση ενός split editor. Στο επάνω μέρος του υπάρχει ένας πίνακας όπου εμφανίζεται ο κώδικας HTML και στο κάτω μέρος εμφανίζεται η έκδοσή του στη λειτουργία "Κατασκευαστής". Όταν επεξεργάζεστε δεδομένα σε έναν από τους πίνακες, τα δεδομένα στον άλλο αλλάζουν αυτόματα.
Λειτουργία προβολής
Η Front Page έχει επίσης τη δυνατότητα προβολής της ιστοσελίδας που προκύπτει με τη μορφή που θα εμφανίζεται στον ιστότοπο μέσω του προγράμματος περιήγησης Internet Explorer.
Ορθογραφικός έλεγχος
Όταν λειτουργεί σε λειτουργίες "Κατασκευαστής"ή «Με τον χωρισμό»Η Front Page έχει μια λειτουργία ορθογραφικού ελέγχου, παρόμοια με αυτή του Word.
Εργασία σε πολλές καρτέλες
Το πρόγραμμα σάς επιτρέπει να εργάζεστε σε πολλές καρτέλες, δηλαδή να δημιουργείτε πολλές ιστοσελίδες ταυτόχρονα.
Εφαρμογή προτύπων
Το Front Page προσφέρει την ευκαιρία να δημιουργήσετε έναν ιστότοπο που βασίζεται σε έτοιμα πρότυπα σχεδίασης ενσωματωμένα στο ίδιο το πρόγραμμα.
Σύνδεση με τοποθεσίες Web
Το πρόγραμμα έχει τη δυνατότητα να επικοινωνεί με διάφορες ιστοσελίδες με μεταφορά δεδομένων.
Πλεονεκτήματα
- Εύχρηστος;
- Διαθεσιμότητα διεπαφής στη ρωσική γλώσσα.
- Δυνατότητα δημιουργίας ιστοσελίδων ακόμα και για αρχάριους.
Ελαττώματα
- Το πρόγραμμα είναι ξεπερασμένο, καθώς δεν έχει ενημερωθεί από το 2003.
- Δεν είναι διαθέσιμο για λήψη στον επίσημο ιστότοπο λόγω του γεγονότος ότι δεν υποστηρίζεται από τον προγραμματιστή για μεγάλο χρονικό διάστημα.
- Σημειώνεται η ανακρίβεια και ο πλεονασμός του κωδικού.
- Δεν υποστηρίζει σύγχρονες τεχνολογίες web.
- Το περιεχόμενο της ιστοσελίδας που δημιουργείται στο Front Page ενδέχεται να μην εμφανίζεται σωστά σε προγράμματα περιήγησης που δεν εκτελούνται στη μηχανή του Internet Explorer.
Το Front Page είναι ένα πρόγραμμα επεξεργασίας HTML με λειτουργικότητα WYSIWYG που ήταν δημοφιλές στους χρήστες κάποτε και ήταν αξιοσημείωτο για την ευκολία δημιουργίας ιστοσελίδων. Ωστόσο, προς το παρόν είναι απελπιστικά ξεπερασμένο, καθώς δεν υποστηρίζεται από τη Microsoft για μεγάλο χρονικό διάστημα και οι τεχνολογίες ιστού έχουν ήδη προχωρήσει πολύ. Ωστόσο, πολλοί χρήστες θυμούνται αυτό το πρόγραμμα με νοσταλγία.
Ένα πρόγραμμα με το οποίο μπορείτε πολύ εύκολα να κατανοήσετε τις βασικές αρχές του σχεδιασμού σελίδων στο Διαδίκτυο, το οποίο διαθέτει μια ευρεία επιλογή πρόσθετων εργαλείων για τη δημιουργία πολύπλοκων τοποθεσιών και πυλών στο Διαδίκτυο.
Εν συντομία για το πρόγραμμα Microsoft FrontPage
Αυτό είναι ένα εύκολο στην εκμάθηση και βολικό πρόγραμμα επεξεργασίας Ιστού για το σχεδιασμό, την προετοιμασία και τη δημοσίευση τοποθεσιών Web. Χάρη στην ενσωμάτωση με την οικογένεια προϊόντων MS Office, μια οικεία διεπαφή και μια πληθώρα προτύπων, το πρόγραμμα επιτρέπει ακόμη και σε αρχάριους χρήστες που είναι εξοικειωμένοι με τα βασικά της εργασίας στο MS Word να κατακτήσουν γρήγορα την εργασία. Ταυτόχρονα, το FrontPage δεν μπορεί να ονομαστεί λύση για "ανδρείκελα": το πρόγραμμα παρέχει εκτεταμένη λειτουργικότητα και μια ποικιλία εργαλείων για τη βελτιστοποίηση σελίδων στο Διαδίκτυο.
Ας σημειωθεί ότι το όνομα Microsoft FrontPage υπήρχε μέχρι το 2003 και στη συνέχεια συμπληρώθηκε με νέες λειτουργίες και άλλαξε το όνομα του ίδιου του λογισμικού. Το FrontPage μετονομάστηκε σε Microsoft Expression Web το 2007 και Microsoft Office SharePoint Designer το 2010. Μάλιστα, προστέθηκαν κάποιες προσθήκες στις νέες εκδόσεις, αλλά διατηρήθηκε η βασική εμφάνιση του προγράμματος.
Βασικά εργαλεία προγράμματος
Γενική προβολή του προγράμματος Microsoft FrontPage
Το Microsoft FrontPage έχει πολλά κοινά με τα εργαλεία του MS Word, έτσι πολλά από τα κουμπιά και τις καρτέλες μενού είναι επίσης διαισθητικά, κάνοντας τη διαδικασία δημιουργίας σελίδας ευκολότερη. Πολλοί άνθρωποι γνωρίζουν ήδη πώς να πληκτρολογούν και να μορφοποιούν απλό κείμενο, να δημιουργούν πίνακες στο Microsoft Word και η ίδια αρχή ισχύει για την επεξεργασία μιας σελίδας στο FrontPage.
Το σχήμα στα δεξιά δείχνει μια γενική άποψη του προγράμματος με ένα τυπικό σύνολο εργαλείων με τα οποία μπορείτε να δημιουργήσετε ένα πρότυπο σελίδας με κείμενο, συνδέσμους και εικόνες. Μεταβείτε στην καρτέλα "Προβολή", μετά "Γραμμή εργαλείων" και βεβαιωθείτε ότι " Πρότυπο", "Μορφοποίηση" Και " Πίνακες", αυτά τα εργαλεία θα είναι αρκετά για να δημιουργήσετε μόνο μια σελίδα. Παρακάτω, δώστε προσοχή στις καρτέλες "Σχεδιαστής", "Κώδικας" και "Προβολή" - αυτές είναι τρεις διαφορετικές λειτουργίες στις οποίες μπορείτε πάντα να δείτε πώς φαίνεται η σελίδα που δημιουργείτε αρέσει.
- Στο Designer, εισάγονται όλες οι επεξεργασίες, πληκτρολογείται και μορφοποιείται το κείμενο, εισάγονται εικόνες, δημιουργούνται σύνδεσμοι, αλλάζουν τα χρώματα φόντου και γραμματοσειράς με τον ίδιο τρόπο όπως στο Microsoft Word.
- Στην καρτέλα "Κώδικας" μπορείτε να δείτε τον λεγόμενο κώδικα HTML. Η HTML είναι η τυπική γλώσσα σήμανσης για έγγραφα στον Παγκόσμιο Ιστό. Οι περισσότερες ιστοσελίδες δημιουργούνται με χρήση HTML. Σε αυτήν την καρτέλα μπορείτε επίσης να επεξεργαστείτε τη σελίδα, αλλά πρέπει να γνωρίζετε αυτήν τη γλώσσα σήμανσης. Ωστόσο, οι αρχάριοι θα πρέπει να κάνουν όλες τις αλλαγές στον κατασκευαστή και όλες οι αλλαγές στο HTML θα πραγματοποιηθούν αυτόματα.
- Στην καρτέλα "Προβολή" μπορείτε να δείτε πώς φαίνεται η σελίδα απευθείας στο πρόγραμμα περιήγησης (όπως ο Internet Explorer)
Λεπτομερείς περιγραφές άλλων μενού, κουμπιών και λειτουργιών του Microsoft FrontPage παρέχονται στη βοήθεια του προγράμματος. Για να το κάνετε αυτό, πατήστε το πλήκτρο "F1".
Δημιουργία προτύπου για σελίδες στο FrontPage
Εισαγωγή του κύριου πίνακα στο πρόγραμμα επεξεργασίας
Και έτσι, για να δημιουργήσετε ένα απλό πρότυπο, πρέπει να εισαγάγετε έναν πίνακα με τρία μπλοκ. Τρία μπλοκ είναι ένα απλό πρότυπο: το επάνω μπλοκ είναι για το όνομα της τοποθεσίας, το δεύτερο μπλοκ είναι για συνδέσμους πλοήγησης ιστότοπου, το τρίτο μπλοκ είναι για κείμενο, εικόνες και άλλες πληροφορίες στη σελίδα. Μπορείτε να τοποθετήσετε περισσότερα τραπέζια για ευκολία, αλλά είναι θέμα γούστου πώς, πόσα και τι μέγεθος θα φτιάξετε αυτά τα μπλοκ. Υπάρχει ένας άλλος τρόπος για να δημιουργήσετε μπλοκ όχι με τη δημιουργία πινάκων, αλλά με την εισαγωγή των λεγόμενων "div" στοιχείων σε σελίδες και την αντιστοίχιση συγκεκριμένων στυλ σε αυτά, αλλά αυτή η μέθοδος δεν είναι για νέους webmasters και μπορεί να γραφτεί ένα ξεχωριστό άρθρο σχετικά με αυτό.
- Για να εισαγάγετε έναν πίνακα, μεταβείτε στην καρτέλα «Πίνακας» > «Εισαγωγή» > «Πίνακας» και συμπληρώστε τα πεδία, όπως φαίνεται στην εικόνα στα δεξιά. Στην πραγματικότητα, μπορείτε να εισαγάγετε τις δικές σας παραμέτρους, αλλά αυτός ο πίνακας έχει σταθερό πλάτος και εκτείνεται στο 100% της περιοχής της οθόνης. Με αυτόν τον τρόπο ο πίνακας θα εμφανίζεται συμπαγής στο πρόγραμμα περιήγησης.
- Στη συνέχεια, πρέπει να προσαρμόσετε και τα τρία κελιά, καθώς έχουν το ίδιο ύψος μετά την εισαγωγή. Κάντε δεξί κλικ στο επάνω κελί και μεταβείτε στις "Ιδιότητες κελιών", στο πεδίο ύψους πληκτρολογήστε υπό όρους "150" και επιλέξτε το πλαίσιο "σε τελείες", δηλ. Το μέγεθος κελιού θα είναι 150 pixel. Στο ίδιο μενού, μπορούμε να επιλέξουμε το χρώμα φόντου του κελιού και κάνοντας κλικ στο μενού "στυλ...", μπορείτε να κάνετε άλλες ρυθμίσεις κελιού, για παράδειγμα, επιλέξτε το χρώμα και το μέγεθος του περιγράμματος κελιού, μπορείτε πειραματιστείτε με αυτό και δείτε το αποτέλεσμα. Στο ίδιο το κελί μπορείτε να εισαγάγετε το όνομα του ιστότοπου.
- Στη συνέχεια, επεξεργαζόμαστε το δεύτερο κελί, το οποίο προορίζεται για συνδέσμους πλοήγησης ιστότοπου. Ρυθμίσαμε το πλάτος σε περίπου 40 pixel, αυτό θα είναι αρκετό, και προσαρμόζουμε επίσης άλλες ρυθμίσεις, όπως το χρώμα φόντου και τα περιθώρια, σύμφωνα με το γούστο σας. Στη συνέχεια, γράφουμε τα ονόματα των ίδιων των συνδέσμων, χωρισμένα με πινακίδες κάθετης γραμμής ή άλλη πινακίδα (μπορείτε να τα δείτε παρακάτω κατεβάζοντας ολόκληρο το πρότυπο). Επιλέξτε τη δοκιμή και πατήστε το κεντρικό κουμπί ευθυγράμμισης, όπως στο MSWord. Με τον ίδιο τρόπο, μπορείτε να αλλάξετε τη γραμματοσειρά, το μέγεθος γραμματοσειράς και άλλες ρυθμίσεις κειμένου.
- Στήσαμε και το τελευταίο κελί. Προορίζεται για το κύριο κείμενο, όπου μπορείτε να εισαγάγετε ένα κείμενο χαιρετισμού.
- Τέλος, μπορείτε να μεταβείτε στην καρτέλα «Αρχείο» > «Ιδιότητες», όπου μπορείτε να εισαγάγετε το όνομα του ιστότοπου και να αλλάξετε το γενικό φόντο της σελίδας και άλλες γενικές ρυθμίσεις
Το πρότυπο είναι τώρα έτοιμο. Είναι το πλαίσιο για όλες τις επόμενες σελίδες του ιστότοπου. Αυτή είναι η εμφάνιση του ιστότοπου σε κώδικα HTML:
Έτσι παίρνουμε το πρότυπο για τον ιστότοπο
< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> < title >Όνομα του ιστότοπου < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >Όνομα του ιστότοπου < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >Σπίτι | < b >Σελίδα 2 | < b >Σελίδα 3 | < b >Σελίδα 4 | < b >Σελίδα 5 | < b >Επαφές < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Κείμενο αρχικής σελίδας. Εδώ μπορείτε να εισαγάγετε ένα κείμενο χαιρετισμού και να γράψετε εν συντομία σε τι είναι αφιερωμένος ο ιστότοπος.
Αυτός ο κώδικας HTML μπορεί να εισαχθεί αμέσως στον επεξεργαστή στην καρτέλα "Κώδικας" και θα δείτε αμέσως το έτοιμο πρότυπο. Μπορεί να αλλάξει και να επεξεργαστεί για να ταιριάζει στις δικές σας ανάγκες. Εδώ αξίζει να εξηγήσουμε ότι όπου εισάγεται το κύριο κείμενο και για να μην βρίσκεται κοντά στα πεδία, πλαισιώνεται στην ετικέτα “div”, με ρύθμιση εσοχής, όπως φαίνεται στο παράδειγμα.
Πρόσθετα Πρότυπα
- Πρέπει επίσης να γνωρίζετε ότι στο πρόγραμμα FrontPage και σε άλλα παρόμοια προγράμματα, υπάρχουν τυπικά πρότυπα που μπορούν να χρησιμοποιηθούν για τη δημιουργία σελίδων· επεξεργάζονται εύκολα και μπορείτε να προσαρμόσετε οποιοδήποτε πρότυπο για να ταιριάζει στις ανάγκες σας. Για να επιλέξετε ένα τυπικό πρότυπο, μεταβείτε στην καρτέλα "Αρχείο" > "Δημιουργία..." στο παράθυρο που ανοίγει, επιλέξτε "Άλλα πρότυπα σελίδας", όπου μπορείτε να επιλέξετε οποιοδήποτε πρότυπο θέλετε.
- Υπάρχει μια δεύτερη επιλογή - κατεβάστε ολόκληρο το πρότυπο από το Διαδίκτυο. Υπάρχουν πολλοί ιστότοποι που παρέχουν μια τέτοια υπηρεσία. Τα πρότυπα μπορούν να είναι είτε επί πληρωμή είτε δωρεάν. Αφού κατεβάσετε αυτό ή εκείνο το πρότυπο, μπορείτε να το επεξεργαστείτε στο πρόγραμμα, να το γεμίσετε με το απαραίτητο περιεχόμενο και να αλλάξετε το στυλ αυτού ή εκείνου του στοιχείου.
Χρησιμοποιήστε τυπικές διατάξεις πινάκων και θεμάτων
Το Microsoft FrontPage παρέχει καλά εργαλεία για έτοιμες διατάξεις πίνακα και θέματα για τη δημιουργία ιστοτόπων
Πρέπει να γνωρίζετε ότι το Microsoft FrontPage διαθέτει ένα τυπικό σύνολο διατάξεων πίνακα και θεμάτων που μπορούν να σας βοηθήσουν να μάθετε την τέχνη της δημιουργίας κανονικών σελίδων ή τοποθεσιών επαγγελματικών καρτών. Και έτσι επάνω δεξιά υπάρχει ένα αναπτυσσόμενο μενού (δείτε την εικόνα στα δεξιά, η οποία δείχνει επίσης το αποτέλεσμα της χρήσης διατάξεων πίνακα και θεμάτων σχεδίασης), κάνοντας κλικ, θα εμφανιστεί ένα μενού στο οποίο πρέπει να επιλέξετε "Διάταξη πίνακες και κελιά» και στη συνέχεια θα εμφανιστούν πολλές διαφορετικές διατάξεις τραπεζιών παρακάτω, μπορείτε να επιλέξετε οποιαδήποτε κατά την κρίση και το γούστο σας. Αυτό σας δίνει τη δυνατότητα να δημιουργήσετε τον πίνακα μόνοι σας με μη αυτόματο τρόπο.
Και έτσι, πληκτρολογώντας ή επικολλώντας το κείμενο, το λογότυπο, τους συνδέσμους στα κελιά του πίνακα, μεταβαίνοντας στο ίδιο μενού, μπορείτε να επιλέξετε το μενού "Θέμα", όπου μπορείτε να επιλέξετε διάφορα θέματα για το σχεδιασμό της σελίδας, συνδέσμους, σελίδα φόντο και πολλά άλλα. Αυτή η ευκαιρία είναι καλή για όσους μόλις μαθαίνουν πώς να δημιουργούν σελίδες στο Διαδίκτυο και αντικατοπτρίζει σαφώς τη διαδικασία δημιουργίας ενός ιστότοπου. Με άλλα λόγια, στο Microsoft FrontPage μπορείτε να πειραματιστείτε με διαφορετικές ρυθμίσεις και να δείτε καθαρά πώς μετασχηματίζεται μια συγκεκριμένη σελίδα. Εδώ μπορείτε να δώσετε μια συμβουλή: μελετήστε όλες τις λειτουργίες του προγράμματος και μην φοβάστε να αξιοποιήσετε αυτό ή εκείνο το μενού, καθώς κάθε εργαλείο έχει τη δική του ιδιότητα και σκοπό για τη δημιουργία μιας πλήρους σελίδας
Εισαγάγετε μια εικόνα και δημιουργήστε συνδέσμους σε σελίδες
Είναι σημαντικό για τους αρχάριους webmasters να γνωρίζουν πώς να εισάγουν εικόνες σε μια σελίδα και να δημιουργούν συνδέσμους σε άλλες σελίδες. Για παράδειγμα, αντί για το κείμενο του ονόματος της τοποθεσίας, μπορείτε να εισαγάγετε μια εικόνα του λογότυπου της τοποθεσίας. Για να το κάνετε αυτό, κάντε πρώτα κλικ στο πεδίο όπου θέλετε να εισαγάγετε μια εικόνα και, στην κορυφή, κάντε κλικ στην καρτέλα «Εισαγωγή» > «Σχέδιο» > «Από αρχείο», επιλέξτε την εικόνα που θέλετε και κάντε κλικ στο «Εισαγωγή», μετά που θα εμφανιστεί η εικόνα στη σελίδα. Κάνοντας δεξί κλικ στην εικόνα, μπορείτε να μεταβείτε σε ένα μενού με πρόσθετες ρυθμίσεις εικόνας. Είναι σημαντικό όλες οι εικόνες να βρίσκονται σε έναν αυστηρά καθορισμένο φάκελο για όλες τις εικόνες.
Για να μεταβείτε σε άλλες σελίδες του ιστότοπου, πρέπει να δημιουργήσετε συνδέσμους μέσω των οποίων οι χρήστες μπορούν να επισκεφτούν όλες τις σελίδες του ιστότοπου. Για να το κάνετε αυτό, πρέπει να επιλέξετε το επιθυμητό κείμενο για τον σύνδεσμο και να μεταβείτε στην καρτέλα «Εισαγωγή» > «Υπερσύνδεσμος», στο μενού που ανοίγει πρέπει να υποδείξετε τη σελίδα στην οποία δημιουργείται ο σύνδεσμος και κάντε κλικ στο «ok» . Στο ίδιο παράθυρο υπάρχουν και άλλες ρυθμίσεις για συνδέσμους, όπως αν θα ανοίξει ο σύνδεσμος σε νέο παράθυρο ή όχι. Κατ 'αρχήν, μπορείτε να το μελετήσετε μόνοι σας.
συμπέρασμα
Στον πυρήνα τους, αυτοί οι επεξεργαστές είναι παρόμοιοι μεταξύ τους και έχουν παρόμοιες λειτουργίες και μενού. Έχοντας κατακτήσει τις βασικές ρυθμίσεις, μπορείτε εύκολα να δημιουργήσετε ιστότοπους σε άλλα προγράμματα επεξεργασίας. Έχοντας κατακτήσει αυτές τις αρχές, μπορείτε να προχωρήσετε σε μια πιο σύνθετη μέθοδο σχεδιασμού ιστοτόπων - χρησιμοποιώντας το λεγόμενο CSS. Μπορείτε να διαβάσετε για το τι είναι και πώς να επεξεργαστείτε ένα σχέδιο ιστότοπου στο άρθρο σχετικά με το CSS.
Το μειονέκτημα αυτής της μεθόδου "πρότυπο" είναι ότι κάθε σελίδα πρέπει να δημιουργηθεί ξεχωριστά με βάση το δημιουργημένο πρότυπο. Όταν, όπως κατά τη δημιουργία ιστότοπων που χρησιμοποιούν τις λεγόμενες μηχανές, δεν απαιτείται δημιουργία ξεχωριστών σελίδων, δημιουργούνται αυτόματα καθώς προστίθεται περιεχόμενο
Εάν έχετε οποιεσδήποτε ερωτήσεις σχετικά με το άρθρο ή τη χρήση τέτοιων προγραμμάτων για τη δημιουργία ιστοσελίδων, μπορείτε να τις ρωτήσετε στο νήμα συζήτησης του φόρουμ μας.
