نظر بدین!! طراحی این سایت کاملا از CSS بدون Table است!!!

[echessdesign]

دوستان عزیز
من در طراحی Layout این سایت از تکنیک CSS استفاده کردم و در هیچ کجای سایت از Table ها استفاده نکردم. البته طراحی Layout صفحه با CSS بدون Table کار جدیدی است که به تازگی طراحان وب بدان روی آورده اند. برای اینکه ما هم از این قافله نیکو عقب نمانیم، سعی بر آن داشتیم که پای بر این مهم نهیم و کار را در آن جهت ادامه دهیم.
امیدوارم با نظرات ارزنده خود مارا یاری دهید. در صورت داشتن هر گونه سوال آن را مطرح فرمایید. آدرس سایت: http://www.gharanbar.com

پیروز باشید و سر بلند.

 

[ALBORZ.VICTOR]

از چه نرم افزاري استفاده كردي هم واسه ديزاين كلي هم سي اس اس
ميتوني يه آموزش كلي بدي؟
چون من حداقل يه تيبل بايد بزارم و الا همه چي به هم ميريزه
ممنون ميشم يه آموزش كوتاه و كلي بدي

 

[echessdesign]

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

 

[hel_xoy]

خوبه = عالی!
ولی به نظر من سایتی خوبه که هم از HTML و هم از CSS و PHP استفاده بشه.
هر سه ی این ها با هم یعنی یه سایت فوق العاده البته فلش هم می شه.
ولی کار شما هم بی تعریف نیست
کسی این کاره باشه تعجب می کنه.
ولی خوشگل نشده به اندازه ی سایت خودتون نیست سایت شما خیلی قشنگه.
شما الان این سات رو نگاه کنید
http://www.iflashnet.com/flashindex.htm
فول فلش هستش به نظر من هیچ چیزی به این نمی رسه

یه دروغ :
ولی با اینترنت ایران که پر سرعترین خط دنیا را داره کار نمی کنه

 

[echessdesign]

hel_xoy جان
از دقتت متشکرم. به موضوع خیلی مهمی اشاره کردی.
ایت سایت در طراحی Layout آن فقط از CSS استفاده شده، فرامین HTML پابرجا هستند. PHP نیز زبان برنامه نویسی تحت وب هست. بله شما درست می فرمایید، اما منظور من فقط طراحی با CSS بود به نظرم کار جدیدی هست. حتی w3c.org در اکثر طراحی خود از Table استفاده کرده. سایت های : dell.com, ibm.com,... هنوزم از Table در طراحی Layout صفحه خود استفاده می کنند.
طراحی این سایت به شکلی است که در تمام مرورگر های رایج، از جمله: Opera, IE, Mozilla Firefox, Netscape, Avant Browser, Maxthon,... به شکل متحد ظاهر می شه و طراحی آن بهم نمیریزه!!!!

 

[Ali_ix]

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

در مورد کدنویسی استاتیک سایت هم تبریک میگم ... شما توی صفحتون هیچ Tableی ندارید !!!
طراحی هم با سازگاری مرورگرها کار شده که خیلی خوبه.

و اما از نظر بنده به عنوان یک علاقمند به طراحی پیشرفته و دنیای استانداردها و ... گام بعدی میتونه کدنویسی اصولی و معنایی باشه (Semantic Coding).

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

اگر خواستید بفرمایید تا در حد توانم در این مورد توضیح بدم...

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

موف باشید

 

[ALBORZ.VICTOR]

ببينيد اكثر ماها بصورت تجربي كار كرديم و سبك كارهامون با هم فرق ميكنه
مي خوام بدونم شما از اول چجوري شروع ميكنيد براي يه كار مثل اين(استاندارد و بدون تيبل)
راستي من با Dream Weaver نميتونم سي اس اس امو كنترل كنم
نميتونم درست توضيح بدم مثلا اون چيزي در نمياد كه ميخوام يعني 40 بار بايد بالا پايين كنم تا اون چيزي بشه كه مي خوام
و اين اعصاب خورد كنه سي اس اس كلي رو هم با Top Style ميسازم

 

[echessdesign]

Ali_ix جان
متشکرم از نظر ارزشمند شما. بی زحمت در باره Semantic Coding توضیح بفرمایید که من و دوستان از آن بهره مند شویم.


