网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第1章 HTML入门

第1章HTML入门《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》学习目标/Target了解网页和网站的基本概念，能够说明二者之间的联系了解网页基本构成要素，能够描述网页的基本构成要素了解网站页面构成，能够描述网站的页面构成了解网站类型，能够描述常见的网站类型熟悉常用的浏览器，能够区分常见的浏览器学习目标/Target熟悉网站制作流程，能够描述网页制作的基本流程熟悉网页设计原则，能够描述网页设计的基本原则熟悉网页设计规范，能够描述网页设计的基本规范掌握HBuilderX的安装与使用，能够独立完成HBuilderX的安装并使用它编写

网页掌握人工智能网页工具的使用，能够运用AI网页工具快速编写网页章节概述/Summary网页和网站伴随着互联网的发展，充满人们生活的每个角落。人们可以在计算机上浏览网页新闻，通过网站购物，观看视频。面对着每天不绝于眼耳的各类网络资讯，有没有自己建设一个网站的想法呢？为实现这个想法应该储备什么知识与技能呢？从本章开始将逐步深入地讲解HTML入门的相关知识和技能。目录/Contents1.11.2网页和网站简介网站制作流程1.3网页设计原则目录/Contents1.41.5网页设计规范网页编辑器1.6AI实践：AI网页工具初体验网页和网站简介1.11.1网页和网站简介说到网页和网站其实大家并不陌生，我们用计算机在网上浏览新闻、查询信息、查看图片等都是在浏览网页。1.1.1网页和网站基本概念网页是一种可以在互联网传输，能被浏览器识别显示出来的编码文件，是网站的基本构成元素。1.认识网页1.1.1网页和网站基本概念网站是由多个网页组成，每个网页之间并不是杂乱无章的，将网页有序链接在一起就组成了一个网站。2.认识网站1.1.2网页基本构成要素文字图像超链接多媒体1.1.2网页基本构成要素文字作为信息传达的重要载体，也是网页构成的基础要素。网页中文字主要包括标题、信息、文字链接等几种形式。1.文字1.1.2网页基本构成要素图像具有比文字更加直观、强烈的视觉表现效果，在网页中主要是承担提供信息、展示作品、装饰网页、表现风格及跳转链接等功能。2.图像1.1.2网页基本构成要素在网页中，超链接是指从一个网页指向一个目标的连接关系。3.超链接1.1.2网页基本构成要素多媒体主要包括动画、音频和视频，这些是网页构成元素中最吸引人的地方，能够使网页更时尚、更炫酷。4.多媒体1）动画由于动态的图像比静态的图像更能吸引用户注意，因此在网页中视觉焦点位置，通常会采用动画来吸引访问者。2）音频音频的格式有WAV、MP3和OGG等，不同的浏览器对于音频文件的处理方法不同，彼此间有可能不兼容。3）视频在网页中视频文件也很多见，常见的视频文件格式有FLV、MP4等。运用视频文件可以让网页变得更加丰富多彩。1.1.3网站页面构成进入网站首先看到的是首页，首页承载了一个网站中最重要的内容。作为网站的门面，首页是给予用户第一印象的核心页面，也是品牌形象呈现的窗口。1.首页1.1.3网站页面构成列表页主要用于展示产品的相关信息。例如，下图页面展示了比首页更多的产品信息，访问者还可以对产品信息进行初步的筛选。2.列表页1.1.3网站页面构成详情页主要是对网站公司简介、服务等方面进行宣传，作为子级页面要与首页的色彩风格一致，页面中装饰元素也要与其他页面保持一致，使得整个网站具有整体性。3.详情页1.1.4网站类型企业类网站某资讯门户类网站1.1.4网站类型购物类网站个人网站1.1.5浏览器概述浏览器是网页运行的平台。常见的浏览器有IE浏览器（目前已被淘汰）、火狐浏览器、谷歌浏览器、Edge浏览器、Safari浏览器和Opera浏览器等。IE浏览器火狐浏览器谷歌浏览器Edge浏览器Safari浏览器Opera浏览器1.1.5浏览器概述IE浏览器的全称是InternetExplorer，由微软公司推出，直接绑定在Windows操作系统中，无须下载安装。IE有6.0、7.0、8.0、9.0、10.0、11.0等版本。1.1.5浏览器概述火狐浏览器的英文名称为MozillaFirefox（简称Firefox），是一个自由并开源的网页浏览器。Firefox使用Gecko内核，该内核可以在多种操作系统如Windows、macOS以及Linux上运行。1.1.5浏览器概述谷歌浏览器的英文名称为Chrome，是由谷歌（Google）公司开发的网页浏览器。谷歌浏览器吸收了其他开源软件的优点，极大地提升了浏览器的稳定性、速度和安全性，并创造出简单有效的使用界面。网站制作流程1.21.2网站制作流程确定网站主题网站整体规划收集素材设计网页效果图上传和发布网站开发动态网站模块搭建网站静态页面页面中特殊元素的设计1.2网站制作流程调查网站建设的目标网站面向人群企业的产品企业的服务分析主题要小而精，定位不宜过大过高主题要能体现企业自身的特点网站主题是网站的核心部分。一个网站只有在确定主题之后，才能有针对性地选取内容。1.确定网站主题1.2网站制作流程对网站进行整体规划能够帮设计师快速理清网站结构，让网页之间的关联更加紧密。2.网站整体规划1.2网站制作流程文本素材图片素材丰富的素材不仅能够让设计师们更轻松的完成网站的设计，还能极大地节约设计成本。3.搜集素材1.2网站制作流程根据网站的内容确定网站的风格根据网站的内容确定网站的色彩根据网站的内容确定网站的表现形式在设计网页效果图时，设计师应该根据网站的内容确定网站的风格、色彩以及表现形式等要素，完成页面的设计部分。4.设计网页效果图1.2网站制作流程特殊元素是指网页中包含的非系统默认字体、动态图、视频等。这些元素在制作效果图时都会以静态图片的形式展现。5.页面中特殊元素的设计搭建静态页面是指将设计的网页效果图转换为能够在浏览器中浏览的页面。6.搭建网站静态页面颜色

尺寸辅助图片观察网页效果图的主色调，了解页面的配色方案观察网页效果图的尺寸，确定页面的宽度和模块的分布。观察网页效果图，看哪些地方使用了素材图片1.2网站制作流程开发动态网站技术PHPJavaPython静态页面建设完成后，如果网站还需要具备一些动态功能（如搜索功能、留言板、注册登录系统、新闻信息发布等），就需要开发动态功能模块。7.开发动态网站模块1.2网站制作流程SFTPHBuilder网页制作完成后，最终要上传到Web服务器上，网页才具备访问功能。在网页上传之前首先要申请域名和购买云服务器，然后使用相应的工具上传即可。8.上传和发布网站网页设计原则1.31.3网页设计原则1）用户优先2）考虑用户带宽以用户为中心的原则实际是要求设计师要站在用户的角度进行思考。1.以用户为中心1.3网页设计原则赏心悦目、富有创意的网页往往更能够抓住访问者的眼球。2.视觉美观鲜明的主题可以使网站轻松转化一些高质量有直接需求的用户，还可以增加搜索引擎的友好性。3.主题明确1.3网页设计原则一个优秀的网页是内容与形式统一的完美体现，也就是说网页在主题、形象、风格等方面都是统一的。4.内容与形式的统一网页设计规范1.41.4网页设计规范在设计网页时，首先要了解网页的设计规范，才能将设计标准化，使其更符合网页设计的特点。1.4.1配色原则确定主辅色遵循配色方案网页中运用的色彩通常分为主题色、辅助色、点睛色三类使用同类色、邻近色、对比色进行配色。1.4.1配色原则主题色是网页中最主要的颜色，网页中占面积较大的颜色、装饰图形颜色或者主要模块使用的颜色一般都是主题色。1.主题色辅助色的作用是使页面配色更完美更丰富。辅助色的视觉重要性和体积仅次于主题色，常常用于陪衬主题色，使主题色更突出。2.辅助色1.4.1配色原则点睛色通常用来打破单调的网页整体效果，营造生动的网页空间氛围。所以在网页设计中通常以对比强烈或较为鲜艳的颜色作为点睛色。3.点睛色1.4.1配色原则同类色配色临近色配色1.4.1配色原则对比色配色1.4.2设计尺寸规范主流屏幕分辨率页面尺寸和版心1366×768px1920×1080px2560×1440px3840×2160px页面尺寸：1200~1920px版心尺寸：1000~1200px网页设计尺寸是指在设计界面时的宽度和高度。在设计网页时要考虑计算机屏幕的分辨率，以及浏览器的有效可视区域。知识点概述1.4.3字体规范网页界面中，字体编排设计是一种感性的、直观的行为。选择什么样的字体字号以整个网页界面和用户的感受为准。知识点概述字体字号/px字体样式具体应用宋体12无用于正文中和菜单栏及版权信息栏中；加粗时，用于正文显示不全时出现的“查看详情”上或登录/注册上微软雅黑其他宋体14无用于正文中和菜单栏及版权信息栏中；加粗时，用于栏目标题中或导航栏中微软雅黑其他宋体16无用于正文中和菜单栏及版权信息栏中；加粗时，用于导航栏中或栏目的标题中或详情页的标题中微软雅黑其他颜色应用色值标题颜色#333333正文颜色#666666辅助说明颜色#9999991.4.4命名规范页头header登录条loginbar标志logo侧栏sidebar导航nav子导航subNav广告条Banner菜单menu下拉菜单dropMenu工具条

toolbar表单form箭头arrow滚动条scroll内容content标签页tab列表list小技巧tips栏目标题title链接links页脚footer下载download版权copyright合作伙伴:partner主体

main作为一个完整的页面，往往包含很多部分，如logo、导航、banner、内容主体、版权等。设计界面时，按照规范命名图层或图层组合，有利于快速查找和修改页面效果，还可大幅提高切图和后期制作的工作效率。知识点概述网页编辑器1.51.5.1常见的网页编辑器DreamweaverVisualStudioCode1.5.1常见的网页编辑器HBuilderX1.5.2HBuilderX的安装与使用首次启动页面HBuilderX自述页面1.5.2HBuilderX的安装与使用HBuilderX自