طراحی وب سایت

تاريخچه وب

وب سايت هاي پوياو (Dynamic) ايستا (Static)

ASP .NET

PHP - PHP: Hypertext Preprocessor

تاريخچه وب

Tim Beers-Lee (تيم برنرز لي)، بنيانگذار شبکه جهاني وب، با راه اندازي يک وب سايت در آگوست سال ????، نام خود را به عنوان نخستين طراح وب در تاريخ به ثبت رساند. او در نخستين  سایت  وب سايت خود از ابرمتن (Hyperlink) و پيوندي براي ايميل استفاده کرده بود.

 

در آغاز، سايتهاي وب با کُدهاي ساده «اچ‌ تي‌ام‌ال» نوشته مي شدند، گونه اي از زبان کُدنويسي که ساختار ساده‌اي به وب سايت ها مي داد.

با پيشرفت وب و هنر طراحي آن، زبان کُد نويسي اش، اَبَرمتن يا اچ‌تي‌ام‌ال، پيچيده تر و پرانعطاف تر شد. ابزاري مانند جدول ها که بيشتر براي نمايش نمودارهاي داده اي بودند، بزودي مورد استفاده نادرست، براي چيدمان هاي پنهان در صفحه هاي وب قرار گرفتند. با پيدايش صفحه هاي الگوي وب يا «CSS»، روش نادرست طراحي با جدول هاي پنهان در صفحه، از گردونه خارج، و بجاي آن استفاده مناسب از صفحه هاي الگوي وب يا «CSS»، جايگزين شد.

 

فن آوري هاي يکپارچه سازي داده‌گاه ها (Database)، مانند زبان‌هاي کُدنويسي سمت سرور (Server-Side Scripting) مانند CGI, PHP, ASP.NET, ASP, JSP و ColdFusion، و استانداردهاي طراحي مدرن با الگوها (CSS)، ساختار سايت هاي وب را باز هم تغيير داده و آنرا پيشرفته تر کرده اند.

 

 

Tim Beers-Lee

Tim Beers-Lee

Tim Beers-Lee on November 18,2005

 

تولدTimothy Beers-Lee

8 June 1955 (1955-06-08)

(age 53) London, UK

 

وب سايتمشاهده در پنجره جديد Tim Beers-Lee

 

مشاهده در پنجره جديد مطالعه بيشتر ...

 

همچنين با آمدن نگاره هاي جاندار و فن آوري هاي پويانمايي به صفحه ها، مانند فِلَش (Flash)، چهره وب بيشتر از پيش تغيير کرد و توانمندي هاي تازه به سازندگان رسانه و طراح هاي وب داده شد، و توانايي هاي بيشتر و کارايي ها تازه مرورگرها براي html.

 

طراحي وب سايت 

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

در زمينه طراحي وب سايت جنبه هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده مي شود. 

مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند.

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

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

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

همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در موتورهاي جستجوي اصلي چنين شود.

يک وب سايت معمولا شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (index) ناميده مي شود. بعضي از وب سايت هـــا از صفحه اي استفـــاده ميکنند کـــه معمولا صفحه خوش آمد ناميده مي شود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.

 

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

هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبان FTP انجام ميشود. هنگامي که سايت منتشر شد، مدير سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده مي کند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت هاي ديگر، ايجاد پيوند با وب سايتهاي مشابه و غيره امکان پذير است.

نمونه طراحي استاتيک : http:\\rohanit.com

 

طرح وب سايت

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

 

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

 

Adobe Flash

Adobe Flash (سابقا Macromedia Flash) يک برنــامه ايجاد انيميشن و يــا برنامه کاربردي گرافيکي قوي است که براي سـاخت و اجرا کردن محتواي پويـــا، مطالب چند رسانه اي مــانند صدا و تصويــر و برنامه هــاي کاربردي محاوره اي بر روي وب و از طريق مرورگر (Browser) مورد استفاده قرار مي گيرد. 

 که در اين صورت انيميشن صفحه قبـل بــايد از ابتدا شروع شود، تــا جائيکه محدوديتهــاي موجود ممکن است بــا توجه به اهداف طراحي وب سـايت، بي ربط بنظر برسند.

