网页设计与制作课程实验报告.docx

网页设计与制作课程实验报告.docx

《网页设计与制作课程实验报告.docx》由会员分享，可在线阅读，更多相关《网页设计与制作课程实验报告.docx（17页珍藏版）》请在冰点文库上搜索。

桂林航天工业高等专科学校

电子工程系

网页设计与制作 课程实验报告

2011-----2012学年第一学期

专业：

通信技术 班级：

2009041204 学号：

39

姓名：

高秋妹

指导教师:

李云

第一章 网站概述

1.1需求分析：

在21世纪的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览网站，已经成为越来越多网民的选择，根据调查，中国目前有3亿多网民，其中50%的网民有过在网络上浏览网页获取社会信息的经历。

展望未来，机会无限。

在这样的背景之下，设计一个以文字和图片为主的系部网站，主要满足一下需求：

充分发挥系二级网站的对外宣传效果，体现自身专业优势、名师风采、学生工作等内容，全面展示我校整体形象和办学特色。

1.2功能概述：

这次实现的是系部网站设计，主要内容有：

系部网站首页的实现，和首页相关的内容，即通知公告，最新动态，友情链接，专业设置，师资建设，学生工作及文表下载等。

1.3网站风格：

网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。

不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

在本网站里主要用到的颜色有：

淡蓝色和白色，网站看上去给人的第一印象就是温馨、充满梦想的网站。

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语言，

（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">

//www.w3.org/1999/xhtml">

--

body{

background-color:

#FFFFCC;margin-top:

0px;

}

body,td,th{

color:

#000000;font-size:

18px;

}

a:

link{

color:

#000000;

text-decoration:

none;

}

a:

visited{

text-decoration:

none;color:

#0066FF;

}

a:

hover{

text-decoration:

none;color:

#FF0000;

}

a:

active{

text-decoration:

none;

}

.STYLE3{font-size:

14px}

.STYLE5{font-size:

14px;font-family:

"新宋体";}

.STYLE6{font-family:

"新宋体"}

-->

专业设置

师资建设

学生工作

文表下载

height="7"/>祝贺我系学生在30届校田径运动会上取得十连冠

target="_blank">答疑时间安排

3.html"target="_blank">2010-2011学年电子工程系校内评奖评优名单公

示

width="16"height="11"/>

class="STYLE3"> 我校学生在2011年全国大学生电子设计竞赛中喜获佳绩

庆祝中国共产党90周年活动

2011年学生党支部创先争优公开承诺书

党在我心中”主题实践活动

热烈祝贺我系在校羽毛球和气

排球赛中双双获奖

电子工程系关于举

办“我心目中的好老师”征文活动的通知

全系教职工党员组

织开展党建主题实践活动庆祝党的生日

学校首页

中国通信网

大学生电子设计

target="_blank">中国PCB技术网

target="_blank">中国PCB技术网

区级精品课程－－3G网络组建与维护

CopyRight@桂林航天工业高等专科学校电子工程系