آموزش طراحی قالب وردپرس
#1
Note 
اموزش طراحی پوسته وردپرس در برنامه دریمویور

پیشگفتار :
مراحل اولیه کار :
1.قبل از هرکاری شما به یک نرم افزارکه بتونه نقش سرور را در رایانه شما ایفا کند نیاز دارید مانند نرم افزارهای easyPhp یا wampserver
2.مرحله دوم نصب این نرم افزار است که کار دشواری نیست و بصورت معمولی نصب خواهد شد.
3.این مرحله احتیاج به یک کم دقت دارد شما باید در ریشه نصب نرم افزار یک پوشه برای سایت خود ایجاد کنید.
مثلا من نرم افزار wampserver را نصب کرده ام پس باید به این ادرس بروم:
کد:
C:\wamp\www
دوستان توجه کنند که کار هردو نرم افزار شبیه به یکدیگر هستند و هیچ فرقی با هم ندارن و فقط کار با ومپ سرور راحتتره و پیشنهاد میکنم که از این نرم افزار استفاده کنید. بگذریم خلاصه شما باید درون پوشه www یک پوشه ایجاد کنید و نام ان را wp-tm بگذارید فرقی نمیکند شما اسم ان را چی بذارید فقط سعی کنید با من یکنواخت باشید تا دچار مشکل نشوید.

نتیجه مهم : پس در هر دو نرم افزار باید در پوشه www واقع در ریشه نصب ما باید پوشه سایتمون را ایجاد کنیم.
4. درون پوشه wp-tm که برای سایتتون ساختید سه پوشه دیگر با نامهای css,img,js
ایجاد کنید.یکی برای استایل سایت شما ویکی برای تصاویر به کار رفته در سایت شما واخرین هم واسه فایلهای جیکوثری است.
تا اینجا ما فقط وسایل ضروری را فراهم کردیم و هنوز شروع نکرده ایم.

پاسخ
#2
Note 
بالاخره ما کارمون را با نام و یاد خدا شروع میکنیم.
قبل از شروع کار شما باید یک سایت جدید تو دریمویور تعریف کنید برای این کار مراحل زیر را دنبال کنید و به توضیحات هر بخش توجه
فرمایید.

مرحله 1
.همانطور که در تصویر میبینید بر روی تصویر مورد نظر کلیک کنید.

[تصویر:  20140311-836-1.png]


مرحله 2
تنظیمات را همانند شکل زیر انجام دهید

[تصویر:  20140311-837-2.png]


مرحله 3
دقت فرمایید این مرحله خیلی حساس است.
بر روی گزینه server کلیک کرده و سپس روی علامت + کلیک کنید و تنظیمات را مقابل شکل زیر انجام دهید.

[تصویر:  20140311-837-3.png]

سپس روی گزینه Save کلیک کنید و تیک عبارت Testing را هم بزارید.


مرحله4
حالا نوبت ان رسیده که برای سایتمون یک پوشه تصاویر مشخص کنیم پس با توجه به شکل زیر انجام دهید

[تصویر:  20140311-918-4.png]

بر روی save کلیک کنید.کار تمام شد وشما موفق شدید یک سایت تو دریمویور تعریف کنید.
توجه: این تنظیمات لزومیترین تنظیمات برای سایت شما بود که من از بقیه تنظیمات چشم پوشی کردم.


آخرین ویرایش: 11-03-2014 ساعت 10:31، توسط WWWorker
پاسخ
#3
Note 
خوب برنامه دریمویور را باز کنیید و
کد:
file->new>php>create
کلیک کنید و یک فایل جدید باز کنیدو فایل را با نام index.phpدرون پوشه wp-tmذخیره کنید.


خوب شما الان تونستیید صفحه اول سایتتونو تعریف کنید خوب الان احتیاج به یک فایل استایل دارین پس:
کد:
file->new>css>create
را انتخاب کنید و یک فایل css جدید را باز کنیدو ان را با نام style.css تو پوشه wp-tm ذخیره کنید خوب الان باید شما این استایل را به صفحه اولتون فراخوانی کنید.
شما یک فایل استایل را به 2 صورت میتونیدبه یک صفحه فراخوانی کنید(منظور از فراخوانی در زبان وب اینه که اون فایل را به صفحه اعمال کنیم یا به صورت دیگر بخوام بگم ایینه که اون فایل را وارد صفحه کنیم)

1.بصورت External
[HTML]<link href="style.css" rel="stylesheet" type="text/css" />[/HTML]
2.بصورت Internal
[HTML]<style type="text/css">
@import url("style.css");
</style>[/HTML]

که فرق اینها در اینه که خاصیت ایمپورت بر خاصیت لینک ارجعیت دارد. خوب شما این استاییلتون را بصورت لینک به صفحه اعمال کنید اموزش این کار در دریمویور را درپایین ببینید.


توضیح: تو دریموییور پانل css styleرا باز کنیدو بر روی ایکونی که شبیه یک زنجیر است کلیک کنید (مطابق شکل 1) .

سپس یک کادر باز شده که شما باید در آن دکمه Browse را کلیک کنید و سپس فایل style.css را که درون پوشه wp-tm است را انتخاب کنید (مطابق شکل 2) و در اخر هم ok کنیدو کار تمام است شما تو دریمیور اینجوری باید فایلهای استایل را به صفحه فراخوانی کنید.

قبل از شروع ما باید یه تعداد کلاس و تگ برای صفحمون تعریف کنیم این کلاسها بسیار ضروری هستند که هر طراحی قبل از طزاحی باید انها را برای پوسته خود تعریف کند.من قبلا این کلاسها را طراحی کردم و فقط شما باید انها را درون استایلتون کپی کنید.
کد های زیر را درون style.cssکپی کنید

[CSS]/*
Theme Name: novindl
Theme URI:
Version: 1.0
Author: mohsen_golmohammadi
Author URI:
*/

*{margin:0;padding:0}
body{
font:11px tahoma,sans-serif;
color:#494848;
background-color:#f2efe9;
line-height:1.7;
margin:0;
padding:0 0;
text-align:right;
direction: rtl;
}
/* list */
ol,ul,li{
list-style:none;
direction: rtl;
}
/* link */
a,a:link{
text-decoration:none;
color:#4e4a3d
}
a:hover{
color:#07cfed
}
/* images */
img{
border-style:none;
}
/* text */
h1{padding:0px;margin:0px;font:bold 1.4em/1.6 Arial,sans-serif}
h2{padding:0px;margin:0px;font:bold 1.4em/1.6 Arial,sans-serif}
h3{padding:0px;margin:0px;font:bold 1.3em/1.6 Arial,sans-serif}
h4{padding:0px;margin:0px;font:bold 1.2em/1.6 Arial,sans-serif}
/* class */
.left{
float:left;
margin: 0px 10px 0px 0px;
}
.right{
float:right;
margin: 0px 0px 0px 10px;
}
.clear{clear:both;height:0;line-height:0;font-size:0}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;height:0}
*:first-child+html .clearfix{min-height:1px}[/CSS]

از کدهای بالا نترسیید چون فرض کنید این کدها پیش فرض هستند و شما میتوانید برای هر پوسته یا سایتی از ان استفاده کنید.
البته حتی شما میتوانید انها را تغییر دهید.
خوب حلا همه فایلهاتون را ذخیره کنید و درون صفحه index.php عبارت test را وارد کنیدو ذخیره کرده سپس کلید f12 را برای نمایش پوسته درون مرورگر فشار دهید اگر عبارت فوق را مشاهده کردید هیچ مشکلی نیست در غیر این صورت:
  1. مطمئن باشید که نرم افزار wampserver در حال اجراست
  2. مطمئن باشید تمام سرویسهای نرم افزار فوق فعال هستند
  3. ممکن است در تعرییف سایت تو دریمویور اشتباه کرده باشید پس تمام اینها رو چک کنید.


خوب دیگه داره وقت اون میرسه که باید کم کم کار عملی را شروع کنیم
اما قبل از این یک توضیع بسیار مهم درمورد div id و div class باید بدهم تا شما با یک قانون کلی اشنا شوید


div چیست؟
خیلی ساده بخوام بگم یعنی مرز بین عناصر وب را دیو میگویند.(البته معنی کتابی و علمیشو نمیدونم اما من اینجوری
معنی کردم که درک ان برای شما راحت بشود)
این بدان معنی است که بوسیله دیوها ما صفحات سایتمون را به بخشهای مجزا تقسیم میکنیم.
ما برای دیوها میتوانیم استاییل تعریف کنیم یعنی میتونیم مثلا طول و عرض ورنگ زمینه وفونت یا هر چیز دیگر برای ان تعریف
کنیم.و مطالب و تصاویر یا هر چیز دیگر را درون ان بگنجانیم.
دیوها را میتوان به دو گونه تقسیم کرد:
  1. div id
  2. div class

این دوتا چی هستند؟اصلا اون پسوند که بعد از اون اومده چیه و به چه دردی میخوره؟
فرض کنید شما صفحات سایتتون را با یک دیو بدون این پسوندها تقسیم کنید.
منظور من یک دیو تنها نیست هر تعداد دیوی است که شما استفاده کرده اید بزارین با مثال بگم ما تو صفحمون داریم:

[HTML]
<div>hello</div>
<div>this is my site</div>
<div>how are you?</div>[/HTML]

ما بوسیله دیو مطالب خود را مجزا کرده ایم اما حالا چگونه به انها استایل دهیم؟شاید به ذهن شما برسد که میتوان استایل را به صورت inline وارد کرد که این راه خوبی است اما....ایا شا میخواهید تمام این استایلها رو تو صفحتون بنویسید؟

پس تکلیف فایل style.css چی میشه؟

پس اینجاست که اون دوتا پسوند به داد ما میرسند تا بتوانیم استایل دیوها رو تو فایل style.css بنویسیم.با مثال بگم مثلا همون کد قبلی
[HTML]
<div id="hi">hello</div>
<div class="info">this is my site</div>
<div id="how">how are you?</div>
[/HTML]
که در این صورت ما تو استایل میتوانیم بنویسیم

[CSS]#hi {
}
.info {
}
#how {
}[/CSS]

امیدوارم که مطلبو گرفته باشید/

حال پس فرق بین div class و div id در چیه و ما چه وقت باید از کدام یک استفاده کنیم؟
یک قانون کلی داریم که میگه div id یکتاست یعنی که شما میتوانید فقط یک بار از یک id در یک صفحه استفاده کنید با مثال میگم شما تو صفحتون اینو دارید
[HTML]<div id="hi">hello</div>[/HTML]

پس شما دیگه از این id نمیتوانید استفاده کنید یعنی دیگر نمیتوانید از id به نام hi استفاده کنید بلکه باید با یک نام مجزای دیگری استفاده کرد مثلا

کد:
<div id="good">hello</div>

اما div class از این قانون مبراست و شما میتوانید بارها و بارها ار یک کلاس استفاده کنید
خوب درس امروز هم تموم شد و از جلسه بعد کار عملی در پیش داریم.

دانلود فیلم اموزشی به حجم 500KB
pass:00123000000

پاسخ
#4
Note 
سلام
امروز میخواهیم دیگه کار عملی را شروع کنیم اما قبل از اون اگر مطالب قبل را مطالعه نکرده اید لطفا اول انها را مطالعه کنید.
اول کار میخواهم چگونگی تعریف div id و div class و وارد کردن انها در صفحه شما با دریمویور را توضیح دهم پس من این اموزش را بصورت کامل بیان میکنم تا در اینده اگه گفتم فلان کلاس یا ایدی را وارد صفحه کنید شما چگونگی این کار را فرا گرفته باشید.

چگونه یک div class و div id را تعریف و داخل صفحه کنیم?
برای این که شما یک div class یا div id را وارد صفحه کنید از منو بالا insert > layout Objects > Div tag را انتخاب کنید.
یک کادر برای شما باز خواهد شد مثل تصویر زیر که به معرفی بخش های ان میپردازیم.

اگر میخواهید که یک کلاس تعریف کنید تو کادر: class نام یک کلاس را وارد کنید اسمها مهم نیستند مهم اینه که شما اون اسمها رو به خاطر بسپارید.
اگر میخواهید یک div id وارد صفحه کنید در کادر id: یک اسم را وارد کنید.
شما الان فقط یک کلاس یا ادی را انتخاب کردید اما هنوز وارد صفحه نکردین برای این کار دو دکمه برای شما تعبیه شده است که ما به ویزگی هر کدام می پردازیم.


دکمه ok
با زدن این دکمه اسمی که برای یک id یا class انتخاب کردید مستقیم وارد صفحه میشود البته کاربرد این دکمه زمانی است که شما قبلا یک id یا class را درون فایل style.css تعریف کرده باشید که در این صورت تو کادهای کلاس و ایدی میتوانید ان را انتخاب کنید و ok را بزنید و وارد صفحه کنید.

دکمه new css Rule
این دکمه برای زمانی است که شما یک کلاس یا ادی جدید میخواهید تعریف کنید
که با این دکمه میتوانید برای ان استایل مشخص کنید که پس از زدن این دکمه یک کادر بصورت زیر نمایان میشود
مثلا من تو کادر کلاس عبارت test را تایپ و سپس دکمه new css Rule را میزنم.
من بعد از زدن دکمه new css Rule با کادر بالا مواجه میشوم که به توضیح بخش های ان می پردازیم.


کادر selector tyle

این کادر زمانی بدرتون میخوره که شما بخواهید نظرتون را عوض کنید مثلا من تو بالا یک کلاس با نام test نوشتم اما الان نظرم عوض میشه و میخوام اون test را بصورت id در بیارم که از این کادر عبارت ID (applies to only one HTM|L element) انتخاب میکنم.


کادر select name

اگر تو انتخاب نام منصرف شده اید ار این کادر تغییر نام دهید.

کادر Rule Definition

این کادر بسیار بسیار مهم و کاربردیه دقت فرمایید که شما میتوانید دراین کادر مشخص کنید که استایل این کلاس یا ایدی درون کدام فایل استایل نوسته شود اگر شما استایلی را به صفحتون فراخوانی کرده باشید اسمش تو این کادر میاد اما اگر شما استاییلی را به صفحه فراخوانی نکرده باشیید دو انتخاب دارید:
1.this Document only : استایل مورد نظر را در همین صفحه تو بخش HED صفحه مینویسد
2.new css Rule file : با انتخاب این گزینه برنامه یک فایل css جدید را در پوشه ای که شما انتخاب میکنید ذخیره و به صفحه لینک میدهد و هم اون استاییل خاص را توی اون مینویسد .

خوب به هر حال تنظیمات خود را انتخاب کنید و با زدن دکمه ok با یک کادر نهایی مواجه می شوید که شما توی اون استایل کلاس یا ایدی مورد نظر را تعریف میکنید.


من دیگه با این کادر کاری ندارم و توضیح نمیدهم چون انوقت باید کل دریموییور را براتون توضیح دهم شما مییتوانید از پستهای قبل که بصورت مهم در امده اند این کادر و ویزگیهای ان را فرا بگیرید پس من در اینده به کارهایی میپردازم که با انها سروکار داریم.
خلاصه تو این کادر شما ویزگی اون div را مشخص میکنید و با زدن دکمه ok کار تمام میشود و شما اون دیو را به همراه استایلش وارد صفحه میکنیید.

فقط یک بخش مهم میمونه که اون هم محل جا گذاری دیوها است که تو عکس اول میبینید که تو درس بعد به ان میپرداریم که میخواهیم صفحه خود را با این دیوها بخش بندی کنیم.



دانلود فیلم اموزشی درس3 به حجم 700KB

پاسخ
#5
Note 
تو این درس شما می اموزید که چگونه با دیوها صفحات سایتتون را بخش بندی کنید.
ما صفحه سایت خود را باید به صورت زیر در بیاریم تا بتونیم شکل کلی سایتمون را طراحی کنیم.

[تصویر:  08424698769610328125.png]

تصویر بالا نقشه کلی پوسته ما را تشکیل می دهد پس ما باید اول پوسته خود را مثل تصویر بالا با دیوها تقسیم کنیم .
همانطور که در بالا می بینید ما صفحه خود را با div id تقسیم کردیم چرا؟ چون مثلا دیو header فقط یک تا است نه چند تا یا ما فقط یک footer در صفحه داریم نه چندتا ما بقی هم همینطور.

شروع کار با دریمویور :
برنامه را اجرا کنید وفایل index.php را توش باز کنید
  • از منو بالا insert > Layout objects > Div tag را انتخاب کنید.
  • توی کادر ظاهر شده تو قسمت id: عبارت warpaper را تایپ کنید.
  • روی دکمه new css Rule کلیک کنید.
  • در کادر ظاهر شده تو قسمت Rule Difination را روی style.css تنظیم کنید.

روی ok کلیک کنید و در کادر جدید تب Box را باز کنید و مانند تصویر زیر انجام دهید.

[تصویر:  61216158672994851445.png]

توضیح: همانطور که من قبلا گفتم این کادر برای استایل نویسی دیوها به کار میرود حالا ما برای دیو warpaper چه استایلی تعریف کردیم؟
ما تو کادر بالا گفتیم که طول این دیو برابر با 960 px و وسط چین باشد یعنی با خاصیت margin: 0px auto; این کار امکان پذیر است.
خوب بر روی ok کلیک کنید تا div id warpaper وارد صفحه شود.
متن داخل div id warpaper را پاک کنید یعنی متن Content for id "warpaper" Goes Here و از منو بالا insert > Layout objects > Div tag را انتخاب کنید سپس در کادر جدید در قسمت id: نام header را وارد کنید و تنظیمات را کامل کنید تا به کادر زیر برسید و تنظیمات ان را انجام دهید:

[تصویر:  59779961930415275202.png]

و مثل قبل ok کنید تا div id header وارد div id warpaper شود.
حالا ما باید بعد از div id header یک id به نام nav وارد div id warpaper کنیم.
از منو بالا insert > Layout objects > Div tag را انتخاب کنید سپس در کادر جدید در قسمت id: نام nav را تایپ کنید و در همون کادر تنظیمات زیر را انجام دهید تا div nav بعد از div header قرار گیرد:

[تصویر:  75848432543001194451.png]

قبل از شروع ادامه کار باید در مورد محل قرار گیری دیوها یک توضیحاتی باید بدم تا در اینده دچار مشکل نشوید.
به insert: توجه کنید این کادر دارای چند گزینه است که به معرفی بخش های ان می پردازیم.
1. At insertation point دیو جدید را هرجا که کلیک کرده اید وارد می کند
2. Befor tag دیو جدید را قبل از دیو انتخابی شما قرار می دهد که دیو انتخابی شما در کادر راست این کادر انتخاب می شود
3. After start of tag دیو جدید را درون دیو انتخابی و در اول ان دیو قرار می دهد.
4. Befor end of tag دیو جدید را درون دیو انتخابی و قبل از تمام یا بسته شدن ان قرار میدهد.
1. After tag دیو جدید را بعد از دیو انتخابی شما وارد می کند.
خوب بر روی new css rule کلیک کنید و ما بقی کار را خودتون انجام دهید مثل تصویر زیر فقط یک نکته مهم که تمام دیوها یا تگهایی که ما تو این پروزه به ان می پردازیم باید استایل انها درون فایل Style.css
نوشته شوند پس حواستون باشه که همیشه Rule Definition روی style.css تنظیم باشد.

[تصویر:  49314642447706001165.png]

*تصویر بالا تنظیمات #nav است
  • یک id به نام container بعد از div nav قرار دهید.
  • یک id به نام footer بعد از div id container قرار دهید.

شکل نهایی باید به صورت زیر باشد:

[تصویر:  78578352288692859982.png]

دانلود فیلم اموزشی درس4 قسمت اول به حجم 500KB

پاسخ
#6
Note 
خوب تو این درس می خواهیم sidebar ها و maincont را بسازیم در ضمن باید به عرضتون برسونم که این مبحث بسیار مهم است و ریزه نکات ظریفی دارد و شما باید این مبحث را با دقت بیشتری مطالعه کنید.
شما در این درس با کلاس clear اشنا می شوید.
· فایل index.php را باز کنید و متن داخل container را پاک کنید و از منو بالا insert > Layout objects > Div tag را انتخاب کنید
در کادر id: نام sidebar-left را وارد کنید وnew css rule را کلیک کرده و بقیه مراحل را همانند قبل انجام دهید و در پایان تب box را انتخاب کنید و تنظیمات را با توجه به تصویر زیر انجام دهید.

[تصویر:  48638322538065533378.png]

و در پایان کلید ok را بزنید.
حالا نوبت maincont است پس از insert > Layout objects > Div tag انتخاب کنید و اسم id را maincont بگذارید سپس در insert: گزینه After tag را انتخاب و از کادر روبرو sidebar-left راانتخاب کنید و new css rule را کلیک کنید و با توجه به شکل تب box را تنظیم کنید.

[تصویر:  85445534244089565003.png]

ساخت sidebar-right از منوی بالا insert > Layout objects > Div tag را انتخاب کرده و یک id با نام sidebar-right بعد از maincont وارد کرده و تنظیمات box ان را با توجه به تصویر زیر انجام دهید.

[تصویر:  42617761388054660202.png]

خوب کار تمام شد اما یه مشکل ما سه تا id به نام های sidebar-left,maincont,sidebar-right را وارد container کردیم اما ظاهرا این container ناپدید شده و ما مثلا رنگ پس زمینه ان را ابی کنیم توی مرورگر هیچی نشون نمی دهد هنگار که اصلا چنین چیزی نبوده اگه به فایل style.css یه نگاهی بیندارید یک کلاس می بینید به نام .clear این کلاس واسه چنین شرایطی تعریف شده که با وارد کردن ان id ما نمایان می شود.
پس این بار در کادر class: کلاس .clear را انتخاب کرده و گزینه insert: را روی After tag تنظیم کنید و در کادر روبرو #sidebar-right را انتخاب کنید و مستقیما ok کنید تا این کلاس وارد شود وشما متن داخل ان را پاک کنید و صفحه را ذخیره کنید.

دانلود فیلم اموزشی درس4 قسمت دوم به حجم 530KB

پاسخ
#7
Note 
امروز می پردازیم به هدر سایت و تنظیم های ان و این درس بسیار کوتاه است.
قبل از شروع کار لطفاً این تصویر رو دانلود کنید و ان را تو پوشه img واقع در پوشه wp-tm کپی کنید و سپس ان را از حالت فشرده خارج کنید.
پسورد : 00123000000

خوب برنامه دریمویور را باز کرده و فایل index.php را در ان اجرا کنید سپس تو پانل css styles روی ایدی header دوبار کلیک کنید.
سپس تو کادر باز شده تب Background را باز کنید اینک دکمه Browse را زده و از تو پوشه img تصویر header.jpg را انتخاب کرده و دو بار ok کنید.

[تصویر:  88110576358481621121.png]

همه پرونده ها رو ذخیره کرده و کلید F12 را فشار دهید تا حاصل کار را در مرورگر مشاهده کنید
اکنون بر روی ایدی #warpaper دو بار کلیک کنید و تو تب Background رنگ Background-color را روی سفید {#FFF} تنظیم کنید.

پاسخ
#8
Note 
حالا نوبت به منوی سایت می رسد و شما تو این درس با خاصیت لینکها در حالت معمولی و هم تو حالت hover و از جهتی هم با انواع لیستها هم اشنا می شوید
لینک : نوشته یا تصویری است که با کلیک بر روی ان مرور گر به صفحه مورد نظر تغییر مسیر می دهد.
ما لینک ها رو در 4 حالت می توانیم قرار دهیم و هم می توانیم برای هر حالت استایل جدید مثلا رنگ متن –فونت-زیر خط دار یا ..........
تعریف کنیم که این 4 حالت عبارتند از :
1. a:link این حالت معمولی لینک است و ما در این حالت موس را بر روی ان نبرده ایم.
2. a:hover به حالتی گویند که موس بر روی لینک است اما هنوز کلیک نکرده ایم.
3. a:active به حالتی گویند که ما بر روی لینک کلیک کرده ایم اما کلیک را هنوز رها نکرده ایم.
4. a:visited به حالتی گویند که ما روی لینک کلیک کرده و رها می کنیم.

همچنین می پردازیم به لیستها که ما دو نوع لیست داریم
- لیست های مرتب(ol):

1. لیست
2. لیست
3. لیست


- لیستهای نا مرتب(ul):

· لیست
· لیست
· لیست

خوب بهتره دیگه ما به صورت عملی با اینها اشنا بشویم.

درون #nav در صفحه متن داخل ان را (Content for id "nav" Goes Here) پاک کنید و از منو بالا insert > Layout objects > Div tag انتخاب کنید و یک ایدی با نام search-top وارد nav کنید و خاصیتهای ان را به صورت زیر تعریف کنید.

[تصویر:  63506590693111655119.png]

حالا یک ایدی با نام menu بعد از ایدی search-top وارد صفحه کنید و به ان خاصیت های زیر را بدهید.

[تصویر:  85241451916859102332.png]

حالا متن داخل menu را پاک کنید و از insert > html > text objects > unordered list را انتخاب کنید و کلمه صفحه اصلی را تایپ کنید سپس inter را بزنید و کلمه ارشیو و اینتر و کلمه جستجو و اینتر و کلمه تبلیغات و اینتر و کلمه تماس با ما و اینتر را بزنید حالا یک نگاه به قسمت کدها بیندارید کد شما باید مثل زیر باشد:

[HTML]<div id="menu">
<ul>
<li>صفحه اصلی</li>
<li>ارشیو</li>
<li>تبلیغات</li>
<li>جستجو</li>
<li>تماس با ما</li>
</ul>
</div>[/HTML]

سپس به همه کلمات یک لینک پوچ مثل # یا javascript:; بدهید
تصویر شما باید به شکل زیر شده باشد.

[تصویر:  14122018413134684775.png]

حالا برای افزایش سرعت کار کدهای زیر را به style.css اضافه کنید:

[CSS]#menu li { float: right; }
#menu li a { color:#FFF; display:block; font-family:tahoma; font-size:11px; font-style:normal; font-variant:normal; font-weight:normal; line-height:14px; margin:5px 5px 0; padding:0 0 5px 5px; text-align:center; text-decoration:none }
#menu li a:hover { color: #000; background-color: #acaaaa; }[/CSS]

شکل نهایی

[تصویر:  16774399195816744131.png]

دانلود فیلم اموزشی درس 5 و 6 بخش اول به حجم 2.5MB

منبع: انجمنهای مجید آنلاین

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش نکات تکمیلی برای طراحی وبسایت تجاری sheyda69 0 160 06-09-2016 ساعت 16:24
آخرین ارسال: sheyda69
  آموزش سئو و بهینه سازی وب سایت در سایت ساز پرتال portal 0 104 21-08-2016 ساعت 08:05
آخرین ارسال: portal
Note آموزش استاندارد سازی قالب به سبک W3C (رفع خطاها) Behnam Designer 4 1,441 23-01-2015 ساعت 15:30
آخرین ارسال: Stack OverFlow
Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 2,465 23-10-2014 ساعت 17:08
آخرین ارسال: rockstar
Note آموزش ساخت سایت shahab 1 562 23-07-2014 ساعت 22:04
آخرین ارسال: Stack OverFlow
Note آموزش Canvas در HTML5 C0der 2 641 15-12-2013 ساعت 23:56
آخرین ارسال: BaNNer LorD
Note آموزش ajax نگار 1 482 23-11-2013 ساعت 22:00
آخرین ارسال: maJID maGIC
Note آموزش CSS : طراحی نمای صفحه در حالت پرینت zare 0 529 12-02-2013 ساعت 10:10
آخرین ارسال: zare

کاربرانِ درحال بازدید از این موضوع:   1 مهمان