网页设计与制作项目化教程 课件 （蒋建琼） 项目1、2 学习网站设计基础知识、网站的规划与建设

网页设计与制作CHAPTERONE目录学习网站的建设基础知识网站的规划与建设学习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