知识目标：了解网页布局的主要类型，了解网页布局设计，掌握使用表格设计网页布局的方法。
设计网页布局，详细操作步骤详见教材P2-6
1、单击“开始”按钮，选择“程序” →“Dreamweaver”，启动Dreamweaver。选择“文件”→“新建”，弹出“新建文档”对话框，在“常规”选项卡下“类别”列表中选择“基本页”，在“基本页”列表中选择“HTML”，单击“创建”，打开网页编辑窗口。
2、在页面左上角单击鼠标左键放置插人点，选择【插入】->【表格】，弹出【插入表格】对话框，设置好表格属性包括行数、猎术、表格宽度、边框粗细、单元格边距和单元格间距。并进行确认。说明：网页中插人表格后，当选定表格或表格中有插人点时，Dreamweaver会显示表格宽度和表格选择器中每个表格列的列宽，宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。通过选择【查看】-【可视化助理】-【表格宽度】可启用或禁用宽度和菜单的显示。
3、在表格右侧单击鼠标左键，选择【插入】-【表格】，弹出【插入表格】对话框，设置好相关属性，单击确定。第二个表格即出现在第一个表格下方。
4、在第二个表格右侧单击鼠标左键，选择【插入】-【表格】，弹出插入表格对话框，设置好相关属性，单击确定。第三个表格即出现在第二个表格下方。
说明：如果出现【开始使用扩展表格模式】对话框，请单击【确定】。扩展表格模式是用于临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能，易于精确地放置插人点，而不会意外选择错误的表格或其他表格内容。在【扩展表格】模式下完成对表格属性的设置后，应返回到【标准】模式。扩展表格模式不属于所见即所得环境，因此某些操作(如调整大小)不会得到预期的结果。
5、在第一个表格的第一行内单击鼠标左键，选择【窗口】-【属性】，在属性检查器中设置好【单元格高度】并按enter确认。并以此设置好每一行的【单元格高度】。
6、按照上面的方面依次设置好第二个表格每一列的【单元格宽度】和第三个表格每一行的【单元格高度】。网页布局完成后可以在单元格中插入网页，例如文字、图像或者多媒体元素。
网页布局是进行网页设计的首要工作，选择适宜的网页类型才能够充分发挥商业网页的价值。
网页的布局大致可以分为“国”字型、拐角型、标题止文型、左右框架型、上下框架型,综合框架型、封面型、Flash型和变化型。
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型，通常用于首页设计。优点：页面容纳内容多，信息量大。
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接 。特点：方便导航，也有充分的版面展示文章内容。
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。这种类型简洁明快，没有其他干扰信息，显得较为正规。
这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，风格易于更改，减少了更新的工作量。
与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。优点：内容丰富、信息量大，表现形式多样化
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
三、网页布局的一般原则
文字、图像等要素的空间占用上分布均匀。色彩的平衡，要给人一种协调的感觉。
对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。
让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。
网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。
比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。
由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在的情况下，页面的显示尺寸为：。从以上数据可以看出，分辨率越高页面尺寸越大。
这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如
矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；
圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；
三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；
菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。
虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。
所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800×600的屏幕显示模式（这也是最常用的）下，在IE安装后默认的状态（即工具栏地址栏等没有改变）下，IE窗口内能看到的部分为778px×435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。
导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。
层在Dreamweaver中职的是带有定位CSS样式的“div”或者“span”代码。它使用方便，在使用时应参照对象描绘层，精确掌握层的大小
DIV+CSS网页布局的优势：
（1）使页面载入得更快。
（3）修改设计时更有效率
（4）保持视觉的一致性
（5）对浏览者和浏览器更具亲和力
DIV+CSS网页布局的缺点：
（1）DIV CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。
（2）CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
（3）虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
应用表格布局页面是最为广泛的网页布局工具，表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它 (要所见即所得的软件)，你会看到这个页面是如何利用表格的。
应用框架结构布局页面的兼容性较差，但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
知识目标：了解网页图形图像在网页中的应用，了解网页图形图像设计原则，掌握网页图形图像设计方法。
设计网站的logo。具体操作过程详见教材P12-15。
二、图形图像在网页中的应用
网站标志是指那些造型单纯、意义明确的统一、标准的视觉符号，一般是网站的文字名称、图案记号或两者相结合的一种设计。标志具有象征功能、识别功能，是网站形象、特征、信誉和文化的浓缩。它是一种简洁但不简单的图形符号，具有以小见大、以少胜多、以一当十的特点。在现代社会生活中，经过精心设计而具有高度实用性和艺术性的图形标志，以其特有的功能和新颖别致的艺术效果，感染和影响着人们，知道人们的认知和选择。
背景插图可以把浏览器变成一个特定的环境，用图形为背景来衬托主题，可以增加层次感，也可以与网页主题图像形成对比或共鸣，从而突出主题形象，彰显网页的风格。
网页主图是指网页中表达主题、突出主题的较大幅面的图形图像。一幅好的主图，可以使浏览者见其图即知其内容，主图能够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给人以深刻的印象。因此主图的选材一定要与主题紧密关联。
将图形设计成超链接形式，能够使网页链接变得样式丰富，可以使网页更为美观,深圳网站制作公司。若能利用标志性符号，便可以减弱语言的障碍。图形按钮具有直观、形象的特点，可以为单调的文字信息增添活力，更加明确地表现它所要进行的操作。
三、图形图像的创意设计原则
四、网页图形图像的处理方法
大图像能表现细节，容易形成视觉聚焦，感染力强，传达的感情较为强烈，更容易吸引浏览者注意
小图像显得简洁精致，有点缀和呼应作用。
网页图像设计时，应首先确定主要形象、次要形象，把重要的能吸引注意力的图放大，从属的图缩小，形成主次分明的层次格局。
方形图稳定、严肃、三角形图锐利，圆形或曲线形图柔软、亲切，退底图、不规则或带边框图像活泼，都能产生强烈的装饰感。
在网页中上下左右及对角线的四个角都是视觉的焦点，处理好这些位置关系能表现出丰富的效果。
图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。图像模糊法可以让图像产生虚的感觉，此外，图像的色彩层次减少，纯度降低，尽量与北京靠近，使图像产生悠远的感觉也能让图像变“虚”。
图像的组合就是把多幅图片或图形以不同方式摆放，形成一个图像群或图像组，传达更多信息。它可以有块状组合和散点组合两种。
知识目标：了解网页动画基本理论，了解网页动画设计原则，掌握网页动画设计方法。
制作Flash网页导航，详细操作步骤参照教材P18页
逐帧动画是一种常见的动画形式，是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。
渐变动画是设定关键帧后，由软件自动生成中间的变化过程。它是矢量文件，文件小，动作衔接较好，可以实现连续变换的效果。
知识目标：了解HTML文档结构；掌握HTML文件的基本编写方法
用记事本中创建HTML文件，具体操作步骤详见教材P23页
（1）单击“开始”按钮，选择“程序” →“附件” →“记事本”，并打开“记事本”窗口。
（2）在记事本中，输入如图所示的HTML语句。
（3）执行“文件” →“保存”命令，将文件保存为1-.cn”>友情链接</a>
（2）相对地址是用所链接的文件相对于目前网页所在的位置来标书，通常用来链接当前网站中的其他网站，如：<<a href=”bg.htm”>花节</a>
知识目标：掌握HTML文档中网页表单编辑标记符的设置
利用HTML制作表单，具体操作步骤，详见教材P39页
1、HTML表单的作用
HTML 表单用于搜集不同类型的用户输入。当用户在表单中输入信息并提交，则表单中的信息就被提交到网站。
<form> 标签是创建一个表单所需的基本标签，每个表单都必须从<form>标签开始，</form>标签结束。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
知识目标：了解数据库、关系型数据库的概念及特点，了解数据库管理系统的概念及功能，掌握数据库管理软件ACCESS的基本操作，掌握数据库和数据表的创建和使用方法。
在数据库管理软件ACCESS中创建数据库操作步骤：
步骤一：在网站站点根目录下简历专门的数据库存放目录，如：d:\newgate\database文件夹
步骤三：新建数据库，并选择好相关路径，命名好保存所建立的数据库文件。
数据表是数据库最基本的元素，数据表是存储数据的地方，建立数据表的步骤如下：
步骤一：在新建的数据库中使用设计器创建表，在弹出的表1中设计相关字段，包括字段名和数据类型，并给表1命名，同时保存关闭该窗口
步骤二：打开所建的数据表，输入相关内容，同时关闭保存数据库表
二、数据库的概念及特点
1、数据库的概念及分类
数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。分为层次型数据库、网络型数据库和关系型数据库三种。目前最为主要的是关系型数据库。
关系型数据结构把一些复杂的数据结构归结为简单的二元关系(即二维表格形式)。例如某单位的职工关系就是一个二元关系。在关系数据库中，对数据的操作几乎全部建立在一个或多个关系表格上，通过对这些关系表格的分类、合并、连接或选取等运算来实现数据的管理。
（2）减少数据的冗余度
（4）数据实现集中控制
（5）数据一致性和可维护性，以确保数据的安全性和可靠性，主要包括：①安全性控制；②完整性控制③并发控制。
数据库管理系统(Database Management System)是一种操纵和管理数据库的大型软件，用于建立、使用和维护数据库，简称DBMS。
数据库管理系统具有三项功能：
2、数据操作功能：对数据进行检索和查询
知识目标：了解动态网站的工作原理，了解动态网站的运行环境，掌握利用Dreamweaver工具进行动态网站服务器配置的方法，掌握利用Dreamweaver工具实现网页与数据库连接的方法。
1、动态网站服务器配置
利用Dreamweaver工具配置动态网站服务器步骤：
步骤一：建立一个文件夹作为动态网站站点，并在其中建立子文件夹。如：D:\newgn\
步骤二：回到刚才新建文件夹的根目录，设置共享与安全，选择【web共享】，点选共享文件夹，并设置好别名，并进行确认。
步骤三：打开Internet信息服务（IIS）管理器，选择Internet信息服务à本地计算机à默认网站，查看刚才已经建好的站点文件夹。
步骤四：打开Dreamweaver程序，选择编辑站点à高级à分类à本地信息，输入站点名称，设置好站点文件夹，同时在【分类】选项卡中选择【远程信息】，【访问】选择设置为“本地/网络”，【远端文件夹】设置为之前新建的站点文件夹。【分类】选项卡中选择【测试服务器】，【服务器模型】设置为“ASP JavaScript”,
访问】选择设置为“本地/网络”，【测试服务器文件夹】设置为之前新建的站点文件夹。【URL前缀】设置为http://localhost/文件夹名，即添加步骤三中设置的IIS虚拟目录。
利用Dreamweaver工具色织网络数据库连接（动态网站数据源）
步骤一：打开Dreamweaver程序，在之前设置好的站点文件夹（如d:\newgn\）中添加一个ASP页面index.asp，在【应用程序】面板中选择【数据库】标签，单击【+】，选择【自定义链接字符串】
步骤二：在弹出的【自定义链接字符串】中输入“连接名称”及“连接字符串”。如【连接名称】设置为conn；【Dreamweaver连接】设为“使用此计算机上的驱动程序”，【连接字符串】应用绝对路径，如：DRIVER={Microsoft Access Driver（*.mdb）;DBQ=d:\newgn\database\cnbruce.mdb
步骤三：单击【测试】，成功连接数据库。
态网站并不是指具有动画功能的网站，而是指网站内容可根据不同情况动态变更的网站，一般情况下动态网站通过数据库进行架构。动态网站服务器空间配置要比静态的网页要求高，费用也相应的高，不过动态网页利于网站内容的更新，适合企业建站。动态是相对于静态网站而言。
动态网站除了要设计网页外，还要通过数据库和编程序来使网站具有更多自动的和高级的功能。动态网站体现在网页一般是以asp，jsp，php，aspx等结束，而静态网页一般是HTML（标准通用标记语言的子集）结尾。
动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等；动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页；动态网页中包含有服务器端脚本，所以页面文件名常以asp、jsp、php等为后缀。但也可以使用URL静态化技术，使网页后缀显示为HTML。所以不能以页面文件的后缀作为判断网站的动态和静态的唯一标准。动态网页由于需要数据库处理，所以动态网站的访问速度大大减慢；动态网页由于存在特殊代码，所以相比较静态网页，其对搜索引擎的友好程度相对要弱一些。
静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。
静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。
动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。
ASP程序必须中支持ASP的网站服务器运行，需要拥有一个服务器空间，中个人计算机上架设一个ASP程序运行的虚拟服务器IIS。
IIS是windows自带的组件，如果为安装，则需打开控制面板，启动安装组件。
五、ASP访问数据库方法
ASP通过ADO层或者ODBC（开放式数据库连接）接口来访问数据库。
知识目标：了解动态网页的含义及特点，了解主要的动态网页技术及其特点，掌握中Dreamweaver中创建动态网页访问数据库并进行数据操作的方法。
在Dreamweaver中制作ASP网页，实现用户注册功能。具体操作步骤参考教材P56。
所谓的动态网页，是指跟静态网页相对的一种网页编程技术。动态网页的页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。值得强调的是，不要将动态网页和页面内容是否有动感混为一谈。这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的动态效果没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要是采用了动态网站技术生成的网页都可以称为动态网页。
总之，动态网页是基本的html语法规范与Java、VB、VC等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
1、动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量；
2、采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；
3、动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；
1、动态网页技术简介及特点
动态网页技术是区别于静态网页技术而言的。相比与传统的静态网页，动态网页有了明显的交互性、自动更新性，以及因时因人而变的灵活性。
所谓“动态”，并不是指放在网页上的GIF图片，动态网页技术有以下几个特点：交互性、自动更新、因时因人而变的特点。除了早期的CGI外，目前主流的动态网页技术有JSP,ASP,PHP等
在早期，动态网页技术主要采用CGI技术，即Common Gateway Interface(公用网关接口)。CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。
ASP为动态服务器网页(ActiveServer Page)的简称。它具有简单易学、安装使用方便、开发工具强大而多样和效率高的优点。
MySql,Sybase,Oracle等。它与HTML语言具有非常好的兼容性，使用者可以直接在脚本代码中加入HTML标签，或者在HTML标签中加入脚本代码从而更好地实现页面控制。PHP提供了标准的数据库接口，数据库连接方便，兼容性强；扩展性强；可以进行面向对象编程。
JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。Java Servlet 是JSP的技术基础，而且大型的Web应用程序的开发需要Java
Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向Internet的所有特点。
}
虎课网为您提供字体设计版块下的XD-音频播放界面设计图文教程，本篇教程使用软件为XD 1.0，难度等级为中级拔高，下面开始学习这节课的内容吧！
本篇教程学习的是XD-音频播放界面设计，喜欢的一起来学习吧。
学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一进行解答。
那我们开始今天的教程吧。
1.首先是设计方向，然后是灵感参考，最后是界面设计，音频媒体播放的操作界面，控制播放/暂停和进度等，我习惯把音频播放界面分为社交性和沉浸性，一个注重拓展和各种娱乐，一个注重专注和专业。
2.做加法的时候，可以加一些评价、推荐、互动、收藏、均衡器等，减法只提供一些基础功能、提高页面占比，让用户用的时候更有一种沉浸感。
3.左边这两个是QQ音乐的播放界面，提供的内容很丰富，点击菜单之后，还有一些各种各样的操作功能，最右边简单了很多，切割的话可以来回滑动，或者这边点击也可以。
4.网易云音乐的划分，它有一些商业化的东西，前面注重了很多电商，还有各种各样的活动，搜索这块相对来说更贴近一些，这都是围绕音乐来拓展。
5.案例：这个操作性很多，这是一个列表，它的进度是通过声波的一种颜色的变化。
6.这个就是近期比较流行的轻拟物，功能就相对简单了很多，有返回、进度条、暂停、播放，这个就比较接近于嵌在我们界面里面。
7.这个就是比较涉及有另外一种设计感的界面，常规一个正方形的封面，或者一个旋转的唱片，做了很多设计，但是整体来说也是比较简单的。
8.这个也是一个简单的设计，它的音乐切割的地方，做一个3D的效果。
9.打开【XD】，做两个音频的界面，找一张图片作为封面，做的细长一些，如果占比比较小，会显得有点空，加一个箭头，向下，调整位置，做到【30】。
10.时间轴这块可以把操作按钮尽量做的大一点，画出通轴，设定一下【边界】，以及它的粗细，填充【白底】，【Ctrl+D】复制一层，做到【150】，填充颜色。
11.用【矩形工具】，高度为【3】，取消【边界】，【居中】，拉【圆角】，【Ctrl+D】复制一层，填充颜色，做一下指示的小标志，高度【13】，输入文字，调整高度。
12.打上歌名，字体大小保持统一，【居中】，降低【不透明度】，表现出我们的层级。
13.下面放一个大的整体播放暂停键，做到【70】，后面画一个三角，用【钢笔工具】下面做一些线条，来表现音乐的播放，复制一个，做文字对照的界面，删除其他内容，增加沉浸感。
14.把歌词复制一份放到上面去，尽量铺满，调整文字大小，给到【16】，间距为【30】，复制一层放到最顶层，做个【线性渐变】，给它一个渐影的状态，画一个圆，降低【不透明度】，放到后面，让背景有一定的呼吸感，再放一个小圆。
15.同学们记得上传自己的作业哦！
以上就是XD-音频播放界面设计图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！
}
点击联系发帖人
