صفحه 1 از 2 12 آخرآخر
نمایش نتایج 1 تا 40 از 68

نام تاپیک: طراحی یک وب سایت ساده با CSS,HTML

  1. #1
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    Arrow طراحی یک وب سایت ساده با CSS,HTML

    امروز تصمیم به طراحی یک وب سایت گرفتم ولی نه به عنوان نمونه کار بلکه برای آموزش ، من این کار رو از الف شروع می کنم و همراه طراحی به توضیحات در مورد نکات مهم که تو این تالار مشکل عمده افراد هست می پردازم ، این آموزش برای افرادی مفید خواهد بودکه دوست دارند طراحی با استفاده از استانداردهای جهانی انجام بدهند ، به دلیل کمی وقت اضافه من سعی دارم این وب سایت رو در پروسه زمانی 1 هفته ای برای دوستان عزیز کامل کنم ودر این این هروز یک قسمت از این طرح رو طراحی و کد نویسی می کنیم ، پیشنهادم برای کسانی که تمایل دارند به خوبی یاد بگیرند هر روز همراه با من شروع به طراحی مجدد این سایت کنند در این آموزش فرض بر آن است که کاربران عزیز مختصر در مورد html,css آشنایی دارند کد نویسی در این آموزش بسیار ساده و قابل درک خواهد بود.

    شروع کار:
    بهتره قبل از شروع کردن به کد نویسی با استفاده از چشم خود به طرح های مختلف به کارهای هم موضوع با کار ما چه خارج و چه داخل ایران توجه کنیم ، رنگ بندی ها رو ببینیم ، نحوه جایگذاری المنت ها ، جزئیات اضافه شده و هرآن چه که به ذهنمان خطور می کند.
    خوب فکر کنم بعد از این کار یک ذهنیتی از چیزی که می خواهیم تو ذهنمون پدیدار شده خوب توسط فتوشاپ و یا هر نرم افزار گرافیکی که به آن مسلط هستید شروع به ترسیم ذهنیت خودتان بکنید.
    من طرحی رو که فایلش رو در پایین ضمیمه کردم با استفاده از خلاقیت ذهنی خودم طراحی کردم و برش های لازم نیز داده شده لازم به ذکر هست که من توانایی طراحی با فتوشاپ رو دارم این طرح رو با فتوشاپ به صورت لایه لایه پیاده سازی کردم شاید بعضی از دوستان به برنامه های دیگری مسلط باشند.
    خوب پس اولین کار طراحی در محیط گرافیکی و دومین کار برش تصاویر..
    ما باید طوری برش دهیم که میزان استفاده عکس رو در صفحه وب کاهش دهیم و بیشتر از رنگ در صفحه وب استفاده کنیم.فایل psd زیر را دانلود کنید و به برش ها و نحوه مرتب کردن لایه ها دقت کنید.ما برای طراحی وب سایت فقط به قسمت های برش داده شده نیاز خواهیم داشت.
    نکات ضروری :
    1- تکه های برش داده شده را با پسوند png 24 ذخیره می کنیم.
    2- اندازه ای که من در فتوشاپ در نظر گرفتم 1000px در عرض و برای طول هم کمی بیشتر چون در دفرم شدن تاثیری ندارد 1500px در نظر گرفته ام.
    3- در زمان طراحی شاید ایده های جدیدی داشته باشیم که در پست های آینده آن ها را پیاده سازی می کنیم.
    4- ابزار برش در فتوشاپ Slice Tool هست.
    5- برای ذخیره قسمت برش داده نیز می توانید از کلید میانبر alt+ctrl+shift+S استفاده کنید.
    دوستان این تاپیک تا اتمام کامل طراحی به دلیل منظم بودن پست های آموزش پشت سر هم قفل خواهد بود و بعد از اتمام آموزش تاپیک باز میکنم تا دوستان اگه نظر ، درخواست یا سوالی در این زمینه داشتند مطرح کنند.
    موفق باشید..
    آخرین ویرایش به وسیله Saber Mogaddas : دوشنبه 20 شهریور 1391 در 11:54 صبح

  2. #2
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    در این قسمت آموزش می خواهیم چهارچوب ، header و منو سایت رو پیاده سازی کنیم
    ابتدای کار باید یک فایل html و یک فایل style sheet داشته باشیم ، که برای ساخت این دو فایل میتونیم از notepad و یا visual studio و .. استفاده کنید با هر برنامه ای که راحت هستید این کار رو انجام بدید.
    فایل html همان صفحه وب ما هست که کد های html و تگ ها در آن جای می گیرد و برای استایل دادن به این تگ ها از فایل css که به فایل html ما اشاره می کند استفاده می کنیم ، استفاده از فایل با پسوند css در طراحی به نام استایل دادن به صورت embedded یا external معروف است.روش های دگری برای استایل دادن وجود داره (inline,internal) :
    استایل دادن به تگ html سه حالت داره :
    1- Embedded :
    که این نوع استایل دادن دقیقا به شکل مثالی هست که براتون قرار دادم و استایل هامون داخل تگ head و در داخل :

    <style type="text/css">
    Inja
    </style>

    قرار میگیره ..
    2- inline هست که داخل تگ قرار میگیره با استفاده از پارامتر style به صورت زیر :

    <p style="font-size: 14px; color: purple;"></p>

    3-External هست که به عنوان یه فایل css استایل ها داخل آن قرار میگیرند و در تگ head این فایل به صورت زبر فراخوانی میشه :

    <link href="Controls.css" rel="stylesheet" type="text/css" />


    اولین کاری که من بعد از ایجاد این دو فایل انجام دادم اضافه کردن css reset ساده زیر به فایل css هست که margin,padding پش فرض تمامی تگ ها رو برابر با صفر می کنه.

    * {
    margin:0;
    padding:0;
    }

    با توجه به طرح و تگ های که استفاده میشه من این css reset رو احتیاج دونستم.
    البته css reset ها کاملتری هم وجو داره که می تونید از طریق موتور جستجوی گوگل پیدا کنید.
    خوب برای طراحی قالب ابتدا یک نظری به طرح قالب می ندازیم .بله ما باید رنگ پس زمینه رو برابر با سفید میکنیم و قسمت آبی لایت بالا رو نیز توسط یه تگ دیو پیاده سازی می کنیم و در نهایت یک wrapper که به عرض 1000px که باید در وسط صفحه ما قرار بگیره ..
    برای شروع مقدار فونت های پیش فرض و سایز فونت رو در استایل تگ body تنظیم می کنیم.همچینین باید پس زمینه سفید رو نیز به تگ body اعمال کنیم:

    body
    {
    background-color: #fff;
    font-family: Tahoma;
    font-size: 12px;
    }

    خوب برای کد نویسی قالب که از دو تکه تشکیل شده ابتدا قسمت آبی لایت و در داخل آن تگ wrapper که باید در وسط صفحه قرار بگیرد رو طراحی می کنیم ، پس از دو دیو تشکیل شده اولی تگی که قسمت پس زمینه آبی قسمت بالا رو تشکیل میده و یک تگ دیو که wrapper سایت ما رو مشخص می کنه و در وسط صفحه قرار می گیره که محتوای ما در داخل این wrapper خواهد بود.
    استایل های این دو تگ به صورت زیر خواهد بود :

    #Head-Bg {
    background-image: url('Images/header.png');
    background-repeat: repeat-x;
    min-height: 600px;
    }
    #Wraper {
    width: 1000px;
    margin:auto;
    min-height:100px;
    overflow: hidden;

    }


    کد HTML:
    <div id="Head-Bg">
    <div id="Wraper">
    
    </div>
    </div>
    خو حالا ما می تونیم داخل تگ اصلی wrapper محتوای سایت رو تقسیم بندی کنیم همانطور که می دانیم ابتدا باید Header سایت رو پیاده کنیم توسط یک تگ دیو با طول و عرض ثابت به صورت سلیقه ای :
    کد HTML:
     [RIGHT]<div id="Head-Bg">
    <div id="Wraper">
      <div id="Header-Wraper">
    </div>
     </div>
    </div>
    [/RIGHT]
     [RIGHT][/RIGHT]
    داخل header ما دو تصویر (وب سایت) و (من) رو داریم برای اینکه این دو تصویر در وسط header قرار بگیره ابتدا به وسیله یک تگ دیو با عرض لازم و به طول header و margin:0 auto ایجاد میکنیم حال دو تگ دیو دیگر نیز برای لگو ها تشکیل میدهیم و توسط margin و float به صورت منظم تصویر های خود رو جایگزاری می کنیم.
    بعد از header سایت نوبت منو سایت میرسه که تشکیل شده از جعبه جستجو و لیستی از منو:
    اول کار یک دیو wrapper برای کل سطر منو با استایل عرض به طول wrapper اصلی و طول به صورت سلیقه ای و با دستور float زیر header قرار میدهیم. برای لست منو و قسمت جستجو نیز به اندازه ی لازم و به طول wrapper منو دیو اصلی ایجاد میکنیم با این کار ما قسمت منو و جستجو رو تفکیک می کنیم.برای دیو اصلی لیست منو float:right و برای جستجو float:left میدهیم توجه کنید که جمع عرض این دو دیو اصلی باید کمتر از مقدار عرض دیو اصلی منو باشد.
    لازم به ذکر هست که سعی کنید یک پوشه به اسم images و .. ایجاد کنید و تمامی عکس های استفاده شده برای این طراحی رو در ان پوشه قرار دهید تا هم کار شما نظم داشته باشد و هم دسترسی به فایل های پروژه راحتر باشد.
    خوب سریعا ul و li های مربوط به منو رو تشکیل می دهیم و توسط select های css در جای خود قرار میدهیم و مقدار hover آنها را تنظیم می کنیم ، به نظرم با نگاه کردن به استایل های منو متوجه موضوع خواهید شد و نیاز به توضیح نمی بینم در هر صورت اگه قسمتی رو متوجه نشدید می توانید بپرسید ..
    برای پس زمینه های li من از دو تصویر جداگانه استفاده کردم ، البته بهتر بود که توسط css sprite این کارو توسط یک تصویر می کردیم ولی این موضوع رو بزارید به حساب کمبود وقت و مقداری هم تنبلی بنده..
    برای اینکه از یه تصویر استفاده کنیم می تونیم این دو تصویر رو با هم برش داده (در کنار هم ) و تو selecthover با استایل background-position مکان Hover تصویر رو معیین کنید دوستانی که نیاز به آموزش این نحوه دارند می تونن درخواست بدن تا همین منو رو به اون شکل نیز طراحی کنیم.
    اگه توجه کنید من ترجیح دادم به جای select های پیچیده برای یافتن li اول برای تغییر استایل برای home از یه دیو جداگانه بیرون از تگ ul استفاده کنم و این روش کاملا سلیقه ای هست.
    قسمت جستجو :
    یک دیو کلی برای تکست باکس که تشکیل شده از 3 دیو داخلی که دیو سمت چپ و راست برای تصوریرهای radius دار و قسمت وسط نیز برای تصویر کل جستجو که به اندازه 1px بود و با دادن background-reapet این یک پیکسل رو تکرار کردم، دکمه جستجو از روش css sprite که در منو استفاده نکردیم پیاده سازی شده یک تصویر که شامل شکل اصلی و hover دکمه هست و برای یه دیو اختصاص دادیم و در نهایت با background-position همانطور که در بالا توضیح داده شد تصویر رو جابجا و تنظیم کردیم.
    و بوسیله کد جاوااسکریپت برای جستجو خاصیت onfocus و onblur رو پیاده سازی کردیم به صورت زیر :

    value="جستجو.." onfocus="if(this.value == 'جستجو..') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'جستجو..'; }"
    این قسمت از آموزش به پایان رسید دوستان می تونند فایل این قسمت از آموزش رو دریافت کنند..
    موفق باشید..

  3. #3
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    قسمت سوم آموزش :
    امروز می خواهیم قسمت بنر موجود در طرحمون رو طراحی و برنامه نویسی کنیم.
    با توجه به اطلاعاتی که در دو آموزش قبلی کسب کرده اید بنر سایت رو نیز مانند header سایت قرار می دهیم .معمولا این قسمت از سایت رو به صورت یک اسلایدر در نظر می گرند تا با تغییر اسلاید ها اعلانات و یا فعالیت های سایت رو نمایش بدهد ، به دلیل اینکه عنوان آموزش ما طراحی وب با css , html هست من این کار رو یعنی متحرک سازی Animation دادن به تگ هارو توسط jquery به بعد از اتمام این طراحی موکول می کنم.

    خوب برای طراحی قسمت بنر یک دیو wrap کلی به عرض 1000px و به طول بنر انتخابی ایجاد می کنیم (که در اینجا طول بنر ما 522px می باشد) تا اگه در آینده نیاز به تغییر این قسمت شد فقط در داخل این تگ تغییرات ایجاد شود و قسمت های دیگه سایت رو به هم نزنیم، بعد یک دیو برای تصویر سیب و در داخل این دیو یک دیو برای تصویر ساعت تشکیل خواهیم داد.که هر دوی این دیو ها باید از سمت راست و چپ خاصیت margin:auto داشته باشند.
    خوب من می خوام کارم رو یکم سختر و با کیفیت تر کنم.همانطور که مشاهد می کنید تصویر سیب عکسی با کیفیت بالا می باشد و درست نیست که من این عکس رو به صورت یک تیکه قرار بدم و نمی خوام کیفیت تصویر رو بخاطر حجم کم پایین بیارم ، من این تصویر رو به 5 تیکه تقسیم می کنم و با استفاده از دیو این تصاویر رو در کنار هم قرار می دهم برای اینکار ابتدا یک دیو به طول وعرض سیب ، با استایل زیر ایجاد می کنم :

    #Banner-Wraper {
    width: 1000px;
    height: 522px;
    float: right;
    }
    #App-Wraper {
    width: 482px;
    height: 522px;
    margin: auto;
    }
    #App-Top {
    width: 482px;
    height: 204px;
    float: right;
    background-image: url('Images/App-Logo_1.png');
    background-repeat: no-repeat;
    }
    #App-Bottom {
    width: 482px;
    height:318px;
    float: right;
    }
    .App-B-R,.App-B-L {
    width:130px;
    height: 318px;
    float: right;
    background-image: url('Images/App-Logo_3.png');
    background-repeat: no-repeat;
    }
    .App-B-L {
    width:142px;
    background-image: url('Images/App-Logo_2.png');
    background-repeat: no-repeat;
    float: none;
    }
    #App-B-C-Top {
    width:210px;
    height: 213px;
    float: right;
    background-image: url('Images/App-Logo_5.png');
    background-repeat: no-repeat;
    }
    #App-B-C-Bottom {
    width:210px;
    height: 105px;
    float: right;
    background-image: url('Images/App-Logo_4.png');
    background-repeat: no-repeat;
    }
    #Clock-Bg {
    width: 210px;
    height: 213px;
    background-image: url('Images/W-Logo.png');
    background-repeat: no-repeat;
    }

    کد HTML:
    <div id="Banner-Wraper"><!--\\دیو اصلی برای کل بنر-->
    <div id="App-Wraper"><!--\\دیو اصلی برای تصویر سیب-->
    <div id="App-Top"></div><!--\\قسمت بالای سیب-->
    <div id="App-Bottom"><!--\\دیو اصلی برای 4 تیکه پایین سیب-->
    <div class="App-B-R"></div><!--\\تکه پایین سمت راست -->
    <div id="App-B-C-Top"><!--\\تکه پایین وسط بالا-->
    <div id="Clock-Bg"></div><!--\\تکه تصویر عکس-->
    </div>
    <div id="App-B-C-Bottom"></div><!--\\تکه پایین وسط پایین-->
    <div class="App-B-L"></div><!--\\تکه پایین سمت چپ-->
    </div>
    </div>
    </div>
    Margin:auto برای وسط چین کردن تگ اصلی سیب در داخل دیو اصلی استفاده شده .
    و نسبت به اندازه ی تکه ها دیو های خودم رو توسط float در داخل این دیو قرار میدم و به پس زمینه هر دیو عکس پس زمینه اون قسمت از تصویر سیب رو میدهم ، اگر توجه کنید من قسمت بالای سیب رو یک دیو در نظر گرفتم و چون قسمت پایین دارای 4 دیو بود این 4 دیو رو در داخل یک دیو اصلی قرار دادم تا بهتر قابل کنترل باشد، و اندازه دیو وسطی رو طوری برش دادم که دقیقا هم اندازه با تصویر ساعت باشه ، حالا هم می تونیم به صورت یک تگ img تصویر ساعت رو داخل این دیو قرار بدیم و یا اینکه یک دیو در داخل همین دیو وسط ایجاد کنیم و به پس زمینه اون توسط background-img تصویر ساعت رو الحاق کنیم.
    کم کم وب سایتمون داره شکل زیبایی به خودش میگیره..
    Capture1.JPG
    فایل این قسمت رو دانلود و بررسی کنید..

    Part2.zip

    موفق باشید..

  4. #4
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    حال نوبت میرسه به قسمت راحتر ، توجه کنید که هر جا باکس و یا تصویر تکراری وجود داشته باشه خاصیت کلاس خودشو نشون میده ، یعنی چی ؟
    یعنی کافیست فقط یکی از باکس ها رو طراحی کنیم و و با عمل copy&paste این باکس هارو در کنار هم قرار بدیم.
    شروع به طراحی باکس ها
    نحوه برش قسمت های radius دار برای برش این قسمت ها می تونیم از سمت بالا باکس تا جایی که radius آن تمام می شود برش دهیم یا همین کار از قسمت پایین و یا از سمت چپ و راست و یا اگه بخواهیم ریزتر کار کنیم فقط مربعی از گوشه radius دار برش می دهیم ، تو این مثال برش کامل از سمت راست و چپ بیشتر از روش های دیگه برای ما کاربرد خواهد داشت چرا؟
    چون اگه توجه کنید ما در قسمت بالای سایت یک قسمت سفید رنگ نیز برای عنوان باکس داریم و نتیجتا ما به کل طول باکس به صورت آزاد نیاز داریم.
    خوب اگه بخواهیم کارمون رو به این روش ولی به صورت ریزتر انجام دهیم همانطور که در بالا توضیح دادم فقط قسمت radius دار باکس رو برش میدهیم ، پس در این صورت ما 4 تصویر کوچکی از چهار گوشه باکس را خواهیم داشت.که من این 4 گوشه رو در کنار هم قرار میدم تا توسط روش css sprite در جای خودشون قرار بدم با این کار ما یک تصویر کوچک از 4 گوشه باکس رو خواهیم داشت و مسلما این کار در زمان لود سریع قسمت های گوشه سایت به نفع ما خواهد بود.
    یک دیو کلی برای قسمت باکس ها ایجاد می کنیم من می خواهم ارتفاع این دیو متغییر باشه یعنی نسبت به محتواش تغییر ارتفاع بدهد چون احتمال داره تو آینده بخوام 2 تا باکس دیگه به این قسمت اضافه کنم برای اینکار من از استایل زیر برای دیو اصلی محتوا استفاده می کنم :

    #Content-Wraper {
    width: 950px;
    min-height: 600px;
    overflow: hidden;
    float: right;
    }

    برای ایجاد باکس ها کلا از خاصیت کلاس استفاده خواهیم کرد چون ما یک باکس ایجاد می کنیم و توسط Copy&Paste چهاراز این باکس ایجاد خواهیم کرد و چون id منحصر به فرد یک تگ هست و نمی تونیم از دو نام id مشابه در یک صفحه وب ایجاد کنیم از کلاس که برای اینکار استفاده میشود به صورت استاندارد استفاده می کنیم.
    یک دیو اصلی که محتوای باکس داخل آن می باشد ایجاد می کنیم، و داخل این دیو را به سه قسمت توسط دیو جدا می کنیم.
    1 : نیز از سه دیو تشکیل می شود که با لا و پایین برای تصویر های گوشه دار و وسط نیز همرنگ با رنگ باکس تنظیم خواهد شد.
    1- قسمت اول(سمت راست ، بالا گوشه ) : در این قسمت تصویر گوشه radius دار قرار خواد گرفت و طول و عرض تصویر را خواهد داشت.
    2- قسمتدوم (سمتراست،پایینگوشه ) : دراینقسمتتصویرگوشهradius دار قرار خواد گرفت و طول و عرض تصویر را خواهد داشت.
    3- قسمت سوم(وسط) :برای پیدا کردن طول وسط ، طول باکس منهای قسمت اول و قسمت دوم خواهد شد.عرض این دیو نیز هم عرض با دیو قسمت اول و دوم خواهد بود.
    2 : از یک دیو اصلی که داخل آن به دو قسمت عنوان و محتوا تقسیم خواهد شد .
    3: این قسمت نیز دقیقا مثل روش شماره یک خواهد بود با این تفاوت که استایل های مربوط به دیو های قسمت اول و دوم مقداری متفاوت خواهد بود.
    کد HTML:
    <div class="Box-Wraper">
        <div class="Box-R-Side">
            <div class="B-R-T"></div>
            <div class="B-R-C"></div>
            <div class="B-R-B"></div>
        </div>
        <div class="Box-Center">
            <div class="Box-Title"></div>
            <div class="Box-Content"></div>
        </div>
        <div class="Box-L-Side">
            <div class="B-L-T"></div>
            <div class="B-L-C"></div>
            <div class="B-L-B"></div>
        </div>
    </div>
    تنظیم گوشه های radiusدار با روش css sprit :
    ما یک تصویر داریم که چهار گوشه باکس مارو در خودش جای داده پس همه دیو ها دارای یک تصویر برای پس زمینه و طول و عرض یکسان می باشند.در این مواقع برای اینکه کدهای css بهینه شوند همه کلاس ها را کنار هم می نویسم و با علامت کاما (،) جدا می کنیم:

    .B-R-T,.B-R-B,.B-L-T,.B-L-B{
    width: 5px;
    height: 6px;
    float: right;
    background-image: url('Images/Box-Corner.png');
    background-repeat: no-repeat;
    background-position:-9px 0px;
    }

    دستورات موجود در این select باری همه کلاس ها اعمال خواهد شد و برای اینکه background-positon هر گوشه رو تغییر بدیم به صورت زیر جداگانه کلاس ها رو select می کنیم و فقط خاصیت background-position رو برای ان ها تغییر می دهیم:

    .B-R-B {
    background-position:-9px bottom;
    }
    .B-L-T {
    background-position: 0px -1px;
    }
    .B-L-B {
    background-position:-1px -11px;
    }

    و در نهایت همانطور که توضیح دادم با عمل copy&paste دیو اصلی باکس رو تکثیر می کنیم چون ما ارتفاع دیو اصلی رو متغییر کردیم حال می توانیم هر مقدار باکس که می خواهیم اضافه کنیم و این باکس ها به طور خودکار دوتا دوتا زیر هم جای خواهند گرفت.
    برای وسط قرار گرفتن دیو عنوان از margin:auto استفاده شده چون شکل باکس ها دودر میان برعکس خواهند شد کافی هست مکان دیو عنوان رو با مکان دیو محتوا جابجا کنید.چون متن در داخل عنوان باید در وسط دیو قرار بگیرد از خاصیت :

    text-align: center;

    برای دیو عنوان استفاده می کنیم.
    من در طی این پروژه گاهی به صورت سلیقه ای استایل بعضی از تگ هارو تغییر می دم که این مسله کاملا بستگی به ذوق شما داره و می تونید با چیزایی که یاد گرفتید تغییراتی تو این صفحه بدید تا از اینی که هست زیباتر باشه.
    خوب دیگه داره شبیه یک سایت حرفه ای میشه ، دوستان بهتون پیشنهاد می کنم برای زیباتر شدن و خسته نشدن کاربر از رنگ ها و تصاویر لایت برای طراحی وب استفاده کنید ، نمی گم تر های تیره بد میشه نه ، ولی همساز کردن ترکیب های رنگ تو رنگ های تیره خیلی سخت هست و نیاز به سعی و خطای بیشتر هست.
    نتیجه این آموزش :
    فایل تکمیل شده تا این قسمت رو دانلود کنید ..
    موفق باشید..

  5. #5
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام و خسته نباشد به دوستان عزیز
    امروز فوتر سایت رو پیاده سازی می کنیم ، همانطور که از طرح psd قابل مشاهده هست پس زمینه ما از سه تکه سمت راست ، وسط ، چپ تشکیل شده برای اینکار فکر کنم دیگخ خبره شدید:

    1. 1- یک دیو اصلی برای footer


    1. 2- ایجاد سه دیو در داخل دیو اصلی که یکی برای سمت راست که پسزمینه گوشه راست تو اون میشینه و یکی برای وسط که محتوای فوتر داخل اون قرار می گیره و نهایتا گوشه سمت چپ حاوی پس زمینه سمت چپ.


    1. 3- استایل دادن به دیو های و جایگزاری آنها پشت سر هم با دستور float:right .

    تو کد نویسی همیشه توجه کنید تا به بهینه ترین و کوتاهترین صورت ممکن کد هاتون رو بنویسید.برای مثال چون دیو های داخلی سمت راست و چپ با استایل های مساوی هستند و به غیر از background-image در همه استایل ها با هم یکسان بودند من به این صورت کدهامو بهینه کردم :

    .Footer-R-Side,.Footer-L-Side {
    width: 9px;
    height: 58px;
    float: right;
    background-image: url('Images/Footer-R-Side.png');
    background-repeat: no-repeat;
    }
    .Footer-L-Side {
    background-image: url('Images/Footer-L-Side.png');
    }

    در داخل فوتر ما دو آرم استانداردهای طراحی وب رو برای css,Xhtml داریم ، و طبق معمول یک نوشته به عنوان کپی رایت محفوظ ، پس دیو وسط ما به دو قسمت بالا و پایین جدا میشه که در دیو بالای آرم ها و در دیو پایین نوشته مورد نظر .
    این دیو هارو به این صورت داخل footer-Center پیاده سازی می کنیم :
    کد HTML:
    <div id="Footer-Wraper">
    <div class="Footer-R-Side"></div>
    <div id="Footer-Center">
    <div id="Footer-T">
    <a href="http://validator.w3.org/check?uri=referer"><span class="Logo-W3C"></span></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer"><span class="Logo-W3C1"></span></a>
    </div>
    <div id="Footer-B">
    تمام حقوق مادی و معنوی این سایت متعلق به آقای من می باشد.
    </div>
    </div>
    <div class="Footer-L-Side"></div>
    </div>
    و استایل های اون رو نیز میدیم و فوتر ما تکمیل میشه :

    #Footer-Wraper {
    height: 58px;
    margin: 10px auto auto;
    width: 914px;
    }
    .Footer-R-Side,.Footer-L-Side {
    width: 9px;
    height: 58px;
    float: right;
    background-image: url('Images/Footer-R-Side.png');
    background-repeat: no-repeat;
    }
    .Footer-L-Side {
    background-image: url('Images/Footer-L-Side.png');
    }
    #Footer-Center {
    width: 895px;
    height: 58px;
    float: right;
    background-image: url('Images/Footer-Center.png');
    background-repeat: repeat-x;
    }
    #Footer-T {
    height: 22px;
    margin: 8px auto 7px;
    width: 158px;
    }
    #Footer-B {
    width: 500px;
    height: 20px;
    margin: auto;
    text-align: center;
    direction: rtl;
    color: #5a5a5a;
    }
    .Logo-W3C,.Logo-W3C1 {
    width: 74px;
    height: 21px;
    float: right;
    background-image: url('Images/W3C-XHTML.png');
    background-repeat: no-repeat;
    }
    .Logo-W3C1 {
    background-image: url('Images/W3C-CSS.png');
    margin-right: 9px;
    }

    خوب حال می خواهیم استاندارد w3c رو برای کدهای css , XHtml بگیریم :
    برای گرفتن استاندارد css وارد این لینک شوید.در صفحه اصلی سه روش برای دادن کد css به سایت می باشد .
    روش اول By Url که لینک فایل css رو وارد می کنیم و چک می کنیم
    روش دوم By file Upload هست که می تونید فایل css رو آپلود کنید.
    روش سوم By direct Input هست که می تونیم استایل ها رو به طور مستقیم اونجا copy&paste می کنیم.
    روش دو و سه برای localhost گزینه خوبی هست ، من روش سه رو ترجیح میدم و کد های css ای که تابحال برای این پروژه نوشته ایم رو اونجا کپی می کنیم و check می کنیم .
    همانطور که مشاهده می کنید :
    Congratulations! No Error Found.
    توجه کنید وقتی که چند بار فایل های css تون رو check کردید و error های اون رو طبق توضیحات این سایت رفع کردید با استانداردهای طراحی در مورد css آشنا خواهدی شد و نیازی به check کردن نخواهید داشت .
    خوب حالا لینک مرتبط به لگوی استاندارد css رو کسب کردید و می تونید لینک refrence رو بردارید و لگوی داخل فوتر رو توسط تگ a جایگزاری کنید.چون من قبلا از تگ دیو برای این لوگو استفاده کردم و از اونجا که بودن تگ دیو در داخل تگ a خلاف استاندارد هست من این تگ دیو رو به span تغییر نام میدم.
    به صورت زیر :

    <a href="http://validator.w3.org/check?uri=referer"><span class="Logo-W3C"></span></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer"><span class="Logo-W3C1"></span></a>

    برای گرفتن استاندارد xhtml نیز به روش css توسط این لینک عمل خواهیم کرد.
    This document was successfully checked as XHTML 1.0 Transitional!

    اگه خطایی داشتید خطاهای شما در زیر لیست خواهد شد و راه حل ها نیز گفته می شود که با رفع خطا ها بار دیگر چک کنید تا در نهایت به کد استاندارد xhtml برسید.
    لازم به ذکر هست که بگم داشتن این استادارد ها در صفحه وب باعث محبوب شدن سایت ما برای موتورهای جستجو از قبیل گوگل خواهد بود.اگه می خواهید در مورد این استانداردهای بیشتر بدانید این مقاله را مطالعه کنید.
    قالب ما توسط Css,html و استانداردهای Css,xhtml کامل شده و به اتمام رسید.امیدوارم که همه دوستان به کد نویسی استاندارد طراحی وب اشنایی پیدا کرده باشند.
    این قالب به تنهایی زیباست ولی اگه مقداری انیمیشن بدیم و زیباترش کنیم منحصر به فر خواهد شد.من طبق آمار سوالات شما و مشکلات شما تصمیم دارم مقداری انیمیشن و پلاگین جدید برای باکس ها ایجاد کنم برای مثال از jquery tab برای یک باکس و یا news ticker برای باکس دیگه و اگه مشتاق باشید drag&drap برای باکس ها ، اسلایدر و ..استفاده کنم.
    و به تدریج این قسمت هارو با پلاگین های جدید بروز خواهم کرد.
    همانطور که گفته بودم تاپیک رو از قفل درمیارم هر سوالی تا اینجای کار داشتید بپرسید ولی در مورد پلاگین ها و نحوه استفاده اونها که در آینده خواهم گذاشت در تالار jquery سوال کنید ..
    تصویر نهایی
    فایل تمام شده این پروژه رو می تونید دانلود کنید.
    موفق باشید.

  6. #6
    کاربر جدید آواتار f.gh1372
    تاریخ عضویت
    شهریور 1391
    محل زندگی
    نصف جهان
    سن
    30
    پست
    6

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    اگر میشه لینک دانلود پست اول را اصلاح کنید . دانلود نمیشه . ممنون

  7. #7
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    لینک پست اول اصلاح شد..


    موفق باشید..

  8. #8

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    لینک اول نیاز به لاگین داره لینک دومم خرابه
    یه جای دیگه up کنید

  9. #9
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    متاسفانه من نتونستم از بین فایل آپلود های فارسی یک سایت معتبر پیدا کنم !
    برای همین تو shared آپلود کردم برای دوستانی که عضو هستن ، لینک دوم اصلاح شد..
    موفق باشید..

  10. #10

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    مثلا شما از این کد استفاده کردین
    #Head-Bg {
    background-image: url('Images/header.png');
    background-repeat: repeat-x;
    min-height: 600px;
    }


    و به یک عکس لینک دادین چطوری این قسمت رو از فایل psd بیرون بیاریم و بهش لینک بدیم؟؟؟

  11. #11

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    دوست عزیز لینک پارت 3 و 4 دانلود نمی شود
    اصلاح کنید
    باتشکر از آموزش عالیتون
    یا علی مدد

  12. #12
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    نقل قول نوشته شده توسط t0r1st مشاهده تاپیک
    دوست عزیز لینک پارت 3 و 4 دانلود نمی شود
    اصلاح کنید
    سلام
    برای من مشکلی نداره با مرورگرهای دیگه امتحان کنید/درسته..
    موفق باشید..

  13. #13

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    باتشکر حق با شما بود با کروم مشکلی نبود بی صبرانه منتظر آموشهای بعدی شما هست
    یاعلی مدد

  14. #14
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    نقل قول نوشته شده توسط esmaeilbf مشاهده تاپیک
    مثلا شما از این کد استفاده کردین
    #Head-Bg {
    background-image: url('Images/header.png');
    background-repeat: repeat-x;
    min-height: 600px;
    }


    و به یک عکس لینک دادین چطوری این قسمت رو از فایل psd بیرون بیاریم و بهش لینک بدیم؟؟؟
    سلام
    همانطور که از مرحله به مرحله بودن این سایت می فهمیم که مرحله اول طراحی سایت تو یک محیط گرافیکی انجام می پذیره . من photo shop رو به عنوان محیط گرافیکی انتخاب کردم ( چون اغلب کاربران با اون بیشتر از محیط های دیگه آشنایی دارند و همچنین این نرمافزار کاربردی تر هست ) .همانطور که تو قسمت اول توضیح دادم من سایتم رو تو این محیط به صورت لایه لایه یا همان (لایه باز) طراحی کردم.منظور از لایه باز بودن یک طرح یعنی برای هر شی یک لایه ایجاد شده و کل طرح مجموعی از لایه ها هست که در رو یا زیر هم قرار گرفته اند.چرا این روش؟ شما فرض کنید یک طرحی زدید که یک پس زمینه و یک گل روی آن قرار داده اید، بنا به سلیقه خودتون می خواهید روی این گل تنظیمات و مانور انجا بدید با روش لایه باز کافی هست لایه مربوط به گل رو انتخاب و فقط اون لایه رو حرکت داده و یا روی آن افکت ماسک و استایل های گوناگون اعمال کنید خوب به نظرم این مقدمه برای توضیح مثال کافی باشه :
    این کد که شما قرار دادید مربوط میشه به پس زمینه آبی روشنی که در قسمت بالای سایت قرار گرفته..همانطور که در هدف ما وجود داره ما می خواهیم تا حد کافی از حجم سایتمون کاسته بشه.برای اینکار من بنا به تجربیاتم لایه مربوط به این تصویر رو انتخاب کرده و توسط ابزار Slice Tool از قسمت عرز 1px و به ارتفاع تصویر پس زمینه برش دادم که این تصویر رو می تونید تو پوشه images مشاهده کنید و بعد از برش توسط کلید های میانبر alt+ctrl+shift+s با فرمت png ذخیره کردم و با ضمیمه کردن در پروژم و ایجاد دیوی با شناسه head-bg با استایل زیر :

    background-image: url('Images/header.png'); background-repeat: repeat-x;
    min-height: 600px;


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

    background-image: url('Images/header.png');

    تصویر رو به پس زمینه لحاظ و توسط دستور :

    background-repeat: repeat-x;

    تصویری که دارای عرض 1px میباسد را موازی با محور x ها امتداد دادم تا تصویر پسز زمینه گرادینت دار من کل دیوم رو پوشش بده..
    موفق باشید.

  15. #15
    کاربر جدید
    تاریخ عضویت
    تیر 1388
    محل زندگی
    قم
    پست
    7

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    با تشکر از دوست عزیز
    میشه لطفا اسم ابزار یا فیلتری که تو فوتوشاپ رنگ رو از قسمتی به قسمت دیگه کم و زیاد می کنه رو بگید.
    در واقع همین چیزی که برا عکس header.png برای از پایین تا بالا استفاده کرده اید.
    با تشکر مجدد

  16. #16

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    مدیر گرامی ، آموزشت خیلی عالیه .. مرسی واقعا و فقط یه سوال ؟

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

  17. #17
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    نقل قول نوشته شده توسط ali200reza مشاهده تاپیک
    با تشکر از دوست عزیز
    میشه لطفا اسم ابزار یا فیلتری که تو فوتوشاپ رنگ رو از قسمتی به قسمت دیگه کم و زیاد می کنه رو بگید.
    در واقع همین چیزی که برا عکس header.png برای از پایین تا بالا استفاده کرده اید.
    با تشکر مجدد
    سلام
    header سایت یک گرادیانت ساده هست که از رنگ روشن شروع و تا سفید امتداد داده شده ، برای دسترسی به این قابلیت کافی رویه لایه مورد نظر راست کلیک کنید و گزینه blending Option انتخاب کنید و از منو سمت چپ گزینه Gradient Overlay رو انتخاب کنید و تنظیمات لازم رو برای لایه مورد نظر اعمال کنید.

    نقل قول نوشته شده توسط hesamsalehnamadi مشاهده تاپیک
    مدیر گرامی ، آموزشت خیلی عالیه .. مرسی واقعا و فقط یه سوال ؟

    تو فوتوشاپ اندازه طرح و dpi رو چه جوری تنظیم میکنید.... یعنی چند در چند و چه dpi ... باز هم مرسی... لیاقت :)
    سلام حسام جان
    برای کاراهایی که نیاز به ظرافت داری 980px عرض و ارتفاع مهم نیست ولی بهتره که زیاد بگیری که در انتهای کار کمبود فضا نداشته باشید تا دوباره لایه هارو به یک میز کار دیگه کپی کنی.(maximum عرض باید 1007px هست از این بیشتر تو رزولوشن های مختلف مشکل ایجاد می کنه).
    رزولوشن رو نیز 100 px/inch بگیر.

    موفق باشید.

  18. #18
    کاربر جدید
    تاریخ عضویت
    تیر 1388
    محل زندگی
    قم
    پست
    7

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    با تشکر مجدد از استاد
    دو تا سوال
    اول اینکه این چیزی که برای لایه هدر فرمودی با اون ابزاری که تو فتوشاپ معرفی کردی (gradient overlay ) تنظیمات رو انجام میدم ولی رو لایه اعمال نمی شه حتی به عنوان یه استایل جدید هم ذخیره کردم.نمی دونم کجاش گیر داره.با فتو شاپ هم کم و بیش اشنا هستم و بحث انتخاب بودن لایه اینا نیست.
    بعد هم در مورد کار با div ها کلا می خوام بدونم رو چه اصولی چیدمانش انجام میشه یعنی طول و عرض و بقیه خاصیت هاش.
    یعنی اگه یه صفحه رو فرض کنیم باید به اندازه تعداد سطر ها div درست کنیم با اندازه دلخواهمون و بیایم داخل اونا ستونها رو مشخص کنیم؟
    ان شالله که تونستم خوب توضیح بدم.
    با تشکر
    آخرین ویرایش به وسیله ali200reza : پنج شنبه 23 آذر 1391 در 03:50 صبح

  19. #19

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    ممنون از آموزش سودمندتون
    یه سوال داشتم :
    چرا محتوای باکس های آبی به طور اتوماتیک داخل باکس قرار نمی گیرن و از حاشیش بیرون میزنن؟
    ممنون میشم اگه زودتر پاسخم رو بدین

  20. #20
    کاربر تازه وارد
    تاریخ عضویت
    بهمن 1390
    محل زندگی
    Rasht
    پست
    95

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    آموزشت خوب بود دوسته من فقط یه سوالی دارم اونم اینه که دقیقا بهم بگو wrapper چیه چون کاملا ٌ با طراحی وب آشنا هستم اما دقیقا نمی دونم wrapper چیه!

  21. #21
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام

    نقل قول نوشته شده توسط samaneh_62 مشاهده تاپیک
    سلام
    ممنون از آموزش سودمندتون
    یه سوال داشتم :
    چرا محتوای باکس های آبی به طور اتوماتیک داخل باکس قرار نمی گیرن و از حاشیش بیرون میزنن؟
    ممنون میشم اگه زودتر پاسخم رو بدین
    تو این اموزش محتوای باکس ها تنظیم نشده ، ولی بعد از این آموزش شما قادر خواهید بود محتوای باکس ها رو تنظیم کنید ، برای مثال می تونید داخل باکس از تگ p یا span استفاده کنید و بوسیله استایل های float و margin جابجاش کنید.
    در هر صورت من تو آینده خیلی نزدیک آموزش طراحی responsive رو روی همین پروژه اعمال خواهم کرد که این جزئیات رو نیز کامل خواهم کرد.


    نقل قول نوشته شده توسط Joyebright مشاهده تاپیک
    آموزشت خوب بود دوسته من فقط یه سوالی دارم اونم اینه که دقیقا بهم بگو wrapper چیه چون کاملا ٌ با طراحی وب آشنا هستم اما دقیقا نمی دونم wrapper چیه!
    دوست عزیز منظور از wraper دیو اصلی هست.

    موفق باشید.

  22. #22

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    نقل قول نوشته شده توسط Joyebright مشاهده تاپیک
    آموزشت خوب بود دوسته من فقط یه سوالی دارم اونم اینه که دقیقا بهم بگو wrapper چیه چون کاملا ٌ با طراحی وب آشنا هستم اما دقیقا نمی دونم wrapper چیه!
    درواقع قسمتی از فضای بروزر هستش که برای سایتمون در نظر گرفتیم شما یه صفحه کاغذ رو فرض کن ، میخوایم داخلش هدر فوتر بدنه و اجزای سایت رو بکشیم . ابعاد و اون فضایی که کاغذ داره همون wrapperهست.

  23. #23

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    چطور عکس هدر رو مستقل از صفحه نمایش کنم یعنی تو کامپیوتر دیگه ، هدر بزرگتر یا کوچکتر نشه ( منظورن فقط عکس قسمت هدر هست).
    سپاس گزارم.
    آخرین ویرایش به وسیله samaneh_62 : چهارشنبه 06 دی 1391 در 02:09 صبح

  24. #24
    کاربر دائمی
    تاریخ عضویت
    اسفند 1390
    محل زندگی
    ahwaz
    پست
    123

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    با تشکر از آموزشتون
    ای کاش درون این بخشهای اچ تی ام ال یکم سروری هم کار می کردید فک کنم دیگه بیچاره شدم اینقدر تو نت بابت این مسئله سرچ کردم و نتونستم چیزی پیدا کنم و مشکلم همچنان ادامه داره
    می شه بگین اگه قرار باشه پستهای سایتتون به صورت پویا باشه یعنی از دیتابیس بگیره باید چه جوری بهش استایل بدیم؟
    من واقعا گیر کردم
    تو رو خدا کمکم کنید

  25. #25

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

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

  26. #26
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

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

  27. #27
    کاربر دائمی آواتار caspianhero
    تاریخ عضویت
    شهریور 1390
    محل زندگی
    زیر سایه ی خدا
    پست
    434

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    با تشکر از مدیرعزیز بخش
    لطفا در اینده یک سایت در قالب css3 و html5 درست کنید تا حسابی مبحث تکمیل بشه
    سپاس

  28. #28

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام و خسته نباشید

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

    یه سوال داشتم . میخوام بدونم با css 3 و html 5 میشه دقیقا همچین چیزی طراحی کرد ولی بدون استفاده از عکس ها و نرم افزار های گرافیکی؟؟
    من فتوشاپ زیاد وارد نیستم و بخاطر همین این اموزش یه خورده اذیتم کرد از ساعت 11 شب تا الان (2:45 ) کار کردم و تموم شد.
    ولی خیلی چیز های جدیدی توی این اموزش یاد گرفتم

    خدا قوت

  29. #29
    کاربر دائمی آواتار h.torabi
    تاریخ عضویت
    بهمن 1391
    محل زندگی
    عشقم ایران همیشه آباد
    پست
    114

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام اگر بخایم تمام اجزای سایت رو در فتو شاب طراحی کنیم (همه قسمت های سایت) که سایتمان گرافیکی بشه
    باعث کاهش سرعت سایت نمیشه؟

    لطفا جواب بدید خیلی خیلی مهم هست................................

  30. #30
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    نقل قول نوشته شده توسط h.torabi مشاهده تاپیک
    سلام اگر بخایم تمام اجزای سایت رو در فتو شاب طراحی کنیم (همه قسمت های سایت) که سایتمان گرافیکی بشه
    باعث کاهش سرعت سایت نمیشه؟

    لطفا جواب بدید خیلی خیلی مهم هست................................
    سلام
    مسلما اینطور خواهد بود بخاطر همین سعی می کنیم تا حد امکان از رنگ ها تو استایل های css استفاده کنیم و فقط تو قسمتهایی که نمیشه با رنگ و یا استایل ایجاد کرد از تصاویر استفاده کنیم، البته استفاده کردن از تصویر نیز روش های بخصوصی داره که مهمترین این روش ها استفاده از css sprite هست و یا روشی که تو قرار دادن سیب و ساعت تو این آموزش استفاده شده.
    موفق باشید.

  31. #31

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    بسیار عاااااااالی بود ممنونم

  32. #32

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    خیلی جامع و کامل بود
    ممنون

  33. #33
    کاربر جدید آواتار mahsa fatemeh
    تاریخ عضویت
    اسفند 1391
    محل زندگی
    تهران/بقیش رو خودمم نمیدونم.
    پست
    1

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    در آموزش هاتون چگونگی گذاشتن قالب آماده رو هم گفتین؟
    یا اگه نه بلدین چه جوری قالب آماده برای وب سایت بزارم با پسوند css

  34. #34

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام بابت اموزش ممنون
    ولی من نتونستم با فتوشاپش کار کنم و تکه ها رو از هم جدا کنم وقتی ctrl+alt+shift+s
    میزنم یه صفجه دیگه باز میشه وقتی سیو میکنم کلی فایل پی ان جی میسازه
    مثلا همین Header.png که شما ساختید رو میشه توضیح بدید که چطوری با slice tools جداش کردید و بعدش اینکه اسمش رو خودتون دستی سیو کردید یا اینکه خود بخود با همون اسم لایه سیو میشه ؟

  35. #35
    VIP آواتار Saber Mogaddas
    تاریخ عضویت
    فروردین 1403
    محل زندگی
    ارومـــــیه
    سن
    35
    پست
    1,472

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    نقل قول نوشته شده توسط mosi2007 مشاهده تاپیک
    سلام بابت اموزش ممنون
    ولی من نتونستم با فتوشاپش کار کنم و تکه ها رو از هم جدا کنم وقتی ctrl+alt+shift+s
    میزنم یه صفجه دیگه باز میشه وقتی سیو میکنم کلی فایل پی ان جی میسازه
    مثلا همین Header.png که شما ساختید رو میشه توضیح بدید که چطوری با slice tools جداش کردید و بعدش اینکه اسمش رو خودتون دستی سیو کردید یا اینکه خود بخود با همون اسم لایه سیو میشه ؟
    سلام
    دلیل اینکه تصویرها تو زمان تکه کردن به تصویر های متعددی ذخیره می شن اینه که شما تو ذخیره (ctrl+alt+shift+s) باید تکه ای که نیاز دارید رو انتخاب کنید برای این کارم کافیه تو صفحه save to web که توسط (ctrl+alt+shift+s) باز میشه تکه ای که توسط Slice Tools برش دادید رو انتخاب کنید اگه می خواهید چند تیکه رو همزمان انتخاب و ذخیره کنید دکمه ctrl رو پایین نگه دارید و تکه هایی که توسط Slice Tools برش دادید رو در صفحه save to web انتخاب و ذخیره کنید. در مورد نام این تکه ها هم نه من اسمشون رو تغییر دادم تا تو برنامه نویسی css راحتر بتونم تشخیص بدم که کدوم فایل مربوط به کدوم تکه هست.

    موفق باشید..

  36. #36

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    خیلی آموزش عالی بود

  37. #37

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام

    من تازه میخام شروع ب یادگیری طراحی وب سایت کنم زیاد درباره اش اطلاعات ندارم

    میشه راهنماییم کنید

    چ چیزایی باید واسه شروع یاد بگیرم و بلد باشم ؟؟؟ ینی پیشنیازش واسه شروع چیه ؟؟؟

    اینجا فهمیدم ک فتوشاپ باید بلد باشم و html

    دیگه چی ؟؟؟

    منبع و کتاب خوب هم واسه یادگیری هر کدوم از پیش نیازاش اگه سراغ دارید معرفی کنید خیلی ممنون میشم

    راستی دانشجوی نرم افزار هم هستم ترم 3

  38. #38

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    من میخوام یه صفحه ایجاد کنم که توش کد بک گراند رو بزارم که صفحه دارای بک گراند باشه
    *الان تو این صفحه هیچ کدی نیست
    لطفا کدهای مربوط به درج بک گراند برای صفحه رو برام بزارید ( اگه میشه واسه فایل php اگرم نمیشه که همون html رو بزارید)
    مرسی

  39. #39
    کاربر دائمی آواتار SONITAJ
    تاریخ عضویت
    فروردین 1391
    محل زندگی
    پاسارگاد
    پست
    307

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

    سلام
    لطفا دراین باره هم یک توضیح می دهید.ساخت یک منو عمودی سمت راست صفحات وب سایت (که من گذاشتم توی وب سایتم ویک منو افقی هم بالای صفحه دارم.) عکس ومطالب را طوری توی صفحه قرار بدهیم که سمت چپ منو ی عمودی قرار بگیره و.من با css یک منو عمودی گذاشتم توی وب سایتم اما مطالب وعکسها زیر منو قرار می گیره درحالی که می خواهم سمت چپ منوی عمودی قرار بگیره .من تازه شروع به خوندن ویادگرفتن css کردم .به همین دلیل از شما خواهش می کنم این مورد را آموزش بدهید تامن هم یادبگیرم وهم بتوانم کدم را اصلاح کنم ومطالبی را که درست وخوب یاد نگرفتم بهتر متوجه بشوم .
    من منتظر اموزش شما دراین مورد هستم.
    ممنونم

  40. #40

    نقل قول: طراحی یک وب سایت ساده با CSS,HTML

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

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

    باتشکر از تاپیکتون!

