怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!

一、工具

1.开发工具:本人使用的STS(下载安装即可),其他工具也可。

2.测试浏览器:火狐浏览器。

二、操作流程

1.在STS新建一个动态网页项目工程:File→New→Project→Web→Web fragment project→Next→Project Name创建工程名字→Finish→打开新创建的项目你会看到如图(1)所示,这时候我们的动态网页项目工程就建好了,下面开始敲代码。

怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!_第1张图片

 

 

 

                   图(1)

2.新建一个html文件:打开WebContent→New→Html.File→FileName(index.html)→Finish,做完后打开我们的index.html文件如图(2)所示,这时候就建好了百度首页的HTML文件。

 怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!_第2张图片

 

 

 

 

 

 

                  图(2)

3.写代码:源码如下,其中代码中用到的图片分别为图(3)(4)(5),将图片粘贴到WebContent目录下即可。





百度一下 你就知道


                                                                                                                                                                  


百度


把百度设置为主页 
关于百度 
AboutBaidu                                                   
百度推广



怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!_第3张图片

   怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!_第4张图片

   

   

              图(3)                                                     图(4)                      图(5)  

4.页面做好了咱们一起来运行一下吧,右键点击index.html文件→OpenWith→System Editor(本人系统默认浏览器为火狐),所以打开就是火狐浏览器,成品见图(6),图(7)为真正的界面,可以对比一下,个人感觉还是比较像的。

怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!_第5张图片

                                                                                           图(6)

怎样做一个简单的百度首页界面?Follow me! lets show it for you!!!_第6张图片

结语:第一次写博客,做的界面不够好,但是希望大家多多支持,不喜勿喷,不过有好的建议,可以多多评论告诉我。

你可能感兴趣的:(实训练习项目,第一篇博客,第一次做界面)