طراحی وب سایت

 

در آن زمان، سايت هاي اينترنتي با کدهاي ساده «HTML» نوشته مي شدند. HTML يک زبان کدنويسي بود که ساختار ساده اي به وب سايت ها مي داد. با استفاده از طراحی  اين زبان برنامه نويسي طراحي سرتيتر و پاراگراف و پيوند دادن به صفحه هاي وب ديگر ممکن مي شد.

 

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

 

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

 

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

 

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

 

يکي از عواملي که موجب محبوبيت اين نوع طراحي در چند سال اخير شده، دميدن روح به وب سايت هاي خشک و کسل کننده نسل قديم بود به طوري که با ورود به اين وب سايت ها يک احساس خوشايند به بيننده دست مي دهد. اين سايت ها در بيشتر موارد با استفاده از هنر انيميشن سازي جذاب تر و پوياتر مي شوند که اوج آن را در وب سايت هاي مجهز به Full Flash Template نيز مي توان مشاهده کرد. ترکيب گرافيک مناسب و فايل هاي متحرک زيبايي سايت هاي ياد شده را دو چندان کرده است.

 

پيش از آنکه به چنين نکاتي بپردازيد بد نيست که به چند مسئله مهم و اساسي در زمان طراحي يک وب سايت مدرن و پيشرفته توجه کنيد.

 

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

 

دومين سوالي که بايد به آن پاسخ دهيد آن است که چرا مي خواهيد يک وب سايت داشته باشيد؟ آيا مي خواهيد ارايه دهنده يک سرويس، فروشنده تعدادي محصول، گردآورنده اطلاعاتي در خصوص ارتقا آگاهي درباره موضوعي خاص باشيد يا به دنبال درآمدزايي بيشتر و معرفي خود به ديگران و... هستيد؟

 

در نهايت بايد مشخص کنيد که با داشتن يک وب سايت خواستار رسيدن به چه اهدافي هستيد؟ اين موضوع بسيار مهم است که بدانيد بهره مندي از يک وب سايت چه مزيت هايي را براي شما به همراه خواهد آور

 

سازگاري کامل با کليه مرورگرها

سازگاري Jquery با کليه ي مرورگرهاي وب يکي از اصلي ترين مزاياي آن مي باشد . امروزه به دليل گسترش سريع تکنيک هاي برنامه نويسي و به موازات آن ها دگرگوني سريع مرورگرهاي وب ، اصل "سازگاري با کليه مرورگرها" به عنوان يکي از مهمترين اصول طراحی  وب مطرح گرديده است که Jquery آن را به طور کامل پوشش مي دهد. 

 

حجم پايين و بارگذاري سريع

سبک بودن و سريع بودن Jquery مهمترين مزيت آن در مقابل Flash مي باشد ، به طوري که حجم کامل کتابخانه 15 Jquery کيلوبايت بوده که در مقابل حجم محيط هاي گرافيکي توليد شده توسط فلش بسيار ناچيز محسوب مي شود و در کشورهايي که هنوز اينترنت پرسرعت براي کليه کاربران در دسترس نيست يک اصل طلايي محسوب مي شود. 

 

سازگار بودن با موتورهاي جستجوگر 

Jquery به دليل ترکيب مناسب با HTML و امکان ترکيب با محتوي هاي شامل متن ، اين امکان را براي موتورهاي جستجوگر فراهم مي کند که به آساني متن مورد نظر را پيدا کنند و از اين رو امکان Index شدن صفحه مورد نظر را فراهم مي کند ، که اصلي مهم براي سازگار بودن وب سايت با قوانين SEO (قوانين استاندارد موتورهاي جستجوگر) به شمار مي آيد . 

 

عدم نياز به برنامه جانبي 

مزيت ديگر Jquery عدم نياز آن به برنامه کمکي جهت اجرا شدن مي باشد ، با توجه به اين که برنامه هاي توليد شده توسط فلش براي اجرا شدن بر روي کامپيوتر کاربر احتياج به برنامه کمکي مثل Adobe Flash Player مي دارند ، عدم نياز به برنامه هاي کمکي يک مزيت مهم براي Jquery محسوب مي شود . همچنين شايان ذکر است که Jquery با زبان فارسي سازگاري کامل دارد و کاربرهاي ايراني مي توانند به راحتي از مزاياي آن بهره مند شوند. برخي از کاربران معروف Jquery : IBM, Netflix, Google , Microsoft و .... 

