XOOPS輕鬆架 - 線上書籍

:::

用AI學PHP8
========

1. 我們以 `index.html` 為主，將 `slider.html` 中的滑動圖的結構取出，並且將CSS樣式部份獨立成 `style.css` 檔，將javaScript獨立成 `index.js` 檔，並在最後載入之，以便讓結構更清晰。
2. `index.html` 最後結果如下： 
    ```markup
    
    <html lang="zh-Hant">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>南市校園藝文活動新聞</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header class="header mb-4">
            <div class="container">
                <h1 class="text-center">南市校園藝文活動新聞</h1>
            </div>
        </header>
    
        <div class="container">
            <div class="row">
                <nav class="col-md-12 mb-3">
                    <ul class="nav nav-tabs">
                        <li class="nav-item"><a class="nav-link active" href="#">首頁</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">校園地圖</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">產學合作網站</a></li>
                    </ul>
                </nav>
            </div>
    
            <div class="row">
                <main class="col-md-9">
                    <article class="mb-4">
                        <h2>犀牛上顎與白堊化石有看頭</h2>
                        <div class="container-fluid mt-3">
                            <div class="row">
                                <div class="col-md-3 order-md-1 order-2 mb-3 mb-md-0">
                                    <div class="thumbnail-container" id="thumbnailContainer">
                                        
                                    </div>
                                </div>
                                <div class="col-md-9 order-md-2 order-1">
                                    <img id="mainImage" src="https://fakeimg.pl/800x600/cccccc/909090?text=Image+1" alt="主圖片">
                                </div>
                            </div>
                        </div>
    
                        <p>2024-06-29記者某某/台南報導 石膏化石展區「台灣古生物剪影區」特展二十九日收攤囉喔，由國立工業生產中心的「犀牛上顎頭骨標本」...[內容省略]</p>
                    </article>
    
                    <article class="mb-4">
                        <h2>跨越國界的音樂情緣-橋中管樂團與日本開智未來高校吹奏部攜手野球應援</h2>
                        <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Orchestra+Image" class="img-fluid mb-3" alt="管樂團圖片">
                        <p>光武國小體育館內發出悠揚音樂，只見指揮在台前揮灑，音樂優雅且意味深長...[內容省略]</p>
                    </article>
    
                    <article>
                        <h2>臺南慈中暑期醫院志工 看見病苦中綻放最美笑容</h2>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+1" class="img-fluid" alt="圖片1">
                            </div>
                            <div class="col-md-4 mb-3">
                                <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+2" class="img-fluid" alt="圖片2">
                            </div>
                            <div class="col-md-4 mb-3">
                                <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+3" class="img-fluid" alt="圖片3">
                            </div>
                        </div>
                        <p>炎炎夏日當中，正當大家都一窩蜂地報名各種才藝班、夏令營時...[內容省略]</p>
                    </article>
    
                    <nav aria-label="Page navigation" class="mt-4">
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">«</a></li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                            <li class="page-item"><a class="page-link" href="#">5</a></li>
                            <li class="page-item"><a class="page-link" href="#">»</a></li>
                        </ul>
                    </nav>
                </main>
    
                <aside class="col-md-3">
                    <div class="list-group mb-4">
                        <a href="#" class="list-group-item list-group-item-action">回上方神按鈕</a>
                        <a href="#" class="list-group-item list-group-item-action">快速登入</a>
                    </div>
                    <div class="card mb-4">
                        <div class="card-header">近期新聞</div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">2024-07-31 【南市新聞】酷暑高溫...</li>
                            <li class="list-group-item">2024-07-30 【臺南新聞】大臺南...</li>
                            <li class="list-group-item">2024-07-20 【活動訊息】府城歸...</li>
                        </ul>
                    </div>
                </aside>
            </div>
        </div>
    
        <footer class="bg-light mt-4 py-3">
            <div class="container text-center">
                <p>系統設計：網你設計，電話：(06) xxxxxxxx (服務時間)</p>
                <p>Copyright © 2011 臺南市政府教育局資訊中心 All Rights Reserved.</p>
            </div>
        </footer>
    
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="index.js"></script>
    </body>
    </html>
    ```
3. CSS樣式部份獨立成 `style.css` 檔（在`index.html` 中用` <link rel="stylesheet" href="style.css">` 載入，一般置於 `</head>` 之前）： 
    ```css
    /* 網頁部份 */
    .header {
        background-color: #e6f3ff;
        background-image: url('https://fakeimg.pl/2000x200/e6f3ff/909090?text=Header+Background');
        background-size: cover;
        padding: 20px 0;
    }
    
    /* 滑動圖部份 */
    .thumbnail-container {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }
    .thumbnail-container::-webkit-scrollbar {
        width: 6px;
    }
    .thumbnail-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .thumbnail-container::-webkit-scrollbar-thumb {
        background: #888;
    }
    .thumbnail-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .thumbnail {
        opacity: 0.5;
        transition: opacity 0.3s;
        cursor: pointer;
    }
    .thumbnail:hover {
        opacity: 0.8;
    }
    .thumbnail.active {
        opacity: 1;
        border: 2px solid blue;
    }
    #mainImage {
        width: 100%;
        height: auto;
    }
    ```
4. javaScript部份獨立成 `index.js` 檔（在`index.html` 中用` <script src="index.js"></script>` 載入，一般置於 `</body>` 之前）： 
    ```javascript
    const images = [
        { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+1', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+1' },
        { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+2', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+2' },
        { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+3', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+3' },
        { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+4', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+4' },
        { thumb: 'https://fakeimg.pl/100x75/cccccc/909090?text=Image+5', full: 'https://fakeimg.pl/800x600/cccccc/909090?text=Image+5' }
    ];
    
    let currentIndex = 0;
    let intervalId;
    const mainImage = document.getElementById('mainImage');
    const thumbnailContainer = document.getElementById('thumbnailContainer');
    
    function createThumbnails() {
        images.forEach((img, index) => {
            const thumbnail = document.createElement('img');
            thumbnail.src = img.thumb;
            thumbnail.alt = `縮圖 ${index + 1}`;
            thumbnail.className = `thumbnail img-fluid mb-2 ${index === 0 ? 'active' : ''}`;
            thumbnail.onclick = () => showImage(index);
            thumbnailContainer.appendChild(thumbnail);
        });
    }
    
    function showImage(index) {
        currentIndex = index;
        mainImage.src = images[index].full;
        updateThumbnails();
        scrollThumbnail();
    }
    
    function updateThumbnails() {
        const thumbnails = thumbnailContainer.getElementsByClassName('thumbnail');
        Array.from(thumbnails).forEach((thumb, index) => {
            thumb.classList.toggle('active', index === currentIndex);
        });
    }
    
    function scrollThumbnail() {
        const activeThumbnail = thumbnailContainer.getElementsByClassName('active')[0];
        if (activeThumbnail) {
            if (window.innerWidth >= 768) {
                thumbnailContainer.scrollTop = activeThumbnail.offsetTop - thumbnailContainer.offsetTop;
            } else {
                thumbnailContainer.scrollLeft = activeThumbnail.offsetLeft - thumbnailContainer.offsetLeft;
            }
        }
    }
    
    function startCarousel() {
        stopCarousel();
        intervalId = setInterval(() => {
            currentIndex = (currentIndex + 1) % images.length;
            showImage(currentIndex);
        }, 3000);
    }
    
    function stopCarousel() {
        if (intervalId) {
            clearInterval(intervalId);
        }
    }
    
    function adjustLayout() {
        const isMobile = window.innerWidth < 768;
        thumbnailContainer.style.height = isMobile ? 'auto' : `${mainImage.offsetHeight}px`;
        thumbnailContainer.style.overflowX = isMobile ? 'auto' : 'hidden';
        thumbnailContainer.style.overflowY = isMobile ? 'hidden' : 'auto';
        thumbnailContainer.style.whiteSpace = isMobile ? 'nowrap' : 'normal';
        Array.from(thumbnailContainer.getElementsByClassName('thumbnail')).forEach(thumb => {
            thumb.style.display = isMobile ? 'inline-block' : 'block';
            thumb.style.width = isMobile ? 'auto' : '100%';
            thumb.style.height = isMobile ? '75px' : 'auto';
            thumb.style.marginRight = isMobile ? '10px' : '0';
        });
        scrollThumbnail();
    }
    
    createThumbnails();
    showImage(0);
    startCarousel();
    
    mainImage.addEventListener('load', adjustLayout);
    window.addEventListener('resize', adjustLayout);
    
    thumbnailContainer.addEventListener('mouseenter', stopCarousel);
    thumbnailContainer.addEventListener('mouseleave', startCarousel);
    mainImage.addEventListener('mouseenter', stopCarousel);
    mainImage.addEventListener('mouseleave', startCarousel);
    ```
5. 至此，首頁的顯示頁面架構大致完成。
 
</body></html>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1993

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器