تبلیغات
بدو بیــــا تــــو دانلود - آموزش طراحی وب سایت از پایه - قسمت دوم
 
بدو بیــــا تــــو دانلود
متفاوت دانلود کنید تا متفاوت باشید!
درباره وبلاگ



مدیر وبلاگ : admin
نویسندگان

با سلام خدمت همه علاقه مندان به یادگیری. با توجه به استقبال شما عزیزان از این مقالات سعی می كنم  با دقت و سرعت بیشتری  به نوشتن  ادامه دهم .
بازهم اعلام می كنم که ترجمه خط به خط کتاب ارائه نمی شود و چیزی که به عنوان برداشت شخصی من یک طراح وب سایت ( بهزاد) از کتاب می باشد در قالب مقالات آموزشی برای شما بیان خواهد شد و مسلما با بازخوردی که از خوانندگان خواهم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهم داد. و اما ادامه آموزش.

 

design-web-00.jpg

فصل دوم

Your First Web Pages 


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


design-web-06.gif 
یادگیری این سه لایه شما را به یك طراح تبدیل میكند!


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

دیدن Source برنامه:


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


design-web-07.jpg 
یا در IE


design-web-08.jpg 

عناصر اصلی یك صفحهHTML :

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


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


design-web-11.jpg

برای دیدن تصویر واضحتر روی تصویر بالا کلیک کنید

 

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


<!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 در نمایش در 2000 دچار مشكل می شود 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 (مقدار) آن است كه بین " " قرار گرفته است.


design-web-09.gif  

تگ ها به دودسته 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 است كه شامل 2 بخش می شود 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) بالای صفحه قرار میگیرد :

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


design-web-10.gif 
موارد استفاده دیگر:


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

 

عنصر meta  :


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

 

عناصر body :


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

 

ادامه دارد...
اگر مورد استقبال قرار گیرد

آموزش طراحی سایت توسط آقای علی بیگی





نوع مطلب : ◄دیگر، آموزشکده، 
برچسب ها : By following this step-by-step guide، you'll find that the training wheels will be off before you know it. You'll start from scratch، learning which basic tools you need to get started (text editors، web browsers and FTP clients)، and by the end of the book you'll be ready to add some real flair to your fully functioning web site،





موضوعات
صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
امکانات جانبی
 
 
بالای صفحه