Met de vervolgkeuzelijst met mappen en bestanden kunnen we de gewenste map en het gewenste bestand selecteren.
In het invoerveld Bestandsnaam De naam van het geselecteerde bestand verschijnt (of we kunnen deze daar zelf invoeren). Een vervolgkeuzelijst Bestandstype stelt ons in staat te kiezen welk type bestanden we moeten vinden. Dit alles is ons bekend uit de standaard Windows-dialoogvensters voor het openen en opslaan van bestanden. Het enige verschil is dat er aan de rechterkant een voorbeeldpaneel is. En als we het willen verwijderen, schakel dan het selectievakje uit Voorbeeld afbeeldingen. Dus we hebben het bestand geselecteerd. Het enige dat overblijft is op OK klikken. Maar Dreamweaver zal ons om wat meer informatie vragen door de melding “ Toegankelijkheidskenmerken van afbeeldingstags(Toegankelijkheidskenmerken van afbeeldingstags)” .

Combinatielijst “ Alternatieve tekst(Alternatieve tekst)” van dit venster wordt gebruikt om het zogenaamde vervangende tekst. Dit is uitgevonden voor gebruikers van langzame communicatiekanalen. Nadat de webbrowser het HTML-bestand met de webpagina heeft geladen, wordt er een leeg frame met de juiste afmetingen weergegeven in plaats van de afbeelding die erop is geplaatst. Wanneer de gebruiker de muiscursor op een leeg afbeeldingsframe plaatst, geeft de webbrowser een kleine tooltip weer met dezelfde vervangende tekst. Daarom wordt aanbevolen om altijd van deze optie gebruik te maken.

Staat eigenlijk op de lijst Alternatieve tekst geïntroduceerd korte vervangende tekst. De limiet is niet meer dan 50 tekens. Als we meer gedetailleerde vervangende tekst moeten weergeven, kunnen we deze opslaan in een apart bestand op de webpagina en vervolgens het internetadres invoeren in het invoerveld Lange beschrijving. U kunt ook op de mapknop rechts van dit veld klikken en het gewenste bestand in het dialoogvenster selecteren Selecteer Bestand. Wanneer u klaar bent met het invoeren van de gegevens, klikt u op OK. Dreamweaver plaatst de afbeelding op de plek waar de tekstcursor zich momenteel bevindt.

Grafische opties

Laten we nu de resulterende pagina opslaan, de afbeelding selecteren als deze niet is geselecteerd en naar de eigenschappeneditor kijken. Wat we daar zullen zien Invoervelden W En N stellen ons in staat de afmetingen van de afbeelding in te stellen door respectievelijk de breedte en hoogte handmatig in te voeren. Dit kan handig zijn als de gemarkeerde afbeelding deel uitmaakt van het siteontwerp; in andere gevallen is het handiger om de afmetingen van de afbeelding in te stellen door de markeringen voor het wijzigen van de grootte met de muis te slepen.

Wanneer Dreamweaver een afbeelding op een webpagina plaatst, worden automatisch de oorspronkelijke breedte en hoogte in deze invoervelden geplaatst. Zoals we al weten, de webbrowser onmiddellijk na het laden van de pagina
geeft afbeeldingen weer die nog niet zijn geladen als lege frames. Als de afbeeldingsformaten expliciet zijn ingesteld, worden deze onmiddellijk toegepast op de frames en wordt het pagina-ontwerp niet verstoord. Anders zal de webbrowser frames met een bepaalde standaardgrootte weergeven, en wanneer de afbeeldingen vervolgens worden geladen, zullen hun afmetingen veranderen, waardoor de pagina zelf opnieuw wordt getekend. En dit is erg onaangenaam.

Invoervelden V-ruimte En N Ruimte stel respectievelijk de verticale en horizontale afstand in van de rand van de afbeelding tot de tekst die eromheen stroomt. Standaard zijn ze allebei nul.

