Fiecare designer și programator web are nevoie de un editor bun de pagini web pentru a crea și edita codul HTML, CSS și JavaScript. Notepad (Windows) și TextEdit (Mac) sunt instrumente excelente pentru a începe, dar pe măsură ce veți obține mai multă experiență, veți dori să utilizați un instrument mai solid și mai convenabil.
Există sute de editori grozavi din care să alegeți, dar mulți dintre ei sunt plătiți. Și dacă nu doriți să încălcați drepturile de autor, dar bugetul nu are fonduri pentru achiziționarea unui produs comercial? Acest articol acoperă mai multe editori gratuiti excelente.
- Editori WYSIWYG. Acestea sunt editori grafici care vă permit să construiți un aspect de pagină și să setați stiluri vizual, ca în binecunoscutul procesor de text MS Word. Sunt un instrument la îndemână pentru construirea designului paginii, deși, așa cum știe orice designer web cu experiență, codul trebuie încă „pieptănat” pentru a obține un rezultat excelent.
- Editori de text. Este un instrument pentru editarea directă a codului HTML și CSS. Unele editori sunt de uz general și nu au opțiuni speciale pentru suport pentru codul web. Alții sunt specializați în utilizarea limbilor web precum HTML, CSS, JavaScript și PHP și au proprietăți încorporate pentru introducerea rapidă a etichetelor HTML, proprietăților CSS și așa mai departe. Multe dintre aceste editoare vă permit să vizualizați o pagină web într-o fereastră separată.
Compozer (Windows, Mac, Linux)
KompoZer este o alegere excelentă dacă aveți nevoie de un editor vizual cu un buget redus
Komodo Edit este un editor bun, ușor de învățat, dar puternic și extensibil
Deși este un editor de uz general, acceptă HTML și CSS și are completarea automată contextuală a etichetelor HTML și a proprietăților CSS, precum și o colecție de încorporare de cod pentru diferite elemente HTML. Pentru a profita la maximum de utilizarea Komodo, trebuie să instalați extensia HTML Toolkit, care conține funcții minunate precum etichete de închidere automată, previzualizare CSS și un generator de text temporar.
Komodo Edit vă permite să vizualizați paginile editate în orice browser instalat sau să utilizați browserul încorporat într-o fereastră separată, astfel încât să puteți edita și să vedeți rezultatul modificărilor în același timp.
Editorul are o funcție încorporată pentru încărcarea fișierelor pe site (FTP, FTPS, SFTP sau SCP) și, de asemenea, vă puteți grupa fișierele într-un mod distractiv folosind opțiunea de manager de proiect.
Funcție foarte utilă Cod > Selectați Blocare. Evidențiază blocul principal curent al HTML, cum ar fi elementul div închis sau ul curent. O caracteristică foarte utilă atunci când trebuie să selectați o întreagă secțiune pe o pagină pentru a o copia sau a muta.
Komodo Edit are o mulțime de funcții puternice și utile, cum ar fi utilizarea expresiilor regulate pentru căutare/înlocuire, capacitatea de a executa comenzi externe și așa mai departe. Din fericire, editorul are, de asemenea, un sistem de ajutor bun care facilitează stăpânirea puterii Komodo Edit.
Aptana Studio (Windows, Mac, Linux)
Aptana Studio este un mediu complet integrat de dezvoltare a aplicațiilor web, cu o gamă largă de pluginuri. Deși îl puteți folosi doar ca editor de cod HTML/CSS/JavaScript
Notepad++ este un înlocuitor excelent pentru Notepad din Windows. Deși nu are același set de opțiuni ca și alți editori, este excelent pentru editarea fișierelor HTML, CSS, JavaScript și alte coduri.
PSPad este un alt editor de uz general pentru Windows, cu un set mare de caracteristici utile pentru codificatoarele HTML și CSS
jEdit este un editor de text multiplatformă cu funcții puternice de comandă macro și plugin. Instalați pluginul XML dacă trebuie să editați pagini web
TextWrangler este un editor ușor de uz general. În ciuda lipsei de caracteristici speciale pentru dezvoltarea web, poate fi folosit pentru a lucra cu pagini web.
Vim este cu siguranță greu de învățat, dar odată ce treci peste asta, nu vei mai dori să te întorci!
Bunicul editorilor de text pentru programatori Vim (un descendent direct al editorului vi) este un editor de text pentru consolă open source. Este instalat ca editor implicit pe aproape toate versiunile Unix, inclusiv Linux și Mac OS X. Un editor este, de asemenea, disponibil pentru utilizare pe Windows și multe alte sisteme.
Vim nu este un sistem pe care să-l instalați și să începeți să-l utilizați imediat, fără să vă ocupați niciodată de el. Majoritatea comenzilor de editare includ combinații ciudate precum :wq și / . De asemenea, are trei moduri de editare: mod inserții, în care este introdus text; vizual mod de evidențiere a textului; Și comanda modul de introducere a comenzilor. Această funcționalitate este o moștenire a Unix din zilele în care nu existau ferestre sau mouse-uri.
De ce este pe listă? Dacă îl stăpânești, atunci te vei convinge de viteza și puterea lui. Cu câteva comenzi, poți face în câteva secunde ceea ce poate dura câteva minute în alte editoare.
Există un număr mare de macrocomenzi și plugin-uri Vim care facilitează lucrul cu codul HTML, CSS și JavaScript, inclusiv evidențierea sintaxelor, completarea automată, HTML Tidy și navigarea într-un browser. Iată o listă mare de link-uri utile:
- Completare automată Vim Omni
- Editare HTML/XHTML în Vim
- pagina principala
Fraise (Mac)
Fraise este un editor intuitiv pentru Mac cu suficiente funcții pentru editarea web
La fel ca TextWrangler și gedit, Fraise este un editor ușor minunat, care este o plăcere de utilizat. Este o furcă a editorului. Este relativ nou și nu are un server web adecvat. În prezent, este acceptat doar pe Mac OS X 10.6 (Snow Leopard), ceea ce înseamnă că dacă utilizați versiunea 10.5, va trebui să descărcați Smultron.
Fraise are câteva opțiuni grozave pentru editarea web:
- Evidențierea codului pentru HTML, CSS, JavaScript, PHP și alte câteva limbaje de programare.
- Comanda Close Tag(Command-T) pentru a închide eticheta curentă. Acest lucru economisește cu adevărat timp atunci când introduceți liste.
- Previzualizare convenabilă în browserul încorporat (folosind WebKit), cu o opțiune Live Update foarte la îndemână? care actualizează browserul de îndată ce marcajul și CSS-ul de pe pagina editată s-au schimbat.
- O opțiune de căutare avansată care acceptă căutarea/înlocuirea folosind expresii regulate.
- Suport pentru blocuri pentru a introduce rapid etichete HTML și proprietăți CSS.
- Câteva comenzi utile pentru manipularea textului, cum ar fi validarea HTML și conversia caracterelor în elemente HTML.
Fraise merită explorat dacă sunteți pe un Mac și aveți nevoie de un editor ușor de utilizat, cu mai multe funcții decât TextEdit încorporat.
1 nivel
Exercitiul 1
Alege răspunsul corect.
Ce înseamnă numele World Wide Web?(www – Lume Lat Web?
1. Numele rețelei globale de calculatoare.
2. Numele serverului unde sunt stocate paginile Web.
3. Un set de reguli care guvernează prezentarea și transmiterea informațiilor pe Internet.
4. Denumirea serviciului de Internet implicat în stocarea și transmiterea documentelor hipertext multimedia.
Sarcina 2
Alege răspunsul corect.
Ce este o pagină web?
1. Un document care conține text, grafică, sunet, video și hyperlinkuri către alte documente, a căror structură este descrisă în HTML.
2. Orice document hipertext care conține text, grafică, sunet, video și hyperlinkuri.
3. Stocarea informatiilor multimedia
4. Serviciu de internet pentru stocarea și transmiterea documentelor hipertext multimedia
2 nivel
Sarcina 3
Alege răspunsul corect.
Care este scopul unui program de browser?
1. Acesta este un program universal pentru accesarea resurselor de informații de pe Internet, în primul rând pentru vizualizarea documentelor hipertext pe World Wide Web.
2. Browserul vă permite doar să lucrați cu e-mail.
3. Browserul scanează doar documente hipertext, care sunt pagini Web
Sarcina 4
Adăugați o sugestie:
Hypertext Document Markup Language este folosit pentru a crea site-uri web.
Sarcina 5
Listați editorii de design vizual cunoscuți.
_____________________________________________________________________________
Sarcina 6
Care este numele codului HTML cuprins între paranteze unghiulare?
__________________________________________________________________________
Sarcina 7
Priviți textul documentului HTML și răspundeți la întrebări:
DAR. Ce culoare de fundal și text vor fi pe pagina web?
B. Când se afișează titluri pe o pagină web, acestea scad sau cresc în dimensiune?
Sarcina 8
Ce este eticheta de paragraf?
Sarcina 9
Cum să setați fundalul și culoarea întregii pagini?
Sarcina 10
Ce etichetă afișează o imagine pe o pagină web?
3 nivel
Sarcina 11
1. Folosind materialele pentru acest test, creați pagina principală a site-ului care conține meniul (cuprins). (Pentru a așeza ordonat textele și graficele, este mai bine să folosiți tabele).
Poza 1
al 4-lea nivel
Sarcina 12
Folosind materialele pentru acest test, creați 5 pagini web:
Pagina web „Vityaz” (fișier vitaz. htm), așa cum se arată în Figura 2;
Pagina web „Vistan” (fișier vistan.htm)
Pagina web „VZEP” (fișier vzep.htm)
pagina web „NAFTAN” (fișier naftan.htm)
pagina web „POLYMIR” (fișier polimir.htm)
Figura -2
nivelul 5
Sarcina 13
Trimiteți-vă munca bună în baza de cunoștințe este simplu. Utilizați formularul de mai jos
Studenții, studenții absolvenți, tinerii oameni de știință care folosesc baza de cunoștințe în studiile și munca lor vă vor fi foarte recunoscători.
Documente similare
Limbajul de programare HTML: capabilitățile sale multimedia și grafice. Cerințe pentru proiectarea și crearea de site-uri web. Evoluții metodologice pentru studiul „Web design” în cadrul cursului școlar de informatică și tehnologii informației și comunicațiilor.
lucrare de termen, adăugată 09.12.2012
Analiza documentației educaționale și metodice. Metode de proiectare a unui sistem de lecții pe tema. Caracteristicile proiectării mijloacelor de control tematic. Analiza structural-logică a materialului educațional. Elaborarea unui plan de lecții de predare teoretică.
lucrare de termen, adăugată 21.05.2015
Caracteristicile psihologice ale creativității copiilor. Relația dintre joacă și designul copiilor. Diverse forme de organizare a învățării menite să depășească neajunsurile designului spontan al copiilor. Caracteristici specifice ale designului pentru copii.
lucrare de termen, adăugată 24.06.2011
Caracteristici ale predării elevilor cu deficiențe de auz. Specificul predării elevilor a tehnologiilor de creare a hipertextului. Elaborarea unui program pentru predarea școlarilor din clasa a XI-a cu deficiențe de auz a tehnologiilor de creare a paginilor Web folosind limbajul HTML.
teză, adăugată 25.04.2011
Educația ca fenomen sociocultural, caracteristicile modelelor sale. Modalităţi de construire şi structurare a conţinutului acestuia. Principalele elemente ale educației ca instituție de învățământ specifică. Proprietățile sistemului modern de învățământ.
test, adaugat 25.03.2010
Tablă interactivă ca instrument multimedia, utilizarea sa în predarea disciplinelor tehnice în facultate. Dezvoltarea metodică a orelor la disciplina „Proiectare și producție de echipamente auto”. Tehnologia de dezvoltare a lecțiilor.
teză, adăugată 13.06.2011
Studierea istoriei artei origami. Cunoașterea recomandărilor educaționale și metodologice pentru implementarea produselor în tehnica origami în școala elementară. Luarea în considerare și analiza procesului de modelare și proiectare pe hârtie la etapa inițială.
teză, adăugată 24.09.2017
lucrare de control, adaugat 16.11.2013
Când vine vorba de editorii de cod, uneori este greu să obțineți o imagine de ansamblu clară a tuturor beneficiilor și funcționalităților pe care diferiți editori le au de oferit. Cu toate acestea, cel puțin unul este necesar până la urmă, așa că este important să știi care editor se potrivește cel mai bine nevoilor tale personale.
Editorii WYSIWYG sunt adesea criticați de artizani pentru codul sursă umflat, dezordonat și incompatibil cu standardele pe care îl produc. Cu toate acestea, editorii WYSIWYG s-au îmbunătățit mult în ultimul timp. Uneori trebuie să le oferi clienților cele mai simple instrumente pentru a-și edita sau actualiza site-urile web. Și aici editorii WYSIWYG sunt indispensabili.
Ar fi greșit să vă recomand câțiva dintre cei mai „mai buni” editori, pentru că alegerea depinde întotdeauna de nevoile, obiectivele principale, abilitățile și experiența dumneavoastră. Prin urmare, în acest articol am încercat să vă oferim o imagine de ansamblu asupra editorilor diferiți, folositori și nu atât de WYSIWYG.
Sperăm că veți găsi editori noi despre care nu ați auzit până acum. Sau poate găsiți unele funcții pe care le-ați ratat în editorul dvs. preferat sau îndrăzniți să experimentați cu o serie de opțiuni promițătoare pentru a vă îmbunătăți fluxul de lucru. În plus, poți afla ce editori poți folosi și ce instrumente nu ar trebui să folosești.
Ce înseamnă WYSIWYG?
În astfel de editori, puteți modifica nu codul sursă al documentelor dvs., ci reprezentarea acestuia, care (dacă este posibil) va fi publicat în documentul final. Deci, în loc să scrieți blocuri de cod manual, gestionați designul cu componente folosind fereastra editorului. Aceasta înseamnă că vedeți ceva foarte asemănător cu rezultatul final, deși documentul sau imaginea este încă în curs de creare.
Notă: Acest articol analizează doar editorii WYSIWYG de pe desktop care rulează pe Windows, Linux sau Mac și nu examinează editorii WYSIWIG JavaScript.
Adobe Dreamweaver
Fost un produs Macromedia, Dreamweaver este unul dintre cele mai utilizate editori care îi poate ajuta pe dezvoltatori să-și îmbunătățească fluxul de lucru și să economisească mult timp la codificare. În timp ce versiunile anterioare de Dreamweaver generau uneori cod sursă ciudat, cea mai recentă versiune poate genera (în majoritatea cazurilor) un marcaj complet curat.
Dreamweaver oferă, de asemenea, diverse instrumente utile, cum ar fi biblioteci de fragmente de cod, management ftp, server de depanare și codare integrată. De exemplu, puteți vizualiza informațiile CSS într-un singur panou CSS unificat, ceea ce face mai ușor să vedeți stilurile aplicate unor elemente specifice, să determinați unde sunt definite atributele și să editați stilurile existente. Vedeți și lista noastră de tutoriale Dreamweaver. Preț: 400 USD (versiunea CS3).
Unele dintre numeroasele caracteristici ale Dreamweaver:
* Editare CSS avansată
* Mediu de codificare integrat
* Cadru Spry pentru Ajax
* Verificați compatibilitatea browserului.
* Integrare cu Photoshop CS3 și Fireworks.
* Fragmente de cod (cum ar fi formatele CSS)
* Gestionare FTP
* Suport XML
* Suport FLV
* Resurse de învățare (de exemplu, Adobe CSS Advisor)
* Numeroase extensii pentru Dreamweaver.
Amaya
Scopul principal al Adobe Contribute este de a permite editarea de site-uri web și bloguri pentru utilizatorii fără cunoștințe tehnice. Contribute CS3 permite autorilor să actualizeze site-urile și blogurile existente, menținând în același timp integritatea site-ului. Contribute oferă integrarea Dreamweaver, găzduire cu Microsoft Office și editare din IE 7 și Firefox.
Cu acest editor WYSIWYG, autorii pot edita sau actualiza orice site web sau blog fără a fi nevoie să învețe HTML. Preț: 169 USD (versiunea CS3).
Adobe Live
În aprilie, Adobe a încetat să mai dezvolte și să vândă GoLive 9. Adobe GoLive încurajează utilizatorii să treacă la Dreamweaver, după care probabil că nu ar trebui să recomandați GoLive (de fapt, un instrument de editare surprinzător de puternic, (vezi mai jos) pentru clienții tăi.
Câteva caracteristici ale Adobe GoLive 9:
* Stiluri de designer
* Aspect vizual CSS
* Plasați comanda
*Integrare Adobe InDesign®
* Gestionarea culorilor
* Suport platformă
* Instrumente de management al site-ului
* Publicare server
* Obiecte inteligente
Microsoft Expression Web
La un moment dat, puternic criticat pentru editorul său web foarte prost (Frontpage), Microsoft a creat recent un editor, Expression, care pare să moștenească mult de la predecesorii săi. Expression a încercat să creeze un mediu confortabil pentru utilizatorii de Internet, cu caracteristici extrem de asemănătoare cu Adobe Dreamweaver. Cu toate acestea, într-o comparație directă, Dreamweaver oferă mai mult și produce cod mai curat. Cu toate acestea, Expression produce cod decent, compatibil cu standardele și știe cum să lucreze cu aspecte CSS și CSS.
Ediția studio cu alte aplicații software (instrument de design grafic, instrument de codificare video etc.) costă aprox. 500 USD. Licența One Expression costă 350 USD. Puteți obține Expression actualizând Frontpage și economisiți bani. Versiunea de încercare pentru 60 de zile poate fi descărcată gratuit, dar este necesară înregistrarea.
Vă rugăm să rețineți: Expression nu este un succesor al Frontpage, acestea sunt instrumente de dezvoltare destul de diferite. Microsoft Expression este mai asemănător cu Microsoft SharePoint Designer, este mai mult un designer concentrat și care vizează dezvoltarea web generală. Microsoft SharePoint Designer se concentrează pe dezvoltarea și adaptarea la site-uri bazate pe SharePoint, poate fi considerat fratele mai mare al Frontpage.
Câteva caracteristici ale Microsoft Expression:
* Integrare ASP.NET 2.0
* Redare CSS avansată
* XPath Expression Builder
* Creați și formatați vizualizări ale datelor XML standard din industrie
* Etichetați grila proprietăților
* Verificarea accesibilității
* Validarea standardelor în timp real
* Suport complet pentru schema
Unele dintre caracteristicile NVU:
* Site Manager vă permite să vizualizați site-urile pe care le creați.
* Suport XML.
* Validator încorporat.
Compozitor
Este succesorul Microsofts Frontpage. SharePoint Designer este un editor WYSIWYG standard. În afară de suportarea paginilor interactive ASP.NET, nu oferă nimic revoluționar. Versiune de probă gratuită disponibilă. Există o versiune online care necesită Internet Explorer și multă răbdare.
Unele dintre caracteristicile Sharepoint:
* suport pentru pagini interactive ASP.NET
* creați vizualizări de date din RSS, XML, Office XML
* colaborați cu Workflow Designer încorporat
* Instrumente CSS
* urmărirea paginilor personalizate
* verificator ortografic
* Integrare SharePoint Server 2007
BAZELE DESIGNULUI WEB
§ 1. Introducere în web design
1.1 Instrumente și tehnici de dezvoltare a site-urilor web
Pe scurt despre principalele:
Există două grupuri principale de metode și instrumente corespunzătoare pentru dezvoltarea site-urilor web: vizualȘi manual. Metodele manuale (software) de proiectare web necesită cunoașterea limbajului de marcare HTML. Metodele vizuale vă permit să faceți toată munca de creare a paginilor web cu un grad ridicat de automatizare și nu necesită cunoaștere a limbajului de marcare HTML, reduc complexitatea și timpul de dezvoltare a site-ului.
La crearea site-urilor web, pot fi folosite instrumente speciale - editori de design vizual. De exemplu: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor etc. Cu ajutorul unor astfel de editori, paginile web sunt create interactiv, iar cele corespunzătoare cod HTML, care este un set de comenzi pentru limbajul de marcare HTML.
Pagini statice sunt afișate de browserul utilizatorului în forma în care au fost create și plasate pe serverul web. Pagini dinamice sunt generate la cererea utilizatorului - informațiile sunt încărcate pe ele de programele server din baze de date.
1.2 Design site
determinarea subiectului site-ului, a scopurilor și obiectivelor acestuia;
proiectarea structurii site-ului, definirea secțiunilor și legăturilor între pagini;
dezvoltarea designului site-ului web, de ex. stilul paginii;
pregătirea materialelor (texte și grafice) pentru plasarea pe pagini web;
proiectarea paginilor site-ului (crearea codului HTML);
plasarea în rețea (publicarea) și testarea site-ului.
Există următoarele etape principale ale dezvoltării site-ului web:
Un stil de proiectare a unei pagini web este o combinație de proprietăți ale elementelor paginii web: stil text (un set de parametri de format de caracter și paragraf) și un stil de element grafic (un set de parametri de formular).
Exercitiul
Creați un proiect de site web pe unul dintre subiectele: Familia mea. Scoala mea. Prietenii mei. Activitățile mele preferate. Patria mea este Belarus. Natura pământului natal. Profesii interesante.
Tehnologia de dezvoltare:
Când dezvoltăm un proiect de site web, vom adera la etapele dezvoltării site-ului web.
Să luăm primul dintre subiectele propuse: Familia mea.
Scop: Povestește despre familia ta.
Sarcini: spuneți despre fiecare membru al familiei (nume, vârstă, ocupație, preferințe).
Pentru claritate, vom descrie structura sitului sub forma unei scheme pe două niveluri (Fig. 1.2.1). La primul nivel, vom pune numele site-ului, o fotografie a fiecărui membru al familiei și hyperlink-uri.
La al doilea nivel al schemei, vom reprezenta pagini web dedicate fiecărui membru al familiei cu informații despre fiecare dintre ei (Fig. 1.2.2).
orez. 1.2.2
Vom proiecta site-ul. Principalele elemente structurale ale designului paginii (blocuri de text) și obiecte grafice (imagini de logo pentru pagina principală, fotografii ale membrilor familiei, „tapet” (imagini de fundal), hyperlinkuri text). Pentru a plasa elemente în locurile date de pe pagină, vom folosi tabele (Fig. 1.1 și Fig. 1.2).
Dezvoltarea proiectelor site-ului pe alte teme se poate realiza conform schemei indicate mai sus.
§ 2. Utilizarea aplicaţiilor de birou pentru a crea pagini web
2.1 Crearea paginilor web în MS Word
Pe scurt despre principalele:
Exercitiul
Creați un fragment de site pe unul dintre subiecte: Patria mea este Belarus. Scoala mea. Prietenii mei. Activitățile mele preferate. Familia mea (un exemplu al paginii principale este prezentat pe eșantion). Ca hyperlinkuri, utilizați imagini din colecția de clipuri.
probă
executa comanda Fișier - Creare;
selectați elementul Pagină web;
executa comanda Format - Subiect;
alege o temă Straturi.
Introduceți text și imagini așa cum se arată în fig. 2.1.1:
orez. 2.1.1
pentru a insera imagini din colecția de clipuri, utilizați comanda Inserare - Desen - Imagini;
formatați dimensiunea imaginii cu comanda Format – Imagine…- fila mărimea(Fig. 2.1.2).
orez. 2.1.2
executa comanda Fișier - Creare;
selectați elementul Pagină web;
executa comanda Format - Subiect;
alege o temă Chiparos.
completați pagina web cu informații (exemplu: Fig. 2.1.3);
Creați pagini web de nivel al doilea mama.mht, papa.mht, iam.mht:
orez. 2.1.3
selectați imaginea (textul) - Inserare - Hyperlink…;
în câmp Pliant selectați fișierul corespunzător (mama.mht);
dacă este necesar, modificați textul indicației sau introduceți text;
repetați pașii, pe baza paragrafelor 5a) -5d), pentru restul hyperlink-urilor.
asemanator paragrafelor. 4a)-4f) creați pagini web papa.mht și iam.mht.
Pe pagina web principală a fișierului family.mht, creați hyperlinkuri către paginile web corespunzătoare:
Prezentările pe temele indicate în exercițiu trebuie efectuate în mod similar paragrafelor. 1-6.
2.2 Salvați prezentările PowerPoint ca pagini web
Pe scurt despre principalele:
Puteți salva o prezentare PowerPoint ca pagină web făcând următoarele: selectați meniul Fişier- selectați un articol Salvați ca pagină web- La fereastră Salvarea unui document Pagină web (*.htm, *. html) – introduceți un nume de fișier – apăsați butonul salva.
Setările paginii web pot fi configurate în fereastră Publicarea paginii web la apasarea unui buton Publica. În această fereastră, puteți selecta obiectele de publicat ( Prezentare completă sau Diapozitive), suport pentru browser, modificați antetul tabelului.
Exercitiul
Creați un fragment de site pe baza prezentării terminate:
a) „Curentul electric”;
b) „Figuri spațiale”;
c) „Animale din țara natală”;
d) „Dispozitive optice”.
Tehnologia de creație:
Deschideți un fișier sugerat de profesor cu o prezentare pe unul dintre subiectele specificate.
Salvați prezentarea ca pagină web: Fişier- selectați elementul Salvați ca pagină web- La fereastră Salvarea unui document selectați tipul de fișier care trebuie salvat Pagină web (*.htm, *. html) – introduceți numele fișierului (sau lăsați-l pe cel precedent) – apăsați butonul salva.
Modificați setările și parametrii documentului web în timp ce salvați prezentarea: faceți clic pe butonul Publica(Fig. 2.2.1)
orez. 2.2.1
Personalizați efectele de culoare: în fereastră Publicarea paginii web apasa butonul Opțiuni web(Fig. 2.2.2) - tab general - alege o schemă de culori Culori de prezentare(Fig. 2.2.3) - dacă există hyperlinkuri în prezentare, atunci debifați caseta Adăugați bara de tranziție pentru diapozitive – Ok - Publicați.
orez. 2.2.2
poza 2.2.3
Vizualizați un fragment de site salvat într-un browser.
§ 3. Fundamentele limbajului de marcare HTML.
3.1 Crearea unui document HTML în editorul Notepad
Pe scurt despre principalele:
Paragraful este stabilit de etichetă
Când sunt vizualizate într-un browser, paragrafele sunt separate unul de celălalt printr-o linie goală. Pentru a forța o nouă linie fără a crea un paragraf, se folosește o etichetă neîmperecheată
.
Stilul caracterelor aldine este stabilit de etichetă , caracterele italice sunt specificate de eticheta i.
Culoarea de fundal a întregii pagini este setată de atributul bgcolor, iar culoarea textului de atributul text.
O etichetă este utilizată pentru a seta fontul, culoarea și dimensiunea caracterelor. Fontul este specificat de atributul face, a cărui valoare este numele fontului, cum ar fi Arial. Mărimea simbolurilor este stabilită de atributul dimensiune și poate fi exprimată în unități arbitrare, care pot lua valori de la 1 la 6. Culoarea simbolurilor este stabilită de atributul de culoare.
Exercitiul
Deschideți documentul text sugerat de profesor în editorCaiet . Proiectați-l și salvați-l ca pagină web afișată într-una dintre imagini. Utilizați Anexa 2 pentru a crea culoarea de fundal.
proba 1
Tehnologie de design:
Deschideți documentul text sugerat de profesor în editor Caiet(Fig. 3.1.1).
orez. 3.1.1
etichete pentru deschiderea și închiderea unui document HTML (-);
etichete pentru plasarea informațiilor de serviciu care nu sunt afișate pe pagină (-);
etichete cu text pentru informații afișate în titlul ferestrei browser (Eșantion 1);
etichete pentru plasarea informațiilor afișate în browser (-
Adăugați la document (Fig. 3.1.2):
