网页设计与制作项目化教程PPT完整全套教学课件

网页设计与制作CHAPTERONE全套可编辑PPT课件目录学习网站的建设基础知识网站的规划与建设学习HTML5基础学习CSS3样式基础CSS3高级篇学习创建CSS3盒子模型DIV+CSS布局页面JavaScript与jQueryMobile的使用DreamweaverCC制作网页创建模板和库jQueryUI使用jQueryUI创建行为使用photoshop制作网页素材综合项目实践教学目标通过本课程的学习，理解和掌握网站制作的方法和流程掌握网页创意、设计和制作的方法技巧掌握前端开发技术：HTML5+CSS3+JavaScript熟练的应用DreamweaverCC工具开发网页能维护优化与推广基本的网站网页网络学习资源W3school在线教程菜鸟教程https:///

哔哩哔哩https:///

github

/

项目一学习网站建设基础知识能够理解网站与网页的基础知识了解常见的浏览器理解web的标准

掌握网页的设计规范把握网页设计的流行趋势学习目标Contents目录认识网站与网页任务1了解常用浏览器任务2掌握Web标准任务3掌握网页设计规范任务4了解网页设计发展的浏览趋势任务5网页赏析01认识网站与网页02任务1认识网站与网页网站分类03网页的基本概念041.1网站赏析北京京剧院网站网站赏析:北京京剧院：是我国京剧文化传承传播的地方，京剧亦是展现我国特色文化的一种艺术形式。设计师抓住了特色文化艺术的核心，将特色文化元素融入到网站当中，提高了京剧院的网站辨识度。其中红色的logo让人时刻感到中国文化特色的深厚底蕴。1.1网站赏析华为云网站网站赏析:整体网站界面设计在华为视觉规范进行设计，黑白灰+华为红，塑造出简洁科技风网站，首页、展厅、峰会直播页面以2.5D扁平化插画风格展现，将一些重点元素以svg动效方式呈现，给用户营造一种线上峰会式体验1.1网站赏析武水集团网站网站赏析:风格上以浅蓝为主色调，配有水塔的标志性建筑，突出了水是万物之母，生命之源主题以及百年历史企业的担当和使命。了自家的主题。1.1网站赏析海尔集团官网网站赏析:主屏背景以简洁、大气的家居为主，网站整体风格充满科技感和舒适感，符合智能家居行业的风格。。1.1网站赏析佳农网站网站赏析:佳农的网站设计师在排版设计上采用了极简的风格，首页没有太多的文字，整个界面清新自然，上海马拉松图、商超的香蕉主图、以配送服务等图片，将“团队、诚信、专业、创新、共赢、荣耀"的核心价值观展示得淋漓尽致感谢您的观看！1.2认识网站与网页网页设计3网站的定义1网页及主页2任务1认识网页与网站网站是指在Internet中根据一定规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一个信息平台，就像通告栏一样，人们可以通过浏览器来访问网站，获取自己所需的信息或享受网络服务。1.2认识网站与网页网站的定义1任务1认识网页与网站网页是internet的基本信息单位，一般网页中都会有文本和图片等信息，复杂一些的网页中还会有声音、视频等多媒体文件内容。通过超链接实现网络资源的非线性访问是网页最大的特点。1.2认识网站与网页网页及主页2主页(homepage)，也被称为首页，是用户打开浏览器时默认打开的网页，主要包含个人主页、网站网页、组织或活动主页、公司主页等，通常用index命名或者default命名主页与网页的区别主页：主页是用户通过搜索引擎访问一个网站时所看到的首个网页。网页：网页包含主页，是构成网站的基本元素，是承载各种网站应用的平台。网页设计(webdesign,又称为WebUIdesign,WUIdesign,WU).是根据企业希望向浏览者传递的信息(包括产品、服务、理念文化).进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传的其中-种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。网页设计--般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同，应选择不同的网页策划与设计方案。网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化。在功能限定的情况下。尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光。交互等来实现更好的视听感受。1.2认识网站与网页网页设计31.3网站分类资讯门户类网站企业品牌类网站个人网站展示型网站营销型网站电商型网站职能网站网站的分类41.资讯门户类网站例如：新浪网、搜狐、网易等本类网站以提供信息资讯为主要目的，是目前最普遍的网站形式之一。这类网站虽然涵盖的工作类型多，信息量大，访问群体广，但所包含的功能却比较简单。其基本功能通常包含检索、论坛、留言，也有一些提供简单的浏览权限控制。1.3网站分类2.企业品牌类网站例如：三只松鼠、海尔、海底捞、联想等企业品牌网站建设要求展示企业综合实力，体现企业文化和品牌理念。企业品牌网站非常强调创意，对于美工设计要求较高。网站内容组织策划，产品展示体验方面也有较高要求。网站利用多媒体交互技术(视频)，动态网页(JS+JQ)技术，针对目标客户进行内容建设，以达到品牌营销传播的目的，如图三只鼠标网站1.3网站分类3.个人网站例如：崔老师个人网站等个人网站：是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。如图崔北亮个人网站1.3网站分类4.展示型网站例如：海澜集团、凡科建站、海尔集团等这类网站主要是以产品展示为主，主要是企业介绍、企业产品种类、相关案例等，产品规格和型号方便潜在客户随时看产品信息，网站简单、朴实，没有多么华丽的外观，就是一个展示企业产品业务的简单网站。1.3网站分类5.营销型网站例如：培训类网站、美容网站等营销型网站布局体现产品用户体验+搜索引擎优化规则的合理，营销型网站建站的目标性是以引导顾客关注，发起反馈的说服性网站，在最短时间内抓住顾客的眼球，快速理解，赢得信任，催促行动。1.3网站分类6.电商型网站例如：淘宝、拼多多、京东、唯品会等电商网站对于企业来说，主要是用来对产品进行在线销售，这类型的网站里通常会有大量的照片，醒目的价格、优惠信息、还有购物车和付款方式，搜索框等功能，方便用户购买。1.3网站分类7.职能网站例如：百度、站长工具、中国铁路12306等网站提供某一种或者几种功能，比如站长工具、百度搜索、物流信息查询、火车票购买等。功能性网站以实现某一种或者几种功能为主要服务内容。用户也是为了实现某一种功能来浏览该网站。1.3网站分类1.4网页的基本概念1.internet与www2.Web3.URL4.DNS5.HTTP6.静态网页和动态网页Internet:就是将许多不同功能的计算机通过线路连接起来组成的一个世界范围内的网络。从网络通信技术的角度看，Internet是一个以TCP/IP网络协议连接各个国家、各个地区、各个机构的计算机网络的数据通信网。从信息资源的角度看，Internet是一个集各个部门、各个领域的各种信息资源为一体，供网上用户共享的信息资源网。WWW:是一种建立在Internet上的全球性的、动态交互的、多平台的分布式图形信息系统。www是WorldWideWeb的英文缩写,中文为全球信息网或万维网,Web是WWW的简称。Internet提供的基本服务包括www服务，电子邮件（E-mail)，文件传输(FTP)，远程登录(Telnet)，新闻论坛(Usenet)，新闻组(NewsGroup)，电子公告栏(BBS),搜索，网上购物、网上理财、网上娱乐等。1.internet与www1.4网页的基本概念Web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。Web非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形、媒体和文本的性能。2.Web1.4网页的基本概念Web工作原理IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0到255之间的任意整数。例如，昆明工业职业技术学院官网的

