网页课设Word文件下载.docx
《网页课设Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页课设Word文件下载.docx（12页珍藏版）》请在冰豆网上搜索。
9.2登陆页面2
9.3动漫导航页6
摘要
现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。
在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位对于现在的社会，科技的飞速发展已经成为社会发展的标志。
其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。
计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。
不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们上做出了突出的贡献。
网页是我们在网络上的“代言人”。
我们将什么样的信息传达给浏览者，要讲述什么样的事情，网页在这里起着重要的作用。
建设网站的一般过程包括：
前期内容确立、网站架构搭建、创意策划、设计、网站建设。
网站的功能版块一般分为首页（含引导页）、新闻部分、产品部分、信息交流部分、定制系统、零散页面等。
根据不同的企业需求，各网站的功能版块数量、布局、结构各异。
要做一个有特色的网站，我们首先要熟练的掌握Dreamweaver、Photoshop和flash等多种制作网页的工具，我们在掌握它的基础上要善于合理的利用这些工具，这样我们相才能做出一个让人看了后感到舒服的网页。
一、设计目的
本课程的设计目的是通过实践使同学们经历Dreamweaver开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例，理解并初步掌握运用Dreamweaver可视化开发工具进行网页开发的方法；
了解网页设计制作过程。
通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握PhotoshopCs5、Dreamweaver
Cs5等软件的的操作和应用。
增强动手实践能力，进一步加强自身综合素质。
我本次主要是设计的一“动漫预览”为主题的网页，针对动漫的美丽画风做了介绍。
二、设计方案的论证
利用Dreamweaver制作一个关于“动漫”的网站，利用表格、行为、层和链接等网页设计技术设计页面。
本网站以动漫素材，主要讲解了与动漫相关的内容。
首页设登录，分类，论坛，壁纸，动漫，制作简介，更多，几个栏目。
三、总体设计
3.1布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。
Dreamweaver是大多数人设计网页的称手兵器，也是众多入门者的捷径。
特别是其在布局方面的出色表现，更受青睐。
大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。
编辑图像大小：
在Dreamweaver中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。
调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。
3.2设置图像缩放比例：
网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×
600的窗口，还是1024×
768的窗口，网页都要能正常的显示。
设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。
设置图像缩放比例的步骤如下：
1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.
2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。
外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；
垂直间距指图像与周围元素在垂直方向的间距。
3.3怎样编辑网页中的图像
在Dreamweaver中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：
图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外，为了使图片更符合要求，我们还在photoshop中对所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。
3.4使用背景图像
使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。
这样做可以使制作的网页更美观好看。
网页中使用背景图像的具体步骤如下：
1.新建一个空白网页。
2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.
3.开“背景”选项卡。
4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。
5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。
6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。
这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸
3.5设置链接
选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。
我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。
四、调试运行及结果分析
<
style>
img
{
opacity:
0.4;
filter:
alpha（opacity=40）;
/*ForIE8andearlier*/
}
img:
hover
1.0;
alpha（opacity=100）;
/style>
可以使图片透明并透明度可调
五、测试及问题探讨
将制作好的页面进行预览测试在对网页进行调试的时候，发现了一个严重的问题！
由于网页是用表格进行布局的，我们在自己的电脑上运行后的样子和在机房运行后的样子出现了差别。
经过仔细研究，发现是分辨率的不同引起的！
我们自己的电脑上的分辨率比机房里的电脑设置的分辨率要高，所以在机房里打开网页后就感觉有点不正常！
后来，我们把机房电脑的分辨率设置与自己电脑一样的分辨率，就达到了同样的效果。
但是这是个治标不治本的办法，我们觉得要彻底解决这个问题，应该要用到DIV＋CSS的网页布局，由于我们尚未得掌握此项技术，所以这个问题也只能暂时治标了。
主页的测试主要包括三方面的测试：
一个是测试页面的html语法合法性，以保证技术上的正确性。
一般采用工具软件，如html.validator等，都可以对页面进行快速而准确地测试，有的软件还能给你提出修改的方法和建议；
一个是测试页面浏览的兼容性，以确保页面在使用不同的浏览器浏览时都能正常显示，我们可以借助工具软件browser来完成这项测试（dream
weaver提供页面在ie和navigator的预览功能）；
最后一个是测试主页的链接是否正常，是否存在断链。
我在制作中遇到怎么才能使鼠标放到上地图映射使地图映射改变颜色没有解决。
六、课设总结与体会
使用Dreamweaver设计工具制作静态网页。
制作网页所用的标记语言分HTML和脚本语言两种，目前B/S结构基于HTML语言。
以上是我们学习网页制作须知的基础知识。
利用Dreamweaver制作网页，先创建一个空白文档，工作窗口会出现编辑模式：
代码。
；
最重要的就是定义一个本地站点来管理相关网页制作的文件、图片、程序等。
我觉得，对Dreamweaver软件一定要整体把握、综合应用。
那么，在今后的学习工作中就要学以致用、不断改进，切不可前学后忘，竹篮打水一场空。
很多时候，老师在课堂上讲过一次，又在上机课上带领操作一次，但我没有及时巩固，所以在实际操作时还是没有完全掌握，只能及时询问同学才将问题解决。
七、致谢
此次网页实训是以掌握制作网页技能实训技能为主，而这次实训不仅掌握了利用Dreamweaver网页的制作技术而且还制作出了自己的成果，自己非常高兴。
经过这次实训，我领悟到任何东西都要“学以至用”，学习了还不行还要看自己掌握了没，掌握了还不行还要看自己熟练了没，熟练了还不行还要做出一定成果。
这次实训过程中，得到了学校领导的大力支持，给我提供了舒适的工作学习环境，也得到了老师的精心指导，在此表示衷心的感谢
八、参考文献
[1]赵丰年，网页制作教程（第3版）[M]人民邮电出版社，2006.
[2]易枚根，Dreamweaver8网页设计与网站建设[M]机械工业出版社，2007.
[3]张强，高建华，温谦网页制作与开发教程[M]人民邮电出版社，2008.
[4]张培Dreamweaver8入门与提高实例教程[M]机械工业出版社，2007.
[5]耿跃鹰，网页制作与网站开发：
从入门到精通[M]清华大学出版社，20
九、附录
9.1主页
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
动漫<
/title>
/head>
body>
tableborder="
1"
height="
700px"
width="
100%"
tr>
tdheight="
90%"
embedsrc="
123.avi"
/embed>
/td>
10%"
imgsrc="
1232.jpg"
border="
0"
usemap="
#hua"
mapname="
hua"
id="
areashape="
circle"
coords="
68,185,70"
href="
file:
///E:
/kswjj/Untitled-1.html"
/tr>
/table>
/body>
/html>
9.2登陆页面
无标题文档<
script>
functionabc（）
if（q.a.value=="
"
）{
alert（"
请输入用户名"
）;
return（false）;
if（q.b.value=="
请输入密码"
if（q.c.value=="
请输入年龄"
}
if（q.d.value=="
请输入身高"
if（q.e.value=="
请输入体重"
if（q.f.value=="
请输入身份证号"
return（true）;
q.submit（）;
/script>
bodybackground="
E:
\kswjj\asd.jpg"
600px"
80%"
align="
center"
colspan="
2"
>
20%"
\kswjj\qwe.jpg"
trheight="
60%"
tdwidth="
17%"
td>
formalign="
name="
q"
onSubmit="
returnabc（）"
action="
/kswjj/Untitled-2.html"
fieldset>
<
legend>
fontsize="
-1"
欢迎来到XX网页请添加信息<
/font>
/legend>
用户名:
inputtype="
text"
a"
/>
br/>
密码：
password"
b"
/fieldset>
性别
radio"
h"
value="
男"
男
女"
女<
年龄：
c"
身高：
d"
体重：
e"
身份证号：
f"
你知道这个网页是干什么的吗
selectname="
g"
optionvalue="
知道"
知道<
/option>
不知道"
不知道<
不太清楚"
selected="
selected"
不太清楚<
去他妈的"
fnck<
/select>
submit"
提交"
reset"
重置"
/form>
tdcolspan="
c<
9.3动漫导航页
火影<
area:
link{background-color:
#B2FF99;
}/*未被访问的链接*/
visited{background-color:
#FFFF85;
}/*已被访问的链接*/
hover{background-color:
#FF704D;
}/*鼠标指针移动到链接上*/
active{background-color:
}/*正在被点击的链接*/
200710130321191_2.jpg"
embedhidden="
true"
src="
huoying.mp3"
630"
8%"
3"
22%"
background="
hp_2.jpg"
32%"
33%"
34%"
xue_0.jpg"
#xue"
xue"
223,160,15"
/kswjj/Untitled-3.html"
251,93,15"
/kswjj/Untitled-4.html"
157,172,15"
/kswjj/Untitled-5.html"
265,215,15"
/kswjj/Untitled-6.html"
/map>
18%"
其他子页
升级会员 