تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 6 آبان 1392

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

نویسنده: امیر حسینی   

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


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

 

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 قرار می گیرد را می توان در خروجی دید: تیترها، پاراگراف ها, تصاویر و .......
در قسمت بعدی به طور عملی با هم یك وب سایت می سازیم!


آموزش توسط بهزاد علی بیگی

برای مقاله های بیشتر و هم چنین دریافت pdf سری کامل آموزش ما را دنبال کنید در



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

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com