项目11-个人博客制作.pptxVIP

个人博客制作

项目要点综合运用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制作博客首页命令行方式创建用户bodydivclass=side-bardivclass=header/divdivclass=nav/divdivclass=tag-list/div/divdivclass=maindivclass=article-listdivclass=itemdivclass=title/divdivclass=status/divdivclass=content/div/divdivclass=itemdivclass=title/divdivclass=status/divdivclass=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，然后修改文章列表这一部分内容。进行样式设置，该页面.article类与首页的item类设置相同需要特殊强调的地方，使用span标签，然后设置字体大小字体加粗字体颜色以及显示为块状。

感谢聆听