当前位置：文档之家 › 14计算机2班网页制作实验报告

14计算机2班网页制作实验报告

  • 格式：doc
  • 大小：16.50 KB
  • 文档页数：3

2015-2016学年第2学期
《网页设计与制作》作品设计报告

作品名称：吉米网
学号：1407010231
姓名：孙慧月
班级：14计算机2班

2016年 5 月 10 日
一、网站的设计思路
随着网络的不断深入，大家逐渐将目光投放到互联网上。而前些日子播出的
《全员加速中》是广大青年为之喜爱的大型综艺节目。该网站正是通过看娱乐节
目《全员加速中》而有的灵感，本网站主要提供的是《全员加速中》的一些相关
资讯。
二、详细设计实现过程
1. 首页设计
页面一级页面功能主要分为：（1）网站首页 （2）登录用户 （3）节目列
表 （4）节目回放 （5）嘉宾信息 （6）最新消息等实现不同的跳转。该页面主
要分为三个基本框架。整个框架通过设置一个CSS类以及类中包含三个ID 标签
来展示整个页面。第一个框架是展示的是吉米网站的LOGO；第二个框架是向大
家展示的《全员加速中》的几个成员的图片；第三个框架中是展示该网站主要内
容。设置一个网站首先要有一种让其他浏览者耳目一新的感觉，这样的一个网页
才能脱颖而出。本着这样一个原则，在进行设计的时候，添加了背景图片。最开
始之初，我做的网页是在页面的最左边，想要让它居中，可是却总是不能如意。
于是在查阅了相关资料之后，终于解决了这个问题。
2. 二级页面设计
二级页面我一共做了5个，其中包括登录页面、节目列表页面、节目回放
页面、嘉宾信息页面、最新消息页面。
登录页面：设计这个页面的时候先设计了一个大概的框架——用户名、密
码、验证码。当不输入用户名或者密码的时候，会有相关的提示信息来提示用户，
在进行设计的时候，为了突出一下我的内容，我又在此加入了有关《全员加速中》
的几个成员的图片和简介。通过JavaScript脚本特效，实现了照片的变换。“刷
新”以及相关的登录实现因为水平有限，并没有得以实现，也是该页面的瑕疵之
处。在该页面最后结尾之余，考虑到用户如果不想登陆想要返回主页面的情况，
便设置了一个返回主页面的链接。
节目列表页面：该页面主要向用户展示了相关节目信息——播出时间、游
戏地点、剧情改编、加速队员等相关内容。在这些内容里，考虑到一些人可能对
一些专有名词不理解的问题，故设置了一些专有名词的链接。在介绍节目列表时，
节目有很多，占的篇幅过于长，因此就写了一期节目内容。因为是在展示节目列
表，所以插入了几个图片，来增加用户的兴趣。
节目回放页面：该页面主要是一些往期的播放内容，陈列出来的列表可以
让用户更加清晰的查阅，用户通过链接可以方便快捷的查看某一节目。
嘉宾信息页面：主要是介绍参与《全员加速中》的真人秀节目嘉宾，并且
可以清除的查阅各个嘉宾参与的期数。而且通过设置链接的方式可以让用户更加
了解各个嘉宾的相关信息。
最新消息页面：主要是向用户展示最新资讯，通过一个滚动的文字条，来
使得此页面更加形象，与此同时，增加了相关的图片和介绍，来提高用户的浓厚
兴趣。
三、
心得体会

通过这次的学习，让我学会了怎么制作网页，掌握了CSS规则以及各种
技巧的使用，知道了怎么去设计一个好的页面。虽然开始之初，对于要设计的网
页不知所措，但是重新温习老师上课的内容以及实验内容之后，自己心里也有了
一定的想法。在设计过程中，会考虑到一些细小的问题，比如：想要返回主页面，
要在二级页面里添加一个主页面的链接；比如插入一些图片可能大大的增加了用
户的兴趣等。有时候会因为一个设置出错不知该如何让进行，在查阅大量的相关
资料之后，这些问题迎刃而解。

合集下载

web实验报告

web实验报告

本科实验报告课程名称：Web程序设计实验项目：HTML语言实验地点：逸夫楼303专业班级：学号：学生姓名：指导教师：2013年12月13日一、实验目的和要求1．掌握常用的HTML语言标记；2．利用文本编辑器建立HTML文档，制作简单网页。

二、实验内容和原理1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。

（请仔细阅读下列程序语句，理解每条语句的作用）源程序清单如下：<html><head><title>Example</title></head><body bgcolor="#00DDFF"><h1><B><I><FONT COLOR="#FF00FF"><MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome toyou</MARQUEE></FONT></I></B></h1><hr><h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2><EM>Welcome to the world of HTML</EM><p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p><p>Following is three chapters<ul><li>This is the chapter one</li><li><A HREF="#item">This is the chapter two</A></li><li>This is the chapter three</li></ul></p><hr><p><A NAME="item">Following is items of the chapter two</A> </p><table border=2 bgcolor=gray width="40%"><tr><th>item</th><th>content</th></tr><tr><td>item 1</td><td>font</td></tr><tr><td>item 2</td><td>table</td></tr><tr><td>item 3</td><td>form</td></tr></table><hr><p>1<p>2<p>3<p>4<p>5<p>6<p>7<p><B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B> </p></body></html>2．编写一个能输出如图所示界面的HTML文件。

网页设计与制作实验报告

网页设计与制作实验报告

其他子页面的制作和主页面的大体相同，在‘introduce’页面中，我使用了层动画效果，使用动画帧控制动画重复播放。在页面的下面是一个滚动字幕，用层进行定位，添加背景后再加上一个一行一列的表格进行文字定位。再用marquee标签控制文字在固定区域内上下滚动。在“我的相册”页面里，我是用了图片交换效果，插入四X照片，可以按下按钮自由翻页，自由浏览，下部分是一段美丽文字欣赏，用相同的色彩布局，明快而又有紧促感，而且使整个页面色调平衡。第三个子页面是“我的班级”页面，也使用相同的背景，相同的布局，但是由于时间仓促，班级信息没有完全收集到，使用弹出信息框说明“网页信息正在搜集中，请大家继续关注我的！”最后一个页面是“给我留言”页面，同样的用层和表格进行布局，使用表单同用户进行信息交流，网页的左下面是一个flash动态时钟，显示当前时间，给浏览者提供方便。这就是我的网页设计过程。
最后还要制作各个页面的，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。
10、上传测试
网页制作完毕以后，要进行测试，在浏览器上运行自己的，反复测试，以发现设计中的缺陷。
实验结果及理论分析：
非常感谢老师给了我这次，独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。
（2）窗口组成的认识
网页设计与制作实验报告

网页设计与制作实验报告

网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。

素材准备：准备制作网页所需的文字素材、图像素材。

实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。

实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。

3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。

4.切换代码模式下，输入代码。

5.保存文件，预览文件效果。

实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。

实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。

页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。

素材准备：准备好从网上下载的安装程序。

实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。

2.安装完成后输入注册号。

3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。

网页系统设计实验报告(3篇)

网页系统设计实验报告(3篇)

第1篇一、实验目的1. 理解网页系统设计的基本概念和流程。

2. 掌握网页系统的规划、设计和实现方法。

3. 提高网页设计与制作能力，熟悉相关软件的使用。

二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 开发工具：Adobe Dreamweaver CC4. 编程语言：HTML、CSS、JavaScript三、实验内容1. 网页系统规划2. 网页系统设计3. 网页系统实现4. 网页系统测试与优化四、实验步骤1. 网页系统规划（1）明确系统功能：根据用户需求，确定网页系统的功能模块，如首页、产品展示、新闻资讯、联系方式等。

（2）确定页面布局：根据功能模块，规划页面布局，包括头部、导航栏、主体内容、底部等。

（3）设计导航结构：根据页面布局，设计导航结构，使用户能够方便地浏览各个页面。

2. 网页系统设计（1）设计页面风格：根据网站定位和用户需求，设计页面风格，包括颜色、字体、图片等。

（2）设计界面元素：根据页面风格，设计界面元素，如按钮、图标、表格等。

（3）设计交互效果：使用JavaScript等脚本语言，实现页面元素的交互效果，如滚动动画、鼠标悬停等。

3. 网页系统实现（1）编写HTML代码：使用HTML标签，构建网页结构。

（2）编写CSS代码：使用CSS样式，美化网页界面。

（3）编写JavaScript代码：使用JavaScript脚本，实现页面交互效果。

4. 网页系统测试与优化（1）功能测试：测试各个功能模块是否正常工作。

（2）性能测试：测试网页加载速度和响应时间。

（3）兼容性测试：测试网页在不同浏览器和设备上的显示效果。

（4）优化：根据测试结果，对网页进行优化，提高用户体验。

五、实验结果与分析1. 网页系统规划根据用户需求，本网页系统规划了以下功能模块：- 首页：展示网站简介、最新动态、热门产品等。

- 产品展示：详细介绍各个产品，包括图片、文字、价格等。

- 新闻资讯：发布公司新闻、行业动态等。