网页设计与制作课程实验报告(可编辑优质文档)
网页设计与制作实验报告
最后还要制作各个页面的，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。
10、上传测试
网页制作完毕以后，要进行测试，在浏览器上运行自己的，反复测试，以发现设计中的缺陷。
实验结果及理论分析：
非常感谢老师给了我这次，独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。
（2）窗口组成的认识
网页设计与制作实训报告
甘肃机电职业技术学院网页设计与制作实训报告专业计算机信息管理班级G093501姓名杨雪曼指导老师郭建明2011-5-21一、实训目的1、进一步熟悉和掌握网站建设的基本流程和技术规范；2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识；3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识；4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站；5、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识；7、紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。
以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），为今后从事网站开发、维护和管理奠定基础。
二、实训项目天水旅游网站的建设三、实训过程1．资料的搜集。
2.熟悉制作软件。
3.构建站点框架。
打开Dremweaver后步便是新建站点4设计主页及二级页面。
5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果具体情况如下：通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。
使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。
所以我结合所学专业的内容制作了个人网站，作为实习的成果。
其内容是多样化的。
制作网页用的软件是Ｄreamweaver , banner软件。
Dreamweaver大大加速了网络时代电子交易应用中的项目交付。
它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。
网页设计实验报告
网页设计实验报告网页设计实验报告在人们越来越注重自身素养的今天，报告使用的频率越来越高，报告具有成文事后性的特点。
那么，报告到底怎么写才合适呢？下面是小编帮大家整理的网页设计实验报告，仅供参考，大家一起来看看吧。
网页设计实验报告1作为一个以前从来没有接触过互联网产品设计的菜鸟级产品设计人员，在没有人指导，只能自己摸索的情况下设计出并和技术与美工培训和将网站做出来，其中的艰辛只能自己体会。
不过，虽然过程艰辛，但自己的收获颇大。
一直以来希望能够转型做互联网的产品，但总是没有机会。
这次公司网站的策划及设计给了自己很好的学习和实践机会。
在这断断续续的七个月中，自己对于网站的策划和设计有了一定的认识，也通过实践的对照，对过去自己看过的产品设计和产品经理书籍中的理论有了更加深刻的理解。
在此，将在网站设计过程中的一些心得总结如下。
虽然对于已经身为产品经理的人可能没有用处。
但，我想，可能对于那些想要入行，或者希望在自己的公司内部转入产品行业的人来说，可能多少有一点点用。
要注意网站的定位任何一个公司或单位，要设计一个网站，都必然有其核心定位，即这个网站设计出来要干什么。
这一点对网站的设计具有决定性的影响。
如果不能将网站的定位把握好，作为一个设计人员，其工作往往会是无功而返。
因此，在网站策划阶段，产品设计人员必须多和上层沟通，甚至多和领导争辩，通过沟通和争辩来明晰公司对网站的定位。
同时，也可以让领导对网站的定位更加明晰。
只有完成了这一项，其余的策划和设计工作才应该继续进行。
要了解用户产品经理或产品设计人员很容易将自己作为用户来判断产品的功能或体验是否好用，但现实的情况是大部分用户很可能与产品经理所属的人群差距很大。
比如，在网站设计过程中，发现本网站的使用人群中竟然有不知道如何注册网站的人，这这真是出乎意料。
但这就是现实。
所以，在产品设计的过程中，不能以自己为中心，把自己当做用户。
事实上，很多用户的互联网水平真得没有达到我们的水平。
网页制作实验报告
网页制作实验报告一、实验目的。
本实验旨在通过实际操作，掌握网页制作的基本原理和技术，了解网页设计的基本要求和规范，培养对网页设计的兴趣和能力。
二、实验内容。
1. 学习HTML和CSS基础知识；2. 制作一个简单的静态网页，包括文本、图片和超链接等元素；3. 掌握网页布局和样式设计的基本方法。
三、实验步骤。
1. 学习HTML和CSS基础知识。
在实验开始前，我首先对HTML和CSS进行了系统的学习。
HTML是网页的标准标记语言，用于建立网页的结构；而CSS是层叠样式表，用于控制网页的样式和布局。
通过学习这两门技术，我对网页制作有了更深入的理解。
2. 制作一个简单的静态网页。
接下来，我开始动手制作一个简单的静态网页。
首先，我创建了一个HTML文件，并在其中编写了网页的基本结构，包括头部、导航栏、内容区和底部等部分。
然后，我利用CSS对网页进行了样式设计，包括字体、颜色、边框等样式的设置。
同时，我还插入了一些图片和超链接，丰富了网页的内容。
3. 掌握网页布局和样式设计的基本方法。
在制作网页的过程中，我深入学习了网页布局和样式设计的基本方法。
通过调整CSS样式表中的参数，我改变了网页的布局和样式，使其更加美观和易于阅读。
同时，我还学会了如何使用浮动、定位和响应式布局等技术，使网页在不同设备上都能够正常显示。
四、实验总结。
通过本次实验，我深入了解了网页制作的基本原理和技术，掌握了HTML和CSS的基础知识，学会了制作简单的静态网页，并掌握了网页布局和样式设计的基本方法。
这些知识和技能对我今后的学习和工作都具有重要的意义，我会继续努力学习，提高自己的网页制作能力。
五、实验感想。
网页制作是一门非常有趣和实用的技术，通过本次实验，我对网页制作有了更深入的了解，也增强了对这门技术的兴趣。
我相信，在今后的学习和工作中，我会继续深入学习网页制作技术，不断提高自己的能力，为将来的发展打下坚实的基础。
六、参考资料。
1. 《HTML5权威指南》。
《网页设计与制作》实验报告
《网页设计与制作》实验报告院系名称：专业班级：电学生姓名：学号：2013年 5 月26 日实验一：HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力；2、掌握利用HTML语言编写表格的能力；3、掌握利用HTML语言编写表单的能力。
二、实验课时2学时三、实验内容1、表格实验的结果。
①表格制作代码：<HTML><HEAD><TITLE>制作网页表格</TITLE></HEAD><BODY><TABLE border="2"><TR height="60"> <!--第一行--><TH rowspan="2" colspan="2" bgcolor="red" align="left">A<TD>B<TD align="center">C<TR> <!--第二行--><TH colspan="2">D<TR> <!--第三行--><TH rowspan="2" width="200" height="60" align="right">E<TH rowspan="2" width="200" height="60" align="right">F<TH rowspan="2" width="200" height="60" align="left">G<TD width="200" height="30">H<TR> <!--第四行--><TD width="200" height="30">I</TABLE></BODY><HTML>②网页表格制作截图：2、表单实验的结果①表单实验代码：<HTML><HEAD><TITLE>实验1.2——电子商务1104王远</TITLE></HEAD><BODY><TABLE border="1" width="400"><FORM method="post" action=""><TR><TD align="center" width="150">姓名:</TD><TD><INPUT type="text" name="xingming" size="20"></TD></TR><TR><TD align="center">密码:</TD><TD><INPUT type="password" name="mima" size="20"></TD></TR><TR><TD align="center">性别：</TD><TD><INPUT type="radio" name="xingbie" value="remale" checked>女 <INPUT type="radio" value="male" name="xingbie">男</TD></TR><TR><TD align="center">爱好：</TD><TD><INPUT type="checkbox" value="lanqiu" name="lanqiu">篮球<INPUT type="checkbox" value="lanqiu" name="lanqiu" checked>足球 <INPUT type="checkbox" value="pingpang" name="pingpang">乒乓球</TD></TR><TR><TD align="center">籍贯：</TD><TD><SELECT size="1" name="jiguan"><OPTION selected>开封</OPTION><OPTION>郑州</OPTION><OPTION>洛阳</OPTION></SELECT></TD></TR><TR><TD colspan="2" align="center"><INPUT type="submit" value="提交" name="tijiao"><INPUT type="reset" value="重置" name="chongzhi"></TD></TR></FORM></TABLE><BODY><HTML>②表单实验截图：四、实验小结通过此次实验，我对在课堂上学习到的知识进行了实际操作，只有真正操作一遍才知道知识并不只是记住就算是会运用。
网页设计步骤实训报告(3篇)
第1篇一、实训背景随着互联网技术的飞速发展，网页设计已经成为了一个热门的职业。
为了提高自身技能，我参加了网页设计步骤实训课程。
通过本次实训，我对网页设计的流程有了更加深入的了解，以下是我对实训过程的总结和心得。
二、实训目的1. 掌握网页设计的基本流程和技巧。
2. 提高实际操作能力，培养独立设计网页的能力。
3. 了解网页设计的前沿动态，提升审美水平。
三、实训内容1. 网页设计概述2. 网页设计软件及工具3. 网页布局与排版4. 网页色彩搭配与视觉设计5. 网页内容编辑与优化6. 网页交互设计与用户体验7. 网页安全与优化四、实训步骤1. 网页设计概述在实训开始之前，我首先对网页设计进行了初步了解。
网页设计是指利用网页制作软件和设计工具，将文字、图片、动画等元素进行合理布局和美化，以展示企业、产品或个人形象的过程。
2. 网页设计软件及工具实训过程中，我学习了以下网页设计软件及工具：（1）Adobe Photoshop：主要用于图片处理和编辑。
（2）Adobe Dreamweaver：主要用于网页制作和编辑。
（3）Adobe Flash：主要用于动画设计和制作。
（4）Microsoft FrontPage：主要用于网页制作和编辑。
3. 网页布局与排版在实训中，我学习了网页布局的基本原则和技巧，包括：（1）响应式布局：使网页在不同设备上都能正常显示。
（2）网格布局：将网页内容按照网格进行布局，使页面更加规整。
（3）流体布局：根据浏览器窗口大小自动调整元素位置和大小。
4. 网页色彩搭配与视觉设计色彩搭配对网页视觉效果的影响至关重要。
实训中，我学习了以下色彩搭配原则：（1）对比色：使网页更具视觉冲击力。
（2）相似色：使网页更加和谐。
（3）单色系：使网页简洁大方。
5. 网页内容编辑与优化实训过程中，我掌握了以下网页内容编辑与优化技巧：（1）文字排版：使文字更加易读。
（2）图片优化：提高网页加载速度。
（3）代码优化：使网页结构更加清晰。
【实验报告】网页制作实验报告
【实验报告】网页制作实验报告一、实验目的本次网页制作实验的主要目的是让我们熟悉网页制作的基本流程和技术，掌握 HTML、CSS 和 JavaScript 等语言的基本用法，提高我们的网页设计和开发能力，培养我们的创新思维和实践能力。
二、实验环境1、操作系统：Windows 102、开发工具：Visual Studio Code3、浏览器：Google Chrome三、实验内容1、网页规划与设计确定网页主题：本次实验选择制作一个个人博客网站。
设计网页布局：采用了常见的两栏式布局，左边为导航栏，右边为主要内容区域。
色彩搭配：选择了简洁舒适的配色方案，以淡蓝色为主色调，搭配白色和灰色。
2、 HTML 页面结构搭建使用 HTML 标签创建网页的基本结构，包括`＜html>｀、｀＜head>｀和`＜body>｀等。
在`＜head>｀标签中设置网页的标题、元数据和链接外部样式表。
在`＜body>｀标签中使用`＜div>｀、｀＜ul>｀、｀＜li>｀等标签构建网页的内容框架。
3、 CSS 样式设计创建外部 CSS 样式表，通过选择器为不同的 HTML 元素设置样式，包括字体、颜色、背景、边框、间距等。
运用浮动和定位技术实现网页元素的布局排版。
4、 JavaScript 交互效果实现编写 JavaScript 代码实现网页的交互功能，如导航栏的下拉菜单效果、图片轮播效果等。
使用事件监听机制处理用户的操作，如鼠标点击、鼠标悬停等。
四、实验步骤1、网页规划首先，对个人博客网站的功能和内容进行了详细的规划。
确定了包括首页、文章列表页、文章详情页、关于页等几个主要页面。
然后，在纸上绘制了每个页面的草图，初步确定了页面的布局和元素的分布。
2、 HTML 页面搭建打开 Visual Studio Code，创建一个新的 HTML 文件。
按照规划的页面结构，使用 HTML 标签逐步构建页面的框架。
网页设计与制作实验报告
实验报告学号: 0701********专业: 计算机科学与技术班级：07计科2班姓名: 张兆民题目: 网页设计与制作指导教师:郭胜设计时间：2010年12月14日目录一课程设计目的 ............................................二、课程设计题目 (2)三、课程设计要求 (2)四、需求分析 (2)五、源代码及截图 (2)六、参考资料 (25)七、设计总结 (25)实验内容一、课程设计的目的本课程的设计目的是通过实践使同学们对技术有个全面的了解，通过这次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例，理解并初步掌握运用Visual Studio 2005 开发工具进行网页开发的方法；了解网页设计制作过程。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
二、课程设计题目网页设计与制作——登陆系统三、课程设计要求根据所选择的主题，设计相关的网页，要求用技术做网页。
要求连数据库，实现基本功能。
四、需求分析选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。
首先，做好需求调研。
调研的主要方式是在图书馆里翻阅相关书籍。
调研内容如下：1、网站当前以及日后可能出现的功能需求。
2、对网站的性能（如访问速度）的要求和可靠性的要求。
3、确定网站维护的要求。
4、网站的实际运行环境。
5、网站页面总体风格以及美工效果。
6、主页面和次级页面数量等。
7、内容管理及录入任务的分配。
8、项目完成时间及进度。
然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。
五、网站源代码（1）登录界面：前台设计代码：Login.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="login.aspx.cs"Inherits="login" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[function TABLE1_onclick() {}// ]]></script></head><body><form id="form1"runat="server"><div><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-right: #ff0099 thick double; border-top: #ff0099 thick double; border-left: #ff0099 thick double; border-bottom: #ff0099 thick double"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td colspan="3"style="background-image: url(img/0.jpg); background-color: #ffff66; height: 71px;"><br/><span style="color: #0000ff">设计者：张兆民<br/><strong><span style="font-size: 16pt; color: #ff0000;"></span></strong></span><br/><br/><br/><br/><br/> <asp:Label ID="Label1"runat="server"Font-Bold="True" Font-Size="X-Large"ForeColor="Red"Text="输入密码和用户名"></asp:Label> <br/></td></tr><tr><td colspan="3"style="height: 23px"><span style="color: #ffff00"><span style="color: #0000ff"> 用户登陆</span></span> <asp:TextBox ID="txtUser"runat="server"Width="143px"></asp:TextBox></td></tr><tr><td colspan="3"><span style="color: #0000cc">用户密码</span> <asp:TextBox ID="txtPass"runat="server"TextMode="Password"Width="129px"></asp:TextBox></td></tr><tr><td colspan="3"> .<asp:Button ID="Button1"runat="server"Text="注册"OnClick="Button1_Click"ForeColor="Red"/> <asp:Button ID="Button2"runat="server"OnClick="Button2_Click"Text="登陆"ForeColor="Red"/> <asp:Button ID="Button3"runat="server"Text="重置"OnClick="Button3_Click"ForeColor="Red"/></td> </tr><tr><td colspan="3"style="text-align: center; height: 99px; background-color: #ccffff;"><strong><span style="font-size: 32pt; color: #ff0000">员工管理系统</span></strong></td></tr></table><br/><br/></div></div></form></body></html>后台功能代码：Login.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class login : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button2_Click(object sender, EventArgs e){string username = txtUser.Text.Trim();string pwd = txtPass.Text.Trim();if (username == "张兆民" && pwd == "123456")Response.Redirect("succeed.aspx?uid="+txtUser.Text+"&txtPass="+txtPass.Text+"&txtUser="+txtU ser.Text);else{Label1.Text = "用户名或者密码有误！请重新输入！";}}protected void Button3_Click(object sender, EventArgs e){txtUser.Text = "";txtPass.Text = "";}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("Default.aspx");}}截图：（2）新用户注册表界面：前台设计代码：Default.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[// ]]></script></head><body style="background-color: #ffffff"><form id="form1"runat="server"><div><div style="text-align: center; border-top-style: double; border-right-style: double; border-left-style: double; border-bottom-style: double;"><br/><br/><br/><br/><table style="border-left-color: #66ff66; border-bottom-color: #66ff66;border-top-style: solid; border-top-color: #66ff66; border-right-style: solid;border-left-style: solid; border-right-color: #66ff66; border-bottom-style: solid; text-align: left;"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td style="width: 191px"></td><td style="width: 468px; text-align: justify;"> <span style="color: #ff00ff"> <br/><strong> 新用户注册表</strong> <br/></span></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 28px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><asp:Label ID="Label2"runat="server"Text="请输入您的用户名"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 64px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *用户名 </strong><asp:TextBox ID="userName"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox><br/></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; height: 22px; border-right-color: #ffccff; border-bottom-style: double; text-align: left;"colspan="2"><asp:Label ID="Label3"runat="server"Text="请填写安全密码"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 61px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"><br/> *登陆密码 </strong><asp:TextBox ID="Pwd"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066;border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"TextMode="Password"></asp:TextBox></td></tr><tr><td colspan="2"style="height: 22px; text-align: justify"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *性别</strong> <asp:RadioButton ID="male"runat="server"Checked="True"GroupName="male"Text="男"/> <label for=male></label> <asp:RadioButton ID="female"runat="server"GroupName="male"Text="女"/></td></tr><tr><td style="text-align: justify; height: 26px;"colspan="2"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *真实姓名 </strong><asp:TextBox ID="RealName"runat="server"style="border-left-color:#ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; text-align: center; border-right-color: #ffccff; border-bottom-style: double;"colspan="2"rowspan="3"> <br/> 留言板 <br/><br/><asp:TextBox ID="TextBox1"runat="server"Height="80px"Width="250px"></asp:TextBox><br/><br/><asp:CheckBox ID="agree"runat="server"Text="我已经看过并同意（服务条款）"/><br/><br/> <asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="提交"/></td></tr><tr></tr><tr></tr><tr><td colspan="2"style="background-color: transparent"><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/></td></tr><tr><td style="width: 191px"></td><td style="width: 468px"></td></tr></table></div></div></form></body></html>后台功能代码：Default.aspx.csusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class_Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void male_CheckedChanged(object sender, EventArgs e) {}protected void Button1_Click(object sender, EventArgs e){string sex = "";if (female.Checked){sex = "女";}else{sex = "男";}if (agree.Checked){Response.Redirect("shopperson_Info.aspx?uid="+ userName.Text + "&pwd="+ Pwd.Text + "&sex=" + sex + "&realname=" + RealName.Text);}else{Response.Write("<script language='javascript'>alert('由于您不同意我们的《服务条款》注册失败！'</script>)");}}}截图：（3）注册成功界面：前台设计代码：ShopPerson_Info.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="ShopPerson_Info.aspx.cs"Inherits="ShopPerson_Info" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><table style="border-left-color: #ff0066; border-bottom-color: #ff0066;border-top-style: double; border-top-color: #ff0066; border-right-style: double;border-left-style: double; border-right-color: #ff0066; border-bottom-style: double"> <tr><td colspan="2"style="text-align: left"><br/><br/><span style="font-size: 24pt"> </span><strong><span style="border-left-color: #ffccff; border-bottom-color:#ffccff; color: #ff0066;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid"><span style="font-size: 24pt; border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff;border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid">恭喜您注册成功！</span><br/><br/><br/><br/></span></strong></td></tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *用户名<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double; border-left-style: double; border-right-color: #ffccff; border-bottom-style: double;"><asp:Label ID="Label1"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><br/><strong> *登陆密码<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label2"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *性 别<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label3"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; height: 21px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *真实姓名<br/></strong></td><td style="width: 374px; height: 21px; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff;border-right-style: double; border-left-style: double; border-right-color: #ffccff;border-bottom-style: double;"><asp:Label ID="Label4"runat="server"Text="Label"></asp:Label></td> </tr><tr><td colspan="2"rowspan="2"style="border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; text-align: center; border-right-color: #ffccff; border-bottom-style: solid"><br/><br/><asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="登陆"/> <br/></td></tr><tr></tr></table></div></form></body></html>后台功能代码：ShopPerson_Info.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class ShopPerson_Info : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('注册成功！')</script>");try{Label1.Text = Request.QueryString["uid"].ToString();Label2.Text = Request.QueryString["pwd"].ToString();Label3.Text = Request.QueryString["sex"].ToString();Label4.Text = Request.QueryString["realname"].ToString();}catch{}}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("login.aspx");}}截图：（4）显示姓名界面：前台设计代码：Sousou.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Sousou.aspx.cs"Inherits="Sousou" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-left-color: lime;border-bottom-color: lime; border-top-style: double; border-top-color: lime;border-right-style: double; border-left-style: double; text-align: center; border-right-color: lime;border-bottom-style: double"><tr><td style="width: 283px; height: 139px"></td><td style="width: 265px; height: 139px"><br/><br/><br/><br/><br/> <br/></td><td style="width: 210px; height: 139px"></td></tr><tr><td colspan="3"style="height: 51px; text-align: center">尊敬的用户！恭喜您！登陆成功！</td></tr><tr><td colspan="3"style="height: 18px; text-align: center"></td></tr><tr><td colspan="3"style="height: 26px; text-align: center">姓名：<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox> <asp:Button ID="Search_button"runat="server"Text="搜索"/></td> </tr><tr><td colspan="3"style="height: 99px; text-align: center"> <asp:GridView ID="GridView1"runat="server" AutoGenerateColumns="False"DataSourceID="AccessDataSource2"><Columns><asp:BoundField DataField="name"HeaderText="姓名"SortExpression="name"/></Columns></asp:GridView><asp:AccessDataSource ID="AccessDataSource2"runat="server"DataFile="~/App_Data/ProductShow.mdb"SelectCommand="SELECT [name] FROM [name] ORDER BY [name], [编号] DESC, [编号]"></asp:AccessDataSource></td></tr></table></div></form></body></html>后台功能代码：Sousou.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class Sousou : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}private void DataBindgv(){DBAccess db = new DBAccess();DataSet ds = db.Getds();}protected void Search_button_Click(object sender, EventArgs e){Response.Redirect("Sousou.aspx");string strField = TextBox1.Text.ToString().Trim();string StrSql = "select * from Product_img where name='" + strField + "'";DBAccess db = new DBAccess();DataSet ds = db.Gets(StrSql);}}截图：（5）登录成功界面前台设计代码：Succeed.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="succeed.aspx.cs"Inherits="succeed"%> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作课程实验报告（可编辑优质文档）(可以直接使用，可编辑完整版资料，欢迎下载）桂林航天工业高等专科学校电子工程系网页设计与制作课程实验报告2021-----2021学年第一学期专业：通信技术班级：2021041204 学号：39 姓名：高秋妹指导教师: 李云第一章网站概述1.1 需求分析：在21世纪的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览网站，已经成为越来越多网民的选择，根据调查，中国目前有3亿多网民，其中50%的网民有过在网络上浏览网页获取社会信息的经历。
展望未来，机会无限。
在这样的背景之下，设计一个以文字和图片为主的系部网站，主要满足一下需求：充分发挥系二级网站的对外宣传效果，体现自身专业优势、名师风采、学生工作等内容，全面展示我校整体形象和办学特色。
1.2 功能概述：这次实现的是系部网站设计，主要内容有：系部网站首页的实现，和首页相关的内容，即通知公告，最新动态，友情链接，专业设置，师资建设，学生工作及文表下载等。
1.3网站风格：网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。
不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。
在本网站里主要用到的颜色有：淡蓝色和白色，网站看上去给人的第一印象就是温馨、充满梦想的网站。
1.4 可行性分析：网站设计与制作是专业课之一，随着网络的开放、电脑的普及率、以及计算机技术的提高，同时网上资源丰富多彩，加上已有一定的技术基础和优秀的老师作相关的指导，建设该班级网站有一定的可行性。
第二章网站制作2.1网页结构：2.2主要功能：●专业设置：介绍专业特色，发展前景，开设课程。
●师资建设：师资队伍人数、师资力量概况(职称、学历和年龄结构，教师培训计划及实施情况)、学术带头人介绍（包括研究方向、论文论著等）或个人主页链接、其他个人主页链接；教师风采，校级名师需有个人照片，个人简介，研究方向、团队以及研究项目，发表过的论文等，其他教师也需要有个人简介。
●学生工作：学生日常教育与管理、学生社团活动、班级建设及主页链接、学生社会实践、特色学生刊物；●文表下载：相关文表格式。
●通知公告：相关通知。
●最新动态：部门对内（学院、系、部）和对外（社会）的信息（新闻、通知、公告）。
2.3 制作工具：Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。
Flash是由macromedia公司推出的交互式矢量图和Web 动画的标准。
网页设计者使用Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
Dreamweavr8 是一款专业的HTML编辑器，用于对WEB 页和WEB应用程序进行设计，编码和开发。
无论直接编写HTML代码还是在可视图化编辑环境中工作，dreamweaver8 都会提供很多快捷的工具。
Dreamweaver8 是可以完全自定义的，可以使用它创建自己的对象和命令，修改快捷键，也可以编写JA V AScript 代码，从而用自己创建的新行为，属性检查器和站点报告来扩展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.1 Logo：3.2导航栏：3.3主要内容：3.4主页：3.5专业设置:3.6师资建设：3.7学生工作：3.8文表下载：第四章源代码（主页）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " :// /TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" :// /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=" :// /"> </a><a href=" :// /" 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=" :// /down/index.html" target="_blank">中国PCB技术网</a></td></tr><tr><td height="34"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :// /down/index.html" target="_blank">中国PCB技术网</a></td></tr><tr><td height="46"><img src="image/dot2.gif" width="8" height="7" /> <a href=" :// /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在网页设计中的用法；这次网页制作让我更深刻的学会了网页制作的很多方法，由于做网页要收集素材，从中让我收集到了很多课外知识，也让我在另一方面学会了如何欣赏网页，懂得了网页制作的流程，这让我在以后的工作中有更好的发展空间。