طراحی وب سایت

ساخت وبلاگ

آخرین مطالب

امکانات وب

رنگ ها و احساس ها

 رنگ ها مي توانند حس هاي زيادي را منتقل کنند در طراحي يک پروژه خيلي مهم است که بدانيد که رنگ ها چه تاثيري مي تواند در انتقال پيغام شما داشته باشند.

 
رنگ ها و احساس ها - webtarget.ir
 
شما حتما در مورد انتخاب رنگ هاي سرد و گرم براي رنگ ديوار اتاق يا هنگام استفاده از تن سايه هاي سرد و گرم در هنگام گريم چهره، شنيده ايد.
 
رنگ هاي گرم و سرد
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ گرم و سرد در واقع به حسي که از ديدن چرخه رنگ به وجود مي آيد گفته مي شود.
 
رنگ هاي گرم شامل رنگ هاي قرمز، زرد نارنجي است . از اين رنگ براي ديوار هاي محيط زندگي و خانه استفاده مي شود يا به عنوان رنگ تاکيد کننده و نمايش بيشتر رنگ هاي خنثي ( سفيد و مشکي) استفاده مي شود
 
رنگ هاي سرد مانند آبي، بنفش و سبز است. يک انتخاب متداول در رنگ آميزي ديوار محل زندگي ، اتاق هاي خواب براي ايجاد احساس آرامش در فضاي خانه به دليل خصوصيت کاربردي بودن آنها مي باشد.
 
از اين رنگ ها براي هدايت احساسات و عواطف در وب سايت استفاده مي شود.
 
رنگ هاي گرم شادابي و راحتي را القا مي کنند.اين رنگ ها باعث مي شوند فضا کوچکتر به نظر برسدزيرا تن رنگ هاي گرم باعث ايجاد حس راحتي در افراد مي شود. رنگ هاي گرم باعث فعال شدن عکس العمل هاي مغز مي شود و احساس هيجان ، عشق و در بعضي مواقع عصبانيت را القا ميکند.
 
در فضا هاي خيلي بزرگ استفاده زياد از رنگ هاي گرم باعث ابهت فضا مي شود و با رنگ هاي خنثي هم تطابق دارد.
 
انتخاب رنگ هاي سرد، جهت آرامش و تسکين ، تا حدي منحصر به فرد است وباعث بزرگ تر به نظر رسيدن فضاي موجود مي شود. ايرادي که به رنگ هاي سرد چرخه رنگ ميگيرند اين است که فضا را سرد تر از آنچه هست نمايش ميدهد و بايد با فضا هاي آزاد منطبق شود.(مثل رنگ هاي سفيد يا خنثي موجود در وب سايت).
 
رنگ هاي سرد باعث ايجاد اثرات منفعل( غير فعال) در مغز مي شود که باعث ايجاد احساس رضايت، آرامش و عدم فعاليت مي شود.
 
قرمز
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
قرمز يکي از سه رنگ اوليه است. يکي از قدرتمند ترين و احساسي ترين رنگ هاست . رنگ قرمز احساس شيريني و بي گناهي را در حين ترکيب با رنگ سفيد و ايجاد رنگ صورتي ميدهد و وقتي به صورت خالص استفاده مي شود تيزي و تندي را القا مي کند. با اضافه شدن رنگ مشکي، قرمز احساسات سنگين تري را بيان مي کند مثلا عصبانيت يا بيان شديد احساسات.
 
قرمز به عنوان رنگ اوليه هم در پس زمينه طرح ها و همبه عنوان رنگ تاکيد، استفاده مي شود . تقريبا در بين رنگ هاي ديگر بهترين رنگ براي تاکيد است.طيف رنگي قرمز مي توانند احساس عشق، هيجان، قدرت و رشد و نمو را القا کند .
 
رنگ ها و احساس ها - webtarget.ir
 
چکيده خصوصيات رنگ قرمز:
 
رنگ قرمز روشن براي بيان عشق و لذت.
قرمز تيره براي بيان حس انتقام جويي، عصبانيت طراحی وب سایت همچنين شجاعت و رهبري را القا مي کند.
صورتي براي ايجاد فضاي رمانتيک و قابليت هاي زنانه.
قرمز- قهوه اي تغيير و سقوط را القا مي کند.
سبز
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ سبز يکي ديگر از رنگ هاي اوليه است .اين رنگ يکي از آرامش بخش ترين رنگ ها است که داراي سايه هاي خنثي است.
 
سبز تعادل و هارموني را القا مي کند و بعضي اوقات براي شرح طبيعت و ايجاد اميد استفاده مي شود. سبز کمي روشن تر ( با مقداري زرد) بيشتر شادي آور و نوراني است و مي توانند کمي هم حس گرمي رنگ را هم منتقل کند. سبز تيره تر ثبات، امنيت و فراواني را القا مي کند .بيشتر ما را به ياد اسکناس و ثروت مي اندازد.
 
در طرح ها از رنگ سبز در زمينه يا به عنوان رنگ تاکيدياستفاده مي شود. اين رنگ يکي از رنگ هاي مناسب براي چشم انسان است .
 
لازم است بدانيد که که بعضي اوقات پيامد ها عاطفي ناخواسته را با رنگ سبز نشان ميدهد مثلا بيماري يا بي تجربگي.
 
چکيده خصوصيات رنگ سبز:
 
زرد- سبز بيماري و اختلاف را القا مي کند.
سبز تيره جاه طلبي، کاميابيرا القا مي کند.
سبز متمايل به آبي سلامتي و ثبات را القا مي کند.
سبز زيتوني نماد صلح و هارمونيرا القا مي کند.
از رنگ آبي هم به عنوان رنگ هاي پيش زمينه و هم رنگ هاي تاکيدي مي توان استفاده کرد و همچنين رنگي است که مردم با آن به راحتي ارتباط برقرار مي کنند و البته مي توانيم بگوييم که اين رنگ، يک رنگ مردانه نيز هست. از آبي تيره تر در رنگ متن استفاده مي شود .
 
از رنگ هاي تيره تر در چرخه رنگ بيشتر براي وب سايت هاي شرکتي استفاده مي شود
 
آبي به آب و آسمان نيز ارتباط دارد که به وب سايت شما حس طبيعت را ميدهد.
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ هاي آبي به ندرت در موضوعات مربوط به مواد غذايي و بسته بندي غذا ها استفاده مي شوند زيرا بعضي از مطالعات نشان داده است که تاثير آرامشي که از اين رنگ گرفته مي شود جلوي اشتهاي افراد را مي گيرد.
 
چکيده خصوصيات رنگ آبي :
 
آبي روشن سلامتي، عمق، ثبات و ايمان را القا ميکند .
آبي تيره تر دانش ، قدرت ، اعتماد و کمال را القا مي کند.
بنفش
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ بنفش ترکيبي از طيف رنگ هاي گرم و سرد يعني عشق و آرامش، رنگ هاي قرمز و آبي مي باشد. بنفش از قديم نماداشراف، قدرت و ثروت است. بنفش همچنين به ترويج حس خلاقيت و قوه تخيل کمک مي کند زيرا اين رنگ غالب در طبيعت نيست
 
از رنگ بنفش استفاده گوناگوني مي شود. سايه هاي سبک، که خيلي نرم و ظريف است مي تواند يک حس رمانتيک ايجاد کند. سايه هاي تيره تر احساس سنگين تر و دمدمي مزاج بودن را القا مي کند و در بعضي مواقع حس بي ثابتي و سر سختي را ميدهد
 
چکيده خصوصيات رنگ بنفش
 