براساس آمـار 98 درصد از کاربــران وب در آمريکا برنــامه اجراي فلش را بـرروي رايــانه هاي خود نصب کرده اند و حدود 45 تا 56 درصد از آنها آخرين نسخه اين برنامه را دارند که البته نوساناتي نيز در اين آمار وجود دارد.

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

 

برخي از طراحــــان برنــامه هــاي کاربردي به اين دليل از فلش استفــاده مي کنند که به آنهــــا اجازه ســـاخت برنــامه هائي را مي دهد که نيــازي به دوباره خواني و يـــا رفتن به صفحه جديد به ازاي هر فعل و انفعـــالي را ندارد. فلش توانائي استفاده از فونت هايي که برروي اغلب رايانه ها نصب نشده اند را دارد.

سايتهــاي بسياري وجود دارد که تمامــا در قالب فلش هستند. سايتهــاي ديگري نيز از فلش به جاي فايلهــاي تصويــري jpeg و يا gif استفـاده مي کنند، البته با قابليت حجم کمتر فايلهــاي برداري و سرعت بيشتر دريــافت فايلها.

همينطور از فلش مي توان براي جلوگيري از تکثير و يا جستجوي غير مجاز استفاده کرد.

 

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

 

زبــان اسکريپت نويسي فلش، Action Script ناميده مي شود و بـــه زبــان JaveScript شباهت دارد کــه البتـه ويژگي هاي مفيدي را با يکديگر ادغام نموده است. مثلا در خصوص اندازه قلم، پاسخ به رويدادهاي زمـان اجرا، امکاناتي براي افراد نابينا و بسياري ويژگيهاي ديگر.

ActionScript يک زبان شي گرا بوده که امکان استفاده از CSS ،XML و طراحي برنامه هاي کاربردي وب بر پـايه کلاس هاي ساخت يافته را در فلش به ما مي دهد.

 

وب سايت هاي پوياو ايستا

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

وب سايتهاي دايناميک به وب سايتهايي گفته مي شود که در طراحي آن از زبانهاي برنامه نويسي استفاده شده است و در صورت نياز به تغيير در سايت ( ايجاد صفحه جديد ، ويرايش متون ، ايجاد پيوند و ... ) اينکار به سادگي و توسط نرم افزار نوشته شده مخصوص آن انجام مي پذيرد .

در وب سايتهاي دايناميک صفحه به پايگاه داده وصل بوده و با توجه به درخواست کاربر ( جستجو ، پيوند به صفحه و ... ) محتويات صفحات تغيير مي يابند .

روش قديمي مورد استفاده در طراحي صفحات وب (HTML)، بصورت ايستا (Static) است که بـراي تبديل آن به مطالب پويا دو روش وجود دارد:

 

روش سمت سرويس دهنده (Server-side)

روش سمت سرويس گيرنده (Client-side)

در روش Server-side يک سرور وب که نرم افـــزار خاصي را اجرا ميکند، يک صفحه HTML مطابق بـا درخواست کاربر و متناسب با ديگر متغيرها ايجاد مي کند.

 

 

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

 

 اغلب نرم افزارهــاي طراحي شده بــراي کمک به افــراد معلول و بيشتر موتورهاي جستجو از DHTML سمت سرويس گيرنده پشتيباني نمي کنند.

 

در صورتي که فهرست (Menu) يک وب سايت بوسيله JavaScript ساخته شده باشد، بطور معمول موتورهاي جستجو قادر به تشخيص صفحـاتي که در فهرست، پيوند داده شده اند نيستند مگر اين که تمهيداتي در جهت قراردادن راهنماهاي جايگزين در ديگر جاهاي صفحه در نظر گرفته شده باشد.

 

ASP .NET

تکنولوزي توليد و نوسعه صفحات دايناميک مي باشد که به سه زبان #VB, C# , J نوشته مي شود.

