Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen



Weten een beetje over Dreamweaver en het maken van websites? U hoeft niet te worden een pro naar Dreamweaver gebruiken om een eenvoudig en mooi ogende website wanneer u een ingebouwde pagina of lay-out.

Instructies

Selecteer een CSS monster of CSS lay-out

1

Een nieuwe site voorbereiden en aanwijzen van de hoofdmap van een site. Wanneer u klaar om te beginnen uw eerste pagina bent, er zijn verschillende opties in het bestand > Nieuw menu. De volgende paar stappen zal uitleggen de verschillende keuzes. In paragraaf 2 leert u over het wijzigen van de CSS-regels voor de voorbeeldpagina of CSS lay-out die u selecteert.

2Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Selecteer Bestand > Nieuw. In de afbeelding ziet u dat er pagina van monster - Starter Page (thema) - gezondheid & de voeding (Home Page) is geselecteerd, samen met de keuze van Doctype. De rechter kolom geeft u een miniatuurweergave van de start-pagina uiterlijk. Het is een twee-kolom lay-out met een groen gebaseerde kleurenschema.

Elk monster pagina thema wordt geleverd met een home pagina-indeling en vier andere pagina's in een overeenkomende ontwerp. U kunt gebruiken en wijzigen van een van deze om uw site te maken.

3

Klik op maken. Dreamweaver vraagt u waar de HTML-bestanden (hoofdmap van uw site) op te slaan, en wat u moet het bestand een naam. Aangezien dit een huis pagina monster, geef deze de naam index.html.

4Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Dreamweaver toont u een ander dialoogvenster, vraagt u de andere bestanden die nodig zijn voor de gewenste voorbeeldpagina kopiëren. Klik op kopiëren.

5

U kunt uw site ook starten vanuit een lege pagina met een CSS-indeling. Kies Bestand > Nieuw. Selecteer lege pagina > HTML > en een van de indelingen. In de afbeelding ziet u 3 kolom vloeistof, kop- en voettekst geselecteerd.

Aan de rechterkant zie je een miniatuur van de lay-out met symbolen aangegeven of de lay-out is vergrendeld (vaste breedte) of elastisch. Merk op dat de lay-outs alleen elementaire black, white en gray zijn. Ze kleur keuzes zijn allemaal voor het grijpen.

Voordat u op Aanmaken klikt, zijn er verschillende belangrijke beslissingen. Kies een Doctype. Bepaal of om de CSS in de kop van het document of in een nieuwe CSS-bestand, en kiezen of om een andere CSS bestand naast de indeling CSS te koppelen. Dreamweaver heeft stijlpagina's alleen voor de kleur van de tekst in het bestand > nieuwe menu onder voorbeeld - de pagina van de CSS-stijlpagina categorie die kan worden aangesloten, ook. Of u kunt een andere hebt u op dit moment van het opmaakmodel koppelen.

Als u een van de ingebouwde stylesheets te voegen samen met de CSS-lay-out regels, navigeer naar de map van uw Dreamweaver ter uw programma archief (toepassingen) en configuratie hebt gevonden > BuiltIn > css om een van de ingebouwde kleurenschema's te selecteren.

6Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Klik op maken. Dreamweaver vraagt waar op te slaan de CSS lay-out. Wijzig niet de naam die Dreamweaver heeft gegeven het CSS-bestand, tenzij u wilt wijzigen van elk exemplaar van het in de HTML- en CSS die zal worden gemaakt.

De naam thrColLiqHdr.css aangegeven de lay-out in het voorbeeld dat ik gebruik: 3 kolom vloeistof, koptekst en voettekst

7Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Dreamweaver zal de HTML-pagina openen in de ontwerpweergave met de CSS lay-out die u hebt gekozen. Opslaan in de hoofdmap van uw site met een naam die u selecteert. Vervolgens kunt u de wijzigingen.

De voorbeelden zijn alle gevuld met dummy tekst, die u eenvoudig selecteren om te wijzigen in uw eigen inhoud.

Wijzigen of toevoegen naar het trapsgewijze Opmaakmodel

8Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


U krijgt veel hulp van Dreamweaver wanneer u bent klaar om uw nieuwe pagina voor uw eigen gebruik te wijzigen. De CSS is rijkelijk toegelicht om uit te leggen wat elke regel doet aan uw pagina.

9Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Wanneer u een gedeelte van het document dat u wilt wijzigen hebt geselecteerd, is het gemakkelijk om te zien welke regels van toepassing op met behulp van het paneel CSS-stijlen en de hints in de ontwerpweergave. Zie de rode ovalen in het beeld markeren de h1 in de koptekst, de paginastructuur in de tagkiezer die tot leidt de de h1, en de CSS-regel geselecteerd in het deelvenster Stijlen die overeenkomt met die pagina-element. Zie close-up weergaven in stap 3.

10Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Een nauwere uitzicht op de labelkiezer en de overeenkomende CSS-regel u tonen hoe te vinden van de regel die u wilt wijzigen om te maken van een pagina-ontwerp uw eigen.

11Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Wanneer u de juiste regel gemarkeerd hebt gemaakt, klikt u op het potloodpictogram in het paneel CSS-stijlen de regel om te maken van eventuele wijzigingen, zoals het wijzigen van de kleur van het lettertype, zoals in de afbeelding bewerken.

12Hoe te gebruiken en Dreamweaver voorbeeldpagina's en CSS lay-outs wijzigen


Nieuwe regels met behulp van een soortgelijk proces om erachter te komen een nieuwe selector toevoegen. Bijvoorbeeld, als u wilt toevoegen een regel voor afbeeldingen op het #mainContent-gebied, kijken de specificiteit van
.thrColLiqHdr #mainContent
Uw nieuwe selector moet ten minste zo specifiek als dat, maar de img-selector moet toevoegen aan de mix.

Klik op het plus pictogram om een nieuwe regel te voegen, en gebruik een selector zoals
.thrColLiqHdr #mainContent img
uw nieuwe regel maken.

Tips & waarschuwingen

  • De opties in het bestand > Nieuw menu kan worden gecombineerd, meer dan één stylesheet kan worden aangesloten op een nieuwe pagina. Ontdek alle mogelijkheden.
  • Zodra u klaar bent met het wijzigen van de CSS-bestanden, verwijder de opmerkingen om te besparen op bestandsgrootte.
  • Als u een Windows-gebruiker bent, zult u merken een klein verschil in uiterlijk tussen uw versie van Dreamweaver en wat je ziet in deze het schermschoten gemaakt op een Mac. Niet te zorgen, zal uw Windows-versie enkel de zelfde manier werken maar met een Windows kijken.
  • Wees gewaarschuwd dat sommige van de voorbeeldpagina (thema) ontwerpen tabellen gebaseerde lay-outs gebruiken. Dit is niet de toegankelijk keuze. Met behulp van een van de CSS lay-outs is toegankelijker.