‏إظهار الرسائل ذات التسميات HTML. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات HTML. إظهار كافة الرسائل

2013-07-29

شريط أدوات ألوان الويب متاح حاليًا بإضافات مميزة

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

اليوم أقدم لكم شريط أدوات موقع  الوان الويب  Toolbar  لتكونوا على إتصال دائم بالموقع
 يمكن تثبيته على معظم  المتصفحات فهو متوافق مع جوجل كروم وفايرفوكس والإنترنت إكسبلور.
browser-icon

مميزات شريط ادوات الوان الويب:

يحتوى على بعض الروابط التى تهم المصممين وأصحاب المواقع وهى:

toolbar
1.  الفوتوشوب أون لاين فى حالة التحرير السريع لأى صورة
2. محرر الأكواد  Html Editor الذى يستخدمه مصممى المواقع وأصحاب المدونات
3.صانع الأزرار Button maker css3  لصنع الأزرار الخاصة بموقعك
5.متابعة دائمة لأحدث الموضوعات والدروس والدورات من خلال خدمة Rss
6.يمكن البحث السريع فى الموقع من خلال محرك البحث السريع الموجود بشريط الأدوات
7. متابعة لجديد الموقع على المواقع الإجتماعية صفحة الفيس بوك ، تويتر ، جوجل بلس
8. يمكن معرفة تقييم ترتيب أى موقع فى Alexa

تحميل شريط ادوات الوان الويب

 Get our toolbar!

2013-07-11

تعليم كيفيه تصميم موقع بلغه (HTML) الدرس الثانى

بسم الله الرحمن الرحيم


design-web


قمنا فى الدرس الاول بشرح كيف تنشأ صفحة ويب عن طريق لغة HTML فى هذا الدرس سوف استعرض عليكم كيفية 
ادراج الالوان وكتابة النصوص  وتغير احجام الخطوط

اولا: نبدا بحجم الخطوط الكود الخاص بها لتغير احجام الخطوط



<html>
<head>
<title>
صفحتي الأولى
</title>
<head/>
<body>
<center>
<h1/> ھذا ھو خط 1 <h1>
<h2/> ھذا ھو خط 2 <h2>
<h3/> ھذا ھو خط 3 <h3>
<h4/> ھذا ھو خط 4 <h4>
<h5/> ھذا ھو خط 5 <h5>
<h6/> ھذا ھو خط 6 <h6>
<center/>
<body/>
<html/>


<h1/> هنا اكتب ما تشاء على حسب الحجم الذى تريدة  <h1>

design-web1



 ثانيا : كتابة النصوص 

يدخل بها خصائص عديدة فا الكود الخاص بكتابة النص هو <p/> هنا يكتب النص <p>

اذا كنت تريد ان تكتب نص بخط مائل فا الكود الخاص به هو <em/>  الكلام يصبح مائل <em> وهناك كود اخر 
يقوم بميل الخطوط وهو    <i/>  كود اخر يصبح من خلالة الكلام مائل  <i> 

 اذا كنت تريد ان يوجد اسفل الكلام خط فا الكود الخاص بة هو <strike/> يصبح اسفل الكلام خط <strike
ويوجد كود اخر وهو <U/>   اسفل الكلام خط  <U> 
 
اذا كنت تريد ان يوجد كلمة مميزة غامقة اللون فا الكود الخاص بها هو <b/> تصبح الكلمة غامقة الون <b> ويوجد كود
اخر لتغميق الون وهو <strong>  يصبح لون الكلمة اغمق   </strong>

 هيا نستعرض الخطوات السابقة ونرها على الطبيعة



 <html>
<head>
<title>
صفحتي الأولى
<title/>
<head/>
<body>
<center>
<h/> السلام علیكم ورحمة الله وبركاته <h4>
أھلا وسھلا بكم في موقعي الوان الويب
<br>
<em/> تصميم <em>
<p/> یمكنك في ھذا الموقع ان تجد كل ما هو جديد فى عالم التصميم والابداع  <p>
      <u/> فوتوشوب <u> 
<center/>
<body/>
<html/>



design-web2


 ثالثا : ادخال الوان على النصوص وعلى خلفية الصفحة 

