推荐: LOGO设计微信开发包装设计游戏开发接口开发手机网站开发VI设计文字设计Web前端开发网页设计客厅装修情人节表白Oracle数据库网站建设个人网站建设微信客户端

热门搜索: LOGO设计微信开发VI设计网站建设网站推广

当前位置: 威客百科 > 静态网页 > 静态网页案例
免费发布需求,接收报价与方案

静态网页案例

什么是静态网页?

相关提示: 【静态网页制作】【什么是静态网页】【如何制作静态网页】

    静态网页之所以受到用户的喜欢,是因为用户只需将制定的URL请求通过浏览器发送,Web服务器收到请求后就能快速的定位到指定的文件,或根据程序从数据库中快速找到相应的数据返回到浏览器,经过浏览器的请求处理,用户就可以看到一个完整的文件,这个过程快速简单,这就是静态网页的优点。
    下面我们就来看看制作一个首页的案例,这个静态页面整体是采用div+css来布局的,“产品展示”“最新动态”、“更多推荐”、“合作伙伴”这几个区域是采用表格布局,设置页面图层(layout),图层是用来对整个网页的一些操作,比如如居中、左对齐等等;网页顶部菜单栏用来实现向其他模块的导航功能;网页中除去顶部导航菜单栏的其余部分,采用一个图层包起来(other),该部分划分为网页的页眉、内容和页脚,其中页眉用于表现公司的logo图标及一段声明性的文字,这个网页的内容区域是网页的主体内容所在,页脚用来显示网站版权信息。
    在制作这个静态网页时需要注意的是,在div+css的布局中,大量的采用了“层套层”的方式来布局。contentTopLeft和contentTopRight被contentTop所包含。在应用中如果需要用到两个或多个图层的最好在这些图层外围再套上一个层,这样做的好处就是将来维护两个图层都是比较稳定的方式。
    这个网页中需要实现的要求,网页顶部导航菜单栏的不用限制它实现方式,例如QQ邮箱这个栏目,点击后便可链接到mail.html,用于登录QQ邮箱。网页页眉的导航菜单部分,鼠标移动到菜单项上方需要做到的功能是字体放大。广告区的功能实现,可以采用JS实现多幅广告图片轮换。
    更多推荐、产品展示区域,主体是采用表格来布局的,推荐标题及标题下的横线可以采用div层来布局。 网页主体的表格布局中,不同产品的分隔划线段可以通过CSS样式来实现。
    网页中样式选择器“#contentBottomLeft table#products td”是一个“E F”型选择器,表示id为contentBottomLeft的标签下如有<table>标签且其id为products,则其中的<td>应用上述样式。最新动态区以及合作伙伴区,主体的表格布局中,可以采用<ul>无序列表标签实现列表数据。标题及标题下的横线可以采用层布局实现。