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

آموزش طراحی سایت,HTML,CSS,AJAX,جاوا اسکريپت,طرحیسایت| 02144050905

آموزش طراحی سایت,HTML,CSS,AJAX,جاوا اسکريپت,طرحیسایت

  • کانال رسمی تلگرام سنادیتا
  • بهینه سازی و سئو طراحی سایت

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

 

فصل اول:
Setting up Shop


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

1- وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود
2- یک مرورگر (web browser) برای دیدن صفحات وب در آن
3- فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client

چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد.

ابزارهای اولیه در ویندوز:

1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است .
برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:

Start > All Programs > Accessories > Notepad

design-web-01.jpg
2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است.
شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید.

design-web-02.jpg

3- برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.

ابزارهای دیگر:

برای ادیت کردن صفحات خود می توانید از برنامه NoteTab استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.

design-web-03.jpg
 آن را از این آدرس دانلود نمایید. 

همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما  در اینجا از یکی از بهترین آنها را نام می برم : firefox
 
design-web-04.jpg

اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید:
Adobe photoshop
Adobe fireworks
Picasa
توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آن برای کاربرد وب آسان است.

مرحله آخر - درست کردن مکانی است برای فایل های ساخته شده :

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

Right click > new > folder


سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,..... را داخل آن قرار می دهید.

فصل دوم

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

 

 

 


لینک های مرتبط
خدمات طراحی سایت سنادیتا
  • طراحی سایت شرکتی
  • طراحی سایت صرافی
  • طراحی سایت صنعتی
  • طراحی سایت علمی
  • طراحی سایت فروش شارژ
  • طراحی سایت فروش فایل
  • طراحی سایت فروشگاهی
  • طراحی سایت فیلم و موزیک
  • طراحی سایت هنری
  • طراحی سایت واکنش گرا
  • طراحی سایت تفریحی و بازی آنلاین

 

  • طراحی سایت کارخانجات
  • طراحی سایت کودکان
  • طراحی سایت گالری
  • طراحی سایت گردشگری
  • طراحی سایت لباس و کیف و کفش
  • طراحی سایت مجله اینترنتی
  • طراحی سایت مدرسه
  • طراحی سایت مراکز تجاری
  • طراحی سایت مرتبط با حیوانات
  • طراحی سایت نمایشگاهی
  • طراحی سایت هتل و اماکن اقامتی
  • طراحی سایت تبلیغاتی

 

RSS

آرشیو

بازدید روز

۶۶۴۴

بازدید دیروز

۴۱۷۵

بازدید ماه

۶۵۷۰۰

بازدید کل

۱۶۳۹۱۷۷

افراد آنلاین

۲

نام سايت: sanadata.com
الکسای جهانی :۱۴۱۶۶۴
میزان تغیرات :+۲۳۳۰۶
الکسای ایران :۳۳۲۸

1  
2 A B C
3 D E F
4 G H I
5 J K L
5 J K L
6 M N O
7 P Q R S
8 T U V
9 W X Y Z
*
0 +
0 +
0 +
0 +
#

آدرس دفتر مركزی :

تهران - فلکه دوم صادقیه - ابتدای خیابان آیت ا... کاشانی - جنب درمانگاه ابن سینا - مجتمع سبحان - طبقه 6 - واحد 33

ساعت کار شرکت از ساعت 9 الی 17

واحد فروش - خانم راد :     02144050905

واحد آموزش - خانم لطفی  :     02144048747

کلیه حقوق مادی و معنوی این وب سایت برای شرکت سنارایانه یکتا محفوظ می باشد.