1、 下载相关的脚步运行库：由于采用JQuery脚本来实现网页的动态效果，因此需要在网上搜索并下载相应的JQuery运动库，下载完成后进行解压缩，将解压后的文件拷贝到网站根目录下js文件夹内。
2、 利用任意一款图像处理软件制作如图所示的界面。同时发了设计方便以网络传输的需要，需将这个大图分割成几个小部分，每个部分的名称如图所示，并将这几张图片放置到网站根目录下的Images文件夹中。
3、创建主页内容：新建一网页文件，命名为"index.html",利用文本编辑器打开，由于打算利用JQuery实现网敌颉缪莽页的脚本，因此需要引入对JQuery运行库的访问。“index.html”文件的重要作用是给用户呈现最基本的内容展示，包括与用户进行交互的所有信息。在代码部分引入了JS脚步和CSS样式表。其代码与效果如图所示：
4、对网页进入美化：在当前目录CSS文件夹下新建一名称为俨蓥蹋贴"MyStyle.css"的层叠样式表文件，利用该文件实现网页的美化。当然利用CSS进行美化操作的另一目地是实现网敌颉缪莽页的内容与其表现形式的分离，这样就可以使我们专注于网页的美化，实现了更高效的分工合作理念。样式表文件的源码及对应的网页效果如图所示。
5、实现对页面的脚本控制：在当前目录JS文件夹下创建另一文件，并命名为“MyAction.js”。该文件的重要作用是实现窗口的展开和收缩，当用户点击“和我联系吧”按钮时，当前客服窗口就会自动缓慢展开。当窗口展开后，如果用户又点击“Close”按钮，则该窗口将自动被收缩。其源代码如图所示：
6、对网页制作效果进行测试：双击文件"index.html"，就会自动启动浏览器，最终效果如图所示：当用户点击“和我联系吧”按钮时，当前客服窗口就会自动缓慢展开。当窗口展开后，如果用户又点击“Close”按钮，则该窗口将自动被收缩，而在窗口伸缩的过程中，页面上其它的内容位置保持不变。
