آموزش طراحی سایت قسمت دوم

آموزش طراحی سایت

سلام خدمت همه  با توجه به استقبال شما عزیزان از این مقالات گروه ما با دقت بیشتری  به نوشتن  ادامه میدهد
بازهم اعلام می کنم که اصل در علاقه و هوش خود فرد است و چیزی که به عنوان حفظ کردن مطالب من که یک طراح سایت هستم به هیچ عنوان بازخوردی برای شما عزیزان ندارد

 

فصل دوم

در این فصل شما عزیزان می توانید اولین صفحه وب خودتان را خلق نمایید و با زبان XHTM آشنا خواهید شد و مرحله به مرحله کارهای خود را در مرورگر تست می کنید .
بگذارید دقیق شویم ! که شما می بینید به سه لایه اصلی تقسیم می شود:

 

لایه <a  href=

های طراحی سایت" src="http://nabegheh.com/wp-content/uploads/2014/02/design-web-06.gif" width="400" height="240" /> لایه های طراحی سایت

یادگیری این سه لایه شما را به یک طراح سایت تبدیل میکند
لایه اول لایه محتوی است که مانند شاسی ماشین است و شامل تگهای متفاوتی می باشد .لایه دوم لایه نمایش است که به عناصر زبان HTML شکل و ظاهر می دهد و لایه سوم لایه رفتار است که حرکت و پویایی صفحات را شامل می شود.
چیزی که در این مقاله آموزش داده می شود مربوط به ۲ لایه  زبان HTML و  CSS است.

دیدن Source برنامه:
دیدن کد برنامه می تواند به یادگیری شما سرعت ببخشد البته باید در انتخاب وب سایت خود دقت نمایید تا اشتباه آنها مسیر یادگیری شما را تغییر ندهد. روش کار بدین صورت است که ماوس را درروی صفحه جایی غیر از تصاویر ببرید و کلیک راست کنید و view page source  یا view source را بزنید.

عناصر اصلی یک صفحهHTML در طراحی سایت :

 

 یک DocType
یک<html> tag
یک<head>  tag
یک<title>   tag
یک<body>   tag

تو سورس پیداشون کنید.

 

سورس در طراحی سایت

سورس در طراحی سایت

و حالا یک نمونه کد فقط شامل عناصری اصلی :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type   content="text/html; charset=utf-8"/>
</head>
<body>
</body>
</html>

حالا می خواهیم با تک تک این عناصر آشنا شویم :
داک تایپ DocType  : Document Type Definition
اولین آیتم صفحه است بدون فاصله. این یک قانون است.
همانطوری که فایل word 2007 در نمایش در ۲۰۰۰ دچار مشکل می شود HTML ها با داک تایپ های متفاوت هم نمایش متفاوت در مرورگرها خواهند داشت.
در واقع این داک تایپ است که به مرورگر می گوید این سند از چه نوعی است و باید به چه ترتیب Render شود . نحوه رندر شدن و تفاوت های آنها باید در سطح حرفه ای تری مطرح شود.
داک تایپ ها هم در طول زمان به وجود می آیند یعنی مانند word نوع های جدیدی روی قبلی ها عرضه می شوند مانند HTML5  که به تازگی مطرح شده است.
برای دیدن داک تایپ های موجود به این آدرس بریدhttp://reference.sitepoint.com/html/doctypes

 

<!DOCTYPE  html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

به کدهای داک تایپ دقت نمایید: ما در این خط می گوییم نوع سند چیست و آدرسی که باید به این نوع سند در وب سایت کنسرسیوم جهانی وب World Wide Web Consortium یا W3C ، اشاره کند کدام است.
در حال حاضر دو نوع داکتایپ هستند که استفاده بیشتری دارند Transitional  و  Strict
همانطوری که گفتم فعلا دنبال تفاوت این داک تایپ ها نباشید به آن هم خواهیم رسید .
تاکید میکنم : اولین آیتم صفحه است بدون فاصله. این یک قانون است.

 

عناصر HTML  :
قبل از این که عناصر HTML را شرح دهم باید با مفهوم تگ (tag)  آشناشوید. تگ یعنی اسمی که میان این دو <> قرار گیرد و نام تگ همان متنی است که بین این دو <> قرار می گیرد

تگ HTML    <html>
تگ HEAD   <head>

تگ ها می توانند شامل چند attribute  (ویژگی) باشند:

<html   xmlns="http://www.w3.org/1999/xhtml "  dir="rtl" >

dir یک نام  attribute است و rtl ، value (مقدار) آن است که بین " " قرار گرفته است.
تگ ها به دودسته container و empty  تقسیم می شوند.تگ های container شامل یک تگ بازشونده و یک تگ بسته شونده هستند به مثال بالا دقت نمایید HTML  باز شده و بسته شده است. تگهای empty  متفاوت هستند مانند مثال زیر

<img src="images/test.jpg" alt="test" />
<br/>

تگ های empty  را می توان به صورت container استفاده کرد ولی در داک تایپ های xhtml توصیه شده است که تگ های empty را به همان شکل empty  بنویسیم
در استفاده از تگ ها باید دانید که از چه نوعی هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنویسیم دچار error می شویم.
نگران نباشید کم کم همه آنها را خواهید آموخت . بیایید همین الان تو اینترنت عبارت روبرو را جستجو کنیم :

empty tag in html

بسیار عالی شما هم این نتایج را پیدا کردید :

• <br/>
• <hr/>
• <meta/>
• <base/>
• <link/>
• <meta/>
• <img/>
• <embed/>
• <area/>
• <input/>

این را گفتم که هیچ وقت دنیای وب و جستجو را فراموش نکنید.
غیر از داک تایپ ها تمامی عناصر صفحه داخل تگ HTML است که شامل ۲ بخش می شود head و  body
عنصر HAED
این یک تگ container  است و در بالای سند قبل از body قرار می گیرد و شامل اطلاعاتی در باره صفحه است مانند title, meta, css  و .....

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

عنصر  title :
یک تگ container است که متن وسط آن در عنوان (Title) بالای صفحه قرار میگیرد :

به تایتل در طراحی سایت ما توجه کنید :

موارد استفاده دیگر:
• این تایتل در زمان مینیمایز کردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوکمارک کردن صفحه با این عنوان  در لیست ما ذخیره می شود
• برای معرفی آن صفحه است
• برای موتورهای جستجو هم حائز اهمیت می باشد چیزی که در بهینه سازی سایت  وب اسکالا هم استفاده شده است

 

عنصر meta در طراحی سایت  :
متا تگ یک تگ empty است و برای  دلایل متفاوتی استفاده می شوند اطلاعات اضافی که در مرورگر نمایش پیدا نمی کند . به طور مثال برای نام نویسنده ویا حق کپی رایت و یا نوع کاراکتر و ....
Css و  javascript  هم در  head قرار میگیرند که بنا به نیاز استفاده میشوند البته برای جاوااسکریپت میتوان یک تفاوتهایی  در طراحی سایت های حرفه ای  قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است.

 

عناصر body :
هرآنچه در body قرار می گیرد را می توان در خروجی دید: تیترها، پاراگراف ها, تصاویر و .......
در قسمت بعدی به طور عملی با هم یک وب سایت می سازیم!

%d وب‌نوشت‌نویس این را دوست دارند: