iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
自我挑戰組

asp.net可以變出那些功能系列 第 11

日式網站一頁式網站

  • 分享至 

  • xImage
  •  

其實我覺得工程師要靠配色去創造不同的風格,還有美學真的是有難度
而且像是日式網站一頁式網站風格的內容範例,
要工程師去想真的是要有想像力啊~

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡都只有Controllers裡面的Entities>產生畫面View

或許後面不夠寫會再回頭創造出資料表的連結也是有可能的,可以期待~

日式網站一頁式網站

https://laihao2.com/Home/Contact5
https://ithelp.ithome.com.tw/upload/images/20240918/20119035hAAfNSpYwr.png
只有Controllers裡面的Entities>產生畫面View

Controllers裡面的Entities

public ActionResult Contact5()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是 ASP.NET MVC 控制器中的一個 Action 方法,名為 Contact5,用於處理用戶訪問某個頁面的請求。具體解釋如下:

1. public ActionResult Contact5()

  • 這是一個 Action 方法,名為 Contact5,修飾符 public 表示它可以被外部訪問。它屬於控制器類,用於響應與 "Contact5" 頁面相關的請求。

2. ViewBag.Message = "Your contact page.";

  • ViewBag 是一個動態對象,允許你在控制器與視圖之間傳遞數據。這里將字符串 "Your contact page." 賦值給 ViewBag.Message
  • 在視圖中,通常通過 @ViewBag.Message 來顯示這個信息。這個文本可能會在對應的視圖頁面上顯示,通常用於提示用戶當前訪問的是哪個頁面,或者提供一些簡要信息。

3. return View();

  • View() 方法表示返回一個視圖。ASP.NET MVC 框架會根據方法名 Contact5 自動查找並渲染與之對應的視圖文件(通常位於 Views/控制器名/Contact5.cshtml)。
  • 返回的視圖可以包含 HTML 和 Razor 代碼,用於生成用戶可以看到的網頁。

總結

這個 Contact5 方法的主要作用是處理用戶請求 "Contact5" 頁面,設置一個簡單的消息 ViewBag.Message,並將其傳遞給視圖進行渲染。在視圖中,用戶可以看到這段消息,可能作為頁面的一部分顯示給用戶。
產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

@{ ViewBag.Title = "Contact5"; }

<div class="farm-wrapper">

    <h3>作品-兩欄式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }

            <title>BLOG</title>
            <style>
                img {
                    border-radius: 50%;
                }

                body {
                    background-color: pink;
                }

                dl {
                    margin-left: 20px;
                }

                dd {
                    margin-left: 20px;
                }
            </style>
        </head>
        <body>
            <header>
                <h1><img src="~/templates/carrots.png" alt="FARM CAPYZOU" style="width:200px; height:auto;" /></h1>
                <nav>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">BLOG</a></li>
                        <li><a href="#">VIDEO</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
            </header>
            <div>
                <main>
                    <article>
                        <h2>和服的四大注意事項</h2>
                        <p class="postdate">
                            <time datetime="2021-08-08T12:03">
                                着物/きもの
                            </time>
                        </p>
                        <p class="eyecatch">
            <img src="~/templates/eyecatch.png" alt="帶子">
        </p>
        <section>
            <h3>穿著順序</h3>
            <p>
                穿和服有嚴格的順序,<br>
                從內衣、襦袢(長襦袢)到外衣,再到帶子和配件,<br>
                需要按照正確的順序穿戴。<br>
            </p>
            <figure>
                <img src="~/templates/carrots.png" alt="配件">
                <figcaption>配件</figcaption>
            </figure>
                        </section>
                        <section>
                            <h3>左右襟的順序</h3>
                            <p>穿和服時一定要注意左襟壓右襟,這是生者穿和服的正確方式。右襟壓左襟是給死者穿的,<br>因此在日常生活中千萬不要搞錯。</p>
                        </section>
                        <section>
                            <h3>穿著姿勢</h3>
                            <p>穿和服時要保持優雅的姿勢,尤其是在坐下或站起來的時候。要避免大幅度的動作,<br>因為和服比較束縛,動作幅度過大會影響和服的整齊。</p>
                        </section>
                        <section>
                            <h3>腰帶(帶子)的繫法</h3>
                            <p>和服的腰帶有多種繫法,常見的有太鼓結和文庫結等。不同的場合需要不同的繫法,需根據具體情況選擇。</p>
                        </section>
                    </article>
                </main>
                <aside>
                    <nav class="categoryNav">
                        <h2>Category</h2>
                        <ul>
                            <li><a href="#">日文的學習生活(0)</a></li>
                            <li><a href="#">和服的必備知識(6)</a></li>
                            
                        </ul>
                    </nav>
                    <nav class="recentNav">
                        <h2>Recent Articles</h2>
                        <ul>
                            <li><a href="#">和服的四大注意事項</a></li>
                            <li><a href="#">和服的種類與用途</a></li>
                            <li><a href="#">和服配飾詳解</a></li>
                            <li><a href="#">和服的季節性穿著指南</a></li>
                            <li><a href="#">和服在現代日本社會中的新潮流</a></li>
                            <li><a href="#">穿和服時需要注意的禮儀細節</a></li>
                        </ul>
                    </nav>
                    <p>
                        <a href="#"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
                    </p>
                </aside>
            </div>
            @*<footer>
        <p><small>© 3021 FARM CAPYZOU</small></p>
            </footer>*@
        </body>
        </html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 中的視圖文件,用 Razor 語法編寫。它渲染一個兩欄式的網頁,包含和服主題的內容。以下是對代碼的詳細解釋:

1. @{ Layout = "~/Views/Shared/_Layout.cshtml"; }

  • 這行代碼指定了該視圖使用的布局文件 _Layout.cshtml,位於共享的 Views/Shared 目錄中。這個布局文件通常包含頁面的整體結構,比如頭部、腳部等公共部分。

2. @{ ViewBag.Title = "Contact5"; }

  • 這行代碼設置頁面的標題 ViewBag.Title 為 "Contact5"。標題通常會被布局文件中的 <title> 標簽使用,顯示在瀏覽器的標簽頁上。

3. <div class="farm-wrapper">

  • 包裹整個內容的 div,提供了一個高層次的容器。farm-wrapper 是一個類,可以用於 CSS 樣式。

4. <head> 內的部分

  • 包含了頁面的 <meta> 標簽,用於設置字符編碼為 UTF-8,以及引入外部 CSS 樣式文件。
    • css/style.css 是主樣式表。
    • @Url.Content("~/Content/css/reset.css") 使用 Razor 的 Url.Content 方法將相對路徑轉換為應用程序的絕對路徑,用來引入重置樣式表。
    • 使用 @section styles 來引入額外的樣式表 farm-style.css,這種方式允許子視圖重寫樣式部分。

5. 內聯樣式 (<style>)

  • 定義了一些頁面的樣式:
    • img { border-radius: 50%; }:所有圖片將具有圓角效果。
    • body { background-color: pink; }:頁面背景顏色設為粉紅色。
    • dldd:為定義列表的縮進設置樣式。

6. <header> 和導航欄

  • 頁面頭部包含了一個 <h1> 標簽,顯示一個標題圖片 carrots.png
  • 導航欄包含了 5 個鏈接:HOME, ABOUT, BLOG, VIDEO 和 CONTACT,構成了網站的主要導航結構。

7. <main> 和文章部分

  • <main> 包含主要內容區域,采用文章格式展示和服的四大注意事項。
    • 每個部分有標題(<h3> 標簽)和對應的描述(<p> 標簽)。
    • 文章使用了 <figure><figcaption> 來展示圖片及其說明,增強了頁面的視覺展示。

8. <aside> 和側邊欄

  • <aside> 部分用來放置側邊欄內容:
    • CategoryRecent Articles 兩個導航部分,展示了和服相關的分類和最近的文章。
    • 側邊欄還包含了一張圖片,用來展示額外的信息或個人照片。

9. 腳注部分

  • 使用注釋 (@* *@) 將頁面底部的 <footer> 部分暫時隱藏。里面包含版權信息,表示頁面的所有權。

10. 總結

這個頁面展示了一個兩欄式布局,左邊是主要內容,右邊是側邊欄。內容圍繞著和服文化展開,包含了詳細的注意事項和相關文章。該視圖引入了多個外部和內聯的 CSS 樣式,確保頁面的視覺效果。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
自然風網站/復古風網站
下一篇
日式網站首頁跟實用日語
系列文
asp.net可以變出那些功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言