IP地址是

。IP地址(InternetProtocolAddress)用于确定Internet上的每台主机，它是每台主机唯一性的标识。在Internet上，每台计算机或网络设备的IP地址是全世界唯一的。3.IP地址1.4网页的基本概念4.DNSDNS（英文DomainNameSystem的缩写）是域名解析系统。在Internet上域名与IP地址之间是一一对应的，虽然便于人们记忆，但计算机只认识IP地址,将好记的域名转换成IP的过程被称为域名解析。例如，

是昆明工业职业技术学院的域名。1.4网页的基本概念URL是UniformResourceLocator的缩写，中文译为“统一资源定位符”，其实就是WEB地址，俗称“网址”。在WWW上的所有文件都有唯一的URL，只要知道资源的URL，就能够对其访问。URL格式：协议名：//主机域名或IP地址/路径/文件名称例如，/

就是菜鸟教程的URL地址。5.URL1.4网页的基本概念HTTP是HyperTextTransferProtocol的缩写，中文译为“超文本传输协议”。超文本传输协议(HyperTextTransferProtocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。6.HTTP1.4网页的基本概念静态网页是指纯粹的HTML格式的网页，它能够被浏览器直接编辑，是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件等。动态网页：并非指网页上具有各种动画和其他视觉上的“动态效果”,动态网页也可以是纯文字的，与静态网页的根本区别是，动态网页是以数据库技术为基础采用动态网页技术生成的网页。动态网页中的脚本语言，如ASP、PHP、JSP、ASP.net等。7.静态网页和动态网页1.4网页的基本概念感谢您的观看！任务2了解常见浏览器浏览器是网页运行的平台，网页文件需使用浏览器打开才能看到网页所呈现的效果。根据全球知名的网络流量监测机构StatCounter发布数据所示，目前全球占比高的浏览器有Chrome（谷歌）、Safari(苹果浏览器)、Edge、Firefox（火狐）、SamsungInternet浏览器等。2022年12月发布结果任务2常用的浏览器GoogleChrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。谷歌浏览器在世界浏览器市场占有率最高，2022年12月占比高达65.86%.界面简洁，插件极其丰富，什么看VIP视频，百度网盘资源直接下载都只是小菜一碟，没有插件的谷歌浏览器性能只发挥了40%。谷歌浏览器Safari浏览器任务2常见浏览器Safari是一款由苹果公司开发macOS操作系统中的浏览器，是各类苹果设备（如Mac、iPhone、iPad、iPodTouch）的默认浏览器。Safari使用WebKit浏览器引擎。它可以以惊人速度渲染网页，与Mac及iPodtouch、iPhone、iPad兼容，它还会检查拼写和语法。任务2常见浏览器edge浏览器采用Chromium内核，可以不用科学上网就使用各种插件，看pdf非常方便，可跨平台同步Microsoftedgeedge浏览器任务2常用的浏览器介绍火狐浏览器MozillaFirefox，中文通常称为“火狐”，是一个开源网页浏览器。由于是开源的，所以它集成了很多小插件，开源拓展等功能。发布于2002年，它也是世界上使用率前四的浏览器。由于火狐浏览器对WEB标准的执行比较严格，所以在实际网页制作过程中火狐浏览器是最常用的浏览器之一，对HTML5的支持度也很好。任务2常用的浏览器介绍UC浏览器UC浏览器是阿里巴巴移动事业部旗下核心产品，2022年12月UC浏览器已占据全球移动浏览器市场份额的1.11%，成为了全球第四大移动浏览器。任务2常用的浏览器介绍QQ浏览器采用chromium内核+IE双内核，让浏览快速稳定，它同时可以安装众多chrome的拓展，支持QQ快捷登录，登录浏览器后即可自动登录腾讯系网页。虽说没有国外浏览器那样方便，插件丰富，但是在国内浏览器占有率一直都比较高。搜狗、360等访问国内网站没qq浏览器快。缺点：上网慢，看视频网站卡。浏览一般网页还行。可作为辅助浏览器，访问国内网站时用！打开十几个标签内存就占了1.5G左右。星愿浏览器任务2常见浏览器星愿浏览器是一款年轻的国产良心浏览器，创始团队是前傲游浏览器的工程师，可谓青出于蓝而胜于蓝，简洁但不简单。个性化界面（随便添加、拖动搜索框、网址图标，图示内容均可随意拖动，透明度等）。漫画阅读模式，视频下载，视频弹窗，购物搜索，以图搜图，多线程高速下载等等。最重要的是Chromium内核，能完美兼容Chrome插件，有插件就可以为所欲为，所以功能方面不用担心。内存占用也不大。常用的浏览器Edge浏览器任务2常用的浏览器Safari浏览器谷歌浏览器火狐浏览器UC浏览器QQ浏览器星愿浏览器任务3掌握Web标准Web是一系列标准的集合,主要包括结构(Structure)、表现(Presentation)和行为(Behavior)3个方面。（1）结构结构用于对网页元素进行整理和分类，主要学习的是HTML，即网页文档的内容。（2）表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。（3）

行为行为是指网页模型的定义及交互编写，主要包括DOM和ECMAScript两个部分。其中，DOM（DocumentObjectModel）是文档对象模型；ECMAScript(EuropeanComputerManufacturersAssociation)是ECMA以JavaScript为基础制定的标准基础。感谢您的观看！任务4网页的设计规范网页的设计规范：主要包括网页的尺寸、字体字号、字颜色、行距、链接、按钮等方面。网页尺寸(像素PX)字体、字号字颜色行距链接整齐的概念和应用搜索框设计规范搜索按钮页脚信息任务4网页的设计规范1.网页尺寸(像素PX)从2022年statcounter统计数据来看，目前分辨率为1920*1080占比最大，为了兼顾小屏幕用户，安全的网页尺寸是：宽度:1920px；可视范围（版心）:1100px;

导航高:60px(参考值)banner高:600px左右任务4网页的设计规范2.字体、字号导航文字字体一般用：微软雅黑、宋体；字号一般为16px、18px、20px。正文一般采用宋体或者微软雅黑，字号为14~16px，不加粗；正文采用微软雅黑案例，如下图腾讯网所示；正文的英文文字大小:从9px开始就能清晰显示，选择空间很大。10px、11px、12px、13px都是常见的字号。常用Arial、Newtimes、verdana、sans-serif等高品质字体。任务4网页的设计规范3.字颜色网站需要定出主文字颜色，特殊情况外可以有2种左右的辅助文字颜色;正文的文字颜色多采用深蓝色或深灰色网页设计中不要采用纯黑:#000000建议使用:最深为#333333;最浅灰色可考虑:#999999如下图所示任务4网页的设计规范3.字颜色文字颜色层次化(主文、副文，提示注释等)在界面中的文字分为三个层级:主文、副文、提示文案或是其他情况在白色的背景下，字体的颜色层次其实就是:深灰、中灰、浅灰。常用的色值是:#333333;#666666;#999999任务4网页的设计规范4.行距文字的行距—般是文字的1.5-2大小例如，12号文字:行距为18-24px；14号文字:行距为21-28px案例凤凰网，如下图所示。任务4网页的设计规范5.链接文字链接形式不得超过3种颜色(规定其中一种为主链接色)显性链接:不单击也可以看出它是链接的链接。例如百度网所示隐性链接:不单击的话看不出来有链接的链接。例如腾讯网所示任务4网页的设计规范6.整齐的概念和应用类似这样“豆腐块”的文字排列，在大型网站中尤为重要。如何去分割和组织大量繁杂的信息，将文字块当作图片一样来排版优化，来平衡页面。“豆腐块”四周应该空留均匀适当的间隔，有呼吸感。案例:搜狐网如图所示。大篇文章时采用段落空2字符，这样方便用户阅读案例:新浪新闻任务4网页的设计规范7.搜索框设计规范文本框(1)提示性字符:#999(2)单行文本框(3)高度:28-34px帮助信息帮助信息一般包括三块内容:限定标签提示、提示性文字、热门关键词提示等。如图所示任务4网页的设计规范8.搜索按钮搜索按钮一般包含图标形式和文字形式两种：使用图标形式时能使用放大镜的图标，而不能采用其他元素。如图所示搜索按钮规范文字为“搜索”避免采用其他描述。比如:图标形式(放大镜)和文字形式可搭配使用，会出现如下三种情况:任务4网页的设计规范9.页脚信息页脚信息一般有以下信息：1、内部导航;2、外部导航;3、各类许可证、授权证明;4、英义版权信息“Copyright@”;5、中义版权信息;6、各类网络安全/工商证明/技术支持LOGO;注意;各链接间隔统一使用“|”建议使用12号字，禁止使用加粗字体。如图所示感谢您的观看！任务5了解网页设计的流行趋式网页设计的趋势是周期性的，每年流行趋势都会随着技术、环境、事件的改变而改变。随着技术能力的增强，我们看到网站增加了很多复杂性——但网页设计师和开发人员需要对经济复苏、隐私和安全等文化现象做出反应。暗黑模式AR(增强设计）反设计极简主义元宇宙实验性文字排版数据可视化动态效果彩虹色1.暗黑模式将背景从白色的背景调整到深色暗黑模式，这种趋势不仅可以很好的增加不同创意成分出现。并且能够最大限度地减少蓝光的暴露，可以很好的节省电池。这让许多网友都深受喜爱！法拉利官网如图所示任务5了解网页设计的流行趋式2.

AR（增强现实）AR设计趋势主要是借助AR技术，将虚拟信息与现实世界巧妙融合，广泛应用于多媒体、三维模型、智能交互等方面，通过AR技术，可以增强用户体验的真实性任务5了解网页设计的流行趋式3.反设计这种有争议的风格，破坏了原有的设计模式原则，挑战性的颜色、不对称设计、混合字体和分层图像，将是反设计的特点。G官网如图所示。任务5了解网页设计的流行趋式4.极简主义极简主义仍然是2023年的设计热点，通过使用简单的形式、干净的文本和空白空间来表现设计。简单的单色和充满活力的颜色的组合，具有最高的吸引力。例symobolset官网如图所示。任务5了解网页设计的流行趋式5.元宇宙元宇宙可以被描述为一个持久的虚拟宇宙，是集虚拟世界、大数据、云计算、区块链于一身的整合与应用，是虚拟体验的下一个创新。例元宇宙美术馆网站，如图所示任务5了解网页设计的流行趋式6.数据可视化数据的可视化有助于以引人入胜的方式传达正确的信息。它已经深入我们的生活中，例如疫情信息图、淘宝双11的可视化数据大屏、高德地图都属于可视化技术的应用。打开如图云南安宁地图。如图所示。任务5了解网页设计的流行趋式7.3D插画插画已在2021年UI设计已流行起来，在2022年会变得更加强劲。尤其是在有趣的卡通应用程序中，柔和的糖果色变得逼真和更有吸引力，我们可以确定3D插图在明年会成为主要趋势。例beans公司官网：如图所示。任务5了解网页设计的流行趋式8.动态效果2023动态设计将会成为网页设计的主流趋势之一，动态的形象往往会被眼球第一时间捕捉。例京东方网站，如图所示。任务5了解网页设计的流行趋式9.彩虹色受彩虹色启发的多色设计很受欢迎，通常与其他很酷的趋势设计风格相结合。将以美丽的多色渐变、简单的单色3D设计组合、平坦华丽的设计元素、五颜六色的图案甚至多色光效的形式看到它。例moodmix网站，如图所示。任务5了解网页设计的流行趋式10.实验性文本排版2023年的文字排版设计更多的是一种实验性的设计尝试，设计师的排版设计会更加大胆，也更加脱离常规。实验性的文字排版具有一定的冒险性，但如果设计师能够保证文字可读性，这样的文字排版形式或许能擦出更大的创意火花。例creativemarket网站中案例，如图所示。任务5了解网页设计的流行趋式感谢您的观看！DreamweaverPhotoshopWordPressBootstrapIllustrator网页设计软件主要有：任务6了解常用的网页设计工具AfterEffectsAnimateASPHTML、HTML5ASP.NETPHPCSS、CSS3JavaScript网页设计主要技术有：JSP任务6了解常用的网页设计工具感谢您的观看！项目二网站的规划与建设了解网站开发制作的流程掌握Xmind思维导图软件规划网站目录规划一个化妆品网站案例学习目标Contents目录网站的建设与规划任务1DreamweaverCC2017站点建设任务2初识Dreamweaver01创建站点的准备02创建与设置站点03任务2DreamweaverCC2017站点建设网站开发制作的流程01应用Xmind思维导图软件规划网站栏目02任务1网站的设计与规划化妆品网站项目分析03任务1网站的设计与规划1.网站开发制作的流程1.需求分析2.设计阶段3.程序开发阶段4.测试和上线5.维护推广1.网站开发制作的流程1.需求分析(1)确定网站主题(2)收集素材(3)确定网站风格（4）规划站点1.网站开发制作的流程1.需求分析（4）规划站点一个网站的设计成功与否,很大程度上取决于设计者的规划水平。网站规划包含很多内容,如网站的结构、栏目,网站的风格、导航、颜色搭配、版面布局、文字图片的运用以及画出网站内容版块的草图等。只有在制作网页之前把这些方面都考虑到了,才能在制作时轻车熟路。网站设计与规划大致包括二个方面：1、网站的总规划书2、网站的目录结构1.网站开发制作的流程1.需求分析（4）规划站点①网站的总规划书以云南少数民族服饰网站为例政府为了宣扬云南多民族的大团结的形象，特地制作以介绍云南少数民族的服饰的网站，在网站规划时可以考虑以下几个方面：(1)云南有26个少数民族，找有代表性的民族进行介绍宣传：(2)服饰保养是大部分购买服饰的客户感兴趣的内容,可以作为辅助资料。

(3)从方便交流少数民族文化又设了交流栏目在制作网站之前,首先确定一个简单的策划方案,如图2-1-2所示。其次，结合主题设计网站各网页的结构草图(如图2-1-3所示)：结构草图可以手绘或借助Photoshop等图像处理工具,根据预先规划的网站布局添加版面内容,如图2-1-4所示。网站名称：云南少数民族服饰网站目标：属于形象推广类网站列出具有代表性的民族服饰保养与客户建立网上交流。网站地图(栏目及分布)：

网站首页

网站标准色：以橙色为基调网页分辨率:1920*1080网站风格:简洁彝族白族傣族纳西族…壮族服饰保养在线交流图2-1-2策划书1.网站开发制作的流程1.需求分析（4）规划站点②.网站的目录网站的目录结构是指网站中对网页文件进行管理所建立的目录结构,对网站资源的管理、更新和维护非常重要。表2-1-4是根据网站栏目及内容规划的目录结构,进一步建立网站文件和文件夹,如图2-1-5所示在Dreamweavercc2017中实现效果图：根目录文件夹及文件名称栏目说明D:\wear<images><CSS><HTML>Index.html文字.txt网站中用到的所有图像文件夹网站中用到的所有样式文件夹存放除了主页以外的子网页的文件夹

首页存放文字内容的文件1.网站开发制作的流程2.设计阶段根据网站草图由美工制作成效果图。首先画出效果图然，效果图可以手绘，也可以用软件绘制。如图2-1-6所示。1.网站开发制作的流程3.程序开发阶段根据草图划分页面结构和设计前端和后台可以同时进行。前端根据美工效果负责制作静态页面；后台根据页面结构和设计，设计数据库数据结构和开发网站后台。在本地搭建服务器，测试网站是否存在问题。若无问题，则可以将网站打包，使用FTP上传至网站空间或者服务器。在网站上线之后，根据实际情况完善网站的不足，定期维护网站，保障网站运营顺畅，然后对网站进行推广宣传等。4.测试和上线5.维护推广感谢您的观看！任务1网站的建设与规划2.应用Xmind思维导图软件规划网站栏目思维导图可以应用于生活和工作的方方面面，例如，写作、设计、演讲、管理、会议等，运用思维导图能使人思维清晰、有条理。我们在做网站开发的前期也可以用思维导图软件整理工作的步骤和方案，以及网站栏目，本节我们将介绍运用XMind思维导图软件规划网站栏目。任务1网站的设计与规划2.应用Xmind思维导图软件规划网站栏目使用Xmind思维导图软件1.登录Xmind官网下载免费版的XMind软件，如图所示2.下载安装好后，就可以启动xmind软件，可以选择一种现有的模板如图1-44所示，也可以创建空白的文档。XMind使用非常简单，使用ENTER(回车键)创建同级主题，Tab键创建一下级主题。任务1网站的建设与规划2.应用Xmind思维导图软件规划网站栏目使用Xmind思维导图软件运用Xmind创建云南少数民族网站栏目，如图所示技能拓展自己拟定一个网站的主题,用XMind软件规划出该网站的栏目，以jpg的格式导出来。感谢您的观看！任务1网站的建设与规划3.

化妆品网站项目分析1)项目背景2）项目分析3）项目制作3.

