كيف تحكم على ما يجب أن يكون مزيد من الترميز و و
  • إذا كان التصميم يحتوي على جدول مثل البيانات؟

    StackOverflow https://stackoverflow.com/questions/2103749

    سؤال

    على سبيل المثال ما هي الطريقة التي يمكن الوصول إليها لترميز هذا التصميم.

    alt text http://easycaptures.com/fs/uploaded/220/0715108922.png

    حاليا CMS لشركتي تنتج هذا HTML لهذا التصميم

    <div id="presentationsContainer">
        <div class="ItemsContainer">
            <div class="presentationsItemContainer">
                <div class="TitleContainer">
                    Presentation October 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="Presentation.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    May 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    March 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    Results Presentation September 2008</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2008.ppt">Download PPT </a>
                </div>
            </div>
        </div>
    </div>

    مثل <table> ليس جيدًا لمستخدم قارئ الشاشة ، فما الذي سيحدث للمستخدم مع الكثير من علامات DIV غير الدلالية ، سيخلق كلاهما مشكلة لمستخدم قارئ الشاشة أو DIV غير الدلالي يخلق مشكلة أقل من الترميز بشكل صحيح

    ما الذي يجب استخدامه للوصول وإذا تم تعطيل CSS ، فما هي تقنية الكود التي ستحافظ على تنسيق مفهوم؟

    هل كانت مفيدة؟

    المحلول

    IMO أي من الطرق الثلاثة على ما يرام. يمكن أن أجادل أي واحد منهم أن يكون أفضل ثم الآخر 2.

    سأذهب نفسي مع القائمة لمجرد أن كود أقل عندما أبحث عنها.

    <ul id="presentationsContainer">
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
</ul>

    تعديل لا يزال من الممكن إجراء إضافة PPT الإضافي عن طريق إضافة فترة أخرى إلى كل LI. أفترض أنه للحصول على PDF قم بتنزيل Floating الخاص بك إلى اليمين وإعطائه عرضًا. بهذه الطريقة ، فإن إضافة عمود آخر ليس رمز CSS آخر. الجحيم يمكنك حتى إزالة المدى وإضافة هذا النمط إلى علامة A. على افتراض عدم وجود روابط في هذا العمود الأول.

    ومع ذلك ، إذا كنت ترغب في تغييره إلى جدول (والذي قد يكون خيارًا أفضل مع المزيد من الأعمدة) ، فيمكنك فعل شيء مثل هذا: يمكنك بالفعل معرفة مقدار الكود الذي يجب البحث عنه.

    <table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

    نصائح أخرى

    تبدو لقطة الشاشة هذه وكأنها مرشح مثالي لـ <table>. سيكون من الأسهل نمطًا ، وتوافق X-Browser ، ومع بعض الرؤوس التي يمكن الوصول إليها تمامًا. كما أنه سيجعل نفس الشيء إذا تمت إزالة تصميم CSS.

    هذا يبدو لي مثل قائمة غير مرتبة. استخدام Div مثل هذا ليس أفضل من استخدام الجداول. إن استخدام قائمة غير مرتبة أكثر منطقية من وجهة نظر الترميز.

    شيء واحد يمكن الوصول إليه أكثر (أو على الأقل أكثر تمشيا مع إرشادات W3C) هو روابط التنزيل التي منطقية خارج السياق.

    لذا ، بدلاً من فقط:

    <a target="_blank" href="2009.ppt">Download PPT </a>

    يمكن أن يكون لديك:

    <a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
    مرخصة بموجب: CC-BY-SA مع الإسناد
    لا تنتمي إلى StackOverflow
    scroll top