进行网站设计之母版页

news/2024/5/19 7:41:26/文章来源:https://blog.csdn.net/weixin_30399821/article/details/99172241

建立站点地图:web.sitemap

创建模板页面:Template.master

下面的代码为Template.master文件定义了标准的HTML元标记和页头。

页头:放一些DIV容器,一个用于菜单链接,一个用于登录框,另一个用于选择主题(一个包含了可选主题的下拉框)。

这些DIV使用绝对位置,所以可以直接把它们放在想要的位置上。

为了同步看到样式效果,创建第一个主题:TmeplateMonster。

该主题下创建Default.css。(当前主题文件夹中所有的CSS文件在运行时自动被.aspx页面链接。),该主题的样式需要的图片都存放在

images文件夹中。

在default.css编写样式:

可见:背景图片默认水平拉伸。(通常都切片为1个像素)

接着完善:

 

尽管浏览器的窗口宽度有可能超过780个像素,但由于有上层div的背景图片效果,所以始终能显示图片。这种双结合的方式值得学习。

示例站点地图 web.sitemap

View Code
 1 <?xml version="1.0" encoding="utf-8" ?>
2 <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
3 <siteMapNode url="~/default.aspx" title="首页" description="">
4 <siteMapNode title="购物" url="~/store/default.aspx">
5 <siteMapNode title="购物车" url="~/store/ShoppingCart.aspx"/>
6 </siteMapNode>
7 <siteMapNode title="论坛" url="~/Forum/Default.aspx"/>
8 <siteMapNode title="关于" url="~/about.aspx"/>
9 <siteMapNode title="联系" url="~/Contact.aspx"/>
10 <siteMapNode title="管理员" url="~/Admin/Default.aspx"/>
11 </siteMapNode>
12 </siteMap>

导航菜单采用相对定位方式。 页面的内容部分被分成三列,中心列左右两边的空为200像素,边空被两个DIV填充,两个DIV使用绝对位置停靠在页面边上。 template.master继续完善中间区域(这一块被分成左/中/右三块)。。。。

#container2的右边距200个像素,通过颜色其实区分成了两个部分。

#rightcol绝对定位,注意这里实际有个ContentPlaceHolder控件,id为RightContent。

#centercol包含了面包屑控件(SiteMapPath[首页]和Id为MainContent的ContentPlaceHolder控件[绿色显示]) 接下来定位:登录框和主题选择区域:(绝对定位)

Template.master继续完善,加入左边区域。(可以发现前面#container的div分成了中间区域和右边区域)

用样式进行控制,最后位置的显示效果,看截图一目了然。

可以看到,母版页面可以有多个ContentPlaceHolder控件,(将来留给内容页面aspx来填充对应的预留位置区域),跟我们看电影类似。需要对号入座,

电影院(母版)提供座位(ContentPlaceHolder),至于那个位置上座的人长什么样(内容页)电影院不操心了。不过要凭座位号(几排几列)入座就是。

座位的地方可是固定的。

 

template.master剩下部分定义了页脚的容器,其中包含了一个用于页脚菜单的子容器及版权声明。

 

至此,初步完成了样式方面的编写。我们再次比较一下母版页设计视图和应用了样式后的效果。(两张图比较,果然是大相径庭之感!)

将来各区域的背景颜色会去掉,这里为了显示方便,暂且保留后能直观的看到效果。

转载于:https://www.cnblogs.com/netxiaochong/archive/2012/01/02/2310309.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_761935.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

50个极佳的企业网站案例

目前&#xff0c;大多数企业转向Web开发&#xff0c;无论是广告还是开发公司.. 在这个阶段&#xff0c;网页设计师和开发人员发挥了重要作用。 现在&#xff0c; 我们为您带来了50个极佳的企业网站案例&#xff0c;希望能给您带来灵感&#xff0c;在同一个项目或者在未来的网站…

把http网站改为Https网站

腾讯云申请完证书后添加到服务器的方法&#xff1a; https://www.qcloud.com/document/product/400/4143#2.-nginx.E8.AF.81.E4.B9.A6.E9.83.A8.E7.BD.B2申请SSL证书的常见网站有&#xff1a; https://letsencrypt.org/ https://www.startssl.com/ &#xff08;免费&#xff0…

判断是否是爬虫在访问网站

实现代码如下&#xff1a; 转载于:https://www.cnblogs.com/lovebing/p/7742451.html

整理的一些个人觉得不错的国外【图形学】技术论坛和个人网站,以后还会陆续更新...

官网&#xff1a; http://developer.nvidia.com/node/76 http://msdn.microsoft.com/en-us/library/ee663274(vvs.85) http://www.computer.org/portal/web/computingnow/cga http://developer.amd.com/Pages/default.aspx http://www.spacesimulator.net/index.php?phome htt…

做网站SEO优化,这些网络引流方法,你应该知道

对于网站SEO优化来说&#xff0c;网站流量的重要性不言而喻&#xff01;国内的站长平台工具通过用网站流量来衡量一个网站的权重&#xff0c;当你的网站流量很高的时候&#xff0c;同时会影响你网站的权重&#xff0c;进而影响你网站SEO优化排名。所以说流量对于一个网站的意义…

一个有趣的创客网站分享

http://mc.dfrobot.com.cn/portal.php 转载于:https://www.cnblogs.com/vectors07/p/7976494.html

学用MVC4做网站一:修改密码1.3

一用户 1.1用户注册 1.2用户登录 1.3修改密码 修改密码会用到一个UserChangePassword 模型类&#xff0c;先添加UserChangePassword类 /// <summary>/// 用户修改密码模型/// </summary>[NotMapped]public class UserChangePassword{/// <summary>/// 原密码…

如何快速增加百度相关域提升网站权重

早上在论坛seo版块&#xff0c;发现有人问为什么domain&#xff1a;域名后在结果里&#xff0c;怎么会出现网站本身的页面呢?如图&#xff1a; 这让我联想我们在查询网站数据的时候&#xff0c;总会出现如图下面显示&#xff0c;百度反链多少&#xff0c;点击链接就是domain&a…

优化杭州某著名电子商务网站高并发千万级大型数据库经验之- 内存性能

好久没写博客了&#xff0c;一方面是日常工作繁忙&#xff0c;另外一方面是想更多的时间陪陪家里人&#xff0c;享受春天的美好时光&#xff0c;同时还在写一本《程序员&#xff0c;你伤不起》的一本书要由人民邮电出版社出版&#xff1b;我的性格可能也跟大多数程序员类似吧&a…

方维系统,在tip.htm和inc\u\u_menu.htm调用账号绑定状态,已绑定的可链接到该用户在对应网站的地址...

方维系统&#xff0c;在tip.htm和inc\u\u_menu.htm调用账号绑定状态&#xff0c;已绑定的可链接到该用户在对应网站的地址 在tip.htm和inc\u\u_menu.htm调用账号绑定状态&#xff0c;已绑定的可链接到该用户在对应网站的地址 实现类似这样的效果 举例&#xff1a;u_menu.htm&am…

思维导图形式带你读完《大型网站技术架构》上

最近跟着视频做的一个网站用到了soa架构&#xff0c;nginx反向代理&#xff0c;redis集群&#xff0c;dubbo等等优化网站性能的技术。所以决定看一下《大型网站技术架构》这本书&#xff0c;这本书真心感觉不错&#xff0c;里面没有什么代码和晦涩难懂的知识&#xff0c;一般人…

礼品代发网站源码_礼品快递代发——如何挑选靠谱的礼品代发网站?

电商老人都知道&#xff0c;只有礼品单以及拍A发B才能提供最真实的物流信息。但卖家自己快递礼品的话&#xff0c;除了需要快递成本&#xff0c;还有采购成本、仓储成本、人工打包费用、快件包装费用等&#xff0c;极端条件下甚至会产生快件破损丢失的情况&#xff0c;综合成本…

微软网站打不开_更换空间影响网站优化?这样做比原先排名更靠前!

1马上就是清明小长假了&#xff0c;然后是五一小长假plus&#xff0c;再接下来就是端午小长假...接踵而至的各种小长假期间&#xff0c;我们要考虑竞价推广投放问题(这个问题&#xff0c;老牛之前有跟大家讨论过&#xff0c;点此爬楼查看)。然而网站的竞价广告提前设置好了&…

python 判断 网站是否是动态_Python语法速览与实战清单,不知道大家学的怎么样了?...

基础语法Python 是一门高阶、动态类型的多范式编程语言&#xff1b;定义 Python 文件的时候我们往往会先声明文件编码方式:继续给大家分享我的学习地址&#xff0c;我也不想多说了&#xff0c;有需要的就进来吧&#xff01;让我来带大家一起学习&#xff01;# 指定脚本调用方式…

网站克隆工具_Kali Linux工具篇十三:网站克隆技巧Httrack使用技巧

本公众号所有分享&#xff0c;仅做学习交流&#xff0c;切勿用于任何不法用途&#xff01;一、HTTrack是什么&#xff1f;HTTrack 是一个免费并易于使用的线下浏览器工具&#xff0c;全称是 HTTrack Website Copier for Windows&#xff0c;它能够让你从互联网上下载指定的网站…

Asp.Net与SEO – 庞大的反向链接网络(二)

上篇文章提到反向链接的概念&#xff0c;现在我就从增加反向链接的方法来谈谈作为一个程序员应该怎么为增加反向链接做一些SEO工作。 1. 内部链接优化对于很多大型网站&#xff0c;由于网站自身都拥有几百万个网页&#xff0c;所以对网站内部链接进行重新优化构架之后&#xff…

网站启用GZip压缩后,速度快了3倍!

GZip压缩&#xff0c;是一种网站速度优化技术&#xff0c;也是一把SEO优化利器&#xff0c;许多网站都采用了这种技术&#xff0c;以达到提升网页打开速度、缩短网页打开时间的目的。 本文是一篇研究性文章&#xff0c;将通过某个案例来给大家显示网站采用GZip压缩前后的对比效…

夺命雷公狗ThinkPHP项目之----企业网站24之网站前台获取当前栏目和顶级栏目

我们现在要实现的是取出网站当前栏目名称和顶级分类名称&#xff0c;如下所示&#xff1a; 列表页的和单页的不能总是写死的吧&#xff1f;&#xff1f; 我能就要想办法去让他变活的才可以解决问题噢&#xff0c;我们已经有了他的cate_id &#xff0c;然后我们就可以通过cate_i…

宝塔面板快速配置网站SSL证书(HTTPS)

既然已经知道用宝塔来搭网站&#xff0c;那我就默认看本文的看官们都已经在宝塔里部署好网站了~本文只记录如何将网站从http转为更为安全的https 1. 在宝塔面板里选择想要上锁的网站&#xff0c;点击设置 2. 先找到ssl, 然后选择其他证书&#xff08;也可以是宝塔ssl、lets E…

css background 充满自适应_打造自适应网站只用一个CSS属性就够了

用一个CSS属性创建一个响应式网站&#xff0c;让我们来看看它是如何做到的。 以这个模板为例&#xff0c;没有应用css属性。 使用 clamp() CSS函数&#xff0c;我们可以创建仅具有一个属性的响应式网站。现在添加魔术CSSclamp(minimum, preferred, maximum);在这里&#xff01;…