طراحی وب سایت
درباره سایت
امکانات وب
در اين فصل شما مي توانيد اولين صفحه وب خودتان را خلق نماييد و با 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>
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) بالاي صفحه قرار ميگيرد :
عنصر meta :
متا تگ يک تگ empty است و براي دلايل متفاوتي استفاده مي شوند اطلاعات اضافي که در مرورگر نمايش پيدا نمي کند . به طور مثال براي نام نويسنده ويا حق کپي رايت و يا نوع کاراکتر و ....
Css و javascript هم در head قرار ميگيرند که بنا به نياز استفاده ميشوند البته براي جاوااسکريپت ميتوان يک تفاوتهايي در طراحي هاي حرفه اي قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.
عناصر body :
هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: sara