طراحی وب سایت

آخرین مطالب

امکانات وب

انواع برنامه نويسي

انواع برنامه نويسي جهت طراحي صفحات وب؟

در صفحات وب پويا اطلاعات موجود در يک صفحه متناسب با شرايط متعدد بصورت کاملا" سفارشي آماده خواهد گرديد. فرض کنيد در رستوراني براي صرف ناهار رفته باشيم . ليست غذاهاي موجود ( منو) که در اختيار شما قرار مي گيرد يک ليست ايستا بوده و شما طراحی در صورت تمايل مجبور خواهيد بود که يکي از آنها را انتخاب نمائيد. شما صرفا" درخواست آن غذا را خواهيد کرد و غذاي مورد نظر شما از طرف سرويس دهنده رستوران در اختيار شما گذاشته خواهد شد. تمامي مراحل مربوط به آماده سازي غذا از قبل انجام شده و نقش شما صرفا" انتخاب و درخواست است . وضعيت فوق نظير صفحات وب ايستا است . در صورتيکه رستوران مورد نظر غذائي از پيش آماده شده را نداشته باشد و از شما بخواهد که با اختيار کامل غذاي مورد نظر خود را انتخاب نمائيد. در چنين مواردي تمهيدات لازم براي آماده سازي غذا بر اساس درخواست مورد نظر ايجاد شده و غذاي درخواست شده متناسب با نوع درخواست و تمايل فرد متقاصي ايجاد مي گردد. صفحات وب پويا نير وضعيتي مشابه را دارند.در ادامه به ويژگي هريک از اين نوع صفحات اشاره خواهد شد.صفحات وب ايستا ،‌ امروزه بر روي اينترنت و وب ، با سايت هاي متعددي که شامل ‌ تعداد بيشماري از صفحات وب ايستا مي باشند ، برخورد مي نمائيم. واژه " ايستا " ، در رابطه با يک صفحه وب داراي چه تعريفي است ؟ اين نوع صفحات ، صفحاتي هستند که شامل کدهاي Html بوده و در يک محيط اديتور تايپ و با انشعاب Htm و يا Html ذخيره مي گردد. مولف صفحه وب قبل از اينکه هر نوع درخواستي براي آن وجود داشته باشد ، بطور کامل محتوي صفحه را مشخص کرده است . محتويات اين نوع از صفحات ( متن ،‌تصوير ، لينک ها و ... ) و شکل ظاهري آنها همواره يکسان خواهد بود ، صرفنظر از اينکه چه کسي ، در چه زماني و يا چگونه صفحه را مشاهده خواهد کرد. بنابراين مي توان گفت ، محتويات اين قبيل از صفحات قبل از اينکه درخواستي ايجاد گردد ، توسط مديريت سايت ايجاد و مشخص شده اند.

مراحل آماده سازي صفحات وب ايستا

1 - يک مو.لف ، صفحه اي را که شامل کدهاي Html است را ايجاد و آن را با انشعاب Htm و يا Html بر روي سرويس دهنده وب ذخيره مي نمايد.

2 - کاربري از طريق برنامه مرورگر خود ، در خواست استفاده از يک صفحه را مي نمايد، درخواست فوق از مرورگر براي سرويس دهنده ارسال مي گردد.

3 - سرويس دهنده وب ، فايل درخواستي با انشعاب Htm و يا Html را پيدا خواهد کرد.

4 - سرويس دهنده وب ، کدهاي Html فايل مزبور را از طريق شبکه براي مرورگر ارسال ميدارد.

5 - مرورگر کدهاي Html را پردازش و صفحه فوق را نمايش خواهد داد.

محدوديت هاي صفحات وب ايستا

