《动态网站的设计与实现综合性设计性实验报告.doc》由会员分享，可在线阅读，更多相关《动态网站的设计与实现综合性设计性实验报告.doc（21页珍藏版）》请在三一办公上搜索。
1、本科学生设计性实验报告实验项目名称动态网站的设计与实现 学生实验报告学生姓名学号0088225实验项目动态网站的设计与实现必修 选修 演示性实验 验证性实验 操作性实验 设计性实验实验地点荟芦楼110实验仪器台号32 指导教师实验日期及节次2010-12-17至2010-12-23 8、9、A节一、实验综述（1）实验目的：通过一个个人网站或商业网站的制作，使学生对之前学到的HTML、Dreamweaver、PhotoShop、Fireworks、Flash等知识进一步巩固加强；掌握网站的设计、开发、架设等知识。（2）实验要求：以小组的方式完成整个网站的设计，四人一组。小组需讨论网站的选题、内容
2、以及页面的规划，然后给每个成员分配相应的工作。每个小组成员以个人独立完成的方式其工作。网站应不少于10个页面，两个以上的Flash动画，页面中要清晰的写出网页的制作人。（3）实验报告中应体现小组对网站设计的思路以及规划方案；另外实验报告中也要详细介绍小组成员每个人的工作。提交实验报告时要附带完成的网站的打包文件。2、实验仪器、设备或软件计算机， Dreamweaver，Photoshop，Fireworks，Flash，IIS等软件。二、 实验过程（实验步骤、记录、数据、分析）Step1.设计网站主题和名称。这次设计的网站是狮子之家的网站，主题是希望我们的友谊地久天长，希望大家都能实现自己的梦
3、想走向幸福之路。因为我们四个来自不同的学校，不同的地方，巧合的相遇，巧合的在一个班，巧合的在一个寝室，最最巧合的是我们都是狮子座，为了纪念我们之间的友情，所以做了设定了这个主题。网站板块设计以及菜单目录的设计围绕于此，主要是生活中由我们四个构成的这个集体-狮子之家。，从我们的主页-我们的印记-留言星星河-leos万花筒。如图所示：Step2.设计网站的Logo，因为是以友谊梦想为主题，所以选择的是简单的英文表示，设置了下字体。简单明了，更容易让浏览者记住。如图所示：Step3.设计网站的框架。上下的结构。菜单+对应的内容。如图所示：狮子之家，梦想乐园 我们的首页 我们的印记 留言板 LEOS万
4、花筒 陈贝贝 罗玉龙 尚丽娟 丁雪辉Step4.确定网站的主体颜色。因为是友谊所以主要页面的主色基调是白色，表示纯洁，友谊至上。因为我们在梦想的路上，所以主页面以蓝色为主，Step5.建立站点。Step6.根据目录结构设计与制作狮子之家，梦想乐园的网站的主页网页及其子页面。为了条理化，开始规定了每个人做的页面的图片等元素文件夹名称，如图：主页面index.html,使用了背景音乐，flash,CSS样式以及字幕图片滚动来增加网站的美感与动感。如下图所细节图：使网站更加美观和多元化，使用了一些媒体元素和特效：l 插入了音乐；l 插入flash导航，使用 使用文字特效和图片滚动。利用的滚动文字。利
5、用flash,Css样式，背景音乐等元素，做成的子页面如下：【关于我们】的子页面【留言板】子页面【Leoes万花筒】的子页面狮子之家成员【陈贝贝】子页面1信息简介狮子之家成员【陈贝贝】子页面2印记狮子之家成员【陈贝贝】子页面3日志文章狮子之家成员【陈贝贝】子页面狮子之家成员【陈贝贝】子页面狮子之家成员【陈贝贝】子页面狮子之家成员【罗玉龙】子页面狮子之家成员【罗玉龙】子页面狮子之家成员【罗玉龙】子页面狮子之家成员【尚丽娟】子页面狮子之家成员【丁雪辉】子页面Step7.将页面超链接起来后发布。三、结论1.实验结果服务器与客户端的IIS的Windows系统组件安装Windows XP默认安装时不安装
6、IIS组件，需要手工添加安装。进入控制面板，找到“添加删除程序”，打开后选择“添加删除Windows组件”，在弹出的“Windows组件向导”窗口中，将“Internet信息服务（IIS）”项选中。在该选项前的“”背景色是灰色的，这是因为Windows XP默认并不安装FTP服务组件。再点击右下角的“详细信息”，在弹出的“Internet信息服务（IIS）”窗口中，找到“文件传输协议（FTP）服务”，选中后确定即可。安装完后需要重启。Windows NT2000和Windows XP的安装方法相同。详情如图所示：出现如下图组件安装向导，选择“Intnetnet信息服务（IIS）”，单击“下一步
7、”开始安装，单击“完成”结束。安装IIS后，配置DNS以及WEB站点，发布网站，我们是狮子之家，所以我们取得的域名，效果如下：主页面发布后的效果子页面发布效果，作者陈贝贝，罗玉龙子页面留言板发布效果，作者陈贝贝，尚丽娟子页面万花筒发布效果，作者陈贝贝，丁雪辉子页面成员信息发布效果，作者陈贝贝子页面成员信息发布效果，作者陈贝贝子页面成员信息发布效果，作者罗玉龙子页面成员信息发布效果，作者尚丽娟子页面成员信息发布效果，作者丁雪辉2. 分析与讨论1这应该是个很值得大家注意的问题，也就是说，在全屏状态下浏览网页内容时，一点问题也没有。当我们使用窗口的最小化命令或手动的调整窗口的大小时，问题就慢慢出现了
8、。网页内容会把当前窗口作为显示范围，依次下挫。举个例子，和在记事本中有“自动换行”和“没换行”的差别是完全一样的。 解决这个问题，我们必须从网页的布局说起，一般情况下，网页内容的定位大多是通过表格来实现的。因此问题的“毛病”也就出在表格上。 你可能已经注意到了，在表格的高宽设定选择上提供了两种不同的类型，百分比和像素。其中百分比的使用将会产生前面说到的那个毛病，将其全部更正为Pixels单位的实际大小就可以了。2在微软的网页工具-Frontpage中，有关于背景音乐的设置功能，那么DW显然没有作到这点，因此要使用的话，只能在源代码中手动添加了。在使用前，注意一点，使用背景音乐一定要注意网页文件
9、的大小，不能顾此失彼。代码如下：其中src指定音乐文件的位置，autostart为音乐文件上传后的动作，true表示自动开始播放，false不播放（默认值）。3.整个页面的设计最主要的莫过于主题的确定。以及页面结构的构思。在这方面，也只能说把自己的兴趣带到作业中来，和往常的作业一样，主题是自己喜欢的风格以及主题。4.在整个dreamweaver设计中，最大的问题就是层上面。 摆放的时候，要时刻要求自己精确，不然很容易无法显现效果。压边的时候最需要重视。 以及行为的设定，要警惕。不要混淆。一开始的时候，弄反了不少的行为，使得页面显示的不是预想的效果。重新做了很多次，才算圆满完成。5.在外加自己需
10、要的效果时，有的是难以达到的。譬如插入的flash底色透明和插入音乐；不得不说，在这上面，没有frontpage来得简单。只有自己在代码栏中键入相应的代码。方可显示想要的结果。【1】使之透明：wmode=transparent【2】背景音乐：6.在使用框架集的时候。可以在网页的属性，点击框架，设置其属性，比如框架的透明或者框架的颜色。在使用表格的时候一定要把border的属性改成0，使表格变成透明。在放入音乐和图片的时候一定选好路径，不然在制作好的网页在别人的电脑上flash，音乐后者图片不能够播放，可能是路径的原因。在试验的时候电脑上的分辨率是1280*720，大多数电脑是1024的分辨率，可能在浏览器上会有一定的偏差。7.实验开始前就要先建立一个根文件夹，在实验的过程中把主页存放在自己建的文件夹里面，这样才能使实验条理化，不至于在实验后找不到自己的主页。在实验过程中会出现一些选项，计算机一般会有一些默认的选择，最后不要去更改，如果更改的话要充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真，实验前先熟悉好操作软件是做好该实验的关键。这次大家分工合作一起讨论主题确定主要色调，一起不仅仅运用了学习到的知识，更体会到团队合作的意义。感谢老师给予这次机会，让我们更好的成长。四、指导教师评语及成绩：成绩： 指导教师签名： 批阅日期：
