电气与信息工程学院

 

《WEB技术与应用》

实验报告

老师：文志华

学生：王炜

班级：电子信息1202

学号：12401720207

 

实验时间：2015.03~2015.05

实验一 简单网页制作

实验目的：

1．熟悉Dreamweaver软件的操作界面。

2．掌握建立本地站点的方法。

3．掌握简单网页制作方法。

4．掌握超链接的建立方法。

实验内容：

1．创建“潜水俱乐部”站点。

2．制作“俱乐部首页”、“俱乐部简介”、“近期活动”、“精彩图片”、“在线预约”5个网页，并完成网页之间的超链接。

实验步骤：

1．创建“潜水俱乐部”站点

（1）在D盘新建文件夹，命名为myweb；

（2）将images文件夹和gallery文件夹复制到中myweb中；

（3）启动Dreamweaver，使用“站点｜新建站点”命令创建站点。

2．制作“俱乐部首页”。

（1）新建网页。

（2）使用“文件｜保存”命令保存网页，命名为index.html。

（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。

（4）从“文本.txt”中将首页的相关文字粘贴到网页中。

（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。

（6）插入图像。

（7）在Copyright后插入版权符号©。

（8）在电话号码之间插入半角空格。

（9）在电子邮箱地址上建立超链接，mailto: vip@BubbleUnder.com。

（10）选中网页内容，然后单击“插入Div标签”按钮，分别插入header、navigation、mainContent、footer共4个Div。

（11）保存网页，按F12，预览网页。

实验总结：

在浏览器中的效果如下：

实验的源码见同目录下的压缩文件。

实验二 格式化文本

实验目的：

1．掌握文本样式的设置方法。

2．掌握段落样式的设置方法。

3．掌握列表样式的设置方法。

4．掌握超链接文字样式的设置方法。

实验内容：

定义“校领导赴包装设计艺术学院调研”栏目中“web2_index.html”网页的样式。

实验总结：

在浏览器中的效果如下：

实验的源码见同目录下的压缩文件。

实验三 应用背景图像

实验目的：

1．掌握CSS背景（background）属性。

2．掌握设置背景图像位置的方法。

3．掌握使用背景图像替换文本的方法。

4．掌握使用背景图像制作圆角框的方法。

实验内容：

1．制作圆角框。

2．制作泡泡俱乐部首页。

实验步骤：

1．制作圆角框。

（1）创建站点。

（2）创建内部样式表。

2．制作泡泡俱乐部首页。

（1）创建站点。

    （2）新建CSS文件。

实验总结：

在浏览器中的效果如下：

制作圆角框

应用背景图像

实验的源码见同目录下的压缩文件。

实验四 创建导航条

实验目的：

掌握水平导航条的制作方法。

实验内容：

制作水平导航条。

实验步骤：

制作水平导航条，

建立内部样式表。

实验总结：

在浏览器中的效果如下：

实验的源码见同目录下的压缩文件。

实验五 浮动(float)页面布局

实验目的：

掌握Html、CSS的综合应用。

实验内容：

制作一个简易的博客首页。

实验步骤：

分析页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，

布局Logo栏

布局导航栏Nav

Banner布局

内容Content板块布局

Footer布局内容左侧板块(ContentL)布局

内容右侧板块(ContentR)布局

实验总结：

在浏览器中的效果如下：

实验的源码见同目录下的压缩文件。

第二篇：湖南工业大学论坛

湖南工业大学论坛

湖南工业大学论坛（hutsky）由湖南工业大学学生创建于20xx年4月2日，又名同心湖畔，是湖南工业大学非官方论坛。

湖南工业大学论坛是湖南工业大学非官方论坛，致力于服务于湖南工业大学在校生、毕业生，以及其他支持我们的朋友们，我们将竭力提供所有与学生有关的合法信息，一切以学生的利益为出发点，致力于建立成为湖南省高校中具有影响力的论坛，我们本着求真务实、积极向上，勇于挑战，敢于创新的精神，用心建设湖南工业大学论坛，用心维护我们湖工大学子的共同的网络家园。 湖南工业大学论坛的发展不会超越法律制度的约束，我们会一直在法律和相关制度允许下发展壮大，不在论坛发布对大学生有害的相关信息，争创一个文明论坛。为湖南工业大学的同学营造一个良好的网络环境。争创湖南工业大学主流论坛。我们会通过我们论坛的质量和服务，在所有湖南工业大学师生以及校外网友心中提高知名度；以丰富实用的内容来增加网友的关注。

湖南工业大学论坛（hutsky）提供的服务及简介如下：

门户：最新校园动态，社会焦点，校园资讯。

论坛：发布信息互动交流，信息咨询。

百科：工大文化结晶，工大学子的万能工具书。

家园：找朋友，寻老乡，心的港湾，情的寄托。

商城：我要开店，工大人自己的淘宝。

Dream-Sky：梦的放飞。

论坛包括：文学、摄影、学术、考研、创业、IT世界、情感、社团、精品校园文化，灌水、游戏、体育、时尚、歌曲、动漫、影视、贴图、众多娱乐生活,校内求助、校园信息、活动公告、缤纷校园.

湖南工业大学论坛主要版块划分为：

【工大广告】

社团招新，学生招聘，商业广告等发帖到此版。

【工大问问】

失物招领，求助、帮助等。推荐大家使用悬赏主题

【新手签证】

新人报道点，温馨祝福台。本版提供论坛新人报道；会员友情祝福。

【抢楼签到专版】

提示：一定要在下午1点整或1点以后去抢，抢到者须要有话题

【大话工大】

巍巍德山,菁菁校园。最及时、最全面的校园动态，我们共同分享。

【男左女右】

关关雎鸠，在河之洲。窈窕淑女，君子好逑。 情灵犀一点，缘妙不可言。

【跳蚤市场】

发布,交流二手信息,服务大家！物物交换，二手交易. 【情感港湾】 让情感释放，为心灵安家。真实的，永远值得珍藏。 【体育大观】 体坛风云，舍我其谁。关注体育，关注健康。 【影音美图】 经典总是那么刻骨铭心，让我们细细地品味、静静地聆听吧！ 【闲聊灌水】 闲话连篇，娱乐八卦，适度恶搞.笑—生活的滋味。 【考试资料】 墨迹飘香的角落,静心来读书写字,学习考试不再成为负担。

【电脑网络】

前沿的IT技术，创造我们的现代生活。电脑软硬，IT风云。

【社团、协会】

湖工大社团、协会、群组等。任何人都可以申请喜爱的群组。

【我的学院】

（更新至2011.4.6）

发展经过

湖南工业大学论坛一直在努力进步发展，并且为了同学们更好的浏览体验，于20xx年5月，论坛成功的从原discuz x1系统，转换为Discuz x2系统，因此大大提升了论坛的访问速度和性能。

网站目标 为广大师生打造第一交流平台，为广大师生提供最有帮助的实用信息，成为广大师生不离不弃的网络家园。

湖南工业大学论坛：工大的天空，我们一起飞翔！

网站目标

湖南工业大学论坛：为广大师生打造第一交流平台，为广大师生提供最有帮助的实用信息，成为广大师生不离不弃的网络家园。

扩展阅读：