Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Creare Pagweb-Cap.3 PDF

    Uploaded by

    Michael Woodard

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content

    You might also like

    Creare Pagweb-Cap.3 PDF

    Uploaded by

    Michael Woodard
    2 views47 pages

    Original Title

    Creare pagweb-cap.3.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    Download as pdf
    2 views47 pages

    Creare Pagweb-Cap.3 PDF

    Uploaded by

    Michael Woodard

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    Download as pdf
    of 47
    Capitolul 3 Creare pagini web 1 Proiectare 3.1.1 Recunoasterea tehnicilor de planificare si proiectare a unui site Procesul de creare a unui website este unul foarte complex si poate fi si mai plex dacé nu se realizeaza un “plan de atac” in prealabil. Acest plan este format cdtiva pasi si anume: Evaluarea nevoilor publicului tinté — inainte ca un designer web s& fnceapa lucrul site, trebule stabilit publicul tinta astfel incdt continutul site-ului si fie adecvat tuia. Astfel, dacd, de exemplu, publicul tintd este format din copii, implicit site-ul li@ s4 contina culori vii, multe animatii si informatii distractive, Pentru un public tip business, site-ul va avea un caracter formal, Creareg scenariilor — acestea ajuta in vizualizarea produsul final si te ghideaza in itarea proiectului. Folasirea scenariilor este un economizor de timp pentru ci etapele de productie sunt vizualizate si specificate de la fnceput. Alte modalitati 2 fi eficient in dezvoltarea unui site este de a utiliza template-uri (sabloane) de sign si foi de stil pentru a se aplica design-ul implementat pe mai multe pagini. Organizarea structurii site-ului = acest pas este cel mai importat decarece, in Octie de aceasta, se va crea site-ul, Odata creatd o structur3, este foarte dificil programator sa o schimbe radical, acest lucru cauzand costuri suplimentare si re pierdere de timp. Crearea unei pagini sablon — scopul principal al unui programator in procesul de a site-ului este s elimine munca rudimentar3, rutina. Acest lucru se eaz4 prin crearea unor pagini sablon. Implementand un design ce se va regisi ii multe pagini, se economiseste timp, acest lucru facdndu-se o singurd data. Alegerea schemet de navigare — Dupa ce obiectivele si structura au fost decise, i gata sé construiti site-ul web. © structura bine conceputd usureazd litatea de a defini sistemul de navigatie si, combinata cu un design vizual : permite utilizatorilor sé construiascd o hartd mentala a site-ului, Utilizatorul joie de mai multe posibilitati de navigare prin site precum: ¥ folasirea unei bare de navigare pozitionata in partea de sus a site-ului sau in partea sting, ¥ folosirea hyperlink-urilor pentru a naviga mai repede de la o paging laalta, ¥ folosirea unei optiuni de cdutare in cadrul site-ului, aceasta find probabil cea mai rapida cale de navigare. 3.1.2 Recunoasterea regulilor de buna pract Utilizarea fonturilor de ti 4 in selectia fonturilor. Arial, Courier, Helvetica in momentul in care trebuie stabilit fontul corespunzdtor pentru website-ul dvs, trebuie avuta in vedere disponibilitatea acestora (de exemplu anumite sisteme de operare non Windows nu au fontul Arial instalat) si lizibilitatea lor. in general, dacd doriti s8 creati o pagina web care sa arate la fel, indiferent de ce calculator detin vizitatorii site-ulul, cel mal bine este sé alegeti din trei grupuri de fonturi. 2) Fonturi Sans Serif Multe site-uri au tendinta de a folosi una din urm&toarele serii de fonturi in principal pentru c& cei mai multi oameni gasesc fonturile sans serif mai usor de citit pe un monitor. - Atial, Helvetica, sans-serif (cele mai des utilizate fonturl) - Verdana, Arial, Helvetica, sans-serif (acest font are caracterele mai mari si mai spatiate) 2) Fonturi Serif Aceste fonturi sunt mai rare deoarece nu sunt foarte usor de citit pe un monitor, cel mai utilizat find Times New Roman. 3) Fonturi cu un singur spatiu Acest tip de font are o calitate special si anume: létimea fiecdrui caracter este egald, indiferent daca este litera “W" sau litera “I”. Acest tip de font este foarte des utilizat la afisarea codurilor sursa 3.2 Utilizarea aplicatiei 3.2.1 Deschiderea, inchiderea unei aplicatii de creare pagini web. Deschiderea, inchiderea unei pagini web © Deschiderea unei aplicatii de creare pagini web Pentru deschiderea aplicatiei Kompozer se apeleazé meniul Start indicand cu | spre coltul din stanga jos al barei de aplicatii (taskbar) pnd apare imaginea 2? in ecranul Start tastati textul KempoZer si dati click pe pictograma De asemenea, daca existé un shortcut al aplicatiei pe desktop, se executa click pe iconita “= pentru a deschide aplicatia. inchiderea unei aplicatii de creare pagini web Se apeleaz’ meniul File (Fisier) - optiunea Exit (lesire). New oun ‘Spent cue Opentveb ection. Chest Seaton Sle cute ise Soe eis Set ‘Stetina Change Character freacing | Palbtich Cueshe fete Rattner ponte Tet. Fecmas Pont. Se poate folasi si combinatia de taste Ctrl +Q. * Deschiderea unei pagini web Deschiderea unei pagini web existente pe hard disk-ul calculatorului se lizeaz8 prin apelarea meniului File (Fisier) - Open File (Deschidere fisier) sau prin isarea butonului °* (Deschidere) din bara de instrumente. In fereastra afisata ecran se navigheaz’ pana la fisierul dorit. Deschiderea figierului se realizeaz3 prin ectarea lui si apdsarea butonutu | au printr-un dublu click stanga pe jer, i viteos 1 Computer Ee toca i (c ‘cy HRECOVERY (L, Butonul Open File rome: index bet | Open Cancel @ Se poate folosi si combinatia de taste Ctrl + O. « inchiderea unei pagini web Pentru inchiderea paginii curent deschise, se apeleaz’ meniul File (Fisier) optiunea Close (inchidere). Daca sunt deschise mai multe pagini web in simultan si se doreste inchiderea tuturor, se alege comanda Close Alll (Inchidere toate) din acela meniu File (Fisier). (ED exit View Insert Format Table New CtileN Open File Ctl Open Web Location... Ctrl+Shift+L Recent Pages » iW Close All 3.2.2 Crearea, salvarea unei noi pagini web intr-o locatie pe disc © Crearea unei noi pagini web Crearea unei noi pagini web se realizeaz prin apelarea meniului File (Fisier) — (Nou). in fereastra afisaté pe ecran se bifeazd optiunea A blank document ument necompletat) si se apas& butonul L_Sae- What kin of file do you want to erste? @ A blank document Cl crestes KHTML document [i Suit 1D © Anew document based onatemplate ‘Greatein: "New Tab © alti posibilitate consté in apasarea butonului “** (Nou) din bara de instrumente. & Se poate folosi si combinatia de taste Ctel + N. * Salvarea unei noi pagini web Salvarea unei pagini web se realizeazd din meniul File (Fisier) — Save (Salvare). Th caseta de dialog afisat& pe ecran se tasteazi numele paginii web si se apas3 butonul OK. Please enter ttle forthe curent page. ‘Thisicentifies the page inthe window title and baokmatks. jn fereastra Save Page As (Salvare Pagina Ca) se alege locatia si denumirea fisierului, dup care se apas3 butonul Save (Salvare). Extensia implicit a unei pagini web este .html. Locatia de salvarea fisierului . Numele fisierului eran [EE Butonul Save (& Combinatia de taste Ctrl + S deschide de asemenea fereastra de salvare a paginii web. 3.2.3 Crearea, salvarea unei noi pagini web pe baza unui sablon disponibil Crearea unei noi pagini web pe baza unui sablon deja existent se realizeaz& prin apelarea meniului File (Fisier) - New (Nou). in fereastra afisaté pe ecran se bifeazi optiunea A blank template (Sablon necompletat) si se apasi butonul [erate] (Creare). iat indo fede you watered ——— © Ablank document coe dcamest C] Set TD > Anew docomentbasedn a temple eter te wb eciton URL ofthe terse echetaes lec ptt Salvarea paginii web se realizeazi prin aceeasi pasi descrisi mai sus, cu precizarea cd formatul de salvare a sabloanelor este .mzt. 3.2.4 Adaugarea si editarea unui titlu descriptiv de pagina in momentul salvarii unei pagini web, aplicatia KompoZer va solicits numele jnii web. Dacé insa ulterior doriti s& modificati acest nume, apelati meniul Format Title and Properties (Titlu si proprietati pagit - Genes information — | Location fle/f/Cleientrat Lat Modis Wednesday, Octber 2204 Titlul paginii We ot | author - Desctiption: “Templates << IF) Thispoge se template Intemationalizaion Language: 7 “Chossea language | Wing direction: | No dection specified) ui Gea aciend Advanced users asta ; To ecit ther contents ofthe region, use"HTML Source inthe View Mens or it Mode Tectba. 3.2.5 Comutarea intre codul sursa si vizualizarea proiect Desi un editor de pagini web pune la dispozitia utilizatorilor modul de jalizare Design (Proiectare), uneori este bine si putem vizualiza si codul sursé al ini pentru a intelege ce exist in spatele aspectului grafic al site-ului. Comutarea intre codul sursa si vizualizarea proiect se face prin una din cele 4 modalitati descrise mai jos: ew (Vizualizere) — optiunea HTML Source (Sursé HTML) ® Se apasa butonul Source (Sursa) localizat in partea de jos a ferestrei Kompozer. | BSAA) B source) 3.3 Cresterea productivitatii 3.3.1 Stabilirea unor optiuni/ preferinte de baza in cadrul aplicagiet Tnainte de a incepe lucrul cu aplicatia KompoZer, este recomadabil sa stabili preferintele dvs. din cadrul aplicatiei pentru a lucra cat mai bine cu aceast aplicatie, ‘Aceste preferinge se stabilesc din meniul Tools (Instrumente) — Preferet (Preferinte). in fereastra afisat pe ecran setati urmatoarele: - browser-ul web implicit Tn tab-ul Applications (Aplicatii) puteti folosi optiunea use system defaul pentru a folosi browser-ul implicit (de obicel Internet Explorer) sau optiunea us ‘custom application pentru a stabili un anumit browser pe care doriti s8 il utilizafi - tipurile de documente folosite Tot in tab-ul Applications (Aplicatii), in sectiunea File extensions for (Extensis fisiere pentru) se stabilesc extensiile acceptate pentru documente html, fisiere CSS, imagini etc. Se {seats | a me mn it he oa miele = Pe sta ba =~ sae ar pecan tnt mC ot = naan es oe Tipu - codificare Codificarea se refera la anumite standarde ce stabilesc toate caracterel necesare pentru a serie pe computer texte din toate limbile active. Acaste standarde se regdsesc in tab-ul New Page Settings (Setari pagina nous), junea Internationalization {Internationalizare) — cimpul Character set (Set tere). nla peace Sgr ana oe Deets © Uinsinom sere eesti. epi | (Geneatnaiae uri in tab-ul Fonts (Fonturi) puteti stabili fonturile implicite pe care KompoZer sa le asca tn cadrul paginilor web. Daca este bifaté caseta Allow documents to use fonts (Se permite documentelor sa utilizeze alte fonturi), atunci KompoZer va fonturile precizate in foile de stil create (fisierele CSS). Dacd aceastd casetd debifats, KorpoZer va ignora stilurile stabilite tn fisierele CSS si va utiliza rile precizate in aceasta fereastra. repent Set Sages il Conve “Cone Sins MS osase Achat Monspace: Couneleo Ninimurnfentsize [Wene |] 3.3.2 Utilizarea functiei Help Un instrument util in lucrul cu aplicatia KompoZer este Hecate A functia de ajutor (Help), ce ofera informatii si explicatii despre yeu comenzile si optiunile aplicatiei. Se poate apela din meniul Help" (Ajutor) — Help Contents (Continut Ajutor) sau prin apasarea tastei Fl. 3.4 Introducerea si formatarea textului 3.4.1 Introducerea, editarea, stergerea textului Pentru a introduce text intr-o pagina web, se pozitioneaza cursorul in zona dorité, dupa care se tasteaza textul dorit. Editares textului se realizeazé prin selectarea textulul pe care dorifi s8 il modificati si simpla tastare a noului text. Stergerea textului se realizeazd prin selectarea textului si apasarea tastel Delete. 3.4.2 Utilizarea functiei relative pentru marimea fonturilor Folosirea fonturilor cu marime relativa este foarte util dacd dorim sa realizam un website pentru toate tipurile de ecrane. Daca vizualizém un site ce are fonturile de marime 16px pe un telefon mobil, textul se va vedea foarte mare, insd, dacd folosim mérimea “medium”, atunci fontul se va ajusta in functic de mérimea ecranului. Pentru a utiliza fonturi de marime relativa, se selecteazd textul si se apeleazd meniul Format -optiunea Size (Dimensiune). Fon Tesh Help Fonturi de dimensiune ting Ciesion = yt : | Vicaninue Tet Syn CuSKY | is relativé ne | bore vmcsanih cies A | me hae | 3.4.3 Aplicarea de formate asupra textului: bold, italic, tip si culoare: font . Pentru a aplica diverse modificari (numite formatari) textului, se selecteazd textul ce se doreste modificat si se apeleaza meniul Format — optiunea Text Style (Stil text), Cele mai importante formatari ale textului sunt: - Bold (Ingrosat) — aplic textului un format ingrosat - Italic (Cursiv) — aplicd textului un caracter aplecat - Underline (Subliniat) — subliniaza textul cu o linie Steve Too Hep oot Whiting Dieetion Aceste optiuni se regasesc si in bara de instrumente a aplicatiei KompozZer. Variablewith |vi/M- ela Aa l|BI USE Butoane de formatare Comanda Format ~ Text color (Culoare text) sau apasarea butonului din bara de instrumente determina afisarea pe ecran a unei palete de culari, de unde se ‘Selecteaza nuanta dorita. Paleta de culori gre ole Nee 08 Senton 09 owe Nome | | igi | Ove 0 | L in realizarea paginilor web, autorii paginilor web au mai multe optiuni pentru ‘specificarea culorilor pentru diverse elemente ale documentelor web. Culorile pot fi descrise prin coduri RBG (combinatie Red (Rosu), Green (Verde], Blue (Albastru)), in sistem hexazecimal sau cu denumirea in engleza. jn sistemul hexazecimal exista saisprezece nume de culori, fiecare precedata de prefixul hexazecimal (caracterul special #): Nume Hexazecimal Nume Hexazecimal Nume Hexazecimal Nume Hexazecimal aqua blue (URSGUAMEsay fuchsia gray lime maroon, navy purple iy red silver) #06060 teal white #ff2ffE yellow 3.5 Formatarea paragrafelor 3.5.1 Setarea proprietatior paragrafelor: aliniere, indentare Alinierea textului se refer’ la modul fn care sunt aliniate randurile fat& de cel Optiunile de aliniere a textului se gasesc In meni doud margini laterale ale pagi Format — optiunea Align (Aliniere). Font | Sue Tete To coer, “wring Direction Discontinue Teg Sls Chie Shite¥ Desogtinueling —-CeeShitek iamesanchoesCaeShitio Paragraph Lt Optiuni de indentare Incrence indent Decieate na Proper Poge Color and Background. Page Te and Properties. Optiuni de aliniere KompodZer ofera patru variante de aliniere a textului: * Left (Stinga) - aliniaza liniile sau randurile unui paragraf la marginea din stdnga a paginii. La marginea din dreapta sunt create spatii inegale, in functie de lungimea liniilor. © Center (Centru) - afiseaza liniile unui paragraf pe centrul paginii. La stnga sila dreapta textului se creeaz’ spatii egale. Right (Dreapta) ~ aliniaza liniile unui paragraf la dreapta paginii. La marginea din stanga sunt create spatii inegale, in functie de lungimea iniilor. © Justify (Stanga-dreapta} - aliniazd liniile unui paragraf atat la marginea din stnga, cat sila marginea din dreapta a paginil. Spatille dintre cuvinte sunt marite astfel incat linille s8 apars aliniate stanga-dreapta. Optiunile de aliniere sunt disponibile si in bara de instrumente a aplicatiei Variablewieth ov) M2 oa Bl UE = Butoane de aliniere Indentarea textului se referd la distanta dintre text si marginea din stinga sau/si marginea din dreapta a paginii, Indentarea paragrafelor se realizeazi din meniul Format - optiunile ‘* Increase indent (Crestere indentare) - pentru a mari distanta de indentare * Decrease Indent (Scédere indentare) - pentru a micsora distanta de indentare (aceastd optiune este valabilé numai atunci cdnd a fost folosit’ optiuinea Increase indent), 3.5.2 Inserarea, stergerea unel intreruperi de paragraf side linie in mod normal, textul se introduce la nivel de paragraf. Paragrafele se "marcheaz in codul sursé al paginii web prin intermediul tag-ului

    . Aceste tag se hide la inceputul paragrafului si se inchide la finalul acestuia,

    Acesta este un paragrafc/p> << 'n codul sursé, tag-ul

    Acesta este un alt paragrafé/p> _(_delimiteazé paragrafele Pentru stergerea ‘ntreruperii de paragraf, comutati in codul surs al paginii b si stergeti tag-ul

    (si bineinteles si

    ). Atunci cand se doreste introducerea unei linii noi, se apasd tasta Enter si ictul de insertie (bara verticala (|) ce clipeste intermitent) se va deplasa pe linia ‘toare. In codul surs4, intreruperea de paragraf este marcata prin tag-ul
    . In “ML, acest tag nu are tag de inchidere. Pentru stergerea intreruperii de paragraf, comutati in codul surs& al pagin web si stergeti tag-ul
    . Tn codul sursé, tag-ul
    semnificd o intrerupere de linie Acest text contine
    o intrerupere de linie. Rezultatul introducerii unel intreruperi de linie dupa cuvantul “contine” poate fi vizualizat in modul Design (Proiectare): Acest text contine © Intrerupere de linie. 3.5.3 Crearea, mo: singur nivel carea listelor cu marcatori sau numerotare pe Pentru evidentierea paragrafelor in cadrul unei liste, se pot folosi divers simboluri (numite marcatori) sau diverse tipuri de numerotare. Crearea listelor se realizeazd astfel: * Seselecteazd elementele care se doresc a fi introduse fn cadrul listei ® Se apeleazd meniul Format - List (Lista) si se alege tipul de lista dorit Hep Discontinue Tex Sees Chis Shifts tine Link CtobeSbitok BemoveNamed Anchaes Cet-Shitt- Beragreph > Tipuri de liste Numbered disponibile Jem . Detntion st Properties. Rezultatul crearii listelor il puteti vizualiza mai jos: aie Bap * F$oRmet7. Ae cbr Unk re Te fom” tn a1 UES Masini = Baw Fens List cu marcatori + Lanbersist + Mercedes Skoda Motociclete 1. Bw 2. Suni _[ List’ numerotata 3. Honda 4. Apeiia 5, Kawassld Design [ Se | Vizualizarea Design (Proiect) | Toole Hele tiprule= “ eiussusukie 2s Listé numerotata fais Pee Beige | Set| Sous Vizualizarea Source (Sursa) in codul sursi al paginii web se poate observa faptul cd o listé de marcat este delimitaté prin tag-ul ,,
      ”, iar o list numerotatd prin tag-ul ,
        ” 3.6 Formatarea paginii 3.6.1 Stabilirea marginilor paginii: sus, jos, stanga, dreapta Fiecare pagina are patru margini: stanga, dreapta, sus, jos. Pentru ajustare acestora, se apeleazd meniul File (Fisier) - Page Setup (Initializare pagina). tn fil Margins & Header/Footer (Margini & Antet/Subsol) se completeaz’ valorile ir cAmpurile Top (Sus), Bottom (Jos), Left (Stanga), Right (Dreapta) si apoi se apa: butonul OK. ° Format Gt Options | Margins & Hesder/Focter + Margins (inches) C4mpuri pentru stabilirea marginilor 3.6.2 Adaugarea, modificarea, stergerea unei culori sau imagini de fundal a paginii Tn momentul crearii unei pagini web, fundalul acesteia este implicit alb, insa ‘acesta poate fi modificat prin addugarea unei alte culori sau a unei imagini. Pentru modificarea fundalului unei pagini web, se executd click pe meniul Format - Page Colors and Background (Culori si fundal de pagina). in fereastra afisatd pe ecran se bifeaza optiunea Use custom colors (Se folosesc culori personalizate) si $e alege varianta dorita: * Se executd click pe butonut din dreptul campului Background (Fundal). Din paleta de culori, se alege nuanta dorit’. * Se executi click pe butonul ® din dreptul campul Background image (Imagine de fundal), se localizeaza imaginea si apoi se executd dublu click pe aceasta ‘ OK in final, se apasd butonul pentru efectuarea modificarilor. Page Colors (©) Readers defauit color (Don't set colersin pegs) Use custom cavars: Newmattet: ll Normal text Link text Activelinktec: | Ml Ute linkctest | ll Active link text fiackgiound: Background image | Puteti stabi Tr pao mpage anon imagine de fundal Pentru a sterge culoarea de fundal aplicat paginii web, trebuie s8 urm aceeasi pasi si sd alegeti culoarea alba din paleta de culo Pentru a elimina imaginea de fundal aplicata paginii web, in fereastra Pi Colors and Background (Culori si fundal de pagina) eliminati link-ul catre poza caseta Background Image (Imagine de funda). 3.6.3 Modificarea culorii unui hyperlink: vizitat, activ, nevizitat Un hyperlink are trei stéri de baz’ si anume: vizitat, activ si nevizitat. Strategil de webdesign recomand colorarea in mod diferit a celor trei stari pentru a usu procesul de navigare a utilizatorului. Modificarea culorii hyperlink-urilor se face in felul urmator: * Click pe meniul Format - optiunea Page Colors and Background (Culori fundal de pagina) «In fereastra afisaté pe ecran se alege culoarea dorita pentru: ¥ Link text - link nevizitat ¥ Active link text - link activ “Visited link text - link vizitat Page Cale, ——— ———————_-—__—. ©) Reader's default colors (Don't set colar: in page) @ Use custom colors: Culori Activetink text: | Mil hyperlink-uri ised tink tec | Beckgroune: [T=] | Misited link text Background Image | URL i enlative te page location 3.7 Legaturi (Hyperlink-uri) 3.7.1 intelegerea termenilor de hyperlink absolut si relativ Hyperlink-urile dintr-un website pot fi de doud tipuri: absolute si relative. * Hyperlink-urile absolute se utilizeazd atunci cdnd se face referire la pagini aflate in Fa site-ului curent, care au un nume de domeniu diferit. De exemplu, in cazul site- ‘lor de tip magazine online, trebuie s& existe in subsolul website-ului un link c&tre PC (Asociatia Nationalé de Protectie a Consumatorului), care are propriul site. Hyperlink-urile relative reprezint’ legaturile cdtre parti ale site-ului curent, cum ar Jink-urile din bara de navigare care duc catre alte pagini din cadrul aceluiasi site. 3.7.2 Inserarea, editarea, stergerea unui hyperlink de tip text sau imagine Pentru a insera un hyperlink intr-o pagind web, executati click pe meniul Insert serare) — Link (Legdtura) sau folositi butonul “"* din bara de instrumente Puteti utiliza si combinatia de taste Ctrl +L. | (seo erene i | vets | Frere pge ton a a rc >») Introduceti URL-ul catre i i adresa dorita } Introduceti textul afisat | am 2 lH] ies Daci ulterior doriti s& editati link-ul, executati click dreapta pe text si aleget optiunea Link Properties (Proprietati legitur’). Pentru a sterge link-ul asociat textului, selectati textul, executati click dreapt pe el si alegeti optiunea Remove Links (Eliminare legaturi). Inserarea unui link de tip imagine presupune in primul rand inserarea imagi folosind meniul Insert (Inserare] — Image (Imagine). in fereastra afisat8 pe ecran, 7 fila Location (Locatie), se apasd butonul & ain dreptul c&mpului Image Location (Locatie imagine). Se localizeaz’ imaginea si se executa dublu click pe aceasta. bifeaz4 apoi optiunea Don’t use alternate text (Nu se utilizeaza text alternativ). Trot: O Ateratetes: [7 (@ Dont use aternstetent Advanced Edit. Apoi, in tab-ul Link (Legatur&) se tasteazi URL-ul dorit. Emtere eb page nclion alocal fi an ermal adress, or select a Named Anchor or Head fem the popup it re auroaptRudeite ges 5) Thesboveis an erat address [URL izle topagetocation show tender around inked image Advanced te ntie!! Daca fisierul de tip imagine va fi mutat ‘intr-o alta locatie, acesta nu se va ji incSrea in pagina web. Pentru reafisarea imaginii in pagina web, trebuie sé ualizati locatia fisierului. Dacd ulterior doriti s8 editati link-ul, executati click dreapta pe Imagine si sgeti optiunea Image and Link Properties (Proprietati imagine si legatura). Pentru a sterge link-ul asociat imaginii, executati click dreapta pe imagine si .geti optiunea Remove Links (Eliminare legatur). 3.7.3 Inserarea, editarea, stergerea unui hyperlink intre o adres de email $i un text sau o imagine Inserarea, editarea, stergerea unui hyperlink intre o adres de email gi un text sau o imagine se realizeazd exact ca mai sus, cu singura diferenta c& fn locul URL-ului paginii web se va trece adresa de email si se va bifa caseta The above it is an email address (Textul de mai sus este o adresa de email). 3.7.4 Deschiderea unui hyperlink in aceeasi fereastré sau intr-o fereastra noua jn procesul de creare a unui hyperlink, avem posibilitatea s8 alegem daca acesta se va deschide intr-o fereastré noua in acceeasi fereastra. Se recomanda ca ‘hyperlink-urile absolute s& fie deschise in ferestre noi. ‘in fereastra Link Properties (Proprietati legatura) ce se deschide apeland ‘meniul Format - Link Properties (Proprietati legatura) exista in partea de jos sectiunea Target (Tinta). fn aceasta zona se bifeaza optiunea Link is to be open (Legatura se va deschide) si din lista derulanta se alege optiunea dorité (sami window {in aceeasi fereastra) sau new windows (intr-o fereastra noua). 3.7.5 Stabilirea unei ancore (anchor), inserarea unui link cdtre ancora ‘Mai exist’ un alt tip de hyperlink care face legatura ctre o alt& zona a pagi web. Acest tip de hyperlink se numeste hyperlink ancord, iar zona din pagina cit care se face referire se numeste ancord. Daca ati vizitat vreodata o pagina’ web cai avea in partea de jos un link cu textul “inapoi sus”, acesta este un link cétre 0 ancors. Aplicatia KompoZer permite crearea unei ancore prin intermediul butonul ww seer (Ancor’) din bara de instrumente. Astfel: © Executafi click in zona ce va fi folosita drept ancora w © Apasati butonul *=> (Ancord) din bara de instrumente. « fn fereastra Named Anchor Properties (Propriet&ti ancora denumita) tastat numele ancorei (fiecare ancora trebuie si aibd un nume unic). '* Dupa ce dati click pe butonul OK pe ecran apare simbolul unei ancore. Acest simbol nu va fi afisat in cadrul paginii web atunci cand aceasta este vizualizata pe Internet. Dupa crearea ancorei, urmatorul pas consta in inserarea unui link catre ancora respectiva: * Apelati meniul Insert (Inserare) — Link (Legatura). * In fereastra Link Properties (Proprietati legtur8) introduceti in caseta Link Text (Text Legaturd) textul ce va fi afisat sub forma de link, iar din lista derulanta Link Location (Locatie link) selectati numele ancorei (acesta va aparea cu semnul # in fata ‘numelui). auecneriettee nr nb page locaion staf mea rade Rave cher Hesieaieoe areal Numele ancorei in final, se apas& butonul OK pentru confirmare. .8 Tabele 3.8.1 Inserarea, stergerea unui tabel Pentru a insera un tabel, accesati meniul Insert (Inserare) — Table (Tabel) sau ble (Tabel) ~ Insert (Inserare) ~ Table (Tabel). in fila Precisely (Precis) se introduce Aumérul de randuri in campul Rows $i numérul de coloane in campul Columns. Stergerea unui tabel se realizeaz8 prin click dreapta pe tabel ~ Table Dek (Stergere tabel) - Table (Tabel). 3.8.2 Inserarea, editarea unei etichete de tabel Atunci cand inserati un tabel in cadrul unei pagini web, este recomandabil s utilizati o etichet8 descriptiva, pentru a evidentia ce reprezinta informatiile din tabe inserarea unei etichete se realizeaza in felul urmator: * Executati click dreapta pe tabel si alegeti optiunea Table Cell Propertie (Proprietati Tabel) * Executati click pe fila Table (Tabel) si din lista derulanta asociata campul Caption (Eticheta) se alege pozitia etichetei. Bowers and Spacing Boer 1 pie Spacing, 2 | pi betwean cele Ease acme =e fackground Color (bet page coor stows) lectati pozitia etic Tn momentul inserarii unei etichete, se creazi un spatiu liber unde execut: click si tastati numele dorit. Odata introdus’, o eticheta poate fi modificat pri simpla selectare a textului si tastarea noului text de eticheta. 3.8.3 Alinierea unui tabel: stanga, centru, dreapta Alinierea tabelului se realizeaza astfel: ® Executati click dreapta pe tabel si alegeti optiunea Table Cell Properties (Proprietati Tabel) * Executati click pe fila Table (Tabel) si din lista derulant& asociata cdmpul Table Alignment (Aliniere tabel) se alege tipul de aliniere dorit (stang: centru sau dreapta paginii). (728 (Ea) She Rows eof window [9 Gelumnes Widtms 100 | Sof window “Borders and Spacing Bower (1 | pines Spacing: 2 pels between celle Badding: 2 | pivelsbetween cell border and content Table Alignment: Lett _v| Coption: Above Teble Background Coloe| 3.8.4 Inserarea, stergerea randurilor si coloanelor Intr-un tabel deja creat, se pot introduce oricand noi coloane si randuri. Inserarea rndurilor si coloanelor se realizeaza prin click dreapta pe tabel (in zona unde doriti sé inserati coloana sau randul respectiv) si alegerea optiunii Table Insert {inserare tabel). Din lista derulanta alegeti optiunea dorit&: ® Row Above (Rand deasupra) ~ va introduce un rand deasupra randului selectat | * Row Below (Rand sub) - va introduce un rand sub randul selectat © Column Left (Coloana la stanga) — va introduce o coloana fn stanga celei selectate | © column Right (Coloani la dreapta) — va introduce 0 coloand in dreapta celel L_ selectate Vi ‘Join with Celt the Right Table or Cel Beckground Color Cotsen After Stergerea coloanelor sia randurilor este un proces foarte simplu, ce se realizeaz8 prin click dreapta pe randul sau coloana dorit3, alegerea optiunii Tabel Delete (Stergere tabel) si selectarea optiunii dorite: * Table—va sterge intregul tabel Row (s) — va sterge randul sau randurile selectate Column (s)—va sterge coloana sau coloanele selectate Cell (s) va sterge celula sau celulele selectate Cell Contents Del — va sterge doar continutul celulelor selectate Table Ronis) Eglumnis) cos) Cell Contents Je 3.8.5 Modificarea latimii coloanelor si inaltimii randurilor Modificarea latimii coloanelar si indltimii réndurilor se realizeaza prin cli dreapta pe tabel si alegerea optiunii Table Cell Properties (Propriet&ti Tabel). in fils Table (Tabel), sectiunea Size (Dimensiune}, se introdue valorile in campul Heigt (in<ime) (pentru rénduri) si Width (Latime) (pentru coloane). Unitatea de masu poate fi exprimata in pixeli sau procentual, din dimensiuena ferestrei. pscng 2 paloatneen cal ell 2 peainean ellie and cotant Teeatgren: (int [| Coon [aerate 1 Background Calor Letpagecelershontheowst | 3.8.6 imbinarea, scindarea celulelor tmbinarea celulelor se realizeazd meniului Table (Tabel) - Join Selected Cel fic singura celula, de dimensiuni mai mari. in selectarea celulelor dorite si apelares (imbinare celule selectate). Rezultatul Scindarea unei celule se realizeazd prin selectarea ei si apelarea meniului Table fabel) - Split Cell (Scindare celula). 3.8.7 Modificarea grosimii liniilor unui tabel, a distantei dintre celule sia distantei dintre marginile celulelor si textul din cadrul acestora Proprietatile tabelului se pot modifica in fereastra Table Cell Properties roprietati Tabel), deschisé cu click dreapta pe tabel. In fila Table (Tabel), sectiunea ders and Spacing (Borduri si spatiere) se modifica urmatoarele caracteristici: © Border -reprezintd grosimea liniilor tabelului © Spacing - reprezint’ spatierea liniilor tabelului * Padding - reprezintd distanta dintre marginea celulei si textul din cadrul acesteia, 3.8.8 Modificarea culorii de fundal si stergerea culorii de fundal celulelor sau a intregului tabel Anumite celule, randuri si coloane dintr-un tabel pot fi evidentiate diferit de restul tabelului prin aplicarea unei culori de fundal, Pentru a modifica culoarea fundal a tabelului executati click dreapta pe tabel si alegeti optiunea Table or Background Color (Culoare fundal tabel sau celula). Bifati optiunea Table (Tabel) din paleta de culori alegeti nuanta dorité HE Lampicted ener Hic = Far nek [ae Hex 80080 g smumion 33 ues THY dime: igh: 24 J the 1 Taner Cope] Loe Modificarea cularii de fundal a unei celule se realizeazd in acelasi mod, singure diferent’ c3, in fereastra Table or Cell Calor (Culoare tabel sau celuld) selecteazd optiunea Cell (Celula). Pentru a sterge culoarea de fundal a unei celule sau a unui tabel, in fereast Table or Cell Color (Culoare tabel sau celul3) se bifeaz’ optiunes doritd (Table (Tal — dac doriti si modificati culoarea de fundal a intregului tabel sau Cell (Celula) dac vreti s8 modificati culoarea de fundal a unei celule) si alegeti culoarea alb’ paleta de culori. fn final, apasati butonul OK pentru confirmare. 3.8.9 Adaugarea, stergerea fundalului un tabel (grafic sau imagine) G alta posibilitate de evidentiere a unui tabel in cadrul unei pagini web consta ‘in adaugarea unei imagini de fundal pentru acesta Tn vizualizarea Design (Proiectare), executati click dreapta in bara de stare a itiei KompoZer pe tag-ul si alegeti optiunea Inline styles. In fila round (Fundal) executati click pe butonul Choose file (Alegere fisier). in reastra Select Image File (Selectare Fisier Imagine) se localizeaz’ imaginea si se eaz prin dublu click. In zona Position (Pozitie} se aleg optiunile de pozitionare aginii in cadrul tabelului pe orizontala si verticala. Cimargarete png horizontally and vertically image scrolls withthe page Position: teh @ Center O Right le pozitionare

        You might also like