Hvordan stil med Kompozer

Hvordan stil med Kompozer


Profesjonelle webdesignere ofte skrive komplekse CSS-kode fra minnet. CSS, en forkortelse for Cascading Style Sheets, består av utsagn som bestemmer veien websideelementer se. Kompozer, en web-utviklingsverktøy, kan hvem som helst å lage profesjonelle websider uten å skrive HTML. Programmet har også en innebygd CSS Style Sheet redaktør som bygger CSS klasser automatisk. Alt du trenger å gjøre er å velge elementet du ønsker å style, og bruke musen til å velge ønsket styling attributter.

Bruksanvisning

Opprett HTML-dokument

1 Start Kompozer, klikk på "Fil" og "Create" for å opprette et nytt dokument. Kompozer skaper en ny HTML-dokument og viser det i redigeringspanelet.

2 Lim inn følgende kode i dokumentets hoveddel:

<Input id = "Text1" type = "text" class = "textboxClass" />

Dette skaper en tekstboks som refererer til en CSS-klasse som heter "textboxClass."

3 Klikk på "Preview" for å se en forhåndsvisning av siden. Legg merke til at tekstboksen har ingen styling.

4 Trykk "F11" og skriv inn et navn på HTML-dokumentet i "Page Title" tekstboksen. Klikk "OK", deretter "Lagre". Den CSS Stil åpnes.

5 Klikk på knappen som leser "Style Applied til alle elementer av klasse." Finn rullegardinpilen nederst i vinduet og klikk ".textboxClass."

Sett Styling attributter

6 Klikk på "Opprett stil Rule" for å åpne en stil regel panel. Klikk ".textboxClass" for å velge det. Denne klassen navn - med en periode i begynnelsen - er den samme klassen navn som tekstboks referanser i forrige avsnitt. CSS-klasse navn som begynner med perioder selv om ingen periode vises i selve definisjonen HTML-kode. Klikk på "Text" -kategorien for å vise attributter som du kan angi for å endre utseendet på teksten i tekstboksen.

7 Skriv "1.2em" i Font Size tekstboksen og klikk på "Color" boksen for å åpne en dialogboks farge vindu som inneholder farger. Klikk på en av fargene, og klikk "OK."

8 Klikk på "Bakgrunn" -kategorien for å vise innstillinger som lar deg stille inn teksten boksens bakgrunnsegenskaper. Klikk på "Color" boksen, og klikk deretter fargen du vil bruke som tekstboksen bakgrunnsfarge.

9 Klikk på "OK", klikk på "Borders" -kategorien for å vise kanter. Klikk på "alle fire sider Bruk samme Border Style" boksen for å plassere en hake der, skriv "2 piksler" - uten anførselstegn - i Bredde tekstboksen. Klikk på "Color" -knappen og velg en farge som beskrevet i trinn 3.

10 Klikk på "OK". Den CSS Stil vinduet lukkes. Legg merke til at tekstboksen nå har de visuelle egenskapene du definert i CSS-stilark vinduet.

Hint

  • Eksperimentere med de andre kategoriene i CSS stilark vinduet. Disse kategoriene hjelpe deg å sette noen CSS eiendom. Hvis du vil vise CSS-kode genereres av Kompozer, klikk på "Source" -knappen nederst Kompozer og finn dokumentet er "head" -seksjonen, med CSS-klasse som heter ".textboxClass" som inneholder alle de attributtene og verdier du har valgt.