网页设计与制作课程实验报告(常用版).doc
网页设计与制作课程实验报告（常用版）(可以直接使用，可编辑 完整版资料，欢迎下载）桂林航天工业高等专科学校电子工程系 网页设计与制作 课程实验报告2021-2021学年第 一 学期专业： 通信技术 班级： 2021041204 学号： 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语言，<title>电子工程系</title>（5）利用PS制图1、启动PS，执行“【文件】【新建命令】”菜单命令，弹出【新建】对话框，进行参数设置，点击“好”按钮后，将文件保存在自己建的网页目录下。2、插入自己搜集的照片制作横幅，导航栏等。再插入所需的位置。第三章网站的实施3.1Logo：3.2 导航栏：3.3 主要内容：3.4 主页：3.5 专业设置:3.6 师资建设：3.7 学生工作：3.8 文表下载：第四章 源代码（主页）<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" " :/ w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" :/ w3.org/1999/xhtml"><head><meta -equiv="Content-Type" content="text/html; charset=gb2312" /><title>电子工程系</title><style type="text/css"><!-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: "新宋体"-></style></head><body><table width="1024" height="182" border="0" align="center"> <tr> <th height="178" background="image/bg.gif" scope="col"> </th> </tr></table><table width="1024" height="28" border="0" align="center" background="image/bg1.gif"> <tr> <th height="34" scope="col"><a href="index.html">系部首页</a></th> <th scope="col"><a href="zhuanye.html">专业设置</a></th> <th scope="col"><a href="shizi.html">师资建设</a></th> <th scope="col"><a href="xuesheng.html">学生工作</a></th> <th scope="col"><a href="webiao.html">文表下载</a></th> </tr></table><table width="1024" height="500" border="1" align="center"> <tr> <th align="center" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="col"><table width="1000" height="300" border="0"> <tr> <th align="left" valign="top" scope="col"><table width="271" border="0" align="center"> <tr> <th scope="col" background="image/index_03.gif"" width="265" height="34" align="right" ></th> </tr> </table> <table width="300" border="0"> <tr> <th align="left" scope="col"> </th> </tr> <tr> <td height="42"><img src="image/dot2.gif" width="8" height="7" /><img src="image/news.gif" width="16" height="11" /><span class="STYLE5"> <a href="index/index-1.html" target="_blank">祝贺我系学生在30届校田径运动会上取得十连冠</a></span></td> </tr> <tr> <td height="31"><img src="image/dot2.gif" width="8" height="7" /><span class="STYLE5"> <a href="index/index-2.html" target="_blank">答疑时间安排</a></span></td> </tr> <tr> <td height="39"><span class="STYLE3"><img src="image/dot2.gif" width="8" height="7" /> <a href="index/index-3.html" target="_blank">2021-2021学年电子工程系校内评奖评优名单公示</a></span> </td> </tr> <tr> <td height="37"><img src="image/dot2.gif" width="8" height="7" /><span class="STYLE6"><img src="image/news.gif" width="16" height="11" /><a href="index/index-4.html" title="我校学生在2021年全国大学生电子设计竞赛中喜获佳绩" target="_blank" class="STYLE3"> 我校学生在2021年全国大学生电子设计竞赛中喜获佳绩</a></span></td> </tr> <tr> <td height="28"><img src="image/dot2.gif" width="8" height="7" /><a href="index/index-5.html" title="庆祝中国共产党90周年活动" target="_blank" class="STYLE5"> 庆祝中国共产党90周年活动</a></td> </tr> <tr> <td height="37"><span class="STYLE5"><img src="image/dot2.gif" width="8" height="7" /><a title="2021年学生党支部创先争优公开承诺书.rar" href="index/index-6.html" target="_blank"> 2021年学生党支部创先争优公开承诺书</a></span></td> </tr> </table></th> <th align="left" valign="top" scope="col"><table width="286" border="0" align="center"> <tr> <th scope="col" background="image/index_06.gif"" width="280" height="34" align="left" ></th> </tr> </table> <table width="300" border="0"> <tr> <th height="25" align="left" scope="col"> </th> </tr> <tr> <td height="26"><img src="image/dot2.gif" width="8" height="7" /> <a title="党在我心中”主题实践活动" href="index/index-7.html" target="_blank">党在我心中”主题实践活动</a></td> </tr> <tr> <td height="44"><img src="image/dot2.gif" width="8" height="7" /> <a title="热烈祝贺我系在校羽毛球和气排球赛中双双获奖 " href="index/index-8.html" target="_blank">热烈祝贺我系在校羽毛球和气排球赛中双双获奖</a></td> </tr> <tr> <td height="45"><img src="image/dot2.gif" width="8" height="7" /> <a title="电子工程系关于举办“我心目中的好老师”征文活动的通知" href="index/index-9.html" target="_blank">电子工程系关于举办“我心目中的好老师”征文活动的通知</a> </td> </tr> <tr> <td height="50"><img src="image/dot2.gif" width="8" height="7" /> <a title="全系教职工党员组织开展党建主题实践活动庆祝党的生日" href="index/index-10.html" target="_blank">全系教职工党员组织开展党建主题实践活动庆祝党的生日</a> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table></th> <th align="left" valign="top" scope="col"><table width="257" border="0" align="center"> <tr> <th scope="col" background="image/index_08.gif"" width="276" height="34" align="left"></th> </tr> </table> <table width="300" border="0"> <tr> <th scope="col"> </th> </tr> <tr> <td height="35"><img src="image/dot2.gif" width="8" height="7" /><a href=" :/ glcat.edu /"> </a><a href=" :/ glcat.edu /" target="_blank">学校首页</a></td> </tr> <tr> <td height="30"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :/ target="_blank">中国通信网</a></td> </tr> <tr> <td height="28"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :/ /" target="_blank">大学生电子设计</a></td> </tr> <tr> <td height="35"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :/ target="_blank">中国PCB技术网</a></td> </tr> <tr> <td height="34"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :/ target="_blank">中国PCB技术网</a></td> </tr> <tr> <td height="46"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :/jpkc.glcat.edu /zizhiqu/3gwl/" target="_blank">区级精品课程3G网络组建与维护</a></td> </tr> </table></th> </tr> </table> <table width="990" height="200" border="0"> <tr> <th scope="col"><img src="photo/06.jpg" width="200" height="200" /></th> <th scope="col"><img src="photo/01.jpg" width="200" height="200" /></th> <th scope="col"><img src="photo/10.jpg" width="200" height="200" /></th> </tr> </table></th> </tr></table><table width="1024" height="1" border="0" align="center"> <tr> <th scope="col"> </th> </tr></table><table width="1024" border="0" align="center"> <tr> <th scope="col"><div align="center">CopyRight桂林航天工业高等专科学校电子工程系 </div></th> </tr></table><p> </p></body></html>第五章：总结通过自己运用软件制作电子工程系这个网页，掌握了HTML语法基本的基本用法和HTML编写网页的方法；熟悉了dreamweaver8界面及操作和使用dreamweaver8建立站点及制作网页；也熟悉了PS在网页设计中的用法； 这次网页制作让我更深刻的学会了网页制作的很多方法，由于做网页要收集素材，从中让我收集到了很多课外知识，也让我在另一方面学会了如何欣赏网页，懂得了网页制作的流程，这让我在以后的工作中有更好的发展空间。实验成绩评定表 序号实验名称操作成绩综合成绩备注1网页设计与制作23456789评语及综合成绩综合成绩： 指导教师： 李云 年 月 日班级：2021041204学号：39姓名： 高秋妹 实验概述：【实验目的及要求】用C语言编程实现时间片轮转调度算法【实验原理】基于时间片轮转调度算法思想用C语言编程实现【实验环境】（使用的软件）Visual C+6.0实验内容：本实验模拟在单处理机情况下处理机调度，用C语言编程实现先来先服务和最短作业优先调度算法。【实验方案设计】时间片大小固定，由用户输入。进程个数由用户输入。a. 每个进程用一个PCB表示。PCB包括进程名，到达时间，运行时间，剩余时间，进程状态，链接指针。其中，进程名，到达时间和运行时间由用户输入，剩余时间的初值等于运行时间。为简单起见，进程状态设为三种：就绪，运行和完成。链接指针指向下一个进程的PCB；b. 按照进程到达的先后顺序排成一个队列。设置一个队头指针指向队列中第一个进程，并设置一个队尾指针指向队列中的最后一个进程；c. 执行调度时，先选择队首的第一个进程运行。另外设置一个指向当前运行进程的指针；d. 由于本实验是模拟实验，所以对选中进程并不实际启动运行，而只是执行：l 被选中进程的状态置为运行态；l 被选中进程的剩余时间减去时间片大小；l 按照队列的顺序依次输出每个进程的进程名，到达时间，运行时间，剩余时间，进程状态。用这三个操作来模拟进程的一次运行；e. 进程运行一次后，以后的调度则将当前指针依次下移一个位置，指向下一个进程，即调整当前运行指针，以指示应运行进程。同时还应判断该进程的剩余时间是否为0。如果不为0，则等待下一轮的运行；如果该进程的剩余时间为0，则将该进程的状态置为完成态，并退出队列；f. 若处于就绪态的进程不为空，则重复第d步和第e步直到所有进程都运行完为止。【实验过程】（实验步骤、记录、数据、分析）测试用例1：屏幕显示：Please input the process name, arrive time and run time输入：1 2 1<enter>2 3 2<enter>3 4 3<enter>屏幕显示：Please input the slice1<enter>屏幕输出结果： *name arrive run rest state1 2 1 0 running2 3 2 2 ready3 4 3 3 ready *name arrive run rest state2 3 2 1 running3 4 3 3 ready *name arrive run rest state2 3 2 1 ready3 4 3 2 running *name arrive run rest state2 3 2 0 running3 4 3 2 ready *name arrive run rest state3 4 3 1 running*name arrive run rest state3 4 3 0 running *测试数据2：2 3 11 2 35 4 2测试数据3：【结论】（结果）测试数据1的运行结果（截图）：测试数据2的运行结果：测试数据3的运行结果：源程序代码：#include "stdio.h"#include "stdlib.h"struct studint name;int arrive;int run;int rest;char *state;struct stud *next;struct stud *create()int a,i;struct stud *head, *rear,*p,*q,*t;head=rear=NULL;printf("Please input the process number:");scanf("%d",&a);printf("nPlease input the process name,arrive time and run time:nFor example: 1 2 1n");for(i=0;i<a;i+) p=(struct stud*)malloc(sizeof(struct stud); scanf("%d%d%d",&p->name,&p->arrive,&p->run); p->rest=p->run; p->state="ready" if(rear=NULL) head=p; p->next=NULL; rear=p; else t=NULL; q=head; while(q&&q->arrive<p->arrive) t=q; q=q->next; if(q=head) p->next=head; head=p; else if(t=rear) rear->next=p; p->next=NULL; rear=p; else t->next=p; p->next=q; return head;void output(struct stud *head)struct stud *p,*t,*r;int slice;printf("Please input the slice:"); scanf("%d",&slice);while(head!=NULL) r=p=head; while(p!=NULL) t=head; p->rest=p->rest-slice;p->state="running"if(p->rest<0)p->rest=0;printf("n*n");printf("nametarrivetruntresttstaten");while(t!=NULL)printf("%dt%dt%dt%dt%sn",t->name,t->arrive,t->run,t->rest,t->state);t=t->next;if(p->rest=0)/*判断是否删除结点*/ if(p=head)head=p->next;free(p);p=head;/*删除头结点*/ else r->next=p->next; p=r->next; r=p;else r=p; p->state="ready" p=p->next; void main() struct stud *head; head=create(); output(head) ; 【小结】实验中产生的错误及原因分析：1、 程序运行不下去：错误分析：链表初始化排序过程中：指针p=Null时，不能执行q->arrive等命令；错误解决方法：将while(q->arrive<p->arrive &&q) t=q; q=q->next;改为：while(q&&q->arrive<p->arrive) t=q; q=q->next;2、 进程运行时间大于时间片时，程序进入死循环：当进程所需时间等于时间片时，运行结果正确：进程运行时间大于时间片时，程序进入死循环：错误分析：进程所需剩余时间计算错误；错误修改：将while(p!=NULL) t=head; p->rest=p->run-slice;p->state="running"修改为：while(p!=NULL) t=head; p->rest=p->rest-slice;p->state="running"错误3：测试数据：1 2 13 1 3Slice=2结果为： 即进入死循环。当进程所需时间小于时间片时，应立即跳出进程就绪对列。错误修改：在output()子函数中p->rest=p->rest-slice;后面加上一个语句：if(p->rest<0)p->rest=0;实验运行结果为：实验的体会及收获：