فرض کنيد مي خواهيم يک صفحه وب را بگونه اي طراحي نمائيم ، که بمحض ورود هر کاربر زمان جاري سيستم بهراه يک پيام مناسب نمايش داده شود.. در اين زمينه با چندين محدوديت مواجه خواهيم بود که بکمک تگ هاي Html قادر به برطرف کردن آنها نخواهيم بود. ما ميدانيم که يک کاربر در يک زمان خاص به ملاقات صفحه خواهد آمد ولي قطعا؛ زمان آن را نمي دانيم .اگر بخواهيم زمان را بصورت کد در صفحه Html خود داشته باشيم ، نتيجه همواره يکسان بوده و طراحی هميشه يک زمان ثابت و يکسان براي تمامي ملاقات کنندگان صفحه ، نمايش داده خواهد شد. تگ هاي Html امکاناتي بمنظور ايجاد صفحات وب سفارشي و بر اساس شرايط خاص در اختيار قرار نمي دهد. صفحات وب ايستا همواره بصورت مشابه و يکسان براي تمامي کاربران نمايش داده خواهند شد. ( نظير رستوراني که همواره و صرفنظر از ذائقه مشتريان خود ، يک غذاي ثابت و از قبل آماده شده را براي همه آماده و در اختيار قرار مي دهد!) Html داراي هيچگونه امنيتي نيز نبوده و کدهاي آن را همه مي توانند مشاهده و حتي تکثير گردد. شايد تنها مزيت اين نوع از صفحات طراحي آسان و بکارگيري سريع آنان در يک شبکه باشد.اين نوع صفحات داراي امکانات لازم بمنظور آفرينش صفحات پويا نيستند، چون نمي توان کدهاي مورد نظر خود را بعد از درخواست يک صفحه به آن اضافه کرد . مي بايست بدنبال روشي و يا روش هائي بود که بکمک آنها بتوان صفحات وب پويا را ايجاد کرد. بمنظور نيل به هدف فوق از دو روش عمده استفاده مي گردد:

· Client - side dynamic page . بهره گيري از تکنولوژيهائي که پويائي يک صفحه را از جايگاه سرويس گيرنده تحقق خواهند داد.

· Server - side dynamic page . بهره گيري از تکنولوژيهائي که پويائي يک صفحه را از جايگاه سرويس دهنده تحقق نمايند.

قبل از پرداختن به هر يک از موارد فوق، لازم است در ابتدا با مفهوم و جايگاه يک سرويس دهنده وب بيشتر آشنا شويم . يک سرويس دهنده وب ، نرم افزاري است که مديريت صفحات وب را برعهده گرفته و آنها را براي سرويس گيرندگان مجهز به مرورگرها، قابل دستيابي و استفاده مي نمايد. تاکنون سرويس دهنده هاي وب متعددي طراحي و به بازار عرضه شده است . Apache ، IIS ... نمونه هائي از اين نوع نرم افزارها هستند. IIS محصول شرکت مايکروسافت بوده و مي توان در زمان نصب ويندوز ( 2000 و يا XP) آن را نيز نصب نمود.نسخه 5 بهمراه ويندوز 2000 و نسخه 5.1 بهمراه XP ارائه شده است . بهرحال جايگاه يک سرويس دهنده وب در ارائه امکانات و زيرساخت هاي مناسب براي طراحي صفحات وب پويا و بالطبع سايت هاي پويا يک امر برجسته است. همانگونه که اشاره گرديد، براي خلق صفحات وب پويا از دو رويکرد متفاوت استفاده مي گردد. استفاده همزمان از دو روش فوق هيچگونه تعارضي با هم نداشته بلکه بالعکس توانائي يک صفحه وب پويا را افزايش خواهد داد. در ادامه به بررسي دو رويکرد فوق خواهيم پرداخت .

Client-side dynamic page . در مدل فوق ماژول هائي ( Plug -in ) که به مرورگر ملحق شده اند، تمامي عمليات لازم جهت ايجاد صفحات پويا را انجام خواهند داد. کدهاي Html از طريق فايل مربوطه که شامل مجموعه اي از دستورالعمل ها است براي مرورگر ارسال خواهد شد.مرورگرها دستورات فوق را جهت توليد کدهاي Html و در زمان درخواست يک صفحه توسط کاربر ، استفاده خواهند کرد. بنابراين محتويات يک صفحه بر اساس درخواست کاربران و بصورت پويا ايجاد خواهد شد.

مراحل آماده شدن يک صفحه وب پويا با تاکيد بر روش هاي Client-Side

1 - يک مولف صفحه وب مجموعه اي از دستورالعمل را براي ايجاد کدهاي Html نوشته و آنها را در فايلي با انشعاب Html ذخيره مي نمايد.

2 - کاربران درخواست يک صفحه را از طريق مرورگر خود براي سرويس دهنده وب ارسال خواهند کرد.

3 - سرويس دهنده فايل درخواستي ( در صورت نياز فايل ديگري که شامل دستورالعمل ها باشد) را پيدا خواهد کرد.