بالنسبة للون الصفحة فهيا تكتب مع الامر <body>  فى اول التصميم للصفحة. كتابة الون تاخذ شكلان اما بالارقام او باسم اللون 
يكون الامر 
<body bgcolor="اسم أو رمز اللون">





 
 <html>
<head>
<title>
صفحتي الأولى
<title/>
<head/>
<body bgcolor="#990000">
<center>
<h4/> السلام علیكم ورحمة الله وبركاته <h4>
أھلا وسھلا بكم في موقعي الوان الويب
<br>
<em/> تصميم <em>
<p/> یمكنك في ھذا الموقع ان تجد كل ما هو جديد فى عالم التصميم والابداع  <p>
      <u/> فوتوشوب <u> 
<center/>
<body/>
<html/>

 بعد التجربة العملية تظهر الصفحة بهذا الشكل و يمكن كتابة الكود بدلا من الارقام بالغة الانجليزية يعطى نفس النتيجة


<body bgcolor="red">




design-web3





لتغيير لون أو حجم أو نوع الخط , نستخدم الأمر font( والذي له وسمين للبداية والنهاية ) وذلك من خلال الأوامر:
color .. للون
size .. للحجم
face .. لنوع الخط
وهذه الأوامر الثلاثة تكون داخل وسم البداية للأمر font 


<html>
<head>
<title>
صفحتي الأولى
<title/>
<head/>
<body>
<center>
 <font face="andalus" color="#EB0202" size="6">
السلام علیكم ورحمة الله وبركاته
<font/>
<br>
أھلا وسھلا بكم في موقعي الوان الويب
<br>
<em/> تصميم <em>
<p/> یمكنك في ھذا الموقع ان تجد كل ما هو جديد فى عالم التصميم والابداع  <p>
      <u/> فوتوشوب <u>
<center/>
<body/>
<html/>
 



design-web4

ملحوطة عند اختيار الخط لابد فى تصميم موقعك اختار خط يكون شائع لانك اذا قمت باختيار نوع خط غريب عن الجمهور فلا يظهر عند احد متصفحى موقعك لان لا يوجد عندهم هذا الخط مثلك








2013-07-06

كيفية ادراج فلاش فى صفحة ويب Html

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

إستكمالا لدورة تعلم تصميم المواقع بلغة Html ،فى هذا الدرس سنتعرف على كيفية إضافة فلاش على صفحة ويب أو على المواقع التى تعمل بلغة Html مثل بلوجر و الورد بريس.
flash-icon
يمكن متابعة الدروس السابقة :
1.كيف أبدأ تعلم التصميم على الإنترنت
2.مقدمة عن أكواد Html وفائدتها
3. كيفية تصميم موقع بلغة Html

فالفلاش يستعين به كثير من أصحاب المواقع كهيدر فلاشى أو إضافة ألعاب الفلاش ولكن يفضل التقليل من الإضافات الفلاشية فى الصفحة حتى تكون سريعة التحميل.
الخطوة الأولى:
صنع ملف فلاش بإستخدام البرامج المخصصة لذلك مثل برنامج Adobe Flash Studio أو Flash Banner Maker  أو برنامج adobe flash professional أو برنامج Swishmax  ,............... وغيرها من البرامج الكثيرة المهم أن يكون الملف بصيغة SWF

الخطوة الثانية:
رفع الفلاش على شبكة الإنترنت على أى موقع إستضافة برابط مباشر بمعنى ينتهى الرابط بإمتداد الملف الفلاشى SWf
إذا كنت لا تمتلك موقع إستضافة يمكن إستخدام الدروبوكس Dropbox   فى حفظ الملفات والحصول على رابط مباشر.

الخطوة الثالثة: 
بعد الحصول على الرابط المباشر للفلاش يمكن إستبداله بالرابط الملون باللون الأزرق بالكود التالى ثم نسخ الكود إلى صفحة الويب 

 
<embed src="https://dl.dropboxusercontent.com/u/80212138/%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%83%D9%86%20%D8%AF%D8%A7%D8%B9%D9%8A%D8%A7%20%D9%84%D9%84%D8%AE%D9%8A%D8%B1/demo/%D8%A3%D9%84%D9%88%D8%A7%D9%86%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8.swf" 
                    quality="high" allowscriptaccess="always" 
                    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" 
                    align="middle" height="150" 
                    width="150"></embed>


