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

زیر مجموعه: آموزش آموزش طراحی وب

  • شروع طراحی یک صفحه وب

  • آشنایی با HTML , CSS و ساختار آنها

  • چگونگی کد نویسی یک صفحه وب استاندارد

فهرست مطالب این قسمت : 

 

1-   نرم افزار های مورد نیاز dreamweaver , notpad++ , photoshop , web browsers , web server

2-   چگونگی کار با نرم افزار های طراحی وب

3-   ایجاد یک صفحه وب با استفاده از html

 

 

نرم افزارهای مورد نیاز

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

 1-     Adobe photoshop برای طراحی گرافیکی و ایجاد طرح اولیه وب سایت. شما برای طراحی گرافیکی میتوانید از هر نرم افزاری که تمایل دارید استفاده نمایید اما از آنجایی که اکثر کاربران با این نرم افزار تا حدودی آشنایی دارند در این آموزش از فتوشاپ استفاده خواهم کرد.

 2-     Adobe dreamweaver برای انجام کد نویسی های صفحات وب. نرم افزارهای دیگری نیز میتوانید برای این کار استفاده نمایید مانند notpad++ اما امکانات فوق العاده ای که دریم ویور در اختیار شما میگذارد و برخورداری از دو محیط code و design باعث شده بسیاری از طراحان وب از آن استفاده نمایند.

 3-     یک مرورگر وب یا web browser برای نمایش صفحات وب طراحی شده مانند firefox و  opera که توصیه میشود برای بهره گیری از افزونه های مخصوص طراحی وب از firefox استفاده کنید.

 4-     در مراحل بعدی آموزش که مربوط به طراحی و پیاده سازی سایت های داینامیک می باشد به یک وب سرور هم نیاز دارید تا بتوانید صفحاتی را که با زبان های برنامه نویسی سمت سرور ایجاد شده اند را اجرا نمایید. در حال حاضر نیازی به وب سرور ندارید.

 

شروع کار (آموزش html)

ابتدا نرم افزار Adobe dreamweaver را بر روی رایانه خود نصب کرده و آنرا اجرا نمایید. با استفاده از این نرم افزار شما می توانید با زبان های مختلفی برنامه نویسی نمایید. به عبارت دیگر این نرم افزار با استفاده از تفکیک رنگ کد ها و راهنمایی کد به شما کمک می کند تا راحت تر بتوانید کد های صفحه وب خود را بنویسید.

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

 

پس از کلیک بر روی گزینه html صفحه شما با کد های اولیه یک صفحه html ساخته می شود. مانند شکل زیر:

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

در زیر کد های پیش فرض که در ساختار کلی html قرار دارند را توضیح می دهم:

<html>
                <HEAD>          
                </HEAD>          
<BODY>                        
</BODY>                        
<html>

در هنگام کد نویسی با مفهوم این کد ها بیشتر آشنا خواهید شد.

اکنون برای این که اولین صفحه وب خود را ایجاد کرده باشید این صفحه را با پسوند html ذخیره نمایید. سعی نمایید فایل های آموزشی را به صورت منظم ذخیره نمایید. توصیه می کنم یک پوشه برای وب سایت خود ایجاد و این فایل را به نام index.html درون آن ذخیره نمایید.

اکنون به محل ذخیره سازی صفحه وب خود رفته و آن را با مرورگر وب باز نمایید. همانطور که می بینید یک صفحه سفید مشاهده می نمایید. میتوانید بر روی این صفحه راست کلیک کرده و گزینه view page source را انتخاب نمایید تا سورس صفحه وب خود را ببینید. همانطور که می بینید سورس این صفحه دقیقا همان کدهایی است که در نرم افزار dreamweaver وجود داشت.

عناصر سازنده صفحات وب

یک صفحه وب از 3 عنصر اصلی تشکیل شده است:

  1. محتویات متنی (این عنصر در بر گیرنده عناوین مطالب ، پاراگراف ها و ... می باشد)
  2. رفرنس ها (رفرنس ها شامل مواردی نظیر لینک ها یا پیوند ها ، تصاویر و ... می شوند)
  3. علایم (علایم دستوراتی هستند که چگونگی نمایش محتویات متنی و رفرنس ها را در صفحه وب مشخص می نمایند.)

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

از آنجایی که مطابق استاندارد سازی کنسرسیوم وب دستورات قالب بندی صفحات وب (شامل مواردی مانند رنگ ، سایز و نو متن ، رنگ بندی صفحات و ...) از دستورات html جدا و در قالب یک زبان جداگانه به نام css ارائه گردیده است لذا برای پیروی از همین استاندارد سازی در این آموزش فقط به توضیح آن دسته از دستورات html پرداخته می شود که مربوط به قالب بندی صفحات نباشد.

ساختن یک صفحه وب

بیشتر صفحات وب از دو بخش اساسی head و body تشکیل شده اند.

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

از بین تمام محتویات بخش head فقط بخش عنوان صفحه که در بین دو تگ title قرار می گیرد در صفحه وب مشاهده می شود.

Body : تمام آنجا که در صفحه وب شما و درون مرورگر وب قابل مشاهده است در بین این تگ قرار می گید.

نوشتن عنوان یک صفحه وب :

برای نوشتن عنوان صفحه وب باید در بین تگ title قرار گیرد:

<TITLE>آموزش طراحی وب سایت</TITLE>

همانطور که قبلا گفته شد عنوان صفحه در بین تگ HEAD قرار می گیرد:

<html>
                <HEAD>
                                <TITLE>آموزش طراحی وب سایت</TITLE>
                </HEAD>
<BODY>
</BODY>
<html>

ساختن هدر ها یا متن های مهم:

هدر ها متن هایی هستند که در 6 سطح و تراز بندی مختلف وجود دارند به طور مثال هدر 1 از درجه بالاتری از اهمیت نسبت به هدر 2 قرار دارد.

در بین تگ BODY کد های زیر را تایپ نموده و صفحه وب خود را ذخیره نمایید:

 

همانطور که می بینید عنوان سایت در بالاترین قسمت مرورگر درج شده و متن های هدر هم به ترتیب از h1 تا h6 کوچک شده اند.

ایجاد پاراگراف:

برای ایجاد یک پاراگراف از تگ <p> استفاده می کنیم.

<p>این یک پاراگراف است</p>

ایجاد یک خط جدید:

برای ایجاد یک خط جدید باید از دستور <br /> استفاده نمایید. در هرجا از صفحه وب که از این تگ استفاده نمایید المان ها و محتویات بعد از آن به اندازه یک خط پایین می آیند. البته همچنان جزو یک پاراگراف محسوب می شوند.

به پاراگراف زیر و خروجی آن دفت نمایید:

 

 

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

 

 

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

نامگذاری المان ها یا تگ ها:

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

<p id="name">

در کد فوق name نام تگ id است.

برای گروه بندی تگ ها به شکل زیر عمل می کنیم:

<p class="name">

در کد بالا name  همان نام کلاس مورد نظر می باشد.

در خصوص نامگذاری تگ ها به نکات زیر توجه نمایید:

1-     هر یک از id های موجود در یک صفحه html باید منحصر به فرد باشد. به عبارت دیگر دو تگ نمیتوانند یک id یکسان داشته باشند.

2-     مقدار class دو یا چند تگ می توانند یکسان باشند.

3-     در خصوص نحوه کارکرد id و class در بخش css توضیح داده می شود.

 {phocadownload view=file|id=18|text=برای دانلود فایل pdf این آموزش کلیک نمایید|target=b}