Gerenommeerde visuele ontwerp-editors. Een overzicht van webdesign. Raak de top tien

BASISINFORMATIE VOOR WEBONTWERP

§ 1. Concept van webdesign

1.1 Hulpmiddelen en technieken voor website-ontwikkeling

Kort over het belangrijkste:

Er zijn twee hoofdgroepen van methoden en bijbehorende hulpmiddelen voor website-ontwikkeling: visueel en handleiding... Handmatige (programmatische) webconstructietechnieken vereisen kennis van de HTML-opmaaktaal. Visuele methoden maken het daarentegen mogelijk om al het werk aan het maken van webpagina's uit te voeren met een hoge mate van automatisering en vereisen geen kennis van de HTML-opmaaktaal.Ze verminderen de complexiteit en tijd van website-ontwikkeling.

Bij het maken van websites kunnen speciale tools worden gebruikt - visuele ontwerpeditors. Bijvoorbeeld: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor, etc. Met behulp van deze editors worden webpagina's in interactieve modus gemaakt, terwijl de bijbehorende HTML code, wat een set HTML-opmaaktaalopdrachten is.

Statische pagina's weergegeven door de browser van de gebruiker in de vorm waarin ze zijn gemaakt en op de webserver zijn geplaatst. Dynamische pagina's worden gegenereerd op verzoek van de gebruiker - informatie erover wordt geladen door serverprogramma's uit databases.

1.2 Site-ontwerp

Er zijn de volgende hoofdfasen van websiteontwikkeling:

• bepaling van het onderwerp van de site, de doelen en doelstellingen ervan;

  het ontwerpen van de sitestructuur, het definiëren van secties en koppelingen tussen pagina's;

  ontwikkeling van website-ontwerp, d.w.z. stijl van pagina-indeling;

  voorbereiding van materialen (teksten en grafische afbeeldingen) voor plaatsing op webpagina's;

  ontwerp van webpagina's (creatie van HTML-code);

  plaatsing op het netwerk (publicatie) en testen van de site.

De stijl van een webpagina wordt opgevat als een combinatie van eigenschappen van elementen van een webpagina: een tekststijl (een set parameters voor de opmaak van tekens en alinea's) en een stijl van grafische elementen (een set vormparameters).

De oefening

Ontwerp een website rond een van de thema's: Mijn familie. Mijn school. Mijn vrienden. Mijn favoriete dingen om te doen. Mijn moederland is Wit-Rusland. De aard van het geboorteland. Interessante beroepen.

Ontwikkelingstechnologie:

Bij het ontwikkelen van een websiteproject houden we ons aan de stadia van websiteontwikkeling.

Laten we het eerste van de voorgestelde onderwerpen nemen: Mijn familie.

Doel: vertellen over je familie.

Doelstellingen: Vertel over elk gezinslid (naam, leeftijd, beroep, voorkeuren).

Voor de duidelijkheid zullen we de structuur van de site weergeven in de vorm van een schema met twee niveaus (Fig. 1.2.1). Op het eerste niveau plaatsen we de naam van de website, een foto van elk gezinslid en een hyperlink.

Op het tweede niveau van het diagram zullen we webpagina's weergeven die aan elk gezinslid zijn gewijd met informatie over elk van hen (Fig. 1.2.2).

rijst. 1.2.2

We gaan een website-ontwerp maken. De belangrijkste structurele elementen van het pagina-ontwerp (tekstblokken) en grafische objecten (foto's-logo's voor de hoofdpagina, foto's van familieleden, "wallpaper" (achtergrondafbeeldingen), teksthyperlinks). Om de elementen op de aangegeven plaatsen op de pagina te plaatsen, gebruiken we tabellen (Fig. 1.1 en Fig. 1.2).

Ontwikkeling van websiteprojecten over andere onderwerpen kunnen worden uitgevoerd volgens het hierboven aangegeven schema.

§ 2. Kantoortoepassingen gebruiken om webpagina's te maken

2.1 Webpagina's maken in de MS Word-editor

Kort over het belangrijkste:

De oefening

Maak een sitefragment over een van de onderwerpen: Mijn moederland - Wit-Rusland. Mijn school. Mijn vrienden. Mijn favoriete dingen om te doen. Mijn familie (een voorbeeld van de hoofdpagina wordt getoond in het voorbeeld). Gebruik afbeeldingen uit de Clipgalerij als hyperlinks.

steekproef

1. commando uitvoeren Bestand - Aanmaken;

   selecteer item Webpagina;

   commando uitvoeren Formaat - Onderwerp;

   kies een thema voor decoratie Lagen.

Voeg tekst en afbeeldingen toe zoals getoond in fig. 2.1.1:

rijst. 2.1.1

gebruik het commando . om afbeeldingen uit de verzameling clips in te voegen Invoegen - Afbeelding - Afbeeldingen;

formatteer de grootte van de afbeelding met het commando Formaat – Tekening…- tabblad De grootte(afb. 2.1.2).

rijst. 2.1.2

Maak webpagina's op het tweede niveau mama.mht, papa.mht, iam.mht:

1. commando uitvoeren Bestand - Aanmaken;

   selecteer item Webpagina;

   commando uitvoeren Formaat - Onderwerp;

   kies een thema voor decoratie Cipres.

   vul de webpagina met informatie (voorbeeld: fig. 2.1.3);

rijst. 2.1.3

gelijk aan blz. 4a) -4f) webpagina's papa.mht en iam.mht maken.