Buteor化妆品网站项目分析1)项目背景

Buteor作为中国领先的护肤品牌,专注于纯净无污染的美肌能量和深海护养成分,为千万女性提供全面、全新的护肤体验,深受消费者青睐和信任。旗下8大明星产品系列针对20-35岁美丽女性。网站属于独立产品的宣传型网站。请从项目背景中提炼出项目的重要信息3.

Buteor化妆品网站项目分析2)项目分析3.

Buteor化妆品网站项目分析2)项目分析Ubteor

(网站定位)独立产品的宣传型网站,需要突出产品特征,符合年轻女性的审美感受关键词补水、健康、干净、柔美、白富美、滋润3.

Buteor化妆品网站项目分析2)项目分析Buteor网站功能(展示型)首页关于我们Buteor简介品牌故事大事记资质荣誉卓越团队全线产品最新产品产品列表最新动态公司新闻行业动态媒体报道美丽分享美丽学院成功案例Buteor沙龙会员专区加入Buteor会员商城服务专区售后服务联系方式在线反馈3.

Buteor化妆品网站项目分析2)项目分析Buteor广告语剔透水肌源自阿尔卑斯山，尽显女性魅力FromAlps,showfemalecharm水润精华露强化保湿，让肌肤24小时持久水润美丽分享分享一段美丽的文字美丽在远方，那是陌生的感觉给你的美...而只能隔着厚厚的木质栅栏，注目着那些用图片和文字...【详情】2022.3.33.