صفحه 1 از 2 12 آخرآخر

تاپیک های مشابه

  1. طراحی یک وب سایت با bootstrap
    نوشته شده توسط jamejam123 در بخش طراحی وب (Web Design)
    پاسخ: 18
    آخرین پست: شنبه 07 تیر 1393, 17:34 عصر
  2. دانلود آموزش طراحی یک وب سایت زیبا با Css
    نوشته شده توسط AmirProgramer در بخش طراحی وب (Web Design)
    پاسخ: 5
    آخرین پست: شنبه 22 تیر 1392, 13:30 عصر
  3. کانفیگ iis 6 برای اجرای یک وب سایت که با دات نت طراحی شده
    نوشته شده توسط مهدی رحیم زاده در بخش شبکه و Networking‌
    پاسخ: 2
    آخرین پست: چهارشنبه 17 آبان 1391, 09:07 صبح
  4. پاسخ: 3
    آخرین پست: پنج شنبه 05 مرداد 1391, 15:23 عصر
  5. سوال: درخواست یک وب سایت ساده ی پویا با php برای آموزش
    نوشته شده توسط yadolah shojaei در بخش PHP
    پاسخ: 3
    آخرین پست: سه شنبه 06 دی 1390, 18:20 عصر

برچسب های این تاپیک

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •