“千年之恋”注册页面制作

最新推荐文章于 2023-12-31 18:29:44 发布

稚皓君

最新推荐文章于 2023-12-31 18:29:44 发布

阅读量2.6k

点赞数 5

分类专栏：课程设计文章标签： dreamweaver html javascript

本文链接：https://blog.csdn.net/m0_46669450/article/details/128955822

版权

课程设计专栏收录该内容

10 篇文章 1 订阅

订阅专栏

“千年之恋”注册页面制作

一、实验名称：
二、实验日期：
三、实验目的：
四、实验内容：
五、实验步骤：
六、实验结果：
七、源程序：
八、心得体会：

一、实验名称：

“千年之恋”注册页面制作

二、实验日期：

2020年12月7日星期一

三、实验目的：

1、理解表格的创建
2、掌握表格样式的控制
3、掌握表单相关标记
4、熟悉表单样式的控制
5、能够创建具有相应功能的表单控件
6、学会通过控制表单样式美化表单界面

四、实验内容：

1、按照特定要求制作一个网页
2、使用Dreamweaver 、火狐浏览器制作
3、上交的文件，以“学号+姓名”的形式

五、实验步骤：

1、建立站点
（1）创建网站根目录
在计算机本地磁盘E盘中新建一个文件夹作为网站根目录，命名为“千年之恋”。
（2）在根目录下新建文件
在根目录下新建images和css文件夹，分别用于存放网站所需要的图像和CSS样式表文件。

在这里插入图片描述

（3）新建站点
打开Dreamweaver工具，新建站点，并命名为“千年之恋”，然后浏览并选择站点根目录的存储位置，并保存。

在这里插入图片描述

2、页面布局
将页面制作分为“头部”模块、“主体”模块、“页脚”模块。其中，主体模块又可以分为“banner”模块、“内容”模块两部分。

在这里插入图片描述

3、制作“头部”导航模块
“头部”模块中的内容部分分别由无序列表

搭建。

在这里插入图片描述

4、制作“banner”和“content”模块
“banner”模块及“content”模块分别由

标记定义，其中内容部分的“注册步骤”由

标题标记定义，其余内容嵌套在表单内，除标题外的主体结构由表格搭建，并且根据也页面需求嵌套部分表单元素。

在这里插入图片描述

5、制作“页脚”模块

“页脚”模块只需通过

标记嵌套

标记完成

在这里插入图片描述

六、实验结果：

在这里插入图片描述

七、源程序：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/1.css" type="text/css" rel="stylesheet" />
<title>千年之恋</title>
</head>
<div id="head"><img src="images/logo.jpg"/>
<div id="nav_bg">
<ul class="nav">
<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="#" class="bg">注册</a></li>
</ul></div></div>
<div id="banner"><img src="images/banner.jpg" /></div>
<div id="content"><h2 class="step">注册步骤：</h2>
<form action="#" method="post" class="one">
<h3>您的账号信息：</h3>
<table class="content"><tr>
<td class="left">注册方式：</td>
<td><label for="one"><input type="radio" name="sex" id="one" />E-mail注册</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label for="two"><input type="radio" name="sex" id="two" />手机号码注册</label></td></tr>
<tr><td class="left">注册邮箱：</td>
<td><input type="text" class="right" /></td></tr>
<tr><td class="left">注册手机：</td>
<td><input type="text" class="right" /></td></tr>
<tr><td class="left">登陆密码：</td>
<td><input type="password" maxlength="8" class="right" /></td></tr>
<tr><td class="left">昵称：</td>
<td><input type="text"  class="right" /></td></tr>  </table>
<h3>您的个人信息：</h3>
<table class="content">
<tr><td class="left">性别：</td>
<td><label for="boy"><input type="radio" name="sex" id="boy" />男
</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label for="girl"><input type="radio" name="sex" id="girl" />女</label></td></tr>
<tr><td class="left">学历：</td>
<td><select>
<option>-请选择-</option>
<option>中职/高中</option>
<option>专科/本科</option>
<option>硕士研究生</option>
<option>博士研究生</option>
</select> </td></tr>
<tr> <td class="left">所在城市：</td>
<td><select>
<option>-请选择-</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select> </td> </tr>
<tr><td class="left">兴趣爱好：</td>
<td><input type="checkbox" />足球&nbsp;&nbsp;&nbsp;
<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;
<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;
<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;
<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;
<input type="checkbox" />瑜伽
</td></tr>
<tr><td class="left">自我介绍：</td>
<td><textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea></td></tr>
<tr><td colspan="2"><input type="button"  class="btn" /></td></tr></table></form> </div>
<div id="footer">
<p>Copyright © 2006-2016 QIANNIANZHILIANcom, All rights reserved.<br />2001-2018，版权所有 千年之恋 85CP备13385453</p><body>
</body>
</html>

CSS

/* CSS Document */
*{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;}
body{font-family:"微软雅黑"; font-size:14px; }
a:link,a:visited{ text-decoration:none; color:#fff; font-size:16px;}
/* head */
#head{width:980px; 
height:70px;
margin:0 auto; 
padding-top:20px;}
#nav_bg{width:100%; 
height:48px; 
background:#fe668f;}
.nav{width:980px; 
margin:0 auto;}
.nav li{float: left;}
a{display:inline-block; 
height:48px; 
padding:0 50px; 
line-height:48px; }
.bg{background:#fe9ab5;}
a:hover{background:#fe9ab5;}
/* banner */
#banner{width:980px; 
margin:0 auto;}
/* content */
#content{width:830px; 
height:934px; 
background:url(../images/content_bg.jpg) no-repeat; 
margin:0 auto; 
padding-left:150px;}
.step{width:454px; 
height:80px; 
font-size:20px; 
font-weight:100; 
color:#dd8787; 
background:url(../images/step.jpg) center right no-repeat; 
line-height:80px;}
h3{width:444px; 
height:45px; 
font-size:20px; 
font-weight:100; 
color:#dd8787; 
line-height:45px; 
border-bottom:1px solid #dd8787;}
td{height:50px; 
color:#dd8787;}
.left{width:120px; 
text-align:right;}
.right{width:320px; 
height:28px; 
border:1px solid #dd8787;}
input{vertical-align:middle;}
select{width:171px; 
border:1px solid #dd8787; 
color:#dd8787;}
textarea{width:380px; 
border:1px solid #dd8787; 
resize:none; 
font-size:12px; 
color:#aaa; 
padding:20px;}
.btn{width:408px; 
height:76px; 
background:url(../images/btn.jpg) right center no-repeat;}
/* footer */
#footer{width:100%; 
height:68px;
line-height:26px;
background:#fe668f; 
color:#fff; 
text-align:center;
padding-top:40px; }

八、心得体会：

1、通过该项目的制作，更好的理解表格的创建方法，掌握表格样式的控制，掌握了表单相关标记，熟悉了表单样式的控制。
2、制作项目时，为了更好的创建，在编辑代码过程中，先进行整体把控页面的结构，每完成一部分通过火狐浏览器查看效果图，随时进行修改。
3、在编写时，由于form时块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。Input控件默认有边框效果，当使用标记定义各种按钮时，通常清除其边框。
4、了解到使用表单下拉的效果可通过、标记及相关属性创建。
5、了解到input控件的使用方法，通常网页中的单行文本输入框、单选按钮、复选框、提交按钮、重置按钮均可以通过input控件定义。
6、学会了通过CSS控制单元格的各种样式。
7、能够创建具有相应功能的表单控件，学会了通过控制表单样式美化表单界面。