ASP .NET بخشي از NET Platform. شرکت مايکروسافت و جانشين تکنولوژي قديمي تر از آن بــه نــــام ASP است. ASP .NET بر پــايــه "زبـــان مشترک زمــان اجـــرا" ساخته شده است، به اين معني که برنــامه نويســان مي توانند کــدهاي ASP .NET را بــا استفــاده از هر زبــان برنامه نويسي NET. مايکرو سافت بنويسند.

 

پايگاه داده (Database)

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

 

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

Microsoft SQL Server يکي از انواع پايگاه داده مي باشد که از سيستم مديريت پايگاه داده رابطه اي استفاده مي کند و توليد شده توسط مايکروسافت است.

 

HP - PHP: Hypertext Preprocessor 

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

 بطوري کــه کدهــايPHP بــه عنوان داده هاي ورودي گرفتــه شده و صفحــات وب بـه عنوان خروجي ايجــاد مي شوند، بعلاوه از PHP ميتـوان براي اسکريپت نويسي(Command-line) 

همچنين گروه PHP، کد منبع کامـل خود را براي ساخت، تغيير و توسعه PHP جهت استفــاده شخصي کاربـران، در اختيار آنها قرار داده است.

 

 

فرض کنيد به سال ???? رفته باشيم، طراحی  چه مهارت شغلي ضروري خواهد بود؟ کد نويسي!اگرچه ممکن است در دهه بعدي خبري از HTML يا CSS نباشد اما موضوع اين است که کدنويسي در آينده فوق العاده مهم خواهد بود و فرقي نمي کند در چه قسمتي بخواهيد از آن بهره ببريد.

 

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

 

چرا بايد کد نويسي را ياد بگيريد و از کجا بايد شروع کنيد؟

 

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

 

C.J. Windisch به عنوان يکي از اعضاي اصلي تيم طراحي برنامه مکان يابي  GonnaBe مي گويد : ارزش کدنويسي در اين است که ياد بگيريد چگونه با استفاده از داده ها تصميم گيري کنيد. از تحليل هاي آماري بازي بيسبال گرفته تا تيم انتخاباتي باراک اوباما شما بايد از کدنويسي براي انجام محاسبات استفاده کنيد.

 

وينديش توصيه مي کند تا از وب سايت هايي نظير Treehouse که آموزش هاي ويديويي در سطح ابتدايي را ارائه مي کنند استفاده کنيد.

 

مايک موراي يکي ديگر از اعضاي تيم برنامه نويسي GonnaBe مي گويد : چيره شدن بر کدنويسي به برنامه نويس اين امکان را مي دهد تا تکنولوژي اي که از آن استفاده مي کنند را به دلخواه خود تغيير دهند و بدين ترتيب ارزش بيشتري نزد کارفرمايان پيدا کنند.

 

کدنويسي مربوط به داده هاي بزرگ است و مسلط شدن بر اين داده ها مي تواند شروع يک پروژه را از شکست به موفقيت تغيير دهد.

 

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

 

Meouchy يکي از اعضاي تيم نظرسنجي يک کمپاني فعال در حوزه تحقيق بازار گوشي هاي هوشمند، مي گويد : تازه کارها بايد يادگيري ديتابيس ها و SQL syntax هاي ابتدايي را جزو برنامه هاي خود قرار بدهند. وي توصيه مي کند در هنگام حل مسائل واقعي سعي کنيد  طراحی   از پيچيدگي ها فرار کنيد و از همان مباحث پايه در کار خود استفاده کنيد بدين ترتيب هر چقدر که تکنولوژي در اين زمينه پيشرفت کند شما حداقل تا يک دهه نيازي به يادگيري مجدد يک زبان نخواهيد داشت.

 

 

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

 

 

در يک سند HTML برخي قسمت هاي صفحه مخصوص پرينت گرفتن مي باشند و بايد از style مرببراي هدف قرار دادن رسانه هاي مختلف بايد از صفت media در تگ <link> يا در تگ style استفاده کرد يا درون قواعد نوشته شده ي css ميتوان از قاعده ي @media براي نشان کردن رسانه هاي مختلف استفاده 

<link rel="stylesheet" type="text/css" media="print" href="myprint.css" />

 

<style type="text/css" media="print">....</style>

 

