Web母版制作和母版嵌套

2023-11-01 09:50
文章标签 web 制作 嵌套 母版

本文主要是介绍Web母版制作和母版嵌套,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

       母版是网页制作中很重要的一部分,它可以大大节省web开发的过程,避免过多重复性的制作过程;而母版嵌套是在沿用母版的基础上进一步进行格式化的方法。

       举个例子:母版就像是我们写作用的模板一样,在写格式一样的文件(web)时,直接套用模板(母版)就可以避免一开始要设置的复杂过程;同样的,母版嵌套就是在母版(模板)的基础上重新设置生成二代模板,从而面对新的需求。下面依次介绍在vs2012中如何生成母版和如何进行母版嵌套。


     【生成母版】


       第一:创建web网页----在vs中首先新建一个web项,然后在web项中设计添加想要的页面。

       第二:添加CSS----针对web页,添加相应的样式文件(CSS)。

       第三:创建母版-----如下图:


        成功后,会出现如图所示:


         第四步:移形换影----将母版页的代码清除后,把第一步的web代码全部拷贝到母版中;第二步的CSS文件只要文件名字不变就可以不改动;

 

        第五步:创建新web,沿用母版:如图:


            选中【选中母版页】,选取要用的【母版文件】。


           如此,新的web文件一开始就拥有了母版已有的设置了。

 

          问题:为什么一开始不直接创建母版页,反而要先创建web后复制粘贴到母版页,这样不麻烦吗?

           答  :这是因为vs不支持母版页的网页预览,直接在母版页设计,难以确定生成后的样式是否符合要求。

 

        【母版嵌套】

            第一步:创建新母版----沿用第一母版,如图:


 

      成功后的代码页:


 


        可以发现二代母版页中多了两个包含contentPlanceHolder类的ASP.net的标签。ContentPlaceHolder类是表示在asp.net母版页中第一内容区域的意思。也就是说你可以两个标签一个可以让你配置新的CSS文件,一个可以让你在原有母版的基础上添加新的网页内容。

        如下图,是我在第一母版的基础上新添加的部分内容而构成的二级母版页。

        需要注意的是,在第二个标签里还要手动添加一个【二级母版contentPlaceHolder】:


 


          第二步:创建新web----沿用二级母版。这样你就可以在二代母版页中进行新的内容设置了。


 

         【总结】

            母版就是对固用web封装,母版嵌套就是在沿用母版的基础上进一步封装。使用母版嵌套就可以创建三级母版、四级母版等。极大的提高的web层的复用性。

这篇关于Web母版制作和母版嵌套的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/322153

相关文章

MyBatis编写嵌套子查询的动态SQL实践详解

《MyBatis编写嵌套子查询的动态SQL实践详解》在Java生态中,MyBatis作为一款优秀的ORM框架,广泛应用于数据库操作,本文将深入探讨如何在MyBatis中编写嵌套子查询的动态SQL,并结... 目录一、Myhttp://www.chinasem.cnBATis动态SQL的核心优势1. 灵活性与可

Mybatis嵌套子查询动态SQL编写实践

《Mybatis嵌套子查询动态SQL编写实践》:本文主要介绍Mybatis嵌套子查询动态SQL编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言一、实体类1、主类2、子类二、Mapper三、XML四、详解总结前言MyBATis的xml文件编写动态SQL

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器(Interceptor)是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》:本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex?为什么选择 Reflex?安装与环境配置构建你的第一个应用核心概念解析组件

Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例

《Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