Maak op de hoofdwebpagina van het family.mht-bestand hyperlinks naar de relevante webpagina's:

1. markeer een afbeelding (tekst) - Voeg hyperlink in…;

   in het veld Map selecteer het juiste bestand (mama.mht);

   verander indien nodig de tekst van de hint of voer de tekst in;

   herhaal de stappen op basis van items 5a) -5d) voor de rest van de hyperlinks.

Geef presentaties over de onderwerpen die in de oefening zijn aangegeven op dezelfde manier als in paragrafen. 1-6.

2.2 PowerPoint-presentaties opslaan als webpagina's

Kort over het belangrijkste:

U kunt uw PowerPoint-presentatie als webpagina opslaan door deze stappen te volgen: selecteer het menu Bestand- Selecteer een item Opslaan als webpagina- in het raam Het document opslaan Webpagina (*.htm, *. html) - voer de bestandsnaam in - druk op de knop Sparen.

De parameters van de webpagina kunnen worden geconfigureerd in het venster Een webpagina publiceren met een druk op de knop Publiceren... In dit venster kunt u de gepubliceerde objecten selecteren ( Volledige presentatie of Dia's), browserondersteuning, verander de tabeltitel.

De oefening

Maak een fragment van de site op basis van de voltooide presentatie:

a) "Elektrische stroom";

b) "Ruimtelijke cijfers";

c) "Dieren van het geboorteland";

d) "Optische apparaten".

Creatie technologie:

Open een bestand met een door de docent voorgestelde presentatie over een van de aangegeven onderwerpen.

Sla uw presentatie op als webpagina: Bestand- Selecteer een item Opslaan als webpagina- in het raam Het document opslaan selecteer het type opgeslagen bestand Webpagina (*.htm, *. html) - voer de bestandsnaam in (of behoud deze) - druk op de knop Sparen.

Wijzig de instellingen en parameters van het webdocument terwijl u de presentatie opslaat: klik op de knop Publiceren(afb. 2.2.1)

rijst. 2.2.1

Kleureffecten aanpassen: in het venster Een webpagina publiceren druk op de knop Webparameters(fig 2.2.2) - tabblad Komen vaak voor - kies een kleurenschema Presentatie kleuren(Fig. 2.2.3) - als er hyperlinks in de presentatie zijn, vink dan het vakje uit Diawisselaarpaneel toevoegen – Ok - Publiceren.

rijst. 2.2.2

afb. 2.2.3

Bekijk het opgeslagen fragment van de website in een browser.

§ 3. De basis van de HTML-opmaaktaal.

3.1 Een HTML-document maken in de Kladblok-editor

Kort over het belangrijkste:

De alinea wordt gespecificeerd door de tag

Wanneer ze in een browser worden bekeken, worden alinea's van elkaar gescheiden door een lege regel. Gebruik een ongepaarde tag om een ​​nieuwe regel te forceren zonder een alinea te maken
.

Vetgedrukte tekens worden gespecificeerd door de tag , wordt de cursieve stijl gespecificeerd door de i-tag.

De achtergrondkleur van de hele pagina wordt bepaald door het bgcolor-attribuut, de tekstkleur wordt bepaald door het text-attribuut.

