آموزش طراحی وب سایت قسمت پنجم

با قسمت پنجم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت، برای تهیه یک سایت ساختاری را تعریف می کنیم که یک ساختار کلیدی در تهیه وب سایت های مدرن می باشد و با شناخت این ساختار می توانید در تهیه  تمامی وب سایت ها توانا باشید.
اضافه کردن یک ساختار به نام div:تا این لحظه ساختار پایه ای وب سایت و تگ های html  و  body  و p  برای پاراگراف وh برای هدر ها  را شناختیم و با آن ها کار کردیم و در این قسمت یک ساختار طلائی به نام div را معرفی می نماییم.
div یک تگ بلاک است و به همراه تگ span  بیشترین استفاده در صفحات استاندارد وب سایت را دارد .
این تگ معمولا برای قرار دادن گروهی از عناصر داخل آن مورد استفاده قرار می گیرد و داخل آن می توان از عناصر دیگر مانند h1 , img , a , p  و غیره استفاده کرد.
این تگ هیچ استایلی از جمله margin  و padding ندارد و برای شکل دادن به ظاهر آن از دستورات css استفاده می کنیم.
به مثال زیر دقت نمایید :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
<p>And just one more paragraph.</p>
<div>This is a div.</div>
<div>The content of each div appears on a new line.</div>
<div>But unlike paragraphs, there is no additional padding.</div>
<div>A div is a generic block-level container.</div>
در واقع این تگ برای مدیریت گروهی از عناصر استفاده می شود و یا به عبارتی با div  می توانید صفحه را به قسمت های مختلفی تقسیم نمایید .
نکته نویسنده مقاله: بر خلاف تمامی آموزش های دیگر در این جا ابتدا تگ div تدریس می شود و سپس سراغ تگ  table یا همان جدول می رویم .
در این مثال ما صفحه را به قسمت های متفاوتی تقسیم کردیم  بالا برای بنر و سمت راست برای منو های سایت و سمت چپ برای قسمت اصلی سایت.
دقت کنید که شما داخل تگ div  می توانید تمامی عناصر مانند p , h1 , ul , a , img را قرار دهید ولی به طور مثال نمی توانید تگ div را داخل p   قرار دهید .
با بررسی مثال زیر و نکات آن می توانید تجربه خوبی کسب کنید :
در این مثال ما صفحه را به 2 قسمت header  و content body  تقسیم کرده ایم . در قسمت header از 2 تگ h1 و p استفاده کرده ایم و در قسمت body content  از تگ های بسیار زیادی استفاده کرده ایم .
در زیر کد هدر نمایش داده شده است :
<div id=”header”>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK – let’s make a splash!</p>
</div>
در این مثال علاوه بر توضیح تقسیم بندی سایت  با تگ div  ، استفاده از  attribute  بسیار مهم id  هم توضیح داده می شود .
Id و قوانین آن:
•    معمولا از id برای تفکیک گروه های بزرگ مانند 2 مثال قبل استفاده می شود
•    یک نام id  فقط یک بار در صفحه قابل استفاده است
•    Id یک attribute است و header  یک value برای آن طبق این قانون :     attribute=”value”
•    نام attribute  باید با حروف کوچک باشد مانند  id , class و غیره و value آن داخل “”
تگ های تو در تو (nesting tag) :
در مطالب گذشته گفتیم که در تگ div  می تواند تگ های دیگری همچون p , ul  و غیره قرار گیرد در حالی که خود تگ div میتواند در داخل تگ div  دیگری قرار گیرد که به این نوع تگ های تو در تو گفته می شود .
در بسیاری موارد در طراحی های حرفه ای مجبوریم که از تگ های تو در تو استفاده کنیم و این روش نظم خاصی به کار  طراحی شما  می بخشد .
کد زیر می تواند شما را بیشتر با تگ های تو در تو آشنا کند :
<div id=”outer”>
<div id=”nested1″>
<p>A paragraph inside the first nested div.</p>
</div>
<div id=”nested2″>
<p>A paragraph inside the second nested div.</p>
</div>
</div>
در استفاده از تگ های تو در تو باید به قانونی به نام Indenting Markup توجه کرد که شرح می دهد تگ های داخلی را کمی جلوتر از سمت چپ نسبت به والد خود باز کرده و در همان راستا ببندید . همان طوری که می بینید تگ div  با id  مشخص nested1 کمی با فاصله بیشتر از چپ نسبت به والد خود یعنی تگ div با  id مشخص outer باز شده است.
نکته دیگری که می بایست برای خوانایی بیشتر در استفاده از تگ های تو در تو دقت نمایید استفاده از کامنت گذاری است که در قسمت های قبل توضیح داده شد .
    </div> <!– end of inner div –>
</div> <!– end of nested div –>
</div> <!– end of outer div –>
نکته خیلی مهم : استفاده از تگ های تو در توی بی مورد می تواند از ارزش و استاندارد صفحات شما بکاهد و هم چنین هر تگی برای منظوری ساخته شده است مثلا  p  برای متون بلند و پاراگراف ها .پس در استفاده از تگ ها در طراحی وب خود دقت نمایید .
از این به بعد سعی می شود با طرح تمرین هایی به یادگیری شما سرعت بخشیم و البته کسانی که بتوانند تمرینها را به درستی انجام دهند شانس بیشتری برای طراحی وب سایت خواهند داشت .
فراموش نکنید هنوز وب سایت شما ظاهر مناسبی ندارد برای شکل دادن به وب سایت خود باید از css استفاده نمایید که در قسمت های بعدی توضیح داده خواهد شد .

آموزش طراحی وب سایت قسمت چهارم

با قسمت چهارم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت مطالب زیر را با هم بررسی خواهیم کرد:مفهوم کامنت و لزوم استفاده از آن
کاراکترها وسمبل ها و نحوه استفاده در  XHTML
نقطه شروع برای هر وب سایتی
لینک برای ارسال ایمیل
درج تصاویر در سند
مفهوم کامنت و لزوم استفاده از آن
نظم در برنامه نویسی ارزش بالایی دارد به طوری که می بایست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نویس دیگری باشد. یکی از ابزارهایی که در این زمینه به ما کمک می کند گذاشتن کامنت است.
کامنت در واقع نوشته هایی است که در سورس برنامه وجود دارند ولی در نمایش خروجی ظاهر نمی شوند . کامنت گذاری در HTML  و CSS و JavaScript  کاربرد زیادی دارند. به مثال زیر دقت کنید:
<!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>Comment example</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<p>I really, <em>really</em> like this XHTML stuff.</p>
<!– Added emphasis using the em element. Handy one, that. –>
</body>
</html>

نحوه نوشن کامنت در HTML بدین صورت است:
<!– Beginn Navigation –>
در جاوا اسکریپت به 2 صورت زیر صورت :
/* comment  */
// comment
و در CSS :
/*  comment  */
بگذارید یک ذره جلوتر برویم و یک استفاده حرفه ای تر کامنت را هم براتون توضیح بدهم :
استفاده دیگر کامنت زمانی است که می خواهید قسمتی از کد خودتونو  نمایش ندید و یا برای مدتی پنهان کنید در آن زمان است که قسمت مربوطه را کامنت می کنید که بعدا هم قابل برگشت است .
<!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>Commenting out XHTML</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>Current Stock</h1>
<p>The following items are available for order:</p>
<ul>
<li>Dark Smoke Window Tinting</li>
<li>Bronze Window Tinting</li>
<!– <li>Spray mount</li>
<li>Craft knife</li> –>
</ul>
</body>
</html>
کاراکترها وسمبل ها و نحوه استفاده در  XHTML
بسیاری موارد پیش می آید که می خواهید در متن خود مانند نوشتن همین مقاله از کاراکترهایی مثل > ویا &  و یا هر کاراکتر خاص دیگری استفاده کنید. در XHTML  ما به جای درج مستقیم این کاراکترها از کد خاصی که برای آنها تعریف شده استفاده می کنیم. مثلا به جای & از &amp;   استفاده می کنیم و این یکی از تفاوت های HTML با XHTML است ، یعنی اگر بدین صورت عمل نکنیم سند ما Valid نخواهد شد.
صفحه اول ، نقطه شروع هر وب سایت
نقطه شروع هر وب سایت صفحه اول آن است که با نام  index  ویا default  شناخته خواهد شد. ما در یک مثال کاربردی تگ هایی که تا به حال آموختیم به اضافه دو خصوصیت جدید اضافه کردن تصویر و ارسال ایمیل را خواهیم آموخت.
مثال زیر را در ادیتور خود بنویسید و با نام index.html  ذخیره نمایید
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK – let’s make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and successfully
found your way to the start point – or in this case, our home
page.</p>
<h3>About Us</h3>
<p><img  src=”divers-circle.jpg” width=”200″ height=”162″
alt=”A circle of divers practice their skills”/></p><p>When we’re not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse, eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina
on 01793 641207 or <a
href=”mailto:test@test,com”>email
[e-mail]</a>.</p> </body>
</html>

صفحاتی که تا به حال درست کرده ایم به صورت متنی و بسیار کسل کننده است و برای جذابیت بیشتر می بایست از عکس ها استفاده کرد . با استفاده از تگ img می توان تصاویر را به صفحه اضافه کرد. بدین ترتیب :
<img  src=”divers-circle.jpg”  width=”200″ height=”162″ alt=”A circle of divers practice their skills” />
این تگ یک تگ empty است و دارای attribute های زیر است :
src  برای آدرس عکس
alt  برای توضیح تصویر
width عرض تصویر به پیکسل
height ارتفاع تصویر به پیکسل
فقط دقت نمایید که آدرس از جایی که صفحه شما قرار دارد حساب میشود یعنی اگر تصویر در همان فولدری باشد که صفحه شما قرار دارد به طریق بالا آدرس می گیرد.
Alt هم متنی است که عکس را توصیف می کند و در مرورگرهای متنی و یا زمانی که مرورگر تصاویر را نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو است.
این نکته را هم در پایان اضافه کنم که برای Valid شدن در XHTML صفحه وجود alt  الزامی است .

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

ساخت اولین صفحه وب سایت شما
در هر جای کامپیوتر که دوست دارید فلدری به نام my-first-webpage  بسازید.
textEditor خودتان را که در جلسات قبل توضیح دادیم باز کنید کد زیر را در آن کپی کنید
<!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>The Most Basic Web Page in the World</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>The Most Basic Web Page in the World</h1>
<p>This is a very simple web page to get you started.
Hopefully you will get to see how the markup that drives
the page relates to the end result that you can see on
screen.</p>
<p>This is another paragraph, by the way. Just to show how it
works.</p>
</body>
</html>
 
از textEditor گزینه file>save as را بزنید
مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.
نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html
از منوی کشویی save as type گزینه all files را انتخاب نمایید
از منوی کشویی Encoding گزینه UTF-8 را انتخاب نمایید.
و حالا دکمه save را بزنید.
حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریک شما اولین صفحه وب خودتان را ساختید!
اهمیت UTF-8
این کاراکتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض کنید یک کاربر کره ای که زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این کاراکتر ست است که اجازه میدهد شما با مشکلی مواجه نشوید.
اولین آنالیز شما
یک مقایسه و یک آنالیز ساده بین کد شما و ظاهری که در مرورگر می بینید ، می تواند در یادگیری شما کمک شایانی کند:
زمان مناسبی است که در مورد 2 تگ p  و h1 و البته عناصر دیگر صحبت کنیم.
تیترها و سلسله مراتب آن (H)
تیترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1  تا h6  وجود دارند.
از h1  برای مهم ترین تیتر از h2 برای تیتر کم  ارزش تر و از h3 برای تیتر کم ارزش تر از h2 و به همین ترتیب تا  h6
پاراگراف (p)
یک تگ بلاک و بسته شونده (container) است و برای یک بلوک متنی استفاده می شود این بدان معنی است که متن های خوتان را باید داخل این تگ قرار دهید.
لیست (list)
فرض کنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید لیست ها دو گونه اند:
Ol-order list : برای لیست های ترتیبی
Ul-unorder list: برای لیستهای غیر ترتیبی
به مثال زیر دقت کنید:
<!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>Lists – an introduction</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>Lists – an introduction </h1>
<p>Here’s a paragraph. A lovely, concise little paragraph.</p>
<p>Here comes another one, followed by a subheading.</p>
<h2>A subheading here</h2>
<p>And now for a list or two:</p>
<ul>
<li>This is a bulleted list</li>
<li>No order applied</li>
<li>Just a bunch of points we want to make</li>
</ul>
<p>And here’s an ordered list:</p>
<ol>
<li>This is the first item</li>
<li>Followed by this one</li>
<li>And one more for luck</li>
</ol>
</body>
</html>
و حالا خروجی کار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید
ظاهر همه لیست ها به همین سادگی نیستند و امروزه در طراحی وب سایت حرفه ای استفاده زیادی دارد.

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

