الويب العربي - طريقة عمل ثــيم 4images

انشاء ثيم او ستايل لمكتبة الصور 4images

يتكون الثيم عادة من ثلاث مجلدات وهي
images يحمل صورة الستايل نفسة
icons جميع الستايلات تحمل نفس الأيقونات
media تتكون من عدد 17 ملف html وهي نفسها لا تتغير في أي ثيم
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ملفـات html التي يتم وضع الثيم عليهـا عدد 10 ملفات وهي

top.html
search.html
member.html
details.html
register.html
categories.html
error.html
home.html
lightbox.html
postcard_create.html

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
بعد انشاء الستايل بواسطة فوتوشب
نقوم بالانتقال إلى برنامج فرنت بيج و نفتح الثيم الجديد و نبدأ بتأسيس الملفات العشرة المذكور وهذا مثال لكود ملف home.html

كود PHP:


		
			
 

<DIV align=center> 

     <table dir=rtl width="640" border="0" cellspacing="0" cellpadding="0" class="tablehead">

        <tr>

         <td width="6">

         &nbsp;</td>

         <td width="405">

         <p align="center">&nbsp;</td>

         <td width="225" align="right">

            <form method="post" action="{url_search}">

             <table dir=rtl border="0" cellspacing="0" cellpadding="1">

                <tr>

                 <td>

                    <font face="Arial">

                    <input type="text" name="search_keywords" size="15" class="searchinput" />

                 </font>

                 </td>

                 <td>

                    <font face="Arial">

                    <input type="submit" value="{lang_search}" class="button" name="submit" />

                 </font>

                 </td>

                </tr>

                <tr valign="top">

                 <td colspan="2"><font face="Arial"><a href="{url_search}" class="smalltext">{lang_advanced_search}</a></font></td>

                </tr>

             </table>

            </form>

         </td>

         <td align="right" width="6">

         &nbsp;</td>

        </tr>

     </table>

     <font face="Arial">

    </td>

</tr>

<tr>

    <td class="bordercolor">

     </font>

     <table dir=rtl width="640" border="0" cellspacing="1" cellpadding="0">

        <tr>

         <td class="tablebgcolor">

            <table dir=rtl width="638" border="0" cellspacing="1" cellpadding="0">

             <tr>

                <td class="navbar" height="23">

                 <table dir=rtl width="636" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                     <td><font face="Arial"><img src="{template_url}/images/spacer.gif" width="4" height="4" alt="" />{clickstream}</font></td>

                     <td align="right">

     <p align="center">

     <b>

     <font face="Arial">

     <a href="http://www.zhra.net">

     <span style="text-decoration: none">

     الصفحة الرئيسيـة</span></a>&nbsp;<a href="{url_top_images}"><span style="text-decoration: none">{lang_top_images}</span></a>&nbsp;<span lang="ar-sa">&nbsp;&nbsp;

     </span>&nbsp;<a href="{url_new_images}"><span style="text-decoration: none">{lang_new_images}</span></a>&nbsp;

        </font>

        </b>

     </td>

                    </tr>

                 </table>

                </td>

             </tr>

            </table>

            <table dir=rtl width="638" border="0" cellspacing="0" cellpadding="0">

             <tr>

                <td width="150" class="row2" valign="top">

                 <table dir=rtl width="150" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                     <td class="head2" height="20"><font face="Arial"><img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_registered_user}</font></td>

                    </tr>

                    <tr>

                     <td class="tablebgcolor"><font face="Arial"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></font></td>

                    </tr>

                    <tr>

                     <td align="center" class="row1"><font face="Arial">{user_box}</font></td>

                    </tr>

                    <tr>

                     <td class="tablebgcolor"><font face="Arial"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></font></td>

                    </tr>

                 </table>

     <font face="Arial">{if random_image}

                 </font>

                 <table dir=rtl width="150" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                     <td class="head2" height="20"> <font face="Arial"> <img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_random_image}</font></td>

                    </tr>

                    <tr>

                     <td class="tablebgcolor"><font face="Arial"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></font></td>

                    </tr>

                    <tr>

                     <td align="center" class="row1">

         <font face="Arial">

         <br />

                        {random_image}

     <br />

                        <br />

                     </font>

                     </td>

                    </tr>

                    <tr>

                     <td class="tablebgcolor"><font face="Arial"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></font></td>

                    </tr>

                 </table>

     <font face="Arial">{endif random_image}

                </font>

                </td>

                <td width="1" class="bordercolor" valign="top">

    <font face="Arial"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></font></td>

                <td width="18" valign="top">&nbsp;</td>

                <td width="450" valign="top">

     <font face="Arial">

     <br />

                 <span class="title">{site_name}</span>

     <br />

     </font>

     <hr size="1" />

                 <font face="Arial">{if categories}

                 </font>

                 <table dir=rtl width="450" border="0" cellspacing="0" cellpadding="1">

                    <tr>

                     <td class="head1">

                        <table dir=rtl width="100%" border="0" cellspacing="0" cellpadding="3">

                         <tr>

                            <td class="head1" valign="top"><font face="Arial">{lang_categories}</font></td>

                         </tr>

                         <tr>

                            <td class="row2" valign="top"><font face="Arial">{categories}</font></td>

                         </tr>

                        </table>

                     </td>

                    </tr>

                 </table>

                 <font face="Arial">

                 <br />

                 {endif categories}{lang_site_stats}<br />

                 <br />

                 {if msg}<b>{msg}</b><br /><br />{endif msg}

                 </font>

                 <table dir=rtl width="450" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                     <td class="head1">

                        <table dir=rtl width="100%" border="0" cellspacing="0" cellpadding="4">

                         <tr>

                            <td class="head1" valign="top"><font face="Arial">{lang_new_images}</font></td>

                         </tr>

                        </table>

                     </td>

                    </tr>

                    <tr>

                     <td class="head1"><font face="Arial">{new_images}</font></td>

                    </tr>

                 </table>

                 <font face="Arial">

                 <br />

     {whos_online}

     <br />

                 </font>

                 <table dir=rtl width="100%" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                     <td><font face="Arial">{category_dropdown_form}</font></td>

                     <td align="right"><font face="Arial">{setperpage_dropdown_form}</font></td>

                    </tr>

                 </table>

                 <p>&nbsp;</p>

                </td>

                <td width="19" valign="top">&nbsp;</td>

             </tr>

            </table>

         </td>

        </tr>

     </table>

     <font face="Arial">

    </td>

</tr>

<tr>

    <td>

     </font>

     <table dir=rtl width="640" border="0" cellspacing="0" cellpadding="0" class="tablebottom">

        <tr>

         <td width="6">

         &nbsp;</td>

         <td width="405">&nbsp;</td>

         <td width="225">&nbsp;</td>

         <td width="6">

         &nbsp;</td>

        </tr>

     </table>

تعمل ارتباط لملف الفوتر و الهدر هكذا
في رأس الملف الكلمة التالية {header}
و في الفوتر {footer}

بعد التعديلات على الملف تقوم بحفظ الملف بنفس الاسم home.html
في المرفقات - تجد الملفات التي يتوجب التعديل عليها