ALBORZ.VICTOR جان
من از ابتدا از FrontPage شروع کردم. دلیل خاصی هم نداشت. بعد ها با نرم افزار های دیگر طراحی وب سایت آشنا شدم، اما بنا به دلایلی Front Page رو ترجیح دادم. هم اکنون از Microsoft Expression Web Designer (Beta) استفاده می کنم. در طراحی Layout صفحه با Table واقعا خلاقیت خودش رو می خواهد، چون Table ها انعطاف پزیری کمی دارند!!! من CSS رو در Notepade مینویسم. چون کد ها و فرامین بسیار ساده ای داره، اما استفاده از اون واقعا خلاقیت، هوش، زکاوت و نوآوری می خواهد. شما برای طراحی قالب صفحه با CSS چندین روش مبتکرانه می توانید به کار ببرید، در حالی که Table این نرمش رو نداره!!!
نرم افزار طراحی جدید وب سایت مایکروسافت، کلا بر پایه CSS هست با نام: Microsoft Expression Web Designer (Beta) توصیه می کنم حتما دانلود کنید. http://forum.majidonline.com/forum36/thread54414.html
طراحی Layout صفحه با CSS راحت هست، اما سازگار کردن با مرور گر های مختلف دشوار هست، زیرا هر مرورگر ساز خود رو می زنه. جای آموزش CSS در این فرم خالیست.
Top Style ادیتور جالبی هست اما نرم افزار جدید طراحی وب سایت مایکروسافت یه چیزه دیگست. شما مشکلاتت رو یک به یک بیان کن ، من و دوستان در خدمت شما هستیم.
موفق باشید.

 

[hel_xoy]

یه کار تازه

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

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

 

[ALBORZ.VICTOR]

کاربر زیر به خاطر این پست از echessdesign تشکر کرده است : Remove Your Thanks
ALBORZ.VICTOR ( يک دقيقه پيش)

اگه ميشد 10 باز اين كارو انجام ميدادم
انجمن طراحي وب ما تو مجيد آنلاين خيلي كليه اگه زير شاخه داشت بهتر بود
مثلا Css گرافيك وب طراحي تم توسط فوتوشاپ يا اصلا فوتوشاپ و وب

طراحي تم توسط فوتوشاپ

اينو اگه تو انجمن فوتوشاپ بگي ميگيرن ميزننت ميگن مربوط به طراحي وب ميشه ))

 

[ALBORZ.VICTOR]

منم براي كار با سي اس اس با فرانت پيج راحت ترم تا دريم ويور
َ
Adobe Go Live هم خوبه
اين Microsoft Expression Web Designer
حجمش بالاست بايد سيديشو گير بيارم
مرسي

 

[Ocarina]

منم براي كار با سي اس اس با فرانت پيج راحت ترم تا دريم ويور
َ
Adobe Go Live هم خوبه
اين Microsoft Expression Web Designer
حجمش بالاست بايد سيديشو گير بيارم
مرسي

آقا منم پایه....
گیر آوردی میتونی واسه من هم بفرستی؟
اگه من هم گیر آوردمش چشم!
من اگه تابستونی گذرم به دانشگاهمون افتاد میرم داونلود میکنم! 512k !!!

 

[ALBORZ.VICTOR]

گير آوردنش كه كاري نداره من زيادي عجولم - آبي كامپيوتر مشهد شعبه داره
تلفن : 7670859
تهران :88952994
تهران:ميدان فاطمي-بازارچه هديه -پلاك13
برا كسايي كه نميدونن از كجا گير بيارن
منم فردا ميرم ميخرم

 

[Ocarina]

کمی توضیح درباره این آبی کامپیوتر...
بیا پیغام خصوصی(تاپیک از موضوعش منخرف نشه)

 

[Aftabgardan-cc]

سلام؛

من نياز به يه كم توضيح دارم

متوجه برتري‌هاي CSS و كاربردش نمي‌شم!
مي‌شه يكي يه كم توضيح بده؟

صفحه‌اي كه شما طراحي كرديد چه ويژگي‌هايي داره كه همه دارن تعريف مي‌كنن؟
ممنون مي‌شم من رو هم با اين موضوع آشنا كنيد...

 