أما إذا كنت تريد إضافة الفلاش مع خلفية شفافة فيمكن إستخدام هذا الكود
 
<br />
<center>
<embed height="150" src="https://dl.dropboxusercontent.com/u/80212138/%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%83%D9%86%20%D8%AF%D8%A7%D8%B9%D9%8A%D8%A7%20%D9%84%D9%84%D8%AE%D9%8A%D8%B1/demo/%D8%A3%D9%84%D9%88%D8%A7%D9%86%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed>
<center>

يمكن التحكم فى طول وعرض الفلاش بتغيير قيم الطول والعرض بالكود width ,height

إستخدام محرر Html للإضافة فلاش إلى صفحات الويب:

يمكن بإستخدام البرامج ومحررات أكواد Html الحصول على الكود المناسب لإضافة الفلاش بصفحة الويب وضبط الإعدادات المناسبة لذلك وهذا مثال بسيط:

إذهب إلى محرر أكواد Html  

 ثم إضغط على أيقونة الفلاش الموجودة بشريط الأدوات

html-editor

 ثم كتابة رابط الفلاش المباشر بالجدول الخاص بإعدادات الفلاش وضبط الطول والعرض بتبويب general
 ولضبط المحاذاة والشفافية والجودة من تبويب properties

html-codes

وللحصول على الكود إضغط علىsource أعلى شريط الأدوات بالمحرر
ثم إنسخ الكود داخل أى صفحة Html أو داخل موضوع بمدونة بلوجر أو وورد بريس

الرجاء عدم نسخ الموضوع بدون ذكر مصدره ورابط المدونة

2013-07-02

تعليم كيفيه تصميم موقع بلغه (HTML) الدرس الاول


بسم الله الرحمن الرحيم 


design-web1

 

مقدمة :- ان تعلم تصمیم و برمجة المواقع لیس بالامر الصعب و انما یحتاج فقط لبعض الجھد و المثابرة ، ولذلك انصحك عزیزي القارئ ان تقوم بتنفیذ الامثلة الموجودة في ھذا الموضوع بشكل عملي لكي تتعلم من الاخطاء و لكي ترى بنفسك مدى سھولة الامر .
بدایة استطیع القول ان الاسلوب المناسب في شرح مثل ھذه المواضیع ھوالتركیزعلى الجانب العملي وضرب الامثلة وھذا ھو الاسلوب الذي ساحاول ان اتبعھا في الشرح.
اولا:- عليك عزيزى المصمم بتواجد برنامج لتحریر النصوص ولذلك یمكنك استخدام  Notepad الذي ینزل تلقائیا عند تنزیل الویندوز وھناك برامج اخرى مثل
Text padبكونھا یعمل على تلوین العناصر الاساسیة للغة الھتمل  والذي یمتاز عن Notepad و بالتالي يمكن اكتشاف الاخطاء الاملائیة حال حدوثھا و یمكن تنزیل البرنامج من الموقع التالي:   www.textpad.com

نبدأ اولا: بالوسوم يتم كتابة أوامر اللغة HTML على شكل ما يعرف ب " الوسوم ".

الوسوم هي أقواس ذات شكل خاص .. لها الشكل التالي..


<الأمر>

حيث يتم وضع الأمر بين القوسين.
وهناك نوعان من الوسوم لكل أمر..
وسم بداية أو فتح مثل:

<الأمر>

ووسم نهاية أو غلق مثل:

<الأمر/>


وهناك بعض الأوامر التي ليس لها سوى وسم بداية (فتح) فقط.


 هناك أربعة وسوم رئيسة ستجدها تقريبا في كل صفحة وهي:

وسم البداية وسم النهاية وظيفة الأمر
<html> <html/> يستخدم هذا الأمر في كل صفحة كوسيلة للتعريف باللغة
<head> <head/> هذا الأمر يختص بإحداث تغييرات في شريط العنوان
<title> <title/> هذا الأمر لتغيير عنوان الصفحة العلوي في شريط العنوان
<body> <body/> هذا الأمر يختص بتغيير شكل الصفحة ومحتوياتها من نصوص وصور