4 - سرويس دهنده وب فايل حاوي کدهاي Html و در صورت وجود دستورالعمل هاي مربوطه را براي متقاضي ارسال خواهد کرد.

5 - يک ماژول همراه مرورگر ، دستورالعمل ها را پردازش و کدهاي Html را در همان صفحه Html برمي گرداند.

6 - در نهايت کدهاي Html توسط مرورگر نمايش داده مي شوند.

تاکنون تکنولوژيهاي متعددي بر اساس رويکرد فوق مطرح و در اختيار طراحان و مولفان صفحات وب پويا قرار گرفته شده است . جاوا اسکريپت ، Vbscript ، کنترل هاي ActiveX و اپلت هاي جاوا نمونه هائي از اين نوع تکنولوژي ها بوده که براي شناخت خوانندگان در اين بخش بصورت خيلي مختصر در رابطه با هر يک توضيحاتي ارائه خواهد شد.

جاوااسکريپت (JavaScript) ،‌اولين زبان اسکريپت در رابطه با مرورگرها است . زبانهاي اسکريپت بعنوان حد ميانه بين کدهاي Html و زبانهاي معمولي برنامه نويسي قرار داشته و بصورت مفسر عمل مي نمايند. جاوااسکريپت را نبايد با زبان برنامه نويسي جاوا اشتباه گرفت . شرکت نت اسکيپ در ابتدا زبان اسکريپتي با نام LiveScript پياده سازي و بهمراه مرورگر NetScape 2.0 در اختيار علاقه مندان قرار گرفت . زمانيکه شرکت نت اسکيپ با شرکت Sun متحد گرديد ، نام آن را جاوااسکريپت گذاشتند.

بخشي از گرامر زبان فوق نظير ساختار اوليه ، از جاوا گرفته شده است ( خود جاوا نيز اغلب ساختار خود را از زبان C گرفته است ) . جاوااسکريپت داراي امکانات متعدد و قدرتمندي جهت کنترل و مديريت رفتار و محتويات يک مرورگر است . زبان فوق توانائي انجام عملياتي نظير : عمليات طراحی روي فايل ها را دارا نمي باشد .( شايد يکي از دلايل مسائل امنيتي باشد ) . فراگيري جاوااسکريپت نسبت به جاوا بمراتب راحت تر است . جاوا اسکريپت بگونه اي طراحي شده است که قادر به خلق برنامه هاي کوچک و در عين حال موثر جهت انجام عمليات متعددي نظير برخورد با رويدادهاي بوجود آمده در سطح کاربر نظير : کليک نمودن بر روي يک آيتم ، بستن يک پنجره ، فعال شدن يک صفحه ، خارج شدن از يک صفحه ، حرکت موس روي يک آيتم و... است . ماکروسافت نسخه اختصاصي خود از جاوااسکريپت را با نام Jscript و همزمان با معرفي مرورگر IE 3.0 در اختيار علاقه مندان رار داد.

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 98 تاريخ : يکشنبه 30 تير 1392 ساعت: 16:27

طراحی وب سایت

وب چيست؟ مفهوم و تاريخچه وب

امروزه سه حرف انگليسي w در کنار هم شبکه جهاني اينترنت را در اذهان تداعي مي کند. اما بسياري هنور مفهوم و تاريخچه اين سه حرف را نمي دانند.

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

پيشنهاد WWW و پروژه وب نخستين بار در سال 1990 در پروپزال تيم برنرز لي با همکاري رابرت کارلياو ارائه شد. وي طرح شبکه اي را مطرح کرد که صفحات متني بتوانند بصورت يک طرفه توسط بازديدکننده و يک نرم افزار مرورگر مشاهده شوند. وي پيشنهاد کرد که صفحات بتوانند به يکديگر مرتبط شوند و از طريق يک آدرس هر کس بتواند مقالاتي بنويسد که در نهايت از طريق لينک هاي ارتباطي شخصي از يک طرف جهان بتواند به منبعي در سوي ديگر دسترسي داشته باشد. در اين طرح از صفحات فقط قابل خواندني صحبت شد که خواننده بصورت يکطرفه آنهارا ببيند و در صورت تغييرات بصورت اتوماتيک به وي اطلاع داده شود. يعني چيزي که امروز به عنوان RSS همه گير شده است.