[echessdesign]

Aftabgardan-cc جان
برای طراحی Layout صفحات وب، منظور طراحی ساختار صفحات وب و تعیین محل قرار گرفتن المان ها، طراحان وب از Table یا جداول استفاده می کنند. این امر از بهم ریختن صفحات در رزولیشن ها، مرورگر ها، سیستم عامل ها،... مختلف جلوگیری می کند.
ر نسخه قدیمی HTML . محتویات. ساختار و دستورات مربوط به فرمت در یک سند منفرد و ساده نگداری می شد. W3C سیتم جدید را ارایه داد و دستورات مربوط به فرمت را از ساختار و محتویات صفحه جدا کرد. با استفاده از این سیتم میتوان فرمت مورد نظر را به یک پارگراف ساده . یک صفحه وب ویا در صورت لزوم. به کل یک سایت اعمال کرد. بنابراین در نسخه جدید HTML (یعنی نسخه چهارم) . W3C بیشتر المان های مربوط به فرمت را مشخص کرد تا در آینده آنها را از قوانین و مقررات استاندارد جدا کند.از این به بعد این المان ها بد تلقی شده و استفاده از آنها توصیه نمیشود. در همین زمان برای پر کردن این خلا سیتم جدیدی برای دستورات فرمت به وجود آورده و ان را CSS یا Cascading Style Sheet نامیدند.
مشخصات اولیه CSS به بازسازی همان اثرات HTML محدود شده بودند. ولی CSS Level 2 که در سال 1998 منتشر شد ویژگی ها و توانایی های بسیاری را به ارمغان آورد.مثل امکان تعیین المان های موجود در یک صفحه به طور دقیق. هم اکنون CSS به شکلی در آمده است که نه تنها امکانات و فرمت کردن HTML را بازسازی نموده بلکه می تواند طرح های بسیار حرفه ای و جالب به وجود آورد.
نرم افزار Microsoft Expression Web Designer (Beta) بعلت اینکه تازه نسخه آزمایشی آن منتشر شده، و نرم افزار کاملا تخصصی می باشد، بعید می دونم به این زودی ها سی دی اون رو تو بازار به شه پیدا کرد. معلوم نیست مایکروسافت تا چه زمانی این نرم افزار رو برای دانلود باره، برای همین پیشنهاد می کنم به سرعت اون رو دانلود کنید. اصول این نرم افزار، طراحی بر پایه CSS هست.

 

[Ali_ix]

Ali_ix جان
متشکرم از نظر ارزشمند شما. بی زحمت در باره Semantic Coding توضیح بفرمایید که من و دوستان از آن بهره مند شویم.

در واقع Semnatic Coding‌ یک مفهومه ... هیچ استاندادر یا متر خاصی برای اندازه گیری و تطبیق نداره !
و این مفهوم رو بیان میکنه که کد سایت شما٬ به خودی خود باید معنا و مفهوم داشته و به قولی Human Readable‌ باشه.
یعنی من نوعی که اطلاعات پایه ای از html دارم بتونم کد html صفحه شما رو بخونم و بفهمم که ساختار و نمایش کلی این صفحه چی میتونه باشه...

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

حالا معنی عملی این مفهوم برا ینمونه میتونه این باشه که شما در سایتتون به جای اینکه برای تیتر پارگراف ها تون از یک تگ span‌ با کلاس LH استفاده کنید و از طریق CSS شکل و ظاهر توپر و بزرگتر و .. بهش بدید !! میتویند زا تگهای مخصوص اینکار یعنی تگهای Heading استفاده کنید (h1-h5).

و الی آخر !

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

/

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

http://brainstormsandraves.com/articles/semantics/structure/
http://www.markboulton.co.uk/journal/comments/semantic_typography_bridging_the_xhtml_gap/
http://www.andybudd.com/archives/2004/05/semantic_coding/

موفق باشید

 

[echessdesign]

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

 

[mehrandesign]

ترکوندی پسر

 

[arashonline]

حيفم اومد تشكر نكنم ممنون از همه دوستان...
دوست من سايت خيلي قشنگ . فني و خوبي بود و طراحيش هم بيشتر از اين لازم به زيبا شدن نداشت....
ولي اين كارو ارتقاش بدي موفق ميشي.....