Invoerveld Src specificeert het internetadres van het bestand waarin de grafische afbeelding is opgeslagen. Rechts ervan bevinden zich twee knoppen. Door op de rechter te klikken (met de mapafbeelding), openen we een dialoogvenster Selecteer Afbeeldingsbron.

We kunnen ook de naam van het afbeeldingsbestand wijzigen door met de rechtermuisknop op de afbeelding te klikken en te selecteren Bronbestand in het contextmenu, of door simpelweg op de afbeelding te dubbelklikken. Hierna verschijnt er een dialoogvenster op het scherm Selecteer Afbeeldingsbron.

Invoerveld Lage Src vergelijkbaar met veld Src, behalve dat het de naam specificeert van het bestand waar het zogenaamde afbeelding "concept". Het "concept" -beeld is kleiner van formaat, meestal vanwege de lagere kwaliteit, en is opnieuw uitgevonden voor eigenaren van communicatiekanalen met lage snelheid. De webbrowser zal eerst het “concept” downloaden, omdat het veel kleiner is, en het op de pagina weergeven. En alleen dan, terwijl de gebruiker de voltooide pagina bekijkt, wordt de hoofdafbeelding geleidelijk geladen en vervangt deze het "concept".

Het wordt aanbevolen om alleen een "concept" te maken als de originele afbeelding te groot is om snel te laden. Dit is met name geschikt als we een website met artistieke afbeeldingen gaan maken.

Invoerveld Grens Hiermee kunt u de dikte van de rand rond de afbeelding instellen, in pixels. Standaard is dit nul, d.w.z. er is geen frame.

Combinatielijst Alt specificeert de korte vervangende tekst die ons al bekend is.

Laten we nu naar de vervolgkeuzelijst kijken Uitlijnen. Hiermee kunnen we de uitlijning van de afbeelding specificeren, in wezen de relatieve positie ervan en de tekst die erin staat.
Lijst Uitlijnen bevat de volgende artikelen:

• Standaard- standaardlocatie, meestal vergelijkbaar met item Basislijn;
• Basislijn- de onderkant van de afbeelding komt overeen basistekst(een denkbeeldige lijn waarop een tekstregel zich bevindt) de regel waarin deze zich bevindt;
• Thor- de bovenkant van de afbeelding valt samen met de bovenkant van de tekst van de regel waarin deze zich bevindt;
• Midden- het midden van de afbeelding valt samen met de basislijn van de tekst;
• Onderkant- de onderkant van de afbeelding komt overeen met de onderkant van de tekst (meestal niet hetzelfde als basislijn);
• TekstTop- de bovenkant van de afbeelding komt overeen met de bovenkant van het hoogste tekstteken (meestal niet hetzelfde als Thor);
• Absoluut midden- het midden van de afbeelding valt precies samen met middelste tekstregel(een lijn die door het midden van de lijn gaat);
• Absoluut dieptepunt- de onderkant van de afbeelding valt samen met de onderkant van het laagste tekstteken;
• Links- de afbeelding wordt tegen de linkerrand van de pagina "gedrukt" en de tekst "vloeit eromheen" naar rechts;
• Rechts- de afbeelding wordt tegen de rechterrand van de pagina "gedrukt" en de tekst "vloeit" er naar links omheen.

In de laatste twee gevallen wordt het beeld zwevend. webbrowser naar links of rechts, en de tekst waarin deze is ingevoegd, loopt eromheen. En op het punt waar de zwevende afbeelding werd ingevoegd, geeft Dreamweaver een speciaal beeld weer zwevende afbeeldingsmarkering. Deze markering wordt alleen weergegeven voor het gemak van de webontwerper en alleen in Dreamweaver; De webbrowser geeft het helemaal niet weer.

Dus we hebben de eigenschappeneditor ontdekt. Laten we nu de eigenschappen van onze afbeelding instellen. De afstand tot de tekst zal horizontaal en verticaal 5 pixels zijn, de uitlijning zal links blijven, de “alternatieve” tekst zal een “pop-up bijschrift” zijn. En sla de pagina op.