بعد از مدلسازي پروژه ، برنرز لي کليه مقدمات لازم براي پياده سازي طرح وب را فراهم کرد. از جمله بکارگيري يک کامپيوتر به عنوان اولين وب سرور جهان با نام NeXT و همچنين اولين مرورگر جهان با همين نام . تصويري که مشاهده مي کنيد عکس کامپيوتر "نکست" اولين سرور وب است.

اولين کامپيوتر سرور هاست جهان بنام نکست

برنرز هر آنچه را که لازم ميديد اجرا کرد و همچنين اولين صفحات وب در جهان را در سال 1991 ساخت. او در مقاله اي توضيحاتي پيرامون شبکه جهاني اينترنت و وب داد.

طراحی وب سایت

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

امروزه گرچه عبارت www به عنوان پيشوند آدرس سايت ها پذيرفته شده است اما ديگر از نظر تکنيکي الزامي نيست. اما عادت ديرينه شبکه وب استفاده از اين پسوند که به زير دامنه مبدل گشته است را مرسوم ساخته است.

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

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

در تصوير مي بينيد از چپ به راست رابرت کارلياو ، جين فرانشيوز از شرکت IBM و تيم برنرز لي - اين عکس در دهمين سالگرد تار گستر جهاني گرفته شده است

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 99 تاريخ : يکشنبه 23 تير 1392 ساعت: 14:23

داشتن وب سایت

مفهوم کامنت و لزوم استفاده از آن

کاراکترها وسمبل ها و نحوه استفاده در XHTML

نقطه شروع براي هر وب سايتي

لينک براي ارسال ايميل

درج تصاوير در سند

طراحی وب سایت

نظم در برنامه نويسي ارزش بالايي دارد به طوري که مي بايست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نويس ديگري باشد. يکي از ابزارهايي که در اين زمينه به ما کمک مي کند گذاشتن کامنت است.

کامنت در واقع نوشته هايي است که در سورس برنامه وجود دارند ولي در نمايش خروجي ظاهر نمي شوند . کامنت گذاري در HTML و CSS و JavaScript کاربرد زيادي دارند. به مثال زير دقت کنيد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Comment example</title>

content="text/html; charset=utf-8"/>

</head>

<body>

<p>I really, <em>really</em> like this XHTML stuff.</p>

</body>

</html>

و خروجي بدين صورت است:

در واقع با کامنت توضيح داده است که چرا از تگ em استفاده کرده است. کامنت گذاري در HTML بيشتر براي جدا کردن قسمت هاي مختلف وب سايت مي باشد به طور مثال قسمت منو را با کامنت مشخص مي کنيم و مي گويم مثلا اين قسمت از HTML براي منو است.

نحوه نوشن کامنت در HTML بدين صورت است:

در جاوا اسکريپت به 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">

<head>

<title>Commenting out XHTML</title>

</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>

و حالا خروجي برنامه

دقت کنيد که 2 آيتم li نمايش نمي يابد ولي حذف نشده تا شايد در آينده دوباره فعال شوند.

کاراکترها وسمبل ها و نحوه استفاده در XHTML

بسياري موارد پيش مي آيد که مي خواهيد در متن خود مانند نوشتن همين مقاله از کاراکترهايي مثل > ويا & و يا هر کاراکتر خاص ديگري استفاده کنيد. در XHTML ما به جاي درج مستقيم اين کاراکترها از کد خاصي که براي آنها تعريف شده استفاده مي کنيم.

براي آگاهي از اين کد ها ميتوانيد به اين آدرس رجوع کنيد.

صفحه اول ، نقطه شروع هر وب سايت

نقطه شروع هر وب سايت صفحه اول آن است که با نام index ويا default شناخته خواهد شد. ما در يک مثال کاربردي تگ هايي که تا به حال آموختيم به اضافه دو خصوصيت جديد اضافه کردن تصوير و ارسال ايميل را خواهيم آموخت.

مثال زير را در اديتور خود بنويسيد و با نام index.html ذخيره نماييد

</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="contacttest@test,com">email

[email protected]</a>.</p> </body>

</html>

حالا خروجي را ببينيم :

طراحی وب سایت

در مورد تگ هاي p و h قبلا صحبت کرده ايم ولي اينجا در قسمت contact متن آبي رنگي را مي بينيد که لينک است .

