Πώς να δημιουργήσετε μια υπερ-σύνδεση με το KompoZer

Η δυνατότητα δημιουργίας ενός συνδέσμου σε ένα έγγραφο που σας μεταφέρει σε ένα άλλο έγγραφο, ίσως σε ένα δίκτυο στα μισά του δρόμου σε όλο τον πλανήτη, είναι αναμφισβήτητα ο πιο σημαντικός λόγος που εφευρέθηκε ο Παγκόσμιος Ιστός. Αυτοί οι σύνδεσμοι, που ονομάζονται υπερσυνδέσεις, είναι το "H" στη γλώσσα HTML - HyperText Markup Language. Χωρίς υπερσυνδέσμους, ο ιστός δεν θα ήταν πολύ χρήσιμος. Δεν θα υπήρχαν μηχανές αναζήτησης, κοινωνικά μέσα ή διαφημίσεις banner (εντάξει, οι περισσότεροι από εμάς θα μπορούσαν να σταθούν για να δουν αυτούς τους λόγους).

Όταν δημιουργείτε τις δικές σας ιστοσελίδες, θα θελήσετε να δημιουργήσετε υπερσυνδέσεις και το KompoZer διαθέτει εργαλεία που διευκολύνουν την προσθήκη συνδέσμων οποιουδήποτε τύπου. Η σελίδα δείγματος που απεικονίζεται σε αυτό το σεμινάριο θα περιέχει συνδέσμους προς άλλους ιστότοπους σε τέσσερις κατηγορίες, σε άλλα μέρη της ίδιας ιστοσελίδας και για να ξεκινήσει ένα μήνυμα ηλεκτρονικού ταχυδρομείου. Θα ξεκινήσω με μια επικεφαλίδα και τέσσερις τίτλους H3 για κάθε κατηγορία. Στην επόμενη σελίδα θα προσθέσουμε μερικούς συνδέσμους.

01 από 05

Δημιουργία υπερσύνδεσης με το KompoZer

Δημιουργία υπερσύνδεσης με το KompoZer. Η οθόνη εντόπισε την ευγένεια Jon Morin

Τα εργαλεία υπερ- συνδέσεων του KompoZer είναι προσβάσιμα κάνοντας κλικ στο κουμπί Σύνδεση στη γραμμή εργαλείων. Για να δημιουργήσετε μια υπερ-σύνδεση:

  1. Τοποθετήστε το δρομέα σας στη σελίδα όπου θέλετε να εμφανίζεται η σύνδεσή σας.
  2. Κάντε κλικ στο κουμπί Σύνδεση στη γραμμή εργαλείων. Θα εμφανιστεί το παράθυρο διαλόγου Ιδιότητες συνδέσμου.
  3. Το πρώτο πεδίο που πρέπει να συμπληρώσετε είναι το πλαίσιο Κείμενο συνδέσμου. Πληκτρολογήστε το κείμενο που θέλετε να εμφανίζεται στη σελίδα για την υπερ-σύνδεση σας.
  4. Το δεύτερο πεδίο που πρέπει να συμπληρώσετε είναι το πλαίσιο Location Link. Πληκτρολογήστε τη διεύθυνση URL της σελίδας στην οποία θα μεταφερθεί ο σύνδεσμος σας όταν ο χρήστης κάνει κλικ. Είναι καλή ιδέα να αντιγράψετε και να επικολλήσετε τη διεύθυνση URL από τη γραμμή διευθύνσεων του προγράμματος περιήγησης. Είναι πολύ λιγότερο πιθανό να κάνετε κάποιο λάθος με αυτόν τον τρόπο και γνωρίζετε, τουλάχιστον κατά τη δημιουργία της σύνδεσής σας, ότι η σελίδα είναι ζωντανή και ότι ο σύνδεσμος δεν έχει σπάσει.
  5. Κάντε κλικ στο κουμπί OK και το παράθυρο διαλόγου Ιδιότητες συνδέσμου θα κλείσει. Ο σύνδεσμός σας θα εμφανιστεί τώρα στη σελίδα σας.

Στα περισσότερα προγράμματα περιήγησης, η υπερ-σύνδεση θα εμφανίζεται με μπλε υπογραμμισμένο κείμενο από προεπιλογή. Μπορείτε να εφαρμόσετε τα δικά σας στυλ σε υπερσυνδέσεις με το KompoZer, αλλά προς το παρόν θα παραμείνουμε με τη βασική υπερσύνδεση. Είναι καλή ιδέα να κάνετε προεπισκόπηση της σελίδας σας σε ένα πρόγραμμα περιήγησης ιστού και κάντε κλικ στους συνδέσμους για να βεβαιωθείτε ότι λειτουργούν.

