Video: Afbeeldingen gebruiken - Les 7 - Website leren bouwen - Basis HTML & CSS (Dutch/NL Tutorial) 2024
Met de minimalistische hulpmiddelen voor beeldbewerking van Dreamweaver kunt u rudimentaire beeldbewerking uitvoeren, zoals vergroten / verkleinen en bijsnijden.U vindt die hulpmiddelen in de eigenschappeninspector.
U maakt geen afbeeldingen in Dreamweaver. Daarvoor biedt Adobe Illustrator (voor illustraties, grafische tekst, pagina-achtergrondafbeeldingen, navigatie pictogrammen, enzovoort) en Photoshop (voor het voorbereiden van foto's voor het web), evenals andere hulpmiddelen. Als algemene regel, blijf bij het voorbereiden van afbeeldingen voor het web in die programma's.
Als u afbeeldingen wilt invoegen, moet u ervoor zorgen dat u in de ontwerpweergave werkt (of in de gesplitste weergave met uw cursor in de ontwerpzijde van het venster.) U hebt twee basispaden: invoegen vanaf uw machine of een kopie gebruiken- en -pasta-techniek. In beide gevallen moet je in de ontwerpweergave staan (kies Beeld → Ontwerp of kies voor Gesplitste weergave e Beeld → Code en ontwerp) om afbeeldingen te zien terwijl u ze plakt of insluit.
De kans is groot dat de HTML-pagina waarin u een afbeelding insluit, een tekst bevat. Dus, de eerste stap is om erachter te komen waar je de afbeelding wilt laten verschijnen.
In tegenstelling tot het gedrukte ontwerp, worden afbeeldingen op webpagina's niet op specifieke locaties geplaatst. Dat drijft ontwerpers noten aan.
Ga als volgt te werk om een afbeeldingsbestand van uw computer in een open HTML-webpagina in Dreamweaver in te voegen:
-
Klik in het documentvenster op het punt waar de afbeelding moet worden ingevoegd.
In deze stap zoekt u waar in uw HTML-code de afbeelding wordt ingevoegd. Nogmaals, waar en hoe de afbeelding wordt weergegeven, wordt gedefinieerd met CSS.
-
Kies Invoegen → Afbeelding.
-
Navigeer in het dialoogvenster Afbeelding selecteren en open een bestand op uw computer.
Als de afbeelding die u selecteert zich buiten uw sitemap bevindt, wordt een nuttig dialoogvenster weergegeven waarin u wordt gevraagd een kopie van de afbeelding op te slaan naar de hoofdmap van uw Dreamweaver-site.
-
Klik op Ja.
-
Klik op Opslaan in het dialoogvenster Bestand kopiëren als.
-
-
Toegankelijkheidskenmerken definiëren.
Het dialoogvenster Toegankelijkheidskenmerken van Dreamweaver Image Tag wordt standaard weergegeven voordat een afbeelding definitief in een pagina wordt ingevoegd.
Het veld Alternatieve tekst is de belangrijkste van de twee opties in dit dialoogvenster. Het toont tekst die hardop wordt voorgelezen in leessoftware voor slechtziende bezoekers, en die ook wordt weergegeven in browse-omgevingen waar beeldweergave is uitgeschakeld. Alternatieve tekst kan en moet vaak hoofdletters en kleine letters, spaties en speciale tekens bevatten. Als visageassistente bezoekers of mensen in browseromgevingen die geen afbeeldingen ondersteunen, deel uitmaken van uw doelgroep, kunt u overwegen HTML-bestanden te maken met meer substantiële afbeeldingsbeschrijvingen.Dergelijke bestanden zijn gekoppeld aan de afbeelding door een koppeling te definiëren in het vak Lange beschrijving in het dialoogvenster Toegankelijkheidskenmerken afbeeldingstag.
Klik op OK om de afbeelding in te voegen.
-
Op dit moment hebt u de afbeelding alleen ingevoegd. Pagina-ontwerp, inclusief het plaatsen van afbeeldingen en doorlopende tekst eromheen, wordt beheerd met CSS