طراحی وب سایت

 

تاريخچه وب

طراحي وب سايت

طرح وب سايت

Adobe Flash

وب سايت هاي پوياو (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) مورد استفاده قرار مي گيرد. 

 

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

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

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

 

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

 

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

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

 

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

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

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

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

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

 

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

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

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

 

:: زبانهاي اسکريبت نويسي متداول عبارتند از:

 

PHP-Perl-JSP-ColdFusion-ASP-ASP .NET-Ruby-Python

مانند دايرکتوري معروف ايراني www.yaoo.ir که آينده روشني در انتظار اين سايت ميباشد.هزاران ايراني روزانه از اين دايرکتوري بازديد کرده و به اهدافشان ميرسند.

 

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

 

DHTML سمت سرويس گيرنده نيز در جهت افزايش تحرک و فعل و انفعالات در صفحات وب بوجود آمده است که البتـه در کنــار امکــانــاتي کـه عرضه نموده ميتواند بــــاعث بروز مشکلاتي پيرامون دسترسي به صفحــات و يــا بهينه ســـازي موتورهاي جستجو گردد. اغلب نرم افزارهــاي طراحي شده بــراي کمک به افــراد معلول و بيشتر موتورهاي جستجو از 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 بر روي يک سرويس دهنده وب اجــرا مي شود بطوري کــه کدهــايPHP بــه عنوان داده هاي ورودي گرفتــه شده و صفحــات وب بـه عنوان خروجي ايجــاد مي شوند، بعلاوه از PHP ميتـوان براي اسکريپت نويسي(Command-line) و نيـــز ايجــاد رابــط گرافيکي کاربـــر سمت سرويس گيرنده استفــاده  طراحی  کــرد. PHP مي تواند بر روي اکثــر سرورهــاي وب و تقريبــا هر سيستم عاملي به راحتي قرار گيرد.

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

 

آيا اينترنت همان وب است؟

اکثر کاربران فکر مي کنند که وب همان اينترنت است اما اينترنت در سال ???? وقتي که آرپانت که همان پدر اينترنت ناميده مي شود شروع به استفاده از پروتکل TCP/IP کرد شکل گرفت. وب توسط تيم برنرز لي انگليسي در سال ???? ساخته شده. شبکه جهاني وب از سرورها که صفحات را دربر دارند و مرورگرهاي بسياري همانند فايرفاکس ، اينترنت اکسپلورر ، سافاري و… ساخته شده است. درواقع اينترنت مجموعه اي از فناوري ست که موجوديت وب را رقم زده است. اگر اينترنت نبود وب هم نبود و اگر وب نبود اينترنت همچنان در اثر هجر باقي مي ماند. بايد به اين نکته توجه داشت که بسياري از برنامه هاي تحت شبکه بدون نياز به وب کار مي کنند مانند ايميل، FTP ، IRC يا چت مبتني بر اينترنت ، نرم افزارهاي پيام رسان ، تل نت، تورنت... طراحی وب سایت 

اينترنت يک دا?ن تو در تو است از تلفن‏ها، خطوط کابلى، ماهواره‏ها، سيم‏هاى شبکه و کامپيوترهاى به هم پيوسته که در سرتاسر جهان پراکنده شده‏اند. توصيه مي کنم مقاله اينترنت چيست را در همين سايت ايران کالا مطالعه کنيد. وب به نامى گفته مي شود که به هر چيز در اينترنت تعلق گرفته است. ما ميتوانيم با استفاده از Uniform Resource Locator يا URL به آن چيز دسترسى داشته باشيم. اين روش آدرس‏دهى (مثل http://www.irankala.org) در دهه 60 اينترنت را تبديل به شاهراه اطلاعاتى کرد. به خصوص اينكه باعث حذف اعلان‏ها و فرمان‏هايى شد که سابقاً کاربران مجبور بودند تا براى رسيدن به اطلاعات تايپ کنند. بخش اعظمى از محتوياتى که شما از طريق URL به دست مي آوريد، فايلهايى هستند که با يک کد خاص موسوم به HyperText Makup Language يا به اختصار HTML نوشته شده‏اند. ما فايلهاى HTML را به عنوان صفحات وب ميشناسيم.

حالتـهاى زيادى پيش مـي آيد که به جـاى وب از اينترنت استفاده مي کنيم : مثل وقتى که يک e-mail ميفرستيم؛ يک MP3 را به وسيله يک برنامه انتقال مستقيم (peer-to-peer) دريافت مي کنيم؛ يا يک پيام فورى را توسط برنامه‏اى مانند ICQ ارسال مي کنيم. و نيز برخى از آدرسهاى وب که با ".www" شروع نميشوند.

به خاطر هوشمندى كه در مرورگرها و اغلب وب سرورها قرار داده شده است، معمو?ً نيازى به وارد کردن ".www" قبل از يک آدرس وب وجود ندارد. وقتى يک URL را وارد ميکنيد، مرورگر يک درخواست به يک سرور براى پيداکردن سايت ميفرستد. سرور اغلب سايت را حتى بدون پيشوند (به عنوان مثال irankala.org ) تشخيص مي دهد. اما اگر نتوانست، خود مرورگر پيشوند را اضافه مي کند و دوباره آن را ارائه مي کند؛ يا به اميد پيدا کردن يک مورد منطبق، آن را از سرورهاى بزرگتر و بزرگتر طلب (ping) مي کند. حتى اگر شما www را وارد نکرده باشيد هنگام برقرارى ارتباط در مرورگر شما نمايش داده مي شود. اما بايد کمى هم مراقب باشيد، به هر حال بعضى از سرورها کمى غير عادى هستند و توانايي تصحيح URL ها را ندارند؛ بنابراين اگر www را ننوشته باشيد ممکن است سايتتان را پيدا نکنيد.

يان ياکوبس از کنسرسيوم وب جهان گستر واقع در MIT مى گويد « در جهان ايده آل، URL ها نه ديده مي شوند و نه شنيده ». در حال حاضر کاربران، سايتها را به وسيله موتورهاى جستجويى چون Google پيدا مي کنند و براى رسيدن به هر چيزى روى لينک‏ها کليک مي کنند. کنسرسيوم در جستجوى راهبردهاى جهانى براى تغيير معمارى وب است تا گردش در آن را آسان تر کند؛ به خصوص براى افرادى که دچار نوعى معلوليت جسمى نيز هستند .

 

 

flowchart

WordPress is a great product. It's easy-to-use, quite powerful, and flexible. Before you invest your valuable time and energy into installing WordPress, there are some documents you need to read to help you get started.

 

About Weblogs - What is Blogging all about?

What is WordPress?

WordPress Features

Before You Install WordPress

Step Two - Make a Plan

Based upon the information you've just read, including instructions on installing WordPress, you should have a list of the things you need and things to do. If not, make that list now. You'll want to make sure it includes the following information:

 

Website Host Requirements Checked and Verified

Versions of PHP and MySQL Checked and Verified

Web Host Compatibility with New Versions of WordPress

Your Website Useame and Password

Text Editor Software

An FTP Client Software

Your Web Browser of Choice

The following documents will help you understand more about how WordPress works and how to make a plan for your WordPress site:

 

WordPress Semantics

First Steps With WordPress

WordPress Lessons

It is important to make a plan about how you want to use WordPress on your site. Here are some questions to ask yourself.

 

Will you install WordPress in the root directory, subdirectory, or you just want to make a test site to make sure you want to use it?

Have you made a list of your site categories to organize your content by groups?

Have you made a list of Pages you may want to add to your site, such as About, Contact, or Events?

Have you thought about what you want in the header art of the site?

Have you developed a content strategy and list of topics to help start blogging?

Have you thought about how to integrate social media into your WordPress site and workflow?

Step Three - Install WordPress

 

Hosting WordPress

Editing the wp-config.php file

Frequently Asked Questions About Installing WordPress

Using FTP Clients and Software

Changing File Permissions

Upgrading WordPress

Common Installation Problems

Trouble: I Can't Login

Step Four - Set Up WordPress

With your installation complete, it's time to set up WordPress so it will work the way you want it to work.

 

To help you understand how all the various features and screens on the WordPress Administration Panels work, check out the Administration Screens guide for a detailed walkthrough.

 

For help on creating your user profile information, of which some or all may appear on your WordPress Theme, see the Users > Your Profile pages for guidance.

 

To set the site name and other information, go to Administration > Settings > General.

 

After you've published a few posts, you can experiment with the full edit or quick edit features in the Administration > Posts > Posts panel.

 

Add your "About," "Contact," and other information Pages by going to Administration > Pages > Add New.

 

Want to change the look and feel of your WordPress site? Go to Administration > Appearance > Themes.

 

Take time to explore the WordPress Codex site, the official documentation site for WordPress. You'll find helpful information by reading WordPress Lessons, and these helpful documents:

 

Lea WordPress for WordPress.com and beginning self-hosted WordPress tutorials and guides.

Moderating Comments

Introduction to Dealing with Comment Spam

WordPress in Languages Other than English

Appearance and Themes

 

Changing the look of your WordPress website is easy with just a few cl

 

Lessons: Designing Your WordPress Site

CSS Overview, Tips, Techniques, and Resources

WordPress Widgets

Custom Navigation Menus

Stepping into WordPress Template files

Lessons: Template Files

Stepping Into Template Tags

Lessons: Working With Template Tags

WordPress Template Tags

Understanding the WordPress Loop

The WordPress Loop in Action

Editing Files in WordPress

Frequently Requested Design Help

Frequently Asked Questions about Site Layout and Design

If you want to create a new WordPress Theme from scratch, or do major renovations, or even design WordPress Themes for public release, you will need to be familiar with HTML, XHMTL, and CSS. The following documents will get you started:

 

Developing Your Own WordPress Theme

Validating a Website

Lessons: Website Development

CSS Fixing Browser Bugs

CSS Troubleshooting

If you want a custom-made WordPress Theme created especially for you by expert web-designers, it is recommended you search for qualified web designers on the Inteet, or look in your local community.

 

Adding WordPress Plugins

 

There are many "add-on" scripts and programs for WordPress called Plugins that add more capabilities, choices, and options to your WordPress site. WordPress Plugins do many things, including customizing the results of your site information, adding weather reports, adding spell check capability, and presenting custom lists of posts and acronyms. For more on how to work with Plugins and where to find WordPress Plugins for your site:

 

Managing your WordPress Plugins

WordPress Plugins

The WordPress Plugin Directory

Advanced Use of WordPress

Now that you are familiar with the basic features and functions of how WordPress works, it might be time for you to plunge deeper into the power of WordPress. The links below will expand your familiarity with PHP, HTML, XHTML, and CSS:

 

FAQ

Giving Back to WordPress

Now that you're a full fledged WordPress user, consider contributing to the WordPress Codex, Support Forum, Development, and other volunteer efforts that keep WordPress going. WordPress is free and totally supported by volunteers, and your help is needed.

A domain name is a unique name for a web site, like w3schools.com.

 

Domain names must be registered. When domain names are registered, they are added to a 

 

large domain name register. In addition, information about the web site, including the 

 

IP address, is stored on a DNS server.

 

DNS stands for Domain Name System. A DNS server is responsible for informing all other 

 

computers on the Inteet about the domain name and the web site address.

Registering a Domain

 

Domains can be registered from domain name registration companies.

 

These companies provide interfaces to search for available domain names, and they 

 

offer a variety of domain name extensions that can be registered at the same time.

Choosing a Domain Name

 

New domain name extensions and creative thinking still offer thousands of excellent 

 

domain names!

 

When choosing a name, it is important to consider the purpose of a domain name, which 

 

is to provide an easy way to reach your web site.

 

The best domains have the following characteristics:

 

Short - People don't like to type! A short domain name is easier to type, read, and 

 

remember.

 

Meaningful - A short domain is nothing without meaning, 34i4nh.com is not easy to 

 

enter or to remember. Select a domain that relates to your site in a way that people 

 

will understand.

 

Clear - Clarity is important when selecting a domain name. Avoid a name that is 

 

difficult to spell or pronounce.

 

Exposure - Names that are short and easy to remember are an asset. In addition to 

 

visitors, also consider search engines. Search engines index your site and rank it for 

 

relevance against terms people search for. In order to maximize your sites exposure, 

 

consider including a relevant search term in your domain. Of course, only consider 

 

this if it still maintains a short, clear and meaningful domain name.

Sub Domains

 

Most people are unaware that they use sub domains daily. The famous "www" of the World 

 

Wide Web is an example of a sub domain. Sub domains can be created on a DNS server, 

 

and they don't need to be registered with a domain name registrar, of course, the 

 

original domain name needs to be registered before a sub domain could be created.

 

Examples of sub domains used on the inteet are http://store.apple.com and 

 

http://support.microsoft.com.

 

Sub domains can be requested from your web hosting provider.

False Domain Names - Directory Listings

 

Some providers will offer you a name under their own name, like:  

 

www.theircompany.com/yourcompany/

 

This is not a real domain name, it is a directory - and you should try to avoid it.

 

Directory domains are not desirable, especially for companies.

 

Typically, directory domains are used for personal web sites and free web sites 

 

provided by an ISP, you may have seen www.theircompany.com/~useame as an address.

 

Competition in domain name registration has resulted in a dramatic decrease in 

 

pricing, so domain sharing is not common, since it is possible to register a domain 

 

name for only $15 per year.

Expired Domains

 

Another source for domain registrations is expired domains.

 

When you register a domain, think of it as a rental, assuming there are no legal or 

 

trademark issues with the domain name, you are free to use it as long as you continue 

 

to pay the yearly fee (you can now register in advance as many as 10 years). Some people register domains as speculators, hoping that they can later sell them,

 

 

After you have chosen and registered your own domain name, make sure you use it on all 

 

your web pages, and on all your correspondence, like e-mail and traditional mail.

 

It is important to let other people be aware of your domain name, and to inform your 

 

partners and customers about your web site.

 

Font-family

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

 

Font-size

مقدار دهي آن مي تواند مثل يکي از گزينه هاي زير باشد:

1-    نام هاي آماده براي سايز دادن به فونت ؛

 

•    XX-small

•    X-small   

•    Small       

•    Medium

•    Large       

•    X-large    

•    Xx-large  

 

2-    فونت دهي به صورت نسبي؛

 

•    به صورت درصدي : %120

•     به صورت  1.2em     : em

 

3-    فونت دهي به صورت مطلق؛

 

•    به صورت pixel  ، مانند:  px12

•    به صورت  point، مانند:  pt12

 

 

قطعاً زمانيکه بخواهيم اين امکان را به خوانندگان مطالب وب سايتمان بدهيم که با تغيير سايز صفحه مرورگر خود ( مثلا سايز %150 به جاي %100) بتوانند سايز فونت متناسب با آن را ببينند فونت دهي به صورت نسبي را مد نظرمان قرار مي دهيم.

 براي مطالعه بيشتر، اين مقاله را مطالعه نماييد.

 

Font-weight

ضخامت فونت است که به دو صورت normal  يا  bold مقدار دهي مي شود.

 

Font-style

سبک فونت است که به دو صورت normal   يا  italic مقدار دهي مي شود.

 

Text-decoration

مدل دهي به متن به صورت: none, underline, overline  و يا line-through  است.

 

 

نکته : قبل از شروع به کار و استفاده از css هاي متنوع، ابتدا از css اي که تا کنون آن را ساخته ايد يک back up بگيريد و سپس با استايل هاي مختلفي که در بالا ياد گرفتيد استايل هاي مختلفي را بسازيد.

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

 

-    پاراگراف زير را پيدا کرده و تگ  em را که جهت نمايش بيشتر يا به عبارتي تاکيد بهتر بر روي آن کلمه بکار رفته است را اضافه کنيد.

 

    <p>And when we're not diving, we often meet up in a local pub

    to talk about our recent adventures (<em>any</em> excuse,

    eh?).</p>

 

 

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

 

design-web-101.jpg

-    حالا فايل css خود را باز کرده و استايل زير را به آن اضافه نماييد.

 

    em {

                     Font-style: normal;

            Text-transform:uppercase;  

    {

 

 

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

 

design-web-102.jpg

 

مشابه اين مثال را مي توانيد در منوي سمت راست  خدمات طراحي سايت وبسکالا مشاهده کنيد. اگر از تگ em  در متون انگليسي استفاده نماييم استايل آن به صورت پيش فرض italic خواهد بود، (مانند مثال زير) که اگر بخواهيد استايل آم متن هم مانند ساير متون در آم پاراگراف باشد به آن استايل normal  مي دهيم و اگر بخواهيم با حروف بزرگ ( به جز زبان فارسي )نمايش يابد از uppercase  استفاده مي کنيم.

 

     

نکته :

برخي از تگ هاي و عناصر HTML هستند که به مرور زمان با تگهاي ديگري جايگزين مي شوند و از استفاده از آنها صرف نظر مي گردد، به عنوان مثال تا چند وقت پيش تگي که براي bold کردن يا ضخيم کردن متون يه کار مي رفت <b>  بود که به جاي آن هم اکنون از تگ strong  استفاده مي شود. اهميت اين موضوع زماني است که افراد نابينا براي کار با وب سايت ها از نرم افزارهايي استفاده ميکنند که بجاي نمايش صفحات وب آن را براي کاربر خود مي خوانند که به اصطلاح به آن ها screen reader  مي گويند.در اينجاست که آنها در هنگام خوانندن مطلب متني را که با تگ em  مشخص شده است را مهمتر ميدانند  تا متني را که درون تگ i قرار گرفته همچنين موتورهاي جستجو در گوگل به متني که با تگ strong  ضخيم شده است بيشتر توجه ميکنند و به عنوان متن مهمي که در يک متن استفاده شده است مي نگرند تا به متني که با تگ b ضخيم شده باشد.

 

نگاهي به عناصر درون صفحه:

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

 

    Body{

         Font-family:  verdana, Helvetica, Arial, San-serif;

    }

    P{

        Font-size: small;

    Color: navy;

    }

 

 

خط بالا به ما ميگه که هر تگ p  که در صفحه بود استايل بالا را بگيرد.

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

 

    <div id="tagline">

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

    < /div>

 

 

متن درون اين تگ از خصوصيات گرفته شده ساير متون پيروي نمي کند و در عوض خصوصيت مربوط به div خود را مي گيرد که شامل خصيصه خاصي است که با id اي به نام tagline تعريف شده است که اين خصوصيت تنها به براي همين تگ خواهد بود. حالا براي تعريف درون فايل css براي آن خصوصيات زير را تعريف مي کنيم:

 

    #tagline p {

                 Font-style:  italic;

    Font-family:  Georgia, Times, Serif;

    }

 

 

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

 

design-web-103.jpg

 

براي هر متني که درون تگ p  قرار گرفته باشد و id  آن tagline  باشد، نوع فونت آن italic  و از نوع Georgia  يا Times و يا Serif خواهد بود.

يعني هر تگ p   که داخل آي دي tagline  قرار گرفته است  و نه p هاي ديگر .

علامت # در CSS به عنصري اشاره مي کند که شامل يک  Id خاص با خصوصيات مربوط به خود است. در مورد  Id در قسمت هاي جلوتر به طور کامل خواهيم پرداخت.

 

گزينشگر متني

#tagline p يک گزينشگر متني است، در اينجا چند مثال ديگر برايتان مطرح مي کنم.

 

    Navigation a{#

        Text-decoration: none;    

    }

 

 

براي هر تگ a اي که درون تگي با  navigation  =id است، آن لينک فاقد زير خط در هنگام کليک کردن آن لينک خواهد بود.

 

    #footer {

        line-height: 150%;

    }

 

 

درون تگي که id  footer  دارد، تمامي متون داراي %150 فاصله ميان خطوط خواهند بود.

 

    h1  strong {

    color: red;

    }

 

 

هر  تگ strong  ي که درون تگ  h1 قرار گيرد رنگ آن قرمز خواهد بود.

 

سبک دهي گروهي

گاهي اوقات مي بينيد که در هنگام استايل دهي يکسري از تگ ها هستند که خصوصيات يکساني دارند اما در فايل CSS براي هر يک از آنها کلاس و يا تگ جداگانه اي در نظر گرفته شده مثلا:

 

    h1 {

     color: yellow;

     background-color: black;

    }

    h2 {

     color: yellow;

     background-color: black;

    }

    h3 {

     color: yellow;

     background-color: black;

    }

 

 

اين کار باعث مي شود تا علاوه بر اينکه حجم فايل CSS  تان زياد شود فايلتان نيز کثيف به نظر برسد، به همين دليل در اين مواقع بهتر است مانند زير عمل نماييد:

 

    h1, h2, h3 {

     color: yellow;

     background-color: black;

    }

 

 

توجه داشته باشيد که براي جداکردن تگ ها از همديگر از کاراکتر ( ,)    کاما ، استفاده کرديم که اين علامت را مي توانيد به معناي يا تعبير کنيد.

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

فايل css تان را با اضافه کردن css زير به انتهاي آن ويرايش کنيد.

 

    h1, h2, h3 {

     font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

     background-color: navy;

     color: white;

    }

 

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

 

design-web-104.jpg

 

يک سوال ؟

به مثال زير دقت کنيد

 

    h1, h2, h3 {

     font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

     background-color: navy;

     color: white;

    }

    h3 {

    color: red;

    }

 

 

تگ h3  چه رنگي مي گيرد ؟

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

البته ارجعيت دستورات سي اس اس بحث خود را دارد که در دوره هاي بعدي حتما به آن مي پردازيم .