• به وب استیودنت خوش آمدیدد
  • آموزش های ما را از وب سایت به نشانی www.WebStudent.ir پیگیری کنید
  • لطفا قوانین را مطالعه فرمایید
  • آموزش های گام به گام و تصویری
  • لطفا قوانین را مطالعه فرمایید
درود مهمان گرامی! ورود ثبت نام

آخرین اخبار انجمن وب استیودنت

طراحی صفحات وب ساده

طراحی صفحات وب ساده

این صفحه را به اشتراک بگذارید:



طراحی صفحات وب ساده
زمان کنونی: 1397-9-24، 07:14:56
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: silent
آخرین ارسال: silent
پاسخ 8
بازدید 4520



امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی صفحات وب ساده
#1
با درود به همه دوستان
در موضوع قبلی با عنوان "(دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.)" آشنا شدیم. حال به ادامه مطالب می پردازیم.
پیشنهاد می شود درصورتی که با زبان HTML آشنایی ندارید حتما مبحث "(دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.)" را مشاهده بفرمایید.

مفهوم برچسب (Tag) و ساختار آن

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

[تصویر:  tag.gif]

نکته مهم در مورد تگ های پایان این است که یک علامت / در ابتدای نام آنها قرار می گیرد تا از تگ های شروع متمایز شوند.

برخی از تگ ها علاوه بر نام دارای جز دیگری با عنوان مشخصه هستند که ویژگی های تگ را تعیین می کند.
برای مثال تگ <a> که برای ایجاد پیوند به صفحه ای دیگر یا نقطه ای در صفحه جاری مورد استفاده قرار می گیرد دارای مشخصه ای است که href نامیده مشوند و نشانی پیوند را در خود جا میدهد.
برای مثال : <a/>تیم برنامه نویسی برادران بهرامی<"a href="http://bbdt.ir target="_blank>
که به وبسایت تیم برنامه نویسی برادران بهرامی میرود
در مثال بالا <a> تگ، href و target هم مشخصه های آن هستند.مشخصه target را بعدها توضیح خواهیم داد.
در فصل های آتی هنگام معرفی برچسب ها و کارکرد هر یک از آن ها،با مشخصه های هر تگ آشنا خواهید شد.

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 9 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-11 23:26), bbdt (1391-12-11 18:38), gatsby (1392-10-29 04:55), h.taghadosi (1391-12-12 22:14), Hamid (1392-3-31 02:14), m00e00h00d00i (1392-10-14 16:52), Odin (1392-4-13 23:51), Orobas (1393-6-6 00:21), zeinab fazli (1391-12-14 11:39)
#2
به نام خدا
در بخش قبل، نمونه اي از كاربرد تگ <h1> را به صورت مجزا مشاهده كرديد.
برخي از تگ ها علاوه بر اين كه به صورت مجزا در كد درج ميشوند، هيچ محتوايي هم ندارند . براي نمونه با بكارگيري تگ </hr> ميتوان يك خط افقي به صفحه وب اضافه كرد.

براي آشنايي با نحوه استفاده از برچسب هاي تودرتو (تگ ها در كنار هم) به مثال زير دقت كنيد.

در اين مثالاز تگ <p> براي ايجاد پاراگراف و از تگ <i> براي مايل نمودن نوشته ها استفاده شده است
<p>you see a <b>bold</b>and a <b><i>bold-italic</i></b>word</p>

[تصویر:  bolditalic.gif]

همانطور كه در كد مذكور مي بينيد، تگ <b> درون <p> و تگ <i> هم درون <b> قرار گرفته و كاربرد تگ هاي تودرتو را نشان ميدهد

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 8 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), bbdt (1391-12-13 01:47), gatsby (1392-10-29 04:56), Hamid (1392-3-31 02:17), m00e00h00d00i (1392-10-14 16:54), Odin (1392-4-13 23:51), Orobas (1393-6-6 00:21), zeinab fazli (1391-12-14 11:41)
#3
به نام خدا