گردآوري: واهاگن سرکس پور

 

 

 

ر آرشيو

فن تک – مجله اينترنتي فناپ

درباره فن تکتماس با ماخانه

سرخط فن تک

خطرات پرداخت با موبايل افزايش يافته است

درک اهميت معتبر سازي کدهاي HTML

بهترين شرکت هاي نرم افزاري براي کار در سال ????

آموزش نصب Windows Phone SDK 8.0

تبلت VTech InnoTab 3 ويژه کودکان

ويژگي هاي تجاري براي توسعه دهندگان شبيه ساز Firefox OS

مروري بر شارژر بي سيم Qi گوشي گلکسي اس ?

آموزش وارد کردن فيدهاي گوگل ريدر به اکانت Feedly

نکسوس ? جديد تا پايان جولاي وارد تايوان مي شود

راه حل هايي براي مشکلات Windows Phone 8

 

آينده طراحي وب در ???? چگونه خواهد بود؟

 

دي ??, ????

?- افزايش طراحي‌هاي واکنش گرا (Responsive) [fn] طراحي هاي واکنش گرا (Responsive): نوعي رويکرد در طراحي يک وب سايت که در آن سايت با لايه هايي انعطاف پذير طراحي مي شود و سايت مي تواند با تشخيص Device که کاربر از آن استفاده کرده است، بهترين وضعيت براي پاسخ گويي به صفحات نمايش را به صورت اتوماتيک انتخاب نمايد . طراحي وب سايت به صورت واکنش گرا باعث مي¬شود تا وب سايت تقريبا در تمامي دستگاه ها با اندازه صفحات متفاوت و مرورگرهاي متفاوت قابل استفاده باشد . [/fn]

 

 

 

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

 

جاي تعجب نيست که طراحي Responsive همچنان در مدل فعلي ادامه پيدا کند. اما در سال ???? بايد منتظر اين باشيم که متدولوژي پشت اين گونه طراحي  تغيير کند. به عنوان مثال در آغاز سال ???? ايده اين طرح اين بود که از يک سري Break Point براي هر مدل دستگاه استفاده شود، اما با ورود نسخه ميني از آيپد، اين ايده به چالش کشيده شد و تغيير کرد.

 

به گزارش مجله فناوري اطلاعات فناپ، پيش بيني مي شود که وب سايت‌هاي بيشتري از اين مدل طراحي استفاده خواهند کرد تا اطمينان حاصل کنند که وب سايت آنها بر روي طيف گسترده اي از دستگاه ها به خوبي نمايش داده مي‌شود. ايده توجه نکردن به اندازه صفحه نمايش دستگاه ها کمک مي کند که به طراحي Responsive بهتري دست پيدا کنيم. بنابراين در ???? شاهد خواهيم بود که وب سايت هاي بيشتري از BreakPoint ها براي طراحي خود استفاده خواهند کرد.

 

?- تايپوگرافي در وسط صحنه خواهد بود

 

 

 

طراحان وب و توسعه دهندگان هميشه تمرکز خود را بر روي کاهش حجم عناصري همچون تصاوير و جاوا اسکريپت ها مي گذارند تا وب سايت سبک تري داشته باشند. همانطور که در چند سال گذشته اولين پيشرفت هاي وب در زمينه هاي نمايشي به وجود آمد، استفاده از اين ترکيب ها طراحان را مجبور مي کرد تا از تصاوير بيشتري در طراحي خود استفاده کنند. اما طراحان بايد بدانند که امکانات خوبي براي زيباتر کردن وب سايت ها موجود مي باشد. يکي از اين امکانات استفاده از @font-face در CSS مي باشد که طراح را قادر مي سازد تا متون مختلف را با فونت هاي مختلفي که بر روي سرور ذخيره شده اند، نمايش دهند. حجم اين فونت ها به نسبت باقي تصاوير و افکت هاي جاوا اسکريپت سبک تر هستند. قبلا اين کار امکان پذير نبود و طراح بايد از فونت هاي استاندارد استفاده مي کرد که ظاهر جالبي نداشتند، اما با اين ويژگي جديد مي توان هر فونتي را براي نوشته ها انتخاب کرد.

 

استفاده از تايپوگرافي در طراحي Responsive به نسبت استفاده از Layout هاي پيچيده که از تصاوير مختلف و جاوا اسکريپت استفاده مي کنند، بسيار ساده تر مي باشد.

 

?- خداحافظ فلش!

 

جاي تعجب نيست که استفاده از فايل هاي فلش در وب سايت ها در سال ???? پايان يابد و ديگر شاهد آن ها نباشيم. استفاده از فلش روزهاي پاياني خود را سپري مي کند و بسيار آشکار است که فلش تنها بر روي يک پاي خود ايستاده است. استفاده از فلش براي SEO وب سايت بسيار بد است و موتورهاي جستجو آن را به عنوان نمره منفي حساب مي کنند، بسياري از تلفن هاي هوشمند از آن پشتيباني نمي کنند (مثلا محصولات اپل) و به روز رساني هاي آن بسيار سخت است و باعث Crash کردن مرورگرها مي شود. علاوه بر اين تکنولوژي هاي جايگزين بسيار خوبي براي آن مثل HTML5 و CSS3 آمده اند.

 

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

 

?- تاثير بيشتر با تصاوير بزرگتر

 

 

 

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

 

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

 

?- فضاي سفيد بيش تري به من بده!

 

 

 

 در انتهاي سال ???? وب سايت ها در طراحي خود از فضاي سفيد بيش تري استفاده کردند. پيش بيني مي کنيم که اين روند همچنان در سال ???? ادامه پيدا کند. طراحي وب Responsive و زيبايي استفاده از فضاي خالي (که MySpace از وب سايت هاي پيشرو در اين زمينه مي باشد) هر دو از فاکتورها موجود هستند. استفاده از اين فضاهاي خالي باعث مي شود تا وب سايت شما حرفه اي تر به نظر برسد.

 

?- اشتراک گذاري بيشتر در شبکه هاي اجتماعي

 

 

 

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

 

?- رنگ هاي Calmer دوباره استفاده خواهند شد.

 

 

 

گرايش به رنگ ها بيشتر از هر چيز ديگري در حال تغيير هستند.  اما مثل اينکه استفاده از زمينه هايي با رنگ آرام در وب سايت هاي جديد شدت يافته است و حتي در طراحي نسخه جديد رابط کاربري PayPal نيز مشهود است. رنگ سال ???? به انتخاب موسسه Pantone’s را نيز مي توانيد در اين صفحه مشاهده کنيد.

 

پيش بيني اينکه چه رنگ هايي ممکن است براي طراحي وب سايت ها در سال ???? استفاده شود، بسيار سخت است. در هر صورت رنگ هاي روشن شانس بيشتري براي استفاده در طراحي هاي جديد وب سايت ها و اپليکيشن هاي تلفن هاي همراه خواهند داشت. البته استفاده از رنگهايي همچون ترکيبات سفيد، طوسي و طيف هاي مختلف مشکي دور از انتظار نخواهد بود.

 

?- اپليکيشن هاي تلفن هاي هوشمند جايگزين نسخه هاي تحت وب خواهند شد

 

 

گرايش به کار کردن وب سايت ها بر روي تمام دستگاه ها از جمله تلفن هاي همراه روز به روز بيش تر مي شود. اما در اين ميدان نبرد به نظر مي رسد که وب سايت هاي معروف با ارائه اپليکيشن اختصاصي خود براي تلفن هاي هوشمند بهتر عمل کرده اند. توييتر، فيسبوک، Pinterset و … نمونه هاي مناسبي هستند که اپليکيشن تلفن همراه آنها توانسته است تا تجربه بهتري نسبت به نسخه تحت وب آنان به کاربران منتقل کند.

 

 

همراه با اينکه “محتوا” در صدر نيازها قرار خواهد گرفت، وب سايت ها تمرکز بيشتري براي توليد محتواي با کيفيت خواهند داشت. انتشار و اشتراک اطلاعات نيز به اين طراحی  روند کمک خواهند کرد و همزمان طراحي Responsive کمک مي کند تا داده ها در هر زماني و با هر دستگاه هوشمندي به خوانندگان تحويل داده شود. در نهايت بايد بدانيد که خانواده طراحي Responsive، رسانه هاي اجتماعي و محتوا در صدر گرايشات طراحي و توليد وب سايت ها در سال ???? خواهد بود.

 

 

مرورگرهاي مخصوص mobile و device هاي با صفحه نمايش کوچک به دليل محدوديت در اندازه ي صفحه نمايش چالشي را در طراحي style ايجاد مي کنند که همين امر باعث مي شود تا style متفاوتي را براي آنها تعريف کنيم. همانند تعريف دو style متفاوت براي print و screen. در موبايل و device هاي با صفحه نمايش کوچک مي توان از mediaي handheld استفاده کرد اما در عمل تعداد کمي از موبايل ها از اين media پشتيباني مي کنند. راه دوم و بهتر اين است که style را براي screen و به همراه max-width و min-width استفاده کنيم.

مثال :

 

<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="style.css" />

 

 

 @media screen and (max-width: 480px) {

 

</style>

max-width حداکثر اندازه ي صفحه نمايش را مشخص مي کند که در موبايل هاي پيشرفته امروزي معمولا 480pixel مي باشد.

تعيين شرط در media

 

 

همانطور که در قسمت بالا گفتيم، بهترين روش طراحي براي ديگر دستگاه ها استفاده از max و min-width مي باشد، طريقه ايجاد شرط براي تعيين اين دو خصوصيت استفاده از and و سپس آوردن شرط در داخل پرانتز است

مثال :

1

@media screen and (max-width: 480px) and (min-width: 320px) {

2

}

همانطور که مي دانيد، بعضي از دستگاه هاي موبايل حالت افقي نيز دارند، در اين حالت عرض دوباره تغيير خواهد کرد، پس بهتر است style اين حالت را نيز تعيين کنيم.

 

حال که اين سري به پايان رسيد لازم دونستم چند نکته رو يادآوري کنم :

1. همه آموزش هايي که قرار دادم، آموخته هاي شخصي خودم بوده، و از جايي کپي پيست نشده /پاسخ بعضي از دوستان قدرشناس! که پيغام خصوصي داده بودند، "چرا دير آپ ميشه آموزش سي اس اس. يه کپي پيست کردن از مطالب بقيه که اين همه وقت نميخواد."

2. دليل دير آپ شدن اين سري بعضي مشکلات خصوصي، و مشغله هاي کاري بوده اگه کسي از دوستان ناراحت شده از اين موضوع، ازش عذرخواهي مي کنم.

3. يادگيري اين آموزش ها نياز به سعي و تلاش و تمرين مستمر داره، پس هميشه يک زماني رو اختصاص بدين به تمرين اين آموخته ها.

4. سري آموزشي طراحي قالب نيز، ايشالا به زودي شروع ميشه.

اميدوارم که از اين سري آموزشي نهايت بهره رو برده باشين. اگر سوالي داشتين ميتونيد در بخش نظرات مطرح کنيد.

 

آموزش وردپرس, خدمات, طراحي سايت, نکاتي براي مشتريان طراحي سايت, وردپرسديدگاه ها

همواره يکي از دغدغه هاي اساسي مشتريان طراحي سايت و يا طراحي قالب وردپرس؛ بررسي صحت و سقم ادعاهايي هست که از سوي طراحان مختلف مطرح مي شود و در اين ميان، همواره داشتن يک ملاک تشخيص و ارزيابي عملکرد و کيفيت قالب هاي طراحي شده، اهميت بسزايي براي مشتريان دارد.

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

 

در مورد دو عامل نخست (مقالات و ميزان رضايت مشتريان پيشين طراحي سايت و يا طراحي قالب وردپرس آنلاينر) به فراخور کار هر مشتري، توضيحات از سوي مسئول مکاتبه با مشتريان اعلام مي شود، و اما در مورد استفاده از سرويس هاي آنلاين، دو سرويس کاملا معتبر آنلاين وجود دارند که مشتريان مي توانند با بررسي وب سايت ها و يا قالب هاي وردپرس طراحي شده توسط آنلاينر، به ميزان کيفيت آن ها پي ببرند:

 

وب سايت ارزيابي ميزان کيفيت و سرعت gtmatrix

اين وب سايت علاوه بر اينکه يک سرويس ارزيابي ميزان سرعت و کيفيت کدنويسي به شما ارائه مي کند، راهکارها و ريز گزارشات را نيز ارائه مي کند؛ بطوري که بر اساس آن ها، شما مي توانيد نقاط ضعف و قوت کدنويسي هاي انجام شده براي وب سايت تان، از جمله مواردي که در بهينه سازي وب سايت (سئو) نقش دارند و همچنين مواردي که جهت سرعت لود و … مهم هستند را پيگيري نماييد.

 

براي تست موارد گفته شده، مشتريان مي توانند در انتهاي انجام کار و  بر اساس توضيحات و توافقاتي که از پيش به عمل آمده است، به آدرس gtmetrix.com مراجعه نمايند.

 

ارزيابي کيفيت و ارائه راهکار تخصصي قالب هاي وردپرسي

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

 

گزارش گيري از وب سايت با Woorank

دومين سرويس آنلايني که در اينجا معرفي مي نماييم؛ woorank.com هست که البته با جزئياتي به مراتب کمتر، اما با ارائه ي يک گزارش مناسب و با جزئياتي مقبول، توجه شما را به نقاط ضعف و قوت کدنويسي هاي وب سايت شما جلب مي کند.

عدم ملاک صحيح براي ارزيابي امنيت

مسئله اي که مانند هميشه از نظر ارزيابي، نميتوان چندان به مسئله ي ارزيابي توسط سرويس هاي آنلاين توجه کرد، امنيت هست؛ مسلما ارزيابي امنيت وب سايت هاي طراحي شده به دليل ظرافت ها و پيچ و خم هاي بسياري که وجود دارند که اکثرا مي بايستي توسط عوامل انساني خبره و حرفه اي بررسي شوند.

 

 

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

هاست چيست؟

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

 

 

 

 

HOST : فضا و اطلاعات سايت شما بايد بر روي يكي از كامپيوترهاي ميزبان که 24 ساعت متصل به اينترنت است قرار گيرد تا ديگران بتوانند در هر لحظه از شبانه روز به آن دسترسي داشته باشند. در حقيقت ميزبان يا هاست ، تمام يا بخشي كوچك از فضاي يك كامپيوتر هميشه متصل به اينترنت است كه به مرورگرها اين امكان را مي*دهد كه با تايپ دامنه شما در بخش مرورگر خود ، بتوانند به صفحات وب سايت شما دسترسي پيدا كنند و يا برنامه اي خاص را براي ايجاد آن صفحات اجرا كنند.

فضاي هاست داراي يك آدرس اينترنتي منحصر بفرد بنام IP ، يك حوزه منحصــر بفرد و يك نام منحصـر بفــرد كه كامپيوتر شما را در شبكه مي شناساند ، مي باشد . بعبارت ديگر ، ميزباني يك سايت عبارتست از فراهم نمودن محلي مناسب بعنوان پايگاه اصلي براي ارسال و دريافت اطلاعات از طريق اينترنت که در اصطلاح فني به آن Web Hosting گفته مي شوند

 

 

DOMAIN

1 نام دامين يک نام واحد براي يک سايت مي باشد مانند Microsoft.com يا vwdev.com

2. يک نام دامين بايد ثبت شود

3. پس از ثبت نام دامنه هاي مورد نظر، اطلاعات سايت شما اعم از آدرس IP اينترنتي شما در يک DNS Server ثبت مي گردد.

4 .DNS . مخفف Domain Name System مي باشد. يک DNS Server عهده دار اطلاع رساني به کامپيوتر هاي ديگر موجود در اينترنت درباره نام دامين شما و آدرس سايت شما مي باشد.

 

 

ثبت DOMAIN :

1 . براي ثبت نام دامين مورد نظر بايد به شرکتهايي که اين خدمت را ارائه ميدهند مراجعه نماييد. پس از ذکر نام دامين چک مي شود که آيا دامين مورد نظر با پسوند دلخواه شما به صورت آزاد وجود دارد يا اينکه قبلا ثبت شده است. در صورت آزاد بودن نام دامين با پسوند دلخواه، مي توانيد اقدام به اجاره آن نماييد

2. دامينها براي مدت زمان معيين اجاره مي شوند

3. صاحب دامين مي تواند قبل از به سر آمدن زمان اجاره دامين آنرا تمديد نمايد

4. اگر قبل از به سر آمدن زمان اجاره يک نام دامين، اين دامين تمديد نگردد احتمال از دست رفتن دامين وجود دارد 

 

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

 

کدها :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>عنوان صفحه</title>

<style type="text/css">

body {

         font-family:Arial, Helvetica, sans-serif;

         text-align:right;

         direction:rtl;

     }

.container {

           width:100%;

           margin:0 auto;

                   }               

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {

                                                   margin:0px;

                                               padding:0px;

                                                                                           }   

#logo1 {       

           background:url(../images/kelid.gif) no-repeat;

           width:100%;

       height:180px;

           background-position:center

       }       

