项目11-个人博客制作_第1页
项目11-个人博客制作_第2页
项目11-个人博客制作_第3页
项目11-个人博客制作_第4页
项目11-个人博客制作_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

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

文档简介

个人博客制作项目要点综合运用div-ul-li

01.02.网页布局的概念技能目标灵活使用div-ul-li结构01.02.灵活使用超链接样式任务1利用Dreamweaver搭建站点任务1利用Dreamweaver搭建站点命令行方式创建用户01不要将所有文件都存放在根目录下02按栏目内容建立子目录03在每个主目录下建立独立的images目录04目录的层次不要太深，建议不要超过3层目录任务2制作博客首页任务2制作博客首页命令行方式创建用户我们首先制作首页，然后制作文章内容的分支页。制作博客网首页首先从制作总体布局开始，一定要着眼于大局，不要去着眼于细节，然后再细分到每一个块区。从效果图我们可以把它分为两大块：左边和右边，左边是一个侧边栏，右边是主要的内容区。任务2制作博客首页命令行方式创建用户两块，一块是左边栏side-bar，一块是主要内容main左边栏共三块内容：最上面是header，有博主名称也就是博主的logo和介绍，中间是导航nav,下面是一些标签tag_list。任务2制作博客首页命令行方式创建用户右边内容先给他一个容器main，右边主要是文章列表article-list，每篇文章item，首先有文章的标题title，然后是文章状态status，当前的状态有多少人阅读，什么时候发的，标签是什么等等，然后是文章的内容摘要content。用<div>标签分区，使用class标识。所以body的结构如下：任务2制作博客首页命令行方式创建用户<body><divclass="side-bar"><divclass="header"></div><divclass="nav"></div><divclass="tag-list"></div></div><divclass="main"><divclass="article-list"><divclass="item"><divclass="title"></div><divclass="status"></div><divclass="content"></div></div><divclass="item"><divclass="title"></div><divclass="status"></div><divclass="content"></div></div></div></div></body>任务2制作博客首页命令行方式创建用户在样式表中首先设置全局的属性，使用全局选择器设置内外边距为0，整个网页的超链接为不带下划线，超链接的字体颜色#eee，代码如下：/*设置整个网页的通用默认样式*/*{margin:0px;padding:0px;}a{text-decoration:none;color:#eee;}然后我们设置左右两块并列显示，不是垂直显示，所以要设置浮动属性。我们side-bar设置为左浮动，宽度20%，main设置成右浮动，宽度80%。指定body的背景颜色#454545，字体颜色#eee。/*设置body样式*/body{background:#454545;color:#eee;}.side-bar{float:left;width:20%;}.main{float:right;width:80%;}任务3制作博客分支页任务3制作博客分支页命令行方式创建用户

我们来制作文章的具体内容页面article.html,我们可以复制index.html，然后修改文章列表这一部

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论