02 του 05

Δημιουργία σύνδεσης αγκύρωσης με το KompoZer

Δημιουργία σύνδεσης αγκύρωσης με το KompoZer. Η οθόνη εντόπισε την ευγένεια Jon Morin

Υπάρχει ένα άλλο είδος υπερσύνδεσης που σας μεταφέρει σε άλλο μέρος της ίδιας ιστοσελίδας όταν κάνετε κλικ. Αυτός ο τύπος υπερσύνδεσης ονομάζεται σύνδεσμος αγκύρωσης και η περιοχή της σελίδας στην οποία οδηγείτε όταν κάνετε κλικ σε αυτόν τον σύνδεσμο ονομάζεται άγκυρα. Εάν έχετε χρησιμοποιήσει ποτέ το σύνδεσμο "πίσω στην κορυφή" στο κάτω μέρος μιας ιστοσελίδας, κάνετε κλικ σε ένα σύνδεσμο προς μια άγκυρα.

Το KompoZer σάς επιτρέπει να δημιουργείτε άγκυρες στις οποίες μπορείτε να συνδέσετε χρησιμοποιώντας το εργαλείο Άγκυρα στη γραμμή εργαλείων.

  1. Κάντε κλικ στην περιοχή της σελίδας όπου θέλετε μια άγκυρα. Δηλαδή, όπου θέλετε να γίνεται η προβολή του προγράμματος προβολής σελίδας όταν γίνεται κλικ σε μια σύνδεση αγκύρωσης. Για αυτό το παράδειγμα, έκανα κλικ ακριβώς πριν το "F" στην κεφαλίδα αγαπημένης μουσικής.
  2. Κάντε κλικ στο κουμπί Άγκυρα στη γραμμή εργαλείων. Εμφανίζεται το παράθυρο διαλόγου "Ιδιότητες αγκύρωσης ονομασίας".
  3. Κάθε άγκυρα σε μια σελίδα χρειάζεται ένα μοναδικό όνομα. Για αυτή την άγκυρα, χρησιμοποίησα το όνομα "μουσική".
  4. Κάντε κλικ στο κουμπί OK και πρέπει να δείτε και το σύμβολο αγκύρωσης εμφανίζεται στο σημείο που θέλετε να αγκυροβολήσετε. Αυτό το σύμβολο δεν θα εμφανιστεί στην ιστοσελίδα σας, είναι ακριβώς το πώς το KompoZer σας δείχνει πού βρίσκονται οι άγκυρες σας.
  5. Επαναλάβετε τη διαδικασία για οποιεσδήποτε άλλες περιοχές της σελίδας όπου θέλετε να μπορούν να μεταπηδήσουν οι χρήστες. Αν έχετε πολλά κείμενα στη σελίδα που χωρίζονται από επικεφαλίδες ή κάποιο άλλο λογικό διαχωριστικό, οι άγκυρες είναι ένας εύκολος τρόπος να πλοηγηθείτε σε μια σελίδα.

Στη συνέχεια, θα δημιουργήσουμε τους συνδέσμους που μεταφέρουν τον αναγνώστη στις άγκυρες που δημιουργήσατε.

03 του 05

Δημιουργία της πλοήγησης σελίδας με το KompoZer

Δημιουργία της πλοήγησης σελίδας με το KompoZer. Η οθόνη εντόπισε την ευγένεια Jon Morin

Τώρα που έχετε άγκυρες στη σελίδα σας, ας δημιουργήσουμε τους συνδέσμους που θα χρησιμοποιηθούν ως συντομεύσεις σε αυτές τις άγκυρες. Για αυτό το σεμινάριο, δημιούργησα έναν πίνακα 1 στήλης, 4 στήλες κάτω από την επάνω κεφαλίδα της σελίδας. Κάθε κελιά πίνακα περιέχει το ίδιο κείμενο με μία από τις κεφαλίδες κατηγοριών που χρησιμοποιούνται για τον διαχωρισμό των συνδέσμων στη σελίδα. Θα κάνουμε το κείμενο σε κάθε ένα από αυτά τα στοιχεία πίνακα να συνδεθεί με την αντίστοιχη άγκυρα.

04 του 05

Δημιουργία υπερσυνδέσεων στις άγκυρες με το KompoZer

Δημιουργία υπερσυνδέσεων στις άγκυρες με το KompoZer. Η οθόνη εντόπισε την ευγένεια Jon Morin

