أدوات لإعادة هيكلة تخطيطات HTML المستندة إلى الجدول إلى CSS؟
https://stackoverflow.com/questions/151369
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
إعطاء صفحة HTML تحتوي على تخطيط معقد يعتمد على الجدول والعديد من العلامات المكررة والمهدرة، على سبيل المثال:
td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.
هل هناك أدوات للمساعدة في مهمة إعادة هيكلة الصفحة إلى شكل أكثر إحكاما؟على سبيل المثال، أداة تقوم تلقائيًا بإنشاء أنماط ومحددات CSS؟الذي يحول الجداول إلى تخطيطات div؟
فقط لإعطاء فكرة عن ترتيب المشكلة، الصفحة التي أطلع عليها هي أكثر من 8000 سطر من HTML وJavaScript، أي 500 كيلو بايت لا عد الصور!
تحديث:في إعادة.تعليقات "استسلم وابدأ من الصفر".ماذا يعني ذلك في العالم الحقيقي؟هل تريد طباعة الصفحة ومسحها ضوئيًا وتعيينها كصورة خلفية في Dreamweaver والبدء بذلك؟بجد؟هل سيكون هذا حقًا أكثر كفاءة من إعادة الهيكلة؟
تحديث:أنا لا أشوه سمعة "تتبعه من الصفر" ولم أقصد أن أشير ضمنًا إلى أن Dreamweaver هو الأداة المفضلة لدي بأي حال من الأحوال.أنا مندهش جدًا من أن إعادة هيكلة التصميم تعتبر مشكلة مستعصية على الحل.
المحلول
أنا أتفق مع تيمب حيث ستواجه الأدوات الآلية مشكلة في القيام بذلك، لا سيما إجراء القفزات العلائقية لدمج CSS وتجريده بالطريقة الأكثر فعالية.
إذا كنت تقدم بيانات جدولية، فهذا يمكن يكون من المعقول محاولة إعادة هيكلة CSS المضمنة إلى فئات قابلة لإعادة الاستخدام.
إذا كان لديك الكثير من الجداول المتشابهة ذات الأنماط المضمنة، فيمكنك إعادة هيكلة CSS تدريجيًا عن طريق البحث والاستبدال البسيط.سيعطيك هذا الكثير من الفئات التي تتطابق مع مجموعة فرعية من الجداول المتشابهة والكثير من الفئات المتشابهة إلى حد ما.سيكون تقسيم ذلك إلى تخطيط وعرض تقديمي بداية جيدة، ثم تجاوز ذلك بفئات محددة لكل موضوع أو عنصر مرتبط لغويًا.
ما زلت أوصي تبدأ من الصفر, ، من المحتمل أن يكون الأمر أسرع، ويمكنك فقط إعادة إنشاء ما تحتاجه لعرض الصفحة، ويمكنك إعادة استخدام العناصر أو مجموعات العناصر في وقت لاحق.
الوقت الذي تقضيه سيؤتي ثماره أيضًا بشكل كبير إذا كانت الصفحة بحاجة إلى تعديل مرة أخرى.
ولكن ذاك مُطْلَقاً من المحتمل أنه؟:د
نصائح أخرى
لست على علم بأدوات محددة، فقط الأدوات العامة للكافيين و فايربوغ, ، والتي يجب أن يكون على علم بها أي شخص يقوم بأعمال CSS.
أعتقد أن المشكلة صعبة بما يكفي لدرجة أن الأدوات الآلية ستواجه صعوبة في إنتاج ترميز جيد وقابل للصيانة وCSS.
يبدو كما لو كنت تبحث عن وسائل أكثر آلية لإعادة تصميم التخطيط القديم القائم على الجدول وفقًا لمعايير CSS.ومع ذلك، فأنا أتفق مع بعض التعليقات الأخرى التي تقول "البدء من الصفر".
ما يعنيه هذا بالنسبة لك هو أنه يجب عليك محاولة إعادة بناء (باستخدام CSS) المظهر الذي تم تحقيقه باستخدام جدول HTML.إذا فاتك هذا المفهوم، فإنني أقترح البحث على Google لبعض دروس CSS للمبتدئين، وربما حتى التركيز على تدريس مفهوم Table->تخطيطات CSS..
هناك أداة أخرى يجب وضعها في الاعتبار (والتي قد تساعدك بشكل أكبر) وهي نوع من "إطار عمل" CSS.أوصي مخطط CSS لهذا، فهو يساعد في إنشاء تخطيطات تشبه الشبكة/الجدول بأقل جهد.شيء جيد آخر هو بعد آخر متعدد الأعمدة التخطيط, ، والتي لديها أنيق حقا منشئ تخطيط متعدد الأعمدة.
لا تقم فقط بإلقائها في برنامج Dreamweaver أو أي أداة أخرى من اختيارك وتقسيمها إلى شرائح.اكتب HTML أولاً بأسلوب دلالي بحت.على سبيل المثال، سيكون التخطيط الشائع جدًا هو:
<body>
<div id="header">
<img id="logo"/>
<h1 id="title">
My Site
</h1>
<div id="subtitle">Playing with css</div>
</div>
<div id="content">
<h2>Page 1</h2>
<p>Blah blah blah..</p>
</div>
<div id="menu">
<ul>
<li><a>Some link</a></li>
...
</ul>
</div>
</body>
قم بتنفيذ HTML بطريقة تتناسب مع المحتوى الخاص بك.يجب أن يكون قابلاً للاستخدام إذا لم يكن لديك CSS على الإطلاق.بعد ذلك قم بإضافة CSS لجعله يبدو بالشكل الذي تريده.مع حالة المتصفحات/CSS الآن، ربما لا يزال يتعين عليك إضافة بعض أدوات الديكور إلى HTML - على سبيل المثال، لف بعض الأشياء في أقسام إضافية، فقط لتتمكن من الحصول على المحتوى بالطريقة التي تريدها.
بمجرد الانتهاء من ذلك، سيكون لديك تخطيط مرن للغاية يمكن تعديله بسهولة باستخدام CSS، وسيكون لديك صفحة يمكن الوصول إليها لكل من الأشخاص ذوي الإعاقة ومحركات البحث.
يستغرق الأمر قدرًا كبيرًا من التعلم قبل أن تتقنه، لكنه يستحق العناء.قاوم إغراء الاستسلام والعودة إلى التخطيطات القائمة على الجدول، واعمل على تحقيق ذلك.يمكن القيام بكل شيء باستخدام HTML وCSS الدلالي.
أنت تشوه سمعة هذا النهج في سؤالك، لكنني أوصي بالتقاط لقطة شاشة لصفحتك في المتصفح الذي تفضل عرضه بشكل أفضل، وإعلان ذلك ليكون مرجعك، والبدء في محاولة إعادة إنشائه.وأسهل مما كنت اعتقد.لقد اضطررت إلى استخدام تخطيطات قديمة تعتمد على الجداول وتحويلها إلى قوالب CMS تم تنفيذها باستخدام التقنيات الحديثة، وهي ليست وظيفة سيئة.
أنا أتعامل مع مشكلة مماثلة في الوقت الحالي، ليست فوضوية تمامًا كما يبدو هذا، ولكنها نتاج نماذج ويب asp.net سيئة للغاية، وحالة عرض مبالغ فيها، وعناصر تحكم الخادم المتداخلة بشدة والتي تعمل على تنسيق نتائج البحث من قاعدة بيانات.مما يؤدي إلى ما يقرب من 300 - 400 ألف علامة لـ 50 صفًا من قواعد البيانات - نعم.
لم أجد أي أدوات آلية من شأنها أن تقوم بعمل نصف معقول لإعادة هيكلتها.
يساعد البدء بأداة مثل الاستوديو المرئي الذي يمكنك استخدامه لإعادة تنسيق التعليمات البرمجية بطريقة متسقة.يمكنك بعد ذلك استخدام مجموعات من التعبيرات العادية والاختيار المستطيل لبدء التخلص من العناصر غير المرغوب فيها، وإزالة العلامات الزائدة عن الحاجة، للبدء في فرز ما هو مهم وما هو غير مهم، ثم البدء في تحديد نمط فعال يدويًا لتقديمه المعلومات.
الحيلة هي تقسيمها إلى أجزاء يمكن التحكم فيها، ثم بناءها من هناك.
إذا كان لديك الكثير من "البيانات الجدولية" الفعلية لتنسيقها، ولمرة واحدة فقط، فقد وجدت أن برنامج Excel هو منقذي في مناسبات قليلة، فالصق البيانات في ورقة، ثم استخدم مزيجًا من التسلسل والتعبئة لإنشاء العلامات للبيانات الجدولية.
البدء من الصفر يعني العودة إلى لوحة رسم التصميم.إذا كنت بحاجة إلى إعادة بناء مثل هذا المسخ، فطوال الوقت الذي ستقضيه في تحسينه، ربما تكون قد قمت بإعادة تصميمه بالكامل.
إذا كنت تريد الابتعاد عن العلامات المكررة والمهدرة، فأنت بحاجة إلى الهروب من Dreamewaver.محرر النصوص الجيد (jedit، emacs، vim، Eclipse، وما إلى ذلك) هو كل ما تحتاجه حقًا.إذا قمت بتخصيص المحرر الخاص بك بشكل صحيح، فلن يفوتك برنامج Dreamweaver.(Emacs مع nXhtml وyasnippets هو المفضل لدي.)
