综合案例-博客网站课件_第1页
综合案例-博客网站课件_第2页
综合案例-博客网站课件_第3页
综合案例-博客网站课件_第4页
综合案例-博客网站课件_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第14章 综合案例博客网站 本章简介： 博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一个。对于自己的博客，用户往往都希望能制作出既美观又适合自己风格的页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定义的CSS文件。本章以一个博客首页为例，综合介绍整个页面的制作方法。 分析构架14.1模块拆分14.2整体调整14.314.1案 例 概 述本例采用恬静、大方的淡蓝色为主基调，配上明灯等体现意境的图片。我的博客14.1.2排版构架网络上的博客站点很多，通常个人的首页包括体现自己风格的Banner、导航条、文章列表和评论列表，以及最新的几篇文章，考虑到实际的内容较

2、多，一般都采用传统的文字排版模式。页面框架14.2模 块 拆 分页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一整合。这也是设计制作网站的通常步骤，养成良好的设计习惯便可熟能生巧。14.2.2左侧列表博客的#parameter块包含了该博客的各种信息，包括用户的自定义图片、链接、文章分类、最新文章列表和最新评论等，这些栏目都是整个博客所不可缺少的。#author块图片14.2.3内容部分内容部分位于页面的主体位置，将其设置为向左浮动，并且适当地调整margin值，指定宽度（否则浏览器之间会有差别） 。内容部分14.2.4脚注部分#footer脚注主要用来放一些版权信息和联系方式，重在简单明了。其HTML框架代码也没有过多的内容，仅仅一个块中包含一个标记。#footer脚注14.3整 体 调 整至此整个页面已经基本成形。最后还需要对页面根据效果做一些细节上的调整。例如各个块之间的padding和margin值是否与整体页面协调，各个子块之间是否协调统一等。另外对于固定宽度且居中的版式而言，需要考虑给页面添加背景，以适合大显示器的用户使用。这里给页面添加黑色背景，并且为整个块添加淡色的左、右、下虚线。添加左、右、下虚线框小结本章制作了一个博客网站的页面，通过本章这个案例和上一章案例的比较，可以看到，尽管从最终的外观效果上看差别很大，但是其实它们的布局方法是

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论