实验一WEB前端实验.docx

南昌大学实验报告实验类型：□ 验证 □ 综合 □ 设计□ 创新 实验日期：2014/10实验成绩：实验一 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!DOCTYPEhtmlhtmlheadtitle用户注册/titlemetaname=keywordscontent=keyword1,keyword2,keyword3metaname=descriptioncontent=this is my pagemetaname=content-typecontent=text/html; charset=gb2312!--link rel=stylesheet type=text/css href=./styles.css--scripttype=text/javascriptsrc=Validator/Validator.js/scriptscripttype=text/javascriptsrc=My97DatePicker/WdatePicker.js/script/headbodyformaction=RequestDemo.jspmethod=postonSubmit=return Validator.Validate(infoForm,3);h1align=center注册用户/h1bodybgcolor=yellowtablealign=centertrtd用户名/tdtdinputtype=textname=usernamedataType=Requiremsg=用户名是空的！//td/trtrtd密码/tdtdinputtype=passwordname=passworddataType=SafeStringmsg=用户密码不安全！id=userKey//td/trtrtd确认密码/tdtdinputtype=passwordname=repasswordvalue=dataType=Repeatto=userKeymsg=密码不一样！//td/trtrtd出生日期/tdtdinputtype=textname=Datevalue=onClick=WdatePicker();dataType=Daterequire=falsemsg=Wrong Date Formatreadonly=readonly//trtrtd性别/tdtdinputtype=radioname=sexvalue=男/男inputtype=radioname=sexvalue=女/女/td/trtrtd年级/tdtdselectname=Degreeid=Degreeoptionvalue=无/optionoptionvalue=大一大一/optionoptionvalue=大二大二/optionoptionvalue=大三大三/optionoptionvalue=大四大四/option/select/td/trtrtd爱好/tdtdinputtype=checkboxname=Hobbyvalue=音乐/音乐inputtype=checkboxname=Hobbyvalue=运动/运动inputtype=checkboxname=Hobbyvalue=旅游/旅游inputtype=checkboxname=Hobbyvalue=阅读/阅读/td/trtrtd上传头像/tdtdinputtype=filen