[الدرس الثامن]دورة تصميم ستايل منتدى باستخدام gimp

[Dawn birth]

??? ???? ?????? ??????
?????????
?? ??? ????? ????? ?????? ????? ??? ?????? ????????? ?????? ?? ????? ???? ??? ???? ????
??? ????? ??? ??? ??? ????? ????? ???????:

?????:
-???? ????? ???? ????????? ??????? ????? ??? ????????????????????.? ???????? ?????? gimp ?????? ??????? ????????? ??? ????????? ?? ?????? ???? ???? ??? ?bb_1_1.jpg?

???? ???:

?? ???? ????????? ?????? ?? ??? ?????? theme/images
-??? ??? ???? ????????? ????? :
????:

?????? ???? ?????????:
[url="http://www.bbcolors.com/up/do.php?filename=bbcolors_nav-icons.zip"]???[/url]
-?? ??? ????? ??? ????????? ?? ?????? theme/images ??????? ???? ???? ????
-???? ???? ??? overall_header.html
???? ?? ????? ?????? ??? ?????

كود: تحديد الكل

<div id="menubar">
        <table width="100%" cellspacing="0">
        <tr>
            <td class="genmed">
                <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->
                <!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
                <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
                <!-- IF not S_IS_BOT -->
                    <!-- IF S_USER_LOGGED_IN -->
                        <!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
                    <!-- ELSEIF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
                    <!-- ENDIF -->
                <!-- ENDIF -->
            </td>
            <td class="genmed" align="{S_CONTENT_FLOW_END}">
                <a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> {L_FAQ}</a>
                <!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
                <!-- IF not S_IS_BOT -->
                    <!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
                    <!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
                <!-- ENDIF -->
            </td>
        </tr>
        </table>
    </div>

-??? ??? ???? ??:

كود: تحديد الكل

<td colspan="2" style="background:url({T_THEME_PATH}/images/bb_1_2.jpg); width:100%; height: 163px;">

??? ???? :

كود: تحديد الكل

<div id="menubar">
      <table width="100%" cellspacing="0">
      <tr>
         <td class="genmed">
            <!-- IF S_USER_LOGGED_IN --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/logout.jpg"  /></a>&nbsp;
                                 <!-- ELSE -->
                                 <a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/login.jpg" /></a>&nbsp;
                                 <!-- ENDIF -->
            <!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/login.jpg" /></a><!-- ENDIF -->
            <!-- IF not S_IS_BOT -->
               <!-- IF S_USER_LOGGED_IN -->
               <!-- ELSEIF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/register.jpg"  /> </a>
               <!-- ENDIF -->
            <!-- ENDIF -->

            <a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/faq.jpg"  /> </a>
            <!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/search.jpg"  /> </a><!-- ENDIF -->
            <!-- IF not S_IS_BOT -->
               <!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/members.jpg"   /> </a><!-- ENDIF -->
               <!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/ucp.jpg" /> </a><!-- ENDIF -->
            <!-- ENDIF -->
         </td>
      </tr>
      </table>
   </div>

???? ??:

كود: تحديد الكل

<td style="width: 345px; height: 163px; background:url({T_THEME_PATH}/images/bb_1_0.jpg);">

??? ????:

كود: تحديد الكل

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<div class="loginform">
<form method="post" action="{S_LOGIN_ACTION}">
<span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" name="username" size="20" />&nbsp;<br />
 <span class="genmed">{L_PASSWORD}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span> <input class="post" type="password" name="password" size="20" />&nbsp;
<br /><!-- IF S_AUTOLOGIN_ENABLED --> <span class="gensmall">{L_LOG_ME_IN}</span> <input type="checkbox" class="radio" name="autologin" /><!-- ENDIF -->&nbsp;
 <input type="submit"   name="login" value="????" />
    {S_FORM_TOKEN}
    {S_LOGIN_REDIRECT}
    </form>
</div>
<!-- ENDIF -->
<div class="loginfo">

<!-- IF S_USER_LOGGED_IN -->
???? ????? ?? ?? {S_USERNAME} {LAST_VISIT_DATE}{UCP}

<br />
<!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO} <!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
<!-- ENDIF -->
</div>

-???? ??? stylesheet.css ???? ?? ??????:

كود: تحديد الكل

.loginform{
text-align:right;
line-height:18px;
width:250px;
padding:0px;
float:left;
margin-left:30px;
margin-top:0px;
font-weight:bold;
color:#fff;
}
.loginfo{
width:250px;
float:left;
margin-left:45px;
margin-top:0px;
font-weight:bold;
color:#fff;
}

-?? ?????? ??????? ?? ???? ?????? ????? ?????????
??? ?????? ?? ????? ?????? ???? ????