LibreOffice Writer

Κεφάλαιο 6 - Δημιουργία Ιστοσελίδων

Το LibreOffice διαθέτει επίσης δυνατότητες δημιουργίας και επεξεργασίας ιστοσελίδων. Πέραν του ότι μπορεί να αποθηκεύσει οποιοδήποτε κείμενο ως αρχείο HTML, στη συνέχεια θα δούμε την υποστήριξη τουLibreOffice για τη δημιουργία ιστοσελίδων.

6.1 Δημιουργία Ιστοσελίδας

Από το μενού File → New → HTML Document μπορείτε να δημιουργήσετε ένα νέο έγγραφο HTML. Η επεξεργασία του γίνεται όπως ακριβώς κι ένα έγγραφο του LibreOffice. Αντί να γράφετε εντολές HTML, γράφετε το κείμενό σας όπως ακριβώς θα φαίνεται στον πλοηγό. Το LibreOffice είναι ένας κειμενογράφος WYSIWYG (What You See Is What You Get).

Μπορείτε ακόμα να μετατρέψετε ένα έγγραφο LibreOffice (.odt) ή MS-Word (.doc) σε HTML, ανοίγοντάς το στο LibreOffice και στη συνέχεια αποθηκεύοντάς το από το μενού File → Save As και επιλέγοντας HTML Document ως File type.

Θα πρέπει να βλέπετε το κείμενο σας σε προβολή Web (View → Web Layout).

Μπορείτε να δείτε τον παραγόμενο πηγαίο κώδικα HTML (στην έκδοση 4.0 ή νεώτερη του LibreOffice), από το μενού View → HTML source (ανοίξτε το στον αγαπημένο σας κειμενογράφο απλού κειμένου, π.χ. gedit, αν τρέχετε έκδοση του LibreOffice μικρότερη του 4.0). Το πρώτο πράγμα που παρατηρούμε είναι ότι είναι στη μορφή HTML 4.0 κι όχι στην HTML 5.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
    <TITLE></TITLE>
    <META NAME="GENERATOR" CONTENT="LibreOffice 3.5 (Linux)">
    <META NAME="AUTHOR" CONTENT="john">
    <META NAME="CREATED" CONTENT="20140111;154411577000000">
    <META NAME="CHANGED" CONTENT="20140111;155828735000000">
    </HEAD>
    <BODY LANG="el-GR" DIR="LTR">
    </BODY>
    </HTML>

Επίσης, ελέγξτε ότι η κωδικοποίηση χαρακτήρων είναι UTF-8. Αν όχι (π.χ. ISO-8859-7), για να την αλλάξετε σε UTF-8, κάντε κλικ στο μενού Tools → Options → Load/Save → HTML Compatibility και αλλάξτε το πεδίο Character Set σε Unicode (UTF-8). Πλέον κάθε νέο αρχείο HTML που αποθηκεύετε θα έχει αυτήν την κωδικοποίηση χαρακτήρων. Επίσης καλό είναι να τικάρετε και την επιλογή Copy local graphics to internet, ώστε όταν μεταφέρετε (upload) τον ιστοτόπο σας στο Διαδίκτυο, όπως θα δούμε παρακάτω, να μεταφέρει και τις εικόνες και τα υπόλοιπα αρχεία που χρειάζονται στις σωστές διαδρομές (paths).

Μπορείτε να φορτώσετε το αρχείο στον αγαπημένο σας πλοηγό για να δείτε πως εμφανίζεται από το μενού File → Preview in Web Browser.

6.2 Επεξεργασία Ιστοσελίδας

Αφού δημιουργήσατε το έγγραφο HTML, θα πρέπει να ορίσετε τον τίτλο του εγγράφου. Ο τίτλος φαίνεται στη γραμμή παραθύρου του πλοηγού. Από το μενού File → Properties → καρτέλα Description μπορείτε να εισάγετε έναν τίτλο στο πεδίο Title. Αφού πατήσετε ΟΚ και το αποθηκεύσετε, ανοίγοντας το αρχείο HTML στον αγαπημένο σας κειμενογράφο απλού κειμένου θα δείτε ότι έχει ενημερωθεί η ετικέτα <TITLE></TITLE> κάτω από το <HEAD>. Μπορείτε να εισάγετε και λέξεις-κλειδιά που βοηθάνε τις διάφορες μηχανές αναζήτησης (βλ. Google) στο να εντοπίσουν πιο εύκολα την ιστοσελίδα σας:

    <META NAME="KEYWORDS" CONTENT="">