بنفش روشن حس لطافت، حس نوستالژي و رومانتيک را القا مي کند.
بنفش تيره حس دمدمي مزاج بودن، سر سختي ، دلتنگي و نا اميدي و در بعضي مواقع حس قدرت طلبي و نظارت را القا مي کند .
زرد
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
زرد به راحتي، شادي را القا مي کند. اين رنگ با احساس انرژِي زائي و تشويق در ارتباط است. اين رنگ بسيار مهيج است و به همه چيز حس روشنائي و خورشيدي مي دهد. يکي از معايب استفاده از رنگ زرد انتقال حس خطر است.
 
رنگ زرد براي برجسته تر کردن موضوعي يا تاکيد استفاده مي شود اما استفاده تمام طرح از ين رنگبسيار دشوار است زيرا بايد با انتخاب کنتراست هاي موجود دراين رنگ مطمئن شويد که پيغام شما درست منتقل مي شود . در صورتي که اين رنگ در فرمت روشن تر استفاده شود جلوه اوليه خود را دست ميدهد .
 
چکيده خصوصيات رنگ زرد:
 
رنگ زرد روشن براي القاي حس خطر و ترس است.
رنگ زرد تيره تر براي القاي شادي ، لذت و تازگي است.
نارنجي
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
نارنجي يک ترکيب داراي هارموني بين رنگ هاي قرمز و زرد است. يعني ترکيب عشق و انرژي با رنگ اوليه يعني زرد به همراه حس خورشيدي و تازگي آن است.نارنجي به برقراري تعادل، انرژي زا بودن و فراخواني گرايش دارد.
 
اما استفاده از اين رنگ در کار، کمي سخت است . طيف هاي نارنجي بيشتر، در قسمت هاي مهم سايت و به صورت رنگ تائيد کننده استفاده مي شود، اما وقتي به عنوان رنگ غالب از آن استفاده کنيم کمي کار شلوغ به نظر مي رسد.
 
از نارنجي براي نمايش حرکت در طرح استفاده کنيد اما احتياط کنيد نارنجي قدرت غلبه بر عناصر ديگر در طرح را دارد
 
زرد- نارنجي يا نارنجي طلايي حس پرستيژ و خرد را القا مي کند.
قرمز – نارنجي حس لذت، انرژي و سلامتي و آرزو را القا مي کند.
نارنجي تيره به معني تغيير و عدم اطمينان است.
قهوه اي و رنگ هاي خنثي
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ هاي خنثي ( رنگ بژ، شيري، خاکستري مايل به قهوه اي، توسي) و قهوه اي بهترين مثال ممکن از طبيعت هستند که بسيار در طراحي ها استفاده مي شوند. رنگ هاي خنثي و قهوه اي مذمون آرامش و صلح ، سازگاري، اعتبار و حتي حس خستگي را القا مي کنند.
 
رنگ ها و احساس ها - webtarget.ir
 
قهوه اي، کاربرد هاي گوناگوني در طرح دارد مثلا براي پس زمينه طرح، به عنوان رنگ تاکيد کننده وبراي رنگ متون استفاده مي شود. همچنين در ترکيب با رنگ هاي ديگر براي ايجاد افکت هاي زيبا استفاده مي شود.
 
چکيده خصوصيت رنگ قهوه اي
 
قهوه اي خيلي کمرنگ براي القاي آرامش، پاکي، ظرافت است.
قهوه اي کمرنگ ( ميانه) خستگي، کسلي و حفاظت را القا مي کند
قهوه اي تيره استحکام، راحتي و تجربه را القا مي کنند.
سياه و سفيد
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ ها و احساس ها - webtarget.ir
 
رنگ هاي سفيد و سياه خالص ترين شکل رنگ هستند .هر يک معناي سادگي و اداري بودن را ميرساند. تقريبا غير ممکن است که رنگي را بدون استفاده از رنگ هاي سياه و سفيد ايجاد کرد.
 
سفيد معمولا مذمون تميزي، پاکي و کمال را القا مي کند. رنگ مشکي معني قدرت ، رمز آلود بودن و ظرافت را منتقل ميکند. بعضي اوقات معني ترس و نا شناخته بودن را هم ميدهد.
 
رنگ ها و احساس ها - webtarget.ir
 
 
سفيد، تميزي، پاکي و رهايي ر القا مي کند.
سياه، قدرت، ظرافت و رمزآلودگي را القا مي کند.
توسي آرامش و بي تمايلي را القا مي کند.
و در انتها:
 
شما راجع به رنگ ها چه فکر مي کنيد؟ رنگ ها چه حسي را به شما منتقل مي کنند؟آيا در وب سايتهايي که طراحي کرده ايد، حس رنگ ها را در نظر گرفته ايد؟ مثلا طراحي وب سايت براي يک توليد کننده شيرآلات و استفاده از رنگ آبي و سفيد که حس پاکي و طبيعت را منتقل مي کند.
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : hamed webdesign29 بازدید : 78 تاريخ : چهارشنبه 16 مرداد 1392 ساعت: 15:38

طراحی وب سایت

 تاريخچه وب

نويسنده: سولماز اوجاقي 
در اوايل دهه  در موسسه سرن (مركز تحقيقات هسته اى اروپا)، دانشمندى به نام تيم برنرزلى گسترش اتصال درونى رايانه هاى دنيا را مطرح كرد و پيش بينى كرد كه در آينده بتوان به تمام اطلاعات و فايل هاى مرتب مربوط به فيزيك دسترسى يافت.
 
 اولين برنامه كاربردى فرامتن (HyperText) منتشر شد و در مارس برنرزلى به همراه روبرت كايليائو براى شروع كار پروژه اى را ايجاد كرد كه از طريق شبكه رايانه اى طراحی  دستيابى به فرامتن (HyperText) را فراهم مى كرد. پروژه اى به نام «تار عنكبوتى وب» كه شامل شبكه اى از پيوندها بود. در واقع هدف اصلى آن، اشتراك مسائل تحقيقاتى و همكارى ميان فيزيكدانان در نقاط مختلف بود.
 
شبكه وب در ماه مه پس از تحقيقات گسترده با نام وب در سرن منتشر شد و در سال به عموم معرفى گرديد. شبكه جهانى وب يكى از جديدترين خدمات اطلاع رسانى در اينترنت است كه نسبت به ديگر ابزارها و خدمات اينترنت به سرعت در حال رشد و گسترش است و بسيارى از صاحب نظران عقيده دارند كه ظهور شبكه جهانى وب با قابليت ارائه تصاوير گرافيكى رنگى، فيلم، صوت و متن همراه با پيوندهاى فرامتنى مهمترين دليل رشد روزافزون استفاده از اينترنت است، به طورى كه مشتاقان به كارگيرى وب به سرعت در حال افزايش اند.
 
طبق گزارش هاى آمارى در ژوئن سال ???? تنها ??? سايت وب بر روى اينترنت قابل دسترسى بود در حالى كه اين ميزان تا ماه ژوئن سال ???? به بيش از ?? هزار سايت وب رسيد. همچنين طبق برآورد شركت ديناكوئست تا پايان سال ???? بيش از ?? ميليون رايانه به اينترنت متصل شد كه رشدى معادل ?? درصد را نسبت به سال ???? نشان مى دهد.
 
CERN در سال ???? وب را براى استفاده به طور رايگان آزاد اعلام كرد. وب جذب كاربران در خارج از دنياى آموزشى را نيز آغاز كرده است. سازمان سرن، وب را در اختيار علاقه مندان به آن قرار داده است..
 
در ادامه به تحليل روند رشد اينترنت در کل جهان مي پردازيم :
 
به نقل از سايت روابط عمومي
 
 
کاربران اينترنت در جهان را اينگونه معرفي مي نمايد:
آمار کاربران اينترنت در جهان به تفکيک قاره و کشور را از سايت Inteet World Stats ببينيد:
* کل جميعت جهان تا سال 2006 : 6,499,697,060 نفر
* تعداد کاربران اينترنت در سطح جهان : 1,022,863,307 نفر (يعني حدود 15.2 %)
* زبان اول کاربران اينترنت : انگليسي 30.6 %
 
