《Web前端設計與開發》實驗一：HTML基本標籤實驗3

禿頭少女Sketch發表於2020-09-24
Web前端HTML

一、實驗內容

  1. 利用框架實現下面頁面，頁面效果如下圖（檔案命名遵照圖示）：
    在這裡插入圖片描述

二、實驗程式碼及成品

frame_sets.html

<!doctype html>
<html>

<frameset rows="12%,*">

    <frame src="top.html" noresize="noresize" name="topFrame"><!--noresize屬性表示無法調整大小的框架。name屬性為框架名稱，必須書寫。-->
    <frameset cols="20%,*">
        <frame src="left.html" noresize="noresize" name="leftFrame">
        <frame src="right1.html" noresize="noresize" name="rightFrame">
    </frameset>

</frameset>

</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>topFrame</title>
    </head>
    <body>
        <h1 align="center" style="font-family: 宋體">HTML開發商業網站</h1>
    </body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
    <head>
     <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a{
                color: darkviolet;
            }
        </style>

    </head>
    <body>
        <h1 style="font-family: 宋體">第2章&nbsp;HTML語言</h1>
        <a href="right1.html" target="rightFrame"><h2 style="font-family: 宋體">2.1HTML基礎知識</h2></a>
        <a href="right2.html" target="rightFrame"><h2 style="font-family: 宋體">2.2HTML語言入門</h2></a>
    </body>
</html>

right1.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1 style="color: red;font-family: 宋體" >&emsp;&emsp;HTML語言是網頁製作的基礎，是初學者必學的內容。</h1>
    </body>
</html>

right2.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
     <title>Title</title>
    </head>
    <body>
        <h1 style="color: blue;font-family: 宋體" >&emsp;&emsp;HTML語言是網頁製作的基礎，是初學者必學的內容。</h1>
    </body>
</html>

在這裡插入圖片描述

相關文章