《HTML5+CSS3+JavaScriptWeb开发案例教程（在线实训版）》385.pptx

第1章 网页设计基础知识基础概念（服务器与浏览器的关系）网页与HTML语言Web标准：结构、表现与行为初步理解网页设计与开发的过程页面设计布局概述第1章 网页设计基础知识 第1章 网页设计基础知识基础概念（服务器与浏览器的关系）打开浏览器并在地址栏中输入一个网站的地址，就会展示出相应的网页内容了第1章 网页设计基础知识首先必须知道什么是“浏览器浏览器”和和“服务器服务器”互联网就是处在世界各地的计算机互相连接而成的一个计算机网络网站的浏览者坐在家中查看各种网站上的内容，实际上就是从远程的计算机中读取了一些内容，然后在本地的计算机上显示出来的过程访问的具体过程简单地说，就是当用户的计算机联入Internet后，通过浏浏览器览器发出访问某个站点的请求，然后这个站点的服务器服务器就把信息传送到用户的浏览器上，即将文件下载到本地的计算机，浏览器再显示出文件内容这个过程的示意图如图所示第1章 网页设计基础知识网页与HTML语言网页文件是用一种被称为HTML（HyperText Markup Language）的标记语言书写的文本文件，它可以在浏览器中按照设计者所设计的方式显示内容，网页文件也经常被称为HTML文件。

第1章 网页设计基础知识Web标准：结构、表现与行为网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）一个网页分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”每种组成部分的字号、字体和颜色等属性就构成了它的“表现”网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”第1章 网页设计基础知识“结构”“表现”和“行为”分别对应于3种非常常用的技术，即HTML、CSS和JavaScript也就是说，HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为第1章 网页设计基础知识网页设计与开发的过程简单来说，网站开发的全过程大致分为策划与定义、设计、开发、测试和发布5个阶段基本任务与角色各个环节策划与定策划与定义设计开开发测试发布布客户设计师设计师设计师和程序开发员客户、设计师和程序开发员设计师和程序开发员第1章 网页设计基础知识前期：明确网站定位在动手制作网站之前给要做的网站一个准确的定位，明确建站目的是什么。

收集信息和素材这一步是前期策划中最为关键的一步，因为网站是为公司服务的，所以全面地收集相关的意见和想法可以使网站的信息和功能趋于完善收集来的信息需要整理成文档，为了保证这个工作的顺利进行，可以让相关部门配合提交一份本部门需要在网站上开辟的栏目的计划书策划栏目内容对收集的相关信息进行整理后，要找出重点，根据重点以及公司业务的侧重点，结合网站定位来确定网站的栏目讨论完以后，就应由栏目负责人来按照讨论过的结果写栏目规划书栏目规划书要求写得详细具体，并有统一的格式，以便网站留档第1章 网页设计基础知识中期：设计页面方案让美术设计师（也称为美工）根据每个栏目的策划书来设计页面为了让网站有整体感，应该在网页中放置一些贯穿性的元素，最终要拿出多种不同风格的方案，供客户挑选制作页面方案设计完成以后，下一步是实现静态页面，由制作人员负责根据设计师给出的设计方案制作出网页，并制作成模板实现后台功能将动态页面设计好后，只剩下程序部分需要完成了在这一步中，由程序员根据功能需求来编写程序，实现动态功能第1章 网页设计基础知识后期：整合与测试网站当制作和编程的工作都完成以后，就要把程序和页面进行整合整合完成以后，需要内部测试，测试成功后即可上传到服务器上，交由客户检验。

第1章 网页设计基础知识页面设计相关的技术基础知识设备与分辨率浏览器类型第1章 网页设计基础知识设备与分辨率“屏幕显示分辨率”是显示器在显示图像时的分辨率分辨率是用“点”来衡量的，显示器上的这个“点”就是指像素（pixel）分辨率为“物理分辨率”和“逻辑分辨率”这个两个概念物理分辨率的含义就是设备本身的分辨率，由设备的一个像素数量决定而逻辑分辨率则是将若干像素合起来当作一个像素看待计算得到分辨率，它的目的是为了使各种设备的分辨率有大致相当的可比性第1章 网页设计基础知识浏览器类型浏览器类型也是在网页设计时会遇到的一个问题由于各个软件厂商对HTML的标准支持有所不同，导致了同样的网页在不同的浏览器下会有不同的表现2020年中国国内浏览器的使用情况浏览器器占有率占有率Chrome51.97%UC浏览器12.42%Safari10.52%浏览器7.33%IE浏览器4.67%安卓浏览器4.01%Sougo浏览器2.39%Firefox2.36%其他4.33%第1章 网页设计基础知识基础概念（服务器与浏览器的关系）网页与HTML语言Web标准：结构、表现与行为初步理解网页设计与开发的过程页面设计布局概述请看第请看第2章章HTML5语言语言基础基础第2章 HTML5语言基础HTML5基本知识动手练习：利用VS Code快速建立基本文档文本标记HTML标记与HTML属性在网页中使用图像（）再谈HTML5DEMO（创建一个简单地网页）第2章 HTML5语言基础 第2章 HTML5语言基础HTML5基本知识HTML文件结构最简单的一个网页 test 互联网，我来了！第2章 HTML5语言基础HTML文件结构1.声明在整个页面文档的第1行，应该使用声明，使浏览器知道这个文档的类型2.标记标记放在HTML文件的开头，并没有什么实质性的功能，只是一个形式上的标记3.标记也称为头标记，放在标记内部，其作用是放置关于此HTML文件的信息，如提供关于该网页的索引（meta）信息、定义CSS样式等。

4.标记称为标题标记，包含在标记内，它的作用是设定网页标题，可以看见在浏览器左上方的标题栏中显示这个标题5.标记又称为主体标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在6.标记标记表示的是段落，即其间的文字显示为一个文字段落第2章 HTML5语言基础简单的HTML案例第2章 HTML5语言基础网页源文件的获取直接查看源文件打开浏览器，这里以Chrome浏览器为例在网页正文位置单击鼠标右键，选择菜单中的“查看网页源代码”命令即可看到该网页的源文件了，或者直接使用快捷键“Ctrl+U”,如图所示第2章 HTML5语言基础网页源文件的获取保存网页选择浏览器右键菜单中的“另存为”命令，或者直接使用快捷键“Ctrl+S”，这样就可以将所需的与该网页相关的部件全部保存下来，如图所示第2章 HTML5语言基础动手练习：利用VS Code快速建立基本文档创建新的空白文档编写基础的HTML第2章 HTML5语言基础文本标记段落与段内换行（和）浏览器会完全按照HTML标记来解释HTML代码，忽略多余的空格和换行在HTML文件里，不管输入多少空格（按空格键）都将被视为一个空格；换行（按“Enter”键）也是无效的。

段落标记：“”，p是英文单词“paragraph”即“段落”的首字母，用来定义网页中的一段文本，文本在一个段落中会自动换行换行标记：“”，这是一个单个使用的标记，是英文单词“break”的缩写，作用是将文字在一个段内强制换行第2章 HTML5语言基础设置标题（h1h6）在HTML中，设定了6个标题标记，分别用于显示不同级别的标题例如标记表示1级标题，表示2级标题，一直到表示6级标题，数字越小，级别越高，文字也相应越大第2章 HTML5语言基础使文字水平居中（）如果对文字显示在浏览器中的位置不加以限定，浏览器就会以默认的方式来显示文字的位置，即从靠左的位置开始显示文字但在实际应用中，可能需要在窗口的正中间开始显示文字，这时可以使用另一个HTML和标记来完成第2章 HTML5语言基础设置文字段落的缩进（）有时在文档中，需要对某段落进行缩进显示，例如显示引用的内容等，这时可以使用文本缩进标记和第2章 HTML5语言基础HTML标记与HTML属性在大多数HTML标记中都可以加入属性控制，属性的作用是帮助HTML标记进一步控制HTML文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。

基本语法：第2章 HTML5语言基础用align属性控制段落的水平位置在1级标题标记中，增加了align属性的设置当align属性设置为“center”的时候，标题就居中对齐了而在标记中也增加了align属性的设置，并设置为“right”，这时该标题就右对齐了第2章 HTML5语言基础用bgcolor属性设置背景颜色例如：网页背景色通过bgcolor属性设置其中文字的颜色通过text属性设置第2章 HTML5语言基础用bgcolor属性设置背景颜色例如：网页背景色通过bgcolor属性设置，文字的颜色通过text属性设置在页面中，除了预先通过名称定义的颜色之外，还可以使用颜色代码的方式来指定颜色例如bgcolor属性设置为“#CCCCFF”，这是用了另一种颜色的表达方式，即颜色代码的方式第2章 HTML5语言基础设置文字的特殊样式 标记显示效果示效果文字以粗体方式显示文字以斜体方式显示文字以加下画线方式显示文字以加下删除线方式显示文字以放大方式显示文字以缩小方式显示文字以加强强调方式显示文字以强调方式显示用来显示电子邮件地址或网址用来说明代码与指令第2章 HTML5语言基础设置文字的大小和颜色（）使用标记设置字体相关的属性，标记有3个主要属性，分别用于设置文字的字体、大小和颜色。

例如：互联网发展的起源face属性用于设置文字的字体，例如宋体、楷体等；size属性控制文字的大小，可以取1到7之间的整数值，color属性用来设置文字的颜色第2章 HTML5语言基础网页中的特殊文字符号由于大于号和小于号被用于声明标记，因此如果在HTML代码中出现“”就不会再被认为是普通的大于号或者小于号了如果要显示“xy”这样一个数学公式，该怎么办呢？这时就需要用“<”代表符号“”前面谈到过，文字与文字之间，如果超过一个空格，那么从第2个空格开始，都会被忽略掉如果需要在某处使用空格，就需要使用特殊符号来代替，空格的符号是“ ”一些符号是无法直接用键盘输入的，也需要使用这种方式来显示，例如版权符号的“”需要使用“©”来输入标记，为上标标记，用于将数字缩小后显示于上方；标记，为下标标记，用于将数字缩小后显示于下方此外，还有几个特殊字符，字符“÷”代表符号“”，字符“±”代表“”，字符“‰”代表“”，字符“↔”代表双向的箭头第2章 HTML5语言基础在网页中使用图像（）目前在网页上使用的图片格式主要是PNG、JPG和GIF三种。

JPG格式为静态图像压缩标准格式，它为摄影图片提供了一种标准的有损耗压缩方案它可以保留大约1670万种颜色，对于照片类型的图片，通常选择JPG格式保存而且在图像处理软件中可以选择适当压缩率，达到清晰度和文件大小的平衡GIF格式只支持256色以内的图像，因此如果用GIF格式保存颜色丰富的照片类型图片，效果就会很差，因此它适合保存卡通类以线条为主的图片GIF格式另一个优点是支持透明色，可以使图像浮现在背景之上PNG格式出现晚于JPG格式和GIF格式，它能够兼具二者的优点当设置为256色时，PNG格式可以达到和GIF格式相同的效果也可以实现无损的高清晰度压缩而且PNG拥有alpha透明，即半透明的能力但PNG格式不支持有损压缩，它是用固定的LZ77压缩算法，不能设定压缩率第2章 HTML5语言基础在网页中使用图像（）网页中使用图片：第2章 HTML5语言基础在网页中使用。