مدونة الاسراء: تكنولوجيا المواقع

طريقة العرض تكون بالضغط على الصورة بـ زر الماوس اليسار(شمال), لتخرج الصورة المراده فى ايطار كامل بعرض الشاشه,ثم اضغط زر الماوس اليسار مرة اخرى: لـ ارجاع الصورة مكانها ,وهكذا مع بقية الصور.

(أترككم للمشاهدة)

مدونة الاسراء & By Design:ayman_elbora3y@ymail.com

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

الكفرون:سوريا

تقع الكفرون تقريباً في منتصف الساحل السوري وتتميز بجمالها الشديد الذي يلفت الأنظار

وادي قادشا:لبنان

حيث الطبيعة الخلابة والمناظر الساحرة عند وادي قادشا:

اللاذقية:سوريا
تقع مدينة اللاذقية في أقصى شمال سوريا وتتميز هذه المدينة بجمال ضواحيها الذي يفوق كل الأوصاف، فنجد فيها مثلاً بحيرة مشقيتا:

قالما:الجزائر

قالما التي تقع شمال شرق الجزائر وتبعد عن
العاصمة بحوإلى 537 كم، وتتميز قالما بموقعها وسط سلسلة جبلية ضخمة خضراء.
وهذه صورةة تشرح لنا جمال هذه المنطقة الرائعة:

عيون السمك:لبنان
عيون السمك وهي من أجمل مناطق عكار وتبعد عن طرابلس 35 كم شرقاً باتجاه
بلدة حرار. تتميز المنطقة بالأنهار الجارية والشلالات الجميلة والمناظر
الطبيعية، وتوجد بها بحيرة كبيرة على مساحة 50 ألف متر هذه المياه الجارية
تنزل من الجبال الجليدية!

أهرامات الجيزة:مصر

احدى عجائب الدنيا السبع و يشغل مساحه 13 فدان تقريبا و ارتفاعه الأصلى 146 متر وحاليا 137 متر تقريبا و طول ضلع قاعدته 230 متر . أما عن اوزان قطع الحجاره فتتراوح ما بين طن و ثمانيه أطنان او أكثر.

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

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

بحيرة قارون:مصر

تقع فى محافظة الفيوم فى الجزء الشمالى الغربى لوادى الريان وهى من اقدم البحيرات الطبيعية فى العالم والمتبقية من بحيرة موريس القديمة , وبها تكوينات جيولوجية هامة ونباتات متنوعة وحفريات قديمة مثل حفرية اقدم قرد فى العالم , كما تحتوى على آثار فرعونية ورومانية , ويوجد بالبحيرة عدد من الأسماك .

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

slide show
من اجمل المنطاق العربية (سلايدشو)

اقرأ المزيد

طريقة عمل صفحة مرعبة باسمك

الثلاثاء، 6 ديسمبر 2011

تدوينة اليوم مثيرة بعض الشيئ
شرح عمل صفحة مرعبة باسمك

درسنا عبارة عن تصميم سلايد شو مرعب خاص بك مثلا يظهر الوجه المرعب باسمك ليعبر عنك.

مثال على ذلك:

تنبيه : هذا الشرح حصري لـ مدونة الاسراء يمنع منعا باتا النقل أو النشر بدون ذكر المصدر أو اخذ اذني شخصيا وعلي من يخالف هذا التنبيه عليه تحمل عواقيب ذلك. اللهم بلغت اللهم فاشهد.

بسم الله نبدأ

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

لامشكلة فى ذلك جرب عمل هذا مجانا بدون امتلاكك لمساحة او موقع على الانترنت

فقط اتبع التعليمات الآتية

فقط تحتاج إلى محرر نصي بسيط، إذا كنت تستخدم نظام ويندوز يمكنك أن تستخدم المفكرة "Notepad" والذي يمكنك أن تجده في قائمة إبدأ "start" ثم قائمة البرامج "Program" ثم في قائمة الأدوات "Accessories":

كيف تجد برنامج المفكرة

إذا لم تكن تستخدم ويندوز يمكنك أن تجد برامج مماثلة في أنظمة التشغيل الأخرى، فمثلاً لينكس يحوي برنامج بيكو "Pico" ونظام ماك يحوي برنامج TextEdit.

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

متصفح وبرنامج المفكرة أو أي محرر نصي بسيط، هذا كل ما تحتاجه لكي تكمل الدرس وتقوم بإنشاء الصفحة.

انتهينا! لديك الآن أول موقع حقيقي!
كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:

في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.

الآن إذهب إلى متصفحك:

في القائمة العلوية اختر "Open" من قائمة "File" (CTRL+O).
إضغط على "Browse" في النافذة التي ستظهر لك.
إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".

الآن تمت العملية بنجاح.
خلافاً لذلك اصبر وأكمل قراءة الدروس

تنبيه : هذا الشرح حصري لـ مدونة الاسراء يمنع منعا باتا النقل أو النشر بدون ذكر المصدر أو اخذ اذني شخصيا وعلي من يخالف هذا التنبيه عليه تحمل عواقيب ذلك. اللهم بلغت اللهم فاشهد.