Τώρα που έχουμε τις άγκυρες στη θέση μας και το κείμενο που θα χρησιμοποιήσουμε για την πλοήγηση σελίδας που εισάγεται, μπορούμε να μετατρέψουμε τα κομμάτια απλού κειμένου σε συνδέσμους. Θα χρησιμοποιήσουμε ξανά το κουμπί σύνδεσης, αλλά αυτή τη φορά θα λειτουργήσει λίγο διαφορετικά.

  1. Επιλέξτε το κείμενο που θέλετε να μετατραπεί σε σύνδεσμο. Σε αυτό το παράδειγμα, επέλεξα το κείμενο "Αγαπημένη μουσική" που βρίσκεται στο πρώτο κελί πίνακα στο πάνω μέρος της σελίδας.
  2. Κάντε κλικ στο κουμπί Σύνδεση στη γραμμή εργαλείων. Θα ανοίξει το παράθυρο διαλόγου Ιδιότητες συνδέσμου.
  3. Σε αυτή την περίπτωση, επιλέξαμε κείμενο πριν να πατήσουμε το κουμπί Σύνδεσμος, οπότε η ενότητα Link Κειμένου του παραθύρου έχει ήδη συμπληρωθεί και δεν μπορεί να γίνει επεξεργασία. Κάντε κλικ στο κάτω βέλος στην ενότητα Τοποθεσία συνδέσμου. Θα δείτε μια λίστα με τις άγκυρες που δημιουργήσατε στα προηγούμενα βήματα. Για αυτό το παράδειγμα, επιλέγω την # μουσική άγκυρα.
  4. Κάντε κλικ στο κουμπί OK. Το κείμενο "Αγαπημένη μουσική" στη γραμμή πλοήγησης μετατρέπεται σε σύνδεσμο που θα προκαλέσει τη μεταπήδηση του θεατή σε αυτήν τη ενότητα στη σελίδα, όταν κάνει κλικ.

Θα παρατηρήσετε ότι κάθε άγκυρα που ονομάζεται στο αναπτυσσόμενο μενού έχει ένα σύμβολο "#" μπροστά του. Αυτός είναι ο τρόπος με τον οποίο θα δημιουργούσατε έναν σύνδεσμο σε μια άγκυρα σε HTML. Το "#" μπροστά από το όνομα αγκύρωσης ενημερώνει το πρόγραμμα περιήγησης ότι ο σύνδεσμος αυτός σας μεταφέρει σε άλλη θέση στην ίδια σελίδα.

05 του 05

Δημιουργία υπερσύνδεσης από μια εικόνα με το KompoZer

Δημιουργία υπερσύνδεσης από μια εικόνα με το KompoZer. Η οθόνη εντόπισε την ευγένεια Jon Morin

Γνωρίζατε ότι μπορείτε να δημιουργήσετε έναν σύνδεσμο από εικόνες και κείμενο; Το KompoZer σάς επιτρέπει να το κάνετε μόνο με μερικά κλικ. Εδώ έχω εισαγάγει μια μικρή εικόνα εικονιδίου που δείχνει ένα προς τα πάνω βέλος και το κείμενο "TOP" στο κάτω μέρος της σελίδας. Θα χρησιμοποιήσω αυτήν την εικόνα ως σύνδεσμο για να μεταβείτε στο επάνω μέρος της σελίδας.

  1. Κάντε δεξί κλικ σε μια εικόνα και επιλέξτε Ιδιότητες εικόνας και συνδέσμων από την ετικέτα περιβάλλοντος. Θα ανοίξει το παράθυρο διαλόγου Ιδιότητες εικόνας.
  2. Στην καρτέλα "Θέση", θα δείτε το όνομα αρχείου της εικόνας και μια προβολή μικρογραφίας που έχει ήδη συμπληρωθεί. Θα πρέπει να εισάγετε κάποιο κείμενο στο πλαίσιο εναλλαγής κειμένου. Αυτό είναι αυτό που εμφανίζεται όταν μετακινείτε το ποντίκι πάνω στην εικόνα και επίσης τι διαβάζεται από ένα πρόγραμμα ανάγνωσης οθόνης όταν κάποιος με προβλήματα όρασης διαβάζει την ιστοσελίδα.
  3. Κάντε κλικ στην καρτέλα Σύνδεση. Εδώ μπορείτε να επιλέξετε μια άγκυρα από το μενού, όπως ακριβώς κάναμε και με τις συνδέσεις άγκυρας. Στην πραγματικότητα, αυτή η εικόνα χρησιμοποιείται ως σύνδεσμος άγκυρας. Επιλέξαμε την άγκυρα #Links_Of_Interest που θα μας οδηγήσει στην κορυφή.
  4. Κάντε κλικ στο κουμπί OK. Η εικόνα συνδέεται τώρα στο επάνω μέρος της σελίδας όταν πατήσετε.