و در ادامه در نمودار زير روند رو به رشد اينترنت را در ايران مشاهده مي کنيد :
 
روند رشد کاربران در ايران 
 وب چيست ؟
نويسنده: سولماز اوجاقي 
گاهي وب را با اينترنت جاي همديگر استفاده مي شود . اينترنت اصطلاحي قديمي تر مي باشد به مفهوم شبکه جهاني دسترسي همگاني مي باشد که قبل از وب براي اتصال تلفن ها و سرورها به کار برده مي شد اما وب شبکه ايي از سرورها و کامپيوتر هاي به هم متصل شده اند که طبق يک سري پروتکل ها يا قرارداد هاي عمومي دسترسي ِ عموم را به صفحات مختلف امکان مي بخشند .
 
وب يا World Wide Web که به اختصار WWW,W3 نيز نامبرده مي شوند ، قسمتي از اينترنت است که محيطي ايجاد مي کند که مي توان به صدا ، تصوير ، انيمشن و متن نيز بهره برد .
وب يکي از خدمات روي اينترنت است مانند پست الکترونيکي . وب مخفف website مي باشد .
 
 
World Wide Web ! 
 
 
پس اينترنت شبکه ايي عظيم از کامپيوترها است که خدماتي روي انها ارائه مي شود که يکي از آنها وب مي باشد که امکان مشاهده صفحات مختلفي را با استانداردهاي مشخص (همچون HTTP ) انجام مي دهد که خدماتي همچون رفتن به صفحات مختلف ديگر ، پست الکترونيکي و .. را براي ما به ارمغان دارد . 
خدمات ديگر روي اينترنت که اينجا تنها به آنها اشاره مي شود ، همچون Telnet, gopher, FTP که جاي مناسب به آنها نيز خواهيم پرداخت .
اصطلاح ديگري که شايد با آن برخورد کنيد ، سرويس‌گيرنده / سرويس‌دهنده (Client / Server) مي باشد.
در اينترنت به طور کلّي مي‌توان همه? رايانه‌ها را به دو دسته تقسيم کرد. سرويس‌گيرنده / سرويس‌دهنده (Client / Server).
سرويس‌دهندگان، خدماتي را (مانند وب و FTP) براي سايرين فراهم مي‌کنند و سرويس‌گيرندگان، نيز براي دست‌يابي به اين خدمات، به سرويس‌دهندگان وصل مي‌شوند. 
يک رايانه? سرويس‌دهنده مي‌تواند چند سرويس را فراهم کند. براي مثال روي يک سرويس‌دهنده، يک نرم‌افزار وب سرور و ميل سرور نصب کنيم.
 
 
• وب، نه اينترنت
امروزه كاربران كامپيوتر سراسر جهان به استفاده از وب و اطلاعات گرافيكى آن گرايش دارند. از اين روى، اكثر رسانه ها، اكثر كاربران كامپيوتر، و حتى بسيارى از مشاغل وصل-خط از اصطلاح «وب جهان پهنا» و «اينترنت» به يك معنى استفاده مى كنند.
 
اما وب فقط بخشى از اينترنت بزرگ است. چون اينترنت شامل Telnet،FTPو حوزه هاى ديگر و همچنين كابل ها، كامپيوترها، و سيم هاى خود شبكه نيز مى شود. وب در بالاى اينترنت قرار دارد و در واقع رابط اينترنت است. يك قرارداد مخصوص اينترنت قرارداد يا پروتكل HTTP، است و اين پروتكل است كه استفاده از وب را در اينترنت ممكن مى ند. مهمترين هدف اينترنت آن است كه كاربران بتوانند از اطلاعات ذخيره شده در كامپيوتر كاربر ديگر بهره بگيرند. وب يك روش جذاب براى بهره گيرى از اطلاعات ذخيره شده در كامپيوترهاى خدمات دهنده (Server) پراكنده شده در اينترنت است.
خدمات دهنده هاى FTP، Telnet و ساير خدمات دهنده ها هستند. در واقع، بعضى از شركت ها از يك كامپيوتر براى چند پروتكل مبادله داده هاى مختلف بهره مى گيرند. تنها اختلاف بين خدمات دهنده FTP و خدمات دهنده وب در نرم افزار سازگار با HTTP است كه مى تواند اطلاعات را با برنامه مرورگر مبادله كند.
بسيارى از خدمات دهنده هاى وب رده پايين از انواع پى سى هاى مبتنى بر پردازنده هاى اينتل هستند، در حالى كه خدمات دهنده هاى رده متوسط اغلب كامپيوترهاى قدرتمند هستند. خدمات دهنده هاى وب رده بالا معمولاً كامپيوترهاى يونيكس هستند و مى توانند مقدار انبوهى از ترافيك مرتبط با وب را اداره كنند.
خدمات دهنده هاى وب و مرورگرهاى وب با استفاده از HTTP با يكديگر ارتباط برقرار مى كنند تا بتوانند داده هاى وب را كه خود به زبان HTML نوشته شده اند  طراحی  مبادله كنند. برنامه مرورگر مى تواند قطعات نوشته شده به اين زبان را تفسير كند و بعد صفحه مرتبط با آن را به نمايش درآورد. رمز وب، در فراپيوندهاى موجود در دل كدهاى HTML است. بنيان وب بر فلسفه فراپيوندها استوار است. هر كلمه يا تصويرى در هر صفحه وب مى تواند يك رابط به يك سند ديگر باشد. دسترسى به اطلاعات در FTP يا Telnetيا هر دو پروتكل مبادله اطلاعات ديگر اينترنت به اين سادگى نيست.
وب يك برنامه در حال تغيير و تكامل است و از نقش اوليه خود در ارتباطات دانشگاهى پا فراتر نهاده و براى نشر انواع اطلاعات به شكل جالب توجه براى مخاطبان اينترنت، در نظر گرفته شده است. براى كاربران جديد اينترنت، وب يك رابط چندمنظوره برنامه هاى كاربردى شبكه است كه مرز ميان آنها را پنهان ساخته است. رشد و گسترش كاربرد وب به دليل قابل استفاده بودن در محيط چند رسانه اى همچنان ادامه دارد.
 
 
 
 
شبکه اي از کامپيوتر ها 
 آشنايي اوليه با دنياي اينترنت
نويسنده: سولماز اوجاقي 
چگونه تعريف کردن اين موضوع ِ به ظاهر بسيار واضح و ساده و در عين حال پشت صحنه ايي پر از عوامل پشت صحنه ، مدتي ذهن مرا مشغول کرده بود تا براي شما عزيزان به چه روش و سياقي اين موضوع را توضيح دهم .
 
فکر مي کنم که اول بايد يک ذهنيت در ذهن خواننده ايجاد کنم تا بعد به توضيحات ِ کامل بپردازم از جمله : وب چيست؟ تاريحچه وب به چه ترتيبي مي باشد ؟ ورود وب در ايران و تاثيرات آن ...
 
در اول امر خوب است بدانيد که هدف ، ايجاد ارتباط  طراحی کامپيوترها براي دسترسي به اطلاعات دانشگاهي بوده است. پس در وب ، در ايتداي امر ، ايجاد يک شبکه يا اتصالي بين کامپيوتر بوده است تا به هدف مورد نظر برسيم .
 
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hamed webdesign29 بازدید : 110 تاريخ : يکشنبه 30 تير 1392 ساعت: 16:40

webdesign

 

