作者简介：黄基金会（1986-），人，工程师，研究方向：信息管理，数字图书馆技术。•商业研究•本文以广东省开放大学图书馆网站的建设为例，介绍了DIV CSS技术的优势及其设计页面的使用：它促进了信息的收集和分发。含在搜索引擎中，实用的定制，清晰的语义结构和页面的成本降低。文详细介绍了DIV CSS技术在图书馆网页设计中的布局，结构和风格，以及使用DIV CSS时要避免的四个方面，以及如何设计一个标准化的网站。DIV CSS;图书馆网站; DOI页面设计：10.3969 / d。ISSN。1008-0821.2014.05.031 [中国图书馆分类]TP393092[文档标识代码] B [文章编号] 1008-0821（2014）05-0146-04Application技术DIV CSS设计网站实例 - 广东省开放大学图书馆实例黄成立杨玉军[摘要]关于广东开放大学图书馆网站，例如，文章介绍DIV CSS布局技术及其优点：有利于搜索引擎的收集和包含它很容易定制样式，清晰的语义结构和降低页面成本。者详细描述了图书馆网站的布局，结构和风格，并指出了使用DIV CSS技术时需要特别注意的4个问题。法清楚地解释了如何设计标准化网站。[关键词] DIV CSS;图书馆网站;网页设计年8月2日在广东开放大学东方广播电视大学和电视台的基础上正式揭幕。为开放教育的支持者，广东开放大学承担着建立终身教育体系的社会责任。了不断为社会提供强有力的人才保障和智力支持，广东开放大学应该确定以下特点：学校制度，开放和开放教育，应用技能培训和开放合作，加强交流和国际和国家层面的合作，以及国家大学建设的研究。斗进展[1]。为广东开放大学组织的成员，图书馆是读者学习的资源中心，致力于提供阅读和研究服务。前，图书馆网站是网络服务的窗口，我们必须密切关注其构建：为了满足信息时代的要求，作者选择了技术DIV CSS设计图书馆网站的网页。DIV CSS技术不仅可以分离网页的内容和性能，还可以明确网页的结构并降低维护成本。DIV CSS技术可以为读者提供一个简单，易用，美观且易于编辑的图书馆网站平台。DIV CSS技术的网站设计面临的问题是定位布局。前使用TABLE方法，即整个网页被处理作为一个表，然后表的元素充满了文本，图像，链接等。在，布局基本上放弃了TABLE布局并使用了DIV CSS方法。谓的DIV CSS是指通过CSS处理DIV控件。实上，DIV可以理解为一个通用术语，实际应用不仅DIV，但任何节点，使得P，跨度，IMG，表，H1-H6，UL，DL醇等的定位。以通过CSS控制。此，DIV CSS技术不是DIV和CSS的简单添加，而是使用CSS来控制用于网页布局的各种HTML标签。DIV是一个除法快捷方式，它是一个块级元素，它将HTML文档分成彼此独立的片段和内容。与当前HTML标记p，h1等具有相同的效果。如，p元素必须包含一段文本，而h1元素必须包含页面的顶级标题。
DIV用于表示用于指定特定块或行的逻辑块，其可包含段落，标题，表等。于DIV块属性，其内容自动开始一行，一般设计者将按类或ID控制DIV [2]以获得DIV应用程序的必要样式。CSS是级联样式表的缩写，由W3C组织开发和发布，W3C组织是一种用于表达HTML文档样式的计算机标记语言。用CSS设置页面格式时，内容和布局是分开的。面的内容在其自己的HTML文件中，并且定义代码表示的CSS规则位于HTML文档的另一个文件（外部样式表）或另一部分（通常是部分）中。
Web设计人员可以使用CSS来确定颜色，字体，布局等。CSS的Web.S页面可以非常灵活，可以控制页面的外观，分离网页的内容和布局，提高文件的结构和可读性。别。此，DIV用于创建网站的结构和内容，而CSS则用于创建网站的风格。助DIV CSS技术，作者标准化图书馆网站的构建，您可以为网站设计更好的平台。不仅具有清晰的网站结构，而且还具有易于管理和开发的风格。
用DIV CSS技术设计库网站的好处是基于CSS演示页面：结构和性能可以分开，单独控制，文档简洁明了，然后删除。且简化了许多页面的维护。三是通过修改CSS文件[3]中定义的样式来改变网站所有页面中的相同样式。
于上述优点，DIV CSS设计页面具有明显的优势，主要表现在以下几个方面：1有利于搜索引擎集合和包含DIV设计的网页结构 CSS很清楚，便于搜索引擎浏览。东开放大学图书馆网站的HTML代码结构是一个树，即主页 - 列页面 - 内容页面，之后是页面的级别从家到内容页面逐渐减少，重量传输良好，搜索引擎保证从网站。面探索内容，然后在页面中查找其他链接。于每个页面都包含一个文本链接，这有助于完整探索和包含网站，蜘蛛可以轻松获取网页的HTML代码并将其保存在自己的数据库中[ 4]。将有助于推广广东开放大学图书馆的网站。2实用的定制风格DIV CSS设计的网页分离内容和风格;在固定内容的情况下，仅CSS样式表的修改使得可以容易地修改页面的性能。论上，网页可以根据实际需要以不同的布局生成。者在库的主页上实现了三列布局，并在页面上实现了两列布局。书馆信息。如，设计师也可以设计不同的背景来庆祝节日，取决于每个节日一年的到来。果背景的风格被CSS取代，网站的页面随着节日而变化的不同背景可以很容易地实现。3清晰的语义结构，低页面成本由DIV CSS设计的网页使用清晰的语义结构，设计人员可以轻松理解源代码的含义，更容易维护和更新网站页面。外，广东开放大学图书馆网站采用自建内容管理平台生成网页，因为DIV CSS技术压缩页面大小，简洁，节省了大量空间并提高运行网页的速度和效率。快页面加载速度，更快地响应播放器操作，为驱动器带来更加用户友好的体验，并降低页面成本。DIV CSS技术应用于图书馆网站对广东图书馆开放大学图书馆的定位：帮助读者，开放式教育服务，紧密围绕教学和研究的需要关注教师和学生的实际需求，不断发展和完善文献信息资源保障体系致力于提高每个读者的图书馆信息服务水平。读者提供完整，高质量和高可用性的图书馆管理平台[5]。据网站的定位和图书馆网站用户的特点，作者确定网站页面的表现风格：结构清晰，气氛平静，内容为简洁，颜色清晰而不沉闷。
主页为例，作者确定白色是主要风格，网页布局采用上下中间垂直框架。架包括：页面标题（库标识，搜索框，菜单导航），主要内容区域（左侧，中间和右侧，包括日志视图，图书馆新闻，入学指南，图书推荐，电子资源，活动）主题，专业导航），页脚区域（包括常用链接，版权信息），如图所示在图1中，渲染在主页和框架图中。页的主要HTML结构和CSS页面的主要样式结构如表1所示.HTML结构的主体结构控制着网站的颜色和背景图像，它定义了网站的白色调。Id =“box”是控制整个页面的DIV块，id =“top”是图书馆网站的主要位置，并且还包括网站的搜索字段。Id =“nav”是放置顶部菜单导航的区域，id =“foot”是页脚信息所在的位置。Id =“mid”是网页中间主要内容的DIV。包括新闻DIV，图书馆新闻，入学指南，书评和书籍推荐，数字资源介绍，专业导航等。要CSS样式列出了构成主页基本演示的DIV（正文，框，顶部，
宁波网站建设导航，英尺和中间）的详细样式。
id =“mid”部分是详细的内容区域。此区域中，必须创建3列表示结构。者使用CSS的表示属性表示。时，为了确定所有列是否都在特定位置，作者还指定了各个DIV。度，例如照片新闻部分的DIV宽度是350像素，库消息部分的DIV宽度是410像素，并且许可指南的DIV宽度是230像素。据表1中所示的HTML结构，作者首先确定DIV id =“pic-news”的位置，然后确定剩余DIV的位置。id =“mid”中的DIV块是浮动的，“float：left”的关键属性是用它们的css样式写的。这个例子中，只有照片新闻栏目拍摄，它的一些关键代码表2所示。1首页效果图和框架图1种结构首页HTML和CSS样式关键主HTML结构传说CSS样式区超级明星导航区图片新闻图书馆新闻入学指南书籍，调查和图书建议简介数字资源专业导航资源页脚信息Var _userid =; var _siteid = 669; var _istoken = 1; var _model =Model03; WebPageSpeed = 328; UrchinTrack（）; body {text-align：center; color-background：#fff; background-image：Url（../ images /bgpage.jpg）; background repeat：repeat-x;}＃area {width：px;保证金：0自动; zoom：1; overflow：hidden;} #top {width：inherit;身高：140px; z-index：9; position：relative;}＃nav {width：inherit;身高：35px; z-index：8; position：relative;}＃mid {width：inherit;最小高度：700px;身高：自动！显著; text-align：left; z-index：3} #foot {width：inherit;身高：130px; background-color：＃f7f7f7;填充：0像素10px的10px的0像素;}为了保持网站的二级页面设计遵循白音和网页，头和导航的基本布局的一致性不改变，主要内容在中间更改为2列布局，不仅考虑与主页的统一风。要确保网站生成另一个页面布局，不会单调。图2所示，这是库消息的页面呈现，左侧位于信息栏的中间，右侧是消息的详细内容。
于页脚部分，CSS clear属性用于清除2列布局的浮动，消除浮动引起的元素定位的负面影响并获得更好的性能。2新图像DIV块和键样式css图像新DIV块照片新键样式Css导入图像按钮左键右键功能函数＃pic-news {width：350px;身高：200px;身高：浮动：左;保证金：10px 0px 0px 0px;位置：相对;溢出：隐藏;}图2辅助页面渲染器DIV CSS技术在设计网站页面时需要注意DIV CSS技术在设计网站页面方面有很多优点，重点是：1避免直接在HTML文档上编写CSS样式：一些设计人员更喜欢直接在HTML页面而不是外部样式表上编写CSS样式。然这是对HTML显示和结构指令的混合的改进，但它仍然具有相同的缺点，但是它的维护可能很困难并且HTML文档变得相对膨胀。2避免CSS命名陷阱CSS和其他编程语言有共同的陷阱。计人员将选择一个更具描述性的名称来命名它们，尤其是在命名CSS类和标识符时。如，我用“大蓝”来命名“广东开放大学图书馆”的H2标签。时，作者的名字可能是直观的，一个大的蓝色字体，但后来我决定突出显示的字节必须使用红色而不是蓝色，因此名称为“大蓝”不合适。此，面额必须突出这个“id”或“类”的目的，而不是它的显示方式[6]。3避免过度使用DIV元素嵌套尽管大多数使用CSS的页面比使用表格的传统页面更清晰，但是过多使用类，id和结构级别太详细了也可以使膨胀的HTML代码难以阅读和管理。此，DIV块越多越好。果您发现很多DIV，请问自己是否有任何滥用，如果您可以用其他标签替换它们。果标签h1可以更好地表示DIV块指示的内容，则忽略DIV块。HTML文档必须按逻辑结构化，因此必须审核DIV的数量，并且样式控制的结果可能更好。必须灵活地应用HTML标记。4避免过多引入解决浏览器兼容性的CSS样式Internet上有不同的浏览器。个浏览器的CSS支持并不完全统一。用CSS设计后，浏览器的显示效果不同。如，旧版本的Microsoft Internet Explorer（60甚至70）显示一些重要属性，例如宽度，高度和浮点值，这些属性与W3C标准不同。外，一些新的CSS3样式尚未成为标准，必须加上前缀，以便在不同的浏览器中正确显示它们的效果。此，为了解决浏览器之间的差异，作者必须编写一个特殊的CSS样式并增加CSS文件。果有太多特殊的CSS样式，维护量会很大，这会降低维护性能。论随着广东开放大学图书馆网站的有效建设，作者阐明了DIV CSS技术的优势，并提出了一些需要注意的问题。计。DIV CSS是一种功能强大的技术工具，如果使用得当，可以设计符合W3C标准的网站为用户服务。
本文转载自
宁波网站建设 http://www.leseo.net
补充词条：
宁波谷歌优化
宁波seo推广公司
宁波seo排名
宁波网站seo优化
宁波网站优化推广
