新書推薦：
《
设计中的比例密码：建筑与室内设计
》
售價：NT$
398.0
《
冯友兰和青年谈心系列：看似平淡的坚持
》
售價：NT$
254.0
《
汉字理论与汉字阐释概要 《说解汉字一百五十讲》作者李守奎新作
》
售價：NT$
347.0
《
汗青堂丛书144·决战地中海
》
售價：NT$
765.0
《
逝去的武林（十周年纪念版 武学宗师 口述亲历 李仲轩亲历一九三零年代武人言行录）
》
售價：NT$
250.0
《
唐代冠服图志（百余幅手绘插画 图解唐代各类冠服 涵盖帝后 群臣 女官 士庶 军卫等 展现唐代社会风貌）
》
售價：NT$
398.0
《
知宋·宋代之科举
》
售價：NT$
454.0
《
那本书是（吉竹伸介与又吉直树 天才联动！）
》
售價：NT$
454.0
|
| 編輯推薦： |
1．教材丰富，品种齐全。含盖了“艺术设计与传媒大类”的“视觉设计类”“工业设计类”“工艺美术类”“服装与时尚设计类”“空间设计类”“动画与数字媒体设计类”“人物形象设计”“环境艺术设计类”等所有类别的大部分教材。既有经典的传统专业教材，又有新兴的专业教材，且课件、PPT等配套元素齐全，能广泛适应各层次的教学需要。
2．专家指导，特色鲜明。得到业界权威专家的指导支持，吸取了教育部的最新改革精神和成果，广泛听取了各院校相关专业领导、专家和一线老师的意见和建议，融入了最新教学理念和教学要求，符合教改主题，以探索、引领人才培养模式。
3．结合实例，体例新颖。结合实际，教材采用最合适的理念和体例进行编写，力求使教材适应人才培养和课程教学的需要。
4．加强实践，联合编写。立足教学和学生的特点，切实加强实践要素，很多编者是来自院校和企业的实践经验丰富、教学理论水平很高的优秀教师。在我国教育领域中，这些骨干教师，接受先进的教学理念和教学模式，开发了更适合我国国情、更具有中国特色的教育课程模式和教材。
5．注重层次，兼收并蓄。教材体现了兼收并蓄的思想，层次分明，能满足不同层次和水平的教学要求。
|
| 內容簡介： |
本书包含四章：第一章为网页设计和建设的基本知识，第二章为Dreamweaver 入门及制作，第三章为
Flash 入门及制作，第四章为Fireworks入门及制作。本书既有网页设计的基本知识，又有常用网页设计制
作软件的使用介绍。基本知识包括网络运行环境和网页设计基本理论等。常用的三种软件讲解深入浅出，
通俗易懂，能够引导读者较快地掌握软件的应用方法。
|
| 關於作者： |
|
段芸从事艺术教学十余年，教学经验丰富。
|
| 目錄：
|
第一章网页设计和建设的基本知识
第一节网络运行环境2
第二节网页设计基本理论5
第二章Dreamweaver入门及制作
第一节初识Dreamweaver的站点建立22
第二节网页的基本元素27
第三节网页的布局39
第四节初识Dreamweaver超链接的基本理论和方法52
第五节网页的表单59
第六节模板的应用62
第七节CSS样式的应用64
第八节网页中的行为67
第三章Flash入门及制作
第一节Flash快速入门72
第二节Flash的工具76
第三节Flash的基础知识82
第四节Flash基本动画创建86
第五节Flash中文本及图片的编辑91
第六节Flash的按钮制作93
第七节Flash的声音设置96
第八节Flash的影片剪辑98
第四章Fireworks入门及制作
第一节Fireworks 简介102
第二节Fireworks 的工具105
第三节Fireworks 图形的编辑114
第四节Fireworks 动画的制作120
第五节Fireworks 切片和链接的应用122
101 第四章Fireworks入门及制作
第一节Flash快速入门72
第二节Flash的工具76
第三节Flash的基础知识82
第四节Flash基本动画创建86
第五节Flash中文本及图片的编辑91
第六节Flash的按钮制作93
第七节Flash的声音设置96
第八节Flash的影片剪辑98
第一节初识Dreamweaver的站点建立22
第二节网页的基本元素27
第三节网页的布局39
第四节初识Dreamweaver超链接的基本理论和方法52
第五节网页的表单59
第六节模板的应用62
第七节CSS样式的应用64
第八节网页中的行为67
第一节网络运行环境2
第二节网页设计基本理论5
参考文献
|
| 內容試閱：
|
一、Internet基础知识
1．Internet来历
Internet的中文译名为因特网，又称为国际互联网。它的前身是美国国防部高级研究计划局主持研制的阿帕
网ARPAnet。
20世纪60年代末，世界处于冷战时期，为了计算机网络在受到袭击时仍能保持通信联系，美国国防部的高
级研究计划局建设了一个军用网———阿帕网。阿帕网于1969 年正式启用，当时仅连接了4台计算机，供科学家
进行计算机联网实验，这就是Internet的前身。
到20世纪70年代，ARPAnet已经有了好几十个计算机网络，但是每个网络只能在网络内部的计算机之间互
联通信，不同计算机网络之间不能互通。为此，美国国防部高级研究计划局又设立了新的研究项目，支持学术界和
工业界进行有关的研究。研究的主要内容是用一种新的方法将不同的计算机局域网互联，形成“互联网”。研究人员
称之为“internetwork”，简称“Internet”，这个名词一直沿用到现在。Internet是由那些使用公用语言互相通信的
计算机连接而成的全球网络。一旦计算机连接到它的任何一个节点上，就意味着该计算机连入了Internet，如图
1-1所示。目前，Internet用户已经遍及全球。
17. 将黑色矩形的透明度设置为：50%，并加上“更换图片”的文字。
这便是修改头像的入口，为了不影响美观我们定义成只有光标掠过头像时才显示这个按钮。
18. 最终完成效果如图：
第二节 在线视频软件界面设计实例
一、视频媒体库界面
1. 作为一个在线视频软件，主要由视频媒体库和播放器组成。在媒体库中有大量的视频资源，用户查找自己感兴趣的内容观看，或者直接观看程序推荐的内容。所以视频媒体库的设计需要很好的考虑这两个方面：推荐内容的方式和查找内容的方式。
下面我们来学习设计制作视频媒体库界面。
2. 打开PhotoShop，新建画布。命名为：video player。画布大小为：1280×1024px，分辨率为72像素英寸，颜色模式为RBG颜色。
3. 使用深灰色填充，也可以添加一些杂色创建粗糙的质感。接着给背景图层创建黑色的内投影，效果如右图2。
4. 在背景上方绘制一个如图的条状，作为标题栏。上面将承载软件名称和标志，tab选项和窗口状态按钮。
5. 设置这个标题栏的混合选项，参数如右图。我们要给它创建质感和体积。
6. 得到效果如图。 7. 绘制一个白色矩形，定义软件主体区域的高度。
8. 将白色矩形的描边设置为黑色，向内描边，大小1px。
9. 在标题栏的左侧创建软件的logo和软件名称，在右侧创建控制窗口状态的三个按钮并用分隔线分隔。方法之前的课程都讲过，这里不再赘述。
10. 同时定义出关闭按钮在光标略过时的动态视觉暗示。我们用醒目的红色来暗示关闭按钮按下后的结果。其它两个按钮可以用稍亮的灰色。
11. 关闭按钮的红色视觉提示设置参数如图：
12. 在标题栏的中间区域绘制一个圆角矩形，定义出tab的位置和尺寸。
13. 设置tab这个圆角矩形的混合选项，参数如图。
14. 得到如图的向内凹陷的效果： 15. 绘制一个灰色的圆角矩形作为聚焦状态的选项，尺寸为tab整体的12。高度要比tab整体上下各缩进1px。使它看起来在凹陷区域的内部。
16. 设置聚焦状态圆角矩形的混合选项，参数如图。
17. 效果如图：
18. 创建tab项的图标和文本，并添加内投影图层样式。
19. 选中聚焦状态的图标和文本，创建新的混合选项样式，参数如图。
20. 得到效果如图,用高亮来标识当前的聚焦状态。 21. 同时还创建一个登录的入口在右侧的位置。
22. 这样标题栏的整体制作完成，效果如图： 23. 为了方便我们理清众多的层次和图层，我们在图层面板新建分组“top”，将所有的标题栏元素图层放置在这个分组内，同时锁定背景图层和主题尺寸图层，以免改动其位置。
我们在工作时最好养成分组整理的习惯，这将有利于我们理清层次和提高效率。
24. 接着绘制视频类型的分类，它既是一个tab栏，也起到了在查找内容时导航的作用。
首先紧靠着标题栏下方绘制一个灰色的矩形，定义出分类tab栏的高度。
25. 设置tab栏的混合选项。
26. 得到如图效果。 27. 首先在右侧定义一个区域放置搜索框，方便用户使用键盘输入来直接查找感兴趣的内容。
28. 设置搜索框的混合选项，让它的视觉属性和tab栏的整体效果保持一致。
29. 效果如图，同样创建出凹陷的效果，但是它的视觉属性应从属于tab栏的整体效果，不能比标题栏上的两个tab选项突出。
30. 绘制一个放大镜图形标识出这是一个搜索框。
31. 自然左侧空出来的宽度就是我们tab栏的主体区域。我们创建一些分类标题等距排列在左侧的空间。目前来看这个整体，tab栏的层次结构是在标题栏之后，我们通过上下位置、对比度、尺寸等视觉属性来区分它们。
32. 同样我们也需要在tab栏中创建一个聚焦状态，使用高亮和底部的下划线来标识聚焦状态为：“电影”分类。
33. 接着来创建第三个层次：左侧的分类索引。绘制一个如图的黑色矩形来定义其宽度。
34. 设置黑色矩形的混合选项。
35. 首先定义出滚动条的位置，这方便我们定义出分类索引的最大宽度。
36. 创建一个文本“分类索引”，作为标题。
37. 接着创建分类索引的分类层级，这实际上是一个树形结构。
我们首先创建父级的分类，例如：华语电影、动作电影、科幻电影等。在左侧绘制更多和精简状态的按钮，这样能折叠这一层级，以显示更多的内容。
继续创建父级下面的子集和子集的子集。同样设置可以折叠的按钮。我们这里一共创建了三个层级，第三级已经是精确的内容了。我建议大家在设计时不要超过三个层级，太多的层级会使用户迷失在复杂的路径中，对于用户体验可不是什么好事。注意不同的层级字体的颜色和大小是有区别的，目的同样是让层次结构清晰。
38. 完成左侧分类索引后，我们来设计右侧的推荐内容。首先设计一个热点内容推荐功能，把它设计成巨幅海报的轮播形式，来向用户推荐最新最热的内容，在视觉上吸引用户去查看。
首先绘制一个黑色矩形来定义这个轮播区的尺寸。
39. 用一组圆点来进行导航，标明一共有多少张图片，高亮的圆点代表当前看到的图片的位置。
40. 我们选择一张电影海报放置在轮播区域，作为一个样例。轮播区域的图片一定要采用具有强烈视觉效果的图片，视觉效果强烈的图片会引起用户的兴趣，从而与内容交互。
41. 在轮播区的右侧绘制一个向右的箭头作为用户向右翻页查看的按钮，让用户可以自行的翻看所有的轮播图片，而不是傻傻的等着程序自己慢慢的播放。
42. 同样在左侧也绘制一个向左的按钮，用于向左翻页。
43. 轮播区完成了，接着设计其它形式的推荐内容。我们设计成类似章节或专辑的分类，来向用户推荐他们可能感兴趣的内容，例如“首播影院”和“经典回顾”这样的分类。
在轮播区下方定义一个文本标题和浅灰色的分隔线。
44. 在这个分类下创建电影的海报缩略图、电影名称和剧情介绍。注意每部电影之间的垂直间距，要让他们成块状分隔开。在块的内部也区分层次，例如标题颜色对比度大，简介的对比度小。
45. 使用同样的方法，创建另一个分类的内容。由于主题的高度限制，隐藏了一部分内容。
46. 在右侧创建一个滚动条，标明下方还有更多的内容。
这样，视频媒体库界面便完成了。
二、视频详情界面 一、视频媒体库界面
1. 视频详情界面是当用户在左侧分类索引中找到精确内容并单击后，在右侧内容区显示的详细信息。
2. 下面，我们来设计视频详情界面。打开刚才制作好的视频媒体库界面，删除右侧白色区域的推荐内容，保留一个空白的视图。
在某个电影也就是第三级内容上绘制一个如图的灰色矩形，来标识聚焦状态。
3. 选中这个矩形，建立蒙版。使用以前讲过的方法绘制出两端渐隐的效果。
4. 在右侧的视图中创建电影海报缩略图、电影名称标题和电影的介绍信息。注意字体字号的变化和节奏。
5. 这时需要定义出电影简介的最大高度，并设置一个“详细”按钮来隐藏过多的文字信息，当用户需要查看时可以通过点击“详细”按钮来查看完整信息。
6. 紧靠下方，绘制两个蓝色按钮，色相和界面的所有的聚焦状态一致。
7. 设置按钮的混合选项。
8. 得到效果如图。 9. 创建按钮上的图标和文本。
10. 创建影片的评分信息，播放次数信息和评分按钮。在视觉属性上使它们成为一组元素。
11. 在影片评分信息下方创建分享到社交网站的按钮和分享次数信息。
注意这写信息整体形成了一个块状，区分于左侧的影片信息。
12. 接着在下方同样创建其它的推荐内容，让用户有更多的选择的可能。
这样视频详情界面便完成了。
三、视频播放器界面
1. 当用户在视频详情界面点击播放按钮后，便切换到了视频播放的界面，如下图。此时界面由标题栏、播放列表和视频播放区组成。下面我们来学习如何绘制视频播放器界面。
2. 复制之前绘制的标题栏，将聚焦状态定义为：“播放器”选项。
3. 绘制深灰色矩形定义主题区域的高度，同样给它设置1px向内黑色描边。
4. 使用上面讲过的分类索引的绘制方法绘制播放列表。但是这里我们要增加一个正在播放的状态标识，也就是当播放右图中第02集的时候要让用户明确的知道这一集是正在播放状态。
将“第02集”用蓝色高亮标识。
5. 并在左侧绘制一个醒目的播放图标，强调聚焦状态。原因是看到了第几集是用户非常关心的信息。
6. 绘制黑色的矩形作为底部动作栏，透明度调整为50%。
7. 添加两个动作按钮的图标和文本。
8. 在右侧视图中绘制一个灰色矩形用来定义视频播放区的尺寸，同时灰色矩形下部的区域则作为视频控制的动作栏。
9. 找到一张视频的截图放置在视频播放区域中，作为播放效果的样例。
10. 在视频播放区顶部绘制半透明的黑色矩形作为信息栏和动作栏，只有当光标滤过视频画面时这个栏才出现。
11. 添加当前播放视频的信息，并在右侧设置分享按钮和全屏按钮。
12. 在视频播放区域的下部绘制一个黑色矩形作为视频播放动作栏的背景。
13. 设置黑色矩形的混合选项。
14. 得到效果如图：
15. 绘制一个如图的灰色圆角矩形，作为播放进度条的雏形。
16. 设置这个灰色圆角矩形的的混合选项。
17. 得到效果如图：
18. 绘制一个蓝色的圆角矩形用来标明已完成的播放进度。
19. 设置它的混合选项，参数如图。得到效果如右图4。
20. 在如图的位置绘制一个圆形，用作控制播放进度的滑块。
21. 设置圆形形状图层的混合选项。
22. 得到效果如图：
23. 创建一个对话气泡样式的黑色形状，并添加当前播放的时长信息。
24. 给黑色对话气泡形状设置混合选项，参数如图，效果如右图4。
25. 在播放进度条下方左侧创建播放时长信息和总共时长信息。
26. 在播放控制动作栏的中间位置绘制一个圆形，用以定义播放按钮的位置。
27. 设置圆形的混合选项，参数如图，效果如右图6。
28. 在刚才的圆形之上绘制白色圆形，用以创建圆形按钮的高光。
29. 设置白色圆形的混合选项，参数如图。效果如下图4。
30. 绘制一个如图的三角形形状图层，作为播放按钮的标识图形。
31. 设置三角形图层的混合选项，参数如图，效果如下图4。
32. 继续在播放按钮左右绘制“上一个”和“下一个”按钮，并在左侧绘制“停止”按钮。
33. 使用播放进度条的绘制方法同样绘制一个调节音量的滑动条。
34. 在如图的右下角位置绘制三根斜线，用作可拖拽改变窗体大小的控件。
35. 接着在播放动作栏右侧空白的区域绘制三个按钮：分别是高清选项、设置、收起菜单。
36. 其中高清选项是一个下拉列表，我们要定义出下拉列表的样式。
同样绘制一个对话气泡形状图层。
37. 设置这个对话气泡形状的混合样式，如图。
38. 定义出选项的文本信息和三个单选按钮的尺寸。
39. 首先选中第一个单选按钮的圆形形状图层，设置它的混合选项，定义出未选中状态的单选按钮样式。第二个的样式和第一个一致，可以复制图层样式进行粘贴。
40. 接着定义选中状态的单选按钮样式，选中第三个圆形形状，按下面的参数设置混合选项。
41. 在第三个单选按钮的中心绘制一个如图的蓝色圆形，用以标识选中状态。
42. 设置这个蓝色圆形的混合选项，如图。这样下拉列表便完成了。
43. 同时，视频播放器界面也整体完成，最终效果如图。
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
