1、桂林航天工业高等专科学校电子工程系 网页设计与制作课程实验报告2011-2012 学年第 一 学期专业： 通信技术班级： 2009041204学号： 39姓名： 高秋妹指导教师: 李云第一章网站概述1.1 需求分析：在 21 世纪的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览网站，已经成为越来越多网民的选择，根据调查，中国目前有 3 亿多网民，其中 50%的网民有过在网络上浏览网页获取社会信息的经历。展望未来，机会无限。在这样的背景之下，设计一个以文字和图片为主的系部网站，主要满足一下需求：充分发挥系二级网站的对外宣传效果，体现自身专业优势、名师风采、学生工作等内容，全面
2、展示我校整体形象和办学特色。1.2 功能概述：这次实现的是系部网站设计，主要内容有：系部网站首页的实现，和首页相关的内容，即通知公告，最新动态，友情链接， 专业设置，师资建设，学生工作及文表下载等。1.3 网站风格：网站给人的第一印象来自视觉冲击，确定网站的标准色彩是 相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响 到访问者的情绪。在本网站里主要用到的颜色有：淡蓝色和白色， 网站看上去给人的第一印象就是温馨、充满梦想的网站 。1.4 可行性分析：网站设计与制作是专业课之一，随着网络的开放、电脑的普及率、以及计算机技术的提高，同时网上资源丰富多彩，加上已有一定的技术基础和优秀的老师作相
3、关的指导，建设该班级网站有一定的可行性。第二章网站制作2.1 网页结构：文表下载学生工作师资建设专业设置系部首页2.2 主要功能：l 专业设置：介绍专业特色，发展前景，开设课程。l 师资建设：师资队伍人数、师资力量概况(职称、学历和年龄结构，教师培训计划及实施情况)、学术带头人介绍（包括研究方向、论文论著等）或个人主页链接、其他个人主页链接； 教师风采，校级名师需有个人照片，个人简介，研究方向、 团队以及研究项目，发表过的论文等，其他教师也需要有个 人简介。l 学生工作：学生日常教育与管理、学生社团活动、班级建设及主页链接、学生社会实践、特色学生刊物；l 文表下载：相关文表格式。l 通知公告：
4、相关通知。l 最新动态：部门对内（学院、系、部）和对外（社会）的信息（新闻、通知、公告）。2.3 制作工具：Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一， 集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。Flash 是由 macromedia 公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Dreamweavr8 是一款专业的 HTML 编辑器，用于对 WEB 页和 WEB 应用程序进行设计，编码和开发。无论直接编写 HTML代码还是在可视图化编辑环境中工
5、作，dreamweaver8 都会提供很多快捷的工具。Dreamweaver8 是可以完全自定义的，可以使用它创建自己的对象和命令，修改快捷键，也可以编写 JAVAScript 代码，从而用自己创建的新行为，属性检查器和站点报告来扩展dreamweaver 的功能。2.4 制作步骤1. 数据，表格及数据处理制作网页之前收集网页制作的素材，包括图片，背景音乐， 视频，文字信息等；2. 实验操作过程（1） 站点的创建启动 dreamweaver8界面，单击【创建新项目】列表栏中的【HTML】超链接。选择【站点】【管理站点】【新建】命令，打开【站点】对话框，在【基本】选项卡中的站点名称文本框中输入站
6、点名称“电子工程系”。单击【高级】标签， 在【高级】选项卡中设置本地站点参数。在【本地跟文件夹】文本框中输入本地站点所对应的本地根文件夹。“E:网页制作”。单击【下一步】按扭。选中【否】单选按钮，表示该站点是一个静态站点，没有动态页。单击【下一步】选择“在本地进行编辑，然后上传到远程测试服务器”；单击【下一步】从弹出的菜单中选择【无】选项。单击【下一步】，单击完成。随即出现【管理站点】对话框，显示新站点。单击【完成】。（2） 建立本地站点之后，在文件面板中管理网站文件。在【文件】面板中单击鼠标右键，在快捷菜单中选择【新建文件】，名称为“电子工程系.html”.（3） 网页布局1. 在表格中插入
7、表格：切换到【标准模式】，选择【插入】【表格】命令，此时弹出【表格】对话框，在【行数】和【列数】中填入自己所需要的行列数，边框粗细填 0，表格宽度填 1000 像素。单击确定。2. 创建嵌套表格，选中一个表格单元格，右击选择【表格】【拆分单元格】在弹出的对话框中填需拆分为行还是列。如：选中拆分为行，2 行。3、在表格中输入层：选中一个表格单元，选择【插入】【布局对象】【层】4、在层中插入图像：选择【插入】【图像】在弹出的对话框中【文件名】中选择要插入图像的名称。单击确定，在弹出的对话框中【替换文本】处填写图片的说明名称。5、设置图片属性：图像的属性可以通过【属性】面板中各个选项来完成。（4）
8、创建网页名称：选择【查看】【代码】编写 HTML 语言，电子工程系（5） 利用 PS 制图1、启动 PS，执行“【文件】【新建命令】”菜单命令，弹出【新建】对话框，进行参数设置，点击“好”按钮后，将文件保存在自己建的网页目录下。2、插入自己搜集的照片制作横幅，导航栏等。再插入所需的位置。第三章 网站的实施3.1 Logo：3.2 导航栏：3.3 主要内容：3.4 主页：3.5 专业设置:3.6 师资建设：3.7 学生工作：3.8 文表下载：第四章源代码（主页）电子工程系 系部首页专业设置师资建设学生工作文表下载 祝贺我系学生在 30 届校田径运动会上取得十连冠 答疑时间安
9、排 2010-2011 学年电子工程系校内评奖评优名单公示 我校学生在 2011 年全国大学生电子设计竞赛中喜获佳绩 庆祝中国共产党 90 周年活动2011 年学生党支部创先争优公开承诺书 党在我心中”主题实践活动 热烈祝贺我系在校羽毛球和气排球赛中双双获奖 电子工程系关于举办“我心目中的好老师”征文活动的通知 全系教职工党员组织开展党建主题实践活动庆祝党的生日 ahref=学校首页 中国通信网 大 学生电子设计 中国 PCB 技术网 中国 PCB 技术网区级精品课程3G 网络组建与维护 CopyRight桂林航天工业高等专科学校电子工
10、程系 第五章：总结通过自己运用软件制作电子工程系这个网页，掌握了 HTML 语法基本的基本用法和 HTML 编写网页的方法；熟悉了 dreamweaver8 界面及操作和使用dreamweaver8 建立站点及制作网页；也熟悉了 PS 在网页设计中的用法；这次网页制作让我更深刻的学会了网页制作的很多方法，由于做网页要收集素材，从中让我收集到了很多课外知识，也让我在另一方面学会了如何欣赏网页， 懂得了网页制作的流程，这让我在以后的工作中有更好的发展空间。实验成绩评定表序号实验名称操作成绩综合成绩备注1网页设计与制作23456789评语及综合成绩综合成绩： 指导教师： 李云 年 月 日班级：2009041204 学号：39姓名：高秋妹