Een tag wordt gebruikt om het lettertype, de kleur en de grootte van tekens in te stellen. Het lettertype wordt gespecificeerd door het face-attribuut, waarvan de waarde de naam van het lettertype is, bijvoorbeeld Arial. De grootte van karakters wordt gespecificeerd door het size attribuut en kan worden uitgedrukt in willekeurige eenheden, die waarden kunnen aannemen van 1 tot 6. De kleur van karakters wordt gespecificeerd door het color attribuut.

De oefening

Open een door een docent voorgesteld tekstdocument in een editorNotitieboekje ... Ontwerp en bewaar het als een webpagina die in een van de figuren wordt weergegeven. Gebruik bijlage 2 om de achtergrondkleur te maken.

voorbeeld 1

Ontwerp technologie:

Open het door de docent voorgestelde tekstdocument in de editor Notitieboekje(afb. 3.1.1).

rijst. 3.1.1

Toevoegen aan document (Fig. 3.1.2):

1. tags voor het openen en sluiten van een HTML-document (-);

   tags voor het plaatsen van service-informatie die niet op de pagina wordt weergegeven (-);

   tags met tekst voor informatie weergegeven in de kop van het browservenster (voorbeeld 1);

   tags voor het plaatsen van informatie weergegeven in de browser (-

Stuur uw goede werk in de kennisbank is eenvoudig. Gebruik het onderstaande formulier

Studenten, afstudeerders, jonge wetenschappers die de kennisbasis gebruiken in hun studie en werk zullen je zeer dankbaar zijn.

Vergelijkbare documenten

De HTML-programmeertaal: zijn multimediale en grafische mogelijkheden. Vereisten voor het ontwerpen en maken van websites. Methodologische ontwikkelingen voor de studie van "Webdesign" in de schoolopleiding informatica en informatie- en communicatietechnologieën.

scriptie, toegevoegd 09/12/2012


Analyse van educatieve en methodologische documentatie. Methoden voor het ontwerpen van een systeem van lessen over een onderwerp. Kenmerken van het ontwerp van middelen voor thematische controle. Structurele en logische analyse van educatief materiaal. Opstellen van een plan voor theoretische lessen.

scriptie toegevoegd 21-05-2015


Psychologische kenmerken van de creativiteit van kinderen. De relatie tussen spel en kindconstructie. Verschillende vormen van onderwijsorganisatie gericht op het verhelpen van de tekortkomingen van spontaan kinderontwerp. Specifieke kenmerken van kinderdesign.

scriptie, toegevoegd 24/06/2011


Kenmerken van het lesgeven aan leerlingen met een gehoorbeperking. De bijzonderheden van het onderwijzen van schoolkinderen om hyperteksttechnologieën te maken. Ontwikkeling van een programma voor het onderwijzen van slechthorende scholieren van de 11e klas in technologieën voor het maken van webpagina's met HTML.

proefschrift, toegevoegd 25-04-2011


Onderwijs als sociaal-cultureel fenomeen, kenmerken van zijn modellen. Methoden voor het construeren en structureren van de inhoud ervan. De belangrijkste elementen van het onderwijs als specifieke onderwijsinstelling. Eigenschappen van het moderne onderwijssysteem.

test, toegevoegd 25-03-2010


Interactief whiteboard als multimediatool, het gebruik ervan bij het onderwijzen van technische disciplines op de universiteit. Methodische ontwikkeling van lessen in het vakgebied "Ontwerp en productie van automobieluitrusting". Les ontwikkelingstechnologie.

proefschrift, toegevoegd 13-06-2011


De geschiedenis van origami-kunst bestuderen. Kennismaking met educatieve en methodologische aanbevelingen voor de implementatie van producten in de origamitechniek op de basisschool. Overweging en analyse van het proces van modellering en ontwerp van papier in de beginfase.

proefschrift, toegevoegd 09/24/2017


test, toegevoegd 16-11-2013

Hallo lieve abonnees en gasten van mijn blog. In verschillende eerdere artikelen heb ik je kennis laten maken met de basis van de css-talen en echter alleen indirect genoemde helperprogramma's. Daarom vind ik het vandaag nodig om u te vertellen over de beste visuele html-editor. Ik zal je vertellen over enkele van de populaire tools voor het bouwen van sites, en later kun je degene downloaden en uitproberen die je leuk vindt.

Raak de top tien

Op dit moment hebben bedrijven veel gespecialiseerde softwareproducten uitgebracht, met als belangrijkste doel het optimaliseren van de workflow van ontwikkelaars. Er zijn zowel betaalde als gratis editors.

Omdat mijn blog gericht is op het onderwijzen van nieuwelingen in deze branche, heb ik besloten om de beste gratis tools voor het maken van webpagina's te beschrijven. Hoogstwaarschijnlijk heb je al geraden dat we het gaan hebben over de tien handigste visuele programma's. Laten we beginnen met de gemakkelijkste.

(https://notepad-plus-plus.org/)

Het is een geweldig hulpmiddel om toekomstige ontwikkelaars op te leiden. Het programma heeft een eenvoudige gebruiksvriendelijke interface zonder onnodige toeters en bellen, ondersteunt meertaligheid, dat wil zeggen, u kunt het menu van de editor in het Russisch vertalen. De voordelen omvatten ook het benadrukken van de syntaxis van de code, de implementatie van verificatie en validatie.

PSPad(http://www.pspad.com/)

Net als het vorige programma is PSPad een tool voor algemene doeleinden die css- en html-tekst markeert, automatisch wijzigingen opslaat nadat het programma is voltooid, de juistheid van de geschreven code controleert, en waarmee u de voorbeeldmodus van de ontwikkelde pagina's kunt inschakelen. Deze visuele editor bevat meer handige functies dan Notepad ++, maar het is nog steeds een eenvoudige ontwikkelingstool.

KompoZer(http://www.kompozer.net/)

Het softwareproduct is eigendom van WYSIWYG-editors, wat betekent "wat je ziet is wat je krijgt". KompoZer is een van de leiders onder visuele editors en met een goede reden. Het stelt ontwikkelaars en ontwerpers in staat om samen te werken, omdat het is begiftigd met 3 werkingsmodi. Laten we beginnen met mijn favoriet, de codemodus.

Ondanks de afwezigheid van automatische voltooiing van gepaarde elementen van opmaaktalen, kunt u met de modus de code bewerken zoals in teksteditors. In de WYSIWYG-modus is het handig voor ontwerpers om het uiterlijk van webbronnen te ontwerpen. De gezamenlijke modus biedt de mogelijkheid voor gedetailleerde kennismaking met de opmaak van specifieke objecten.

Komodo Bewerken(http://www.activestate.com/komodo_edit/)

Krachtige tool met direct beschikbare broncode. De creatie is gebaseerd op de commerciële ontwikkelomgeving Komodo IDE, dus het product is begiftigd met veel extra voordelen: contextueel automatisch vullen en sluiten van tags, genereren van willekeurige tekst om velden in te vullen, voorbeeld van stijlopmaak, ingebouwde reguliere expressies en veel meer.

Aan dit alles wil ik toevoegen dat de mogelijkheden van het programma aanzienlijk kunnen worden uitgebreid met behulp van speciale hulpprogramma's!

jBewerken(http://www.jedit.org/)

jEdit is een platformonafhankelijk softwareproduct. Het biedt syntaxisaccentuering voor geschreven tekst, extra installatie van plug-ins om de mogelijkheden uit te breiden, waarna automatisch sluiten van tags, code-authenticatie en vele andere functies beschikbaar komen.

Voor mij persoonlijk was het struikelblok op weg naar deze editor echter de slordige en onhandige interface.

Aptana-studio(http://www.aptana.com/)

Wil je leren programmeren in een volwaardige ontwikkelomgeving, werk dan in dit product. De omgeving ondersteunt veel programmeertalen en is niet alleen geschikt voor sites, maar ook voor het schrijven van andere soorten applicaties. Maar wees bereid om wat tijd te nemen om de technische kenmerken ervan onder de knie te krijgen.

Fraise(https://www.assembla.com/home)

Dit is een teksteditor die geschikt is voor het maken van webbronnen, helaas alleen voor het Mac OS X 10.6-platform. Het programma ondersteunt kleuraccentuering van tekst in verschillende talen, biedt een voorbeeld van de gemaakte pagina's, is uitgerust met speciale commando's om het typen en syntaxiscontrole te versnellen, stelt u in staat reguliere expressies te gebruiken en voegt ook automatisch de ingevoerde eigenschappen toe.

Gedit(http://projects.gnome.org/gedit/)

Een eenvoudige teksteditor die, na het installeren van add-ons, op wonderbaarlijke wijze verandert in een webeditor. De volgende eigenschappen worden toegevoegd met behulp van hulpprogramma's:

• Voltooiing van gepaarde elementen;
• Genereren van tijdelijke tekst;
• De syntaxis van de code controleren;
• Bekijk een voorbeeld in elke browser.

Vim(http://www.vim.org/)

Een console-editor die moeilijk te leren is en veel voordelen heeft voor programmeurs. Uitgerust met 3 bedrijfsmodi.

ICEcoder(https://icecoder.net/downloads)

Het is een teksteditor die de mogelijkheid biedt om code rechtstreeks in de browser te schrijven en te bewerken. Een uitstekende moderne tool om zowel lokaal als op het netwerk te werken, uitgerust met de kenmerken van standaard editors, maar het ondersteunt het werken met databases en functies op alle platforms.

Wat mij betreft, ik verander regelmatig van WYSIWYG-programma's en probeer nieuwe versies en producten van verschillende bedrijven.

Dat is alles, veel succes met het vinden van de editor die bij u past! Deel de link met je vrienden en zorg ervoor dat je je abonneert op mijn blog voordat je vertrekt. Er zijn nog veel meer nuttige artikelen in het project. Tot ziens!

Met vriendelijke groet, Roman Chueshov

Inspectie door die: Identificatie van pc's in hekwerk. Het adresseringsprincipe.

HOOFDSTUK 3. BASISINFORMATIE WEBONTWERP

3.1. Webdesign begrijpen

Het World Wide Web (WWW) is momenteel een populaire en handige service op internet.
Webpagina's en websites worden veel gebruikt op het World Wide Web.

Voor het maken van websites wordt de hypertext markup language HTML (HyperText Markup Language) gebruikt.
Website bouwmethoden en tools waarmee gebouwd wordt zijn zeer divers en kunnen worden ingedeeld volgens verschillende criteria. De belangrijkste daarvan zijn de mate van automatisering van het site-ontwerp en de methodologie van het ontwikkelingsproces.

Afhankelijk van de mate van automatisering van website-ontwerp, moeten twee hoofdmethoden worden onderscheiden: visueel en programmeerbaar.

De visuele methode stelt je in staat om een ​​website te ontwerpen met een hoge mate van automatisering. Deze methode is ontstaan ​​vanuit de behoefte om de arbeidsintensiteit van het maken van een website te verminderen en de tijd die nodig is om het werk te voltooien te verkorten.

Het belangrijkste principe van de visuele methode is het principe "What I see is what I get" - WYSIWYG (van de Engelse zin "What you see is what you get"). Wanneer u sites maakt met behulp van de visuele methode, moet u tools selecteren - visuele ontwerpeditors.

De bekendste van deze editors zijn: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive, enz. Bij het maken van een website bieden deze editors de gebruiker de mogelijkheid om te werken zonder een directe verbinding met internet. In de toekomst kan de gemaakte website op internet worden geplaatst.

Wanneer u websites maakt met deze editors, wordt voor elke webpagina die u maakt automatisch HTML-code gegenereerd, wat een set HTML-taalconstructies is.

Voor het bouwen van websites kan gebruik worden gemaakt van content management systemen CMS (Content Management System), die worden geleverd door een aantal speciale betaalde of gratis diensten. CMS-systemen zijn een soort constructeurs waarmee u een site kunt maken en in de toekomst kunt onderhouden. Bij het maken van de structuur en navigatie van een site in een CMS is diepgaande kennis van de HTML-taal meestal niet vereist. Voorbeelden van CMS-systemen zijn te vinden op Narod.ru en Boom.ru.

U kunt geen echte webmaster worden zonder de basisconstructies van de HTML-taal te kennen, en voor professioneel werk moet u de HTML-taal beheersen. Het bouwen van een website in HTML wordt vaak een programmeerbare of handmatige ontwerpmethode genoemd.

Om direct met HTML-code te werken, kunnen speciale ontwikkelingstools worden gebruikt, zoals Hotdog, HomeSite, enz. Deze programma's maken het voor een websiteontwikkelaar gemakkelijker om elementaire HTML-constructies in te voeren en te bewerken.

U kunt elementaire HTML-constructies invoeren in Kladblok. Over deze manier van werken komen we later nog te spreken.

Naast de HTML-opmaaktaal voor hypertext-documenten worden andere programmeertalen zoals Java Script en PHP gebruikt om websites te maken.

Scripts worden veel gebruikt in webdesign. Ze worden in de regel gebruikt om afzonderlijke elementen van een webpagina te maken, bijvoorbeeld vervolgkeuzelijsten, dynamische menu's, klokken, kalenders, enz.

De webontwerptechniek omvat de implementatie van website-ontwerp in verschillende hoofdfasen:

1. Ontwikkeling van het thema van de site, zijn doelen en doelstellingen.
2. Logisch ontwerp, dat omvat: de vorming van de structuur van de site (lineair, hiërarchisch), de naam van de secties, de relatie daartussen, de voorbereiding van informatie die op elke webpagina van de site wordt geplaatst.
3. Directe creatie van een site, inclusief de definitie van ontwerpmethoden en de keuze van tools ervoor.
Methoden en tools voor het bouwen van websites zijn zeer divers, u kunt bijvoorbeeld sites maken die dynamisch en statisch zijn.

De dynamische site bevat informatie die door de gebruiker kan worden gewijzigd of uit databases kan worden geladen. Dergelijke databases bevatten meestal informatie die voortdurend moet worden bijgewerkt. Zo wordt de website van een webwinkel altijd bijgewerkt met informatie over aanvullende producten en veranderende prijzen.

Een statische site wordt niet in realtime bijgewerkt.

Interactieve sites zijn wijdverbreid. Op dergelijke sites worden webpagina's gegenereerd door serverprogramma's. Informatie wordt meestal uit databases gehaald. Heel vaak wordt differentiatie van toegang tot de site gebruikt, waarbij sitebezoekers verschillende toegangsrechten hebben tot informatie die erop staat. Dergelijke sites kunnen verschillende formulieren bevatten om in te vullen.

Bij het maken van sites kunnen kant-en-klare sjablonen worden gebruikt of de constructie ervan kan worden uitgevoerd in speciale softwareomgevingen die voornamelijk op grafische afbeeldingen zijn gebouwd, enz.

?
1. Wat zijn de twee belangrijkste webontwerptechnieken die u kent?
2. Welke tools kunnen worden gebruikt om websites te maken?
3. Wat is het verschil tussen visuele en programmeerbare webdesignmethoden?
4. Waar worden scripts voor gebruikt?
5. Welke stappen moeten worden gevolgd bij het ontwerpen van een website?

3.2. Basis HTML-concepten. De structuur van een HTML-document begrijpen

3.2.1. HTML-documentstructuur

Een HTML-document is een tekstbestand zonder opmaak dat HTML-constructies bevat. Daarom kan dit document worden gemaakt in gewone teksteditors, zoals Kladblok, en vervolgens de gegenereerde bestanden opslaan met de extensie .htm of .html.

De essentie van de HTML-taal ligt in de opmaak van tekst met behulp van controletekens - tags die tussen punthaken staan.

De meeste tags zijn gepaard, d.w.z. een openingselement hebben<>en een afdekelement.

Daartussen bevinden zich de codes die de browser herkent.

HTML-document moet altijd beginnen met een afscheurtag en eindigen met een afsluiting.

Binnen zijn: kopblok en lichaam

, die teksten, afbeeldingen, audio- en videofragmenten bevat.
De belangrijkste tags die nodig zijn om een ​​HTML-document met een eenvoudige structuur te maken, worden weergegeven in de tabel:

De tag wordt in het titelblok geplaatst ... De tekst die in deze tag is gespecificeerd, wordt weergegeven in de kop van het browservenster.
U kunt opmerkingen in een HTML-document plaatsen die niet door de browser worden weergegeven:.

Voorbeeld 1. Maak een eenvoudig HTML-document in Kladblok. Sla het gemaakte prim1.htm-bestand op. Open het gemaakte document in een browser.
De structuur van een dergelijk document ziet er als volgt uit:

Tekst op de eerste pagina

Het resultaat van het weergeven van een HTML-document in een browser wordt getoond in Fig. 3.1.

3.2.2. HTML-opmaak

HTML-tags kunnen attributen bevatten die parameters of eigenschappen zijn van documentopmaakelementen.
De regel voor het schrijven van attributen in een tag is als volgt:

<тег атрибут1=значение атрибут2=значение …>

Label bepaalt het uiterlijk van de hele webpagina, terwijl de afzonderlijke elementen, zoals kopteksten, tabellen, hun eigen speciale ontwerp kunnen hebben.
De keuze van de kleur van de pagina, de achtergrondafbeelding en de kleur van de tekst erop is erg belangrijk, aangezien de visuele perceptie van de hele site ervan afhangt.
De paginakleur wordt ingesteld door het attribuut bgcolor en de tekstkleur wordt ingesteld door tekst. De attribuutwaarde is een kleur die wordt gespecificeerd door de naam in het Engels of de hexadecimale code.

Voorbeeld 5. In dit voorbeeld wordt de paginakleur op twee manieren op blauw ingesteld:

of

Het resultaat van het weergeven van een HTML-document in een browser wordt getoond in Fig. 3.2.

?
1.Hoe maak je een HTML-document aan?
2. Waar zijn HTML-tags en attributen voor?

Opdrachten

1. Bekijk de tekst van het HTML-document:

a) Welke kleur van de achtergrond en tekst zal op de webpagina zijn?
b) Worden de koppen op een webpagina kleiner of groter weergegeven?

3.3. Werken met de FrontPage Visual Design Editor

3.3.1. De belangrijkste elementen van de FrontPage-interface

Microsoft FrontPage Editor behoort tot visuele webdesign-editors. Wanneer u met de FrontPage-webeditor werkt, kunt u het doen zonder kennis van de opmaaktaal voor HTML-hypertextdocumenten. De webpagina wordt eenvoudig op het scherm opgebouwd en in .html-indeling opgeslagen. De acties die in dit geval worden uitgevoerd, zijn vergelijkbaar met werken in de teksteditor Word.

De interface van de FrontPage-editor is zo eenvoudig dat de gebruiker de basistechnieken snel onder de knie kan krijgen. Na het starten van FrontPage wordt een venster geopend, waarvan de belangrijkste elementen zijn weergegeven in Fig. 3.3.

De panelen Standaard, Opmaak en Tekening zijn qua functionaliteit vergelijkbaar met die in de Word-teksteditor.

De weergave van de werkruimte is afhankelijk van de geselecteerde bedrijfsmodus. In de ontwerpmodus wordt een webpagina opgebouwd uit tekstblokken en grafische objecten. Tegelijkertijd wordt de HTML-code automatisch gegenereerd, die kan worden bekeken en bewerkt in de codemodus. Modus
Split (Figuur 3.4) is een combinatie van beide. In de weergavemodus kunt u de gemaakte pagina's bekijken.

Met behulp van het menu Beeld kunt u ook andere modi selecteren die handig zijn bij het ontwerpen van een site. De paginamodus is bedoeld voor het maken en bewerken van webpagina's. In de modus Mappen wordt de sitemapstructuur bekeken en worden bestandsbewerkingen uitgevoerd. Houd er rekening mee dat eventuele wijzigingen aan de bestanden en mappen van de site vanuit de ontwikkelomgeving moeten worden gemaakt, omdat u hiermee wijzigingen in de structuur van de onderling verbonden webpagina's van de site kunt volgen. In de modus Overgangen wordt de structuur van koppelingen tussen pagina's weergegeven en kunt u deze wijzigen. De Hyperlink-modus geeft visueel het systeem van links weer, biedt hun controle en bewerking.

3.3.2. Een website maken in FrontPage Editor

Laten we eens kijken naar de fasen en technieken van het werken in de FrontPage-editor aan de hand van het voorbeeld van de ontwikkeling van de website "Belaruskiya Pismennіki" (zie Fig. 3.3).
Om deze website te maken, is het noodzakelijk om de structuur en de beoogde inhoud te begrijpen, d.w.z. een websiteproject voorbereiden. Voor de duidelijkheid zullen we een fragment van de sitestructuur weergeven in de vorm van een schema met twee niveaus (Fig. 3.5).

Rijst. 3.5.
De eerste pagina (bovenste niveau) bevat de sitetitel "Wit-Russische poëzie", teksthyperlinks en hyperlinks met afbeeldingen van schrijvers en dichters, zodat u de pagina's van het tweede niveau kunt openen.

Op het tweede niveau plaatsen we drie pagina's met dezelfde structuur, die de volgende informatie bevatten, zoals weergegeven in figuur 3.6.

Rijst. 3.6.
Na het bekijken van een pagina van het tweede niveau, zullen we onderaan hyperlinks plaatsen om terug te keren naar de hoofd (eerste) pagina van de site en twee hyperlinks om vooruit en achteruit door de site te gaan.

Bij het ontwerpen van de site "Belaruskiya Pismenniki" zullen we de top-down constructiemethode gebruiken, dat wil zeggen dat we van het hoogste niveau naar het onderste niveau zullen bouwen. Bij het maken van webpagina's voor een site met behulp van de FrontPage-editor, zullen we voor het gemak pagina's van onder naar boven maken, dat wil zeggen dat we beginnen met het maken van de onderste pagina's.

De bestanden van alle webpagina's van de site staan ​​in een aparte map. Dit zal verder helpen om de plaatsing van de site op internet te vereenvoudigen. Het is gebruikelijk om de hoofdwebpagina-bestandsindex of main een naam te geven met de extensie .htm, hoewel deze vereiste optioneel is.

Binnen elk niveau hebben de pagina's van de site dezelfde structuur. Alle pagina's van hetzelfde niveau zijn meestal in dezelfde stijl ontworpen. De stijl van een webpagina wordt bepaald door de stijl van de tekst en afbeeldingen.

Tekststijl verwijst naar het type lettertype, grootte, stijl; inspringingen, uitlijning, regelafstand, enz. De stijl van grafische elementen wordt bepaald door de vorm, grootte, kleur, textuur van het materiaal, enz.

Sjablonen - Thema's - zijn ontwikkeld in de FrontPage-editor voor documentontwerp.

Een thema is een reeks ontwerpelementen en kleurenschema's van een document dat speciaal is ontwikkeld door een computerontwerper.

Gebruik het menu Bestand → Nieuw in het venster Websitesjablonen dat verschijnt en selecteer de website met één pagina (Fig. 3.7).

Om de selectie van ontwerpelementen en kleurenschema's te vergemakkelijken, gebruiken we een kant-en-klaar ontwerpsjabloon - een thema.

Gebruik het menu Opmaak → Thema in het dialoogvenster dat verschijnt, selecteer bijvoorbeeld het Horizon-thema en specificeer Toepassen als het standaardthema.
Het thema kan zowel op afzonderlijke pagina's als op de hele site worden toegepast. In het laatste geval wordt het thema automatisch geïnstalleerd wanneer u elke nieuwe pagina aanmaakt.

?
1. Waar is FrontPage Editor voor?
2. Wat zijn de belangrijkste elementen van de interface van de FrontPage-editor? Wat is hun doel?
3. Waarvoor wordt het thema gebruikt bij het ontwerpen van een webpagina?

3.4. Tekst opmaken en afbeeldingen invoegen in FrontPage Editor

3.4.1. Tekstopmaak

Het opmaken van tekst in de FrontPage-editor wordt uitgevoerd met behulp van de werkbalk Opmaak, evenals de vensters Opmaak (Fig. 3.8) en Paragraaf (Fig. 3.9).

Rijst. 3.8 Afb. 3.9
Nadat u de tekst in de FrontPage-editor (vergelijkbaar met Word) in het lettertypevenster hebt geselecteerd, kunt u de naam, stijl en grootte selecteren en in het alineavenster kunt u uitlijning, inspringingen en regelafstand specificeren. Voorbeelden van opgemaakte tekst worden weergegeven in afbeeldingen 3.8 en 3.9. Het is belangrijk om te onthouden dat de weergave van een webpagina op het scherm afhankelijk is van de monitorresolutie en browserinstellingen. Daarom is het gebruikelijk om de lettergrootte in conventionele eenheden in te stellen van 1 tot 7. Als de lettergrootte niet is gespecificeerd, wordt standaard aangenomen dat deze 3 is, wat bij installatie in de browser de gemiddelde lettergrootte komt overeen met 12 punten .
Om de aandacht op de informatie te vestigen, wordt een kruipende lijn gemaakt met behulp van de reeks acties: Invoegen → Webcomponent → Kruipende lijn. Voer in het venster Eigenschappen van de kruiplijn (Figuur 3.10) tekst in, stel de bewegingsrichting en snelheid, vertragingstijd en andere parameters in.

Rijst. 3.10

3.4.2. Afbeeldingen invoegen

Het plaatsen van afbeeldingen op een webpagina is vergelijkbaar met hoe het werd gedaan in de Word-editor (menuopdracht Afbeelding invoegen).
U kunt de parameters van de afbeelding op de pagina instellen in het venster Positie, dat wordt geactiveerd met behulp van het menu Positie opmaken (Fig. 3.11). U kunt de afbeeldingsgrootte (in pixels of procent), uitlijning, randdikte, tekstomloop en andere opties instellen.
Het is belangrijk om te benadrukken dat alle afbeeldingen die we op webpagina's zien, in afzonderlijke bestanden worden opgeslagen en op de pagina zelf alleen links naar de bijbehorende bestanden.

Rijst. 3.11
Afhankelijk van de tekststroom kunnen de ingevoegde afbeeldingen op verschillende manieren worden gerangschikt (Fig. 3.12).