پباده سازی وبسایت با CSS

پباده سازی وبسایت با CSS 

طراحی با CSS به واقع جداسازی محتوا و سبک است . محتوا بایستی در نسخهء متنی HTML و CSS بایستی مراقب باشد که HTML در برگه چه‌گونه نوشته را به نمایش می‌گذارد . با این وجود , بخش اعظم طراحان وبسایت به ط<a href="https://www.on5.ir/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D9%85%D8%B4%D9%87%D8%AF/">طراحی سایت در مشهد</a>

وب مبادرت به جدا کردن محتوا و سبک نمیکنند . HTML و CSS از یکدیگر جدا می‌باشند . ولی در حالتی که شما تغییراتی در نسخهء متنی HTML تولید فرمائید , یک ظواهر پباده سازی شدهء از نیز جدا تولید می‌شود . چون CSS برای انجام عمل متکی بر موادتشکیل دهنده مو جود در نوشته HTML هست . 

فعلا این مورد برای کسی اهمیت ندارد که ادغام مطالب یک‌سری صفحهء اثبات کنار نیز قرار نیست خیلی تغییری در پباده سازی تارنما ساخت نماید ; که با استفاده از CSSدر پباده سازی وبسایت از منافع آن منفعت مند شده و از وجود دسترسی های معمولی اطمینان حاصل نمائید . 

البته در‌صورتی‌که با یک سایتی که به صدق رئیس شده و به صورت تر و تمیز مطالب آن آپ تو دیت می‌شود و با وجود تعداد متعددی محتوای دینامیک ( پویا ) , زیاد حساس است که بتوان فارغ از نیاز به بازنویسی HTML در هر برگه و فارغ از پخش شدن مطالبی که تا به اکنون گردآوری شده , فعالیت انجام بخشید . جواب این فعالیت CSS میباشد . البته فقط در شرایطی‌که می توان در پباده سازی وبسایت از CSS فایده مند شد که مطالب و محتوا تماما از سبک جدا شده باشد . 

برای داشتن پباده سازی وبسایت که کاملا قابل تغییر تحول با CSS باشد , فراوان لازم است که بدانیم که در هر ورژن متنی HTML در واقع 2 عنصر جدا موجود هست . یکی محتوا است – که دربرگیرنده نوشته و تصاویری است که اشخاص در تارنما آنها‌را چشم و مطالعه می نمایند ; و دیگری ساختار برگه است – DIVs ویا Table که موادسازنده و خصوصیت های متعدد در برگه را تعریف می نماید . 

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

اینها موادسازنده ساختاری کاغذ در پباده سازی وبسایت هست . در هرمورد از این موادتشکیل دهنده ساختاری بایستی محتوای برگه قرار گیرد . به صورت نمونه لوگو ( نشانه تجاری کمپانی ) در تیتر ورقه , منو در ستون سمت چپ برگه و نوشته کلیدی در محوطهء حیاتی کاغذ قرار می‌گیرد . 

درین روش با در حیث به دست آوردن ساختار در هر ورقه , CSS بعد از آن قادر است سوای نگرانی در زمینه‌ی محتوا و مطالب مناطق و محل های هدفمندی برای هر برگه ساخت کند . در‌حالتی که فضای نوشته در ستون سمت چپ ورقه 10 پیکسل باشد و فضای با اهمیت ورقه 12 باشد , در CSS می‌توانید مطالب و چیزهایی که تصمیم به انجام آن دارید را درین دور و اطراف قرار دهید . سمت چپ سایز فونت 10 و فضای دارای اهمیت سایز فونت قادر است 12 باشد . 

این بدان معنا است که تا وقتیکه کاغذ با به عبارتی پایهء عنصرها ساختاری باشد می توان کاملاً با CSS تبدیل کرد – مثلا ستون سمت چپ را ساخته و تصویر پیش مورد تیتر و یا این که صفحهء اساسی را طولانی تر نموده و ادامه دهید . ولی آشنایی نسخهء متنی HTML که دربرگیرنده ساختار و محتوا می‌باشند مرحلهء اولیه پباده سازی وب سایت با CSS در‌این عمل است . 

برای تعمیم بیشتر , نیاز به یک ساختار کاغذ ای است که تقریباً به اندازهء کافی انعطاف پذیر بوده به نحوی که CSS بتواند عملیاتی که اضطراری و واجب و اثرگذار است را انجام داده و این کار فارغ از هیچ جور نگرانی در زمینه‌ی محتوا در هر قسمت از پباده سازی تارنما و صفحه های برگزار شود . 

برای انجام این فعالیت در مرحلهء بعدی ساختار بنیادی بایستی یک تقسیم بندی دیگر داشته باشید . table تیتر به عنوان مثال بایستی به سه table داخلی تقسیم شود : table سمت چپ – table سمت راست و table کلیدی ; تقریباً تمام ترکیبات ممکن که شما نیاز دارید تا با CSS هر سبکی که در پباده سازی وبسایت میخواهید به نمایش بگذارید . فقط کاری که بایستی انجام دهید این است که محتوا و مطالب را در منطقهء ذی‌ربط قرار دهید . 

فایده گیری از منافع جداسازی این سه بخش که همگی استاندارد ها مثل تبدیل پس زمینهء محو به رنگهای جامد , تصویر بگراند برای افزودن حاشیه های گرد ( rounded corners ) , تغییرات در باطن و بیرون تصاویر صرفا با CSS انجام میشود . Table داخلی می‌تواند شناور بوده و می‌تواند یک تصویر را بر روی دیگری قرار دهد . 

در صورتی این روش در ساختار بخش ها دیگر در html مصرف شود , برگه ای را خواهید داشت که کاغذ بندی آن کاملا بوسیله CSS پباده سازی شده و کاملا از محتوای کاغذ جدا و جداگانه خواهد بود .

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3216.208415546944!2d59.594443715489156!3d36.28299260434094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f6c913ae2988767%3A0x9bb53a655a55e550!2sOn5!5e0!3m2!1sen!2sir!4v1503767608928" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>