صفحات وب توليد شده در محيط هاي ويرايش متن(مانند notepad يا++notepad و...) يا نرم افزار هاي طراحي وب سايت (مانند Dreamweaver و...) را مي توان با دو فرمت html و htm ذخيره نمود كه هردو در مرورگرها به يك شكل نشان داده مي شوند و از اين نظر تفاوتي ميان آنها وجود ندارد.

با اين حال هنگامي كه وبسايت را روي سرور وب قرار مي دهيد تا از طريق اينترنت در دسترس باشد با دو
تفاوت جزيي ميان اين دو فرمت روبرو مي شويد :

الف)برخي سيستم عامل ها مانند Unix و Linux كه نصب آنها بر روي سرور هاي وب بسيار رايج است از پسوند هاي چهار حرفي همانند html پشتيباني نمي كنند

ب)چنان چه صفحه اول سايت به دو صورت index.htm و index.html بر روي سرور وب ذخيره شده باشد، هنگامي كه نام سايت را در مرورگر وب وارد مي كنيد، به صورت پيش فرض index.htm نشان داده مي شود.
لذا توصيه مي شود براي ذخيره سازي صفحات وب ساخته شدهاز فرمت htm استفاده نماييد.

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 8 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), bbdt (1391-12-15 14:42), gatsby (1392-10-29 04:57), Hamid (1392-3-31 02:20), m00e00h00d00i (1392-10-14 16:54), Odin (1392-4-13 23:51), Orobas (1393-6-6 00:21), zeinab fazli (1391-12-20 15:08)
#4
وب سايت هاي ثابت(Static) و پويا (Dynamic) چيستند؟

براي پاسخ به اين سوال بايد با دو تعريف جديد آشنا شويد : وب سايت هاي ثابت(Static) و وب سايت هاي پويا (Dynamic).
وب سايت هاي ثابت يا استاتيك به آن دسته از وب سايت هايي گفته مي شود كه ميزان تغيير اطلاعات در آن پايين است و به همين دليل ساخت آنها با استفاده از چند صفحه وب با فرمت htm و قرار دادن اين صفحات بر روي سرور وب انجام مي گيرد

در اين نوع وب سايت ها، صفحاتي كه كاربر مشاهده ميكند به صورت مستقيم توسط طراح وب ايجاد شده و تغيير محتواي صفحات فقط توسط طراح امكان پذير است.براي مثال در يك وب سايت آژانس مسافرتي كه حاوي تبليغات در مورد تورها و نيز ليست قيمت هاي سه ماهه است.صفحات مورد نظر در قالب چند فايل HTML ايجاد و بر روي سرور وب قرار مي گيرد و وقتي موعد تغيير ليست قيمت ها رسيد، آن صفحه مجددا طراحي شده و با صفحه قبل جايگزين مي گردد.

در مقابل، وب سايت هاي پويا (Dynamic) كه گاهي برنامه هاي كاربردي وب هم ناميده مي شوند ساختاري پيشرفته تر و منعطف تر دارند. در اين وب سايت ها كه عموما توسط گروهي متشكل از طراحان و برنامه نويسان توليد مي شوند، براي ورود اطلاعات جديد، مديريت اطلاعات قبلي و نيز ايجاد تغييرات در تعداد و شكل ظاهري صفحات امكان مجزايي در نظر گرفته مي شود.براي مثال وب سايت يك خبر گزاري كه روزانه صدها خبر جديد بر روي خروجي مي فرستند بايد حاوي امكاناتي براي تنظيم سريع ساختار متن و تصاوير خبر، و... داشته باشد تا صفحات به سرعت توليد شده و در اختيار بازديد كنندگان وب سايت قرار گيرد.

در اين گونه وب سايت ها كه محتواي پويايي دارند اطلاعات نه در صفحات مجزا بلكه در پايگاه داده (database) مي شود و براي بازيابي و نمايش اين اطلاعات بايد كد هايي به يك زبان برنامه نويسي تحت وب مانند : (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) و... نوشته شود.به همين دليل پسوند صفحات اين نوع وب سايت ها متناسب با زباني است كه كد هاي صفحات بر اساس آن نوشته شده است.

البته ذكر اين نكته ضروري است كه وقتي پردازش درخواست كاربر روي سرور وب انجام مي گيرد، نتيجه پردازش در قالب كدهاي HTML براي مرورگر فرستاده مي شود چون مرورگر غير از زبان هاي نشانه گذاري، زبان ديگري را براي نمايش صفحات وب شناسايي نمي كند.

در اين آموزش هاي HTML شما صرفا با نحوه ايجاد وب سايت هاي ايستا آموزش داده خواهيد شد و براي ايجاد وب سايت هاي پويا توسط يكي از زبان هاي برنامه نويسي تحت وب بايد به (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) برويد.

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 7 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), bbdt (1391-12-15 14:43), gatsby (1392-10-29 04:58), Hamid (1392-3-31 02:22), m00e00h00d00i (1392-10-14 16:53), Orobas (1393-6-6 00:22), zeinab fazli (1391-12-20 15:16)
#5
به نام خدا

يكي از روش هاي ساخت صفحات وب يا ايجاد تغييرات در آنها استفاده از ويرايش گرهاي متني است كه كد نويسي در آن به صورت دستي انجام مي گيرد.نرم افزار notepad كه همراه با سيستم عامل ويندوز ارائه مي شود يكي از ويرايش گرهاي متني است كه البته بيشتر جنبه آموزشي دارد.توصيه مي شود كه در صورت تمايل به استفاده از ويرايش گر هاي متني براي طراحي صفحات وب از (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) استفاده كنيد.چرا كه كدهاي اغلب زبان ها از جمله HTML براي آن تعريف شده است.

همان طور كه گفتيم notepad جنبه آموزشي بنابراين نحوه كار با notepad را آموزش خواهيم داد

ايجاد و ذخيره سازي صفحات وب :

1-براي اجراي آن به مسير روبه رو برويد: Start menu>All programs>Accessories روي عبارت notepad كليك كنيد تا پنجره برنامه ظاهر شود.
2-كد زير را در پنجره برنامه وارد كنيد و فعلا به جزييات كد كاري نداشته باشيد تا آنها را به صورت مفصل در انتهاي همين موضوع بررسي كنيم.
<html>
<body>
<head>
<title>
اولين صفحه وب من!
</title>
</head>
<p>This is your first webpage</p>
</body>
</html>

3-پس از وارد كردن كد، از منوي file گزينه save را اجرا كنيد تا پنجره ذخيره سازي سند ظاهر شود.
4-در اين پنجره، ابتدا محل ذخيره سازي فايل را تعيين كنيد.
5-از ليست Save as type گزينه All Files را انتخاب كنيد.
6-در ليست Encoding حالت UTF-8 را برگزينيد.
7-نام مناسبي براي فايل وارد كنيد و پسوند htm را كه با يك نقطه از نام فايل جدا مي شود به آن اضافه كنيد
8-روي دكمه Save كليك كنيد.
9-صفحه وب در محلي كه تعيين كرديد ايجاد شد است.

