آموزش طراحی وب سایت - مقدماتی - قسمت سوم
آموزش طراحی وب سایت - مقدماتی - قسمت سوم
در این جلسه آموزشی طراحی وب سایت مباحث : فرمت کردن متن ، اندازه فونت ، رنگ فونت ، لیست و ... مطرح می شود .
جلسه سوم :
در این جلسه آموزشی طراحی وب سایت مباحث زیر مطرح می شود :
- فرمت کردن متن
- بالانویس و زیرنویس کردن متن
- تغییر نوع فونت در طراحی وب سایت
- اندازۀ فونت
- رنگ فونت
- تعیین رنگ پس زمینه ی صفحه
- تنظیم اندازۀ حاشیه ی صفحه
- لیست مرتب
- لیست نامرتب
- لیست تو در تو در طراحی وب سایت
- خلاصه جلسه سوم آموزش طراحی سایت
فرمت کردن متن
سبک فونت
برای تعیین سبک فونت در زبان HTML ، تگ های ویژه ای پیش بینی شده است. سبکه های فونت شامل Bold ، Italic ، Underline و Strike out است. معمولاً برای تأکید بر روی یک کلمه یا یک جمله در صفحۀ وب سایت، باید بسته به نوع موضوع، سبک ویژه ای را بر روی آن اعمال کرد. به عنوان مثال برای تعریف یک اصلاح جدید، بهتر است آن را به صورت ایتالیک نمایش داد. یا برای تأکید بر روی یک کلمه با یک عنوان، بهتر است آن را به صورت Bold درآورد.
تگ های زیر برای اعمال سبک به یک متن وجود دارد:
- برای کردن یک متن، باید آن را B و /B قرار داد.
- برای Italic کردن یک متن، باید آن را I و /I قرار داد.
- برای Underline کردن یک متن، باید آن را U /U قرار داد.
- برای کردن یک متن، باید آن را STRIKE /STRIKE
بالانویس و زیرنویس کردن متن
منظور از بالانویس و زیرنویس کردن یک متن در صفحه وب سایت به ترتیب نمایش آن به صورت توان و اندیس است. یک متن بالانویس کمی بالاتر و یک متن زیرنویس کمی پایین تر از متون عادی نمایش داده می شود. برای این منظور از تگ های زیر استفاده می شود:
- برای بالانویس کردن یک متن، آن را بین SUP /SUP قرار دهید.
- برای زیرنویس کردن یک متن، آن را بین SUB /SUB قرار دهید.
مثال :
تغییر نوع فونت
برای تغییر نوع فونت مجموعه ای از متون در یک صفحه، از تگ FONT به همراه ویژگی FACE آن استفاده نمایید. برای این منظور مقدار ویژگی FACE را برابر نام فونت (مثلاً Arial ) و یا نوع فونت (مثلاً Serif ) قرار دهید. این مجموعه از متن باید با /FONT خاتمه یابد.
نکته: بهتر است در موقع تعیین فونت برای یک متن، دو یا چند فونت مختلف معرفی نمایید تا در موقع نمایش این صفحه در مرورگر، در صورت عدم وجود یک فونت، از فونت دیگر استفاده شود. برای معرفی چند فونت در ویژگی FACE ، باید آنها را با کاما از هم جدا کنید.
اندازۀ فونت
تعیین اندازۀ فونت متن یکی از موارد مهم برای یک صفحۀ وب سایت است. معمولاً برای خوانایی متن، بهتر است اندازۀ آن را بزرگتر کرد. از طرف دیگر مواردی که لازم است متن بیشتری در یک صفحۀ نمایش جای داده شود، باید اندازۀ فونت را کوچکتر کرد.
در صورتی که بخواهید اندازۀ فونت را برای کل متن موجود در یک صفحۀ وب سایت تعیین کنید، از تگ BASEFONT به همراه ویژگی SIZE استفاده نمایید. این تگ باید قبل از تمام متون صفحه، بلافاصله بعد از BODY قرار داده شود. ویژگی SIZE را برابر یکی از اعداد 1 تا 7 قرار دهید. اندازۀ 1 کوچکترین و اندازۀ 7 بزرگترین فونت را نشان می دهد.
اما معمولاً لازم است برای هر بخش از متن در یک صفحۀ اندازۀ فونت جداگانه ای تعریف شود. در این صورت باید متن موردنظر را بین تگ های FONT و /FONT قرار داد. در اینجا نیز باید به همان طریق از ویژگی SIZE استفاده کرد.
تغییر نوع فونت :
نکته: اندازۀ فونت بر روی سرتیترها (Heading) تأثیری ندارد.
نکته: می توان از علائم + و – قبل از عدد، در ویژگی SIZE استفاده کرد. در این صورت اندازۀ فونت به صورت نسبی به همان اندازه بزرگتر یا کوچکتر نسبت به اندازۀ فونت جاری متن نمایش داده می شود.
مثال :
رنگ فونت
تعیین رنگ متن یکی دیگر از موارد مهم برای طراحی یک صفحۀ وب سایت است. معمولاً برای خوانایی و زیبایی متن، لازم است از رنگ مناسبی برای آن متن استفاده شود. صفحات تک رنگ معمولاً برای کاربران چندان جذاب نیستند. همچنین صفحاتی که در طراحی آنها از رنگ های متنوع به صورت افراطی استفاده شده است، برای کاربران خسته کننده جلوه می کنند. انتخاب رنگ برای یک متن باید حساب شده و براساس مفهوم و نقش آن متن در صفحه باشد.
در صورتی که بخواهید رنگ فونت را برای کل متن موجود در یک صفحۀ وب سایت تعیین کنید، از ویژگی TEXT در تگ BODY استفاده نمایید. مقدار ویژگی TEXT را برابر مقدار هگزادسیمال رنگ و یا نام معادل آن قرار دهید. رنگ تعیین شده با این دستور، به عنوان رنگ فونت پیش فرض صفحه در نظر گرفته می شود.
اگر بخواهید رنگ یک متن در صفحه وب سایت خود را به صورت اختصاصی تعیین نمایید، باید متن موردنظر را بین تگ های FONT و /FONT قرار دهید. در اینجا نیز باید از ویژگی COLOR استفاده کرد. مقدار ویژگی COLOR را برابر مقدار هگزادسیمال رنگ و یا نام معادل آن قرار دهید.
توجه: در صورتی که برای یک متن از تگ FONT استفاده نکنید، از رنگ پیش فرض (یعنی رنگ تعیین شده در قسمت BODY ) برای آن استفاده می شود، بنابراین رنگ تعیین شده با تگ FONT مقدم بر رنگ پیش فرض است.
توجه: نام شانزده رنگ اصلی و مقدار هگزادسیمال معادل آنها، مطابق جدول زیر است.
|
مقدار هگزادسیمال |
نام رنگ |
مقدار هگزادسیمال |
نام رنگ |
|
#000080 |
navy |
#00FFFF |
aqua |
|
#808000 |
olive |
#000000 |
Black |
|
#800080 |
purple |
#0000FF |
Blue |
|
#FF0000 |
red |
#FF00FF |
Fuchsia |
|
#C0C0C0 |
silver |
#808080 |
Gray |
|
#008080 |
teal |
#008000 |
Green |
|
#FFFFFF |
white |
#00FF00 |
Lime |
|
#FFFF00 |
yellow |
#800000 |
Maroon |
مثال :
تعیین رنگ پس زمینه ی صفحه
ممکن است بخواهید برای کل صفحۀ وب سایت، رنگی را به عنوان رنگ پس زمینه انتخاب کنید برای این منظور باید از ویژگی BGCOLOR در تگ BODY استفاده نمایید. در این مورد نیز مانند موارد قبل می توانید از نام معادل و یا مقدار هگزادسیمال رنگ استفاده کنید.
توجه نمایید که انتخاب رنگ پس زمینه باید با دقت انجام شود. به طوری که ترکیب آن با رنگ متون صفحه سازگاری داشته باشد. به عنوان مثال خواندن متن آبی بر روی زمینه قرمز بسیار آزاردهنده و خسته کننده است. از طرف دیگر خواندن متن سفید بر روی زمینۀ آبی، بسیار دلپذیر و خوشایند است.
مثال:
توجه: در صورتی که در یک تگ از چند ویژگی استفاده می نمایید، باید آنها را با حداقل یک فاصله از هم جدا نمایید. در این مورد از به کار بردن کاما ( , ) و یا سمی کالن ( ; ) خودداری نمایید.
تنظیم اندازۀ حاشیه ی صفحه
با تنظیم حاشیۀ صفحات وب سایت می توانید فاصلۀ متون صفحه را از گوشه های چپ، راست، بالا و یا پایین برای داشتن ظاهری مناسب تر، تنظیم نمایید. در اغلب مرورگرها فاصلۀ پیش فرض برای حاشیه ها حدود 10 پیکسل است. در HTML استاندارد دستوری در این مورد وجود ندارد، اما در IE برای تنظیم حاشیه های چپ، راست، بالا و پایین به ترتیب ویژگی های LEFTMARGIN TIGHTMARGIN, BOTTOMMARGIN, TOPMARGIN پیش بینی شده است، که باید در تگ BODY قرار گیرد. توجه نمایید که این دستورات از طریق مرورگرهای دیگر پشتیبانی نمی شوند.
توجه: در صورتی که می خواهید تنظیم حاشیۀ صفحۀ وب سایت، از طریق هر دو مرورگر IE و Netscape پشتیبانی گردد، باید از هر دو دسته ویژگی بیان شده در تگ BODY استفاده نمایید.
نکته: در Netscape دو ویژگی MARGINWIDTH برای تنظیم حاشیۀ چپ و راست و MIRGINNEIGHT برای تنظیم حاشیه های بالا و پایین پیش بینی شده است. این ویژگی ها نیز جزء HTML استاندارد نیستند و از طریق دیگر مرورگرها پشتیبانی نمی شوند
لیست مرتب
لیست مرتب، مجموعه ای از گزینه ها است، که باید با ترتیب مشخصی بیان شوند. در این لیست، هر گزینه، دارای شمارۀ ترتیب مشخصی است که معمولاً به صورت حرفی یا عددی بیان می شوند. از لیست های مرتب می توان در مواردی مانند بیان مراحل انجام یک عمل با ترتیب معین و یا ارائه فهرست مطالب یک کتاب استفاده نمود.
برای ایجاد یک لیست مرتب، باید کل محتویات لیست را بین تگ OI و /OI قرار داد. همچنین در داخل این تگ، هر گزینه از لیست باید در داخل تگ LI و /LI قرار گیرد.
مثال: دستورات زیر لیست مرتبی برای نمایش فهرست مطالب یک کتاب ایجاد می نماید. هر گزینه از این لیست در سطرهای جداگانه و با شماره های 1, 2, 3, … نمایش داده می شود.
مثال :
نکته: در ایجاد لیست مرتب، شماره گذاری پیش فرض به شکل 1, 2, 3, … می باشد. برای تغییر نوع شماره گذاری می توان از ویژگی TYPE=’’?’’ در تگ OL استفاده نمود. به جای ? باید یکی از مقادیر A, a, I, i, و 1 قرار داد. که مفهوم آن طبق جدول زیر است.
|
مقدار |
شماره گذاری |
|
A |
A, B, C, … |
|
A |
a, b, c, … |
|
I |
I, II, III, … |
|
I |
i, ii, iii, … |
|
I |
1, 2, 3, … |
لیست نامرتب
لیست نامرتب مجموعه ای از گزینه ها است، که ترتیب مشخصی ندارند. در این لیست، در ابتدای هر گزینه، یک علامت بولت مثلاً به شکل ( · ) نمایش داده می شود. از لیست های نامرتب می توان در مواردی مانند نمایش لیستی از محصولات یک شرکت، لیستی از کتاب ها و مواردی که در آن نیازی به ترتیب گزینه ها نیست، استفاده کرد.
برای ایجاد یک لیست نامرت، باید کل محتویات لیست را بین تگ UL و /UL قرار داد. همچنین در داخل یک تگ، هر گزینه از لیست باید در داخل تگ LI و /LI قرار گیرد.
مثال: در دستورات زیر لیست نامرتبی برای نمایش عناوین تعدادی از زبان های برنامه نویسی رایج ایجاد شده است. هر گزینه از این لیست در سطرهای جداگانه و با علامت ( · ) در ابتدای هر سطر نمایش داده می شود.
مثال :
نکته: در ایجاد لیست نامرتب، علامت بولت به صورت پیش فرض به صورت ( · ) است. برای تغییر نوع علامت بولت می توان از ویژگی TYPE=’’?’’ در تگ UL استفاده نمود. به جای ? باید یکی از مقادیر جدول زیر را جایگزین نمایید.
|
مقدار |
علامت بولت |
|
circle |
|
|
disc |
|
|
square |
ð |
لیست تو در تو
لیست تو در تو به لیستی گفته می شود که در آن هر گزینه از لیست، بتواند خود یک لیست باشد. یک لیست تو در تو که به آن لیست لانه ای نیز گفته می شود، می تواند از لیست های مرتب و یا نامرتب تشکیل شده باشد. از لیست های تو در تو می توان برای ایجاد لیست هایی که در آن هر گزینه شامل زیر لیست است، استفاده نمود. به عنوان مثال، برای ایجاد فهرستی برای یک کتاب که در آن هر بخش شامل زیر بخش هایی است، استفاده از لیست تو در تو بسیار مناسب است.
ایجاد لیست های تو در تو بسیار ساده است. در ایجاد این لیست ها از همان دستورات لیست های مرتب و یا نامرتب استفاده می شود. فقط باید این دستورات را به صورت تو در تو در داخل گزینه مناسب قرار داد.
مثال: دستورات زیر یک لیست مرتب تو در تو برای فهرست یک کتاب ایجاد می نماید، که در آن اولین گزینه از لیست، دارای یک زیر لیست با سه گزینۀ داخلی است.
خلاصه ی جلسه سوم آموزش طراحی سایت :
در این جلسه با تگ های ساده ای از HTML آشنا شدید، که وظیفۀ آنها فرمت کردن متن است. یک جنبه از فرمت کردن متن، اعمال سبک های متنی است. برای Bold کردن یک متن، باید آن را بین B و /B قرار داد. همین طور برای Italic کردن، I و /I و برای Strike out کردن STRIKE و /STRIKE استفاده می شود. همچنین برای بالانویس کردن یک متن، آن را بین SUP و /SUP قرار دهید و برای زیرنویس کردن، آن را بین SUB و /SUB قرار دهید.
برای تغییر نوع فونت مجموعه ای از متون در یک صفحه، از تگ FONT به همراه ویژگی FACE آن استفاده نمایید. برای این منظور مقدار ویژگی FACE را برابر نام فونت و یا نوع فونت قرار دهید. این مجموعه از متن باید با /FONT خاتمه یابد. در صورتی که بخواهید اندازۀ فونت را برای کل متن موجود در یک صفحۀ وب سایت تعیین کنید، از تگ BASEFONT به همراه ویژگی SIZE استفاده نمایید. این تگ باید قبل از تمام متون صفحه، بلافاصله بعد از BODY قرار داده شود. ویژگی SIZE را برابر یکی از اعداد 1 تا 7 قرار دهید، اما اگر می خواهید برای هر بخش از متن، اندازۀ فونت جداگانه ای تعریف کنید. در این صورت باید متن موردنظر را بین تگ های FONT و /FONT قرار داد. در اینجا نیز باید از ویژگی SIZE استفاده کنید.
در صورتی که بخواهید رنگ فونت را برای کل متن موجود در یک صفحۀ وب سایت تعیین کنید از ویژگی TEXT در تگ BODY استفاده نمایید. مقدار ویژگی TEXT را برابر مقدار هگزادسیمال رنگ و یا نام معادل آن قرار دهید. رنگ تعیین شده با این دستور، به عنوان رنگ فونت پیش فرض صفحه در نظر گرفته می شود. اگر بخواهید رنگ یک متن را به صورت اختصاصی تعیین نمایید، باید متن مورد نظر را بین تگ های FONT و /FONT قرار دهید. در اینجا نیز باید از ویژگی COLOR استفاده کنید. مقدار ویژگی COLOR را برابر مقدار هگزادسیمال رنگ و یا نام معادل آن قرار دهید.
ممکن است بخواهید برای کل صفحۀ وب سایت، رنگی را به عنوان رنگ پس زمینه انتخاب کنید. برای این منظور باید از ویژگی BGCOLOR در تگ BODY استفاده نمایید. در این مورد نیز مانند موارد قبل می توانید از نام معادل و یا مقدار هگزادسیمال رنگ استفاده کنید.
در HTML استانداردt دستوری برای تنظیم اندازۀ حاشیه ها وجود ندارد، اما در IE برای تنظیم حاشیه های چپ، راست، بالا و پایین به ترتیب ویژگی های LEFTMARGIN TIGHTMARGIN, BOTTOMMARGIN, TOPMARGIN پیش بینی شده است که باید در تگ BODY قرار گیرد. توجه نمایید که این دستورات در مرورگرهای دیگر شناخته شده نیست.
لیست مرتب، مجموعه ای از گزینه ها است که باید با ترتیب مشخصی بیان شوند. در این لیست، هر گزینه، دارای شمارۀ ترتیب مشخصی است، که معمولاً به صورت حرفی یا عددی بیان می شوند. برای ایجاد یک لیست مرتب، باید کل محتویات لیست را بین تگ OL و /OL قرار داد. همچنین در داخل این تگ، هر گزینه از لیست باید در داخل تگ LI و /LI قرار گیرد. در ایجاد لیست مرتب، شماره گذاری پیش فرض به صورت 1, 2, 3, … می باشد. برای تغییر نوع شماره گذاری می توان از ویژگی TYPE=’’?’’ در تگ OL استفاده نمود. به جای ? باید یکی از مقادیر A, a, I, i, و 1 قرار داد.
لیست نامرتب مجموعه ای از گزینه ها است، که ترتیب مشخصی ندارند. در این لیست، در ابتدای محتویات لیست را بین تگ UL و /UL قرار داد. همچنین در داخل یک تگ، هر گزینه از لیست باید در داخل تگ LI و /LI قرار گیرد. برای تغییر نوع علامت بولت می توان از ویژگی TYPE=’’?’’ در تگ UL استفاده نمود. به جای ? باید یکی از مقادیر disc ، circle و square را قرار داد.
لیست تو در تو به لیستی گفته می شود که در آن هر گزینه از لیست، بتواند خود یک لیست باشد. از لیست های تو در تو می توان برای ایجاد لیست هایی که در آن هر گزینه شامل زیر لیست است، استفاده نمود. به عنوان مثال، برای ایجاد فهرستی برای یک کتاب که در آن هر بخش شامل زیر بخش هایی است، استفاده از لیست تو در تو بسیار مناسب است. در ایجاد این لیست ها از همان دستورات لیست های مرتب و یا نامرتب استفاده می شود. فقط باید این دستورات را به صورت متداخل در داخل گزینۀ مناسب، قرار داد.