《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目五创建网站个人博客_第1页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目五创建网站个人博客_第2页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目五创建网站个人博客_第3页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目五创建网站个人博客_第4页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目五创建网站个人博客_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

项目五变换的CSS之个人博客

项目简介

W3C标准提出，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

本项目通过变换的CSS样式来表现同样的HTML内容，带大家完成两个网页——“简约商务风”的个人博客和“中国风”的个人博客。

项目目标

本项目以两种不同风格的个人博客网页为例，重点完成如下目标：

1.逐步练习手写HTML代码

2.根据需要设置CSS属性，并逐步学会手写CSS代码

3.深刻理解WEB中的结构和表现相分离的思想

4.理解页面重构的实现方法——相同的HTML结构，不同的CSS样式

工作任务

本项目完成两套不同风格的个人博客网页，熟练掌握基于HTML5的DIV+CSS的页面布局方法，并能够根据需要进行页面的重构。

(1)HTML+CSS构建简约商务风个人博客页面

(2)重构CSS创建中国风个人博客页面

任务一个人博客之简约商务风

网页整体布局分析图

任务目标

根据页面效果图和布局分析图，建立站点文件夹，并在Dreamweaver2021中设计制作网站首页的HTML结构。并根据结构分别添加网页内容和设置相应的CSS样式，最终达到理想的效果。1.外部样式表<head><linkhref="mystyle.css"rel="stylesheet"type="text/css"></head>2.内部样式表<head>

<styletype="text/css">

body{background-image:url("images/back40.gif");}

</style>

</head>3.内联样式<pstyle="color:#333333;margin-left:20px;">这是一个段落</p>

知识准备一在网页中插入CSS样式表的几种方法一个样式仅仅用于一处时，DIV设置id，CSS选择器——#id名称；一个样式用于多处时，DIV设置class，CSS选择器——.class名称；推荐在大范围的部分用id，小范围的部分用class。知识准备二DIV+CSS之id与class

知识准备三DIV+CSS命名规则步骤一创建站点及首页步骤二构建页面整体结构

任务实施

任务实施——页面HTML结构图

步骤三完成网页头部步骤四完成导航菜单

任务实施步骤五完成主体部分侧边栏

任务实施步骤六完成网页主体部分内容区

任务实施步骤七完成内容区三条日志步骤八完成网页底部

任务实施

任务二个人博客之中国风

根据两张页面效果图的对比，将任务一中的index1.html网页另存为index2.html。并附加新的CSS样式文件，调整相应的CSS样式，最终达到想要的效果。

任务目标

知识准备一CSS的优先级机制1.样式的优先级外部样式<内部样式<内联样式2.选择器的优先权步骤一另存网页及附加新的样式文件步骤二调整整体CSS样式步骤三调整网页

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

温馨提示

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

最新文档

评论

0/150

提交评论