ros路由器
ps图像处理软件
dw网页编辑软件
看一下效果图。这是一套自适应的网页界面
了解一下网页架构：网页内容包括用户登录选项（尊贵用户登录，试用用户登录，关于制作着的说明），站标，广告区。
建立所用图片文件夹site，包含下面几个文件
打开dreamever编辑首页login.html:
“wifi广告营销服务”
洞察敏锐商机的您是否发现，在大街上,交通工具,餐厅,户外场所,旅游和行程中，越来越多人使用智能手机上网，您是否也意识到，这种趋势和背景下，移动互联网拥有广阔的市场和优越的商机。 在人们享受传统互联网带来的极大的生活方便的同时，习惯和趋势也在发生极大变化。智能手机已经成为市民最为主要的随身携带品之一，而打开手机的WIFI功能，进行无线网络搜索，也已成为手机控的日常习惯性动作之一。 为顾客提供免费上网服务在国外已蔚然成风，免费wifi热点成为店面的形象招牌和拉近消费者并促销购买的重要助力。 当您的顾客光临并使用店铺内提供的 Wi-Fi 服务，您可曾考虑过可以通过 Wi-Fi 网络，宣传一下您店铺的信息，最起码让顾客了解到正在使用的 Wi-Fi 网络是谁提供的吧。 WiFi广告营销就是在顾客使用免费wifi的时候推送店内的促销信息，一般的展现方式是用户使用商家提供的免费上网的同时，会在入口页面看到商家的广告促销信息。 因为消费者希望免费使用WiFi，所以他们乐意接受一定的广告。 .
common.min.js文件代码：function $(objStr){return document.getElementByIdx_x_x(objStr);}window.onload = function(){ //分析cookie值，显示上次的登陆信息 var userNameValue = getCookieValue('userName'); $('userName').value = userNameValue; var passwordValue = getCookieValue('password'); $('password').value = passwordValue; //写入点击事件 $('submit').onclick = function() { var userNameValue = $('userName').value; var passwordValue = $('password').value; //服务器验证（模拟） var isAdmin = userNameValue == 'admin' && passwordValue =='123456'; var isUserA = userNameValue == 'userA' && passwordValue =='userA'; var isMatched = isAdmin || isUserA; if(isMatched){ if( $('saveCookie').checked){ setCookie('userName',$('userName').value,24,'/'); setCookie('password',$('password').value,24,'/'); } alert('登陆成功,欢迎你,' + userNameValue + '!'); self.location.replace('welcome.html'); } else alert('用户名或密码错误，请重新输入！'); }}
cookie.min.js代码如下：//新建cookie。//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。function setCookie(name,value,hours,path){ var name = escape(name); var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + hours*3600000); path = path == '' ? '' : ';path=' + path; _expires = (typeof hours) == 'string' ? '' : ';expires=' + expires.toUTCString(); document.cookie = name + '=' + value + _expires + path;}//获取cookie值function getCookieValue(name){ var name = escape(name); //读cookie属性，这将返回文档的所有cookie var allcookies = document.cookie; //查找名为name的cookie的开始位置 name += '='; var pos = allcookies.indexOf(name); //如果找到了具有该名字的cookie，那么提取并使用它的值 if (pos != -1){ //如果pos值为-1则说明搜索'version='失败 var start = pos + name.length; //cookie值开始的位置 var end = allcookies.indexOf(';',start); //从cookie值开始的位置起搜索第一个';'的位置,即cookie值结尾的位置 if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie var value = allcookies.substring(start,end); //提取cookie的值 return (value); //对它解码 } else return ''; //搜索失败，返回空字符串}//删除cookiefunction deleteCookie(name,path){ var name = escape(name); var expires = new Date(0); path = path == '' ? '' : ';path=' + path; document.cookie = name + '='+ ';expires=' + expires.toUTCString() + path;}
style.css代码如下;/** page structure **/#w { display: block; width: 750px; margin: 0 auto; padding-top: 30px;}#content { display: block; width: 100%; background: #fff; padding: 25px 20px; padding-bottom: 35px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;}.flatbtn { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline: 0; border: 0; color: #f3faef; text-decoration: none; background-color: #6bb642; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); font-size: 1.2em; font-weight: bold; padding: 12px 22px 12px 22px; line-height: normal; text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);}.flatbtn:hover { color: #fff; background-color: #73c437;}.flatbtn:active { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);}/** custom login button **/.flatbtn-blu { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline: 0; border: 0; color: #edf4f9; text-decoration: none; background-color: #4f94cf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); font-size: 1.3em; font-weight: bold; padding: 12px 26px 12px 26px; line-height: normal; text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}.flatbtn-blu:hover { color: #fff; background-color: #519dde;}.flatbtn-blu:active { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);}/** modal window styles **/#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none;}#loginmodal { width: 300px; padding: 15px 20px; background: #f3f6fa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);}#loginform { /* no default styles */ }#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }.txtfield { display: block; width: 100%; padding: 6px 5px; margin-bottom: 15px; font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif; color: #7988a3; font-size: 1.4em; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8); background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff)); background-image: -webkit-linear-gradient(top, #edf3f9, #fff); background-image: -moz-linear-gradient(top, #edf3f9, #fff); background-image: -ms-linear-gradient(top, #edf3f9, #fff); background-image: -o-linear-gradient(top, #edf3f9, #fff); background-image: linear-gradient(top, #edf3f9, #fff); border: 1px solid; border-color: #abbce8 #c3cae0 #b9c8ef; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; transition: all 0.25s linear;}.txtfield:focus { outline: none; color: #525864; border-color: #84c0ee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;}
好了 最后来看一下文档结构：
这是我制作的一套模板，具体内容可以根据自己的需要修改。