اين ماجرا با وجودي که بخشي از حقايق به‌وجود آمدن اينترنت را بيان مي‌کند اما نمي‌تواند تمام واقعيات مربوط به آن را تشريح کند. بايد بگوييم افراد مختلفي در طراحی وب سایت  تشکيل اينترنت سهم داشته‌اند آقاي “Paul Baran” يکي از مهمترين آنهاست. آقاي باران که در دوران جنگ سرد زندگي مي‌کرد مي‌دانست که شبکه سراسري تلفن آمريکا توانايي مقابله با حمله اتمي شوروي سابق را ندارد. مثلا اگر رييس جمهور وقت آمريکا حمله اتمي متقابل را دستور دهد، بايد از يک شبکه تلفني استفاده مي‌کرد که قبلا توسط روس‌ها منهدم شده بود. در نتيجه طرح يک سيستم مقاوم در مقابل حمله اتمي روس‌ها ريخته شد.آقاي باران (Baran) تشکيل و تکامل اينترنت را به ساخت يک کليسا تشبيه کرد و معتقد بود، طي سال‌هاي اخير هر کس سنگي به پايه‌ها و سنگ‌هاي قبلي بنا اضافه مي‌کند و انجام هر کاري وابسته به کارهاي انجام شده قبلي است. بنابراين نمي‌توان گفت، کدام بخش از کار مهمترين بخش کار بوده‌است و در کل پيدايش اينترنت نتيجه کار و تلاش گروه کثيري از دانشمندان است. داستان پيدايش اينترنت با افسانه و واقعيت در هم آميخته شده‌است.
در اوايل دهه ?? ميلادي آقاي باران طي مقالاتي پايه کار اينترنت امروزي را ريخت. اطلاعات و داده‌ها به صورت قطعات و بسته‌هاي کوچکتري تقسيم و هر بسته با آدرسي که به آن اختصاص داده مي‌شود به مقصد خاص خود فرستاده مي‌شود. به اين ترتيب بسته‌ها مانند نامه‌هاي پستي مي‌توانند از هر مسيري به مقصد برسند. زيرا آنها شامل آدرس فرستنده و گيرنده هستند و در مقصد بسته‌ها مجددا يکپارچه مي‌شوند و به صورت يک اطلاعات کامل درمي‌آيند.
آقاي باران (Baran) طي مقالاتي اينچنيني ساختمان و ساختار اينترنت را پيش‌گويي کرد. او از کار سلول‌هاي مغزي انسان به عنوان الگو استفاده کرد، او معتقد بود: وقتي سلول‌هاي مغزي از بين بروند، شبکه عصبي از آنها ديگر استفاده نمي‌کند و مسير ديگري را در مغز انتخاب مي‌کند. از ديدگاه وي اين امکان وجود دارد که شبکه‌اي با تعداد زيادي اتصالات براي تکرار ايجاد شوند تا در صورت نابودي بخشي از آن، همچنان به صورت مجموعه‌اي به هم پيوسته کار کند. تا نيمه دهه ?? ميلادي کسي به نظرات او توجه‌اي نکرد. تا اينکه در سال ???? نيروي هوايي آمريکا و«آزمايشگاه‌هاي بل» به نظرات او علاقه‌مند شدند و پنتاگون با سرمايه‌گذاري در طراحي و ساخت شبکه‌اي براساس نظريات او موافقت کرد.
ولي آقاي باران (Baran) بنابر دلايلي حاضر با همکاري با نيروي هوايي آمريکا نشد. در اين ميان دانشمندي با نام تيلور (Tailon) وارد موسسه آرپا (ARPA) شد. او مستقيما به آقاي هرتسفلد رييس موسسه پيشنهاد کرد: (ARPA) آرپا هزينه ايجاد يک شبکه آزمايشي کوچک با حداقل چهار گره را تامين کند که بودجه آن بالغ بر يک ميليون دلار مي‌شد. با اين پيشنهاد تيلور تجربه‌اي را آغاز کرد که منجر به پيدايش اينترنت امروزي شد. او موفق شد در سال ????، دو کامپيوتر را در شرق و غرب آمريکا به هم متصل کند. با اين اتصال انقلابي در نحوه صدور اطلاعات در دنياي ارتباطات رخ داد که نتيجه آن را امروز همگي شاهد هستيم. اين شبکه به بسته‌هايي (packet) از داده‌ها که به وسيله کامپيوترهاي مختلف ارسال مي‌شدند اتکا داشت. پس از انکه ازمايشها سودمندي انرا مشخص کردند ساير بخش‌هاي دولتي و دانشگاهها پژوهشي تمايل خود را به وصل شدن به ان اعلام کردند . ارتباطات الکترونيکي به صورت روشي موثر براي دانشمندان و ديگران به منظور استفاده مشترک از داده‌ها در امد. در همان زمان که ARPAnet در حال رشد بود تعدادي شبکه پوشش محلي (LAN) در نقاط مختلف آمريکا به وجود امد. مديران LANها نيز به وصل کردن کامپيوترهاي شبکه‌هاي خود به شبکه‌هاي بزرگتر اقدام کردند . پروتوکل اينترنت ARPAnet IP زبان استاندارد حکمفرما براي برقراري ارتباط کامپيوترهاي شبکه‌هاي مختلف به يکديگر شد.تاريخ تولد اينترنت به طور رسمي اول سپتامبر ???? اعلام شده‌است. زيرا که اولين “IMP” در دانشگاه “UCLA” واقع در سانتاباربارا در اين تاريخ بارگذاري شده‌است.
از اوايل دهه ???? رشد استفاده از اينترنت به صورت تصاعدي افزايش يافت . يکي از علل چنين استقبالي ابزار جستجويي مانند Gopher و archie بوده‌است اما اينها در سال ???? تحت تاثير word wide web قرار گرفتند که به وسيله CERN يا ازمايشگاه فيزيک هسته‌اي اروپا ساخته شد . با ان که اينترنت از ابتدا طوري بود که مبادله اطلاعات براي تازه واردان بسيار ساده باشد. بزرگترين جهش در وب در سال ???? با عرضه نرم‌افزار موزاييک mosaic که نخستين برنامه مرورگر وب گرافيکي بود به وجود امد. برنامه موزاييک محصول تلاش دانشجويان و استادان بخش "مرکز ملي کاربردهاي ابر کامپيوتر " در دانشگاه ايلينويز آمريکا بود. براي نخستين بار موزاييک امکانات اشاره و کليک (به وسيله موش) را فراهم کرد. کاربران مي‌توانستند صفحات وب (web page) يا مجموعه‌اي از متن و گرافيک را کنار هم بگذارند تا هر کسي که ميخواست انها را بتواند روي اينترنت ببيند. وقتي با موش روي کلمه‌ها يا تصاوير خاصي که hyper link ناميده مي‌شد کليک مي‌کردند برنامه موزاييک به طور خود کار يک صفحه ديگر باز مي‌کرد که به کلمه يا تصوير خاص و کليک شده اختصاص داشت. بهترين بخش اين سيستم انجا بود که hyper linkها مي‌توانستند به صفحاتي روي همان کامپيوتر يا هر کامپيوتر ديگر اينترنت با خدمات وب اشاره کنند. صفحات وب هر روز متولد مي‌شدند و مفهوم موج سواري يا surfing روي وب متولد شد. اواسط سال ???? سه ميليون کامپيوتر به اينترنت وصل شده بود و در ان هنگام اجراي عمليات اهسته نشده بود. صفحات جديد وب که شامل همه چيز از اسناد دولتي تا مدارک شرکت‌ها و مدل‌هاي جديد لباس بود در سراسر دنيا چندين برابر شد . موزاييک و جانشينان ان مانند navigator محصول شرکت " نت اسکيپ " اينترنت را از قلمرو علمي به ميان مردم اوردند. طبق اخرين امار ?? درصد کاربران بعد از سال ???? وارد اين محيط شده‌اند. ميليون‌ها انساني که از اينترنت استفاده مي‌کنند نيازي ندارند که نکات فني مانند TCP/IP را بدانند . امروزه شرکتهاي خدمات دهنده اينترنت يا ISP اين کار را به عهده دارند.رشد روز افزون ان و ساده تر شدن استفاده ان همچنان ادامه دارد . هر چه تعداد مردم بيشتري به اينترنت رجوع کنند تعداد شرکت‌هاي سازنده برنامه‌هاي اينترنت بيشتر مي‌شود.با انکه بعضي از عاشقان اينترنت ان را نوعي شيوه زندگي مي‌دانند. در نظر بيشتر کاربران منبع سرگرمي اطلاعات است ولي بيشترين مصرف ان پست الکترونيکي يا همان email است که يکي از ابزارهاي ارتباطي کار امد به شمار مي‌رود. پيامها از کامپيوتري به کامپيوتر ديگر با سرعت پرواز مي‌کنند و منتظر ميمانند تا شخص فرصت خواندن انها را پيدا کند . وب امکانات خوبي براي کپي از نرم‌افزارهاي مجاز از لحاظ کپي فراهم ميسازد. وقتي که مي‌بينيم که در مدت کوتاهي اينترنت به چنين رشدي نايل آمده است، مطمئنا دشوار خواهد بود که آينده او را پيش بيني کنيم. طبق نظر کارشناسان ماهانه ?? درصد به تعداد کاربران اينترنت افزوده مي‌شود ولي تعداد دقيق کاربران که روزانه از آن استفاده مي‌کنند مشخص نيست. هرچند که پاره‌اي از کارشناسان تعداد آنها را تا ??? ميليون نفر حدس مي‌زنند. تعداد رسمي کاربران اينترنتي را در سال ???? کارشناسان ??? ميليون نفر اعلام کرده بودند. طراحی وب سایت 
قطعا در سال‌هاي آينده تحولات شگرفي را در زمينه شبکه‌هاي اينترنتي شاهد خواهيم بود. به‌وسيله اينترنت انسان به راه‌هاي جديدي دست پيدا کرد. در کنار اين شانس جديد توسط اينترنت، بايد بگوييم خطراتي نيز در رابطه با سياست و اقتصاد و علم به دنبال خواهد داشت. فرم امروزي اينترنت مديون همکاري تمام کاربران اينترنت در سرتاسر گيتي است که با اين تصور که اطلاعات موجود در سطح جهان را به راحتي با يکديگر مبادله کنند. اين تصوري بود که آقاي باران(Baran) از اينترنت داشت و اميدواريم در آينده نيز تکامل اينترنت در اين مسير باشد.
 
 
ترسيمي از وب‌گاه‌هايي که تنها ??????? از فضاي WWWشبکه جهاني اينترنت را به خود اختصاص داده‌اند ولي اکثر ترافيک کل شبکه اينترنت را در خود جاي داده‌اند.
يکي از پرسرعت ترين اينترنت ها فن آوا ميباشد fanava.ir
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hamed webdesign29 بازدید : 94 تاريخ : يکشنبه 23 تير 1392 ساعت: 14:28

طراحی وب سایت

 { آموزش طراحي وب سايت از پايه - قسمت چهاردهم  }

 
سلام مجدد خدمت تمامي خوانندگان وب سايت عصر نوشتن، با قسمت چهاردهم آموزش طراحي وب سايت از پايه در خدمتتون هستيم.
در اين جلسه به معرفي خصوصيتي مي پردازيم که از طريق آن مي توانيد عناصر صفحه را در هر جايي که مي خواهيد قرار دهيد
 
 
 
تعيين موقعيت عناصر در هر جايي از صفحه که شما دوست داريد:
 
همواره بدون هيچ گونه مداخله اي از سوي يک مرورگر وب، تمامي عناصري که درون يک صفحه سايت قرار دارند به همان ترتيب نمايش داده مي شوند، بنابراين اگر در تگ هدر، منوي راهبري قرار داشته باشد و در سر تيتر دوم، سه پاراگراف قرار دهيم در زمان نمايش در مرورگر خواهيد ديد که نحوه نمايش آنها به همان ترتيبي است که درون سورس قرار دارد و تا اينجاي کار نحوه سايت زدن ما به همين نحوي بوده است که در اينجا توضيح داديم، اما در اين بخش از آموزش مي خواهم شما را با برخي از قدرت هاي واقعي css و تاثيراتي که مي تواند بر روي سورس مان داشته باشد آشنا کنم. در اين قسمت شما خواهيد آموخت که چطور مي توانيد براي عنصرخاصي در صفحه مشخص کنيد که به طور صريح در کدام قسمت از محتواي سايت نمايش يابد بي آنکه به ترتيب قرار گرفتن عناصر درون صفحه توجه کنيد.
 
نمايش ساختار:
زمانيکه از css براي استايل دهي به سايت هاي خود استفاده مي کنيد براي هر قسمت از سايت خود يک Border در نظر بگيريد به اين ترتيب به خودتان کمک مي کنيد تا به راحتي براي آن قسمت خاص استايل هاي مد نظرتان را بيافزايد وتاثير آن را مشاهده نماييد، تنها بايد به خاطر داشته باشيد که پس از اينکه کارتان با آن قسمت تمام شد(css موقتي)border اي را که افزوده ايد حذف نماييد. بياييد براي خود قسمتي از سايت را ياد آوري کنيم:
 
<!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>Contact Us at Bubble Under</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
<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>
<div id="bodycontent">
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email <a
</div><!-- end of bodycontent div -->
</body>
</html>
 
 
حالا بياييد به فايل css خود يک borderبه هر يک از عناصر خود در صفحه اضافه کنيم. اين استايل را در انتهاي فايل css خود درج نماييد، بنابراين باعث مي شود تا براي تمامي عناصر سايت خود بردر را بکار ببريد و عنصري از قلم نيفتد و چنانچه عنصري داراي بردر است اين خصيصه برايش تکرار خواهد شد.
 
#header, #sitebranding, #tagline, #navigation, #bodycontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
 
در اينجا من براي عناصر از پدينگ و مارجين پايين استفاده کرده ام تا ديدن عناصر درون هر قسمت از اين بردر ها را براي خود آسان نماييم. تصوير ايجاد شده را مي توانيد در عکس پايين ملاحظه بفرماييد.
 
اين تصوير کمي زشت به نظر مي رسد، درسته؟ اين تصوير حتي براي مدت کوتاهي زشت تر هم خواهد شد زمانيکه ما متن بخش درباره ما را جابجا مي کنيم. همانطور که شما هم مي دانيد زمانيکه ميخواهيد دکوراسون منزل خود را تغيير دهيد تمامي لوازم منزل خود را جا بجا مي کنيد و جاي اصلي آنها را تغيير مي دهيد
موقعيت دهي مطلق( absolute) :
 
شايد به جرات بتوان گفت که راحت ترين روش براي موقعيت دهي به عناصر استفاده از موقعيت دهي مطلق براي عناصر است. در هنگام استفاده از موقعيت دهي مطلق مي بايست موقعيت آن عنصر را از بالا و چپ صفحه نيز معين کنيم. تصور کنيد از يک مغازه جواهر فروشي مي خواهيد خريد کنيد و آدرس يک قطعه طلا را مي خواهيد به شخص فروشنده بدهيد، مي گوييد  در مثال زير، ما موقعيت هاي top و left را براي يک div با عرض 90px در نظر گرفته ايم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان به ميزان px200 فاصله ايجاد کرده ايم.
 
<!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>Absolute Positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id="redblock">This is the red block.</div>
<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>
</body>
</html>
 
آماده شدن براي جابجايي عنصر با استفاده از موقعيت دهي:
 
در اين قسمت به موقعيت دهي مطلق به عناصر و با توجه به فاصله آنها از بالا و چپ نسبت به پنجره مرورگر شروع مي کنيم. به همين دليل مي بايست ابتدا زماني را در نظر بگيريد و استايل هاي موقتي را که داده ايد حذف کنيد. در نتيجه ما نيز استايل هاي پدينگ و بردر داده شده را که به عنصر body مان داده بوديم پاک مي کنيم.
 
- فايل style. css را باز کردهو پدينگ و بردر داده شده به عناصر Body را پاک کنيد.
- در عوض به جاي آن، دو خصيصه padding و margin را نوشته و مقادير آنها را برابر با صفر قرار دهيد.
استايل هاي بکار برده شده براي عناصر body شما در فايل css مي بايست مانند زير باشد:
 
body {
background-color: #e2edff;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}
 
حالا مرورگر خود را refresh نماييد آنچه که ملاحظه مي نماييد مي بايست همانند تصوير زير باشد:
 
 
 
 
تگ هاي سر تيتر درون صفحه يعني BubbleUnder.com و About Us به وسيله مارجين احاطه شده اند. که اين مارجين توسط مرورگر به آنها داده شده حتي اگر ما خودمان به آنها مارجين ندهيم. ايده خوبي است که بياييم و اين مارجين ها را از بين ببريم وسعي کنيم تا تيترها تا آنجايي که امکان دارد به گوشه بالا و سمت چپ div دربرگيرنده آن نزديک شوند. اين امر باعث مي شود تا موقعيت دهي به تيتر ها براي ما راحتتر شده و همچنين مطمئن مي شويم که صفحه وب ما درون تمامي مرورگر ها به صورت يکسان نمايش مي يابد.
 
- در فايل style.css تگ h1 را بيابيد.
- خصوصيت جديدي به آن اضافه نماييد و مقدار مارجين آن را برابر با صفر قرار دهيد.
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
 
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}
 
 
صفحه سايت خود را refresh نماييد. فواصلي که قبل و بعد از تيترهاي ذکر شده در تصوير بالا گفته شد مي بايست از بين رفته شده باشد و تصويري همانند شکل زير را مشاهده نماييد.
 
خوب حالا در اين مرحله سايت شما از هر زمان ديگري زشت تر خواهد شد اما مهم نيست و نبايد نگران باشيد چرا که اين امر موقت است و تنها بايد توجه داشته باشيد که براي اينکه به راحتي جابجا شدن عناصري از صفحه را که مي خواهيد و به صورت مطلق جاي آنها را درون صفحه معين کنيد را مشاهده نماييد به آنها Border اي با رنگ قرمز بدهيد تا جابجايي آنها برايتان مشخص باشد. سپس به انتهاي فايل css خود خصوصيت جديد زير را اضافه نماييد.
#navigation, #bodycontent, #header {
position: absolute;
}
حالا فايل css را ذخيره کرده و مجددا صفحه سايت را refresh نماييد.
• به هيچ وجه از به هم ريختگي سايت خود نگران نشويد !
 
حتما الان از به هم ريختگي سايت خود ناراحت هستيد و با خود مي گوييد که آيا هر بار که مي خواهيد از موقعيت دهي مطلق استفاده نماييد با همچين صحنه اي روبرو خواهيد شد؟! بسياري از طراحان وب سايت براي هر عنصري از سايت که مي خواهند از موقعيت دهي مطلق استفاده کنند از همان ابتدا فاصله آن را از بالا و سمت چپ پنجره مشخص مي نمايند تا آن عنصر سر جاي خود قرار گيرد و با تصويري مانند آنچه که شما با آن مواجه شده ايد را برخورد نکنند، اين کار تنها با تمرين امکان پذير است و به نظر من اهميت کار در اينجاست که شما با اين روند به طور کامل آشنا شويد.
 
 
همانطور که ميبينيد هر سه قسمتي که مقدار مطلق گرفته اند در گوشه چپ و بالاي سايت بر روي يکديگر افتاده اند، چون ما به مرورگر براي هر يک از آنها مقدار مجزايي نداده ايم و بنابراين مرورگر تنها آنها را همانطور که در سورس مقدار دهي شده اند نمايش مي دهد. تنها مي داند که آنها به طور مطلق مقدار دهي شده اند و اينکه موقعيت هر يک از آنها کجاست را نمي داند.
پس بياييد با جابجا کردن محتواي اصلي سايت و منوي راهبري به سمت پايين محتواي تگ Header را ببينيد. در فايل css خود دستور زير را اضافه کنيد:
#navigation, #bodycontent {
top: 120px;
}
 به همين دليل به عنصر bodycontent به اندازه px200 از سمت چپ فاصله مي دهيم تا از منوي راهبري که پهنايي برابر با 180px دارد فاصله گرفته و در کنار آن قرار گيرد.
 
 
پس با توجه به توضيحات داده شده آنچه که مي بايست به css خود اضافه کنيد تا ظاهر سايت درست شود، بدين صورت است:
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 200px;
}
 
براي اينکه طراحي صفحه سايت ما تمام شود همچنان کمي کار لازم است تا انجام شود:
 
- محدوده header و tagline تا انتهاي سطر ادامه ندارند.
- بين tagline و h1 فاصله بيهوده اي وجود دارد.
- پدينگ و بردر هاي قرمز داده شده به عناصر را مي بايست حذف کنيم.
- يک يا دو کامنت مي بايست به css مان اضافه کنيم تا توضيح بدهيم که در اين قسمت چه کاري انجام داده ايم.
 
خوب حالا شروع مي کنيم به ايجاد تغييرات گفته شده در بالا تا طرح نهايي اين صفحه از سايتمان ساخته شود.
 
-  تگ body و منوي راهبري را از بالا به جاي px120 به ميزان 107px فاصله دهيد . اين کار باعث مي شود تا پس از حذف کردن بردر هاي قرمز فاصله ميان تگ ها مناسب باشد.
- سپس به مرورگر ، تگ headerو tagline بگوييد تا سطر را به طور کامل اشغال کنند.(اين کار با اجراي دستور width براربر با 100% عملي خواهد شد.)
- بردرهاي قرمز رنگي را که پيش تر ايجاد کرده بوديم را حذف مي کنيم.
- در نهايت فکر خوبيست تا براي تمامي عناصري که موقعيت مطلق داده ايم کامنتي براي توضيح بنويسيم تا بدانيد که چکاري انجام داده ايد.
 
به اين ترتيب آنچه که با توضيحات بالا براي ايجاد تغيير در فايل css خود ايجاد کرده ايم، به صورت زير خواهد بود:
 
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
from the top-left coer of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent
left: 200px;
}
#header {
width: 100%;
}
 
به اين صورت سوال مطرح شده اين است که اين تغييرات وب سايت ما را به چه شکلي در مي آورد؟ صفحه ساخته شده وب شما نيز بايد همانند تصوير زير باشد:
 
 
 
 
تقريبا مي توان گفت که ظاهر سايت عالي شده است اما يک کار کوچک ديگر نيز مي توان انجام داد تا ديگر طراحي سايت ما عالي به نظر برسد. به تگ Header يک بردر از بالا با ضخامت 3px بدهيد. براي منوي راهبري از همان رنگ آبي اي که براي tagline استفاده کرده ايد و بياييد تا بردر نقطه چين دور منوي راهبري را حذف کنيم. دستورات تغييرات گفته شده نيز بدين صورت خواهد بود:
#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}
 
اينک فايل css خود را ذخيره کرده و مرورگر خود را refresh نماييد. تصوير نهايي به اين صورت خواهد بود:
 
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hamed webdesign29 بازدید : 119 تاريخ : چهارشنبه 19 تير 1392 ساعت: 15:12

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

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

طراحی وب سایت 

 
تا اين لحظه ساختار پايه اي وب سايت و تگ هاي html  و  body  و p  براي پاراگراف وh براي هدر ها  را شناختيم و با آن ها کار کرديم و در اين قسمت يک ساختار طلائي به نام div را معرفي مي نماييم.
 
div يک تگ بلاک است و به همراه تگ span  بيشترين استفاده در صفحات استاندارد وب سايت را دارد .
اين تگ معمولا براي قرار دادن گروهي از عناصر داخل آن مورد استفاده قرار مي گيرد و داخل آن مي توان از عناصر ديگر مانند h1 , img , a , p  و غيره استفاده کرد.
اين تگ هيچ استايلي از جمله margin  و padding ندارد و براي شکل دادن به ظاهر آن از دستورات css استفاده مي کنيم.
 
به مثال زير دقت نماييد :
 
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is yet another paragraph.</p>
    <p>And just one more paragraph.</p>
    <div>This is a div.</div>
    <div>The content of each div appears on a new line.</div>
    <div>But unlike paragraphs, there is no additional padding.</div>
    <div>A div is a generic block-level container.</div>
 
نکته نويسنده مقاله: بر خلاف تمامي آموزش هاي ديگر در اين جا ابتدا تگ div تدريس مي شود و سپس سراغ تگ  table يا همان جدول مي رويم .
 
به شکل زير دقت کنيد :
 
design-web-46.jpg
 
در اين مثال ما صفحه را به قسمت هاي متفاوتي تقسيم کرديم  بالا براي بنر و سمت راست براي منو هاي سايت و سمت چپ براي قسمت اصلي سايت.
دقت کنيد که شما داخل تگ div  مي توانيد تمامي عناصر مانند p , h1 , ul , a , img را قرار دهيد ولي به طور مثال نمي توانيد تگ div را داخل p   قرار دهيد .
با بررسي مثال زير و نکات آن مي توانيد تجربه خوبي کسب کنيد :
 
در اين مثال ما صفحه را به 2 قسمت header  و content body  تقسيم کرده ايم . در قسمت header از 2 تگ h1 و p استفاده کرده ايم و در قسمت body content  از تگ هاي بسيار زيادي استفاده کرده ايم .
 
در زير کد هدر نمايش داده شده است :
 
    <div id="header">
    <h1>BubbleUnder.com</h1>
    <p>Diving club for the south-west UK - let's make a splash!</p>
    </div>
 
 
design-web-47.gif
 
در اين مثال علاوه بر توضيح تقسيم بندي سايت  با تگ div  ، استفاده از  attribute  بسيار مهم id  هم توضيح داده مي شود .
 
Id و قوانين آن:
 
•    معمولا از id براي تفکيک گروه هاي بزرگ مانند 2 مثال قبل استفاده مي شود
•    يک نام id  فقط يک بار در صفحه قابل استفاده است
•    Id يک attribute است و header  يک value براي آن طبق اين قانون :     attribute="value"
•    نام attribute  بايد با حروف کوچک باشد مانند  id , class و غيره و value آن داخل ""
 
تگ هاي تو در تو (nesting tag) :
 
در مطالب گذشته گفتيم که در تگ div  مي تواند تگ هاي ديگري همچون p , ul  و غيره قرار گيرد در حالي که خود تگ div ميتواند در داخل تگ div  ديگري قرار گيرد که به اين نوع تگ هاي تو در تو گفته مي شود .
 
در بسياري موارد در طراحي هاي حرفه اي مجبوريم که از تگ هاي تو در تو استفاده کنيم و اين روش نظم خاصي به کار  طراحي شما  مي بخشد .
 
کد زير مي تواند شما را بيشتر با تگ هاي تو در تو آشنا کند :
 
    <div id="outer">
      <div id="nested1">
          <p>A paragraph inside the first nested div.</p>
      </div>
      <div id="nested2">
          <p>A paragraph inside the second nested div.</p>
      </div>
    </div>
 
 
در استفاده از تگ هاي تو در تو بايد به قانوني به نام Indenting Markup توجه کرد که شرح مي دهد تگ هاي داخلي را کمي جلوتر از سمت چپ نسبت به والد خود باز کرده و در همان راستا ببنديد . همان طوري که مي بينيد تگ div  با id  مشخص nested1 کمي با فاصله بيشتر از چپ نسبت به والد خود يعني تگ div با  id مشخص outer باز شده است.
نکته ديگري که مي بايست براي خوانايي بيشتر در استفاده از تگ هاي تو در تو دقت نماييد استفاده از کامنت گذاري است که در قسمت هاي قبل توضيح داده شد .
 
        </div> <!-- end of inner div -->
      </div> <!-- end of nested div -->
    </div> <!-- end of outer div -->
 
براي تمرين اين قسمت از آموزش، شماي تگ هاي صفحه
فراموش نکنيد هنوز وب سايت شما ظاهر مناسبي ندارد براي شکل دادن به وب سايت خود بايد از css استفاده نماييد که در قسمت هاي بعدي توضيح داده خواهد شد .
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hamed webdesign29 بازدید : 100 تاريخ : يکشنبه 16 تير 1392 ساعت: 12:53

نوشتن متن ها به صورت مورب

 نوشتن متن ها به صورت ضخيم، مورب، زير خط دار و خط خورده

در اين درس به کار با متنها مي پردازيم. ابتدا با اين تگ شروع مي کنيم:
1-    <B> اين تگ باعث مي شود کلماتي که بين اين تگ و تگ پاياني آن قرار دارند به صورت پر رنگ و بولد (Bold) ديده شوند. به مثال زير توجه کنيد:
 
<b>متني که اينجا قرار بگيرد به صورت بولد نمايش داده مي شود</b>
مثال بالا به صورت زير ديده مي شود:
 
متني که اينجا قرار بگيرد به صورت بولد نمايش داده مي شود
 
بياييد با تگهاي ديگري ادامه دهيم:
 
2-    زيرخط (Underline):
 
<u>اين متن با زير خط مشاهده مي شود</u>
اين هم نتيجه:
 
اين متن با زير خط مشاهده مي شود
 
3-    حروف کج (Italic):
 
<i>اين متن به صورت مورب ديده مي شود</i>
و نتيجه به اين صورت است:
 
اين متن به صورت مورب ديده مي شود
 
4-    حروف خط خورده:
 
<strike>اين متن به صورت خط خورده ديده مي شود</strike>
متن در مرورگر به اين صورت ديده مي شود:
 
اين متن به صورت خط خورده ديده مي شود
 
5-    وسط چين:
 
<center>اين متن در وسط خط نوشته مي شود</center>
نتيجه کد:
 
اين متن در وسط خط نوشته مي شود
 
شما مي توانيد بيشتر از يک فرمان را براي يک متن اجرا کنيد. مثلاً وقتي که مي خواهيد متني به صورت پر رنگ و کج نوشته شود. براي اين کار هر دو تگ ابتدايي را براي متن در ابتداي آن و تگهاي پاياني را در جايي که مي خواهيم پايان پر رنگي و کجي متن باشد قرار مي دهيم.
 
با اين مثال توجه کنيد:
 
<b><i>اين متن به صورت کج و پر رنگ ديده مي شود</i></b>
نتيجه هم به اين صورت ديده مي شود:
 
اين متن به صورت کج و پر رنگ ديده مي شود
 
آيا ترتيب قرار گرفتن تگهاي پاياني مهم است؟ در پاسخ بايد گفت در مثال بالا خير، اما مواردي وجود دارد که ترتيب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پاياني <HTML/> قبل از <BODY/> اشتباه است. شما با تمرين و تجربه مي توانيد اين نکته را فرا بگيريد. شما مي توانيد براي جلو گير از اشتباه HTML را به صورت زير بنويسيد:
<b>
       <i>
            اين متن به صورت پر رنگ و کج ديده مي شود
        </i>
