آخرین مطالب
امکانات وب
سايتها بر اساس کاربرد و نوع برنامه نويسي به چند دسته تقسيم مي شوند که عبارت است از :
اين سايتها يکبار طراحي مي شوند و اطلاعات مورد نياز در داخل آنها قرار مي گيرد و پس از آن براي تغيير در آنها نياز به يک طراح حرفه اي يا نيمه حرفه اي سايت است. زبان برنامه نويسي اينگونه از سايتها غالبا HTML و Java Script هستند که در نوع توسعه يافته تر از CSS نيز بهره گرفته مي شود.
از آنجا که حجم کمتري از کد در طراحي سايتهاي ثابت طراحی وبسایت استفاده ميشود سرعت بارگذاري (Loading) بالايي دارند. علاوه براين کاهش حجم کدها که باعث خوانايي بشتر سايت توسط رباتهاي جستجوگر ميشود از يک سو و کاهش زمان بارگذاري از سوي ديگر سبب بهتر شدن وضعيت آنها از لحاظ امتياز دهي موتورهاي جستجو يا همان "رنکينگ" مي شود. سايتهاي ثابت قيمت طراحي پايين تري را نيز عمدتا نسبت به ساير سايتها دارند.
عدم امکان ايجاد تغيير در اين نوع از سايتها توسط افراد عادي علاوه بر افزايش امنيت سبب بهرهمندي از گرافيک و ظاهري زيبا ميشود چرا که همه چيز ثابت است از جمله متون و اندازه تصاوير و همچنين همه عناصر مکان مشخص و ثابتي را دارند در نتيجه مي توان براي محل قرار گرفتن هر يک از اجزاء بهترين تصميم را گرفت.
اما از طرفي نيز عدم امکان ايجاد تغييرات توسط افراد عادي سبب ميشود تا امکان بروز رساني سايت توسط صاحبان و مديران سايت صلب شود.
نکته: سايتهاي ثابت (Static) براي افراد، شرکتها و سازمانهايي مناسب است که حداکثر يک يا دو بار در سال نيازمند به تغيير در محتواي سايت هستند.
سايتهاي پويا (Dynamic Website): محتواي سايتهاي دايناميک بعد از طراحي توسط افراد عادي که دسترسي به سيستم مديريت محتواي سايت را داشته باشند قابل تغيير است. زبان برنامه نويسي وبسايتهاي پويا ميتواند براساس نياز متفاوت باشد اما عمدتا از زبانهاي ASP ، ASP.Net و Php استفاده ميشود و از زبانهاي کمکي CSS و Silver light و يا Ajax براي ايجاد قابليتهاي ويژه نيز بهره گرفته مي شود.
در اينگونه از سايتها ابتدا اسکلت سايت توسط طراح ايجاد ميشود و سپس محتوا توسط مديران سايتها تغيير ميکند مانند فرم قراردادي که يکبار توسط فردي ايجاد ميشود و توسط افراد ديگري بارها تکميل مي شود، از اين رو طراح نسبت به محل قرار گرفتن و اندازه دقيق متون و تصاوير و ساير عناصري که بعداً توسط مديران سايتها تغيير ميکند اطلاع ندارد بنابر اين چاره اي ندارد جز اينکه همه حالات را در نظر بگيرد و اينکار سبب ميشود تاحدودي از گرافيک و جلوه سايت کاسته شود.
يکي از مزيتهاي سايتهاي دايناميک اين است که هيچ محدوديتي براي ايجاد، تغيير يا حذف مطالب، تصاوير و صفحات و غيره وجود ندارد.
با توجه به اينکه در سايتهاي پويا از زبانهاي برنامه نويسي پيشرفته استفاده ميشود امکانات زيادي در آنها قابل ايجاد است مانند ايجاد صفحات هوشمند، فرمها و جستجوهاي پيچيده.
استفاده زياد از کدها سبب کند شدن بارگذاري سايت و امتياز آن در موتورهاي جستجو مي شود.
نکته: سايتهاي پويا براي افراد، شرکتها و سازمانهايي مناسب است که بيش از دوبار در سال نياز به تغيير درمحتواي سايت را دارند.
تمام ويژگي‌هاي يک سايت پويا مي تواند در يک پرتال نيز صدق کند.
نکته: معمولاً پرتالها توسط سازمانها، گروهها و شرکتها خريداري مي شوند. به دليل نياز به بروز رساني بخشهاي مختلف اداره آنها توسط يک فرد بسيار مشکل است مگر آنکه به چشم يک کار حداقل پاره وقت به آن نگاه شود.
سايتهاي متحرک استاتيک و نيمه دايناميک (Static and Dynamic Flash Website): سايتهاي فلش يا متحرک دو نوع استاتيک و نيمه دايناميک هستند و توسط نرم‌افزارهاي خاصي ايجاد مي شوند در برخي موارد از XML يا Action Script براي ايجاد قابليتهاي تغيير يا هوشمندي در اين سايتها بهره گرفته مي شود.
به طور کلي سايتهاي فلش ثابت (استاتيک) غير قابل تغيير مي باشند و مانند سايتهاي ثابت يکبار توسط طراح ايجاد مي شوند و براي تغيير آن نياز است تا افراد به صورت حرفه اي يا نيمه حرفه اي از دانش طراحي فلش برخوردار باشند.
اما سايتهاي فلش نيمه دايناميک يا نيمه پويا مانند سايتهاي پويا عمل ميکند و قابل تغيير هستند اما تغيير در آنها به سادگي سايتهاي پويا نيست و وسعت ايجاد تغييرات نيز بسيار محدودتر است.
از مزيتهاي وب سايتهاي فلش جذابيت آنهاست. گرافيک زيبا و انيميشن‌هاي جذاب. اما از معايب عمده آنها ميتوان به عدم خوانده شدن اطلاعات موجود در آنها توسط رباتهاي جستجوگر و عمدتا سرعت بسيار پايين بارگذاري اشاره کرد.
نکته: سايتهاي فلش براي افراد و گروهها يا شرکتها و سازمانهايي مناسب است که نياز به تبليغات ندارند و عموم کاربران با آنها آشنا هستند مانند خوانندگان، سياست مداران، بازيگران و گروههاي موسيقي، هتلهاي معروف، مکانهاي توريستي.
تمام مزايا و معايب مربوط به سايتهاي پويا در مورد سايتهاي مجهز به سيستم مديريت محتوا صدق مي کند.
البته در نظر داشته باشيد که سايتهاي پويا و پرتالها نيز مجهز به سيستم مديريت محتوا هستند اما آنچه که در CMSها متفاوت است طراحي آنها و سيستمهاي مديريت محتواي آنها براي مصارف خاص است.
از مزاياي سيستمهاي مديريت محتوا نسبت به ساير سايتهاي دايناميک مي توان به آماده بودن و جامع بودن آنها اشاره کرد. از اين رو اغلب اينگونه از سايتها در کمتر از ? روز کاري قابل نصب و استفاده هستند.
طراحي سايتهاي CMS مانند يک خط توليد محصول است و از آنجا که طراح بايد نمونه‌هاي محدودي را به صورت انبوه توليد کند سعي در رعايت تمام اصول امنيتي، گرافيکي، موارد مربوط به رنکينگ و امتياز موتورهاي جستجو و ساير موارد موثر مي کند.
وبسايت‌ها مزاياي فراواني را براي مديران و صاحبان خود به همراه دارند که مهمترين آنها به شرح زيرند:
تاثير سايت در اطلاع رساني:
داشتن يک سايت مانند داشتن يک کاتالوگ است اما با مزاياي فراوان ديگر. يک کاتالوگ مي تواند شامل تصاوير و متون باشد اما يک سايت ميتواند از تصاوير، متون، فيلم و صوت و يا انيميشن نيز بهره بگيرد بنابر اين امکان اطلاع رساني جامع با محتوايي جذاب تر را مي دهد. براي طراحي، چاپ و انتشار هر نسخه از کاتالوگ نياز به هزينه است اما براي يک سايت فقط کافيست هزينه اي بسيار پايين براي طراحي و نگهداري آن پرداخت شود و بعد از آن در طول سايت هزاران و يا ميليونها کاربر مي توانند بارها و بارها از آن بازديد کنند.
تاثير سايت در بازاريابي:
موتورهاي جستجو بدون هزينه براي شما بازاريابي مي کنند فقط کافيست رباتهاي آنها سايت شما را پيدا کنند و از آن پس زماني که فردي به دنبال هر يک از خدمات و يا محصولات و يا اطلاعات ارائه شده در سايت شما باشد، اين موتورها فرد را به سمت سايت شما هدايت مي کنند. ميزان بازديد کننده هدايت شده به سايت به پارامترهاي زيادي وابسته است اما در بدترين حالت چيزي در حدود ?? نفر در روز توسط موتورهاي جستجو به يک سايت هدايت مي شوند.
ايجاد قابليتهاي جديد تبليغاتي:
با داشتن يک وبسايت صاحبان و مديران آن وارد عرصه تجارت الکترونيک مي شوند و امکان استفاده از راهکارهاي تجارت الکترونيک براي آنها بوجود مي آيد از مهمترين اين قابليتها ميتوان به تبليغات اينترنتي، تبليغات در موتورهاي جستجوگر، تبليغات کليکي و تبادل بنر و لينک اشاره کرد.
در دسترس بودن:
سايت همواره با متقاضيان اطلاعات و محصولات يا خدمات قابل ارائه توسط آن فقط يک کليک فاصله دارد و در تمامي ساعات شبانه روز و روزهاي تعطيل نيز فعال است.درآمد زايي:
ميزان سودآوري و درآمد زايي سايتها به نوع سايت و اهداف آن بستگي دارد البته ميزان فعاليت صاحبان سايتها و بروز رساني و رسيدگي به آنها نيز عامل بسيار مهمي است. اما امروزه شرکتها و افراد بسياري هستند که فقط از طريق سايت فعاليت مي کنند و عمده درآمد آنها از طريق سايت و مشتريان آنلاين است.
طراحي وب‌گاه[ويرايش]
وب‌گاه مجموعه‌اي از اطلاعات درباره موضوع و يا عنوان خاص است. طراحي يک وب‌گاه مشخص کننده آرايش و ساختــار صفحات وبي است که بوجود آورنده وب‌گاه خواهند بود. يک صفحه وب شامـــل اطلاعاتي درمورد هدف ايجــاد وب‌گاه مي‌باشد. يک وب ســايت را همــانند کتابي تصور کنيد کـه هر صفحه وب در حکم برگي از کتاب خواهد بود.
در زمينه طراحي وب‌گاه جنبه‌هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده ميشود. براي وب‌گاه‌هاي تجاري عمومي، موارد زير از جمله اصلي‌ترين آنها به شمار مي‌روند:
طراحي سايت بر طبق عنوان و محتواي مطالب مي‌باشد.
مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند.
سايت بـــايد قابل فهم بوده و برقـــراري ارتبــاط با آن حتي براي مخاطباني کـه آشنايي چنداني بـا وب ندارند، آســـان باشد. چنانچه سايت به اندازه کافي بزرگ بوده و اطلاعات زيادي را شامــل شود، بـايد اطلاعات راهنما را به گونه‌اي بکار برد که به سرعت در اختيار بيننده قرار گيرند.
نماي کــار بايد کلي بوده و تمام صفحه را دربر گيرد تا بتواند پايـداري و ثبات را القــا کند. سبک نگارش بايد زيبا و تخصصي بوده و مناسب با سليقه مخاطبان و محتواي سايت باشد.
در نگارش متون و اطلاعاتي که مخاطب به دنبال آنها است بايد بزرگ نمايي شود تا به بيننده القا کند که اين همان چيزي است که به دنبال آن بوده است.
همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست‌هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در موتورهاي جستجوي اصلي چنين شود.
يک وب‌گاه معمولاً شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (Index) ناميده ميشود. بعضي از وب‌گاه هـــا از صفحه‌اي استفـــاده ميکنند کـــه معمولاً صفحه خوش آمد ناميده ميشود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام طراحی سایت خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسيوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.
بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل ميشوند.
هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبانFTP انجام ميشود. هنگامي که سايت منتشرشد، مسئول سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده ميکند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت‌هاي ديگر، ايجاد پيوند با وب‌گاه‌هاي مشابه و غيره امکان پذير است.
طرح وب جلوه بصـري هدف وب‌گاه است و اولين بخش از يک صفحه وب است که ذهن مخاطب را با خود درگير ميکند.
طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان‌هاي متناسب با رويکرد سـايت و به کمک ذهن خلاق و ذوق هنري خود در بکار بردن ابعاد و رنگها، طرحي خلق ميکند که ضمن ايجـاد يکپارچگي در کليه صفحات وب‌گاه، نماي تکرار شونده و خسته کننده را به مخاطب القا نکند. در وب‌گاه بايد از الگوي ثابتي در صفحات استفاده کرد که کاربر به هنگام ديدن صفحات متوجه اين است که همه صفحات در يک سايت مشخص هستند.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 58
فرض کنيد به سال ???? رفته باشيم، چه مهارت شغلي ضروري خواهد بود؟ کد نويسي!اگرچه ممکن است در دهه بعدي خبري از HTML يا CSS نباشد اما موضوع اين است که کدنويسي در آينده فوق العاده مهم خواهد بود و فرقي نمي کند در چه قسمتي بخواهيد از آن بهره ببريد.
يادگيري برنامه نويسي مي تواند در خانه يا مدرسه صورت بگيرد، گذراندن طراحی دوره هاي تحصيلي مدارس و دانشگاه ها اغلب پرهزينه و زمان بر است در حالي که خواندن کتاب يا طي کردن کلاس هاي آنلاين هم ارزانتر بوده و هم وقت زيادي از شما نخواهد گرفت.
چرا بايد کد نويسي را ياد بگيريد و از کجا بايد شروع کنيد؟
اشر هانت، يک طراح و برنامه نويس مطرح، معتقد است يادگيري HTML و CSS مي تواند براي طراحان وب فوق العاده ارزشمند باشد. او پيشنهاد مي کند براي يادگيري کليدهاي CSS با syntax و انيميشن هاي مرورگر وب شروع کنيد. اين کار باعث مي شود تا علاوه بر درک اين زبان ها، از محدوديت هاي آنها نيز مطلع شويد و قابليت هاي کلي آنها را شناسايي کنيد.
C.J. Windisch به عنوان يکي از اعضاي اصلي تيم طراحي برنامه مکان يابي GonnaBe مي گويد : ارزش کدنويسي در اين است که ياد بگيريد چگونه با استفاده از داده ها تصميم گيري کنيد. از تحليل هاي آماري بازي بيسبال گرفته تا تيم انتخاباتي باراک اوباما شما بايد از کدنويسي براي انجام محاسبات استفاده کنيد.
وينديش توصيه مي کند تا از وب سايت هايي نظير Treehouse که آموزش هاي ويديويي در سطح ابتدايي را ارائه مي کنند استفاده کنيد.
مايک موراي يکي ديگر از اعضاي تيم برنامه نويسي GonnaBe مي گويد : چيره شدن بر کدنويسي به برنامه نويس اين امکان را مي دهد تا تکنولوژي اي که از آن استفاده مي کنند را به دلخواه خود تغيير دهند و بدين ترتيب ارزش بيشتري نزد کارفرمايان پيدا کنند.
کدنويسي مربوط به داده هاي بزرگ است و مسلط شدن بر اين داده ها مي تواند شروع يک پروژه را از شکست به موفقيت تغيير دهد.
يک کدنويس تازه کار بهتر است بر روي درک کدها و چگونگي کار با آنها تمرکز کند. کمپاني ها بطور معمول از ديتابيس هاي اطلاعاتي قوي نظير تحليل و بررسي ها، شبکه هاي اجتماعي و ثبت کننده فعاليت ها برخوردار هستند و شما بايد بتوانيد از اين اطلاعات براي ايجاد يک فرآيند که توانايي عملکرد سريع بر روي آنها و ارائه ي يک خروجي مناسب را دارد، استفاده کنيد.
Meouchy يکي از اعضاي تيم نظرسنجي يک کمپاني فعال در حوزه تحقيق بازار گوشي هاي هوشمند، مي گويد : تازه کارها بايد يادگيري ديتابيس ها و SQL syntax هاي ابتدايي را جزو برنامه هاي خود قرار بدهند. وي توصيه مي کند در هنگام حل مسائل واقعي سعي کنيد طراحی از پيچيدگي ها فرار کنيد و از همان مباحث پايه در کار خود استفاده کنيد بدين ترتيب هر چقدر که تکنولوژي در اين زمينه پيشرفت کند شما حداقل تا يک دهه نيازي به يادگيري مجدد يک زبان نخواهيد داشت.
اين مانند دانستن و تحقيق زياد در مورد تکنيک ها و فناوري هاي جديد در زمينه کدنويسي است، در حالي که شما قابليت پياده سازي آنها را نداريد. بنابراين زماني شما باسواد محسوب مي شويد که بتوانيد چيزي خلق کنيد نه اينکه فقط از آنها مطلع باشيد.
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 70
گزينشکرها (selectors)
در اين جلسه از آموزش css با ساير گزينشگرهايي که در Css3 معرفي شده اند صحبت خواهيم کرد.
اگر دومين پست از آموزش css را خوانده ايد، با هم درمورد گزينشکرها صحبت کرديم
گفتيم که در css شش نوع گزينشگر براي انتخاب المنتها وجود دارد که يگي از ان ها کلاس هاي کاذب (pseudo-class) بودند، که اين سلکتورها براي نمايش رويدادهاي صفحه از جمله، کليک، هاور، فوکوس و ... استفاده مي شوند. در css کلاس هاي کاذب ديگري نيز وجود دارد که مربوط به طريقه انتخاب فرزندان (child) يک المنت پدراست. ما ميخواهيم در اين جلسه در مورد آن ها توضيح دهيم.
<ul>
<li>Lang
<li>HTML</li>
<li>Javascript</li>
</ul>
</li>
<li>Joomla</li>
<li>Drupal</li>
15
</ul>
16
</li>
17
</ul>
حال اگر بخواهيم به هر يک از اين گزينه ها يک رنگ متفاوت اختصاص دهيم، چه ميکرديم؟ حتما براي هر يک class تعريف مي کرديم و رنگ مورد نظر را انتخاب مي کرديم. خب اين روش درست است اما اگر ندانيم class آن چيست چطور؟ اگر سايت دايناميک باشد، و اين اطلاعات بعدا اضافه شود
last-child
حال به تعريف دقيقتر اين کلاس هاي کاذب مي پردازيم :
nth-child(n) و nth-last-child(n)
nth-child(n) : با استفاده از اين کلاس کاذب مي توان براي تک تک المنت هاي يک صفحه وب، بدون استفاده از id يا class براي آن ها يک استايل متفاوت تعيين کنيم.
به کد css زير دقت کنيد تا متوجه شويد چگونه ميتوانيم به هر يک از li هاي کد html بالا استايل متفاوت دهيم.
1
ul li {
2
color: blue;
3
font: 24px tahoma;
5
}
6
7
ul li:nth-child(1){color: red;}
8
ul li:nth-child(2){color: green;}
9
ul li:nth-child(1) li:nth-child(1){color: orange;}
10
ul li:nth-child(1) li:nth-child(2){color: brown;}
11
ul li:nth-child(1) li:nth-child(3){color: pink;}
12
ul li:nth-child(2) li:nth-child(1){color: gray;}
13
ul li:nth-child(2) li:nth-child(2){color: silver;}
14
البته در مروگر ie فقط از نسخه 9+ کار ميکند.
کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل ميکند، به اين صورت که از اخر به شمارش المنت ها ميپرداز.
اگر nth-last-child را جايگزين nth-child در کد css بالا کنيم نتيجه کد به شکل زير خواهد بود.
first-child و last-child
همانطور که از اسم کلاس ها معلومه first-child اولين فرزند از يک المنت پدر last-child آخرين فرزند از يک المنت پدر رو انتخاب ميکنند.
کد css زير را به کدهاي css بالا اضافه کنيد
1
ul li:first-child li {font-size: 18px;}
2
ul li:last-child li {font-size: 14;}
نتيجه
ديگر کلاس هاي کاذب
selection : اين کلاس کاذب استايل المنت را هنگامي که ان را انتخاب ميکنيم، (در حالي که کليک چپ رو نگه داشتيم روي المنت ميکشيم يا CTRL + A ( در حالت پيشفرض مرورگرها
هنگامي که به طور مثال متني رو انتخاب ميکنيم، رنگ متن سفيد، و پس زمينه ان آبي ميشود. ما توانيم با استفاده از اين کلاس کاذب اين رنگ را هر کدام از المنتها تغيير دهيم يا ان را براي کل صفحه تعيين کنيم.
کد css :
1
::selection {
2
background: #999;
3
color: #edb;
4
}
5
6
::-moz-selection {
7
background: #999;
color: #edb;
9
}
::-webkit-selection {
12
background: #999;
13
color: #edb;
14
}
المنت هاي کاذب (pseudo-elemnt)
بعلاوه کلاس هاي کاذبي که گفتيم، المنت هاي کاذب نيز وجود دارند.
::first-letter تغيير استايل اولين کاراکتر از يک متن.
کد html :
1
<p>7lea: javascript and web design tutarials</p>
کد css :
p {font-size: 20px;}
p::first-letter {font-size: 36px;}
::first-line تغيير استايل اولين خط از يک متن.
<p>7lea: javascript and web design tutarials<br>7lea: javascript and web design tutarials</p>
کد css :
p {font-size: 20px;}
p::first-line {font-size: 36px;}
بسيار خب آموزش اين جلسه نيز به پايان رسيد در جلسه بعدي به معرفي گزينشگرهاي صفت (attribute) و باقي گزينشگرها ميپردازيم.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 71
Overview
What's included Preview
Reviews
Do you want to lea how to use WordPress for web design? Do you want to start a freelance career in web design, but thought you couldn't because you're not a developer? Did you know that over 13% of the 1,000,000 biggest websites on the inteet run on WordPress? Whether you've been dreaming about designing your own
specializing in WordPress, and also other fundamentals such as: what web hosting is, why Firefox is a web designer's best friend, and even how to edit images!
The course is is made up of 7 easy-to-follow lessons, including articles, video tutorials, and interaction! You'll get your interactive practice time through simple homework plans where you'll actually try doing what you've leaed in the tutorials. My objective is to make web design easy to understand, and I use real-world analogies to explain technical jargon to help you make sense of some of the fundamental concepts you need to understand in order to be a successful web designer.
What you'll lea
Setting up hosting
Installing WordPress
How to edit images
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 90
بهبود سئو و طراحي قالب اختصاصي وردپرس
همانطوري که قطعا مي دانيد، الگوريتم هاي موتورهاي جستجو جهت جلوگيري از سوء استفاده ي کاربران و وب مسترها، مخفي هستند تا در هنگام طراحي سايت و يا بروز رساني وب سايت ها، صحت کيفيت نتايج جستجوي ارائه شده از سوي موتورهاي جستجو، مورد آسيب قرار نگيرد؛ بنابراين چگونه مي توان ملاک هاي کيفي جهت قرار گرفتن در رتبه هاي بالاتر در رده بندي موتورهاي جستجو را دانست؟
البته از بين راه حل هاي فوق، گزينه ي حدس، تست و خطا، بسيار کاربردي تر بوده و در نهايت منجر به نتايج بسيار تاثيرگذارتري مي شود، چون بصورت علمي و بر اساس بررسي ها و تست و خطاهاي مختلف، گزينه ها و ملاک هاي بهبود سئوي سايت کشف شده و به کار گرفته مي شوند.
بدون شک يکي از بررسي هايي که موتورهاي جستجو در مورد وب سايت ها انجام مي دهند؛ شناسايي شخصيت و هويت آن وب سايت و بررسي ميزان اصالت آن هست؛ اينکه وب سايت شما باهويت يک وب سايت دايناميک يا استاتيک، خبري يا آموزشي، کپي کار و يا ارائه دهنده ي مطالب اصيل و … شناخته شود، تاثير بسزايي در ميزان و نحوه ي ارسال بازديدکنندگان توسط موتورهاي جستجو به وب سايت شما خواهد داشت.
قالب اختصاصي و اصالت يک وب سايت
بدون شک، يکي از پارامترهايي که کاربران يک وب سايت آن را بر همان اساس ارزيابي مي کنند، اين هست که آيا وب سايت مربوطه يک طراحي اختصاصي دارد يا خير؟ و در اينجا با توجه به تجربيات پيشين، و مشاهده ي افزايش بازديد وب سايت هايي که قالب هاي اختصاصي استاندارد و با کيفيتي دارند، اين حدس را ميتوانيم بزنيم که گوگل با بررسي کدهاي خروجي وب سايت شما، ميتواند ميزان اصالت سايت شما را شناسايي کند و نتيجه ي آن را در نتايج جستجوي خودش و ارزيابي سئوي سايت شما، ترتيب اثر دهد. البته ناگفته نماند که يکي از علل افزايش بازديد (بخصوص در مورد page views) وب سايت هايي که براي آن ها طراحي قالب اختصاصي انجام شده است، اين هست که در طي فرآيند طراحي يک قالب اختصاصي، دقيقا همه چيز مطابق نياز همان سايت طراحي و پياده سازي مي شود.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 86
داک تايپ DocType : Document Type Definition
اولين آيتم صفحه است بدون فاصله. اين يک قانون است.
همانطوري که فايل word 2007 در نمايش در 2000 دچار مشکل مي شود HTML ها با داک تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.
در واقع اين داک تايپ است که به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.
داک تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5 که به تازگي مطرح شده است.
براي ديدن داک تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
به کدهاي داک تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي که بايد به اين نوع سند در وب سايت کنسرسيوم جهاني وب World Wide Web Consortium يا W3C ، اشاره کند کدام است.
در حال حاضر دو نوع داکتايپ هستند که استفاده بيشتري دارند Transitional و Strict
همانطوري که گفتم فعلا دنبال تفاوت اين داک تايپ ها نباشيد به آن هم خواهيم رسيد .
تاکيد ميکنم : اولين آيتم صفحه است بدون فاصله. اين يک قانون است.
عناصر HTML :
قبل از اين که عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) آشناشويد. تگ يعني اسمي که ميان اين دو <> قرار گيرد و نام تگ همان متني است که بين اين دو <> قرار مي گيرد
تگ HTML <html>
تگ HEAD <head>
تگ ها مي توانند شامل چند attribute (ويژگي) باشند:
<html xmlns="http://www.w3.org/1999/xhtml " dir="rtl" >
dir يک نام attribute است و rtl ، value (مقدار) آن است که بين " " قرار گرفته است.
design-web-09.gif
تگ ها به دودسته container و empty تقسيم مي شوند.تگ هاي container شامل يک تگ بازشونده و يک تگ بسته شونده هستند به مثال بالا دقت نماييد HTML باز شده و بسته شده است. تگهاي empty متفاوت هستند مانند مثال زير
<img src="images/test.jpg" alt="test" />
<br/>
تگ هاي empty را مي توان به صورت container استفاده کرد ولي در داک تايپ هاي xhtml توصيه شده است که تگ هاي empty را به همان شکل empty بنويسيم
در استفاده از تگ ها بايد دانيد که از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنويسيم دچار error مي شويم.
نگران نباشيد کم کم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو کنيم :
empty tag in html
بسيار عالي شما هم اين نتايج را پيدا کرديد :
• <br/>
• <hr/>
• <meta/>
• <base/>
• <link/>
• <meta/>
• <img/>
• <embed/>
• <area/>
• <input/>
•
اين را گفتم که هيچ وقت دنياي وب و جستجو را فراموش نکنيد.
غير از داک تايپ ها تمامي عناصر صفحه داخل تگ HTML است که شامل 2 بخش مي شود head و body
عنصر HAED
اين يک تگ container است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css و .....
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
عنصر title :
يک تگ container است که متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :
به تايتل درسايت بنده توجه کنيد :
design-web-10.gif
موارد استفاده ديگر:
• اين تايتل در زمان مينيمايز کردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوکمارک کردن صفحه با اين عنوان در ليست ما ذخيره مي شود
• براي معرفي آن صفحه است
• براي موتورهاي جستجو هم حائز اهميت مي باشد چيزي که در بهينه سازي وب سايت وب اسکالا هم استفاده شده است
عنصر meta :
متا تگ يک تگ empty است و براي دلايل متفاوتي استفاده مي شوند اطلاعات اضافي که در مرورگر نمايش پيدا نمي کند . به طور مثال براي نام نويسنده ويا حق کپي رايت و يا نوع کاراکتر و ....
Css و javascript هم در head قرار ميگيرند که بنا به نياز استفاده ميشوند البته براي جاوااسکريپت ميتوان يک تفاوتهايي در طراحي هاي حرفه اي قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.
عناصر body :
هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 88
آيا ساختن يک صفحه کافي است؟
در قسمت هاي گذشته ساخت يک صفحه از وب سايت را آموختيم و حالا مي خواهيم چند صفحه را در کنار هم داشته باشيم و بين آن ها با لينک دهي حرکت کنيم . در واقع اين يک workshop براي جمع آوري اندوخته هاي شماست .
در ابتدا صفحه اي با نام index.html مي سازيم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="bodycontent">
<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> <!-- end of bodycontent 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 استفاده نماييد.
<a href="filename.html">Link text here</a>
href : يک attribute است و بيان کننده آدرسي است که قرار است به آنجا لينک شود
filename.html: نام صفحه ايست که قرار است به آنجا لينک شود
Link text here: چيزي که در صفحه html ديده مي شود و نام لينک مورد نظر است
اين نکته را هرگز فراموش نکنيد که از کلمات با معني براي لينک دهي استفاده نماييد و از کلماتي مانند "اينجا را کليک نماييد" پرهيز کنيد.
حالا بايد براي لينک دهي بين صفحات يک منو و يا navigation سايت را بسازيم . دقت نماييد نحوه ساخت navigation سايت بسيار مهم است و ساختاري که در ادامه توضيح داده مي شود ساختاري مناسب و استاندارد براي منوي سايت مي باشد و بهتر است الان نگران ظاهر آن نباشيد در ادامه مقالات ظاهر آن را زيبا مي کنيم!
ساخت يک منويnavigation
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
حالا کد زير را در بالاي همه صفحات بعد از تگ div با آي دي header اضافه نماييد . به طور مثال براي صفحه index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<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> <!-- end of bodycontent div -->
</body>
</html>
حالا به راحتي مي توانيد بين 3 صفحه حرکت نماييد.
نکته نويسنده: بهترين مکان براي قرارگيري منوي سايت هم از لحاظ ظاهر و هم در ساختار html بالاترين نقطه صفحه است. مطمئن باشيد اين به نفع شماست!
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 80
امروزه در فعاليت هاي تجاري خود موفق ترند که تبليغات آنها به حد کافي بوده و در بين مردم شناخته شده تر باشند.
يک وب سايت با طراحي وب مناسب ، مي تواند نقش چشمگيري در تبليغات يک شرکت داشته باشد و فعاليت هاي آن را به جهانيان نمايش دهد.
آنچه در نگاه اول ، بازديدکننده سايت شما را جذب کرده و او را به بازديدهاي بعدي ترغيب مي کند نوع طراحی وب سایت وب سايت ، چه از طراحي گرافيکي و چه از نظر فني است. اما آيا بازديد کننده اي به آن سايت خاص خواهد آمد تا جذب آن شود؟
اولين راهي که براي رفع اين مشکل به ذهن ميرسد تبليغات است. تبليغات نتايج قابل قبولي در پي دارد اما نيازمند صرف هزينه هاي زيادي است. آيا حاضر به پرداخت هزينه هاي هميشگي مالي آن هستيد؟
ما به شما راه بهتري پيشنهاد ميکنيم ، سايت شما را با متدهاي روز دنيا طراحي خواهيم کرد که با بهينه سازي موتور هاي جستجو (سئو) , گوگل و ياهو به طور رايگان براي سايت شما بازاريابي کرده و بازديد کنندگان مربوط به حرفه خود را به سايتتان سرازير کنند.
شرکت طراحي وب سايت زفره مديا بر اساس نياز بازار طراحي سايت ايران، محصولات بسيار کاربردي ( طراحي وب سايت ) و پيشرفته اي را توليد کرده است، محصولات فوق با استفاده از جديد ترين تکنولوژي هاي طراحي وب سايت برنامه نويسي و اجرا شده است. اين بدان معناست که طراحي سايت، همراه با نرم افزارهاي زفره مديا مکمل بسيار قدرتمندي براي ايجاد يک طراحی وب سایت خواهد بود. طراحي وب سايت در سالهاي اخير بسيار تغيير کرده است و اين تغييرات باعث شده است که زفره مديا محصولات خود را در زمان بندي هاي مختلف بروزرساني کند، همچنين امنيت در سايت بسيار مهم مي باشد که اين مطلب نيز در محصولات زفره مديا گنجانده شده است.
با سابقه چندين ساله خود در زمينه طراحي سايت، طراحي پورتال ، طراحي و اجراي کليه نرم افزارهاي تحت وب و با داشتن کادري از حرفه اي ترين طراحان سايت، بهترين انتخاب براي کساني که در نظر دارند تجارت و کسب و کار خود را گسترش دهند. چيزي که باعث متمايز ساختن يک شرکت و پيمانکار طراحي وب سايت از ديگر همکاران خود ميکند پشتيباني قوي و تعهد به کار خود است، گروه وبسام تاكيد بر خدمات پس از فروش و كسب رضايت بالاي مشتريان را سرلوحه كار خود قرار داده است.وبسام با دانش فني خود، بکارگيري قدرتمندترين زبانهاي طراحي وب سايت ، استفاده از استانداردهاي بين المللي و متدولوژي هاي روز، همواره در زمينه طراحي سايت پيشرو بوده است.
اهميت داشتن طراحی وب سایت چيست
وجود وب سايت اعتبار تجارت شما را افزايش مي دهد، باعث گستردگي تجارت شما در بخش بسيار وسيعتري مي شود، سهولت ارجاع مشتريان جديد به شرکت شما را فراهم مي کند، سايت به شما کمک مي کند با مشتريان بالقوه در ارتباط باشيد، هزاران نفر در سراسر جهان مي توانند از وب سايت شما بازديد نمايند، باعث افزايش چشمگير فروش محصولات شما مي شود. اطلاعات بيشتر
چرا طراحي سايت
تيم طراحي وب متخصص و با تجربه، مشاوره و راهنمايي قبل ازطراحي سايت و بعد از طراحي سايت، بکار گيري اصول سئو در طراحي وب سايت، برعهده گرفتن تمام امور لازم جهت راه اندازي وب سايت، قيمت و هزينه ي طراحي وب سايت بسيار مناسب نسبت به ديگر گروه ها و طراحان وب سايت
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : shabnam webdesigna12 بازدید : 68