Hoe u aangepaste mediaquery's maakt in Dreamweaver - dummies

Wanneer u pagina's maakt met functies voor vloeiende rasterlayout, maakt Dreamweaver automatisch de overeenkomstige mediaquery's voor u, maar u kunt uw eigen aangepaste mediaquery's maken en deze gebruiken om uw eigen CSS-regels te targeten.

Mediaquery's worden al meer dan een decennium op internet gebruikt voor andere doeleinden, zoals het maken van een alternatief paginaontwerp dat is geoptimaliseerd voor afdrukken. Een mediaquery bestaat uit een mediatype, zoals scherm of afdruk (de twee meest voorkomende) en een optionele uitdrukking die controleert op bepaalde functies, zoals de hoogte of breedte. De meest gebruikte mediatypen zijn

• alles: geschikt voor alle apparaten

• afdrukken: ontworpen voor afdrukvoorbeeld en om weer te geven wanneer een pagina wordt afgedrukt

• scherm: voor inhoud die wordt weergegeven op elk scherm

het type handheld-medium wordt bijna nooit meer gebruikt en kon het beste alleen worden gebruikt voor mobiele telefoons en andere apparaten met kleine schermen, beperkte bandbreedte en monochrome beeldschermen die alleen bitmapafbeeldingen ondersteunen. iOS-apparaten en de meeste smartphones worden gecategoriseerd als schermmediatypen.

Stijlen toepassen op uw Dreamweaver-pagina-ontwerpen

U kunt stijlpagina's als externe bestanden toepassen door ze te koppelen of te importeren, of u kunt ze opnemen als interne stijlen in de kopregio van uw pagina's HTML-code. U kunt zelfs apparaten targeten met inline stijlen - een handige optie als u een specifieke regel alleen op bepaalde apparaten wilt toepassen.

U kunt een combinatie van deze opties gebruiken en u kunt meerdere externe stijlpagina's naar dezelfde webpagina importeren of koppelen. Nadat u het mediatype hebt gedefinieerd met de mediafuncties die u wilt targeten, geeft u op hoe de stijlen op de pagina moeten worden toegepast.

Mediaquery's in externe stijlbladen gebruiken in Dreamweaver

U kunt mediaquery's met externe stijlbladen op twee manieren gebruiken. De eerste optie is om naar een externe stijlpagina te linken met meerdere sets met stijlen gescheiden door mediaquery's. Dat is de manier waarop Dreamweaver de stijlen koppelt wanneer u een vloeiende rasterlay-out maakt.

De tweede optie is om twee of meer afzonderlijke externe stijlpagina's aan elke HTML-pagina te koppelen en de mediaquery's op elk stijlblad op te nemen. Hoe dan ook, de code voor de CSS en HTML wordt opgeslagen in afzonderlijke bestanden en de tag verbindt ze.

Of u alle mediaquery's en gerelateerde stijlen in één bestand of afzonderlijke CSS-bestanden opslaat, u kunt ook extra stijlpagina's aan elke HTML-pagina koppelen. U kunt bijvoorbeeld een afzonderlijke set stijlen opnemen in een aparte stijlpagina die is ontworpen om de pagina op te maken wanneer deze naar een printer wordt verzonden.

Mediaquery's maken in Dreamweaver

U kunt in Dreamweaver zo veel mediaquery's maken als u wilt en u kunt ze opnemen in één CSS-bestand of in veel. Ga als volgt te werk om een ​​nieuwe mediaquery in Dreamweaver te maken:

1. Open het CSS Designer-venster door Venster → CSS-stijlen te kiezen.

2. Selecteer een bestaand stijlblad in het deelvenster Bronnen of maak een nieuw stijlblad door op het plusteken (+) in het deelvenster Bronnen te klikken.

   

3. Klik op het plusteken (+) in het paneel @Media in het deelvenster CSS-ontwerp.

   Het dialoogvenster Define Media Queries wordt geopend.

4. Selecteer Media in de eerste vervolgkeuzelijst en Scherm in de tweede vervolgkeuzelijst.

   

5. Plaats de cursor rechts van elk van de vervolgkeuzelijsten om het plusteken te laten verschijnen en klik vervolgens op het plusteken om een ​​nieuw veld toe te voegen.

   Een nieuw veld verschijnt in het dialoogvenster Media Queries zodat u de richting kunt opgeven. Dit veld is optioneel, maar wordt vaak gebruikt als u verschillende ontwerpen wilt maken voor landschaps- en portretweergaven op een tablet of een smartphone. Als u geen extra lay-outs wilt maken op basis van oriëntatie, kunt u dit veld verwijderen door op het minteken te klikken.

   Opmerking: De plus- en mintekens worden alleen zichtbaar wanneer u met uw cursor over de rechterkant van het dialoogvenster beweegt.

6. Plaats uw cursor rechts van de vervolgkeuzelijsten, klik nogmaals op het plusteken om een ​​veld toe te voegen en voer een voorwaarde voor minimale breedte in.

   Het veld Min. Breedte verschijnt in het dialoogvenster Mediaquery's, zodat u de minimale breedte kunt opgeven die u wilt gebruiken om de query te targeten. De minimale breedte is belangrijk omdat de mediaquery de stijlen target op basis van het minimum- tot maximumbreedtebereik dat u opgeeft, dat wordt behandeld in de volgende stap.

7. Beweeg uw cursor naar de rechterkant van de vervolgkeuzelijsten, klik een derde maal op het plusteken om een ​​veld toe te voegen en voer de maximale breedteconditie in.

   Het veld Max. Breedte verschijnt in het dialoogvenster, zodat u de maximale breedte kunt opgeven die u wilt gebruiken om de query te richten.

8. Klik op OK.

   Het dialoogvenster Mediaquery's wordt gesloten en de mediaquery wordt gegenereerd en toegevoegd aan het stijlblad dat u hebt geselecteerd in het deelvenster Bronnen in het deelvenster CSS-ontwerp.

9. Herhaal stap 3-8 om extra mediaquery's aan een geselecteerd stijlblad toe te voegen. Herhaal stappen 2-8 om mediaquery's aan een ander stylesheet toe te voegen.

Hoewel u mediaquery's in zoveel verschillende stylesheets kunt opslaan als u wilt, is het efficiënter om ze allemaal in één externe stylesheet op te slaan, omdat elk stylesheet afzonderlijk van de server moet worden gedownload, waardoor meer bandbreedte nodig is. Het downloaden van een lang stijlblad met meerdere mediaquery's is iets efficiënter dan het downloaden van meerdere stylesheets.