1.3 网页基本框架代码解读_第1页
1.3 网页基本框架代码解读_第2页
1.3 网页基本框架代码解读_第3页
1.3 网页基本框架代码解读_第4页
1.3 网页基本框架代码解读_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

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

文档简介

静态网页设计

第1章基础概念基础语法网页基本框架代码解读1网页代码特点分析2网页上内容放置方法3美化网页内容的途径4CSS概念及语法规则5CSS在网页中的不同应用方式6网页基本框架代码解读01剪辑：间隔板网页框架代码解读头部主体浏览器空白部分显示的内容声明部分编码格式网页标题页面部分网页代码特点分析02剪辑：间隔板代码特点标记在尖括号“<>”中，紧挨着“<”的单词叫“标记名称”。成对出现的标记，叫双标记。前面是标记开始，后面是结束，后面在前面基础上加“/”。一般表示容器。有的标记，后面无结束标记，叫单标记，一般表示功能。标记后面空格隔开的是标记的属性，表示标记的特点，包含属性名和属性值，用等号连接，多个属性用空格隔开。代码特点<柜子

材质=“木头”

颜色=“白色”>上衣<隔板

材质=“木头”>裤子

</柜子>生活案例帮助理解代码特点有的标记无<>，而是在前面增加!或&等符号，一般表示特殊功能。<!---->声明注释，可换行“&”声明特殊字符，如“ ”表示空格等。单词不区分大小写。为增加可读性及编码效率，一般小写，DOCTYPE习惯大写“!”声明类型如<!DOCTYPEhtml>声明“文档为超文本标记文本”网页上内容放置方法03剪辑：间隔板放置内容1.把标题放在头部的title中2.把正文内容放在主体中给正文内容分段用<p></p>给正文内容换行用<br>代码及效果美化网页内容的途径04剪辑：间隔板改变外观的方式改变网页内容外观目的：是为了让网页内容重点突出，看起来赏心悦目标记改变属性改变不利于代码优化、复用和团队协助样式改变现代企业中通常选用CSS概念及语法规则05剪辑：间隔板认识样式（CSS）层叠样式表(CascadingStyleSheets)，是描述HTML文档样式的语言CSS可控制HTML元素显示的外观，使用外部样式表可以很好的解决内容与表现分离的问题，方便团队协作和代码复用，大大提升开发效率一个站点有可能会有多个外部样式表文件为站点结构清晰，在站点规划时一般将CSS文件保存在单独文件夹中外部样式的应用方法请参看本节操作演示视频CSS语法规则分析语法格式：选择器名称{属性名:属性值;属性名:属性值;……}属性名属性值表示赋值表示结束选择器名称表示大括号中的系列属性的作用范围标记选择器网页中所有该标记范围类选择器用class属性调用的标记范围Id选择器用id属性调用的标记范围CSS语法规则分析多个样式可在同一行也可以在不同行同一行语法格式：选择器名称{属性名:属性值;属性名:属性值;……}两种写法无优劣之分，编程者可不拘泥于形式，据编程习惯及样式内容具体分析，也可两种混合使用，只要保证代码结构清晰即可。选择器名称{

属性名:属性值; …… }不同行

语法格式CSS注释“/*解释说明内容，可以换行*/”表示建立CSS与网页之间的联系index.htmlstyle.csslink为什么红色背景白色文字的样式没有在网页中起作用？建立CSS与网页之间的联系格式：<linkhref="地址"type="text/css"rel="stylesheet"/>

除link引用外也可用@import引用，可结合相应内容的操作演示视频，加深对本节知识的理解链接的意思，可在head区域多次出现表示路径即要引用内容的地址表示被链接文档类型表示文档是样式表表示网页与被链接文档之间的关系表示引用的是css纯文本文件参看本节操作演示视频CSS在网页中的其它应用方法行内样式——语法格式<标记名称

style=”样式属性名:属性值；样式属性名:属性值；……”><head>……<style>

选择器名称{属性名称：属性值;属性名称：属性值;……}</style></head>参看相应操作演示视频页内样式——语法格式经验与启示“条条大路通罗马”网页外观修饰方法有很多种人生的路也不止一条等着我们发现。每条路上都有独特的特点，我们要寻找符合我们目标要求的路。合理选择团队合作很重要，如何提升合作效率？网页制作中内容和样式的分离，有利于团队合作，提升开发效率。项目设计中尽量采用内容样式分离方式编码。产品开发中，遵循相同的命名规则和编码规则，有利于提升

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

温馨提示

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

最新文档

评论

0/150

提交评论