قبل از آنكه صفحه وب ساخته شده را در مرورگر مشاهده كنيد بايد مطلب مهمي را در مورد روش هاي موجود براي كد گذاري صفحه وب ياد بگيريد.به دليل تنوع زبان هاي موجود در دنيا و نيز پشتيباني سيستم عامل ها و نرم افزار هاي گوناگون از استاندارد هاي متفاوت، در برهه اي از زمان براي نمايش متون بر روي وب مشكلات و ناهماهنگي هايي بروز كرد.
براي مثال اروپايي ها كه داراي زبان هاي نوشتاري متفاوتي در حوضه جغرافيايي خود بودند.استاندارد هايي را براي كدگذاري متون طراحي كردند كه الزاما توسط همه نرم افزار هاي توليد شده در سطح دنيا به رسميت شناخته نمي شد.علاوه بر اين ايجاد صفحات وب با استفاده از طيف وسيعي از زبان ها (مانند زبان فارسي) امكان پذير نبود
براي رفع اين مشكل،با همكاري چند شركت رايانه اي دنيا استاندارد فراگيري تحت عنوان يونيكد(Unicode) تدوين شد تا بتواند از كدگذاري همه زبان هاي زنده دنيا پشتيباني و به هر نويسه در هر زبان يك كد منحصر به فرد اختصاص دهد.
پس از چندي، انجمن جهاني يونيكد كه وظيفه پياده سازي استاندارد يونيكد را بر عهده داشت،UTF را معرفي نمود و بر اساس آن چندين كد گذاري از نوع UTF ايجاد گرديد كه در ميان آنها UTF-8 به دليل سازگاري با نويسه هاي اسكي كه در نرم افزار هاي قديمي كاربرد فراواني داشتند به محبوبيت و كاربرد بيشتري دست پيدا كرد

با اين توضيحات مشخص گرديد كه چنانچه صفحه وب شما حاوي نويسه هاي غير انگليسي (مثلا فارسي) باشد براي نمايش صحيح آن ها در همه سيستم عامل ها و مرورگرها بايد از كد گذاري يونيكد و ترجيحا UTF-8 استفاده كنيد، در غير اين صورت ممكن است متون فارسي در مرورگر يك كاربر به صورت تعدادي علامت سوال يا نويسه هاي عجيب و غريب نشان داده مي شود.
احتمالا اين وضعيت را در هنگام مشاهده برخي از صفحات وب تجربه كرده ايد.
براي رفع اين مشكل ميتوانيد همانند عكس ها عمل كنيد.

1-صفحه اصلي انجمن را در زير مشاهده مي كنيد كه حروف فارسي به صورت علامت هاي عجيب غريب است

[تصویر:  webstudent_without_encodig.GIF]

2-براي فعال سازي يونيكد UTF-8 (كه زبان فارسي را پشتيباني هم مي كند) به مسير زير برويد
(view>character encoding>Unicode(UTF-8
شكل آن در زير مشاهده مي كنيد.


[تصویر:  webstudent_with_encodig.GIF]

3-اگر مراحل بالا را به صورت دقيق دنبال كرده ايد بايد مرورگر شما زبان فارسي را نشان دهد.همانند شكل زير

[تصویر:  webstudent_without_encodig_2.GIF]

براي طراحي صفحات وب استاندارد بايد نحوه كد گذاري صفحه را در ابتداي كد HTML به صورت صريح درج كنيد.با روش انجام اين كار در موضوعات آينده آشنا خواهيد شد.

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 8 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), bbdt (1391-12-15 14:49), gatsby (1392-10-29 05:01), Hamid (1392-3-31 02:38), m00e00h00d00i (1392-10-14 16:53), Odin (1392-4-13 23:51), Orobas (1393-6-6 00:22), zeinab fazli (1391-12-20 17:19)
#6
به سراغ صفحه وبي كه در بخش قبل ساختيد برويد.اين فايل با آيكني كه مربوط به مرورگر پيش فرض در سيستم عامل است (قالبا IE در ويندوز) از ساير فايل متمايز است.

آيكن پيش فرض مرورگر فايرفاكس : [تصویر:  firefox_web_webstudent.ir.PNG]


با دوبار كليك روي فايل ساخته شده آن را باز كنيد.كدهاي HTML توسط مرورگر تفسير مي شود و صفحه وب در پنجره مرورگر به نمايش در مي آيد.در نوار آدرس مرورگر، نشاني محل ذخيره سازي فايل و نام آن درج مي گردد.

[تصویر:  fw_describe_webstudent.ir.PNG]

چنانچه بر روي رايانه شما چندين مرورگر وجود داشته باشد، براي باز كردن صفحه وب با استفاده از مرورگر مورد نظر، روي فايل HTML راست كليك نموده و از منوي Open With مرورگر مورد نظر را انتخاب كنيد.
در اين منو ليستي از برنامه هايي را مي بينيد كه مي توانند براي نمايش يا ويرايش صفحه وب مورد استفاده قرار بگيرند.

[تصویر:  firefox_right_click_describe_webstudent.ir.PNG]

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 7 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), bbdt (1391-12-15 16:38), Hamid (1392-3-31 02:41), m00e00h00d00i (1392-10-14 16:54), Odin (1392-2-25 23:55), Orobas (1393-6-6 00:22), zeinab fazli (1391-12-20 17:19)
#7
به نام خدا

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

کد:
<html mlns="http://www.w3.org/1999/html">
<head>
<title>تیتر صفحه شما</title>
</head>
<body>
محتوای صفحه وب شما
</body>
</html>

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

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 6 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), gatsby (1392-10-29 05:02), Hamid (1392-3-31 02:43), m00e00h00d00i (1392-10-14 16:54), Odin (1392-4-13 23:51), Orobas (1393-6-6 00:23)
#8
اعلان <!DOCTYPE>


در اين اعلان بايد يكي از انواع سه گانه DTD ها را كه صفحه وب بر مبناي آن استاندارد توليد شده است معرفی کنید.
شکل کلی اعلان به صورت زیر است:
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 dtd_type//EN"
"http://w3.org/TR/html1/DTD/html11 -dtd_type.dtd">

در این اعلان به جای dtd_type باید یکی از انواع سه گانه DTD را قید کنید. این انواع عبارت اند از :
1-transitional : با نسخه های قدیمی مثل HTML سازگاری بیشتری دارد.
2-Strict : در خصوص رعایت قواعد کدنویسی، سخت گیری زیادی دارد.
3-frameset : مخصوص اسنادی است که در آنها از قاب (قاب با frame قابلیتی برای تقسیم بندی مرورگر به دو یا چند بخش و نمایش صفحات مجزا در هر بخش است.) استفاده شده است

بنابراین هنگامی که می خواهیم DTD نوع transitional را به کار ببریم، شکل اعلان به صورت زیر است :

کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 transitional //EN"
"http://w3.org/TR/html1/DTD/html11 -transitional .dtd">

چون شکر:شیرین و،چون گوهر:زبان پارسی ست


فارسی،فرهنگ و آیین و نشان پارسی ست
[url=http://parsibegoo.mihanblog.com][/url]
 
پاسخ
[-] 5 کاربر زیر از silent به مایه این نوشته سپاسگزاری کرده اند:
Bahrami (1391-12-20 19:59), gatsby (1392-10-29 05:02), Hamid (1392-4-24 01:13), m00e00h00d00i (1392-10-14 16:54), Orobas (1393-6-6 00:23)
  



پرش به انجمن:


کاربران در حال بازدید: 1 مهمان



:fixed;left : 2px;top :130px;float : left;width : 35px;height:320px;text-align:left;padding:0px;;border:0px #fff solid; background: #005ea7; background: -moz-linear-gradient(top, #005ea7 0%, #003965 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005ea7), color-stop(100%,#003965)); background: -webkit-linear-gradient(top, #005ea7 0%,#003965 100%); background: -o-linear-gradient(top, #005ea7 0%,#003965 100%); background: -ms-linear-gradient(top, #005ea7 0%,#003965 100%); background: linear-gradient(to bottom, #005ea7 0%,#003965 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ea7', endColorstr='#003965',GradientType=0 ); } .tdicons a{-webkit-transition : all 0.5s ease-in-out;-moz-transition : all 0.5s ease-in-out;-o-transition : all 0.5s ease-in-out;display : block;float : left;margin : 8px;padding : 5px;font-weight : bold;color : #fff;border-radius : 8px 0 8px 0;} .tdicons img{-webkit-transition : all 0.2s ease-in-out;-moz-transition : all 0.2s ease-in-out;-o-transition : all 0.2s ease-in-out;padding:0px;} .tdicons img:hover{padding : 0px 0px 0px 8px;}