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

[Dawn birth]

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

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

???? ???:

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

?????? ???? ?????????:
???
-?? ??? ????? ??? ????????? ?? ?????? 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> <!-- ENDIF -->
                <!-- IF U_RESTORE_PERMISSIONS -->  <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 -->  <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
                <!-- IF not S_IS_BOT -->
                    <!-- IF S_USER_LOGGED_IN -->
                        <!-- IF S_DISPLAY_PM -->  <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) -->  <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 -->   <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 -->   <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 -->   <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> 
                                 <!-- ELSE -->
                                 <a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/login.jpg" /></a> 
                                 <!-- ENDIF -->
				<!-- IF U_RESTORE_PERMISSIONS -->  <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) -->  <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 -->   <a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/search.jpg"  /> </a><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST -->   <a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/members.jpg"   /> </a><!-- ENDIF -->
					<!-- IF S_USER_LOGGED_IN -->   <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" /> <br />
 <span class="genmed">{L_PASSWORD}       :</span> <input class="post" type="password" name="password" size="20" /> 
<br /><!-- IF S_AUTOLOGIN_ENABLED --> <span class="gensmall">{L_LOG_ME_IN}</span> <input type="checkbox" class="radio" name="autologin" /><!-- ENDIF --> 
 <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 -->  <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;
}

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