محاسبه اندازه تصوير

[mahetaban]

سلام
من در حال طراحي سايتي هستم و مي خواهم قسمتي را در بالاي صفحه داشته باشم كه نام سايت (به صورت تصوير) و لوگو در آن قرار گيرد. براي طراحي اين تصاوير مي‌خواهم از برنامه كورل و فتوشاپ استفاده كنم. در اين برنامه ها اندازه تصوير را چگونه مشخص كنم كه در همه سيستم‌ها با هر اندازه مانيتوري كه دارند اين تصوير كل عرض مانيتور را بگيرد؟
من از اندازه 44 سانتي‌متر براي طول و 7.7 سانتي متر براي عرض استفاده مي كنم و در زماني كه تصوير را به وسيله كد html وارد برنامه مي كنم نيز همين ابعاد را مي دهم. در اين حالت روي مانيتور خودم خيلي خوب است و درست نمايش مي دهد ولي در مانيتورهايي كه اندازه آنها بزرگتر است به اين شكل نيست و قسمتي از صفحه مرورگر خالي مي ماند.

لطفاً من را راهنمايي كنيد

[alireza457]

من هم سوال مشابه دارم

[بهزاد علی محمدزاده]

من از اندازه 44 سانتي‌متر براي طول و 7.7 سانتي متر براي عرض استفاده مي كنم و در زماني كه تصوير را به وسيله كد html وارد برنامه مي كنم نيز همين ابعاد را مي دهم. در اين حالت روي مانيتور خودم خيلي خوب است و درست نمايش مي دهد ولي در مانيتورهايي كه اندازه آنها بزرگتر است به اين شكل نيست و قسمتي از صفحه مرورگر خالي مي ماند.


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

من یه قطعه کد سریع برات نوشتم تا منظورم و رسونده باشم ( امیدوارم ) . این لینک (http://jsfiddle.net/behzadam/0bj9euvk/) ویرایشگر آنلاین هست که می تونی بخش کد ها و نمایش و ببینی. قسمت نمایش و بزرگ و کوچک کن.

در css اگر تگ والد position رو relative بدیم و تگ های فرزند position: absolute داشته باشند اونوقت میشه اونها رو به نسبت تگ والد تنظیم کرد و right , left, top, bottom فعال میشه. من تگ content رو relative گذاشتم و به تگ های داخل یعنی absolute دادم اونوقت اگر right و مقدار دهی کنی المان میره سمت راست و همینطور برای چپ و بالا و پایین. که من گفتم از راست 100 تا پیکسل فاصله داشته باش. منظورم از تگ های داخل Your-logo , your-text هست.

اینها رو گذاشتم که فقط موضوع دستت بیاد که با فتوشاپ اینکارها رو انجام نمیدن و خلاصه مباحث مفصلی هم داره. در این وب (http://www.maxdesign.com.au/articles/css-layouts) سایت لایه بندی های مختلفی هست که می تونی ازش کمک بگیری .