قم بفتح برنامج notepad وسوف استعرض عليكم بعض الاكواد لتجربتها ولمعرفة
استخدام كل كود وماذا يفعل ولابد بتجريب الاوامر بطريقة عملية عليها لمعرفة استخدام كل منها وفيما يستخدم هذا الوسم ولابد بعمل  save as لصفحة notepad وكتابة الامتداد باسم الموقع ثم html.
مثال : الصورة توضح طريقة حفظ العمل ينتهى اسم الموقع بى html.



save.web

عليك عزيزى المصمم برسم الموقع فى عقلك وكم عدد الصفحات والعناوين التى سوف يحتوى عليها لتسهيل عملية التصميم . تصميم الموقع هو ليس بامر معقد الكثير يعتقد ذلك ولكن هو عبارة عن بعض الاكواد البسيطة تستخدمها لعمل الموقع 




<html>
<head>
<title>
صفحتي الأولى
</title>
</head>
<body>
<center>
أھلا وسھلا بكم
<br>
في موقعي
</center>
</body>
</html>


شرح استخدام كل كود 




<html>~~~~~~~~~~~~~~~~~~~~~~ </html>

HTML یمثل كود </html> وبین ال <html> ما بین


<head>~~~~~~~~~~~~~~~~~~~~~~</head>
(head) یمثل ما سیكون في جزء الراس </head> و بین ال <head> ما بین



<title>~~~~~~~~~~~~~~~~~~~~~~~~~~ </title>
یمثل  العنوان و الذي سوف یكون في الراس وفي مثالنا سوف نطبع" صفحتي </title> و بین ال <title> ما بین
الاولى"


<body>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</body>
(body) یمثل ما ھو موجود في جزء الجسم </body> و بین ال <body> ما بین


<center>~~~~~~~~~~~~~~~~~~~~~~~~~~</center>
یتم لھ عملیة توسیط </center> وبین <center> ما بین
وھنا لاحظ ان العبارتین" أھلا وسھلا بكم " و عبارة" في موقعي" تم طباعتھن في منتصف الصفحة


<br>
او
<br />
(Enter وذلك للنزول الى السطر التالي ( اي تعمل عمل ال
السؤال الان : ماذا لو كتبنا الكود كما یلي
أھلا وسھلا بكم
في موقعي
ھل سیطبع" أھلا وسھلا بكم" ثم ینزل سطر الى الاسفل لیطبع "في موقعي" ؟ <br> دون استخدام
بالاضافة <br> الجواب: للاسف لا سوف یقوم بطباعة الجملتین في نفس السطر و لذلك نحن نقوم باستخدام
الى طرق اخرى سوف یتم ذكرھا

قم باخذ الاكواد الموجود بالاعلى لتجربتها بنفسك فتصميم المواقع اهم شى فيه هو العمل على كل شئ وتجربتها لتتعرف على خصائص كل كود وماذا يفعل 
وبعد فتح notepad ووضع الاكواد لا تنسوا ان تحفظ ويوضع بعد اسم الموقع 
html. 
يظهر العمل بهذا الشكل ولقدت نجحت عزيزى المصمم فى تصميم اول صفحة لك على الانترنت 


my-web


الدرس القادم سوف نستعرض فية طريقة كتابة النصوص وكيفية ادراج الالوان عليها وطريقة عمل الجداول .
نتمنى ان يكون نال الشرح اعجابكم

2013-06-28

اكواد الالوان Html للمصممين

أكواد الألوان Html 

قم بإختيار اللون المناسب ثم إنسخ الكود الخاص باللون

2013-06-24

كود فانوس رمضان اضافة جديدة للمواقع والمدونات

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

كل عام وانتم بخير بمناسبة قرب شهر رمضان الكريم لهذا العام وأقدم لكم بهذه المناسبة إضافة رائعة تضاف للمواقع والمدونات لتهنئة زوار موقعك أو مدونتك بالشهر الكريم وهى فانوس رمضان.
من مميزات هذه الإضافة انها خفيفة وسريعة التحميل بعكس بعض الإضافات الفلاشية.
إختر الشكل المناسب الذى يناسب هيدر مدونتك أو موقعك ثم إنسخ الكود الخاص بالإضافة فى موقعك.
طريقة تركيب الإضافة على مدونات بلوجر:
  1. إذهب إلى لوحة التحكم بالمدونة.
  2. إختر تخطيط
  3. إختر أضف أداة
  4. إختر من الأدوات Html/javascript
  5. إنسخ الكود الخاص بالفانوس المناسب فى الأداة ثم حفظ

ramadan

<div style="float:top left; position:absolute; overflow:visible; left:130px; top:0px; height:116px; width:116px;">
<a href="http://web-colors.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdHTIk0MVsoMQcwrlfuq_e7EYfgPvh-m-0KnDMRo9eJr8AV3CNz4D5wf2l4J06Wd-TmcTMG_81P3fDEp12ricUHQiRzlaAruExEYOyErlscuXFanLiu6nWGxMpbn6fYzbTNhh8azL2tA/s1600/fan-3.png" width="50,height="100" alt="رمضان كريم" title="احصل على هذه الإضافة" border="0"/>
</a></div>

مع تغيير القيم المكتوبة باللون الأحمر بالكود إلى الطول والعرض المناسبين لهيدر المدونة.

fanos-ramadan


<div style="float:top left; position:absolute; overflow:visible; left:130px; top:0px; height:116px; width:116px;">
<a href="http://web-colors.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3EEGvB2X39FzXYO46hvnkJR5Jo-BiLCuC7-1aJrTMpDheyx7l6rAgUt2B99hGaD81uMh6ehK777pK6HJ4d8i_9Aqnzuk_ZMeGbrFamuxK0C_DVLowu0Go9PJ-F1sZa6picqomxpXab6g/s1600/fan-1.png"width="100,height="150" alt="رمضان كريم" title="احصل على هذه الإضافة" border="0"/>
</a></div>

مع تغيير القيم المكتوبة باللون الأحمر بالكود إلى الطول والعرض المناسبين لهيدر المدونة

islamic-lamb

<div style="float:top left; position:absolute; overflow:visible; left:130px; top:0px; height:116px; width:116px;">
<a href="http://web-colors.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiD8iN9J0YU-_laDU9fCr4RHxMNWgHIGwon_1QYxJZCkY4pSuabN-tpUO0Yqau_Ab0RH67-JEwc668TUgAEYMkZ0wfdhH6SUq21xjdKDIziB5IJzgxqBMAvslf5Df931_4y38cGnieMwM/s1600/fan-2.png" width="50,height="100" alt="رمضان كريم" title="احصل على هذه الإضافة" border="0"/>
</a></div>

مع تغيير القيم المكتوبة باللون الأحمر بالكود إلى الطول والعرض المناسبين لهيدر المدونة.

الرجاء عدم نسخ الموضوع بدون ذكر مصدره ورابط المدونة

2013-06-21

تعليم لغة اكواد Html وفائدتها الدرس الأول

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

بداية تعلم تصميم المواقع لابد وأن تبدأ بتعلم لغة HTML وتعلم كيفية إستخدامها لأنها هى لغة الويب الأساسية وقد ذكرت بعض التلميحات عن كيفية تعلم تصميم المواقع على الإنترنت يمكن الإطلاع عليها من هــناااااااا 
ولكن دعنا نتعرف أكثر عن لغة Html
html-icon
ما هى اكواد Html؟
Html هى اختصار لـ HyperText Mark-up Language  وترجمتها لغة توصيف النص التشعبي وقام بإختراع هذه اللغة تيم بيرنرز لي .عام 1990
وهى اللغة التى تسمح بعرض المعلومات على شبكة الإنترنت وهى أول لغة تم إستخدامها فى تصميم صفحات  المواقع قد يعتقدها البعض معقدة ولكنها بسيطة جدا وسهلة ويمكن تعلمها خلال أيام قليلة .

ما فائدة لغة Html؟
بالرغم من توافر برامج تصميم المواقع مثل دريم ويفر وفرونت بيج ومحررات الأكواد   فإن معرفتك للغة  Html ولو بشكل بسيط ستساعدك على إنشاء مواقع أفضل.
لايوجد صفحة ويب تخلو من اكواد html فهى تعتبر اللغة التى يقرأها أى متصفح انترنت فى العالم فعن طريق اكواد html يمكن انشاء موقع مكون من عدة صفحات مترابطة بشكل بسيط  وتنسيقها بالشكل المناسب.

كيف تنشئ صفحة ويب بإستخدام أكواد Html
1. ممكن انشاء صفحة ويب عن طريق فتح Notepad الموجود على جهازك فى الويندوز ثم إنسخ به كود Html وليكن هذا الكود

<p>تعلم تصميم المواقع من البداية الى الاحتراف</p>

<p>فى<a href="http://web-colors.blogspot.com/"> ألوان الويب</a></p>


ثم قم بحفظ الملف بأى إسم ولكن أضف إمتداد صفحة الويب وليكن بهذا الشكل file.htm
سنجدتحول ايقونة الملف الى ايقونة المتصفح الذى يعمل على جهازك وبفتح الملف سيفتح كصفحة انترنت بها بعض المعلومات.
لاحظ كيفية كتابة الكود وكيفية ظهور المعلومة.

2. من الافضل إستخدام++ notpad كما وضحت سابقا فى هذا الموضوع  لسهولة إستخدامه وتميز الأكواد بالألوان فهو يدعم العديد من لغات البرمجة ولحفظ صفحة الويب بلغة Html إحفظ الملف من قائمة File بأى إسم ثم إختر الإمتداد من القائمة save as type
" Hyper text mark up"

ويمكن تجربة صفحة الويب مباشرة على مختلف المتصفحات من خلال برنامج++ notepad 


من مميزات هذا البرنامج أيضا أنه يمكن فتح أكثر من ملف فى وقت واحد سواء ملف نصى أو برمجى والإنتقال بين هذه الملفات بسهولة ويسر بضغطة واحدة كما به خاصية التقريب والابعاد التى تسهل للمستخدم القراءة الافضل عن طريق تكبير حجم الخط.

3. يمكن للمبتدئين الإستعانة بمحرر الأكواد أون لاين ومحاولة صنع صفحة ويب بإستخدام أشرطة الأدوات الموجودة بالتطبيق فى كتابة النصوص وإضة الروابط والصور ثم الحصول على شفرة كود Html من خلال الضغط على source فى شريط الأدوات.

 كيف أتعرف على أكواد Html لأى صفحة ويب؟
لاتوجد صفحة ويب تخلو من أكواد Html لذلك ممكن معرفة أى أكواد صفحة ويب من خلال المتصفح
بإستخدام متصفح فايرفوكس Firefox  أو متصفح جوجل كروم google chrome
بمجرد عمل كليك يمين على الصفحة ثم View page source تظهر الأكواد التى تحتوى عليها هذه الصفحة.

وأخيرا أرجو أن يفيد هذا الدرس ولكن لابد من التطبيق حتى تترسخ المعلومة .

2013-06-15

كيف أبدأ تعلم تصميم موقع على الإنترنت

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

إذا كنت من هواة التصميم والجرافيك فمؤكد أن أحد أمنياتك أن تتعلم تصميم المواقع ولكن ربما تتخيل أن الأمر صعبًا أو يحتاج إلى دورات مكثفة ودراسات شاقة وعلم ودراية بأمور البرمجة ولكن فى الحقيقة أن الأمر أبسط مما تتخيل ولكنه يحتاج إلى بعض الصبر وإصرار على التعلم حتى تصل إلى درجة الإحتراف.
فيوجد الكثير من يحلم بإمتلاك موقع شخصى للكتابة عن مجال معين أو لغرض الربح من الإنترنت ولكن من المؤكد أن مظهر الموقع له عامل أساسى فى نجاحه وحتى إذا إعتمدت على شراء قالب أو إستخدام القوالب الجاهزة فإنك بالفعل ستحتاج إلى التعديل عليه ليناسب الموضوعات المطروحة بالموقع لذلك من الأفضل أن تكون على علم ودراية بلغة الويب لتتمكن من إدارة ناجحة لأى موقع.

البداية الصحيحة لتصميم المواقع
 1.تعلم الفوتوشوب
شئ أساسى لأى مصمم هو أن يمتلك فكرة ولو بسيطة عن برنامج الفوتوشوب لتصميم البانرات والخلفيات لتحسين مستوى الموقع لأن أغلب المواقع تعتمد على الصور فى الشكل.
(يمكن الإستعانة ببرنامج فوتوشوب أون لاين)

2.تعلم لغة HTML
هذه هى لغة الويب الأساسية على الإنترنت وهى لغة فى غاية البساطة ويمكن تعلمها فى فترة وجيزة وسنتحدث عن دروس لتعلم هذه اللغة فى تدوينات قادمة بإذن الله.

3. تعلم لغة CSS
هذه الأكواد هى المسئولة عن التنسيق فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات.

4. تعلم لغات JAVA SCRIPT , Php , ASP "
وهذه لغات برمجة متقدمة تستخدم فى تطبيقات الويب والمواقع المطورة وسوف نتطرق إليها فى الفترة القادمة
 
البرامج المستخدمة فى تصميم المواقع
 1.برنامج الفوتوشوب Adope photoshop
لإستخدامه فى تصميم الشعارات والبنرات والخلفيات

2. إستخدام محرر النصوص++ Notepad
كثير ممن يبدأ تصميم المواقع يبدأ بإستخدام البرامج لتصميم المواقع ولكن  إذا أردت التعلم الصحيح للأكواد كيفية كتابتها والغرض من كل كود فعليك بإستخدام Notepad


notepad++
فيمكن أن تفتح أى صفحة ويب بإستخدام المفكرة الموجودة بالويندوز ومعرفة الأكواد التى تحتويها ولكن بإستخدام++ Notepad
فهو يقوم بتحرير لغات برمجة عديدة وتلوينها وترتيبها .
البرنامج مجانى يمكن تحميل آخر إصدار له من هنا

3. برنامج فرونت بيج Frontpage
هذا البرنامج يساعد فى بناء موقع فى أسرع وقت وبدون أن تتعلم أى لغات برمجة فهو يشبه إلى حد كبير محرر الأكواد CKEditor الذى أضفته فى موضوع سابق فيمكن تنسيق الصفحة وإضافة الصور والنصوص وتتم ترجمتها إلى أكواد التى يكون بالإمكان حفظها كصفحة ويب.

4.برنامج دريم ويفر Dreamweaver
هو برنامج يحتاج إلى إحترافية أكثر لإنشاء وإدارة تطبيقات ومواقع الويب والتعامل معها فبه مجموعة متقدمة من الأدوات التي تساعدك على الارتقاء بمستوى خبرتك في تصميم مواقع الإنترنت.

2013-06-01

محرر الأكواد online Html editor

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
محرر الأكواد أون لاين أداة هامة جدا لكل من يعمل بتصميم الويب ولذلك إخترت محرر الأكواد  CKEditor لما له من مميزات رائعة سهولة فى الإستخدام على أى مبتدئ.

مميزات محررالأكواد: CKEditor 
يشبه إلى حد كبير برنامج فرونت بيج لتصميم صفحات الويب .
البرنامج به إمكانية تعديل الأكواد أون لاين بدون برامج .
يمكن إجراء معاينة للصفحة وحفظها أيضًا.
يمكن بكل بساطة  إضافة الصور والفلاشات وإنشاء الجداول على صفحات الويب .
يمكنك الإختيار بين 63 لغة من بينها اللغة العربية من خلال القائمة المنسدلة .

إضغط على الصورة

2013-05-31

محول الأكواد Html converter


بسم الله الرحمن الرحيم
السلام عليكم وحمة الله وبركاته

محول أكواد
 Html

لإعادة ترميز الأكواد لتصبح قابلة للعمل فى التعليقات على مدونات بلوجر أو تحويل أكواد جوجل أدسنس.
إنسخ الكود داخل المربع ثم أضغط تحويل الكود