Web前端开发技术实验与实践 HTML、CSS、JavaScript

上篇 实验（课内练习） 5

第一部分 HTML基础 5

实验一 Web前端开发环境配置与HTML基础 5

项目1 Web前端开发环境配置 5

项目2多种URL访问方式 9

项目3使用NotePad编写网页 11

项目4用EditPlus自定义HTML模板 14

项目5 body标记属性使用 19

项目6 HTML、CSS、JavaScript三合一综合练习 20

程序代码清单 21

实验二 格式化文本——文本、段落格式化与列表 23

项目1文字与段落格式化 23

项目2利用无序列表制作新闻列表 27

项目3利用有序列表制作《大型分析仪器管理办法》 28

项目4利用自定义列表制作章节目录 31

程序代码清单 32

实验三 格式化文本——超链接与多媒体应用 37

项目1网站导航的超链接设计 37

项目2利用书签链接制作帮助文档 39

项目3有背景音乐的电子相册制作 41

项目4制作多媒体文件网页 44

程序代码清单 46

第二部分 页面布局技术 55

实验四 CSS+DIV基础 55

项目1 CSS四种样式的引用 55

项目2 CSS+DIV页面布局设计 58

程序代码清单 61

实验五 CSS+DIV高级应用 67

项目1油画欣赏页面设计 67

项目2 CERNET华东北地区年会网站仿真构建 69

程序代码清单 73

实验六 表格 79

项目1制作成绩登记表 79

项目2制作产品宣传页面 82

项目3简化版“江苏教育电子政务网站” 85

程序代码清单 87

实验七 框架 95

项目1简易网站后台管理页面 95

项目2浮动框架制作“2011年全国教育技术理论与实践作品大赛网” 98

程序代码清单 103

实验八 表单 112

项目1留言板设计——“中国科学技术协会科技工作者建言” 112

项目2大学生暑期社会实践调查问卷 116

程序代码清单 118

第三部分 JavaScript基础 129

实验九 JavaScript基础 129

项目1改变网页字号大小 129

项目2计算圆的面积 133

项目3消息对话框使用 136

项目4系统内部函数使用 138

程序代码清单 140

实验十 JavaScript程序结构 146

项目1成绩百分制转换为五级制 146

项目2计算∑N！ 150

程序代码清单 154

实验十一 JavaScript事件分析 161

项目1表单数据验证 161

项目2鼠标事件处理程序 167

程序代码清单 169

实验十二 DOM与BOM 177

项目1福利彩票投注助手 177

项目2双向选择列表框 184

项目3 Web服务器配置与信息发布（EasyPHP） 186

程序代码清单 191

第四部分 Web前端开发工具 201

实验十三 EditPlus 201

项目1 EditPlus操作实验 201

项目2使用EditPlus软件编写HTML、CSS、JavaScript程序 203

项目3编写自定义HTML模板 206

实验十四 TextPad 209

项目1 TextPad操作实验 209

项目2用TextPad软件编写HTML、CSS、JavaScript程序 213

实验十五 TopStyle 215

项目1 TopStyle操作实验 215

项目2使用TopStyle编写HTML、CSS、JavaScript程序 218

实验十六 CSS3 Menu 226

项目1 CSS3 Menu操作实验 226

项目2编写嵌入CSS3 Menu菜单的Web应用程序 227

实验十七 Sothink Tree Menu 232

项目1 Sothink Tree Menu操作实验 232

项目2使用Sothink Tree Menu编写Web网页菜单 235

实验十八 ColorImpact 241

项目1 ColorImpact操作实验 241

项目2网页配色 243

下篇 实践（课程设计） 257

第五部分 网站设计 257

“Web前端开发技术”课程设计 257

课题1 “Web前端开发技术”实践教学网站 258

课题2 2011 CERNET华东北地区年会网站 278

课题3推荐及自选网站 297

参考文献 300