ホームページ > 記事 > ウェブフロントエンド > さまざまな HTML 初心者のための実践的なメール Page Layout_html/css_WEB-ITnose
さまざまな HTML 初心者のための実践的なメール Page Layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:251065ブラウズ
Webページを作りたいのですが、まず何をすればいいでしょうか？
もちろん、電子メール、ポータルなど、最初にどのような種類の Web ページを作成するかを決める必要があります。
考えてみたら？
まずレイアウトをレイアウトしましょう。まずログインページが必要です。
ログインページはどこにありますか?
アーティストが提供した画像をダウンロードするか、自分で検索エンジンを使用し、画像を右クリックして [プロパティ] をクリックし、オンライン画像リンクを選択します
ログイン ページの画像を使用して、最初に書き込む .html ファイルをさらにいくつか作成します
最初にやってみましょう ログインページ、この図を見てください。ページを分割してレイアウトするには何を使用すればよいですか?
学習したテーブルを使用して、大まかに配置し、画像の幅と高さを決定し、画像によって提供されるパラメーターに従って画像の幅と高さをテーブルに提供します
2 行目のテーブル フレームの位置が理想的ではないため、faststone キャプチャ ソフトウェアを使用してピクセル比を測定する必要があります。
rreee 成功後の写真にあるように、私がメモに書いたことを覚えていますか?
もう一度Webページのフレームを作ってみましょう
<html> <body> <!--看注释时请结合图片一起看--> <form action="emailhomepage.html" method=*> <!--form action指定的跳转页面为emailhomepage.html，跳转到我写的邮箱首页--> <center> <!--居中--> <table> <!--table为制表符，<tr>为列，<td>为行--> <tr><td> </td></tr> <!--表格居中并下压，若不写 (空格)表格容易出现错乱，因为它认为你什么都不写就不该占这位置--> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table border="1px" width="535" bordercolor="yellow" height="300" background="biggd.jpg"> <!--border="1px"为边框指定1个像素方便查看，535为登录图片的宽度，300为高度，表格为此参数是为了 锁定图片写入范围，方便规划。布局完美后可以将边框指定0像素border="0px"，边框颜色bordercolor="yellow"去掉--> <tr> <td width="230px"rowspan="2"> </td> <!--宽度为230px是第一行与第二行之间的边框横向宽度 rowspan="2"跨两行--> <td colspan="2"> <table border="1px" bordercolor="red"width="100%"height="100%"> <!--100%是为了填充第二行整个嵌入表格--> <tr><td> </td></tr><tr><td>用户名:</td><td><input type="text" name="username"/></td></tr> <tr><td>密 码:</td><td><input type="password" name="password"/></td></tr> <!--<input type="*">可以指定功能按钮和输入框, <input type="*">中""不可随便乱填--> <th><input type="submit" value="进入邮箱" /></th><th><input type="reset" value="重新填写"></th> </tr> <tr> <td><a href="#">找回密码</a></th><td><a href="#">注册用户</a></th> </tr> </table> </td> </tr> <tr> </table> </center> </body></html>
フレームを作成するために使用したHTMLファイルを別のパスにコピーし、誰でも閲覧できるようにデフォルトの枠線に従って表示しました
でページを指定しますA 枠内のコンテンツ (コメントの内容です) 水平フレーム ページを top.html として指定し、ドライブ文字の相対パスにいくつかの写真を入れます
赤い矢印は、入れた写真を指します
top.html へのコンテンツの書き込みを開始します
<html> <frameset rows="20%,*" border="0" noresize/> <!--上面的横向页面比例20%，下面的框架页面80% noresize不能拖动边框--> <frame src="top.html"> <!--指定横向框架页面为top.html--> <frameset cols="20%,*" /> <!--为下面框架页面80%设置20%的左纵向页面，右纵向页面也就为80%了--> <frame src="left.html"name="l1"> <!--指定左纵向页面为left.html，并为左纵向框架命名为"l1"(命名方便我们指定框架 ，比如叫张三，你喂喂喂，谁也不知你叫谁)--> <frame src="right.html"name="r1"> <!--这行标签代码，你想想看--> </frameset> <!--结尾就不用说了--> </frameset> <!--差点忘了说，框架是不能写body体的--></html>
次に、右側の境界線に移動してコンテンツを書き込みます。right.html を指定したことを思い出してください。
<body> <center><img src="logo.gif"/><img src="760-60.gif"/></center></body>
次に、左側に移動します。 border left.html にコンテンツを書き込みます
<html> <body> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <font color="red"><center>你成功登录了清辉在线邮箱系统</center></font> </body></html>
書かれたログイン ページに入り始めます 見て、クリックしてメールボックスに入り、次の画像を確認してください
ハイパーリンクの新しいメール ページの newemail.html
<html> <body bgcolor="#FEC100"> <!--"#FEC100"为颜色的十六进制--> <center> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table width="200"border="1" bgcolor="#FBE5C2"> <!--border="1"现在为测试用的，当母体框架为0时，子框架还是不会显示，而表格是越近越优先--> <tr><td> </td></tr> <tr><td><a href="newemail.html" target="r1"><center>新邮件</center></a></td></tr> < !--<a href="newmail.html" target="r1">为超链接指定页面为newmail.html， target="r1"还记得我在上面写了为框架命名吗？页面指定跳转到右框架--> <tr><td><a href="newinbox.html" target="r1"><center>收件箱</center></a></td></tr> <tr><td><a href="#" target="r1"><center>草稿箱</center></a></td></tr> <tr><td><a href="writemail.html" target="r1"><center>写邮件</center></a></td></tr> <tr><td><a href="address.html" target="r1"><center>地址本</center></a></td></tr> <tr><td> </td></tr> <tr><td><a href="emaillogin.html" target="_blank"><center>安全退出</center></a></td></tr> <!--target="_blank"打开新窗口--> <tr><td> </td></tr> </table> </center> </body></html>
受信トレイで指定された newinbox に移動します。メール
<html> <body> <h3>hello,Sily</h3> </body></html>
図のように
その後、アドレス帳に指定されているaddress.htmlに移動して書き込みます
<html> <body> <h2>未读邮件</h2> <hr width="70%"align=left noshade> <!--线占70%宽度，水平居左并且没有阴影> <table border="1" bordercolor="#FEC100" width="640px;"> <tr bgcolor="#FEC100" border="0"> <td> </td> <!--还记得我在定义登录图片的注释吗？--> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>编号</th> <th>标记</th> <th>发件人</th> <th><center>标   题</center></th> <th>日   期</th> </tr> <tr> <td>1、</td> <td>未读</td> <td>admin@hui.com</td> <td>欢迎注册清辉在线邮箱</td> <td>2005-02-01</td> </tr> <tr> <td>2、</td> <td>未读</td> <td>lisdy@so.com</td> <td>测试!!!</td> <td>2005-04-09</td> </tr> <tr> <td>3、</td> <td>未读</td> <td>lis@so.com</td> <td>测试!!!</td> <td>2005-04-09</td> </tr> <tr> <td>4、</td> <td>未读</td> <td>ls@s.com</td> <td>测试!!!</td> <td>2003-04-04</td> </tr> <tr> <td>5、</td> <td>未读</td> <td>lsday@co.com</td> <td>测试!!!</td> <td>2006-04-09</td> </tr> </table> <hr width="70%"align=left noshade> <table border="0" bgcolor="#F8E494"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td rowspan="6"> 共有邮件5封 每页20封 共一页 第1页 <a href="#">上一页</a> <a href="#">下一页</a> </td> </tr> </table> </body></html>
図のように
指定されたページにコンテンツを書き込みました最初に安全に脱出するために、覚えていないですか？ログインページを覚えていますか? [安全な終了] をクリックして新しいウィンドウを開き、ログイン ページを表示します
実際、このケースはハン先生のビデオから来ており、この例を約 5 時間書き真似してみました。結局のところ、私は基本的な基盤を持っています。実際、これを行うには、1. テーブル フレームのテキスト フィールド ボタンなど、2. iframe を使用する方法が複数あります。または、自分でそれを完成させるには、iframe ネストを使用します。これは、チェーンされた 3 つのイメージ マッピング マップを盗むことに相当します。