Μπορείτε να γράψετε κείμενο με διαφορετικές μορφοποιήσεις, π.χ. έντονο (μεταφράζεται στην ετικέτα HTML ), πλάγιο (μεταφράζεται στην ετικέτα HTML ), υπογραμμισμένο (μεταφράζεται στην ετικέτα HTML ) και γραμματοσειρές.

Μπορείτε να εισάγετε αριθμημένες λίστες (μεταφράζονται ως

    <OL>
      <LI>...</LI>
      ...
    </OL>

) ή λίστες με κουκκίδες (μεταφράζονται ως

    <UL>
      <LI>...</LI>
      ...
    </UL>

).

Ακόμα μπορείτε να εισάγετε πίνακες όπως μάθαμε σε προηγούμενο κεφάλαιο. Ο σωστός τρόπος διαμόρφωσης μιας σελίδας πάντως είναι με τη χρήση Cascading Style Sheets (CSS) κι όχι με τη χρήση πινάκων.

    <TABLE WIDTH=100% CELLPADDING=5 CELLSPACING=0>
      <TR>
        <TD>...</TD>
      </TR>
    </TABLE>

Αλλά ας δούμε τα παραπάνω με ένα παράδειγμα. Θα δημιουργήσουμε την παρακάτω ιστοσελίδα ιστολογίου. Μπορείτε να μεταβείτε στην προβολή πηγαίου κώδικα HTML για να βλέπετε πως τροποποιείται το αρχείο HTML μετά από κάθε σας ενέργεια. Αν τρέχετε έκδοση του LibreOffice μικρότερη του 4.0 θα πρέπει να ανοίξετε το αρχείο .html στον αγαπημένο σας κειμενογράφο απλού κειμένου.

Εικόνα 6.1 Ιστολόγιο

Ας δούμε λοιπόν πως πετύχαμε το αποτέλεσμα της εικόνας 6.1.

Η λέξη "Ιστολόγιο" είναι μια επικεφαλίδα, οπότε ορίζουμε γι' αυτήν το στυλ Heading 1 όπως μάθαμε σε προηγούμενο κεφάλαιο. Για τη φράση “του Hawk” ορίζουμε κεφαλίδα Heading 2. Μάλιστα, από το παράθυρο Styles & Formatting μπορείτε να εμφανίσετε μόνο τις τεχνοτροπίες (στυλ) HTML από την πτυσσόμενη λίστα στο κάτω μέρος του παραθύρου.

Μπορείτε να εισάγετε μια οριζόντια γραμμή (<hr>) στις εκδόσεις του LibreCffice πριν την 4.0, από το μενού Insert → Horizontal Line. Εμφανίζεται ένα διαλογικό παράθυρο από το οποίο μπορείτε να επιλέξετε μια οριζόντια γραμμή. Από την έκδοση 4.0 και μετά, δυστυχώς δεν παρέχεται αυτή η δυνατότητα, αλλά μπορείτε να προσθέσετε μια οριζόντια γραμμή ως στυλ (τεχνοτροπία) χαρακτήρων (Horizontal Line) (κουμπί Styles & Formatting).

Μπορείτε να εισάγετε τοπικές εικόνες κατά τα γνωστά από το μενού:

Insert → Picture → From File (εκδόσεις < 4.0)
Insert → From File (εκδόσεις ≥ 4.0)

Μεταφράζεται π.χ. σε:

<IMG SRC="e-mail.gif" NAME="e-mail.gif" ALIGN=BOTTOM WIDTH=55 HEIGHT=60 BORDER=0>

Επιλέγοντας την εικόνα και επαναλαμβάνοντας την παραπάνω εντολή (ή δεξί κλικ και Picture) εμφανίζεται το διαλογικό παράθυρο Picture το οποίο σας επιτρέπει να:

αλλάξετε την εικόνα από την καρτέλα Picture εισάγοντας π.χ. μια απομακρυσμένη διεύθυνση (URL) μιας εικόνας στο διαδίκτυο
εισάγετε έναν υπερσύνδεσμο (καρτέλα Hyperlink) ώστε κάνοντας κλικ πάνω στην εικόνα μεταφέρεστε σε μια άλλη ιστοσελίδα
αναδιπλώσετε το κείμενο γύρω από την εικόνα (καρτέλα Wrap)

Μπορείτε ακόμα να εισάγετε αρχεία βίντεο ή ήχου από το μενού Insert → Movie and Sound.

Για να αλλάξετε το χρώμα φόντου, ακολουθήστε τα εξής βήματα:

Πατήστε το κουμπί Gallery της βασικής μπάρας εργαλείων ή από το μενού Tools → Gallery.
Επιλέξτε το θέμα Backgrounds.
Κάντε δεξί κλικ στο παρασκήνιο που επιθυμείτε και στη συνέχεια Insert → Background → Page.

Ένα βασικό χαρακτηριστικό του Παγκόσμιου Ιστού (WWW – World Wide Web) είναι η χρήση υπερσυνδέσμων που μας επιτρέπουν να “μεταφερόμαστε” από έναν ιστοτόπο σε έναν άλλο. Για να εισάγετε έναν υπερσύνδεσμο σ' ένα κείμενο ή μια εικόνα, επιλέξτε τα και κάντε κλικ στο μενού Insert → Hyperlink ή κλικ στο αντίστοιχο κουμπί Hyperlink της βασικής μπάρας εργαλείων. Εμφανίζεται το διαλογικό παράθυρο της εικόνας 6.2.

Εικόνα 6.2 Διαλογικό παράθυρο εισαγωγής υπερσυνδέσμων

Μπορείτε να δημιουργήσετε τριών ειδών υπερσυνδέσμους:

υπερσύνδεσμο σε μια ιστοσελίδα του διαδικτύου
υπερσύνδεσμο σε μια διεύθυνση ηλεκτρονικού ταχυδρομείου
υπερσύνδεσμο σε μια άλλη θέση της ίδιας ιστοσελίδας

κάνοντας κλικ σε καθένα από τα τρία πρώτα κουμπιά στ' αριστερά του παραθύρου.

Πατώντας το κουμπί Internet μπορείτε να εισάγετε μια διεύθυνση URL (δηλ. http://) στο πεδίο Target. Το αποτέλεσμα είναι π.χ.:
<A HREF="http://ubuntistas.ubuntu-gr.org/"></A>

Από το κουμπί Mail & News μπορείτε να εισάγετε μια διεύθυνση ηλεκτρονικού ταχυδρομείου και ένα θέμα για το μήνυμα που θα δημιουργηθεί όταν ο αναγνώστης κάνει κλικ πάνω στον υπερσύνδεσμο. Το αποτέλεσμα είναι π.χ.:

<A HREF="mailto:info@ubuntistas.gr?subject=Γειά σου"></A>

Από το κουμπί Document μπορείτε να εισάγετε έναν υπερσύνδεσμο σε μια άλλη ιστοστελίδα στον ίδιο ιστοτόπο συμπληρώνοντας τη διαδρομή του αρχείου στο πεδίο Path, ή σε άλλο σημείο της ίδιας ιστοσελίδας συμπληρώνοντας το πεδίο Target (ή πατώντας στο αντίστοιχο κουμπί) με κάποια κεφαλίδα, ή πίνακα ή κάποιο σελιδοδείκτη (bookmark) κλπ. Με αυτόν τον τρόπο δημιουργήθηκε ο πίνακας περιεχομένων που να δείχνει στις επικεφαλίδες “Εισαγωγή στην HTML 5” και “Εισαγωγή στη CSS3”.

Τέλος, από το κουμπί New Document μπορείτε να δημιουργήσετε ένα νέο αρχείο ιστοσελίδας με το οποίο μπορείτε να συνδεθείτε.

Οι επιπλέον ρυθμίσεις (Further settings) σας επιτρέπουν να:

εισάγετε το πλαίσιο (frame) μέσα στο οποίο θέλετε ν' ανοίξει η ιστοσελίδα με την οποία θέλετε να συνδεθείτε:
- blank: η συνδεδεμένη ιστοσελίδα εμφανίζεται σε νέο παράθυρο
- self: η συνδεδεμένη ιστοσελίδα εμφανίζεται στο ίδιο πλαίσιο
- parent: η συνδεδεμένη ιστοσελίδα εμφανίζεται στο πλαίσιο που περιέχει το τρέχον πλαίσιο
- top: η συνδεδεμένη ιστοσελίδαεμφανίζεται σε ολόκληρο το τρέχον παράθυρο
εμφανίσετε τον υπερσύνδεσμο ως κουμπί (Form)
αλλάξετε το κείμενο που θα εμφανίζεται (Text)
εισάγετε ένα όνομα (Name Tag)

Μπορείτε να εισάγετε και κώδικα Javascript από το μενού Insert → Script.

6.3 Δημιουργία χαρτών εικόνων (image maps)

Το LibreOffice Writer διευκολύνει επίσης και τη δημιουργία και επεξεργασία χαρτών εικόνων ή image maps. Με απλά λόγια, ένας χάρτης εικόνων είναι μια εικόνα όπου διάφορες περιοχές της είναι συνδεδεμένες με διαφορετικές ιστοσελίδες. Π.χ. η παρακάτω εικόνα της Ελλάδας περιλαμβάνει υπερσυνδέσμους σε ποιες πόλεις οργανώνονται συνέδρια πληροφορικής. Πατώντας σε συγκεκριμένες πόλεις ανοίγουν οι ιστοσελίδες των διαφόρων συνεδρίων.

Εικόνα 6.3 Παράδειγμα χάρτη εικόνας

Ας δούμε πως μπορούμε να δημιουργήσουμε τον παραπάνω χάρτη εικόνας. Εισάγετε μια οποιαδήποτε τοπική εικόνα όπως μάθαμε παραπάνω. Στη συνέχεια επιλέξτε τη, δεξί κλικ πάνω της και επιλέξτε Picture. Εμφανίζεται το ομώνυμο διαλογικό παράθυρο, απ' όπου επιλέξτε την καρτέλα Hyperlink και εισάγετε τη διεύθυνση: http://www.mapsofworld.com/greece/maps/greece-map.gif και ΟΚ.

Έπειτα, πάλι δεξί κλικ στην εικόνα και επιλέξτε **Image Map (**ή μενού Edit → ImageMap).

Εικόνα 6.4 Διαλογικό παράθυρο Image Map

Επιλέξτε το ορθογώνιο (ή την έλλειψη) και σύρετε με το ποντίκι γύρω από τα Χανιά (κρατήστε πατημένο το SHIFT για να δημιουργήσετε ένα τέλειο σχήμα). Στη συνέχεια εισάγετε τα στοιχεία όπως φαίνονται στην εικόνα 6.4 και πατήστε το κουμπί Apply. Πατώντας το τελευταίο κουμπί Properties μπορείτε να δείτε περισσότερες λεπτομέρειες για τον υπερσύνδεσμο που προσθέσατε.

Επαναλάβετε το παραπάνω βήμα επιλέγοντας την Αθήνα και εισάγοντας τις παρακάτω πληροφορίες:

Address: http://euruko2013.org
Text: Euruko 2013 Ruby international conference

και φυσικά πατώντας το κουμπί Apply.

Μπορείτε να αποθηκεύσετε το συγκεκριμένο χάρτη εικόνας ώστε να μπορείτε να τον εφαρμόσετε και σε άλλες εικόνες. Πατώντας στο κουμπί Saveμπορείτε να επιλέξετε ένα από τα 3 φορμά:

MAP-CERN (*.map)
MAP-NCSA (*.map)
StarView (*.sip)

Αφού τελειώσετε με την εισαγωγή υπερσυνδέσμων, κλείστε το διαλογικό παράθυρο ImageMap. Προβάλλοντας τον πηγαίο κώδικα HTML θα δείτε κάτι σαν το παρακάτω:

    <MAP NAME="MAP1">
      <AREA SHAPE=RECT COORDS="401,404,415,421" HREF="[http://euruko2013.org/&quot](http://euruko2013.org/&quot); TARGET="_self" ALT="Euruko 2013 Ruby     conference">
      <AREA SHAPE=RECT COORDS="464,632,479,655" HREF="[http://jcrete.org/&quot](http://jcrete.org/&quot); TARGET="_self" ALT="JCrete Java Conference">
    </MAP>
    <IMG SRC="[http://www.mapsofworld.com/greece/maps/greece-map.gif&quot](http://www.mapsofworld.com/greece/maps/greece-map.gif&quot);     NAME="graphics1" ALIGN=LEFT WIDTH=855 HEIGHT=775 BORDER=0 USEMAP="#MAP1">

Το Writer ονομάζει τον χάρτη εικόνας ως MAP1 και η εικόνα αναφέρεται σ' αυτόν με τη χρήση του USEMAP.

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

Είδατε λοιπόν, πώς το LibreOffice Writer επιταχύνει και διευκολύνει τη δημιουργία και επεξεργασία χαρτών εικόνων.

6.4 Δημιουργία φορμών

Το Writer σας δίνει ακόμα τη δυνατότητα να δημιουργήσετε φόρμες. Υπάρχουν δυο σχετικές μπάρες. Από το μενού View → Toolbars → Form Controls εμφανίστε τη μπάρα στοιχείων ελέγχου φόρμας (βλ. Εικόνα 6.5)[^1].

Εικόνα 6.5 Μπάρα στοιχείων ελέγχου φόρμας

Εργαλείο	Περιγραφή
Select	Επιλογή ενός εργαλείου.
Design mode on/off	Κουμπί επιλογής μεταξύ προβολή σχεδίασης (για επεξεργασία φορμών) και προβολή φορμών.
Control	Εμφάνιση ιδιοτήτων επιλεγμένου εργαλείου.
Form	Εμφάνιση ιδιοτήτων φόρμας.
Checkbox	Κουμπί ελέγχου
Text Box	Πλαίσιο κειμένου
Formatted Field	Πλαίσιο κειμένου που επιτρέπει μορφοποίηση αριθμών, π.χ. αρ. δεκαδικών ψηφίων.
Push Button	Κουμπί
Option Button	Κουμπί επιλογής
List Box	Λίστα επιλογής
Combo Box	Πτυσσόμενη λίστα επιλογής
Label field	Ετικέτα
More controls	Περισσότερα εργαλεία
Form Design	Εμφανίζει την αντίστοιχη εργαλειοθήκη
Wizards On/Off	(Απ)ενεργοποίηση οδηγού για τα εργαλεία List Box, Combo Box και Group Box.

Πατώντας το κουμπί More Controls εμφανίζεται και η μπάρα της εικόνας 6.6[^2].

Εικόνα 6.6 Περισσότερα στοιχεία ελέγχου πατώντας στο αντίστοιχο κουμπί

Εργαλείο	Περιγραφή
Spin Button	Επιλογή ενός αριθμού πατώντας τα κουμπιά (π.χ από 1-100). Χρησιμοποιείται στο Calc καθώς ο αριθμός δεν είναι ορατός στο Writer.
Scrollbar	Μπάρα ολίσθησης. Δεν χρησιμοποιείται στο Writer.
Image Button	Κουμπί που εμφανίζει μια εικόνα.
Image Control	Κουμπί εμφάνισης πολλών εικόνων. Πρέπει να συνδεθεί με μια ΒΔ.
Date Field	Αποθηκεύει μια ημερομηνία
Time Field	Αποθηκεύει μια ώρα
File Selection	Επιλογή αρχείου
Numeric Field	Πλαίσιο κειμένου που εμφανίζει μορφοποιημένο αριθμό.
Currency Field	Πλαίσιο κειμένου που εμφανίζει μορφοποιημένο νομισματικό ποσό.
Pattern Field	Πεδίο μοτίβου που περιορίζει τι μπορεί να εισάγει ο χρήστης.
Group Box	Πλαίσιο ομαδοποίησης κουμπιών επιλογής.
Table control	Δημιουργία πίνακα
Navigation Bar	Μπάρα περιήγησης εγγραφών

Πατώντας το κουμπί Design Formεμφανίζεται η μπάρα σχεδίασηςφόρμας (βλ. Εικόνα 6.7) την οποία μπορείτε επίσης να εμφανίσετε από το μενού View → Toolbars → Form Design[^3].

Εικόνα 6.7 Μπάρα σχεδίασης φόρμας

Εργαλείο	Περιγραφή
Select	Επιλογή ενός εργαλείου.
Design mode on/off	Κουμπί επιλογής μεταξύ προβολή σχεδίασης (για επεξεργασία φορμών) και προβολή φορμών.
Control	Εμφάνιση ιδιοτήτων επιλεγμένου εργαλείου.
Form	Εμφάνιση ιδιοτήτων φόρμας.
Form Navigator	Εμφανίζει όλες τις φόρμες και εργαλεία του εγγράφου
Add Field	Προσθήκη πεδίου. Δουλεύει μόνο με σύνδεση με ΒΔ.
Activation Order	Σας επιτρέπει να καθορίσετε τη σειρά εστίασης των εργαλείων (πατώντας το Tab).
Open in Design Mode	Άνοιγμα της φόρμας σε προβολή σχεδίασης.
Automatic Control Focus	Θέτει την εστίαση στο πρώτο εργαλείο της φόρμας.
Position and Size	Ορίζει το μέγεθος και τη θέση του επιλεγμένου εργαλείου.
Change Anchor	Αγκύστρωση του εργαλείου στη σελίδα, την παράγραφο, ή ως χαρακτήρας.
Alignment	Στοίχιση εργαλείου. Ενεργοποιείται μόνο όταν το εργαλείο είναι αγκυστρωμένο ως χαρακτήρας.
Display Grid	Εμφανίζει το πλέγμα για καλύτερη στοίχιση των εργαλείων πάνω σ' αυτό.
Snap to Grid	Τράβηγμα του εργαλείου στο πλέγμα για καλύτερη στοίχιση.
Guides when Moving	Γραμμές καθοδήγησης που βοηθούν στη στοίχιση των εργαλείων σε σχέση με άλλα εργαλεία της φόρμας.

Ως παράδειγμα, θα δημιουργήσουμε τη φόρμα της εικόνας 6.8.

Ξεκινήστε τη σχεδίαση της φόρμας σας πατώντας το κουμπί Design Mode On (κατάσταση σχεδίασης) της μπάρας στοιχείων ελέγχου φόρμας της εικόνας 6.5. Δημιουργήστε τη φόρμα σέρνοντας τα κατάλληλα εργαλεία στην ιστοσελίδα κι έχοντας το κουμπί Wizards Off.

Εικόνα 6.8 Μια φόρμα ανατροφοδότησης

Εργαλείο	Περιγραφή
Σχόλιο	Δημιουργήστε την ετικέτα
Σχόλιο	Δημιουργήστε το πλαίσιο κειμένου
Email	Δημιουργήστε την ετικέτα
Email	Δημιουργήστε το πεδίο μοτίβου.
Να δημοσιευτεί;	Δημιουργήστε το κουμπί ελέγχου
Άνδρας Γυναίκα	Δημιουργήστε τα δυο κουμπιά επιλογής με τη βοήθεια ενός group box έχοντας ενεργοποιημένο τον οδηγό (Wizards On).
Χώρα	Δημιουργήστε την ετικέτα
Χώρα	Δημιουργήστε την πτυσσόμενη λίστα επιλογής
Υποβολή	Δημιουργήστε το κουμπί
Καθαρισμός	Δημιουργήστε το κουμπί

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

Εικόνα 6.9 Διαλογικό παράθυρο ιδιοτήτων πλαισίου κειμένου

Καλό είναι να δίνετε ένα όνομα για κάθε εργαλείο. Αυτό βοηθάει να το προσπελάσετε αργότερα. Ένας άτυπος κανόνας είναι να βάζετε ένα πρόθεμα μπροστά από το όνομα, π.χ. lblComment για την ετικέτα “Σχόλιο:”, txtComment για το πλαίσιο κειμένου κλπ. όπου lbl = label, txt = text, btn = button, cmb = combo box κ.ο.κ.

Για τα πλαίσια κειμένου, δηλώστε το πεδίο Label να είναι η αντίστοιχη ετικέτα, π.χ. για το txtComment, ορίστε ως Label το lblComment κλπ. καθώς και το μέγιστο αριθμό χαρακτήρων (Max. Text length).

Θα σας βοηθήσει επίσης στη σχεδίαση της φόρμας σας αν θέσετε την αγκύρωση (anchor) να μην είναι χαρακτήρας (character) αλλά παράγραφος (To paragraph). Έτσι θα μπορείτε να μεταφέρετε τα διάφορα εργαλεία στη σωστή θέση πιο εύκολα.

Για να δημιουργήσετε τα κουμπιά επιλογής, ενεργοποιείστε το κουμπί Wizards On/Offκαι πατήστε το κουμπί Group Box από την εργαλειοθήκη της εικόνας 6.6. Στην πρώτη σελίδα του οδηγού εισάγετε τα δυο ονόματα “Άνδρας”, “Γυναίκα” και πατήστε κάθε φορά το κουμπί >> για να τα προσθέσετε στην ομάδα. Στην επόμενη σελίδα επιλέξτε No, one particular field is not going to be selected. Δώστε μια τιμή σε καθεμιά από τις επιλογές (αφήστε τις εξ' ορισμού τιμές) στην επόμενη σελίδα και δώστε την ετικέτα “Φύλο” για την ομάδα στην τελευταία σελίδα.

Ένας εναλλακτικός τρόπος είναι να προσθέσετε δυο κουμπιά επιλογών (option buttons) και να θέσετε το ίδιο όνομα ομάδας (Group Name) γι' αυτά, π.χ. “Sex” ώστε όταν επιλέγετε το ένα απ' αυτά ν' απο-επιλέγεται αυτόματα το άλλο.

Απενεργοποιήστε το κουμπί Wizards On/Offκαι πατήστε το κουμπί Combo Box για να δημιουργήσετε μια πτυσσόμενη λίστα. Εμφανίστε τις ιδιότητες του εργαλείου και συμπληρώστε το πεδίο List entries με ονομασίες διαφόρων χωρών ως εξής: εισάγετε π.χ. Ελλάδα, SHIFT + ENTER, Ιταλία κ.ο.κ.

Τέλος, για τα δυο κουμπιά, Υποβολή και Καθαρισμός, ορίστε το πεδίο Action ως Submit form και Reset form αντίστοιχα.

Οι ιδιότητες της φόρμας εμφανίζονται πατώντας το κουμπί Form.

Εικόνα 6.10 Διαλογικό παράθυρο ιδιοτήτων φόρμας

Για να δείτε πως δουλεύει η φόρμα, ξαναπατήστε το κουμπί Design Mode ώστε να μην είναι επιλεγμένο. Πλέον (κι εφόσον παραμένετε σε προβολή ιστοσελίδας) μπορείτε να εισάγετε κείμενο στα πλαίσια κειμένου, να τσεκάρετε το κουμπί ελέγχου κλπ.

Ας δούμε τι κώδικα παρήγαγε και συγκρίνετέ τον με την εικόνα 6.10:

    <FORMNAME="Form" ACTION="../LibreOffice">
      <P><TEXTAREA NAME="txtComment" ROWS=4 COLS=81 WRAP=SOFT STYLE="float: left; width: 15.74cm; height: 2.31cm" ></TEXTAREA></P>
      <P><INPUT TYPE=TEXT NAME="Email" SIZE=81 STYLE="width: 15.77cm; height: 0.62cm" ></P>
      <P><INPUT TYPE=CHECKBOX NAME="Publish" VALUE="" STYLE="width: 6.29cm; height: 0.52cm">Να δημοσιευτεί;</P>
      <INPUT TYPE=SUBMIT NAME="btnSubmit" VALUE="Submit" STYLE="width: 2.44cm; height: 0.71cm; font-family: 'Arial', sans-serif; font-size: 12pt">
      <INPUT TYPE=RESET NAME="btnClear" VALUE="Clear" STYLE="width: 2.75cm; height: 0.75cm; font-family: 'Arial', sans-serif; font-size: 12pt">
    </FORM>

Μια φόρμα δηλώνεται με την ετικέτα <FORM>. Θέτετε την ιδιότητα Action με το πρόγραμμα διακομιστή (π.χ. κάποιο script PHP ή Java) που θα επεξεργαστεί τα δεδομένα της φόρμας σας. Στη περίπτωσή μας είναι το LibreΟffice, που σημαίνει ότι κανείς δεν επεξεργάζεται τα δεδομένα της φόρμας.

Όταν τελειώσετε την επεξεργασία της φόρμας σας, αποθηκεύστε το αρχείο μόνο για ανάγνωση (read-only) ώστε να μην μπορούν να την αλλάξουν οι χρήστες παρά μόνο να εισάγουν δεδομένα. Γι' αυτό το σκοπό επιλέξτε File → Properties → Security → Open file read-only.

Προσοχή! Σημειώστε ότι κατά την αποθήκευση του αρχείου, δυστυχώς, κάποια εργαλεία δεν αποθηκεύονται. Είναι bugs του προγράμματος ακόμα και στην τελευταία έκδοση που γράφονται αυτές οι γραμμές, δηλ. 4.2.2.1.

6.5 Δημοσίευση ιστοτόπου

Αφού ετοιμάσατε τις ιστοσελίδες που θ' αποτελέσουν τον ιστοτόπο σας, θα πρέπει να τις ανεβάσετε στον ιστοτόπο σας, συνήθως μέσω FTP. Το Writer σας παρέχει δυο τρόπους “ανεβάσματος” των ιστοσελίδων σας στον ιστοτόπο σας:

Από το μενού: File → Save As, στο πεδίο FileName εισάγετε τη διεύθυνση FTP του ιστοτόπου σας ως εξής: ftp://username:password@hostname/path/to/index.html. Αν δε δώσετε username και password τότε θεωρείστε ανώνυμος χρήστης και θα εμφανιστεί ένα παράθυρο που θα σας ζητήσει κωδικό πρόσβασης.
Με τον οδηγό ιστού από το μενού File → Wizards → Web Page ο οποίος βασικά σας επιτρέπει να δημιουργήσετε έναν ολόκληρο ιστοτόπο από αρχεία LibreOffice (όχι HTML). Ακολουθώντας τον οδηγό χτίζετε βήμα βήμα τη διάταξη (layout) του ιστοτόπου σας, το στυλ των ιστοσελίδων σας κλπ., δημιουργεί μέχρι και πίνακα περιεχομένων και τέλος σας δίνει τη δυνατότητα είτε να εκφορτώσετε τον ιστοτόπο στη διεύθυνση που έχετε αγοράσει/μισθώσει ή να τον αποθηκεύσετε τοπικά ως zip αρχείο.

6.6 Επίλογος

Με το LibreOffice Writer μπορείτε να ετοιμάσετε εύκολα και γρήγορα τις ιστοσελίδες σας χωρίς να γνωρίζετε τη γλώσσα HTML. Μπορείτε ακόμα να ετοιμάσετε εικόνες χαρτών (image maps) και φόρμες εισαγωγής δεδομένων και να δημοσιεύσετε τον ιστοτόπο σας με τον οδηγό ιστού. Στο επόμενο κεφάλαιο θα μιλήσουμε για τις δυνατότητες που μας παρέχει το LibreOffice Writer για συγχώνευση αλληλογραφίας.

Πηγές:

LibreOffice (2011), Getting Started with LibreOffice 3.3.
LibreOffice (2011), LibreOffice Writer Guide – Word Processing with LibreOffice 3.3.
Chanelle A. (2009), Beginning OpenOffice 3 From Novice to Professional, Apress.
Miller R. (2005), Point & Click OpenOffice.org!, Prentice Hall.

<-| ->

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LibreOfficeWriter_chap6.md

LibreOfficeWriter_chap6.md

LibreOffice Writer

Κεφάλαιο 6 - Δημιουργία Ιστοσελίδων

6.1 Δημιουργία Ιστοσελίδας

6.2 Επεξεργασία Ιστοσελίδας

6.3 Δημιουργία χαρτών εικόνων (image maps)

6.4 Δημιουργία φορμών

6.5 Δημοσίευση ιστοτόπου

6.6 Επίλογος

Πηγές:

Files

LibreOfficeWriter_chap6.md

Latest commit

History

LibreOfficeWriter_chap6.md

File metadata and controls

LibreOffice Writer

Κεφάλαιο 6 - Δημιουργία Ιστοσελίδων

6.1 Δημιουργία Ιστοσελίδας

6.2 Επεξεργασία Ιστοσελίδας

6.3 Δημιουργία χαρτών εικόνων (image maps)

6.4 Δημιουργία φορμών

6.5 Δημοσίευση ιστοτόπου

6.6 Επίλογος

Πηγές: