HTML: Design og layout Tips

Konverter Hex til RGB

Dette er et problem, som plagede mig måneder. Min grafisk program accepterer farver som RGB (rød, grøn, blå) værdierne imidlertid den farve, jeg ønskede som en baggrund, jeg kun kendte som hexidecimal værdi. Efter måneders gætte på RGB-værdier og søge på nettet for et hjælpeprogram, der konverterer det til dig, jeg fandt løsningen.

For RGB og HEX-værdier, er alle farver lavet af kombinationer af standard farverne rød, grøn og blå, med hver farve værdi mellem 0 og 255.

Hex værdier er (simpel version følger) koder, der anvendes til at repræsentere de samme værdier som RGB, og se sådan FFCC00. Først bryde det op i 3 lige store dele, som er de værdier af rød, grøn og blå, hhv. Vores stikprøve nu ser sådan ud:
rød = FF, grøn = CC, blå = 00.

Nu konverteringen:
1) Åbn Windows lommeregner. Klik på menuen "Vis" og vælg "videnskabelig"
2) Sørg for, at afkrydsningsfeltet ved siden af ​​"Hex" er markeret
3) Indtast den første værdi, FF. Derefter markere feltet, der siger "december", og noter værdien, 255
4) Gentag samme procedure for den anden værdi, hvilket resulterer i 204
5) Den sidste værdi er enkelt og kræver ingen konvertering fordi nul er nul. Dette gælder også, hvis du støder på en værdi som "0A", hvor du bare har brug for at indtaste "A". Men hvis det var "A0", ville du nødt til at komme ind i "0" så godt.

Så vores slutresultat, FFCC00, er lig med 255, 204 og 0 decimaler (og RGB-værdier). Dette virker også til konvertering fra RGB til Hex!

Definer dine billeder

Plaget af langsom-loading sider? Her er et tip, der vil give det udseende af hurtigere indlæsning sider. Definer højde og bredde af billederne på din webside, som denne:

Ved at gøre dette, skal du oprette en pladsholder for det billede, som gør det muligt for browseren at fortsætte indlæsning af sidens tekst før billedet er downloadet helt. Udseendet af tekst giver den illusion, at siden indlæses hurtigere, og det gør en forskel for dine brugere.

Komprimer din grafik

Brug af grafiske billeder på din webside forbedrer brugerens oplevelse og gør plain sider fryd for øjet. Dog vil den gennemsnitlige surfer vente ikke mere end 25 sekunder for en side til at indlæse, selvom afmatningen skyldes deres forbindelse, ikke din side.

For at sikre at din side indlæses hurtigt nok til at holde surfer og stadig tillade en stor mængde af frihed til at bruge den grafik, du ønsker, anbefaler jeg stærkt at anvende et grafisk kompression værktøj. Dette værktøj vil komprimere dine .gif eller .jpg-filer uden at ofre meget i vejen for billedkvaliteten.

Giv alternativ tekst

Du har lige brugt utallige timer at skabe et fyldt med smukke grafik og effekter ekstraordinær webside. Nu kommer de surfer, der har slukket grafik i deres browser til at hjælpe med at fremskynde downloads. De er helt tabt på dit websted og kan ikke engang finde dine navigationsknapperne. AAARRRGGGHHH!

Lad ikke dette ske for dig. Efter alt, du har brugt timer efter timer skabe sider, der formidler dit budskab til verden; sørge for, at de alle kan se det. Du skal blot bruge ALT attribut i tag, som så:

Levere kvalitet

Den bedste måde at etablere et navn for dig selv og din hjemmeside er at levere kvalitet indhold, uanset om det er i form af information, eller et produkt eller en service. Lad dig ikke narre til at tro, at bare fordi XYZ browser kommer ud med en ny forbedring, skal du bruge den til at bevise, at du er med tiden. I stedet adskille dig fra
kvaliteten af ​​indhold, som du præsenterer.

Kontrolsted med en enkelt pixel

Har du nogensinde ønsket mere kontrol over, hvor din grafik på siden? HTML giver tilstrækkelig formatering for de fleste mennesker og hjemmesider. Men hvis du ligesom mig, det er ikke nok.

Denne enkle trick vil give dig pixel-niveau kontrol over placeringen af ​​billeder (selvom du også kan bruge det til tekst, tabeller, etc.). Det første skridt er at skabe en 1 pixel med 1 pixel gif billede (gennemsigtig baggrund virker bedst, eller lave flere forskellige farvede gifs) med din foretrukne software. Dernæst bare bruge billedet i din kode udvide sin bredde (og / eller højde) for at opfylde dine behov.