常见页面布局
页面布局常受到硬件条件（显示器的大小和分辨率）和技术的限制，所以归纳起来大致有六种类型： （1）“同”字型布局：特点，页面顶部水平放置主导航栏，其下分为左中右三栏，左边放置内容导航栏、二级导航栏热点内容等；右边放置站点图片链接、动画广告、搜索引擎、友情链接、注册登录信息；中间为主要内容板块。如韩国的“happybean.naver.com” 其优点是：结构清晰直观、平稳均匀’、次分明。缺点：过于呆板僵化、单点乏味。要注重合理色彩搭配。 （2）“匡”字型布局：特点，把同字型布局右边内容移到底部而成，它的结构特点和和优缺点也相同。 （3）“吕”字型布局：特点，把页面分成上下两大块，其中每一块都有同字型结构的特点。如网易新闻网。
（4）左右对称布局：顶部不设页眉和导航栏，左边设置导航，右边放主要内容。特点结构简单适合内容较少的页面。
（5）II字型布局：特点顶部设置站标和导航栏；下边分为左右两部分左窄右宽。左边放置二级导航栏、热点内容链接、登陆栏、友情链接等、右边分为主要内容区。
（6）自由式布局：打破常规的规矩，尽情的挥洒极具创意自由灵活。优点是：漂亮现代轻松明快极具美感给人以美的享受。缺点是；下载速度相对较慢，文字信息量少。 dreamweaverCS3的页面基本组成
HTML的常用标记 1、文档类型标记 ···
（超文本标记语言） 2、文档头部标记
···（头部标记中的内容不在浏览器中
显示）
3、文档标题标记
···,
标记不能包含其他标 记。 </p><p>4、文档主体标记<body>···</body>网页主体位于此标记中此标记必须 </p><p>位于，<html></html>中。 5、段落标记<p>···</p>分段后段与段之间留一空行。 6、换行标记<br>···</br>段与段之间没有空行。 7、章节标题标记<hn>···</hn>其中n为变数，是6 时最小。 </p><p>能生成html的工具：windows记事本、注册表比较工具、网页制作工具、 </p><p>数据字典、iis、asp、java等。 页元素标记： </p><p>(1)字体标记<font size=\对文本的设 </p><p>置如size、color在font内部，还可以设置<i>斜体</i>、<b>粗体</b> (2)图像处理标记<img src=“文件路径” width=\宽度px\“ </p><p>高度px” border=“边框粗细px”> </p><p>（3）超链接标记...实现连接和跳转链 接 表格 </p><p>定义表格 定义表头<th></th> 定义表行 定义单元格 </p><p>下面是定义一个简单的表格 </p><p><p>内容的距离cellpadding=\区块，方框到内容的距离> --行 </p><p> 学号--单元格 姓名 班级 地址 </p><p> </p><p> </p><p> 1 张三 091 渭南 </p><p> 2 李四 010 渭南 </p><p> 3 王五 011 渭南 </p><p></table</p><p>常见图像文件格式点阵图与矢量图 点阵图文件格式 </p><p>Bmp、Gif、Jpeg/jpg、Png、Ico 矢量图文件格式 </p><p>Wmf、Emf、Cdr、Eps </p><p>浏览器支持的格式：gif、jpg/jpeg、而dreamweaver还支持png </p><p> </p><p> </p><p>网页优先选择gif和jpg的原因： </p><p>1、Gif支持透明，交错和动画，最大数目色为256 2、jpg是有损压缩文件压缩效果显著 </p><p>3、png支持gif的全部特性也支持全彩图像但是早期浏览器不支持此格式。 创建连接： 不同的连接 </p><p>内部链接：同一网站文档之间的链接； 外部链接：不同网站文档之间的连接； </p><p>锚记连接：同一网页或不同网页的指定位置连接； 邮件链接：打开填写电子邮件的链接。 文档路径 </p><p>绝对路径：是被连接文档的完整URL包括所使用的传输协议（http：//）创建外部链接必须使用绝对路径。 </p><p>文档相对路径：以当前文件所在位置为起点到被连接文档经由的路径，适用于本地连接，比如：wysj/contents.html，当要把当前文档与相处在相同文件夹中另一文档相连接，或者把同一网站下不同文件夹中的文档连接。 ../表示上一级文件夹。 </p><p>跟相对路径：从根站点文件夹到被连接文档经由的路径。根相对路径一反斜杠开头。它是指定网站内文件连接的最好办法，当要移动一个包含根相对连接文档时，无需对原有连接修改。 创建连接 </p><p>http：//www.gxsjy.com：80/jsjx/index.com。www.gxsjy.com是域名。：80是端口。 链接中的 </p><p>_blank：将被连接文档载入到新的浏览器中； </p><p>_parent：将被连接文档载入到父框架集或包含该链接的窗口中； </p><p>_self：将被连接文档载入到与该链接相同的框架或窗口中（为默认选项）； _top：将被链接文档载入到整个浏览器窗口，并取消所有框架。 创建邮件链接 </p><p>选中文本或图像/在属性检查器里连接框输入：mailto：和电子邮件地址如：mailto:chengqinghuanyu@163.com代码视图为： 创建锚记连接 </p><p>创建锚记连接名区分大小写。 </p><p>创建锚记连接一般是在连接框内输入：#锚记名，当要连接到同一个文件夹的不同文档时应输入：文件名#锚记名。如text.html#maoji 创建空连接 </p><p>就是创建一个没有任何指向的连接。主要用于向页面上的对象、文本添加行为以便当鼠标指针划过该链接时出现交换图像等效果。 </p><p>步骤：选中要连接的文本图像/在属性检查器的连接框内输入“#”、“javascript：；” </p><p>脚本连接：能在不离开当前文件的前提下访问某项信息。步骤：在选中要添加的连接对象后在连接框内输入：javascript：+函数调用如：javascript：close（） 超级链接 </p><p>先制作超级链接文件，再链接即可。 框架和框架集的属性设置 </p><p>使用框架集属性检查器可以设置框架集边框和框架宽度，框架属性会覆盖框架集中设置的属</p><p> </p><p>性。 </p><p>样式的应用 </p><p>CSS是cascading style sheet的简写。翻译为：层叠样式表、级联样式表 样式表的优点： </p><p>（1）同时更新站点的多个页面更快更容易； （2）制作体积小，下载页面快； （3）格式和结构分离。 CSS样式规则的组成： selector（选择器）分为： </p><p>1、类选择器（可以用于任何标签），以.开头名称可以是字母数字下划线和任何对象。 2、标签选择器（重新定义标签外观）、只对该标签起作用 3、ID（伪类、高级）选择器必须以#开始 4、关联选择器 </p><p>property（属性）设置对象的性质color； value（属性值）color的值 层叠样式表的类型： </p><p>外部样式表：一般采用.CSS文件拓展名。可以在记事本编写。不可以包含<style>…</style>标记。通过连接link实现如<link href=”style.css” rel=”stylesheet” type=”text/css”> </p><p>嵌入样式表:服务于当前整个页面，适用于独一无二的样式文档。可以写进<style></style>中 内联样式表：通过style直接套进html里，对某个单独的元素定义样式时运用。内联样式比较灵活，维护网页很麻烦，建议少使用。 链接样式（）四种状态： a：link 默认链接状态 </p><p>a：visited访问过的连接状态 a: hover鼠标经过时的链接状态 a: active鼠标单击时的连接状态 </p><p>说明：设置连接样式时这四种状态都应该进行设置，如果没有设置即当默认状态 样式冲突： </p><p>（1） 标有！important的规则有最高优先级（不常使用）。 （2） 创作者规则优先级高于浏览者规则。 </p><p>（3） 特殊情况下的规则优先于不够特殊的规则selector中的ID属性有最高优先级类属性</p><p>数量越多，优先级越高。假如仍然不能确定则按html中页面元素数量决定优先级。 </p><p>（4） 同一个级别下最后指定的规则有优先权。 网页样式设计 </p><p>方框填充样式用.pad、链接样式如：a.red：link, 滤镜的使用 </p><p>DropShadow（Color=？，OffX=？，OffY=？，Positive=？阴影0给透明像素生成阴影1给非透明像素生成阴影） </p><p>具体如下：.yy{filter:DorpShadow（）} 阴影文字用Showdow实现 </p><p>光晕文字用Glow滤镜实现Strength表示强度 模糊用Blur add是个逻辑值图像取0；文字取1. 遮罩用Mask </p><p>透明图像效果Alpha opacity指起始不透明0-100 </p><p></p>
<br />
<p><script type="text/javascript">s("content-m");</script></p>
</div>
<div class="m-pages"><li><a>共4页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a>1</a></li><li><a href='660901_2.html'>2</a></li><li><a href='660901_3.html'>3</a></li><li><a href='660901_4.html'>4</a></li><li><a href='660901_2.html'>下一页</a></li></div>
<div class="down-word">
<div class="word-ico"></div>
<div class="word-tit">
<span class="docx">网页布局.doc</span>
<span>将本文的Word文档下载到电脑</span>
<span>下载失败或者文档不完整，请联系客服人员解决！ </span>
</div>
<div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div>
</div>
</article>
<div class="art-prenext">
<p>下一篇：<a href="/wenku/660900.html">让错误成为小学教学的亮点</a></p>
</div>
<script type="text/javascript">s("like-m");</script>
<div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div>
<div class="tab-box">
<ul class="main-new on clearfix">
<li><a href="/wenku/296280.html" title="自动化-D类功率放大器-电子设计实习报告">自动化-D类功率放大器-电子设计实习报告</a></li>
<li><a href="/wenku/419574.html" title="概率论与数理统计作业及解答">概率论与数理统计作业及解答</a></li>
<li><a href="/wenku/528471.html" title="《以国学经典为载体,培养小学生良好行为习惯策略与方">《以国学经典为载体,培养小学生良好行为习惯策略与方</a></li>
<li><a href="/wenku/224086.html" title="王文生——应用光学习题集答案">王文生——应用光学习题集答案</a></li>
<li><a href="/wenku/542329.html" title="幼儿园各岗位职责分工">幼儿园各岗位职责分工</a></li>
<li><a href="/wenku/327094.html" title="中国当代民族分裂势力及其危害">中国当代民族分裂势力及其危害</a></li>
<li><a href="/wenku/540502.html" title="机械专业考研复试面试问题">机械专业考研复试面试问题</a></li>
<li><a href="/wenku/516545.html" title="基于欧姆龙PLC的污水处理系统设计">基于欧姆龙PLC的污水处理系统设计</a></li>
<li><a href="/wenku/269683.html" title="c语言程序基础练习题500道(附答案)">c语言程序基础练习题500道(附答案)</a></li>
<li><a href="/wenku/265706.html" title="天津蓟县热电联产供热管线下穿大秦铁路工程施工组织设">天津蓟县热电联产供热管线下穿大秦铁路工程施工组织设</a></li>
<li><a href="/wenku/1135581.html" title="五年级下册综合实践活动教案（上海科技教育出版社）">五年级下册综合实践活动教案（上海科技教育出版社）</a></li>
<li><a href="/wenku/479061.html" title="Unit 1 College culture">Unit 1 College culture</a></li>
<li><a href="/wenku/395955.html" title="智慧民生（智慧医疗、智慧社区、智慧旅游...)平台建设">智慧民生（智慧医疗、智慧社区、智慧旅游...)平台建设</a></li>
<li><a href="/wenku/268335.html" title="工会基础知识试题">工会基础知识试题</a></li>
<li><a href="/wenku/526889.html" title="中级微观经济学题库">中级微观经济学题库</a></li>
</ul>
</div>
<div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div>
<div class="tab-box">
<ul class="main-new on clearfix">
<li><a href="/wenku/175782.html" title="云客服基础考试">云客服基础考试</a></li>
<li><a href="/wenku/158762.html" title="《红星照耀中国--》名著阅读练习题及答案">《红星照耀中国--》名著阅读练习题及答案</a></li>
<li><a href="/wenku/176003.html" title="红星照耀中国练习题及答案">红星照耀中国练习题及答案</a></li>
<li><a href="/wenku/171844.html" title="《红星照耀中国》练习题">《红星照耀中国》练习题</a></li>
<li><a href="/wenku/159778.html" title="人教部编版2024-2025学年八年级语文上册第一次月考试">人教部编版2024-2025学年八年级语文上册第一次月考试</a></li>
<li><a href="/wenku/183326.html" title="化工导论试题">化工导论试题</a></li>
<li><a href="/wenku/182252.html" title="八年级上册名著导读练习——《红星照耀中国》前四篇(">八年级上册名著导读练习——《红星照耀中国》前四篇(</a></li>
<li><a href="/wenku/162180.html" title="人教版语文八(上)名著导读《红星照耀中国》练习题">人教版语文八(上)名著导读《红星照耀中国》练习题</a></li>
<li><a href="/wenku/185266.html" title="2024年江苏省第八届就业创业知识竞赛题库(全759题)">2024年江苏省第八届就业创业知识竞赛题库(全759题)</a></li>
<li><a href="/wenku/168880.html" title="《红星照耀中国》导读及练习题附答案">《红星照耀中国》导读及练习题附答案</a></li>
<li><a href="/wenku/172044.html" title="红星照耀中国习题">红星照耀中国习题</a></li>
<li><a href="/wenku/158845.html" title="2024年事业单位宪法学习考试题最新题库(完整答案)">2024年事业单位宪法学习考试题最新题库(完整答案)</a></li>
<li><a href="/wenku/1103799.html" title="2024年春季西南大学《土力学》0760大作业答案">2024年春季西南大学《土力学》0760大作业答案</a></li>
<li><a href="/wenku/1137871.html" title="初中课程学习总览(生物、物理、化学)">初中课程学习总览(生物、物理、化学)</a></li>
<li><a href="/wenku/1241497.html" title="新型冠状病毒疫苗接种培训考试试题（含答案）">新型冠状病毒疫苗接种培训考试试题（含答案）</a></li>
</ul>
</div>
</div>
<footer class="footer">
<p class="bt-links"><a href="https://m.70edu.com/">手机版</a><span class="v-line">|</span><a href="https://www.70edu.com/">PC版</a></p>
<p>Copyright © 2020-2025 70教育网 版权所有<br/>
声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br>客服QQ：370150219 邮箱：370150219@qq.com<br>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-17</a>
</p>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?09a3eed183b4f7809b508bc681a9e98e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript:;" title="关闭" class="close">×</a>
<b>游客快捷下载通道</b>（下载后可以自由复制和排版）
</div>
<div class="theme-popbod dform">
<p class="downtit">下载本文档需要支付 <i>7</i> 元</p>
<p class="chose"><span>支付方式：</span><span class="pay1"><img src="https://www.70edu.com/img/wxpay.jpg" class="over"></span> <span class="pay2"><img src="https://www.70edu.com/img/alipay.jpg"></span></p>
<div class="youke_pay">
<div class="wxpay"><a href="javascript:;">微信支付并下载</a></div>
<div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a>
</div>
</div>
<p class="tiaozhuan"><a href="https://www.70edu.com/user/index.php" style="color:blue;">开通VIP包月会员</a> 特价：<b style="color:red;">29元/月</b></p>
<p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信：xuecool-com QQ：370150219</p>
</div>
</div>
<div class="theme-popover-mask"></div>
<script type="text/javascript">
//menu
$(".header .menu").on("click", function(){
$("body").append("<div class=\"mask-bg menu-mask-bg\"></div>");
$(".menu-slide").show();
$("html,body").css({height:$(window).innerHeight(), overflow:"hidden"});
setTimeout(function(){
$(".menu-slide").css({transform:"translateX(-50px)"});
},50)
});
$("body").on("click", ".menu-mask-bg", function(){
$(".menu-slide").css({transform:"translateX(-100%)"});
$(".menu-mask-bg").remove();
$("html,body").removeAttr("style");
setTimeout(function(){
$(".menu-slide").hide();
},300)
});
//search
$(".header .search").click(function(){
if($(".search-box").is(":hidden")){
$(this).children("i").removeClass("search-icon").addClass("close-icon");
$(".search-box").fadeIn("fast");
}else{
$(this).children("i").removeClass("close-icon").addClass("search-icon");
$(".search-box").fadeOut("fast");
}
});
//nav
if($(".nav").length > 0) {
var nav = new Swiper(".nav",{
slidesPerView: "auto"
});
}
</script>
<script type="text/javascript">
$(".user-login").click(function () {
$(".drop-menu").toggle();
});
</script>
<script>
$(".pay1 img").click(function () {
$(".wxpay").css("display", "block");
$(".alipay").css("display", "none");
$(".pay1 img").addClass("over");
$(".pay2 img").removeClass("over");
});
$(".pay2 img").click(function () {
$(".wxpay").css("display", "none");
$(".alipay").css("display", "block");
$(".pay1 img").removeClass("over");
$(".pay2 img").addClass("over");
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.word-pic a').click(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
$(".vip-up").hide();
$(".vip-pay").hide();
var downid = '660901'
$('.wxpay a').click(function(){
var payurl = 'https://www.70edu.com/hupipay/payment_pay_tz.php?payway=wx&aid=';
payurl = payurl.replace('payment', 'youke');
var gotourl = payurl + downid
location.href = gotourl;
});
$('.alipay a').click(function(){
var payurl = 'https://www.70edu.com/hupipay/payment_pay_tz.php?payway=ali&aid=';
payurl = payurl.replace('payment', 'youke');
var gotourl = payurl + downid
location.href = gotourl;
});
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})
})
</script>
<script src="https://www.70edu.com/user/check_level_m.php?callback=userinfo"></script>
<script src="https://m.70edu.com/js/gobacktop.js" type="text/javascript"></script>
</body>
</html>