أولا الهيكل الأساسي للصفحة سيكون على الشكل التالى

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ayman</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

هنا كود الانماط الانسيابية Css

</style>

<script type="text/javascript"><!--

هنا كود الـjava script

</script>

</head>

<body>

هنا كود الصفحة body

</body>

</html>

يتم وضع هذا الكود فى أحد صفحات موقعك أو داخل ملف المفكرة Text Document

وقم بالتعديلات الآتية:

خصائص Css كود Css يتم وضعه مكان الجملة هنا كود الانماط الانسيابية Css الموجودة فى الكود الأساسي.
بين الوسم <style type="text/css"> و </style>

    html {
        overflow: hidden;
    }
    body {
        margin: 0px;
        padding: 0px;
        background: #fff;
        position: absolute;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=100);
    }
    span {
        display: none;
    }
    img {
        width: 0px;
        position: absolute;
        -ms-interpolation-mode:nearest-neighbor;
        image-rendering: optimizeSpeed;
    }
    #txt {
        font-weight: bold;
        filter: alpha(opacity=30);
        opacity:0.3;
        width: 100%;
        font-family: verdana;
        position: absolute;
        text-align: center;
    }

خصائص java script كود hava script يتم وضعه مكان الجملة هنا كود الـjava script.
بين الوسم <script type="text/javascript"><!-- و </script>

// ===================================================
// script by Gerard Ferrandez - ge1doot - march 2000
// http://www.dhteumeuleu.com
// ===================================================

var TXT, IMG, TAF;
sw = 0;
nx = 0;
ny = 0;
nI = 0;
t = 0;
c = 0;

function resize() {
   nx = document.body.offsetWidth;
   ny = document.body.offsetHeight;
}
onresize = resize;

function swap() {
   var r = Math.round(Math.random()*nI);
   var x = Math.round(nx * (Math.random() + 1));
   var y = Math.round(ny * (Math.random() + 1));
   var css = IMG[r].style;
   css.zIndex = c++;
   css.width = x+"px";
   css.height = y+"px";
   css.left   = Math.round((nx - x) / 2)+"px";
   css.top    = Math.round((ny - y) / 2)+"px";
   setTimeout(swap,16);
}

function afftxt(){
   var o = TXT[(t++)%TXT.length]
   var tx = o .innerHTML;
   TAF.innerHTML = tx;
   var y = (nx/tx.length) * 1.2;
   var css = TAF.style;
   css.top = Math.round((ny/2) - (y/2) - (y/6))+"px";
   css.fontSize = Math.round(y)+"px";
   css.zIndex = c+1000;
   css.color = o.style.color;
   setTimeout(afftxt, 1000);
}

onload = function() {
   IMG = document.body.getElementsByTagName("img");
   TXT = document.body.getElementsByTagName("span");
   TAF = document.getElementById("txt")
   nI = IMG.length-1;
   resize();
   swap();
   afftxt();
}

خصائص Html يتم وضعها فى المنطقة <body> </body>

<body>
هنا كود الصفحة body
</body>

<img src="http://i48.servimg.com/u/f48/15/28/56/97/encage10.jpg">
<img src="http://i48.servimg.com/u/f48/15/28/56/97/skullb10.jpg">
<img src="http://i48.servimg.com/u/f48/15/28/56/97/skullb10.jpg">

<div id="txt"></div>

<span style="color:#FFF"> اسمك1 </span>
<span style="color:#F00"> اسمك2 </span>
<span style="color:#F00">اسمك3</span>
<span style="color:#FFF">اسمك4</span>
<span style="color:#F00"> !!!! </span>
<span style="color:#F00">اسمك5</span>

مع تغيير الكلمات باللون الأحمر باسمك أو الكلمات الآخرى المرادة على ان لاتقوم بالتلاعب بأى وسم اخر فى الكود يؤدي الى تخريبه

فقط تغيير الاسم الخاص بي بـ اسمك.

بعد ذلك اعرض الصفحه الخاصة بك أو ملف المفكرة الذى قمت بانشائه وشاهد بنفسك.

تنبيه : هذا الشرح حصري لـ مدونة الاسراء يمنع منعا باتا النقل أو النشر بدون ذكر المصدر أو اخذ اذني شخصيا وعلي من يخالف هذا التنبيه عليه تحمل عواقيب ذلك. اللهم بلغت اللهم فاشهد.

اقرأ المزيد

كود css جعل الرابط مائل عند مرور الماوس

الأحد، 4 ديسمبر 2011

اقرأ المزيد

كود css لجعل الاقسام دائرية

كود css لجعل الاقسام دائرية
كود الاقسام الدائرية

الصورة

تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css

      /*كود لجعل الاقسام دائرية مع تغير الخط الى جذاب */
            td.row1 {
                border: 1px solid #C7C7C7;
                border-radius: 18px 18px 18px 18px;
                color: #707070;
                font-family: arial,helvetica,verdana;
                font-size: 16px;
                font-style: normal;
                font-variant: normal;
                font-weight: bold;
                text-shadow: 2px 1px 1px #CECECE;
            }
            td.row2 {
                border: 1px solid #C7C7C7;
                border-radius: 18px 18px 18px 18px;
                color: #707070;
                font-family: arial,helvetica,verdana;
                font-size: 16px;
                font-style: normal;
                font-variant: normal;
                font-weight: bold;
                text-shadow: 2px 1px 1px #CECECE;
            }
            td.row3{

                border: 1px solid #C7C7C7;
                border-radius: 18px 18px 18px 18px;
                color: #707070;
                font-family: arial,helvetica,verdana;
                font-size: 16px;
                font-style: normal;
                font-variant: normal;
                font-weight: bold;
                text-shadow: 2px 1px 1px #CECECE;
            }

طريقة الوضع
لوحة الادارة
مظهر المنتدي
الوان
ورقةcss
ضع الكود اللي في الاعلي
سجل
للنسختين الثانية والاخيرة
بالتوفيق

طريقة الوضع
لوحة الادارة
مظهر المنتدي
الوان
ورقةcss
ضع الكود اللي في الاعلي
سجل
للنسختين الثانية والاخيرة
بالتوفيق

اقرأ المزيد

[css] وضع ايطار للمنتداى احترافى

كود css
وضع ايطار احترافى للمنتدى من جميع الجوانب على كل ايطارت المنتدى

تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
ايوه بدون تومبيلات

الكود من تطويرى و بعض اضافتى

اولا صوره للكود

طبعا بامكانك تغير صوره الايطار على حسب ماتريد

الكود

    /*Bebo awad*/

    .row1, .row2, .row3, td.row3Right, td.spaceRow {
    background-image : url(هنا صوره خلفيه منتداك);
    border: 1px groove #d5d5d5;
    }

    #page-body, .forumline {
    border:2px solid #EEE;
    width:98%;
    margin: 10px;
    padding: 3px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 5px #000;
    box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    -khtml-box-shadow: 0px 0px 5px #000;
    }

    table.forumline {

    background: #00CCFF url(هنا صوره الايطار);

    padding: 2px 4px 13px 2px;

    background-position: bottom;

    border: 1px dashed #0DB4FC;
    }

    /* By Bebo*/

الكود يوضع فى ورقه ال Css

لوحه الاداره >>> مظهر المنتدى >>> الالوان >>> ورقه الـ Css

تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css
تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css

اقرأ المزيد

كود Css لتغير شكل الصورالشخصيه الى صوره دائرية

تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css

كود Css لتغير شكل الصورالشخصيه الى صوره دائرية

تكنولوجيا المواقع,لغات البرمجة,لغة css,تقنية css, css,أكواد css,أكواد css أحلى منتدى,كود css

الكود للنسخه الثانيه ... phpBB2

صوره قبل وضع الكود
http://i40.servimg.com/u/f40/16/00/73/65/1-310.jpg

صوره بعد وضع الكود
http://i40.servimg.com/u/f40/16/00/73/65/ahmed10.jpg

الكود

/*وضع اطار دائرى للصوره الشخصيه*/ .postdetails.poster-profile a img { border:2px solid #; background: url() ; -moz-border-radius-topright: 15px; -webkit-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-radius-bottomleft: 15px; border-radius-topright: 15px; border-radius-bottomleft: 15px; } /*Ahmed M!Do*/

-----------
طريقة الوضع : -

الكود
يوضع بورقة الــــcss

لوحة الادارة > مظهر المنتدي
> الوان > ورقة تصميم css
-----------

اقرأ المزيد

كود css جعل اسماء الاعضاء تظهر وتختفي عدة مرات

اقرأ المزيد

كود css وضع اطار على اخر مساهمة للنسخة التانية

اقرأ المزيد

كود css لعمل عبارة "لا تضع أبداً ايميل ..الخ" بدون تومبلايت

كود css لعمل عبارة "لا تضع أبداً ايميل ..الخ" بدون تومبلايت
لجعله يختفي ويظهر عد مرات بشكل أجمل

الكود

/*في الرد السريع*/ form#quick_reply:Before{ content: "لا تضع أبداً ايميل انشاء منتداك في مساهماتك و اجعل لموضوعك عنواناً يدل على نوع مشكلتك"; text-align: center; text-decoration: blink; text_editor_textarea text-align: center; padding: 4px; font-size: 11px; font-family: Tahoma; background: none repeat scroll 0 0 #FFFFFF; border: 1px dotted #ff0000; line-height: 25px; } /*عند اضافة موضوع جديد*/ #format-buttons:After{ content: "لا تضع أبداً ايميل انشاء منتداك في مساهماتك و اجعل لموضوعك عنواناً يدل على نوع مشكلتك"; text-align: center; text-decoration: blink; text_editor_textarea text-align: center; padding: 4px; font-size: 11px; font-family: Tahoma; background: none repeat scroll 0 0 #FFFFFF; border: 1px dotted #ff0000; line-height: 25px; } /*a7medvirus and new.moon*/

لوحة الادارة/مظهر المنتدي/الوان/ورقة تصميم css
ونضع الكود اعلاه
الكود مخصص للنسخة ِ: phpbb2
وايضا يعمل مع باقي النسخ
يمكنكم تغير العبارة الموجودة في الكود

اقرأ المزيد