Buteor化妆品网站项目分析2)项目分析网站的尺寸要求：版心宽度:1000PX整站宽度:1920PX首屏高度:800PX导航高度:40PX导航文字:14PXButeor联系方式电话:4000388866地址:中国·广州市白云区白云一路梦天大厦18楼邮箱:Buteor@微博·微信·腾讯QQ3.

Buteor化妆品网站项目分析2)项目分析公司喜欢的风格3.

Buteor化妆品网站项目分析2)项目分析公司喜欢的风格3.

Buteor化妆品网站项目分析2)项目分析公司喜欢的风格3.

Buteor化妆品网站项目分析2)项目分析公司喜欢的风格3.

Buteor化妆品网站项目分析2)项目分析公司喜欢的风格3.

Buteor化妆品网站项目分析2)项目设计寻找素材：水波纹、泡泡等素材选择形象代言人启动PS制作网站首页效果图3)项目制作感谢您的观看！认识DreamweaverCC201801建立本地站点02任务2DreamweaverCC2018站点建设站点文件管理031认识DreamweaverCC2018任务2DreamweaverCC2018站点建设

应用程序栏工作区切换区文档标签文档工具栏设计窗口代码窗口标签选择器属性面板状态栏面板组2建立本地站点任务2DreamweaverCC2018站点建设

3站点文件的管理任务2DreamweaverCC2018站点建设

感谢您的观看！项目三掌握HTML5基础认识HTML及其常用的编辑工具学会使用HTML常用标签学会使用新增的HTML5标签学习目标Contents目录任务1初识HTML任务2HTML的编辑工具任务3HTML的常用标签任务4HTML5的新增标签的使用1.1HTML特殊字符1.2任务1初识HTMLHTML文档基本格式、标记及其属性1.1.1HTML基本格式1.1.1HTML基本格式HTML文档的基本格式其中主要包括<!doctype>文档类型声明,<html>根标记、<head>头部标记、<body>主体标记。1.1.2HTML标签双标签格式：<标签名></标签名>例如：<p>这是一个段落</p>2单标签

格式：<标签名/>如：<br/>1注释标签格式：<!--注释内容-->3任务1认识网页与网站1.2HTML特殊字符

字符实体表1.2.1特殊字符描述实体名称实体编号特殊字符描述实体名称实体编号空格

 ¥人民币/日元¥¥<

小于号<<€欧元€€>

大于号>>§小节§§&和号&&©版权©©"引号""®注册商标®®'撇号'(IE不支持)'™商标™™￠分¢¢×乘号××£镑££÷除号÷÷2.1SublimeText2.2任务2HTML常用编辑器VSCode2.3Dreamweaver任务1认识网页与网站2.1VSCode2.2SublimeText2.3DreameweaverCC2017技能拓展1.从官网下载安装VSCode或者Sublimetext,并安装。2.启动VSCode或者Sublimetext或者DreamweaverCC2017制作一个龙抬头介绍网页，效果图如下图所示，并对以上内容进行综合总结。3.1超链接3.2任务3HTML常用标签文本格式3.3图像表格3.43.1.1段落格式P与br1标题标记符h1-h62水平线标记符<hr>3属性功能值实例align对齐方式Center、left、right,默认是居中对齐<hralign=”left”>noshade阴影样式Noshade(省略，表示有阴影)<hrnoshade>size高度（厚度）pixels<hrsize=”50”>width长度Pixels、%<hrwidth="50%">或<hr

width="1000">3.1.1段落格式-示例效果3.1.2文本格式文本格式化1标签功能标签功能<b>定义粗体文本<sub>定义下标字<em>定义着重文字<sup>定义上标字<i>定义斜体字<ins>定义插入字<small>定义小号字<del>定义删除字<strong>定义加重语气<u>下划线3.1.2文本格式“计算机输出”标签2标签功能<code>表示计算机源代码或者其他机器可以阅读的文本内容。<kbd>定义键盘码。<samp>定义计算机代码样本。<tt>定义打字机代码。<var>定义变量。<pre>定义预格式文本。3.1.3列表格式有序列表1<ol><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ol>3.1.3列表格式无序列表2<ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul>3.1.3列表格式自定义列表3<dl><dt>水果类</dt><dd>车厘子</dd><dd>橙子</dd><dt>蔬菜类</dt><dd>萝卜</dd><dd>青菜</dd></dl>3.2超链接链接语法4绝对路径2相对路径3网页链接路径1空链接5锚点链接63.3图像图像的宽度和高度2示例3图像的插入13.4表格表格标签2表格示例3表格的插入1表格在网页中除了有合理显示文本数据的内容以外，更重要的是还有布局网页的功能。表格的插入1表格由<table>标签来定义。

<table>行：<tr>单元格<td>表格标签2标签功能标签功能<table>定义表格<thead>定义表格的页眉<caption>定义表格标题<tbody>定义表格的主体<th>定义表格的表头<tfoot>定义表格的页脚<tr>定义表格的行<col>定义用于表格列的属性<td>定义表格单元格<colgroup>定义表格列的组属性名属性值功能alignleft、center、right、justify、char规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替）bgcolor颜色名字或颜色二进制代码规定表格的背景颜色。（不推荐使用，用样式代替）border1或者其他值，默认是""规定表格单元是否拥有边框，默认为""，表示没有边框cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素cellspacing像素值规定单元格之间的空白，默认为2像素。width像素值或百分比规定表格的宽度。framevoid、above、below、hsides、lhs、rhs、vsides、box、border规定外侧边框的哪个部分是可见的。rulesnone、groups、rows、cols、all规定内侧边框的哪个部分是可见的。summarytext规定表格的摘要。border-collapsecollapse设置表格的边框是否被折叠成一个单一的边框或隔开表格标签属性2表格frame属性2frame属性值

功能void（默认值）无边框above显示上部的外侧边框。below显示下部的外侧边框。hsides显示上部和下部的外侧边框。vsides显示左右两边的外侧边框。lhs显示左边的外侧边框。rhs显示右边的外侧边框。box在所有四个边上显示外侧边框。border在所有边上显示外侧边框。表格中<tr>标签属性值设置2属性值功能alignright、left、center、justify、char定义表格行的内容对齐方式bgcolor颜色名字或颜色二进制代码设置表格行的背景颜色（一般不使用，用样式取而代之）charcharacter规定根据哪个字符来进行文本对齐charoffnumber规定第一个对齐字符的偏移量valigntop、middle、bottom、baseline规定表格行中内容的垂直对齐方式表格中<td>标签属性值设置2属性值描述alignleft、right、center、justify、char规定单元格内容的水平对齐方式nowspannowrap规定单元格中内容是否自动换行（不赞成使用，一般使用样式取而代之）rowspannumber规定单元格横跨的行数colspannumber规定单元格横跨的列数3.5表单Input元素2基本语法1示例3表单是用户和后台交互的重要纽带，我们常见的注册、登录、问卷调查等都离不开表单。基本语法1<formaction="URL"name=""method="get|post"enctype="MIME"target"">input元素……</form>表单的几个基本属性name:给表单命名。action:表单中的数据将会提交到该地址进行处理。method:数据提交到后台使用哪种HTTP提交的方式。提交方式有两种，post和getencytype:（encodetype）就是编码类型的意思。3.5.2input元素密码域password2普通按钮button3文本框text1单选按钮radio4复选按钮checkbox5提交按钮submit6重置按钮reset7图像按钮image8文件域file9菜单和列表select10其它新增的元素12文本域textarea11<inputtype=“”name="控件名称"……>Input元素的语法格式

例如：<inputtype="text"name="user"maxlength="30">

例如：<inputtype="password"name="psw"maxlength="30">

例如：<inputtype="button"value="选好了">表单综合案例—用户注册表单综合案例一般制作方法：1.插入表单2.在表单中插入表格3.根据表单元素，调整或合并表格的单元格4.在表格相应单元格中插入input元素5.设置input元素属性3.6HTML块级元素和内联元素内联元素2块级元素1<div>标签3<span>标签4块元素和内联元素相互转换51.块元素每个块元素都会独自占据一行或多行。块元素可以设置宽度、高度、对齐等属性。特点常用于网页布局和网页结构的搭建。作用常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<form>、<tabe>等等。常见的块元素块元素块级元素11.元素的类型不会独自占据一行。不可以设置宽度、高度、对齐等属性特点用于控制页面中文本的样式。作用常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等常见的内联元素内联元素内联元素（行内元素）2知识储备特殊行内元素注意：在行内元素中有几个特殊的标签。例如，<img/>标签和<input/>标签。这些特殊的行内元素可以设置宽度、高度和对齐属性，因此它们也被称为行内块元素。内联元素（行内元素）2<div>标签<div>标签属于块元素，在网页布局方面发挥着重要的作用，使用<div>我们可以定义页面的各个部分，通过与CSS相结合可以实现各种各样的效果。<div>标签3<span>标签<span>标签属于行内元素，在<span>与</span>之间只能包含文本和各种行内标签。<span>标签没有固定的表现形式，通常可配合class属性使用。当我们对<span>标签应用样式时，该标签才会产生视觉上的变化。在搭建HTML结构时，块元素能够嵌套行内元素，但行内元素不能嵌套块元素。<span>标签4块元素和内联元素相互转换5块元素和行内元素相互转换网页元素是由多个块元素和行内元素构成的盒子排列而成的。可以用display属性转换块元素和行元素的类型。

display属性常用的属性值及含义如下。(1)display:inline;转换为行内元素。(2)display:block;转换为块状元素。(3)display:inline-block;转换为行内块状元素。(4)display:none:元素被隐藏。7综合实例：读书网站网页设计2网站规划1网页制作34.1HTML5分组元素4.2任务4HTML5新增标签的使用结构元素标签4.3HTML5交互元素HTML5中新增了几个结构元素（section元素、article元素、nav元素、aside元素、header元素和footer元素），这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。

4.1HTML5结构元素header元素为页面或页面中某一个区块的页眉，通常是一些引导和导航信息。Header元素通常来放置整个页面或页面内的一个内容区块的标题，它可以包含页面标题、logo图片，搜索表单等。1、header元素

4.1HTML5结构元素语法格式：<header><h1>标题</h1>……</header>1、header元素例如

4.1HTML5结构元素nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。在一个HTML页面中可以包含多个nav元素，但并不是所有的链接都需要包含在nav元素中。通常nav元素用于以下几种场合：传统的导航条；侧边栏导航；内页导航；翻页导航。2、nav元素

4.1HTML5结构元素例如，常见的首页、上一页、下一页、尾页链接。<nav><ahref="#">首页</a><ahref="#">上一页</a><ahref="#">下一页</a><ahref="#">尾页</a></nav>学院网站传统导航条也可以用nav元素。2、nav元素

4.1HTML5结构元素3、

section元素section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。

4.1HTML5结构元素3、

section元素section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。

4.1HTML5结构元素3、section元素使用需注意以下3点：不要使用section元素设置样式作为设置样式的页面容器，那是div的工作。如果article元素、aside元素、nav元素更适合我们使用条件，那么我们就不要使用section元素。不要为没有标题的内容去使用section元素。没有标题的内容区块不要使用section元素。温馨提示

4.1HTML5结构元素4、article元素article元素定义独立的内容。该元素定义的内容必须是有意义的且必须是独立于文档的其余部分。它可是论坛帖子，博客文章，新闻内容，或者是用户的评论，亦或者其它任何独立的内容等。一个article元素通常有它自己的标题，有时还有它自己页脚。

4.1HTML5结构元素1644、article元素在HTML5中，article元素可以嵌套使用。article元素可以包含多个section元素，section元素也可以包含多个article元素。article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素侧重分段或分块，而article侧重独立性。如果一块内容相对来说比较独立的、完整

，应该使用article元素，如果你想将一块内容分成几段，应该使用section元素。

4.1HTML5结构元素aside元素通常用来表示当前页面的附属信息部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。它可以包含我们当前页面或者主题内容相关的一些引用，如侧边栏、广告、目录、索引、Web应用、链接、当前页内容简介等，有别与我们主要内容。

4.1HTML5结构元素5、aside元素166aside元素主要使用方法有两种：（1）被包含在article元素中作为主要内容的附属信息部分。比如与我们当前文章有关的参考资料、名词解释等等。（2）第二种用法是在article元素之外使用的，作为页面或者站点全局的附属信息。比如侧边栏、广告、友情链接等。

4.1HTML5结构元素5、aside元素footer元素用于定义页面或区域的页脚，可以为网站的版权信息、作者、日期及联系信息。一个页面中可以包含多个footer元素，也可以在section元素或article元素中使用footer元素。6、

footer元素

4.1HTML5结构元素168footer元素header元素article元素nav元素aside元素section元素

4.1HTML5结构元素分组元素用于对页面元素进行分组。我们熟悉的div、p、ol、ul都是分组元素标记。本节学习3个新增的分组元素，分别是figure元素、figcaption元素和hgroup元素。

4.2HTML5分组元素figure元素用来定义一块独立内容，该内容如果被删除也不会对周围的内容有影响。它可以用来表示图片、图表、音频、视频，代码等。figcaption元素用于为figure元素组添加标题，figcaption只能作为figure元素的子元素，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。1、

figure元素和figcaption元素

4.2HTML5分组元素hgroup元素用于对网页或区段（section）的标题进行组合。它常与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。1712、hgroup元素

4.2HTML5分组元素172hgroup元素figure元素figcaption元素

4.2HTML5分组元素173HTML5里增加了页面交互元素，提高页面的交互体验。这一部分非常的重要，并且和JS控制的效果不同。本节将详细介绍这些元素。

4.3HTML5交互元素details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。在默认情况下，标题可见，不显示details中的内容，当用户点击标题时，会显示或隐藏details中的其他内容。1、details和summary元素174

4.3HTML5交互元素progress元素定义运行中的任务进度（进程）。如Windows系统中软件的安装、文件的复制等场景的进度。progress元素的常用属性有两个。（1）value：已经完成的工作量。不设置此属性时，此进度条为“不确定”型，无具体进度信息，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。（2）max：总共有多少工作量。可以自行设置max值。value的默认取值范围为0.01~1，无max属性时，如果value值为0.5则表示当前进度为50%。value和max属性的值必须大于0。2、progress元素175

4.3HTML5交互元素meter元素用于表示指定范围内的数值。如磁盘使用情况、查询结果、或投票比例等，都可以使用meter元素。3、meter元素176

4.3HTML5交互元素3、meter元素177属性说明high定义度量的值位于哪个点被界定为高的值low定义度量的值位于哪个点被界定为低的值max定义最大值，默认值是1min定义最小值，默认值是0optimum定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好value定义度量的值meter元素有多个常用的属性

4.3HTML5交互元素178progress元素details元素summary元素meter元素

4.3HTML5交互元素感谢您的观看！项目四CSS3基础了解CSS3，认识CSS常用属性及使用，学会CSS的引用学习目标Contents目录任务1任务2任务3CSS3简介CSS选择器CSS3的引用任务4CSS3常用属性任务5CSS3盒子模型1CSS发展历程2任务1CSS3简介什么是CSSCSS语法3任务2CSS选择器标签选择器：标记名称{属性:属性值;属性:属性值;···}例：p{text-align:center;color:red;font-size:18px;background:gray;}2.id选择器：

#id名称{属性：属性值；属性：属性值；……}例：#firstname{background-color:yellow;}3.class选择器：.class名称{属性：属性值；属性：属性值；……}例：.bingdd{font-family:黑体;font-size:30px;text-align:center;}任务2CSS选择器4.伪类选择器a:link当超链接没被访问过时,所设置的样式应用于超链接。a:visited当超链接已被访问过时,所设置的样式应用于超链接。a:hover当鼠标指针移动到超链接之上时,所设置的样式应用于超链接。a:active当超链接被点击未释放时,所设置的样式应用于超链接。例：a:link{color:blue;text-decoration:none}a:visited{color:gray;text-decoration:none}a:hover{color:red;text-decoration:underline}a:active{color:purple;text-decoration:none}任务2CSS选择器5.组选择器

组选择器就是多个选择器使用同一个样式或者同一组样式，多个选择器之间用逗号（,）隔开，其语法形式如下。<选择器1>,<选择器2>，<选择器3>{定义样式}例h1,h3,p{color:red;font-family:”微软雅黑”}其表示h1,h2,p选择器的字体颜色均为红色，字体为“微软雅黑”。6.层级选择器(后代择器)根据层级关系选择后代标签，以选择器1

选择器2开头，主要应用在标签嵌套的结构中减少命名。后代选择器用于控制容器对象中的子对象，使其他容器对象中的同名子对象不受影响。书写后代选择器时将容器对象写在前面,子对象写在后面，中间用空格分隔。若容器对象有多层，则分层依次书写。.d1.green{color:green}#son.text{color:blue;font-size:25px;}.green{color:red;}7.通配符选择器：*{属性:属性值;属性:属性值;……}例：*{margin:0;padding:0}任务3CSS的引用3.1内部引用内部引用只适用于对单个网页的页面进行设置。也叫作内嵌式引用。是在head部分的<style>元素中进行定义。其语法格式如下。……<head><styletype="text/css">选择器1{属性:属性值;属性:属性值;……}/*注释内容*/选择器2{[属性:属性值;属性:属性值;……}……</style></head> ……任务3CSS的引用3.2外部引用语法格式:……<head><linkhref="外部样式表文件路径"rel="stylesheet"type="text/css"></head>……任务3CSS的引用3.3行内引用行内引用也叫作内联样式，就是将样式信息直接定义在HTML标签的style属性中，由于内联样式定义在标签内部，所以它只对所在的标签有效任务四CSS3常用属性4.1背景属性

网页可以通过设置背景属性使网页变得丰富多彩，设置背景属性主要包括设置背景颜色、设置背景图像、设置背景图像平铺、设置背景图像位置等。1.设置背景颜色利用background-color属性设置一个元素的背景颜色。格式：background-color:颜色值颜色值可以使用以下几种方式定义：十六进制

-如:"#ff0000"rgba-如:“rgb(255,45,35,1.00)”(r:表示红色;g表示绿色;b:表示蓝色；a:表示透明度取[0-1],例：1表示透明，0.5表示半透明，0表示透明)。颜色名称

-如:“blue”、“red”、“orange”等。任务四CSS3常用属性2.设置背景图像除了可以用背景颜色设置背景属性外，我们还可以利用background-image属性设置背景图像。格式：background-image:url(图像路径)*技巧提示：一个文档中可以同时设置背景图像和背景颜色，但优先显示背景图像，只有当背景图像没有铺满文档时，才会用背景颜色补上。3.设置背景图像平铺默认情况下，背景图像会自动沿着水平和竖直两个方向平铺。通过background-repeat属性可以控制平铺的方向以及平铺或者不平铺。该属性的取值如下。repeat：默认值，设置背景图像在垂直方向和水平方向平铺(完全平铺)。repeat-x：设置背景图像在水平方向平铺。repeat-y：设置背景图像在垂直方向平铺。no-repeat：设置背景图像不平铺（图像位于元素的左上角，仅显示一次）。利用background-position属性控制背景图片的位置，background-position属性设置两个属性值，两个属性值之间用空格隔开，用于定义背景图像在页面的水平方向和垂直方向的位置。例如，“leftbottom”表示背景图像水平方向位于左侧，垂直方向位于下方。background-position属性接受三种值：关键词：水平方向关键词为left、center、right;垂直方向关键词为top、center、bottom。两个关键词的顺序任意。若只有一个关键词，缺省的另一个关键词默认是center。例如“background-position:bottom”等价于“background-position:centerbottom”长度值：如px。百分值：%。通过百分比数值将背景图像与元素的指定点对齐。其中，“0%0%”表示图像的左上角与元素的左上角对齐；“100%100%”表示图像的右下角与元素的右下角对齐；“50%50%”表示图像的50%50%与元素的50%50%对齐。4.设置背景图像的位置固定背景图像，就是当我们在页面输入任何内容时或者移动鼠标，背景图像都不会发生变动。利用background-attachment属性可以设置背景图像的固定。其值有两个：scroll和fixed。scroll(默认值):图像随页面一起滚动。fixed:图像固定在屏幕上，不随页面滚动。4.设置背景图像的固定任务四CSS3常用属性4.2文本属性text-align属性text-decoration属性text-indent属性line-height属性text-shadow属性任务四CSS3常用属性4.3字体属性font-family属性font-size属性.font-style属性font-variant属性font-weight属性font属性4.4多媒体对象除了文本和图片以外，在网页中还可以插入音频、视频、动画等多媒体对象，以获得丰富的视觉体验，给观众带来全新的感受。任务四CSS3常用属性1.使用<video>标签为页面添加视频属性值功能srcurl指定视频播放的地址a