网页设计与制作课程实验报告Word文件下载.docx
《网页设计与制作课程实验报告Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计与制作课程实验报告Word文件下载.docx（17页珍藏版）》请在冰豆网上搜索。
1.4可行性分析：
网站设计与制作是专业课之一，随着网络的开放、电脑的普及率、以及计算机技术的提高，同时网上资源丰富多彩，加上已有一定的技术基础和优秀的老师作相关的指导，建设该班级网站有一定的可行性。
第二章 网站制作
2.1网页结构：
文表下载
学生工作
师资建设
专业设置
系部首页
2.2主要功能：
l专业设置：
介绍专业特色，发展前景，开设课程。
l师资建设：
师资队伍人数、师资力量概况（职称、学历和年龄结构，教师培训计划及实施情况）、学术带头人介绍（包括研究方向、论文论著等）或个人主页链接、其他个人主页链接；
教师风采，校级名师需有个人照片，个人简介，研究方向、团队以及研究项目，发表过的论文等，其他教师也需要有个人简介。
l学生工作：
学生日常教育与管理、学生社团活动、班级建设及主页链接、学生社会实践、特色学生刊物；
l文表下载：
相关文表格式。
l通知公告：
相关通知。
l最新动态：
部门对内（学院、系、部）和对外（社会）的信息（新闻、通知、公告）。
2.3制作工具：
Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。
Flash是由macromedia公司推出的交互式矢量图和Web动画的标准。
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
Dreamweavr8是一款专业的HTML编辑器，用于对WEB页和WEB应用程序进行设计，编码和开发。
无论直接编写HTML
代码还是在可视图化编辑环境中工作，dreamweaver8都会提供很多快捷的工具。
Dreamweaver8是可以完全自定义的，可以使用它创建自己的对象和命令，修改快捷键，也可以编写JAVAScript代码，从而用自己创建的新行为，属性检查器和站点报告来扩展
dreamweaver的功能。
2.4制作步骤
1.数据，表格及数据处理
制作网页之前收集网页制作的素材，包括图片，背景音乐，视频，文字信息等；
2.实验操作过程
（1）站点的创建
启动dreamweaver8 界面，单击【创建新项目】列表栏中的
【HTML】超链接。
选择【站点】—【管理站点】—【新建】命令，打开【站点】对话框，在【基本】选项卡中的站点名
称文本框中输入站点名称“电子工程系”。
单击【高级】标签，在【高级】选项卡中设置本地站点参数。
在【本地跟文件夹】文本框中输入本地站点所对应的本地根文件夹。
“E:
网页制作”。
单击【下一步】按扭。
选中【否】单选按钮，表示该站点是
一个静态站点，没有动态页。
单击【下一步】选择“在本地进行编辑，然后上传到远程测试服务器”；
单击【下一步】从弹出的菜单中选择【无】选项。
单击【下一步】，单击完成。
随即出现【管理站点】对话框，显示新站点。
单击【完成】。
（2）建立本地站点之后，在文件面板中管理网站文件。
在【文件】面板中单击鼠标右键，在快捷菜单中选择【新建文件】
，名称为“电子工程系.html”.
（3）网页布局
1.在表格中插入表格：
切换到【标准模式】，选择【插入】—【表格】命令，此时弹出【表格】对话框，在【行数】和【列数】中填入自己所需要的行列数，边框粗细填0，表格宽度填1000像素。
单击确定。
2.创建嵌套表格，选中一个表格单元格，右击选择【表格】—
【拆分单元格】在弹出的对话框中填需拆分为行还是列。
如：
选中拆分为行，2行。
3、在表格中输入层：
选中一个表格单元，选择【插入】—【布
局对象】—【层】
4、在层中插入图像：
选择【插入】—【图像】在弹出的对话框中【文件名】中选择要插入图像的名称。
单击确定，在弹出的对话框中【替换文本】处填写图片的说明名称。
5、设置图片属性：
图像的属性可以通过【属性】面板中各个选项来完成。
（4）创建网页名称：
选择【查看】—【代码】编写HTML语言，
<
title>
电子工程系<
/title>
（5）利用PS制图
1、启动PS，执行“【文件】—【新建命令】”菜单命令，弹出
【新建】对话框，进行参数设置，点击“好”按钮后，将文件保存在自己建的网页目录下。
2、插入自己搜集的照片制作横幅，导航栏等。
再插入所需的位置。
第三章网站的实施
3.1Logo：
3.2导航栏：
3.3主要内容：
3.4主页：
3.5专业设置:
3.6师资建设：
3.7学生工作：
3.8文表下载：
第四章 源代码（主页）
!
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=gb2312"
/>
styletype="
text/css"
--
body{
background-color:
#FFFFCC;
margin-top:
0px;
}
body,td,th{
color:
#000000;
font-size:
18px;
a:
link{
text-decoration:
none;
visited{
color:
#0066FF;
hover{
#FF0000;
active{
.STYLE3{font-size:
14px}
.STYLE5{font-size:
14px;
font-family:
新宋体"
;
}
.STYLE6{font-family:
-->
/style>
/head>
body>
tablewidth="
1024"
height="
182"
border="
0"
align="
center"
tr>
th height="
178"
background="
image/bg.gif"
scope="
col"
&
nbsp;
/th>
/tr>
/table>
table width="
height="
28"
border="
align="
background="
image/bg1.gif"
34"
scope="
a href="
index.html"
/a>
thscope="
ahref="
zhuanye.html"
专业设置<
shizi.html"
师资建设<
xuesheng.html"
学生工作<
webiao.html"
文表下载<
500"
1"
thalign="
valign="
top"
bordercolor="
#FFFFFF"
bgcolor="
1000"
300"
left"
271"
th scope="
image/index_03.gif"
"
width="
265"
right"
>
tdheight="
42"
imgsrc="
image/dot2.gif"
8"
height="
7"
image/news.gif"
16"
11"
spanclass="
STYLE5"
<
index/index-1.html"
target="
_blank"
祝贺我系学生在30届校田径运动会上取得十连冠<
/span>
/td>
31"
index/index-2.html"
target="
答疑时间安排<
td height="
39"
span class="
STYLE3"
index/index-
3.html"
2010-2011学年电子工程系校内评奖评优名单公
示<
升级会员 