راهنمایی و آموزش مرجع و آسان طراحی وبسایت

شروع موضوع توسط DaRiOuShJh ‏25 فوریه 2008 در انجمن مسایل عمومی طراحی و توسعه‌وب

وضعیت موضوع:
موضوع بسته شده است.
  1. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    دوستان با توجه به تقاضا های شما دوستان این آموزشه کوچیک و ساده رو نوشتم اگر طرفدار داشت کاملترش هم میکنم
    سوالاتتون رو همینجا بپرسید[​IMG]

    1.

    قالب چیست؟

    به مجوعه کدها، عکس ها و ... ای که شامل یک سند html و ... میگن قالب یا template
    حالا شما میری و مثلا تو سایت های مختلف قالب های مختلف رو میبینی و چند تایی که خوشت میاد رو میگیری و دانلود میکنی رو کامپیوترت

    قالب از کجا بیاری؟

    سایت به این منظوره زیاده تو نت!
    تنها کافیه که این عبارت رو کامل و به همین صورت جستجو کنی در گوگل (شامله دو ")

    "free website template"

    2.

    حالا شما قالب رو گرفتی و اونو از حالته آرشیو خارج کردی
    معمولا شامله این موارد میشه

    2.1 یک سند html به نامه index.htm
    2.2 یک directory یا folder به نامه images
    2.3 عکس های یه کار رفته در قالب در فولدره images و در موارده لزوم فایل های js و ...
    2.4 style.css
    2.5 در بعضی موارد فایل های سورس یا استفاده یه شده شامله:
    psd
    swf
    fla
    swi
    txt
    font
    و...

    در کل شامله این موارد میشن فایل هاتون که بستگی به اینکه از کجا و در چه موردی گرفته باشید ممکنه جاشون یا خودشون عوض شه که راحت میتونید تشخیص بدیدشون

    ----------------------------

    2.1 این سند فایله اصلیه قالب حساب میشه و باید تمامه تغییرات در اون داده بشه
    تمامی کدها و ... در این سند قرار دارند
    معمولا شامله لینک های خالی ای هم به about, home, contact us و ... میشه که شما بعد از انجامه تغییراتی که دوست داشتید و ایجاده صفحاته این قسمت ها میتونید این قسمت ها رو به صفحات مذکور link کنید

    2.2 و 2.3 شامله object ها و عکس های استفاده شده در سنده index.htm میشه
    تمامیه این موراد باید با همین نام و در همین فولدر آپود بشن تا مشکلی پیش نیاد
    اگر هم خواستید در عکس ها تغییری بدید یا باید با همون اسم و همون سایز (دقیقا مشابه) save کنید یا اینکه به برنامه نویسی و زبان های html و css اشناییه لازم رو داشته باشید

    2.4 شامله کدهای style و طرزه قرارگیریه object ها در سنده index.htm میشه
    در مواردی کدهای اضافی ای هم برایه قسمت هایی که هنوز استفاده نشدند و ممکنه در آینده اضافه بشن هم هست
    اگر به css آشنایی ندارید دست کاری ممنوع!

    2.5 این فایل ها در بعضی قالب ها پیدا میشن
    در این موارد از این برنامه ها استفاده کنید

    psd --> photoshop
    fla --> Marcomedia Flash
    swi --> Swish

    و ...

    3.

    در ویرایشه سند html یا هر سنده دیگری یادتون باشه که حتما قبل از اعماله تغییرات و در مواقعی خراب کاری!!! یک copy از فایله مذکور گرفته باشید

    فونت های استاندارد و تعریف شده و شامله ساپورته فارسی از این قرارند:

    tahoma
    times new roman
    arial
    comic sans MS

    این فونت ها در تمامیه سیستم ها به صورته استاندارد تعریف شده و نصب هستند و کاربر در هنگامه مشاهده و استفاده از سایت دچاره مشکلی نمیشه

    تذکر: اگر تمایل به استفاده از فونت های دیگری در صفحات دارید به شما پیشنهاد میکنم که آنها را به گرافیک ویا عکس تبدیل کنید
    مثلا به فایلهای فلش .swf یا عکس هایی با پسوند .jpg و .gif

    4.

    همانطور که قبلا هم اشاره شد باید برای درست کردنه صفحات دیگر به جز صفحه اصلی، سند هایه دیگری بسازید
    راحت ترین کار در هنگام استفاده از قالب ها گرفتنه copy از خوده سند index.htm در کناره آن و تغییره نام آنها مثلا به این موارد میباشد

    contactus.htm
    aboutus.htm
    links.htm
    products.htm
    و...

    اگر هم عکسی یا مطالبی برایه این قسمت ها و صفحات در نظر دارید تو یه هر قسمت قرار میدید

    و در انتها کلیه فایل ها رو آپلود میکنید[​IMG]

    به همین سادگی میتونید صاحبه یک وبسایت بشید

    DARIO[​IMG]USHJH
     
    نوشته شده توسط DaRiOuShJh در ‏25 فوریه 2008
    erfanre، ruhollah2009، designer joomir و 60 نفر دیگر از این ارسال تشکر کرده اند.
  2. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    آشنایی تصیوری با یک صفحه

    [​IMG]
    با عرض سلام و خسته نباشید خدمته شما دوسته عزیز
    میخوایم با هم به زبونه خیلی ساده و راحت با کدهای پایه و ترکیبیه زبونه HTML و مقداری هم زبون های CSS و JavaScript آشنا بشیم
    .: مقدمه:
    همونطور که میدونید زبونه قدیمی و پایه برنامه نویسی تحته وب HTML هست که خود شامله چند تایی کدهایه اصلی و همینطور متغیر های وابسته یه این کدها میشه هست، بعدها زبان هایه دیگه ای برایه کاملتر کردنه این زبون وارده کدنویسیه تحته وب شدن که با ادغام و استفاده از همون کدهایه فرعیه قبل، امکاناته بیشتری رو به طراحان دادند
    ما اینجا میخوایم با کمکه عکس با کدهایی که معمولا در یک صفحه ممکنه مواجه بشیم آشنایی پیدا کنیم
    تذکر: من اینجا به طور خلاصه هر قسمت رو توضیح میدم، پیدا کردنه اطلاعات کاملتر و جامع تر و همینطور آنایی کامل با کدها و متغیرهای هر کدوم بر عهده یه خودتون هست
    من برایه راحت تر شدنه تفکیکه هر قسمت، قسمت هایه مختلف مربوط به گروه کدها رو های لایت کردم
    .: توضیحاته قسمتها:
    1. نوعه سنده شما رو مشخص میکنه، متغیر هایه مختلفی رو میگیره (از این قسمت میتونید سمتی رو که میخواید اسکرول بار به نمایش در بیاد با تغییره به این کد تعریف کنید:)
    <html dir="rtl" lang="fa">
    2. دستوراتی هستند که به صورته comment و فقط در source یا همون منبعه صفحات به نمایش در میان، در مرورگر نشون داده نمیشند
    3. هر سنده HTML از دوقسمته اصلی تشکیل میشه
    HEAD که شامله اطلاعاته معرفی سند به مرورگر و نوعه محتوا و ... میشه (در محتوایه صفحات نقشه چندانی نداره)
    BODY که بدنه یه سند هست؛ یعنی کلیه مطالبی که قراره در صفحه نشون داده بشه در این قسمت قرار میگیرن؛ در آینده بیشتر آشنا میشیم با این قسمت...
    4. META TAG ها تقریبا اولین پله ارتباطی بینه مرورگر یا همون browser و سنده شما هستند، علاوه بر این نقشه مهمی رو در index شدنه صفحات شما در موتورهای جستجو و همینطور Rnking صفحه و زیر شاخه بندی و ... سایت دارن پس به اونها خیلی توجه داشته باشید و کامل پر کنیدشون
    4.1 خطه 8: در این قسمت شما کلماته کلیدیتون رو با توجه به محتوایه سایت و صفحتون میزارید به جایه عبارته keywords!!!
    معمولا شامله چند مورد میشه که هر مورد رو با ویرگول و فاصله جدا میکنید
    4.2 خطه 9: توضیحی مختصر و کوتاه از سایتتون و محتواش به جایه عبارته Description!!!
    4.3 خطه 10: به مرورگر میگه که باید کدها و نوشته ها چون فارسی هستند یونیکد بشه تا عجق مجق نشون نده
    4.4 خطه 11: ماننده خطه 14 میگه که مطالب و زبونه سایت فارسی هست
    4.5 خطه 12 و خطه 15: سایته شما رو در شاخه یه عمومی دسته بندی میکنه، اگه خواستید تغییر بدید
    4.6 خطه 13: موضوعه سایته شما
    4.7 خطه 16: به مرورگر میگه که برایه عکس های صفحه image toolbar رو نیاره
    5. کده الصاقه فایله CSS خارجی external در صفحه (در سایت هایه پر صفحه و انجمن ها خیلی میتونه در حجم و سرعته بالا اومدنه load صفحه تاثیر گزار باشه)
    6. یه نمونه کده جاوا اسکریپت که یه صورته inline در صفحه قرار گرفته و کارش اینه که نزاره مرورگر اگه مشکلی در کدهایه جاوااسکریپته صفحه دید به کاربر بگه
    7. ماننده مورد 5 یک کده CSS ولی ایندفه به صورته inline
    با این کد عکسه شما در پشته صفحه در وسط و به صورت چفت شده fix نشون داده میشه
    8. در این قسمت هم متنی رو که در بالایه پنجره یه مرورگر نشون داده میشه میدید (میتوه نامه سایت، نامه صفحه و ... باشه)
    9. </head> یعنی به پایانه قسمته HEAD سند رسیدیم
    10. از اینجا به بعد با کدی که گزاشته شده وارده قسمته بدنه یا BODY سند میشیم
    11. این کد همون کده <body> هست ولی چند تا متغیر هم بهش اضافه کردیم
    11.1 ثابت شدنه بک گراند در صورته وجوده عکس
    11.2 فاصله از بالا و سمته چپه صفحه صفر پیکسل باشه
    11.3 رنگه زمینه یه صفحه مشکی باشه (000000 در کدهای RGB یعنی red green blue به معنیه کم رنگ بودن و عدمه رنگ داشتنه هر 3 رنگه قرمز، سبز، و آبی هست که معادله مشکی هست، در نقطه یه مقابل FFFFFF نشانگره پر رنگ بودنه هر سه رنگ در نتیجه سفید بودنه رنگ میشه، به همین تریب با مقادیره مختلف میشه رنگ هایه مختلف رو به درست آورد)
    12. کده الصاقه سنده جاوا اسکریپته خارجی (ماننده مورد 5)
    13. نمونه ای از استفاده از کدهای div, table,td,tr و همنطور کده IFRAME که امکانه لود شدنه صفحه ای دیگر در صفحه یه شما رو میده و متغیرهای یه هر کدوم (برایه مشاهده یه کده کامل به فایله ضمیمه مراجعه کنید)
    14. نمونه ای از EMBED کردن آبجکت ها
    در این مورد فایله مورده نظر یک فایله فلش هست که تنظیماته خودش رو داره (سادن نیازی به توضیح نمیبین
    15. این هم کده img که مخصوصه وارد کردنه فایل های عکس image به سند و نمایشه اونهاس border به معنیه حاشیه، لبه ای برایه عکسه شما درست میکنه که با 0 گزاشتنه مقدار نمایش داده نمیشه
    16. در این قسمت قسمته بدنه هم به پایان رسیده
    17. پایانه سنده HTML و والسلام!!!

    --------------------------------------------------------------------------------
    امیدوارم این آموزش به کاره شما اومده باشه
    موفق و موید باشید...:12:
    .: DaRiOuShJh :.
    اینم لینکه دانلوده آموزش + عکس + فایله نمونه (106 کیلوبایت)
    http://www5.webng.com/darioushjh/designes/htmllearning/djh_html_learning.zip
     
    نوشته شده توسط DaRiOuShJh در ‏25 فوریه 2008
    ruhollah2009، delaram8، designer joomir و 33 نفر دیگر از این ارسال تشکر کرده اند.
  3. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    از مدیرانه محترم میخواستم بپرسم امکانه مهم کردنه این 3 تاپیک هست آیا یا نه؟
    چون من تالاره وبه اونجا رئ میچرخوندم و مهم بودنه این 3 تاپیک به خیلی ها کمک میکرد
    حالا که به دلایلی دیگه اونجا نمیرم میخواستم بدونم میشه اینجا مهم کنید که ادامه بدم یا نه
     
    نوشته شده توسط DaRiOuShJh در ‏27 فوریه 2008
    designer joomir، hr1510، Violet89 و 13 نفر دیگر از این ارسال تشکر کرده اند.
  4. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,830
    امتیاز دستاورد:
    113
    درود بر شما سپاسگزارم از مطالب مفید شما
    بله، حتما این کار خواهد شد.
     
    نوشته شده توسط echessdesign در ‏27 فوریه 2008
    designer joomir، hr1510، Violet89 و 14 نفر دیگر از این ارسال تشکر کرده اند.
  5. radan

    radan New Member

    ارسال‌ها:
    1
    تشکر شده:
    5
    امتیاز دستاورد:
    1
    سلام به همه دوستان
    درمورد قرار گرفتن عکس درtable سوال داشتم .آیا دستوری هست که عکس دلخواه را دقیقادر یک سلول از یک Table قرار بدیم و اصطلاحا stretch بشه?(کاملا در اون قرار بگیره )
     
    نوشته شده توسط radan در ‏12 آوریل 2008
    designer joomir، Violet89، sahar6890 و 2 نفر دیگر از این ارسال تشکر کرده اند.
  6. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    شما باید نسبت به سایزه عکس کار کنید
    چون گرافیک های پیکسلی با تغییره سایز کیفیتشون هم خراب میشه
    بیشتر توضیح بدید
    کاره ساده ای هست
     
    نوشته شده توسط DaRiOuShJh در ‏30 آوریل 2008
    designer joomir، Violet89، nachit و یک نفر دیگر از این ارسال تشکر کرده اند.
  7. mohammad6006

    mohammad6006 Member

    ارسال‌ها:
    80
    تشکر شده:
    9
    امتیاز دستاورد:
    6
    سلام

    دستتون درد نکنه واقعا آموزش زیبایی بود

    ولی من یه سوال داشتم ازت هر کاری میکنم اینو نمینویسه چیکار کنم ؟

    <?php
    echo "dariush is banned from .....ok
    ?>
    looooooooooooooooll
    قربونت یه راهنمائی کن :eek: دلم برات تنگ میشه یه جوری برگرد
     
    نوشته شده توسط mohammad6006 در ‏30 آوریل 2008
    designer joomir، Violet89، topol2007 و 2 نفر دیگر از این ارسال تشکر کرده اند.
  8. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    :)به به به!
    والا خودمم گم شدم تو این همه فروم و تالار و ....:eek::razz:
    خواهش و ممنون
    امیدوارم همینجا ها باشم هی!
     
    نوشته شده توسط DaRiOuShJh در ‏14 می 2008
    designer joomir، Violet89، mohsen_blid و یک نفر دیگر از این ارسال تشکر کرده اند.
  9. mohsen_blid

    mohsen_blid Active Member

    ارسال‌ها:
    185
    تشکر شده:
    35
    امتیاز دستاورد:
    28
    منتظرم یه اموزش کلی بزاری و حتما ان را به صورت پی دی اف قرار بدی تا دیگه از این جور مشکلات نداشته باشیم و منبع کامل باشه
     
    نوشته شده توسط mohsen_blid در ‏24 می 2008
    designer joomir و Violet89 از این پست تشکر کرده اند.
  10. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16

    ببخشید متوجه نشدم:eek:
    این هم کامله در حده خودش و هم قابله دانلود

    شما چیزه خاصی مده نظرته؟:wink:
     
    نوشته شده توسط DaRiOuShJh در ‏24 می 2008
    designer joomir، Violet89 و sahar6890 از این ارسال تشکر کرده اند.
  11. Y.FASHiST

    Y.FASHiST Member

    ارسال‌ها:
    119
    تشکر شده:
    70
    امتیاز دستاورد:
    16
    سلام بر بچه های مبحث فوق العاده . حالا من یه سوال دارم
    ا من با فتوشاپ یه صفحه رو طراحی کردم . حالا همون خروجی html رو تو FrontPage آوردم عکس زیاد داره تو این صفحه .
    حالا میخوام هم سرعت لود شدن صفحه بره بالا هم سورسش کم شه این جوری سورسش خیلی طولانیه .
    لطفاٌ راهنمایی کنین
     
    آخرین ویرایش: ‏30 می 2008
    نوشته شده توسط Y.FASHiST در ‏30 می 2008
    miladmasiha از این پست تشکر کرده است.
  12. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    دوسته عزیز خوش اومدی
    اولین نکته ای که باید اشاره کنم اینه که من به شخصه بریدنه قتوشاپ رو قبول ندارم و خودم بنا به نیازهام میبرم و تو صفحه قرار میدم که این خودش آشنایی با css و html در حده نسبتا خوب لازم داره
    فتوشاپ کله عکس ها رو با همون کیفیت و همون اندازه ها میاره تو صفحه
    بهترین کار اینه که شما با کمکه rulers یا ctrl + r قسمت بندی کنید با توجه به کدهاتون و ببرید:wink:

    اینطوری هم رو حجمه عکسها بیشتر میتونید مانور بدید هم تعدادشون
     
    نوشته شده توسط DaRiOuShJh در ‏30 می 2008
    majideptp و echessdesign از این پست تشکر کرده اند.
  13. Y.FASHiST

    Y.FASHiST Member

    ارسال‌ها:
    119
    تشکر شده:
    70
    امتیاز دستاورد:
    16
    ممنونم دوست عزیز ولی من می خوام کد سورس صفحه من کم بشه این جوری خیلی زیاده
     
    نوشته شده توسط Y.FASHiST در ‏30 می 2008
  14. DaRiOuShJh

    DaRiOuShJh Member

    ارسال‌ها:
    348
    تشکر شده:
    333
    امتیاز دستاورد:
    16
    یعنی یه طورایی میخوای فقط کدها کم بشه؟
    درسته؟
    کد ها نمیخوای تغییر کنه؟
     
    نوشته شده توسط DaRiOuShJh در ‏2 ژوئن 2008
  15. springbox

    springbox New Member

    ارسال‌ها:
    3
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام بچه ها
    کسی میتونه به من بگه چه جوری می تونم قالبی رو که با trendy flash طراحی کردم تو فضای خودم بارگذاری کنم
    ممنون
     
    نوشته شده توسط springbox در ‏19 جولای 2008
  16. RoOHTASViR

    RoOHTASViR New Member

    ارسال‌ها:
    18
    تشکر شده:
    5
    امتیاز دستاورد:
    1
    بسيار تشكر آقاي داريوش عزيز با اين آموزش جالبتون
    فقط جيزيكه بسيار براي ما مبتدي ها مهمه اينكه بدونيم قالبي رو كه در يك سرور آپلود كرديم چطوري روي يه هاست مجاني و يا پولي قرار بديم
    اگه مي شه يه هاست مجاني رهنمائي كنيد و طريق قرار دادن سايت نه وبلاگ، رو بما ياد بديد
    خيلي خيلي ممنون آقاي داريوش
    و خيلي خيلي مهمه
    تشكر
    و همچنان منتظر جوابم
     
    نوشته شده توسط RoOHTASViR در ‏29 آگوست 2008
  17. 1q1q1q

    1q1q1q New Member

    ارسال‌ها:
    1
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    motoshaker
     
    نوشته شده توسط 1q1q1q در ‏31 آگوست 2008
  18. kamran-h

    kamran-h Active Member

    ارسال‌ها:
    196
    تشکر شده:
    92
    امتیاز دستاورد:
    28
    سلام دوست عزيز ( 1q1q1q) به انجمن مجيد آنلاين خوش آمديد. ازاين به بعد براي تشكر كردن از كليد تشكر در پايين هر پست استفاده كنيد.:rose:
     
    نوشته شده توسط kamran-h در ‏31 آگوست 2008
    amin.2 و echessdesign از این پست تشکر کرده اند.
  19. 0001

    0001 New Member

    ارسال‌ها:
    24
    تشکر شده:
    5
    امتیاز دستاورد:
    1
    مطابق قوانین انجمن، تبلیغات ممنوع است.
    حسین سعیدی
     
    آخرین بار توسط مدیر ویرایش شد: ‏7 سپتامبر 2008
    نوشته شده توسط 0001 در ‏6 سپتامبر 2008
  20. k.i.m.i.a

    k.i.m.i.a New Member

    ارسال‌ها:
    7
    تشکر شده:
    11
    امتیاز دستاورد:
    1
    اگر ممكنه يك بخش آموزشي در مورد طراحي وبلاگ در بلاگفا هم بگذاريد شامل :
    كدهاي امار بازديد كنندگان- لينك - عكس و ...
    آخه ما تازه واردها هم دل داريم.ممكنه يك روز طراحان خوبي از بين ماها تحويل جامعه بديد.ثواب داره.
    ممنون
     
    نوشته شده توسط k.i.m.i.a در ‏13 سپتامبر 2008
    amin.2 از این پست تشکر کرده است.
وضعیت موضوع:
موضوع بسته شده است.

به اشتراک بگذارید