哪些网站可以做go注释,怎么做挣钱的网站,html网站设计模板下载,专建网站Web应用开发
实训一 网页开发
一、预习#xff1a;
1、阅读#xff1a;教材P1-P39 2、要掌握知识要点#xff1a;表单标记、超链接标记、CSS的引用方式、CSS选择器、DOM、JavaScript的引入#xff08;内嵌式、外链式#xff09;、JavaScript的使用#xff08;事件处理…Web应用开发
实训一 网页开发
一、预习
1、阅读教材P1-P39 2、要掌握知识要点表单标记、超链接标记、CSS的引用方式、CSS选择器、DOM、JavaScript的引入内嵌式、外链式、JavaScript的使用事件处理、常用对象。
二、验证用谷歌浏览器或IE浏览器打开页面文件源代码见chapter1.rar
1、文件1-1htmlDemo01.html见p2效果如图1-1所示。 2、文件1-3htmlDemo03.html见p5效果如图1-4所示。 3、文件1-5htmlDemo05.html见p6效果如图1-6所示。 4、文件1-6htmlDemo06.html见p8效果如图1-8所示。 5、文件1-7htmlDemo07.html见p10效果如图1-10所示。 6、文件1-8htmlDemo08.html见p11效果如图1-11所示。 7、文件1-9htmlDemo09.html见p12效果如图1-12所示。 8、文件1-10cssDemo01.html见p14效果如图1-15所示。 9、文件1-11cssDemo03.html见p17效果如图1-17所示。 10、文件1-12jsDemo01.html见p21效果如图1-19所示。 11、文件1-13jsDemo02.html见p22效果如图1-20所示。 12、文件1-14jsDemo03.html见p26效果如图1-21所示。
三、实训
1、完成传智书城首页设计,编写文件1-15(index.html,p29所需其他文件见源代码chapter1.rar )效果如图1-23所示。
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
title首页/title
link relstylesheet hrefcss/main.css typetext/css /
!-- 导入首页轮播图css和js脚本 --
link typetext/css hrefcss/autoplay.css relstylesheet /
script typetext/javascript srcjs/autoplay.js/script/head
body classmain!-- 1.网上书城顶部 start --
div iddivheadtable cellspacing0 classheadtabletrtda href#img srcimages/logo.png width200 height60 border0 / /a/tdtd styletext-align:rightimg srcimages/cart.gif width26 height23 stylemargin-bottom:-4px /nbsp;a href#购物车/a | a href#帮助中心/a | a href#我的帐户/a| a hrefregister.html新用户注册/a /td /tr/table
/div!-- 网上书城顶部 end --!--2. 网上书城菜单列表 start --
div iddivmenua href#文学/a a href#生活/a a href#计算机/a a href#外语/a a href#经管/aa href#励志/a a href#社科/a a href#学术/a a href#少儿/aa href#艺术/a a href#原版/a a href#科技/a a href#考试/a a href#生活百科/a a href# stylecolor:#FFFF00全部商品目录/a
/div
div iddivsearch
form action# idsearchformtable width100% border0 cellspacing0trtd styletext-align:right; padding-right:220pxSearch input typetext nametextfield classinputtable idtextfield value请输入书名onmouseoverthis.focus();onclickmy_click(this, textfield);onBlurmy_blur(this, textfield);/ a href#img srcimages/serchbutton.gif border0 stylemargin-bottom:-4px onclicksearch()/ /a/td/tr/table
/form
/div
!-- 网上书城菜单列表 end --!-- 3.网上书城首页轮播图 start --div idbox_autoplaydiv classlistulliimg srcad/index_ad1.jpg width900 height335//liliimg srcad/index_ad2.jpg width900 height335//liliimg srcad/index_ad3.jpg width900 height335//liliimg srcad/index_ad4.jpg width900 height335//liliimg srcad/index_ad5.jpg width900 height335//li/ul/div!-- 网上书城首页轮播图 end --!--4. 公告板和本周热卖 start --div iddivcontenttable width900px border0 cellspacing0 trtd width497img srcimages/billboard.gif width497 height38/table cellspacing0 classctltrtd width485 headers29尊敬的传智书城用户br/为了让大家有更好的购物体验3月25号起当日达业务关小黑屋回炉升级br/具体开放时间留意公告感谢大家的支持与理解祝大家购物愉快br/3月23日br/传智博客 传智书城系统管理部br//td /tr/table/tdtd stylepadding: 5px 15px 10px 40pxtable width100% border0 cellspacing0trtdimg srcimages/hottitle.gif width126 height29/td/tr/tabletable width100% border0 cellspacing0trtd stylewidth: 80; text-align:centera href#img srcbookcover/105.jpg width102 height130 border0/abr//tdtd stylewidth: 80; text-align:centera href#img srcbookcover/106.jpg width102 height130 border0/abr//td/tr/table/td/tr/table/div
!-- 公告板和本周热卖 end -- !--5. 网上书城底部 start --
div iddivfoottable width100% border0 cellspacing0trtd rowspan2 stylewidth: 10%img srcimages/logo.png width195 height50 stylemargin-left: 175px/tdtd stylepadding-top: 5px; padding-left: 50pxa href#font color#747556bCONTACT US/b/font/a/td/trtrtd stylepadding-left: 50pxfont color#CCCCCCbCOPYRIGHT 2015 copy; BookStore All Right RESERVED./b/font/td/tr/table
/div!-- 网上书城底部 end --
/body
/html2、完成传智书城注删页面设计,编写文件1-17(register.html,p34所需其他文件见源代码chapter1.rar)效果如图1-25所示。
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
title用户注册/title
link relstylesheet hrefcss/main.css typetext/css /
script typetext/javascript srcjs/form.js/script
/head
body classmain!-- 1.网上书城顶部 start --
div iddivheadtable cellspacing0 classheadtabletrtda hrefindex.htmlimg srcimages/logo.png width200 height60 border0 / /a/tdtd styletext-align:rightimg srcimages/cart.gif width26 height23 stylemargin-bottom:-4px /nbsp;a href#购物车/a | a href#帮助中心/a | a href#我的帐户/a| a hrefregister.html新用户注册/a /td /tr/table
/div!-- 网上书城顶部 end --!--2. 网上书城菜单列表 start --
div iddivmenua href#文学/a a href#生活/a a href#计算机/a a href#外语/a a href#经管/aa href#励志/a a href#社科/a a href#学术/a a href#少儿/aa href#艺术/a a href#原版/a a href#科技/a a href#考试/a a href#生活百科/a a href# stylecolor:#FFFF00全部商品目录/a
/div
div iddivsearch
form action# idsearchformtable width100% border0 cellspacing0trtd styletext-align:right; padding-right:220pxSearch input typetext nametextfield classinputtable idtextfield value请输入书名onmouseoverthis.focus();onclickmy_click(this, textfield);onBlurmy_blur(this, textfield);/ a href#img srcimages/serchbutton.gif border0 stylemargin-bottom:-4px onclicksearch()/ /a/td/tr/table
/form
/div
!-- 网上书城菜单列表 end --
!-- 3.网上书城用户注册 start --div iddivcontent aligncenterform actionregistersuccess.html methodpost onsubmitreturn checkForm();table width850px border0 cellspacing0trtd stylepadding: 30pxh1新会员注册/h1table width70% border0 cellspacing2 classuplinetrtd styletext-align: right; width: 20%会员邮箱/tdtd stylewidth: 40%input typetext classtextinput idemailnameemail onkeyupcheckEmail();/tdtd colspan2span idemailMsg/spanfont color#999999请输入有效的邮箱地址/font/td/trtrtd styletext-align: right会员名/tdtdinput typetext classtextinput idusernamenameusername onkeyupcheckUsername();/tdtd colspan2span idusernameMsg/spanfont color#999999字母数字下划线1到10位不能是数字开头/font/td/trtrtd styletext-align: right密码/tdtdinput typepassword classtextinput idpasswordnamepassword onkeyupcheckPassword();/tdtdspan idpasswordMsg/spanfont color#999999密码请设置6-16位字符/font/td/trtrtd styletext-align: right重复密码/tdtdinput typepassword classtextinput idrepasswordnamerepassword onkeyupcheckConfirm();/tdtdspan idconfirmMsgnbsp;/span/td/trtrtd styletext-align: right性别/tdtd colspan2nbsp;nbsp;input typeradio namegender value男 checkedchecked/男nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;input typeradio namegender value女 /女/tdtdnbsp;/td/trtrtd styletext-align: right联系电话/tdtd colspan2input typetext classtextinput stylewidth: 350px nametelephone//tdtdnbsp;/td/trtrtd styletext-align: right个人介绍/tdtd colspan2textarea classtextarea nameintroduce/textarea /tdtdnbsp;/td/tr/tabletable width70% border0 cellspacing0trtd stylepadding-top: 20px; text-align: centerinput typeimage srcimages/signup.gif namesubmit border0//td/tr/table/td/tr/table/form/div!-- 网上书城用户注册 end --!--4. 网上书城下方显示 start --
div iddivfoottable width100% border0 cellspacing0trtd rowspan2 stylewidth: 10%img srcimages/logo.png width195 height50 stylemargin-left: 175px/tdtd stylepadding-top: 5px; padding-left: 50pxa href#font color#747556bCONTACT US/b/font/a/td/trtrtd stylepadding-left: 50pxfont color#CCCCCCbCOPYRIGHT 2015 copy; BookStore All Right RESERVED./b/font/td/tr/table/div!--4. 网上书城下方显示 start --
/body
/html四、提交编写的源代码
打包成压缩文件学号姓名实训1.rar