#tagline {

         padding-top:60px;

                 text-align:center;

         }                       

#tagline h3 {

                font-size: 30px;

                    color: #09F;

                    }                    

ul#menu {

        list-style:none;

                padding-top:50px;

        }              

ul#menu li a {

             font-size:20px;

             color:#090;

             text-decoration:none;

             }                                           

ul#menu li {                             

           float:right;

                   padding-left:0px;

           padding-right:30px;

           width:150px;

                   }           

#sidebar1 {

              width: 20%;

          float:left;

                  direction:rtl;

                  padding-top:30px;

                  padding-bottom:30px;

                  padding-right:2%;

                  padding-left:2%;

          }                                                        

ul#sidebar1_menu {

                 list-style:none;

                 }                         

#content {

         width:52%;

         float:left;

                 padding-top:30px;

                 padding-bottom:30px;

                 padding-right:0px;

         }               

#content h2 {

            font-size: 24px;

            color: #00C;

            padding-top: 25px;

            }                          

#content h3 {

            font-size:24px;

            color:#444444;

            padding:20px;

            }

#content h4 {

            font-size: 18px;

            color: #373737;

            font-weight: normal;

            }

#content p {

               text-align:justify;

           font-size: 18px;

           color: #000;

           padding-top: 20px;

           }                               

