实验一 WEB 前端设计与制作
一、实验目的
1、 掌握页面设计的基本技巧，了解网站的基本建立过程，掌握使用 Dreamweaver 制作 网页的基本技术；
2、 学习和使用 HTML 语言， 使用 CSS 控制页面样式， 使用 JavaScript 脚本语言增强页 面的互动性。
二、实验内容
1、选择一个自己感兴趣的主题，明确站点风格和功能。
2、围绕这一主题设计站点页面，包括页面的布局、页面的彩搭配，页面的交互方式 等。
3、使用工具软件来完成设计页面的制作，运用到 HTML，CSS 和 JavaScript。
三、实验要求
1、 了解站点风格的概念；
2、 理解主页、栏目页、导航条、目录框架等术语；
3、 熟悉 HTML 的常用标记使用以及框架网页的制作；
4、 掌握使用 Frontpage 或者 Dreamweaver 制作网页的基本技术；
5、 实验前应该先选定所要创建网站的主题（如：个人网站、自我推荐网站、班级网站、 某种专题网站等）和风格；
6、 围绕主题和风格，设计站点的主页、栏目及其内容，并且设计出主页和栏目页面的 布局；
7、 准备好网页制作时所需的资料以及图片等素材。
四、实验环境
硬件环境：PC 微机
软件环境：文本编辑器（UltraEdit、EditPlus、Notepad 等）或者 Frontpage 或者 Dreamweaver、IE 和 FireFox 浏览器（至少使用两种不同内核的浏览器）
五、 实验代码
RequestForm.html
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=">
<body>
<form action="RequestDemo.jsp" method="post" onSubmit="return Validator.Validate('infoForm',3);">
<h1 ="center">注册用户</h1> <table ="center"> <tr> <td>用户名</td> <td><input type="text"name="username" ="Require" <script type="text/javascript" src="Validator/Validator.js"></script> <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> </head> ="用户名是空的！"/></td> </tr> <tr> <td>密码</td> <td><input
type="password"name="password"="SafeString" ="用户密码不安全！"id="userKey"/></td>
</tr> <tr> <td>确认密码</td> <td><input type="password"name="repassword"value="" ="Repeat" ="userKey" ="密码不一样！"/></td> </tr> <tr>
<td>出生日期</td> <td><input type="text" name="Date" value=""
onClick="WdatePicker();" ="Date" ="false" ="Wrong Date Format" readonly="readonly" />
</tr> <tr> <td>性别</td> <td> <input type="radio"name="sex"value="男"/>男 <input type="radio"name="sex"value="女"/>女 </td> </tr> <tr> <td>年级</td> <td> <select name="Degree" id="Degree"> <option value="">无</option> <option value="大一">大一</option> <option value="大二">大二</option> <option value="大三">大三</option> <option value="大四">大四</option> </select></td> </tr> <tr> <td>爱好</td> <td> </tr> <tr> <td>上传头像</td> <td><input type="file" name="Photo" id="Photo" /> </td> </tr> <tr> <td>其他</td> </td> <input type="checkbox" name="Hobby" value="音乐"/>音乐 <input type="checkbox" name="Hobby" value="运动"/>运动 <input type="checkbox" name="Hobby" value="旅游"/>旅游 <input type="checkbox" name="Hobby" value="阅读"/>阅读
<td><textarea name="other" rows="10" cols="50">输入信息</tr> <tr> <td><input type="submit"value="注册"/></td> <td><input type="reset"value="重置"/></td> </textarea></td> </tr> </table> </form> </body> </html>
Styles.css
@CHARSET "UTF-8";
#header{ text-align:center; margin: 0 auto; width:1300px; height:100px; background:red; } #mlside{ width:300px; height:100px; background:black; float:left; } #mrside{ width:300px; height:100px; background:black; float:right; } #main{ margin: 0 auto; width:1300px; height:600px; background:gray; } #lside{ width:650px; height:600px;
background:purple; float:left; } #rside{ width:650px; height:600px; background:pink; float:right; }
Test.html
<!DOCTYPE html>html网页设计 table
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"
href="/mobile/1.3.bile-1.3.2.min.css"> <script src="/jquery-1.9.1.min.js"></script> <script
src="/mobile/1.3.bile-1.3.2.min.js"></script>
<title>Test.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<body>
<div id="header">
<div id="mlside">
<img id="image-1" alt="" src="imgs/002.gif" width="100" height="100"/></div>
<div id="mrside"> <img id="image-1" alt="" src="imgs/002.gif" width="100" height="100"/></div>
<h1>JAVA WEB程序设计实验</h1>
<> <link rel="stylesheet" type="text/css" href="./styles.css"> </head>
<a href="">登入</a></p1>
<>
<div id=main> <div id=lside></div> <div id=rside></div></div>
</body>
</html>
六、实验报告要求
1、 描述站点主题、风格、内容功能以及设计的创意和思想。
2、 提交站点的 CSS 文档和互动所用的 JavaScript 源码，HTML 源码省略。
3、 页面浏览效果的若干截图。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。