...

8

@media print {

9

 

10

}

11

</style>

انواع media

 

 

انواع مختلف media عبارت اند از

all : مخصوص تمامي deviceها

braille : استفاده براي deviceهاي مخصوص نابينايان

embossed : استفاده براي printer هاي مخصوص خط braille

handheld : استفاده براي device هاي جيبي و قابل حمل مثل tabletها

print : اين مقدار براي ارائه ي style به printer استفاده ميشود. (در مروگرها مي توان از قسمت print preview براي مشاهده ي يک صفحه در اين حالت استفاده کرد.)

projection : استفاده براي ويدئو پروژکتورها

screen : مخصوص نمايش در صفحه نمايش کامپيوتر

tv : استفاده براي تلويزيون

مقدار پيشفرض : all

فقط مقادير screen , print و all در مرورگرها به صورت گسترده پشتيباني مي شوند.

 

 

 

 

1

<h1> 7Lea : </h1>

2

<h3>Javascript and web design tutorials</h3>

3

<p>

4

Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus.consectetur adipiscing Vivamus sit amet. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus oare ante, ac egestas est ua sit amet arcu.

5

</p>

و کد css :

 

1

* {

2

  margin: 0;

3

  padding: 0;

4

  font-family: serif;

5

  }

6

  h3 {margin-left: 20px;}

7

  p {

8

  margin: 10px 30px;

9

  width: 500px;

10

  text-align: justify;

11

  }

حال کد رو در مرورگر اجرا کنيد، و سپس دکمه ي CTRL+P رو بزنيد تا به حالت print preview برويد، خواهيد ديد که دقيقا متون در حالت print همانند حالت screen هست.

 

حال ما ميخواهيم براي حالت print يک استايل متفاوت بنويسم

کد زير رو به کدهاي css اضافه کنيد :

 

 

@media print {

2

  * {

 

    font: 14px tahoma;

4

    letter-spacing: 2px;

5

  }

6

}

نتيجه print-preview

 

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

مثال کد html

 

 

<h1><a href="http://www.7lea.com">7Lea : </a></h1>

2

<h3>Javascript and web design tutorials</h3>

کد css :

 

1a:after {

 

    content: "(" attr(href) ")";

کد بالا تعيين مي کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لينک را قرار دهد

Creative Web Design

 

We handle just a small business owner, freelancer, arwe’ll get you online with a great looking creative web design that works. From large not-for-profits to micro-businesseand every one of our clients. Check out our latest web designs to see for yourself.

We love designing easy to use, profemore, we make sure they’re easy tmanage the site easily in house without ana complete web design agency; we handle everythi, inteet marketing, branding, search engine optimisation (SEO), e-commerce solutions, copywriting and of course any graphic design work you can dream of.

 

If you have an average website, your busineswebsite at all.

 

And we don’t do average…

 

More than most industries, web developers tend to use a bewildering amount of buzz words and catch phrases, leaving popocket. That’s where we come in….

 

At Explainafide, we give you straightforward advice to decode the Mumbo-Jumbo 

 

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

 

قالب و پوسته هاي وردپرس و استفاده از slogan

 

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

 

 

 

هاست و دامنه چيست؟

 

 

اگر شما يک کاربر ابتدايي هستيد بهتر است بدانيد هاست چيست و چه فرقي با دامنه دارد. در اين مقاله نکاتي درباره هاست و دامنه ذکر خواهم کرد.

 

دامنه چيست؟ به آدرس هاي سايت دامنه مي گويند. مانند www.google.com که دامنه آن google.com است. شايد اجزاي هر URL را بدانيد ولي دامنه يکي از مهم ترين قسمت هاي سايت و URL است. براي مثال دامنه زير را ببينيد:

 

https://www.bsi.ir

 

پسوند IR ، پسوند اين دامنه است ولي دقت کنيد:

 

https://www.bsi.ir/default.aspx

 

aspx پسوند فايل default و IR پسوند دامنه ماست. خب حالا فرق .com و .net و .ir و … در چيست؟ هر يک از پسوند هاي دامنه معناي خاصي دارد. مثلا پسوند .ac.com يا ac.ir را براي دانشگاه ها و موسسات آموزش مي گذارند. هر دامنه بسته به نوع خود در سازمان مربوطه و هر سازمان اجازه اجاره آن را از سازمان خاصي مي گيرد. براي مثال براي ثبت دامنه phpassistant.ir ، ما بايد به سازمان نيک مراجعه کنيم تا آن را براي ما ثبت کنند. دامنه هايي با پسوند عمومي مثل net يا com در سازماني به نام Domain Name Register Center ثبت مي شود. اگر شما بخواهيد دامنه اي ثبت کنيد مشخصات شما را مي خواهند. خواستن مشخصات به اين دليل است که مشخصات شما در پايگاه Whois ثبت شود و از دزديده شدن دامنه شما جلوگيري شود. Whois چيست؟ کجاست؟ Whois يک پايگاه وابسته به سازمان ثبت دامنه است که با جستجوي هر دامنه DNS ، نام مشخصات مالک و نام ثبت کننده نمايش داده مي شود که آن را در سايت هاي اجاره دامنه حتما ديده ايد.

 

DNS دامنه چيست؟ مانند آجرهاي يک خانه است. آدرس DNS ها ممکن است به صورت زير باشد:

 

ns1.server.com

ns2.server.com

 

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

 

DNS براي اين که هاست شما به دامنه شما مربوط شود ، تنظيم مي شود. سرور هاي ns1 ممکن است قطع باشند به همين دليل بايد ns2 کار کند. اگر به هر دليلي Data Center هاست شما از بين برود ، DNS هاي شما نيز از بين مي روند تا دامنه بدون هاست شما دزديده نشود.

 

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

 

 

Elgg version: 1.6

 

I think a better way to handle left and right sidebar with the core css is to define a sidebar class that contains things like border, width, background, etc. Then define ids for left and right sidebar that contain anything unique to being on the left or right like float or margin.

1 participant  

 

 elgg-gitbot commented 4 months ago

brettp wrote on 40088297-07-16

 

Discussion: http://community.elgg.org/mod/groups/topicposts.php?topic=397103&group_guid=212846

 

 elgg-gitbot commented 4 months ago

Milestone changed to Elgg 1.8 by brettp on 40088297-07-16

 

 elgg-gitbot commented 4 months ago

ewinslow wrote on 40900611-03-13

 

Here's what I had in mind:

 

.elgg_page (optionally + .elgg_admin_page)

    .elgg_header

        .elgg_header_contents

    .elgg_body

        [.elgg_right_sidebar] (optional)

        [.elgg_left_sidebar] (optional)

        .elgg_body_contents (fluid, takes up remaining space not used by sidebars)

    .elgg_footer

        .elgg_footer_contents

Notes:

 

They're all classes, not id's

It's possible to have 2 left sidebars

The naming convention is more consistent. i.e., /elgg_(header|body|footer)(_contents)?/

Inspired by https://github.com/stubboella/oocss/wiki/Template.

 

Thoughts?

 

 elgg-gitbot commented 4 months ago

ewinslow wrote on 40923022-04-29

 

http://trac.elgg.org/changeset/7507/elgg/trunk/views/default/layouts/one_column_with_sidebar.php

 

The way I envisioned .elgg-body is that it's fluid width, so no need for width specifier. It just takes up whatever space the asides don't use. This allows us to change the layout with and the aside widths independently of each other, rather than having to keep everything in sync.

 

 elgg-gitbot commented 4 months ago

ewinslow wrote on 40923181-10-25

 

The * hacks are for IE. The xxxxx stuff is clearfix. Who knows why there are so many x's... and we already have our own clearfix implementation.

 

{display:table-cell; width:auto} seems fair to try out, no?

 

 elgg-gitbot commented 4 months ago

cash wrote on 40923164-08-21

 

Are you suggesting we use this hack?

 

.main{display:table-cell;*display:block;width:auto;}

.body,.main{*zoom:1;}

.bod

 

 elgg-gitbot commented 4 months ago

cash wrote on 40924565-08-06

 

The xxxx stuff is what makes it fill the space. {display:table-cell; width:auto} does not do that.

 

If we want a fixed width sidebar and a space filling main column, the options that I know of are:

specify width on main column

negative margins

the xxx hack

switch to a table layout (either with actual table or using table-related display values). see below

 

.layout {

width: 1000px;

margin: 0 auto;

display: table;

}

.aside {

width: 200px;

display: table-cell;

}

.body {

display: table-cell;

}

 

sidebar

main

Using a table layout means you cannot float the columns to achieve right/left sidebar changes. It also doesn't work with IE6 or IE7 so we would need to implement negative margins.

 

Specifying the width or using the xxxx hack look like the best options.

 

 elgg-gitbot commented 4 months ago

ewinslow wrote on 40924733-03-14

 

There is method in the madness! Cool. The other techniques I can think of are overflow: hidden or inline-block. Haven't tested those though.

 

 elgg-gitbot commented 4 months ago

cash wrote on 40925192-09-19

 

Another option is absolute positioning the sidebar. Neither overflow: hidden nor inline-block should work (or maybe I don't know where you're going with those).

 

The key is getting the body div to either fill the available space up to the sidebar or fill the entire parent div with a margin for sidebar. All the margin/absolute positioning techniques require CSS markup of the body div based on the size of the sidebar. I'd rather not deal with that and just use a width on the body div.

 

At this point, the two contenders seem to be main column width or using the xxxx hack. The xxxx hack has the advantage of being able to reuse it in any body|aside module.

 

 elgg-gitbot commented 4 months ago

ewinslow wrote on 40925448-03-11

 

overflow:hidden is magical: http://www.stubboella.org/content/2009/07/23/overflow-a-secret-benefit/.

 

Sounds like display:table-cell is best, though, because there's no chance of having content clipped. Why don't we go with that?

 

 elgg-gitbot commented 4 months ago

cash wrote on 40925566-09-16

 

Very cool - I didn't know that about overflow. I agree it is not a good solution due to clipping.

 

By display:table-cell, do you mean the xxxx trick or a table based layout using display:table* elements?

 

 elgg-gitbot commented 4 months ago

ewinslow wrote on 40925574-12-13

 

xxxx means we can use floats, but display:table* gives equal-height columns. I'm not too picky either way. I hate to cite cross-browser issues, but I'm betting xxxx will do better with these. I'm not sure what fallback we could use for older browsers if we went with display:table* since it requires a certain order in the source code.

 

 elgg-gitbot commented 4 months ago

cash wrote on 40927269-09-10

 

I'll deal with creating an expanding .elgg-body first and then deal with the equal column heights.

 

 elgg-gitbot commented 4 months ago

cash wrote on 40927276-08-18

 

(In [svn:7528]) refs #1402 first cut of the new sidebar layout code (plus some other stuff - very non-atomic commit). blog plugin uses the one sidebar layout and bookmarks uses the two sidebar layout (for testing purposes)

 

 elgg-gitbot commented 4 months ago

cash wrote on 41101115-02-05

 

sidebar layouts work - still working on spacing filling body options

 

دانلود قالب فارسي براي طراحي سي اس اس css

 

فايلي را که دانلود کرده ايد يک فايل zip. است که بعد از extract شدن (خارج شدن از حالت zip ) فولدري را در اختيارتان قرار ميدهد که حاوي سه فايل ميباشد:

 

2-column.htm

 

reset.css

 

 

فايل اول با پسوند htm. همان صفحه اصلي است که در وب به نمايش در مي آيد. فايل دوم فايل reset.css است لطفا براي دريافت اطلاعات در اين مورد به اين اينجا مراجعه کنيد. فايل سوم فايل style.css است که به صفحه htm. دستور ميدهد که چگونه محتوياتش را نمايش دهد.

 

صفحه htm. و styles.css را که دانلود کرده ايد در يک ويرايشگر صفحه  طراحی وب سایت  مانند frontpage باز کنيد. در حال حاضر صفحه اي مانند تصوير زير را در اختيار داريد که براي سهولت در ارائه توضيحات، ستونها را با خطوط (border) کاملا واضح مشخص کرده ام.

 

  طراحی وب سایت 

 

اکنون به فايل styles.css نگاهي مي اندازيم. براي اين که به اهميت اين فايل بيشتر پي ببريد ابتدا فايل htm. را در مروگر مشاهده کنيد سپس فايل styles.css را از درون فولدر، delete کرده و مجددا فايل htm. را مشاهده کنيد (اگر صفحه شما در مرورگر باز است آن را refresh کنيد تا تغيرات را ببينيد). براي اطلاعات بيشتر در مورد محتويات styles.css اجزاي آن را بررسي ميکنيم:

 

شما در اين فايل نوشته هايي را مشاهده ميکنيد که هر کدام مربوط به يک ستون مي باشد در ابتدا بايد بدانيد که اسامي ستونها در فايل styles.css با علامت # مشخص ميشوند. مثلا: wrapper# در فايل styles.css که در اختيار داريد چگونگي نمايش ستون wrapper را در صفحه htm. مشخص ميکند. کدهاي HTML صفحه htm. را در ويرايشگر خود مرور کنيد و نام wrapper را بيابيد. اين ستون   طراحی وب سایت ، ظرف يا قالب اصلي کار شماست که در صفحه htm. آن را براي شما با border قرمز مشخص کرده ام و بقيه ستونها مانند قطعات پازل در آن جاي ميگيرند.

 

#wrapper {

margin: auto;

direction: rtl;

width: 922px;

border: 1px solid #FF0000;

}

 

نوشته هايي که در ميان دو علامت { } قرار دارند و زير نام يک ستون قرار ميگيرند دستوارتي هستند که نحوه نمايش آن ستون را اعمال ميکنند. همان طور که در دستور بالا که قسمتي از فايل styles.css شماست و متعلق به ستون wrapper ميباشد مشاهده ميکنيد به اين ستون دستور داده شده تا به حالت اتوماتيک (خودکار) در صفحه جاي بگيرد ( ;margin: auto )،

 

نوشته هاي درون آن از حالت نوشتاري راست به چپ پيروي کنند که براي نوشتار و تايپ فارسي مناسب است ( ;direction: rtl ) منظور از مقدار rtl که در مقابل کلمه direction نوشته شده همان right to left يا چپ به راست است،

 

عرض آن 922 پيکسل باشد ( ;width: 922px ) و

 

اطراف آن را يک خط ممتد با ضخامت 1 پيکسل و رنگ قرمز احاطه کند ( ;border: 1px solid #FF0000 ).

 

اکنون دستورات ستون ديگري را مرور ميکنيم تا کدهاي جديدتري را پيدا کنيم. در فايل styles.css به دنبال ستون leftcolumn بگرديد دستورات اين ستون را در قسمت پايين مشاهده ميکنيد:

 

#leftcolumn {

border: 1px solid #000000;

background:#FFFFFF;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

width: 204px;

float: right;

}

 

کدهاي جديدي که در اين قسمت مشاهده ميکنيد عبارت است از: background و padding و height و float .

 

اين کدها به ستون leftcolumn  دستور ميدهند که:

 

رنگ پس زمينه اش سفيد باشد ( ;background:#FFFFFF )،

 

فاصله محتويات درونش مانند تصاوير عکسها و ... از اطراف 10 پيکسل باشد ( ;padding: 10px )،

 

ارتفاع آن 350 پيکسل باشد ( ;height: 350px ) و

 

جايگاه قرار گرفتنش در صفحه سمت راست باشد ( ;float: right ).

 

شما ميتوانيد با تغيير اندازه width (عرض) ستون wrapper و ستونهاي داخل آن شکل قالب را کاملا تغيير دهيد. قصد دارم چند طرح را مشخص کنم تا افرادي که اين سري آموزشي را دنبال ميکنند براي تمرين از آن  طراحی وب سایت  به عنوان الگو استفاده کنند.

 

براي تمرين، اندازه عرض ستونها را تغيير دهيد درست کردن قالبهايي به شکل زير را تمرين کنيد تغييرات در کدهاي اصلي را در قسمت بعد آموزش ميدهم.