ניצן פאָנץ, געמארקן, און בילדער צו באַצירן העאַדלינעס
העאַדלינעס זענען געוויינטלעך אויף רובֿ וועב זייַטלעך. אין פאַקט, שיין פיל טעקסט דאָקומענט טענדז צו האָבן בייַ מינדסטער איין כעדליין אַזוי אַז איר וויסן דעם טיטל פון וואָס איר לייענען. די כעדליינז זענען קאָדעד ניצן די HTML כעדינג עלעמענטן - ה 1, ה 2, ה 3, ה 4, ה 5, און ה 6.
אויף עטלעכע זייטלעך, איר קען געפֿינען אַז כעדליינז זענען קאָדעד אָן ניצן די עלעמענטן. אַנשטאָט, כעדליינז קענען נוצן פּאַראַגראַפס מיט ספּעציפיש קלאַס אַטריביוץ מוסיף צו זיי, אָדער דיוויזשאַנז מיט קלאַס עלעמענטן. די סיבה איך אָפֿט הערן וועגן דעם אומרעכט פיר איז אַז די דיזיינער "טוט נישט ווי די וועגווייַזער קוקן". דורך פעליקייַט, כעדינגז זענען געוויזן אין דרייסט און זיי זענען גרעסער אין גרייס, ספּעציעל די ה 1 און ה 2 עלעמענטן וואָס אַרויסווייַזן אין פיל גרעסער שריפֿט גרייס ווי די אנדערע טעקסט פון אַ בלאַט. האַלטן אין מיינונג דעם איז בלויז די פעליקייַט קוקן פון די עלעמענטן! מיט קסס, איר קענען מאַכן כעדינג קוק אָבער איר ווילן! איר קענען טוישן די שריפֿט גרייס, אַראָפּנעמען די דרייסט, און אַזוי פיל מער. כעדינגז זענען די געהעריק וועג צו קאָד אַ זייַטל כעדליינז. דאָ זענען עטלעכע סיבות פארוואס.
פארוואס נוצן העאַדינג טאַגס גאַנץ ווי דיווס און סטילינג
זוכן ענגינעס ווי קאָפּע טאַגס
דעם איז דער בעסטער סיבה צו נוצן כעדינגז, און נוצן זיי אין די ריכטיק סדר (הייסט ה 1, דאַן ה 2, דאַן ה 3, אאז"ו ו). זוך ענדזשאַנז געבן די העכסטן ווייטינג צו טעקסט אַרייַנגערעכנט ין כעדינג טאַגס ווייַל עס איז אַ סעמאַנטיק ווערט צו דעם טעקסט. אין אנדערע ווערטער, דורך די לייבלינג דיין בלאַט טיטל ה 1, איר זאָגן די זוכן מאָטאָר שפּין אַז דאָס איז דער # 1 פאָקוס פון דער בלאַט. H2 כעדינגז האָבן # 2 טראָפּ, און אַזוי אויף.
איר טאָן ניט געדענקען וואָס קלאסן איר געוויינט צו דעפינירן דיין העאַדלינעס
ווען איר וויסן אַז אַלע אייערע וועב זייַטלעך וועלן האָבן אַן H1 וואָס איז דרייסט, 2em, און געל, איר קענען דעפינירן דעם אַמאָל אין דיין סטיילשיט און ווערן געטאן. 6 חדשים שפּעטער, ווען איר לייגט אן אנדער בלאַט, איר נאָר לייגן אַן H1 קוויטל צו די שפּיץ פון דיין בלאַט, איר טאָן ניט האָבן צו צוריקקומען צו אנדערע בלעטער צו געפינען אויס וואָס מאָדע שייַן אָדער סאָרט איר געוויינט צו דעפינירן די הויפּט קאָפּ און סאַב-קעפ.
זיי צושטעלן אַ שטאַרק בלאַט אַוטליין
אָוטלינעס מאַכן טעקסט גרינגער צו לייענען. אַז ס וואָס רובֿ יו. עס. שולן געלערנט סטודענטן צו שרייַבן אַ אַוטליין איידער זיי שרייַבן די פּאַפּיר. ווען איר נוצן כעדינג טאַגס אין אַ אַוטליין פֿאָרמאַט, דיין טעקסט האט אַ קלאָר סטרוקטור וואָס ווערט קלאָר זייער געשווינד. Plus, עס זענען מכשירים וואָס קענען אָפּשאַצן די בלאַט אַוטליין צו צושטעלן אַ סינאַפּסיס, און די פאַרלאָזנ אויף די כיידינג טאַגס פֿאַר די אַוטליין סטרוקטור.
דיין זייַט וועט מאַכן זינען אפילו מיט די סטיילז פארקערט אויסגעלאשן
ניט אַלע קענען זען אָדער נוצן נוסח שיץ (און דאָס קומט צוריק צו # 1 - זוכן ענדזשאַנז מיינונג די אינהאַלט (טעקסט) פון דיין בלאַט, נישט די נוסח שיץ). אויב איר נוצן טראפיק טאַגס, איר מאַכן דיין בלעטער מער צוטריטלעך ווייַל די כעדליינז צושטעלן אינפֿאָרמאַציע אַז אַ דיוו צעטל וואָלט נישט.
עס איז נוציק פֿאַר פאַרשטעלן לייענער און וועבזייַטל אַקסעססיביליטי
געהעריק נוצן פון כעדינגז קריייץ אַ לאַדזשיקאַל סטרוקטור צו אַ דאָקומענט. דאָס איז וואָס פאַרשטעלן לייענער וועט נוצן צו לייענען "אַ פּלאַץ צו אַ באַניצער מיט זעאונג ימפּערמאַנט, וואָס מאכט דיין פּלאַץ צוטריטלעך צו מענטשן מיט דיסאַבילאַטיז.
סטייל די טעקסט און פאָנט פון דיין העאַדלינעס
די יזיאַסט וועג צו באַוועגן אַוועק פון די "גרויס, דרייסט, און מיעס" פּראָבלעם פון כעדינג טאַגס איז צו סטיל די טעקסט די וועג אַז איר ווילן צו קוקן. אין פאַקט, ווען איך בין ארבעטן אויף אַ נייַ וועבזייַטל, איך טיפּיש שרייַבן די פּאַראַגראַף, ה 1, ה 2, און ה 3 סטיילז ערשטער זאַך. איך יוזשאַוואַלי שטעקן מיט פּונקט שריפֿט משפּחה און גרייס / וואָג. פֿאַר בייַשפּיל, דאָס קען זיין אַ פּרילימאַנערי נוסח בויגן פֿאַר אַ נייַ פּלאַץ (דאָס זענען נאָר עטלעכע בייַשפּיל סטיילז אַז קען זיין געניצט):
body, html {margin: 0; וואַטן: 0; } פּ {שריפֿט: 1 אַריאַל, גענעוואַ, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em אַריאַל, גענעוואַ, Helvetica, sans-serif; }איר קענען מאָדיפיצירן די פאַנץ פון דיין כעדינג אָדער טוישן די טעקסט סטיל אָדער אַפֿילו די טעקסט קאָליר . אַלע פון זיי וועט קער אייער "מיעס" כעדליין אין עפּעס מער וויבראַנט און אין בעכעסקעם מיט דיין פּלאַן.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; גרענעץ: 0; וואַטן: 0; color: # e7ce00; }באָרדערס קענען פֿאַרשטעלן זיך העאַדלינעס
געמארקן זענען אַ גרויס וועג צו פֿאַרבעסערן דיין כעדליינז. און געמארקן זענען גרינג צו לייגן. אָבער טאָן ניט פאַרגעסן צו עקספּערימענט מיט די געמארקן - איר טאָן ניט דאַרפֿן אַ גרענעץ אויף יעדער זייַט פון דיין קאָפּ. און איר קענען נוצן מער ווי נאָר קלאָר נודנע געמארקן.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; גרענעץ: 0; וואַטן: 0; color: # e7ce00; border-top: solid # e7ce00 מיטל; ברעג-דנאָ: דאָטטעד # ע 7ce00 דין; ברייט: 600 פּקס; }איך צוגעגעבן אַ שפּיץ און דנאָ גרענעץ צו מיין מוסטער כעדליין צו באַקענען עטלעכע טשיקאַווע וויזשאַוואַל סטיילז. איר קען לייגן געמארקן אין קיין וועג אַז איר געוואלט צו דערגרייכן דעם פּלאַן נוסח איר ווילן.
לייג הינטערגרונט בילדער צו דיין כעדליינז פֿאַר אפילו מער פּיזזז
פילע וועב זייטלעך האָבן אַ כעדער אָפּטיילונג אין די שפּיץ פון די בלאַט וואָס כולל אַ קאָפּ - טיפּיקלי די פּלאַץ טיטל און אַ גראַפיק. רובֿ דיזיינערז טראַכטן פון דעם ווי צוויי באַזונדער עלעמענטן, אָבער איר טאָן ניט האָבן צו. אויב די גראַפיק איז דאָרט נאָר צו באַצירן די כעזשבן, דעמאָלט פארוואס טאָן ניט לייגן עס צו די כעדינג סטיילז?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #fff url ("fancyheadline.jpg") איבערחזרן-רענטגענ דנאָ; וואַטן: 0.5 ו 0 90 פּקס 0; טעקסט-אַריין: צענטער; גרענעץ: 0; border-bottom: solid # e7ce00 0.25em; color: # e7ce00; }די טריק צו דעם קאָפּ איז אַז איך וויסן מיין בילד איז 90 בילדצעלן הויך. אַזוי איך לייגן פּלאַדינג צו די דנאָ פון די כעדליין פון 90 פּקס (וואַטן: 0.5 0 90 פּקס 0 פּ;). איר קענען שפּילן מיט די מאַרדזשאַנז, שורה-הייך, און וואַטן צו באַקומען די טעקסט פון דער כעזשבן צו ווייַזן פּונקט ווו איר ווילן עס.
איין זאַך צו געדענקען ווען ניצן בילדער איז אַז אויב איר האָבן אַ אָפּרופיק וועבזייַטל (וואָס איר זאָל) מיט אַ אויסלייג וואָס ענדערונגען באזירט אויף פאַרשטעלן סיזעס און דעוויסעס, איר קאָפּע וועט ניט שטענדיק זיין די זעלבע גרייס. אויב איר דאַרפֿן דיין כעזשבן צו זיין אַ פּינטלעך גרייס, דאָס קען גרונט פּראָבלעמס. עס איז איינער פון די סיבות וואָס איך בכלל ויסמיידן הינטערגרונט בילדער אין אַ כעדער, ווי קיל ווי זיי קענען מאל קוקן.
בילד רעפּלאַסעמענט אין העאַדלינעס
דעם איז אן אנדער פאָלקס טעכניק פֿאַר וועב דיזיינערז ווייַל עס אַלאַוז איר צו שאַפֿן אַ גראַפיקאַל קאָפּצעטל און פאַרבייַטן דעם טעקסט פון די כעדינג קוויטל מיט דעם בילד. דעם איז פאקטיש אַן אַנטיקוועד פיר פון וועב דיזיינערז האט צוטריט צו זייער ווייניק פאַנץ און געוואלט צו נוצן מער עקזאָטיש פאַנץ אין זייער אַרבעט. די העכערונג פון וועב פאַנץ האט טאַקע געביטן ווי דיזיינערז צוגאַנג זייטלעך. העאַדלינעס קענען איצט זיין שטעלן אין אַ ברייט פאַרשיידנקייַט פון פאַנץ און בילדער מיט די פאַנץ עמבעדיד ביסט ניט מער דארף. ווי אַזאַ, איר וועט געפֿינען בלויז CSS בילדער פֿאַר כעדליינז אויף עלטערע זייטלעך וואָס האָבן נישט נאָך דערהייַנטיקט צו מער מאָדערן פּראַקטאַסאַז.
אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 9/6/17