#content small {

               font-size: 12px;

               color: #373737;

               }                           

#content a {

           color: #F33;

           font-weight: bold;

           text-decoration: none;

           }                                                                                                                                   

#sidebar2 {

              width: 20%;

          float:left;

                  direction:rtl;

                  padding-top:30px;

                  padding-bottom:30px;

                  padding-left:2%;

                  padding-right:2%;

          }              

ul#sidebar2_menu {

                 list-style:none;

                 }                     

ul#sidebar2_menu li a {

                                  text-decoration:none;

                      }                  

#footer {

            width: 100%;

            text-align:center;

                padding-top:60px;

        }                        

</style>

</head>

<body>

     <div id="main">

          <div class="container">

               <div id="header">

                    <div id="logo1">

                         <div id="tagline">

<h3>شعار تبليغاتي سايت شما در اين محل نمايش داده مي شود</h3>

                         </div>              

                    </div>

                         <div style="clear:both"></div>

<ul id="menu">

<li><a href="#">خانه</a></li>

<li><a href="#">مبحث اول</a></li>

<li><a href="#">مبحث دوم</a></li>

<li><a href="#">مبحث سوم</a></li>

<li><a href="#">تماس با ما</a></li>

</ul>        

                         <div style="clear:both"></div>

               </div><!--end header -->

                <div id="sidebar1">

<h3>عنوان ستون سمت چپ</h3>

<br />

<ul id="sidebar1_menu">

<li>عبارت اول از ستون سمت چپ</li>

<hr />

<li>عبارت دوم از ستون سمت چپ</li>

<hr />

<li>عبارت سوم از ستون سمت چپ</li>

<hr />

</ul>

               </div><!--end sidebar1-->              

               <div id="content">

<h1>عنوان اصلي مبحث</h1>

<h2>زير عنوان :</h2>

<p>

مباحث به زبان فارسي در اين محل نوشته خواهد شد .

</p>

               </div><!--end content-->

               <div id="sidebar2">

<h3>عنوان ستون سمت راست</h3>

<br />

<ul id="sidebar2_menu">

<li><a href="#">اولين لينک از ستون سمت راست</a></li>

<hr />

<li><a href="#">دومين لينک از ستون سمت راست</a></li>

<hr />

<li><a href="#">سومين لينک از ستون سمت راست</a></li>

<hr />

</ul>

               </div><!--end sidebar2-->

                    <div style="clear:both"></div>

          </div><!--end main container-->

     </div><!--end main-->

     <div id="footer">

          <div class="container">

                    <div style="clear:both"></div>