فصل دوم
Your First Web Pages
طراحی وب سایت به سه لایه اصلی تقسیم می شود:
یادگیری این سه لایه شما را به یک طراح تبدیل میکند!
لایه اول لایه محتوی است که مانند شاسی ماشین است و شامل تگهای متفاوتی می باشد .لایه دوم لایه نمایش است که به عناصر HTML شکل و ظاهر می دهد و لایه سوم لایه رفتار است که حرکت و پویایی صفحات را شامل می شود.
چیزی که در این جا آموزش داده می شود مربوط به 2 لایه  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 در نمایش در 2000 دچار مشکل می شود HTML ها با داک تایپ های متفاوت هم نمایش متفاوت در مرورگرها خواهند داشت.
در واقع این داک تایپ است که به مرورگر می گوید این سند از چه نوعی است و باید به چه ترتیب Render شود . نحوه رندر شدن و تفاوت های آنها باید در سطح حرفه ای تری مطرح شود.
داک تایپ ها هم در طول زمان به وجود می آیند یعنی مانند word نوع های جدیدی روی قبلی ها عرضه می شوند مانند HTML5  که به تازگی مطرح شده است.
<!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>
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 است که شامل 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) بالای صفحه قرار میگیرد :

موارد استفاده دیگر:
• این تایتل در زمان مینیمایز کردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوکمارک کردن صفحه با این عنوان  در لیست ما ذخیره می شود
• برای معرفی آن صفحه است
• برای موتورهای جستجو هم حائز اهمیت می باشد چیزی که در بهینه سازی وب سایت  هم استفاده شده است
عنصر meta  :
متا تگ یک تگ empty است و برای  دلایل متفاوتی استفاده می شوند اطلاعات اضافی که در مرورگر نمایش پیدا نمی کند . به طور مثال برای نام نویسنده ویا حق کپی رایت و یا نوع کاراکتر و ….
Css و  javascript  هم در  head قرار میگیرند که بنا به نیاز استفاده میشوند البته برای جاوااسکریپت میتوان یک تفاوتهایی  در طراحی های حرفه ای  قائل شد. عناصر body :
هرآنچه در body قرار می گیرد را می توان در خروجی دید: تیترها، پاراگراف ها, تصاویر و …….
در قسمت بعدی به طور عملی با هم یک طراحی وب سایت انجام میدهیم

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

آموزش طراحی وب سایت
فصل اول:
Setting up Shop
این فصل در واقع آماده کردن کامپیوتر برای کار، قبل از زدن اولین طرح شماست.
قبل از این که وب سایت خودتان را بسازید، می بایست کامپیوتر خود را برای کار آماده نمایید که شامل برنامه هایی است که یا در سیستم شما موجود می باشد و یا این که می بایست آن ها را نصب نمایید.
برنامه های زیادی در بازار موجود می باشد ولی در ابتدا از برنامه های رایگان و قابل دسترس استفاده می کنیم.
وسایل و برنامه های اصلی که شما نیاز دارید:
1- وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود
2- یک مرورگر (web browser) برای دیدن صفحات وب در آن
3- فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client
چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد.
ابزارهای اولیه در ویندوز برای آموزش طراحی وب سایت:
1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است .
برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:
Start > All Programs > Accessories > Notepad
2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است.
شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید.
3- برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.
ابزارهای دیگر آموزش طراحی وب سایت :
برای ادیت کردن صفحات خود می توانید از برنامه NoteTab استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.
همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما  در اینجا از یکی از بهترین آنها را نام می برم  firefox

اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید:
Adobe photoshop
Adobe fireworks
Picasa
توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آن برای کاربرد وب آسان است.
مرحله آخر – درست کردن مکانی است برای فایل های ساخته شده :
بعد از ساختن فایل های خود مدیریت آنها بسیار مهم است و این که در کجا فایل اصلی و در کجا تصاویر قرار گیرد و به همین ترتیب تمام عناصر وب سایت.
شما باید یک فولدر بسازید و تمام عناصر وب سایت خود را در آن قرار دهید. فرض کنید در دسکتاپ خود می خواهید یک وب سایت بسازید.
Right click > new > folder
سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,….. را داخل آن قرار می دهید.

کاربرد تست های غیر مخرب یا تجهیزات NDT

پیشرفت و گسترش صنایع مختلف نیازمند تولید قطعات و تجهیزات مناسب است؛ ساخت و نگهداری این تجهیزات و خدمات نیازمند کنترل کیفی برای سلامت و کیفیت محصولات تولید شده است. تستهای غیر مخرب یا NDT یکی از کاربردی‌ترین روش‌های کنترل کیفی برای تعیین نقص در قطعات مختلف و نیز ارزیابی کیفیت محصولات است. آزمون‌های غیر مخرب محققان و یا مهندسان را قادر می‌سازد که یکپارچگی سازه و ویژگیهای مواد آن را مورد ارزیابی قرار دهند. استفاده از تکنیک‌های غیر مخرب و روش‌های آن باعث صرفه‌جویی با ارزش و گارانتی کیفیت سیستم‌ها و محصولات مهندسی شده می‌شود. با استفاده از آزمون‌های  تجهیزات NDT می‌توان عیب‌های موجود در قطعات از جمله ترک و شکستگی داخلی و سطحی، تخلخل و حفره‌های داخلی و نیز هر گونه عیبی که در هنگام انجام کار در قطعه ایجاد می‌شود را شناسایی کرد. این روش علاوه بر شناسایی نقص‌ها، برای تعین اندازه‌گیری ابعاد، جنس و ساختار شبکه کریستالی به کار می‌رود. این تکنولوژی می‌تواند از طریق روش‌های مختلف از جمله اشعه X برای تست ترک و نحوه انجماد؛ جریان گردابی برای تست ترک، سختی، ابعادی و جنس؛ اشعه گاما برای تست ترک و ابعادی؛ ذرات مغناطیسی برای تست ترک، ترموگرافی و رادیوگرافی انجام شود.
دلایل  استفاده :
آزمون های غیر مخرب به طور معمول برای رسیدن به اهداف زیر انجام می شود:پیشگیری از حادثه/برای کاهش هزینه ها/برای افزایش اطمینان محصولات
آشنایی با انواع آزمون های غیر مخرب:
آزمون های غیر مخرب انواع مختلف دارند و نوع آزمون مورد استفاده نسبت به شرایط و خواص فیزیکی مواد متغیر می باشد.در زیر آزمون پرکاربرد معرفی می شود:
1-آزمون چشمی(VT) VISUL TEST:دراین روش تنها عیوب سطحی را می توان بررسی کرد.
2-آزمون مایع نافذ(PT) LIQUID PENETRANT TEST: دراین روش تنها عیوب سطحی و عیوبی که به سطح راه داشته باشند مشخص می شود.
3- آزمون ذرات مغناطیسی (MT) MAGNETIC PARTICLE TEST: عیوب سطحی و زیر سطحی تا فاصله معینی از سطح را می توان با این روش بررسی کرد.
4- آزمون رادیوگرافی (RT) RADIOGRAPHIC: عیوب درون حجمی را بوسیله این روش بررسی می کنند.
5-آزمون فراصوتی(UT) ULTRASONIC TEST: دراین روش عیوب درونی و صفحه ای بازرسی می شود.