Om de oorspronkelijke afmetingen van de afbeelding terug te geven, kunnen we de knop Annuleren gebruiken die zich tussen de invoervelden W en H van de eigenschappeneditor bevindt en rechts ervan, evenals het contextmenu-item Grootte opnieuw instellen. Dit is handig als we ze ernstig hebben vervormd en opnieuw willen beginnen.

Speciale afbeeldingen

Met HTML en Dreamweaver kunt u niet alleen gewone afbeeldingen maken, maar ook afbeeldingen met speciale eigenschappen. Dit hyperlink afbeeldingen, actieve beelden En beeldkaarten. Ze worden vaak gebruikt op webpagina's, dus we zullen ernaar moeten kijken.

Elke afbeelding kan als hyperlink worden gebruikt; voer hiervoor gewoon het internetadres in het veld " in Link"panelen" Eigenschappen".
Bovendien kunt u een link naar een e-mailadres of naar een andere webpagina plaatsen. In het tweede geval heeft u toegang tot de lijst " Doel"

De afbeelding kan actief worden gemaakt door te reageren op het bewegen van de muiscursor erover - Omrollen. Om dit te doen, moet u twee afbeeldingen in voorraad hebben die elkaar zullen vervangen, en op de " Gewoon" Druk op de juiste knop.
In het geopende venster moet u de verplichte velden invullen

In het veld Afbeeldingsnaam- geef de originele naam van de actieve afbeelding aan, en de naam mag alleen Latijnse letters bevatten (elke actieve afbeelding moet met een letter beginnen) en cijfers (zeker Arabisch!-:)
In het veld Origineel beeld- voer het pad in naar de hoofdafbeelding, degene die als eerste op de pagina wordt geladen.

In het veld Rollover-afbeelding- voer het pad in naar het “afbeeldingseffect”, - deze afbeelding verschijnt alleen als u met de muis over uw actieve afbeelding beweegt.
Vink het vakje aan Rollover vooraf laden- in dit geval worden beide afbeeldingen tegelijk door de browser geladen en begint het effect onmiddellijk wanneer u met de muis beweegt. Anders (als het selectievakje is uitgeschakeld) zal de browser, wanneer u met uw muis over zo'n afbeelding beweegt, de tweede afbeelding laden... en er zal een soort langzaam effect optreden.
In het veld Alternatieve tekst- voer een tekstopmerking in die verschijnt als u met de muis over de afbeelding beweegt.
Welnu, in het veld Ga naar URL - het internetadres.

Afbeeldingskaarten

Een kaart is een solide afbeelding met gemarkeerde “hot area’s”, en elk van deze gebieden is een hyperlink en heeft zijn eigen internetadres.

Plaats om te beginnen de tekening op de pagina, selecteer deze door er met de linkermuisknop op te klikken en op het tabblad " Eigenschappen"Gebruik de turquoise vormen (in de linkerbenedenhoek is er een groep kaartelementen) en selecteer een van de methoden voor het selecteren van een 'hot gebied'. Omdat ik in dit voorbeeld van blauwe pictogrammen het 'hot gebied' wil maken, het dichtstbijzijnde ding hierbij is een rechthoekige vorm. Maar je kunt zowel een cirkel als een onregelmatige vorm selecteren. Klik op de vierhoek en selecteer het interessegebied.

De vorm die u selecteert, ziet er als volgt uit:

Het enige wat u hoeft te doen is het internetadres in het “veld” in te voeren Link” (links kunnen naar andere pagina's van uw site of naar andere sites, of naar postadressen) gaan, selecteer een van de items in het veld Doel en voer alternatieve tekst in het Alt-veld in.

Na selectie kunt u het geselecteerde gebied verplaatsen door op de pijlknop in de linkerbenedenhoek te klikken.
En om figuren met onregelmatige vormen te selecteren, klikt u met de linkermuisknop langs de omtrek van het selectiegebied. Geef ten slotte de originele naam aan uw kaart in het kaartinvoerveld en dat is alles.

Tafels

Om een ​​nieuwe tabel aan te maken, gaat u naar het tabblad " Commons"panelen" Invoegen" en druk op de knop.

Vul in het dialoogvenster dat verschijnt de verplichte velden in.
Rijen- aantal rijen in de tabel
Kolommen- aantal kolommen in de tabel
Tafelbreedte- tabelbreedte, en in het vervolgkeuzemenu moet u de maateenheden opgeven: percentages of pixels.
Randdikte- de dikte van het tabelframe in pixels, en als u de waarde op nul instelt, is de tabel zelf niet zichtbaar op de pagina.
Celvulling- streepjesafstand binnen tabelcellen
Celafstand- afstand tussen tabelcelranden
Schakelset Koptekst(Header) stelt ons in staat een "header" te maken en de eerste kolom van de tabel te markeren. Deze set bevat de volgende schakelaars: Geen (geen koptekst of eerste kolom geselecteerd), Links (eerste kolom geselecteerd), Boven (koptekst) en Beide (zowel koptekst als eerste kolom geselecteerd).
De cellen waaruit de koptekst en de gemarkeerde kolom bestaan, worden opgemaakt als koptekstcellen, en de tekst die we daarin invoeren wordt automatisch gecentreerd en vetgedrukt.
In het invoerveld Ondertiteling(Titel) Voer de naam van de tabel in. Deze naam bevindt zich boven de gemaakte tabel.
Vervolgkeuzelijst Onderschrift uitlijnen Met (Uitlijning) kunnen we de locatie en uitlijning van de titel instellen (als we er natuurlijk een hebben ingevoerd). De volgende artikelen zijn hier beschikbaar:
standaard (standaard) - de uitlijning wordt uitgevoerd door de webbrowser zelf, meestal bevindt de titel zich in dit geval boven de tabel en uitgelijnd in het midden;
bovenaan - de titel bevindt zich boven de tabel en is in het midden uitgelijnd;
onderaan - de titel bevindt zich onder de tabel en is in het midden uitgelijnd;
links - de titel bevindt zich boven de tabel en is links uitgelijnd;
rechts - de titel bevindt zich boven de tabel en is rechts uitgelijnd.

In het bewerkingsgebied Samenvatting(Totaal)tabelnotitie wordt ingevoerd. Deze notitie wordt niet door webbrowsers op het scherm weergegeven, maar kan voor een ander doel worden gebruikt (de notitie kan bijvoorbeeld worden verwerkt door programma's die tekst op het scherm lezen). Het is niet nodig om dit in te stellen.

Zodra de tabel is gemaakt, kunt u de grootte ervan wijzigen door de randen met de muis te slepen. Beweeg uw cursor over een van de drie vierkanten in de tabelmarkering.
Laten we nu de tekstcursor in een willekeurige cel van de tabel plaatsen en wat tekst typen. Laten we hetzelfde herhalen met de overige cellen van de tabel.
Een tabelcel moet op zijn minst enige inhoud bevatten, anders kan de webbrowser deze onjuist weergeven. Als de cel nog steeds leeg moet zijn, voegt u er een vaste spatie in (de HTML-code is -), zoals Dreamweaver zelf in dergelijke gevallen doet.
Om de eigenschappen van een tabel te definiëren: Selecteer deze door met de linkermuisknop op de tabelrand te klikken. Daarna op het tabblad "Eigenschappen".

U kunt de eigenschappen van de tabel wijzigen en het uiterlijk ervan aanpassen.
Veld Tabel-ID- specificeer de tabelnaam (het attribuut is optioneel)
Velden Rijen En Col- aantal rijen en kolommen in de tabel.
Velden V En H- breedte en hoogte van de tabel in pixels of percentages.
Veld Uitlijnen- tafeluitlijning links, midden of rechts
Veld CellPad- afstand binnen de cel (tussen de inhoud en de celrand)
Veld Celruimte- afstand tussen tabelcellen
Veld Stoutmoediger- breedte van de tafelrand
Bg Kleur- Achtergrondkleur van de tabel
Brdr Kleur- randkleur voor de hele tafel.
Bg-afbeelding- een achtergrondafbeelding voor de tabel instellen.

Er zijn ook zes extra knoppen.

• Knop DuidelijkKolomBreedtes- duidelijke kolombreedtewaarden
• Knop DuidelijkRijHoogten- duidelijke lijnhoogtewaarden
• Knoppen OverzettenBreedtesnaarPixels En OverzettenBreedtesnaarProcent- converteer celbreedte naar pixels en converteer celbreedte naar percentage
• Knoppen OverzettenHoogtennaarPixels En OverzettenHoogtennaarProcent- converteer celhoogte naar pixels en converteer celhoogte naar percentage

Naast het instellen van tabeleigenschappen, is er ook het instellen van de eigenschappen van een cel of groep cellen. Om de eigenschappen van een cel in te stellen, klikt u er met de linkermuisknop op. Als u eigenschappen voor een groep cellen wilt instellen, selecteert u, nadat u op het veld van de eerste cel hebt geklikt, zonder de linkermuisknop los te laten, de gewenste cellen (op deze manier kunt u in ieder geval de hele tabel selecteren). Indien geselecteerd, worden de randen van alle toegevoegde cellen in een andere kleur geschilderd.
Nadat de cellen zijn geselecteerd, let opnieuw op het "paneel" Eigenschappen"

Horz- horizontale uitlijning van celinhoud (links, midden of rechts)
Vert- verticale uitlijning van celinhoud (boven, midden, onder of basislijn)
In de velden W En H- geef de breedte en hoogte van de geselecteerde cellen op; als u de waarden als percentages wilt opgeven, voegt u het%-symbool toe na de numerieke waarde.
Bg En Brdr- het instellen van de achtergrond van cellen en het instellen van de kleur van celranden. En met behulp van de bovenmarge Bg kunt u een achtergrondafbeelding voor de cellen instellen.
Selectievakje NeeWrap- verbod op regeleinden
Selectievakje Koptekst- om geselecteerde cellen op te maken als tabelkop.
Klik nu met de linkermuisknop in een willekeurige cel en druk op de knop.
Met behulp van dit dialoogvenster kunt u de geselecteerde cel in verschillende delen splitsen. Schakelaars Rijen En Kolommen- Verdeel respectievelijk in rijen en kolommen. Aantal... - in hoeveel rijen of kolommen de geselecteerde cel moet worden verdeeld.

Selecteer nu twee cellen en klik op de knop.
De twee cellen die u hebt geselecteerd, zijn samengevoegd tot één cel en u kunt deze nieuwe samengevoegde cel opnieuw splitsen of, integendeel, combineren met andere, net als standaardcellen.
U kunt snel opmaak op elke tabel toepassen. Om dit te doen, selecteert u de tabel en in het menu “ Commando's"selecteer item" FormaatTafel(Formaattabel)".
En in het dialoogvenster dat wordt geopend, kunt u het ontwerp van uw tafel aanpassen

Nadat u een van de vooraf ingestelde sjablonen heeft gekozen, kunt u alle kenmerken ervan naar uw smaak aanpassen.
U kunt tabelcellen knippen, plakken of kopiëren.
Om een ​​cel (of meerdere cellen) te knippen, moet u deze selecteren en de opdracht Bewerken - Knippen geven. De cel (of meerdere) worden uit de tabel verwijderd.
Om een ​​cel (of meerdere cellen) te kopiëren, moet u deze selecteren en de opdracht Bewerken - Kopiëren geven. De cel (of meerdere) wordt gekopieerd.
Om gekopieerde of geknipte cellen te plakken, gebruikt u de opdracht Bewerken – Plakken.
Voordat u verder gaat, kunt u proberen eenvoudige tabellen te maken.

Tafelontwerp

Laten we zeggen dat we een online winkel aan het maken zijn. We moeten de naam, beschrijving, prijs en foto van het product op de pagina plaatsen. Met tabellen is het eenvoudiger dan ooit.

Met behulp van een speciaal opgemaakte tabel kunnen we verschillende stukjes tekst en een grafische afbeelding plaatsen zoals we nodig hebben. En als we iets niet leuk vinden, kunnen we deze tabel enigszins aanpassen en een heel ander resultaat krijgen.

Webontwerpers beheersen tabellen al lang. En net zo lang geleden zweefde een eenvoudig idee, zoals al het vernuftige, in de lucht. Wat als u ALLE tekst van een webpagina in een grote, complex opgemaakte tabel plaatst en deze over het hele webbrowservenster 'uitrekt'? Dan krijgen we immers vrijwel onbeperkte mogelijkheden, vrijwel dezelfde als die van onze collega-drukkers. We zullen notities, voetnoten, zijbalken en meerdere ‘tekststromen’ kunnen maken die beginnen en stoppen waar we ze nodig hebben.

Nu zijn we dicht bij het tabelontwerp gekomen, d.w.z. een methode om webpagina's te construeren met behulp van tabellen.
Het basisprincipe van tabelvormig ontwerp is al gegeven. Alle tekst en alle afbeeldingen passen in tabelcellen, zodat u ermee kunt doen wat u wilt. Dergelijke tabellen (laten we ze lay-outtabellen noemen) hebben doorgaans onzichtbare randen en de linialen worden gemaakt met zeer dunne cellen met achtergrondvulling. Opmaaktabellen zijn erg complex, gebruiken verschillende opmaak en het samenvoegen van meerdere cellen, en gebruiken bijna altijd geneste tabellen.
Handmatig complexe opmaaktabellen maken is het toppunt van webdesign. Niet iedereen, zelfs een ervaren webontwerper, zal zich ertoe verbinden complexe pagina's te maken op basis van tabellen. En dit alles is te danken aan de ongelooflijke complexiteit van de resulterende HTML-code. Daarom zitten er heel vaak fouten in de code van webpagina's die op basis van tabellen zijn gebouwd. Daarom kan de webbrowser deze niet altijd weergeven. In feite kun je in al deze talrijke samengevoegde cellen en in de meest complexe opmaak eenvoudigweg in de war raken.

Steekproef- dit is een soort voorbeeld, het “skelet” van een webpagina, dat elementen bevat die voor alle pagina's gelden: de titel van de site, een reeks hyperlinks, copyrightinformatie, mogelijk een opmaaktabel, enz. Deze elementen blijven op alle pagina's ongewijzigd gemaakt op basis van deze sjabloon, daarom worden ze onveranderlijke elementen genoemd. Ja, maar hoe past de hoofdinhoud op de pagina?
Heel eenvoudig. Speciaal voor dit doel wordt het sjabloon gemaakt veranderlijke gebieden . Ze zijn bedoeld voor de unieke inhoud van de pagina die op basis van dit sjabloon wordt gemaakt.

Het is eenvoudig: we maken een pagina op basis van de sjabloon en voeren de belangrijkste inhoud ervan in de bewerkbare gebieden in. In dit geval staat Dreamweaver ons niet toe onveranderlijke elementen te bewerken, en terecht: ze zijn tenslotte onveranderlijk. Maar het maakt niet uit: we kunnen de sjabloon zelf altijd wijzigen.

Laten we bijvoorbeeld de titel van de site corrigeren. Omdat het deel uitmaakt van de sjabloon, openen we de sjabloon, repareren deze en slaan deze op. Dreamweaver vraagt ​​ons onmiddellijk om wijzigingen in de sjabloon over te brengen naar alle pagina's die op basis daarvan zijn gemaakt. En het brengt het zo zorgvuldig over dat het de inhoud van de veranderlijke gebieden niet beïnvloedt! In feite corrigeert het voor ons alle dubbele elementen op alle webpagina's van de site. Sjablonen worden opgeslagen in speciale bestanden met de extensie dwt, in de map Sjablonen, die Dreamweaver zelf maakt in de hoofdmap van de lokale kopie van de site. Het aantal sjablonen dat op de site wordt gebruikt, is niet beperkt, dus we kunnen sommige sitepagina's maken op basis van de ene sjabloon en andere op basis van een andere. Of we kunnen ons over het algemeen beperken tot één enkele sjabloon, zoals in feite het vaakst gebeurt.

Maak een website voordat u een sjabloon maakt. Registreer het in Dreamweaver.
Laten we nu een document maken en markeringen maken.

• Maak een tabel met een breedte van 100%, 2 rijen en 1 kolom, rand 0.
• In de eerste regel maken we een achtergrond (fon.gif) en een hoogte van 100 pixels.
• Schrijf vervolgens de titel Mijn site in de paginatitel en op de eerste regel. Stel de tekstgrootte in op +7 en de kleur op geel.
• Stel op de tweede regel de verticale uitlijning in op Boven.
• Voeg nog een tabel in met een breedte van 100%, 1 rij en 3 kolommen, rand 0.
• Stel de verticale uitlijning van elke cel in op Boven.
• De breedte van de eerste kolom is 20%, de tweede 60%, de derde 20%.
• In elke kolom voegen we nog een tabel in van 2 rijen x 1 kolom, breedte 95%, tabeluitlijning gecentreerd. En ook de verticale uitlijning in elke cel is Top.
• Vul vervolgens de regels met tekst zoals in mijn voorbeeld.
• Stel in de navigatiekolom de kleur van de cellen één voor één in op groen.

Onze pagina-indeling is klaar. Wij gaan niets ingewikkelds doen. Voor de doeleinden van deze lezing zal dit voldoende zijn.
Dit is het moment om een ​​sjabloon en bewerkbare gebieden te maken.

Er zijn twee manieren om een ​​Dreamweaver-sjabloon te maken. Ten eerste kan het helemaal opnieuw worden gemaakt en vervolgens worden gevuld met inhoud, zoals een gewone webpagina.
Ten tweede kan een bestaande pagina als sjabloon worden opgeslagen en vervolgens worden bewerkt om nuttige inhoud te verwijderen en alleen algemene elementen over te laten. Beide zijn even gemakkelijk te doen.
Om een ​​nieuw sjabloon te maken “vanaf nul” menu “ Laten we een nieuw document maken" – Bestand“

Het is nog eenvoudiger om een ​​nieuwe sjabloon te maken op basis van een bestaande webpagina. Open hiervoor de gewenste webpagina en selecteer “ Laten we een nieuw document maken""paragraaf" Opslaan als sjabloon“ (Opslaan als sjabloon). U kunt ook op de knop klikken Sjabloon maken(Sjabloon maken) Objectpaneel. Er verschijnt een dialoogvenster op het scherm Opslaan als sjabloon ”.

In de vervolgkeuzelijst Locatie selecteer de site waar de sjabloon is opgeslagen. (Sjablonen zijn een integraal eigendom van de site, onthoud) Standaard wordt daar de huidige site geselecteerd.

De sjabloonnaam zelf wordt ingevoerd in het invoerveld Opslaan als. Laten we onze nieuwe sjabloon noemen voornaamst(“main”) omdat dit onze hoofdsjabloon is waar we onze site omheen zullen bouwen.
Nadat u alle benodigde gegevens heeft ingevoerd, klikt u op de knop ". Maak vervolgens een nieuwe pagina aan en voer wat tekst in, sla deze op "(Opslaan) om de sjabloon op te slaan.
Nadat we een nieuwe sjabloon hebben gemaakt, verschijnt de nieuwste in de lijst met sjablonen. En omdat we deze nieuwe sjabloon hebben gemaakt op basis van een bestaande webpagina, wat betekent dat deze inhoud bevat, kunnen we er een voorbeeld van bekijken in het voorbeeldvenster. Dit paneel is echter erg klein en om een ​​idee te krijgen van de inhoud van de sjabloon, zullen we het in een documentvenster moeten openen.

Een sjabloon bewerken

Het lege sjabloon moet worden gevuld met inhoud. De sjabloon die op basis van een webpagina is gemaakt, moet worden bewerkt: verwijder de inhoud die uniek is voor deze pagina en laat alleen elementen over die gemeenschappelijk zijn voor alle pagina's van de site. Om dit te doen, moeten we de sjabloon openen in een documentvenster, zoals een gewone webpagina.
Er verschijnt een documentvenster op het scherm waarin het door ons geselecteerde sjabloon wordt geopend. Uiterlijk zal het niet anders zijn dan een gewone webpagina.
Wat kunnen we met het sjabloon? Iets. U kunt het beschouwen als een gewone webpagina met enkele speciale functies. (We zullen deze functies verder beschrijven.) We kunnen tekst typen, opmaken, afbeeldingen, tabellen en hyperlinks plaatsen, overschakelen naar de pagina-indelingsmodus en tabellen en indelingscellen maken, framesets maken, HTML-code "opschonen", enz.
Maar toch is de sjabloon geen webpagina en heeft hij enkele functies. We zullen er dus veranderlijke gebieden op moeten plaatsen, die vervolgens de hoofdinhoud van de pagina's zullen bevatten. (Bovendien zullen we dit zeker moeten doen, waarom hebben we anders deze sjabloon nodig.) Hoe we dit moeten doen, zullen we later leren.
Laten we de hoofdsjabloon openen die we hebben gemaakt op basis van de standaard.htm-pagina (als deze nog niet geopend is).

Nu moeten we veranderlijke gebieden in de sjabloon plaatsen. Voorlopig is er slechts één veranderlijk gebied: de hoofdinhoud van de pagina. En het zal zich in de grootste cel van onze opmaaktabel bevinden. We laten de nieuwskolom en de navigatiebalk voorlopig met rust.

Bewerkbare regio's maken

Net als bij de sjabloon zelf kunnen we op twee manieren veranderlijke gebieden maken. Maak eerst een leeg bewerkbaar gebied in een leeg gebied van de pagina. Ten tweede converteert u een deel van de huidige inhoud van de pagina naar een bewerkbaar gebied.

De eerste methode is het beste als we een geheel nieuwe sjabloon hebben gemaakt, en de tweede is het beste als we een bestaande pagina naar een sjabloon hebben omgezet.

Het maken van een leeg bewerkbaar gebied in een sjabloon is heel eenvoudig. Om dit te doen, plaatst u eerst de tekstcursor op de plaats waar we een leeg bewerkbaar gebied willen maken en besluit u wat u wilt gebruiken:

• objecttoolkit door op de knop te klikken Sjablonen op het tabblad Gewoon en selecteer het item in het menu dat verschijnt Bewerkbare regio;

• contextmenu door een keuze te maken uit het submenu Sjabloon paragraaf Nieuwe bewerkbare regio;
• systeemmenu door te selecteren in het submenu Sjabloonobjecten menu Invoegen paragraaf Bewerkbare regio;
• toetsenbord, wat het snelst is - druk gewoon op ++.

Hierna verschijnt er een dialoogvenster op het scherm Nieuwe bewerkbare regio.
Voer in het enige invoerveld Naam in dit venster de unieke naam in van het nieuw gemaakte bewerkbare gebied. Elk bewerkbaar gebied dat we in de sjabloon maken, moet een unieke naam hebben. Deze naam kan alle tekens bevatten, behalve letters van het Russische alfabet, aanhalingstekens, apostrof en tekens "<", ">" en "&". Nadat u een naam hebt ingevoerd, klikt u op OK om het bewerkbare gebied te maken, of Annuleren dit te weigeren.

Als we per ongeluk een veranderbaar gebied op de verkeerde plek hebben geplaatst die we wilden, kan dit worden opgelost. We selecteren het veranderlijke gebied door op de titel te klikken, "pakken" het met de muis bij de inhoud en slepen het naar de gewenste plaats.

Dreamweaver maakt automatisch een klein bewerkbaar documenttitelgebied wanneer u een sjabloon maakt. (Dit is de reden waarom we het veranderbare gebied niet de naam doctitie kunnen geven - er bestaat al een veranderlijk gebied met die naam). Dit bewerkbare gebied bevat de inhoud van de tag