</b>
اما اين روش خسته کننده است. در اينجا مهم نيست تگها به چه صورت باز و بسته شوند. اما نکته مهمي که بايد در نظر داشته باشيد اين است که متنها تحت تأثير تگهايي که قبل از آنها باز شدهاند و بسته نشده اند قرار مي گيرند. تأثير يک تگ تمام مي شود وقتي که تگ بسته شود.
 
مثال زير را در نظر داشته باشيد:
 
<b><i><u>اين متن پر رنگ، کج و داراي زيرخط است</u></i></b>
اين نتيجه را به ما مي دهد:
 
اين متن پر رنگ، کج و داراي زيرخط است
 
اما اين يکي:
 
 
<center><b><i>به اين مثال توجه کنيد</i></b></center>
و اين هم نتيجه آن:
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hamed webdesign29 بازدید : 153 تاريخ : پنجشنبه 6 تير 1392 ساعت: 15:31

رویدادهای مربوط به پنجره مرورگر و فرمها

  

 رویدادهای مربوط به پنجره مرورگر و فرمها در طراحی وب سایت HTML

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

 

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

 

برای استفاده از این رویدادها می توانید اسکرپتهای نوشته شده با جاوا اسکرپت را به عنوان مقادیر این رویدادها قرار دهید تا بسته به نوع رویداد مورد نظر اجرا شوند.

 

 

 

رویدادهای مربوط به پنجره مرورگر طراحی وب سایت 

این رویدادها باید فقط در تگهای body و frameset استفاده شوند. دو رویداد در این دسته قرار می گیرند که در زیر آنها را مشاهده می کنید:

 

onload : 

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

onunload : 

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

onResize : 

این رویداد هنگامی که اندازه پنجره مرورگر را تغییر می دهید اجرا می شود.

برای مشاهده یک مثال برای این رویدادها لینک زیر را کلیک کنید. صفحه ای که به آن وارد می شوید حاوی دو رویداد بالا در تگ body خود است.

 طراحی وب سایت 

ورود به صفحه آزمایشی برای رویدادهای مربوط به پنجره مرورگر

 

می توانید تگ body مورد استفاده در مثال بالا را در اینجا مشاهده کنید:

 

<body onload="alert('به این صفحه آزمایشی خوش آمدید')" onunload="alert('شما از این صفحه خارج شدید')" onresize="alert('شما اندازه پنجره را تغییر دادید')>

 

رویدادهای مربوط به فرمها

رویدادهای زیر در فرمها استفاده می شوند:

 

onchange : 

اسکرپت موجود در این شناسه به هنگام ایجاد تغییر در عناصر موجود در فرمها طراحی وب سایت  اجرا می شود.

onsubmit : 

وقتی که فرم ارسال می شود اسکرپت موجود در این شناسه اجرا می شود.

onreset : 

وقتی که دکمه reset ( پاک کردن فرم ) فشار داده شود اسکرپت موجود در این شناسه اجرا می شود.

onselect : 

وقتی که قسمتی از فرم که این شناسه را در خود دارد انتخاب شود اسکرپت موجود در این شناسه اجرا می شود.

onfocus : 

وقتی که تگی که حاوی این شناسه است مورد استفاده کاربر قرار گیرد اسکرپت موجود در این رویداد اجرا می شود.

onblur : 

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

 

 طراحی وب سایت 

برای مشاهده مثال برای رویدادهای مربوط به فرمها اینجا را کلیک کنید.

 

در اینجا می توانید کدی را که در مثال بالا استفاده شده ببینید البته فقط قسمتهای ضروری آن طراحی وب سایت  آورده شده است:

 

<form action="#" method="post" onsubmit="msg('onSubmit')" onreset="msg('onReset')">

<input type="text" onfocus="msg('onFocus')" onblur="msg('onBlur')" />

<select name="select" onchange="msg('onChange')">

<option>گزینه اول</option>

<option>گزینه دوم</option>

<option>گزینه سوم</option>

<option>گزینه چهارم</option>

</select>

<textarea onSelect="msg('onSelect')">وقتی متنی را که در یا تگ با شناسه onselect قرار دارد انتخاب کنید اسکرپت موجود در این رویداد اجرا می شود.</textarea>

<input type="reset" name="reset" value="reset" />

<input type="submit" name="Submit" value="Submit" />

</form>

 طراحی وب سایت 

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

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hamed webdesign29 بازدید : 144 تاريخ : چهارشنبه 29 خرداد 1392 ساعت: 14:42

اموزش CSS از پایه تا پیشرفته

 

D
اموزش جامع و کامل CSS از پایه تا پیشرفته

موزش جامع و کامل CSS از پایه تا پیشرفته

            دسته: طراحی وب سایت استاتی

استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را آسان می کند و همچنین دید شما را بیشتر به

 

طراحی معطوف می کند استفاده ی اصلی css برای قالب بندی اشیاء html می باشد به طور مثال با آن می توانید برای قسمت های

 

مختلف در صفحه ی طراحی وب سایت خود تصویر زمینه ای قرار دهید رنگ متن ها را تغییر دهید و امکانات بی نظیر دیگری که برای html وجود ندارد.....

 

ادامه مطلب

 

آموزش جامع و کامل جاوا اسکریپت از پایه تا پیشرفته

 آموزش جاوا اسکریپت

                                  دسته: داینامیک

 

                                      دیدگاه های پیشین

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

 راحتی کار با جاوا اسکریپت است که باعث رواج و محبوبیت جاوا اسکریپت در میان کاربران شده است

 یکی دیگر از قابلیت های جاوا اسکریپت این است که به راحتی می توان با html ترکیب شود و از امکاناتi یکی از مواردی که دیر یا زود مورد نیاز برنامه نویسان طراحی وب سایت خواهد بود، صفحه بندی مطالب و محتوای سایت یا برنامه کاربردی است که در اصطلاح به آن pagiation هم می گویند (به معنی تقسیم نمایش محتوای مورد نظر در چند صفحه به جای نمایش آنها در یک صفحه)، ناگفته پیدا است که فواید و لزوم این کار در دسته بندی بهتر و ایجاد محیط کاربری (UI یا User Interface) حرفه ای تر است، البته به جهت پیچیده گی ظاهری این امکان، ممکن است در نگاه نخست طراحی صحیح آن کمی مبهم به نظر برسد، اما با کمی راهنمایی و تمرکز می توان راه حل مشکل را پیدا کرد، به هر صورت در این آموزش قصد داریم تا با هم این مشکل را یک بار برای همیشه حل کنیم!، لذا اگر شما هم علاقمند هستید تا برنامه هایتان را به این روش طراحی وب سایت کنید، با ادامه مطلب همراه ما باشید.

sectionدسته بندی: آموزش کاربردی » MySQL

labelبرچسب ها: PHP - MySQL

article 

ارسال پارامترطراحی وب سایت به URL و دریافت مقادیر با PHP

php-curl-file-get-contents

 

زمانی که از ارسال پارامتر درطراحی وب سایت صحبت می کنیم، بیشتر ذهنمان معطوف به فرم های HTML و متد POST یا GET می شود، البته این شیوه مرسوم و پرکاربردی برای ارسال داده ها از مرورگر (سمت کاربر) به یک سایت (سمت سرور) است، اما گاهی مواقع نیاز است که از این قالب سنتی پا را فراتر بنهیم و از روش های دیگری نیز استفاده کنیم، به فرض از همین استاندارد POST و GET در ارسال درخواست های آژاکسی (Ajax) نیز به سرور استفاده می شود، از طرفی کدها و توابعی در PHP وجود دارد که می توانند علاوه بر ارسال پارامترها به یک سرور (آدرس URL)، پاسخ آن را نیز دریافت کنند، امکان بالقوه ای که می تواند کاربردهای زیادی داشته باشد، از جمله مهمترین این توابع file_get_contents و cURL هستند 

 

 

 

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

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

آرشیو مطالب

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

لینک دوستان

خبرنامه