صفحاتي که تا به حال درست کرده ايم به صورت متني و بسيار کسل کننده است و براي جذابيت بيشتر مي بايست از عکس ها استفاده کرد . با استفاده از تگ img مي توان تصاوير را به صفحه اضافه کرد. بدين ترتيب :

src براي آدرس عکس

alt براي توضيح تصوير

width عرض تصوير به پيکسل

height ارتفاع تصوير به پيکسل

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

Alt هم متني است که عکس را توصيف مي کند و در مرورگرهاي متني و يا زماني که مرورگر تصاوير را نشان نميدهد به جاي نمايش عکس اين متن نمايش مي يابد و اما فايده ديگر اهميتش براي موتورهاي جستجو است.

اين نکته را هم در پايان اضافه کنم که براي Valid شدن در XHTML صفحه وجود alt الزامي است .

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 144 تاريخ : چهارشنبه 19 تير 1392 ساعت: 15:07

webdesign

با سلام مجدد خدمت همه علاقه مندان به يادگيري علم طراحي سايت و با پوزش از تاخير در ارائه مطلب ، اميدوارم بتوانيم منظم تر از گذشته اين سري آموزشي را ادامه دهيم .

آيا ساختن يک صفحه کافي است؟

در قسمت هاي گذشته ساخت يک صفحه از وب سايت را آموختيم و حالا مي خواهيم چند صفحه را در کنار هم داشته باشيم و بين آن ها با لينک دهي حرکت کنيم . در واقع اين يک workshop براي جمع آوري اندوخته هاي شماست .

در ابتدا صفحه اي با نام index.html مي سازيم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Bubble Under - The diving club for the south-west

UK</title>

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>BubbleUnder.com</h1>

</div>

<p>Diving club for the south-west UK - let's make a

splash!</p>

</div>

</div>

<h2>Welcome to our super-dooper Scuba site</h2>

<p><img src="divers-circle.jpg"

alt="A circle of divers practice their skills"

width="200" height="162"/></p>

<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>

</div>

</body>

</html>

طراحی وب سایت

نحوه ساخت و تگهاي استفاده شده در مثال فوق قبلا توضيح داده شده است . (سورس تگ img را با تصويري در کامپيتر خود پر کنيد)

حالا در فلدري که صفحه شما وجود دارد از فايل index.html مي بايست 2 بار کپي بگيريد . بدين ترتيب:

بعد از انتخاب فايل

edit > copy

و سپس 2 بار

Edit > paste

را مي زنيد حالا 3 فايل مشابه داريد که مي بايست 2 تاي کپي شده را تغيير نام دهيم براي همين روي آنها کليک راست ماوس را فشار مي دهيم و گزينه يrename را مي زنيم تا بتوانيم نام دلخواه را به آن ها بدهيم. يکي را contact.html و ديگري را about.html نام گذاري مي کنيم .

محتواي 3 صفحه فوق يکسان است و مي بايست محتواي صفحات را ويرايش کنيد تا با هم يکي نباشد براي اين کار صفحات دوم وسوم را با ابزار هايي که توضيح داده شده است مثل NotePad باز کنيد و تايتل و محتواي هر صفحه را نسبت به نام آن تغيير دهيد . به طور مثال عبارت contact us را براي تگ تايتل در صفحه contact.html انتخب نماييد.

بعد از تغييرات در 2 صفحه موجود آن ها را save کنيد . ( روش save کردن در جلسات گذشته توضيح داده شده است)

لينک کردن صفحات به هم:

صفحه اول يا همان index را باز کنيد و سعي کنيد از آن به صفحه contact برويد!

بله اين امکان در حال حاضر وجود ندارد و براي حرکت بين صفحات مختلف شما مي بايست از link و يا anchor استفاده نماييد.

حالا بايد براي لينک دهي بين صفحات يک منو و يا navigation سايت را بسازيم . دقت نماييد نحوه ساخت navigation سايت بسيار مهم است و ساختاري که در ادامه توضيح داده مي شود ساختاري مناسب و استاندارد براي منوي سايت مي باشد و بهتر است الان نگران ظاهر آن نباشيد در ادامه مقالات ظاهر آن را زيبا مي کنيم!

ساخت يک منويnavigation

<ul>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

طراحی وب سایت

حالا کد زير را در بالاي همه صفحات بعد از تگ div با آي دي header اضافه نماييد . به طور مثال براي صفحه index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Bubble Under - The diving club for the south-west

UK</title>

charset=utf-8"/>

</head>

<body>

<h1>BubbleUnder.com</h1>

</div>

<p>Diving club for the south-west UK - let's make a

splash!</p>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

<h2>Welcome to our super-dooper Scuba site</h2>

<p><img src="divers-circle.jpg" width="200" height="162"

alt="A circle of divers practice their skills"/></p>

<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>

</div>

</body>

</html>

حالا به راحتي مي توانيد بين 3 صفحه حرکت نماييد.

نکته نويسنده: بهترين مکان براي قرارگيري منوي سايت هم از لحاظ ظاهر و هم در ساختار html بالاترين نقطه صفحه است. مطمئن باشيد اين به نفع شماست!

و در آخر 3 صفحه خواهيد داشت که به راحتي قابليت حرکت بين يکديگر را دارند.

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 105 تاريخ : يکشنبه 16 تير 1392 ساعت: 12:51

وارد کردن کامنت اچ تي ام ال

وارد کردن کامنت در متن اچ تي ام ال

توضيحات ( کامنتها ) مي توانند وقتي که در حال نوشتن صفحه خود هستيد به شما کمک کنند. مرورگرها نمي توانند کامنتها را نشان دهند پس در صفحه نهايي آنها به بيننده نشان داده نمي شوند. تنها راه مشاهده کامنتها مشاهده صفحه Source code صفحه است که با زبان HTML نمايش داده شود. با استفاده از اين خاصيت شما مي توانيد در هنگام نوشتن يک صفحه براي خود يادداشت بگذاريد تا وقتي که بعداً به آن نگاه کرديد بهتر آرا درک کنيد.

در مواردي که پس از گذشت مدتي از نوشتن يک صفحه نياز به ويرايش آن صفحه باشد يا بيش از يک نفر در نوشتن يک صفحه نقش داشته باشند کامنتها مي توانند در فهميدن صفحه به طراحان آن کمک کنند.

طراحی وب سایت

براي نوشتن يک کامنت شما بايد ابتدا اين علامت > سپس علامت تعجب ! و بعد دو خط فاصله -- (دش) بگذاريد. بعد از اين علائم هر متني که بنويسيد توسط مرورگر نمايش داده نمي شود. تا وقتي که علامت پايان کامنت را در انتهاي آن بگذاريد.

علامت پايان کامنت به اين صورت نوشته مي شود: ابتدا دو خط فاصله -- سپس اين علامت < . به مثال زير توجه کنيد:

<!--

اين يک کامنت است

کامنتها در مرورگر نمايش داده نمي شوند

-->

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 179 تاريخ : پنجشنبه 6 تير 1392 ساعت: 15:29

HTML برای قالب بندی عناصر

استفاده از CSS برای قالب بندی عناصر HTML

HTML اصولاً برای مشخص کردن هویت عناصر صفحه به وجود آمد. یعنی برای اینکه مشخص شود کدام بخش صفحه یک پاراگراف است یا کدام قسمت سرفصل است و کدام بخش یک جدول است و... برای این منظور هم از یک سری تگ استاندارد نظیر <p> ، <h1> و <table> استفاده می شد. وظیفه ای که برای HTML در نظر گرفته شده بود فقط همین بود و نحوه نمایش این عناصر بر عهده مرورگرهای وب بود. برای مثال مشخصاتی نظیر فونت متن، رنگ و مشخصاتی از این قبیل را مرورگر انتخاب می کرد و HTML در قالب بندی عناصر طراحی وب سایت صفحه نقشی نداشت.

به تدریج مرورگرهای بزرگ مثل اینترنت اکسپلورر و Netscape از تگهای HTML جدیدی برای قالب بندی و تعیین ظاهر طراحی وب سایت استفاده کردند مانند تگ <font> که برای تعیین فونت متن مورد استفاده قرار می گیرد و شناسه color که رنگ متن را مشخص می کند.

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

استفاده از استایل و شیوه نامه ها (CSS) با HTML 4.0 آغاز شد. از CSS برای قلب بندی عناصر صفحه استفاده می شود. برای مثال با آن می توان برای قسمتهای مختلف در صفحه تصویر زمینه تعیین کرد، فونت آنها را تغییر داد، رنگ متن ها را تغییر داد و بسیاری از قابلیتهای دیگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحی وب سایت قرار می گیرد. برای توضیحات بیشتر و یادگیری CSS می توانید از لینک زیر استفاده کنید :

