网页实习报告1Word文档下载推荐.doc
《网页实习报告1Word文档下载推荐.doc》由会员分享，可在线阅读，更多相关《网页实习报告1Word文档下载推荐.doc（22页珍藏版）》请在冰点文库上搜索。
（9）掌握网页特效制作方法。
（10）掌握网站测试的方法。
2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图象资料、flash动画和网页特效等。
3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4.培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
网页设计制作阶段
网站主题
我的网站的主旨在于从各个方面全面的介绍陕西能源职业技术学院成立60周年，展示校园风采，包括学院简介、学院文化和学院历史。
另外，网站里还包括校友寄语，建立一个展示母校60年风雨的平台。
同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是红色，用以展示自己性格的效果。
最重要的是做出自己的风格，给浏览者好的欣赏感受。
2.2网站材料
主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。
同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。
要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。
精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。
2.3网站规划
我的网站共有7个主页面：
学院首页、学院简介、历史回眸、校园风采、校园文化、校庆捐赠、校友寄语。
每一个页面用统一的背景图片，以保证网站统一的页面风格。
如下图：
我是用陕西能源职业技术学院为网站名，用以方便存储和转发。
网站整体色调为红色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。
版面设计十分灵活，根据各部分内容的不同适当的自由设计。
网页布局主要用框架和表格，用div定位内容的大体结构，再用表格具体定位。
位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。
另外，为了网页布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果。
2.4网站的制作工具
做网页时主要使用的是EditPlus3，但我还使用了EMedtor。
另外，为了处理网页中的其他元素，还使用了Photoshop等软件。
2.5制作网站的网页
素材、风格、模板都设计好以后，下一步就是具体的制作网页。
制作网站时，首先要做的就是站点的规划，建立一个本地站点“xiaoqing”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“pic”文件夹来存放图片。
同时，由于“index”页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css样式文件也应统一管理，做到有条不紊，我设计的网站的首页如图：
2.5.1
图2.5.1
特效代码如下：
<
html>
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
>
title>
陕西能源职业技术学院六十周年校庆<
/title>
linkhref="
css/css.css"
rel="
stylesheet"
type="
text/css"
css/css2.css"
/head>
scriptsrc="
js/jquery-1[1].2.1.pack.js"
text/javascript"
/script>
js/muen.js"
body>
divclass="
juzhong"
<
top"
<
clear"
/div>
<
logo_bg"
imgsrc="
images/logo.jpg"
height="
100"
width="
1008"
style="
float:
left;
margin:
00025px;
"
muen"
subnav"
<
ulid="
nuw"
<
liclass="
one"
ahref="
index.php"
&
nbsp学院首页<
/a>
/li>
liclass="
jianjie.php"
学院简介<
<
http:
//localhost/xiaoqin3/lishi.php"
历史回眸<
xiaoyoufengcai.php"
校友风采<
<
//localhost/xiaoqin3/wenhua.php"
校园文化<
<
<
//localhost/xiaoqin3/juan.php"
校庆捐赠<
//localhost/xiaoqin3/jiyu.php"
background-image:
none;
校友寄语<
/ul>
yonghu"
&
nbsp&
nbsp今天是
<
?
$t=time（）+28800;
echodate（"
Y年m月d日"
$t）."
nbsp;
;
$d=date（"
D"
）;
//MonTueWedThuFriSatSun
switch（$d）
{
case"
Mon"
:
echo"
星期一"
break;
Tue"
星期二"
Wed"
星期三"
Thu"
星期四"
Fri"
星期五"
Sat"
星期六"
Sun"
星期日"
}
echo"
您的IP地址是：
.$_SERVER["
REMOTE_ADDR"
];
if（!
isset（$_COOKIE["
user"
]））
echo"
没有用户登录!
else
$user=$_COOKIE["
$flag=$_COOKIE["
flag"
if（$flag=="
0"
）
{
管理员用户：
echo$user;
|<
ahref=exit.php>
安全退出<
ahref=admin/index.php>
后台<
}
?
<
main"
left"
banner"
divalign="
center"
!
--焦点图切换开始更多请访问懒人图库-->
DIVid=nav>
<
UL>
<
LI>
IMGsrc="
images/06.jpg"
text="
健全的法律制度是现代社会的基石|陆欣律师事务所"
pic="
66"
<
DIV>
一个海岛<
/DIV>
/LI>
images/12.jpg"
美景如画的海景|天蓝海蓝"
22"
一片麦穗<
images/13.jpg"
郁郁葱葱的生命|生生不息的生命"
33"
一树绿叶<
images/14.jpg"
孤独的一棵老树|等谁呢？
44"
一棵大树<
images/15.jpg"
明媚的向日葵花|生生不息的生命"
55"
一地葵花<
/UL>
DIVid=BG>
DIVid=mask>
DIVid=back>
IMGheight=255src="
width=685>
p>
SCRIPTtype=text/javascript>
--
varnum=0;
$（"
#nav"
）.hide（）;
$（"
liimg"
）.load（function（）{
num++;
if（num==4）
{
$（"
）.show（）;
}
}）
.click（function（）{
//如果已经处于active状态，return
if（this.className.indexOf（"
active"
）!
=-1）return;
//正文文字渐隐
$（"
#frontText"
）.fadeOut（）;
#frontTextBack"
#frontTextSub"
//active状态的图片恢复原样
liimg.active"
）.fadeTo（200,0.6）
.removeClass（"
.animate（{top:
5,width:
70,left:
1},300）
.parent（）.css（{"
color"
#aaa"
}）;
//
//获取数据
vari=$（this）.attr（"
pic"
vart=$（this）.attr（"
text"
）.split（"
|"
//当前
$（this）.animate（{top:
-5,width:
70,height:
40,left:
1},100）
.addClass（"
.fadeTo（200,1）
white"
#back"
）.children（）.addClass（"
gray"
）.end（）
.fadeTo（500,0.1,function（）{
//varIMG=newImage（）;
//IMG.s
$（this）.children（"
img"
）.attr（"
src"
"
images/"
+i+"
.jpg"
）.removeClass（"
//更改图片
$（this）.fadeTo（500,1,function（）{
$（"
）.html（t[0]）.fadeIn（200）;
//更改正文文字
//阴影文字
）.html（t[1]）.fadeIn（200）} //副标题
）;
}）
}）
//初始第一张图片
vari=0;
show（）;
functionshow（）{
if（i==$（"
）.size（））i=0
）.eq（i）.click（）;
i++;
//setTimeout（show（）,1000）;
}
document.oncontextmenu=function（e）{returnfalse}
if（self.location.search!
="
）{
varV=self.location.search;
V=V.substr（1,V.length）;
eval（V）;
varjson="
{"
if（option.skin==0）
#mask"
if（option.animate==0）{
#navul"
）.width（option.width?
option.width:
685）;
）.height（option.height?
option.height:
255）;
#backimg"
）.width（$（"
）.width（））;
）.height（$（"
）.height（））;
$（self.parent.document.getElementById（"
splash"
））.children（）.height（$（"
）.height（））.width（$（"
//-->
/SCRIPT>
--焦点图切换结束-->
zaixian"
margin-top:
269px;
title_top"
title"
学院新闻<
images/more2.gif"
border="
zaixian_nr"
ul>
li>
我院青年教师杜强、王洁同志荣获“2011年度咸阳市优秀青<
我院毕业生郭春蕾被英国考文垂大学本科专业录取<
我院举办2012届工科毕业生就业洽谈会<
我院荣获2011年全省校园文化建设优秀成果三等奖<
我院学报荣获“全国高职高专优秀学报”称号<
listyle="
border:
none;
我院举办“联通杯”2011校园新生歌手大赛<
jianjie"
能源学院简介<
jianjie_nr"
xuxian_bottom"
padding:
16px0;
span>
陕西能源职业技术学院是经陕西省人民政府批准教育部备案的普通高等学校，由原煤炭部资深老牌名校、国家级重点中专陕西煤炭工业学校、陕西煤矿职工医科大学、省部级重点中专西安煤炭卫生学校、陕西煤炭职工大学合并组建的一所综合性公办普通高等学校，是教育部确认的全国具有高等学历教育资格的院校之一。
/span>
right"
<
dongtai"
<
fontcolor=#666666>
管理员登录<
/font>
<
formaction=index.phpmethod=postname=f>
<
tableborder=0width=100%>
<
tr>
<
td>
用户名：
/td>
inputtype=textname=userclass=bg>
/tr>
密&
nbsp码：
inputtype=passwordname=passclass=bg>
tralign=center>
tdcolspan=2>
<
inputtype=submitname=entervalue=确定onclick="
returncheck（）"
inputtype=resetname=entervalue=取消>
/table>
/form>
<
<
br>
yewulingyu"
spanstyle="
教学科研<
#"
float:
right;
margin-top:
4px;
images/more1.gif"
28"
13"
升级会员 