<p>

Copyright © 2012 www.yoursite.com <br />

All Rights Reserved

</p>          

          </div><!--end footer container-->

     </div><!--end footer-->

</body>

</html>

نتيجه :

Result

 

بخش هاي مختلف سايت عبارتند از header که در بالاترين بخش سايت نمايش داده مي شود و درواقع سردر ورودي سايت مي باشد ، sidebar1 که ستون سمت چپ سايت است ، sidebar2 که ستون سمت راست سايت است ، content که مطالب مربوط به هر صفحه در آن نوشته مي شود و بين دو ستون اصلي سايت قرار مي گيرد و footer که در پايين ترين بخش سايت قرار مي گيرد و معمولا حاوي علامت تجاري سايت ، حقوق مادي و معنوي سايت و ... مي باشد .

چگونگي نوشته شدن کدهاي CSS :

 

کدهاي CSS در قسمت head فايل html بايد نوشته شوند ( يعني بين دو تگ <head> و <head/> ) . شروع کدهاي CSS را با تگ <"style type="text/css> و پايان کدهاي CSS را با تگ <style/> اعلام کرده ايم . سپس ابتدا بايد مشخص کنيم که مي خواهيم مشخصه ها را به کدام بخش سايت اعمال کنيم . اگر بخواهيم مشخصه اي را به محتويات يک تگ div اعمال کنيم بايد ابتدا علامت # را نوشته و بعد از اين علامت ، نام id مربوط به آن تگ div را بنويسيم . سپس يک علامت ((})) را نوشته و پس از آن مشخصه هاي مورد نظرمان را مي نويسيم . چنانچه قصد نوشتن چند مشخصه را داشته باشيم بايد آنها را با علامت ((;)) از يکديگر جدا کنيم . پس از نوشتن تمامي مشخصه هاي مورد نظرمان ، علامت (({)) را به کار مي بريم تا اعلام کنيم که مشخصه هاي آن تگ div پايان يافته است . براي ساير تگ ها نيز بايد همين شيوه را اجرا کنيم و کدهاي آنها را پشت سرهم بنويسيم .

 

همان طور که مي بينيد براي تعيين مشخصه هاي تگ هاي div ، ترتيب فراخواني تگ هاي div دقيقا مثل ترتيب نوشته شدن کدهاي آنها در بخش body فايل html مي باشد .

نکته :

 

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

نحوه چيدمان بخش هاي مختلف سايت در کنار هم :

 

نحوه چيدمان بخش هاي مختلف سايت بايد به اين شکل باشد که ابتدا header نمايش داده شود و سپس دو ستون اصلي سايت و بخش content بايد در پايين قسمت header نمايش داده شوند . ما براي کنار هم قرار دادن دو ستون اصلي و بخش content از مشخصه float استفاده کرده ايم که باعث مي شود تگ هاي div شناور شوند و موقعيت خود را بر اساس تگ div کنار خود ، تنظيم کنند . در کدهاي CSS مشاهده مي کنيد که براي هر سه تگ div با id هاي sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به اين صورت که چون ابتدا کدهاي sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعيين کرده ايم تا در سمت چپ صفحه قرار بگيرد ، سپس بخش content را داريم که مشخصه float آن را نيز برابر left تعيين کرده ايم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس براي sidebar2 نيز مشخصه float را برابر left تعيين کرده ايم تا در کنار بخش content که در سمت چپ آن است بچسبد .

نکته :

 

براي آنکه دو ستون اصلي و بخش content به درستي در کنار هم قرار بگيرند بايد مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زير sidebar1 و content قرار بگيرد . براي فهميدن عرض هر بخش ابتدا بايد در کدهاي CSS نگاه کنيد و ببينيد عرض آن بخش چقدر تعريف شده است و علاوه بر اين بايد ببينيد که اين بخش ها داراي مشخصه padding-left يا padding-right هستند يا نه . زيرا بايد ميزان اين مشخصه ها را به عرض تعريف شده اضافه کنيد . به عنوان مثال در کدهاي بالا عرض هاي تعريف شده به صورت درصد مي باشند و زماني که کل درصدها را براي sidebar1 ، content و sidebar2 جمع بزنيد ، برابر 100 درصد خواهد شد .