آموزش استفاده از شیوه نامه ها (CSS) در طراحی وب سایت

نوشتن صفحات پویای طرف کاربر با جاوا اسکرپت

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

طراحی وب سایت

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

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

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 91 تاريخ : چهارشنبه 29 خرداد 1392 ساعت: 14:38

داشتن یک وب سایت

یک وب سایت

داشتن یک طراح وب سایت همانند داشتن یک کاتالوگ می باشد اما با امکاناتی بسیار بیش تر از یک کاتالوگ ساده !!! یک کاتالوگ فقط می تواند شاملمتون و تصاویر باشد و چاپ و انتشار هر نسخه از آن نیازمند هزینه ی زیادی می باشد اما با استفاده از یک سایت اینترنتی می توان به راحت اطلاعات مربوطه به محصولات جدید را منتشر کرد,بدون اینکه نیازی به چاپ بروشورها و آگهی ها باشد.شما با استفاده از یک سایت می توانیدبه راحتی محصولات طراح وب سایت و خدمات خود را به بازدید کننده معرفی کنید,نظرات و پیشنهادات آن ها را جمع آوری کنید و حتی می توانید با ایجاد یکنجمن گفتگو در وب سایت شخصی خود به کاربران اجازه دهید تا به نظرات دیگران پاسخ دهند.تمامی این امکانات را می توان با هزینه ی پایینبرای طراحی و نگهداری آن پرداخت کرد و در طول زمان هزاران کاربر طراح وب سایت می توانند برای همیشه از وب سایت شما بازدید کنند یک وب سایت را می توان راهی مناسب برای ارائه اطلاعات در رابطه با محصولات و خدماتی دانست که شرکت به مشتریان ارائه می کندبدون اینکه مشتری مجبور شود تا به شرکت مذکور تماس حاصل کند و در هر کجا طراح وب سایت که باشد می تواند به سایت شرکت مراجعه کرده و اطلاعاتخود را کسب کند. قابلیت های عالی وب سایت ها جنبه ی تبلیغاتی آن ها به حساب می آید,با داشتن یک وب سایت صاحبان و مدیران آنوارد عرصه تجارت الکترونیک می شوند و می توانند از این امکانات برای فروش هر چه بیش تر محصولات خود بهره ببرند که از مهمترین اینقابلیت ها می توان به تبلیغات اینترنتی و تبلیغات در موتورهای جستجو , تبادل لینک , تبلیغات کلیکی و پیوندها اشاره کرد.

طراح وب سایت تا حد زیادی بستگی به هدف خود مشتریان دارد پس شما باید قبل از طراحی,هدف از ساخت آن را در نظر بگیرید شما بایدنیازهای کاربران و مشتریان خود را نیز در اولویت قرار دهید اگر در طراحی وب سایت نیاز کاربران در نظر گرفته نشود و یا نیازها به طور کلی روشننشود,نمی توان از آن سایت انتظار کارایی و بهره بری را داشت.برای طراحی یک وب سایت باید از زبان های برنامه نویسی طرف سرور(server side)نظیر php و asp و با استفاده از بانک های اطلاعاتی و پایگاه های داده همانند mysql و تکنیک های ajax و javascript گفته شدهدر جای مناسب خودش استفاده شود تا نیازهای نهایی کاربران نیز برآورده شود. در صورتی که مایل بودید صاحب یک وب سایت اینترنتی باشید می توانید با ما تماس بگیرید و هدف از تاسیس سایت و نیازهای کاربرانتان را با ما در میان بگذارید,ما پس از بررسی وب سایت مورد نظر شمادر صورت امکان شما را بر عهده می گیریم و تمام تلاشمان اینست که سایتی مطابق با سلیقه و میل شما ایجاد کنیم. علاوه بر موارد

طراحی وب سایت...

ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : ali webdesign28 بازدید : 112 تاريخ : چهارشنبه 22 خرداد 1392 ساعت: 17:05

طراحی وب سایت

آخرین مطالب

امکانات وب

انواع برنامه نويسي

طراحی وب سایت

داشتن وب سایت

webdesign

وارد کردن کامنت اچ تي ام ال

HTML برای قالب بندی عناصر

داشتن یک وب سایت

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه