huis-Programma's-Een overzicht van wat er nieuw is in de nieuwste versie van Dreamweaver CC. Een grafische koptekstachtergrond invoegen

Een overzicht van wat er nieuw is in de nieuwste versie van Dreamweaver CC. Een grafische koptekstachtergrond invoegen



Dit is de officiële training voor Adobe Dreamweaver CC, onderdeel van de veelgeprezen serie "Classroom in a Book". Dit full colour boek is bedoeld voor zowel beginners als gevorderden die het maximale uit Adobe Dreamweaver willen halen. Met een reeks eenvoudige, goed gekozen stapsgewijze instructies kunt u alles oefenen Adobe-tools Dreamweaver CC.
De schijf bevat bestanden voor lessen. Met hun hulp wordt u snel en gemakkelijk een echte meester in het werken met Adobe Dreamweaver CC.
Disc "Officieel educatief Adobe-cursus Dreamweaver CC "bevat de lesbestanden die u nodig hebt om de oefeningen in dit boek te voltooien en andere informatie om u te helpen beter te leren Adobe-programma reamweaver CC en efficiënter gebruiken

HTML-BASIS

Jij ziet dat nieuwe tekst wordt niet weergegeven, ook al heeft u uw wijzigingen opgeslagen. Dit komt omdat om webpagina's in een browser te bekijken, u ze eerst moet downloaden en opslaan op uw computer, of cache, op uw harde schijf. De browser geeft daadwerkelijk de webpagina weer die in eerste instantie is geladen. Om de nieuwste versie van de webpagina met alle wijzigingen te zien, moet u deze opnieuw laden of bijwerken, dit is erg belangrijk om te onthouden. Mensen missen vaak wijzigingen die aan een site zijn aangebracht omdat ze naar pagina's in de cache kijken in plaats van naar de nieuwste versies. (Als uw site regelmatig wordt bijgewerkt, kunt u het fragment invoegen JavaScript-code die de webpagina automatisch opnieuw laadt telkens wanneer de browser deze opent.)

Ververs het venster om de gewijzigde pagina te laden. Zoals u kunt zien, geeft de browser de nieuwe tekst weer, maar negeert de alinea tussen de twee regels en extra spaties. In feite zou je honderden alinea's tussen regels en veel spaties na elk woord kunnen toevoegen, en de weergave in de browser zou op geen enkele manier veranderen. Dit komt omdat de browser is geprogrammeerd om extra witruimte te negeren en alleen HTML-elementen in overweging te nemen. Door tags in te voegen, kunt u eenvoudig de weergave van de tekst wijzigen.

WERKEN MET STYLE CASCADE TAFELS

Werken met het CSS Designer-paneel

In les 4 hebt u een van de CSS-lay-outs van Dreamweaver gebruikt als uitgangspunt voor het maken van uw projectsjabloon. Deze lay-outs bevatten een inline-structuur en een set vooraf gedefinieerde CSS-regels die het basisontwerp definiëren en de componenten en inhoud van de pagina opmaken. in oefeningen deze les u zult deze regels wijzigen en nieuwe toevoegen om het basisontwerp van de sitesjabloon te voltooien. Maar voordat u verder gaat, moet u de bestaande structuur en opmaak van de site begrijpen om de opdrachten met succes te kunnen voltooien. Deze keer heb je een paar minuten nodig om de regels te bestuderen en te begrijpen welke rol ze spelen in dit document.

ANIMATIE EN VIDEO'S TOEVOEGEN AAN EEN WEBPAGINA

Inleiding tot animaties en video's op het World Wide Web

Het World Wide Web kan de gemiddelde gebruiker een zeer breed scala aan entertainment bieden. Je download en leest een bestseller, luistert naar je favoriete radiostation of band, kijkt live tv of speelfilms. Vroeger, vroeger Flash-technologie Het plaatsen van videocontent en animatie op sites was een lastige opgave. Dit komt omdat HTML is ontwikkeld in een tijd waarin: Het wereldwijde web het was zelfs moeilijk te gebruiken statische afbeeldingen... Videocontent was een verre droom.

Uiteindelijk werden videocontent en animatie gepresenteerd verschillende manieren met behulp van een combinatie van applicaties, plug-ins en codecs die in staat zijn om gegevens via internet over te dragen naar een computer en browser, vaak met enorme problemen en compatibiliteitsproblemen. Vaak was een indeling die in de ene browser werkte, incompatibel met een andere. Applicaties die op Windows draaiden, werkten niet op een Mac. Veel formaten hadden hun eigen spelers of plug-ins nodig.

Flash-technologie bracht een tijdje orde in deze chaos. Het bood een uniform platform voor het maken van animatie- en video-inhoud. Flash-project oorspronkelijk opgevat als: animatie programma, heeft het World Wide Web voor altijd veranderd. Enkele jaren geleden zorgde deze technologie voor een revolutie in de branche door het gemakkelijker te maken om video-inhoud aan websites toe te voegen. Door video-inhoud in Flash in te voegen en bestanden op te slaan in SWF- of FLV-indeling, konden webontwerpers en ontwikkelaars profiteren van de bijna alomtegenwoordigheid van Flash Player, met meer dan 90% van alle gebruikers geïnstalleerd desktop computers... Geen zorgen meer over formaten en codecs - Flash-applicatie De speler zorgde voor dit alles.

Met de uitvinding en populariteit van smartphones en tablets in de afgelopen jaren is Flash in moeilijke tijden terechtgekomen. Voor de meeste fabrikanten was Flash-ondersteuning op apparaten te veel uitdagende taak en moest verlaten worden. Deze technologie leeft echter nog steeds. Het is nog steeds ongeëvenaard in termen van multimediafunctionaliteit. Maar vandaag is de toekomst van animatie- en videocontent onvoorspelbaar. De technieken voor het maken van webmedia worden opnieuw uitgevonden. Zoals je zou kunnen raden, spreekt deze trend van een nieuw tijdperk van chaos op het World Wide Web. Ongeveer een dozijn codecs beweren het belangrijkste formaat te worden voor de distributie en weergave van video-inhoud op het World Wide Web.

De enige troost is dat HTML5 ondersteuning biedt voor zowel animatie- als video-inhoud. Er zijn al aanzienlijke vorderingen gemaakt bij het vervangen van de meeste animatiemogelijkheden van Flash door native HTML5- en CSS3-functionaliteit te gebruiken. Bij videocontent is dat niet zo duidelijk. Er is nog steeds niet één standaard ontwikkeld, wat betekent dat je meerdere videobestanden zult moeten maken om alle populaire desktop- en mobiele browsers te ondersteunen. verschillende formaten... In deze tutorial leer je hoe je verschillende soorten webanimatie en video-inhoud naar uw website.

Laten we beginnen met het goede, het eerste dat zich haast is nieuw ontwerp interface, en nu lijkt DW helemaal niet op de meeste perfecte editors.

In tegenstelling tot de oude versie waar er maar één versie van de interface was, en zelfs dat, zacht gezegd, niet zo hot was, worden we in de nieuwe versie uitgenodigd om een ​​van de 4 vooraf ingestelde interface-kleurenschema's te kiezen. De keuze van het kleurenschema wordt gegeven wanneer u voor het eerst een nieuwe versie start, in het scherm "Wat is er nieuw". Vervolgens kan het kleurenschema worden gewijzigd in de programma-instellingen

Bewerken> Voorkeuren> Interface

Daarnaast zijn er twee "codethema's" om uit te kiezen, als het in eenvoudige bewoordingen een codemarkering en een achtergrond is. En dan begint de complete puinhoop. Ten eerste zijn er maar twee, in tegenstelling tot DW 2015, en ten tweede zijn ze allebei verschrikkelijk. En het probleem is niet eens welke kleuren worden gebruikt, maar het feit dat niet al het aantal gemarkeerde elementen met minstens 5 keer is verminderd. Als gevolg hiervan ziet de code, met name php, er nu gewoon uit als een muur van tekst.

Maar er is ook positief punt, en als we niets kunnen doen aan het aantal gemarkeerde elementen, dan kan de zegen met de bloemen zelf nu beter worden bestreden dan voorheen.

In tegenstelling tot oude versies van ulе werden kleuren opgeslagen in color.xml, in de nieuwe versie werden ze in thema's gepompt. U kunt geen nieuwe thema's maken, maar het wijzigen van oude is eenvoudig. Het thema zelf bestaat uit twee bestanden.

De onderwerpen in
Programmabestanden \ Adobe \ Adobe Dreamweaver CC 2017 \ www \ extensions \ default \ DarkTheme \
en
Programmabestanden \ Adobe \ Adobe Dreamweaver CC 2017 \ www \ extensions \ default \ LightTheme \ indien van toepassing.

Een van de aangename verrassingen is dus dat de thema's van Brackets geschikt zijn voor DW 2017. Dus jezelf oppompen en meer geschikte kiezen zal niet moeilijk zijn. Bijvoorbeeld van deze site

Opmerking: als de sjabloon geen main.less-bestand heeft, dan is dit geen byad, u kunt het .css-bestand nemen (meestal de naam van het thema.css) en het opslaan in de less-vorm met de naam main ( hoofd.minder)

Naast het veranderen van de interface heeft DW 2017 nog andere nieuwe visies. We hebben nu bijvoorbeeld twee invoermethoden

Een van hen overschrijft de tekst, de andere voegt toe. Welke van de onderste verantwoordelijk is voor wat, het heeft geen zin om te schrijven, want elke keer op verschillende manieren.

We hebben ook de hints op de code gecorrigeerd, nu werken benzinestations eindelijk behoorlijk correct in php. Er verschenen ook twee opties voor het automatisch sluiten van tags voor, één op het moment dat je klaar bent met het invoeren van de openingstag (na het invoeren van ">"), de andere, zoals eerder, aan het begin van het invoeren van de sluittag (na het invoeren van "

Bewerken> Voorkeuren> Codetips

Een andere, deels leuke verandering is de oplossing voor de functie "Bronopmaak toepassen", die trouwens een van mijn favorieten is. Het belangrijkste pluspunt is dat het nu werkt bij het bewerken van js- en php-bestanden. Maar ook hier zonder deurposten.

De eerste is formatteren. Wat mij betreft bijvoorbeeld dit formaat voor php-functies heel, heel vreemd

Klasse hallo (openbare statische functie getWolrd () (return true;))

Ten tweede trekt de functie "Originele opmaak toepassen" zelf in de verkeerde richting. Er wordt een soort van antiformattering verkregen.

Dit zijn slechts enkele van de wijzigingen, een complete lijst met innovaties, zoals bijvoorbeeld Emmet of extra cursors, en nog veel meer dat u kunt lezen.

Daardoor bleek de update een C-klasse te zijn. Op sommige forums en borden schreven ze dat zoveel onvolkomenheden en vochtigheid van de nieuwe versie te wijten zijn aan de haast om nieuwe versies van projecten te tonen op een tentoonstelling in San Diego. Maar wat mij betreft, het vrijgeven van zo'n ruwe versie voor een betaald en zeker niet goedkoop product is niet acceptabel.

Als je al deze onvolkomenheden en bugs niet kunt verdragen en wilt terugkeren oude versie, dan kan dit op de volgende manier.

Dat is alles wat ik wilde schrijven over de update van Dreamweaver 2017. Veel succes met het coderen.

U maakt en beheert websites en heeft krachtig gereedschap om uw acties te automatiseren? Visuele HTML-editor Adobe Dreamweaver kan u helpen deze problemen op te lossen en de resultaten naar industriestandaarden te brengen.

Het product van Adobe is nauw geïntegreerd met andere oplossingen van het bedrijf. De daarin ontwikkelde elementen worden vervolgens eenvoudig in het project ingepast. Het is een handige omgeving voor het coderen van pagina's, het ontwerpen van een lay-out en het testen van sites. Populaire technologieën worden ondersteund - Java Script, ASP, PHP, ColdFusion, Ajax. Het is mogelijk om de gecreëerde bronnen aan te passen en te testen voor mobiele apparaten.

Functies en mogelijkheden van Adobe Dreamweaver

De belangrijkste functionaliteit van het product is bedoeld voor: HTML-creatie en CSS en werken met sitebestanden.

  • Dankzij visuele interface u kunt het resultaat van het uitvoeren van de code onmiddellijk in de paginalay-out zien.
  • De constructor vereenvoudigt routinehandelingen zoals het maken van tabellen. Het genereert code die voldoet aan de webstandaarden waarmee u met CSS kunt werken.
  • Een hintsysteem zal een beginnende webprogrammeur helpen.
  • Syntax highlighting wordt ondersteund voor vele talen: C #, Java, JavaScript, VB, HTML, XML, PHP, ColdFusion en andere. Het gebruik ervan maakt het mogelijk om dynamische pagina's te ontwikkelen.
  • Door met lay-outsjablonen te werken, kunt u snel interactieve sites maken.
  • Vanaf de CS5-versie is de BrowserLab-service in het product geïmplementeerd om de weergave van de site in alle browsers te controleren en wordt HTML5 ondersteund.

Het programma werkt standaard met hypertext markup-bestanden HTM, HTML, XHTML. Projecten en hun elementen worden opgeslagen in hun eigen formaten CSN, DWT, TTY, DWS, EDM. De editor werkt ook met andere populaire formaten die het werk van sites garanderen: Asp, Aspx, Css, Java, Jsp, Mht, Php, Rss, Sql, Vbs, Xml, Xsl, Hta, Php en andere.

Er zijn veel HTML-editors... In het voordeel van Adobe Dreamweaver spreekt ondersteuning voor bijna alle belangrijke webtechnologieën. Webstorm kan RSS niet aan, en zijn visuele editor geeft een foutieve code. En het zal voor een beginner gemakkelijker zijn om het Adobe-product intuïtief te begrijpen. Het is inferieur aan hem in termen van gemak van interface en NetBeans IDE. Deze software minder veeleisend voor resources, en werken met FTP is daarin begrijpelijker. Een andere concurrent, Microsoft Expression Web, kan niet op Mac OS draaien.

Welke versie van Adobe Dreamweaver moet ik downloaden?

Hoewel de eerste versie van het product in 1997 voor Mac OS werd uitgebracht, verscheen er al snel ondersteuning voor Windows. Sindsdien draait het programma op beide besturingssystemen. Voor eigenaren van oudere computers raden we aan om versie CS6 te installeren. Voor zijn werk is 512 MB voldoende werkgeheugen en een Pentium IV-processor. Het kan werken onder XP en Mac OS 10.6. De nieuwste productreleases stellen hogere eisen. Ze hebben al 2 GB RAM nodig en besturingssysteem Windows 7/8/10 of Mac OS-versie ouder dan 10.10. We bieden Adobe Dreamweaver aan om te downloaden in een draagbare versie, waardoor het product onmiddellijk kan worden gestart, zonder installatie.

Adobe Dreamweaver CC 2015

Met deze update heeft de editor de mogelijkheid om voltooide pagina's tegelijkertijd te testen op meerdere apparaten en met verschillende vormfactoren. Voor de ontwikkeling van dynamische sites hebben we een integratie gemaakt met het Bootstrap platform.

  • tabellen bewerken in liveweergavemodus;
  • DOM-paneel voor snelle kijk element- en navigatie-eigenschappen;
  • verbeteringen in de CSS-constructor;
  • ondersteuning voor de Adobe Stock-winkel.

Adobe Dreamweaver CC 2017

In de release van november 2017 wordt een nieuwe code-editor gemarkeerd. De werkomgeving heeft de prestaties verbeterd en de interface geoptimaliseerd. Nu heeft het product leren werken met de belangrijkste CSS-processors: Less, SCSS en SASS. Browservoorbeeld wordt in realtime uitgevoerd. De nieuwe geoptimaliseerde interface heeft vier contrasterende thema's gekregen, een aanpasbare werkbalk. Toegang tot de Typekit Marketplace is nu beschikbaar.

Adobe Dreamweaver CC 2018

Op onze site kun je al Adobe Dreamweaver CC 2018 torrent downloaden. Het implementeert de mogelijkheid om met HiDPI-monitoren te werken in Windows-omgeving... Bovendien heeft het programma ondersteuning gekregen voor meerdere monitoren, waardoor de schaal van het document wordt gewijzigd in overeenstemming met het werkdisplay. Er is verbeterde ondersteuning voor Git met het controleren van de verbinding met repositories, het opslaan van inloggegevens en het vinden van de gewenste bestanden.

Adobe Dreamweaver CC 2019

De nieuwe editor is ontworpen om de ontwikkeling van webapplicaties en sites te vereenvoudigen en te versnellen. Handig werkomgeving met code-accentuering en ingebouwde veelgebruikte elementen maakt de taak gemakkelijker voor de programmeur. Op de site kun je de Dreamweaver zelf downloaden laatste versie.

De nieuwe versie heeft een aantal verbeteringen:

  • integratie met het Chromium Embedded Framework - ondersteuning voor het CEF-framework, dat protocolhandlers, wrappers voor native functies in de ruimte, navigatiegebeurtenissen en meer creëert. Deze functie maakt de handen van ontwikkelaars vrij bij de ontwikkeling van HTML5-websites en stelt hen in staat om flexbox-elementen weer te geven;
  • JavaScript-herstructurering - verbeter uw code door functies te hernoemen en hernoemen, en het intelligente automatiseringssysteem onthoudt de acties;
  • werken met EcmaScript 6 - de introductie van een nieuwe programmeertaal stelt u in staat klassen, methoden en functies van de broncode toe te voegen, te analyseren;
  • Bootstrap 4-ondersteuning - visuele aanwijzingen bij gebruik van het framework.

Waar kun je Dreamweaver downloaden?

Op onze site kun je Adobe Dreamweaver torrent gratis downloaden, zonder registratie, sms'en en snelheidslimieten. We bieden alle nieuwste versies van het product, inclusief kant-en-klare draagbare assemblages. Alle installaties worden gecontroleerd op virussen. De programma's werken zonder te bevriezen en worden vergezeld van installatiedocumentatie.

Een versie nodig kleiner en die kunnen worden uitgevoerd vanaf elk medium?

draagbaar Adobe-versie Dreamweaver vereist geen installatie, u kunt het op elk apparaat gebruiken, een project rechtstreeks starten vanaf een flashstation, externe harde schijf of andere media. De Russischtalige interface helpt je snel aan het programma te wennen.



Versie: 2012
Platform: RAMEN
Interfacetaal: RUSSISCH

Les 1. Aan de slag met Adobe Dreamweaver CS4

Doelwit : Raak vertrouwd met Dreamweaver bij het maken van een webpagina, evenals met de werkruimte van het programma.

Taken:

  • Verken het werkgebied.
  • Leer een nieuwe pagina te maken met behulp van CSS-inhoud.
  • Leer een document op te slaan.
  • Leer hoe u de paginatitel en tekstkoppen kunt wijzigen.
  • Leer tekst uit een extern document plakken.
  • Leer hoe u afbeeldingen aan de voorgrond en als achtergrondafbeeldingen kunt toevoegen.
  • Leer creëren, veranderen en kiezen CSS-stijlen.
  • Leer werken met de weergavemodi Code en Code en Design.

Alvorens te beginnen met studeren,.

Tijdens het afronden van al het laboratoriumwerk maak je een volwaardige website voor de reisorganisatie.

De structuur van webpagina's wordt weergegeven in figuur 1.

Figuur 1 - Structuur van de uiteindelijke website

Als resultaat van dit lab zou u de volgende webpagina moeten hebben (Figuur 1.1):

Afbeelding 1.1 - Voorbeeld van webpagina

Het welkomstscherm gebruiken

Het welkomstscherm biedt snelle toegang tot de pagina's waarmee u onlangs hebt gewerkt, helpt u eenvoudig verschillende soorten pagina's te maken en biedt directe toegang tot enkele belangrijke onderwerpen waar u antwoorden op uw vragen kunt vinden. Het welkomstscherm verschijnt wanneer u het programma voor het eerst start of als er geen andere documenten zijn geopend.

Laten we het welkomstscherm gebruiken om manieren te verkennen om een ​​document te openen.

1. Om een ​​nieuwe lege pagina te openen, klikt u op de optie HTML in kolom Maak nieuw(Maken) (Figuur 1.2).

Afbeelding 1.2 - Welkomstscherm

2. Er gaat een nieuwe voor je open. HTML document (Figuur 1.3).

Afbeelding 1.3 - Nieuw HTML-venster

Een CSS-layout kiezen

Er zijn 32 bestanden in Adobe Dreamweaver CS4 CSS-lay-outs, elk ontwerp is anders. In deze taak zullen we één bestand selecteren en wijzigen.

  1. uitvoeren Bestand => Nieuw(Bestand => Nieuw) .
  2. Selecteer een kolom Blank Bladzijde (Lege pagina) in het dialoogvenster Nieuw Document(Document maken) .
  3. Selecteer alstublieft HTML in kolom Bladzijde Type(Paginatype) .
  4. Selecteer alstublieft 2 kolommen vast, links zijbalk, koptekst en voettekst(2 kolommen met vaste breedte, zijmarge naar links, kop- en voettekst) in een kolom Lay-out(Indeling) .
  5. Wijzig de standaardinstellingen van andere opties niet en klik op de knop. Creëren(Creëren).
  6. Selecteer alstublieft Bestand => Opslaan(Bestand => Opslaan).
  7. Opslaan als(Opslaan als) ga naar map lab1... Voer "Umbria.html" in en klik op de knop Opslaan.

De documentweergavemodus selecteren

De meeste webontwerpbewerkingen die we in het venster zullen uitvoeren Ontwerp maar onthoud dat bij het raam Document Er zijn vier weergavemodi (Figuur 1.4):

  • Ontwerp(Ontwerp) - presenteert de pagina in een browserachtige context;
  • Code(Code) - geeft de broncode van de pagina weer;
  • Code en Ontwerp(Code & Design) - Combineert en Weergavemodus Ontwerp en weergavemodus: Code... Klik op de knop Splitsen(split) om deze weergavemodus weer te geven.
  • Live(Live View) - Vertegenwoordigt de pagina in een live browser.

Afbeelding 1.4 - Weergavemodi

Weergavemodi zijn aan elkaar gerelateerd. Alle wijzigingen die in een ervan zijn aangebracht, zijn onmiddellijk zichtbaar in andere.

De paginatitel wijzigen

De paginatitel wordt weergegeven in de titelbalk van de browser. Paginatitels zijn een van de belangrijkste gebruikte elementen zoekmachines voor het indexeren van websites.

  1. Selecteer de tijdelijke aanduiding voor de tekst "Untitled Document" in de Titel(titel) werkbalken Document(Figuur 1.5).
  2. Typ daar "Umbria Hill Town Tours" en klik op Binnenkomen.

Afbeelding 1.5 - Documentwerkbalk

Titels wijzigen

Tijdelijke aanduidingen voor titels in Dreamweaver zijn eenvoudig te wijzigen.

1. Dubbelklik op de tijdelijke aanduiding-tekst Titel om het te selecteren. Vul dan "Reis Umbria with us" in (Figuur 1.6).

Afbeelding 1.6 - De tijdelijke aanduiding voor de titel wijzigen

2. Plaats uw cursor aan het begin van de tijdelijke aanduiding-tekst HoofdInhoud(Hoofdinhoud) en selecteer de hele zin.
3. Terwijl de tekst gemarkeerd is, voert u "Je hebt plezier. Wij zijn aan het werken." (Figuur 1.7)

Afbeelding 1.7 - De tijdelijke aanduiding voor inhoud wijzigen

4. Selecteer Bestand => Opslaan(Bestand => Opslaan).

Tekst invoegen

Platte tekst kan net zo gemakkelijk worden gewijzigd als koppen.

1. Plaats uw cursor voor de gewone tijdelijke aanduiding-tekst en selecteer helemaal om de tweede tijdelijke aanduiding voor de kop en alle alinea's te selecteren.
2. Druk op de toets Verwijderen om te verwijderen wat u hebt geselecteerd.
3. Blader naar het bestand Tekst. tekst bevindt zich in de map Lessen / lab1 / Tekst.txt.

4. Kopieer de tekst naar het klembord.
5. Plak de gekopieerde tekst onder het kopje 'Je hebt plezier. Wij zijn aan het werken." (Figuur 1.8).

Afbeelding 1.8 - Tekst invoegen

De tekst wordt automatisch opgemaakt als alinea's.

6. Voer op dezelfde manier "Umbria Hill Town Tours" in het veld in voettekst.
 7. Maak het einde van de regel door te klikken op Verschuiving+ Binnenkomen, voer vervolgens "Onze contacten" in.

Afbeeldingen invoegen

1. Selecteer alle inhoud in de zijbalk, inclusief de tijdelijke titel Zijbalk1 Inhoud en de volgende twee alinea's.
2. Klik op Verwijderen.
3. Klik op

en druk op Verwijderen in de tagkiezer onderaan het documentvenster om de tag te verwijderen

(Figuur 1.9).

Afbeelding 1.9 - Tagkiezer

4. Als het paneel Invoegen(Invoegen) is onzichtbaar, maak het zichtbaar door te selecteren Venster => Invoegen(Venster => Invoegen). uitvoeren Invoegen => Algemeen => Afbeeldingen(Invoegen => Algemeen => Afbeelding) (Figuur 1.10).

Afbeelding 1.10 - Paneel invoegen

5. Ga naar de bestanden in de map Lessen / lab1 / en selecteer gebeeldhouwde tuin.jpg en klik op OK (Figuur 1.11).

Afbeelding 1.11 - De afbeelding sculpted-garden.jpg invoegen

6. Plaats uw cursor aan het begin van de hoofdparagraaf die begint met de woorden "Kom en geniet" en selecteer Afbeeldingen op het paneel Invoegen.
7. Selecteer een afbeelding italiaanse-heuvel-stad.jpg en druk op Oke.
8. Voer "italian-hill-town" in als de zijtekst. Klik op Oke(Figuur 1.12).
9. Als het deelvenster Eigenschappen niet zichtbaar is, selecteert u Venster => Eigenschappen.
10. Nadat u de afbeelding hebt geselecteerd die u zojuist hebt ingevoegd, activeert u fltrt in het pop-upmenu Klas panelen Eigendommen.

De klasse fltrt is een afkorting voor float right, respectievelijk fltlft is float left.

11. Selecteer Bestand => Opslaan.

Afbeelding 1.12 - Afbeelding invoegen italian-hill-town.jpg

Stijlen selecteren en wijzigen CSS

Moderne webpagina's gebruiken trapsgewijze tabellen Stijlen (CSS) voor styling en lay-out. Een webpagina wordt vaak vergeleken met een stoel met drie poten, die HTML, CSS en JavaScript zijn, de componenten van de structuur. HTML is inhoud, dingen die u invoert in de weergavemodus Ontwerp. Bij CSS draait alles om uiterlijk en lay-out met bepaalde elementen, bloemen en achtergronden. JavaScript voegt een interactieve functie toe. In deze oefening verander je de achtergrondkleur. bestaande pagina, voeg afbeeldingen toe aan de achtergrond en stel een paar tekstattributen in. Al deze acties worden uitgevoerd met behulp van het paneel CSSstijlen(CSS-stijlen).

CSS kan worden gebruikt om stijleigenschappen van elk te wijzigen HTML-tag, bijvoorbeeld tag .

1. Selecteer Venster => CSS-stijlen. Het paneel gaat open CSS-stijlen.
2. Klik indien nodig op de knop Alle op het paneel CSS-stijlen, om te veranderen huidige modus Huidig.

Alle modus geeft alle CSS-stijlen weer die aan de huidige pagina zijn gekoppeld. U moet een document hebben geopend in de documentviewer om stijlen in het paneel te zien CSS-stijlen.

3. Open het item