中图网

>

计算机教材

Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop)

作者：于莉莉

出版社：清华大学出版社出版时间：2018-08-01

开本： 16开 页数： 220

本类榜单：计算机/网络销量榜

中图价:¥21.5(5.5折) 定价 ~~¥39.0~~ 登录后可看到会员价

加入购物车收藏

运费6元，满39元免运费

?新疆、西藏除外

本类五星书更多>

>
决战行测5000题(言语理解与表达)

决战行测5000题(言语理解与表达)

¥38.8¥88
>
软件性能测试.分析与调优实践之路

软件性能测试.分析与调优实践之路

¥49.3¥69
>
第一行代码Android

第一行代码Android

¥58.4¥99
>
深度学习

深度学习

¥92.4¥168
>
Unreal Engine 4蓝图完全学习教程

Unreal Engine 4蓝图完全学习教程

¥72.2¥168
>
深入理解计算机系统-原书第3版

深入理解计算机系统-原书第3版

¥104.3¥139
>
Word/Excel PPT 2013办公应用从入门到精通-(附赠1DVD.含语音视频教学+办公模板+PDF电子书)

Word/Excel PPT 2013办公应用从入门到精通-(附赠1DVD.含语音视频教学+办公模板+PDF电子书)

¥21¥49.9

商品详情
商品评论(0条)

中图价:¥21.5 加入购物车

版权信息
本书特色
内容简介
目录
节选

Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop) 版权信息

ISBN：9787302502159
条形码：9787302502159 ; 978-7-302-50215-9
装帧：一般胶版纸
册数：暂无
重量：暂无
所属分类：
计算机/网络
>
计算机教材

Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop) 本书特色

Web前端开发实用案例教程基于Axure原型设计、Html5、CSS3、JavaScript和Photoshop，以案例驱动形式介绍了网页设计的相关知识。本书共分为14章，内容涵盖了网站设计开发入门，HTML标签与CSS样式基础、图像设计在网页中的应用、制作导航栏、表格在网页中的应用、表单在网页中的应用、CSS标准流布局、CSS浮动布局、CSS定位布局、JavaScript的应用，以及综合应用案例等。

Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop) 内容简介

Web前端开发实用案例教程基于Axure原型设计、HTML 5、CSS 3、JavaScript和Photoshop，以案例驱动形式介绍了网页设计的相关知识。本书共分为14个单元，内容涵盖了网站设计开发入门、HTML标签与CSS样式基础、图像设计在网页中的应用、制作导航栏、表格在网页中的应用、表单在网页中的应用、CSS标准流布局、CSS浮动布局、CSS定位布局、JavaScript的应用，以及综合应用案例等。本书内容翔实、图文并茂、结构清晰、循序渐进，基础知识与案例操作紧密结合，既可作为高等院校，高、中等职业技术院校，以及各类计算机教育培训机构的网页设计教材，也可供广大网页设计爱好者自学使用。

Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop) 目录

单元1个人博客主页——Axure原型设计与网站开发入门1

任务11用Axure站点地图管理页面——Axure

原型设计概述1

任务12个人简历页面——网站环境和本地站点的创建8

任务13心情日记——开发工具介绍及网站开发总体

讲解11

单元2美丽鲜花网店——HTML标签与CSS样式基础19

任务21制作鲜花网页结构——HTML标签介绍19

任务22修饰鲜花网页——CSS样式基础23

单元3新闻系统网站——文字在网页中的应用28

任务31企业产品介绍页面——设置文字样式28

任务32行业新闻文章页面——设置段落和其他

文字样式34

单元4艺术休闲散文页面——Axure交互效果与图像

在网页中的应用38任务41散文集——设置图文混排效果38

任务42童话故事——设置网页背景元素43

单元5通讯录分组表——表格构建网页48

任务51月历制作——表格标签的灵活应用48

任务52用户信息统计页面——CSS设置边框及

内外边距53

单元6商品网——菜单制作59

任务61仿当当网书籍菜单——纵向列表菜单59

任务62仿天猫商品菜单——横向列表菜单61

任务63仿阿里巴巴集团商品菜单——下拉列表菜单64单元7注册页面——Axure动态面板与表单在网页中的应用72

任务71仿蜜淘全球购网站登录界面——表单结构72

任务72仿蜜淘全球购注册页面——使用CSS控制表单84

单元8电影音乐网——页面中插入视频、音频、动画94

任务81微视频网页展播——视频播放页面94

任务82婉约配乐页面——页面中播放音乐99

任务83动画网页——页面中插入动画107

单元9旅游景点网站——Axure低保真原型设计与CSS模型结构的标准文档流111

任务91旅游页面页头部分——盒子模型111

任务92制作旅游网正文——应用标准文档流121

单元10校园课程类网站——CSS定位布局130

任务101校园新闻页面——常用浮动布局方法130

任务102课程介绍页面——CSS定位属性布局140

单元11多肉植物商城——JavaScript应用148

任务111多肉植物图替换——JavaScript图片切换特效148

任务112美丽鼠标影——鼠标类特性153

任务113图片变换——滚动图片效果155

单元12旅游胜地宣传单——Photoshop平面设计159

任务121海岛旅游胜地——图像处理基础159

任务122宣传单设计——绘制与编辑图像167

单元13广告类设计——Photoshop平面设计177

任务131房地产广告——应用文字与色调177

任务132咖啡广告——通道与滤镜184

单元14精品资源共享课网站设计197

参考文献221

展开全部

Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop) 节选

　　单元3新闻系统网站——文字在　　网页中的应用　　文字是网页中不可缺少的组成元素，它能将各种信息有效地传递给浏览者，通常内容丰富的网页有大量的文本。利用CSS可以方便地设置网页的文本和段落效果，从而更好地向浏览者展现网页内容。　　教学目标：　　 掌握与文字相关的HTML标签，能够在网页中插入标题、段落、列表等元素。　　 掌握设置文字和段落样式的CSS代码，能够使用CSS美化文字和控制段落格式。　　 掌握设置列表样式的CSS代码，能够在网页中插入列表并用CSS美化。　　任务31企业产品介绍页面——　　设置文字样式〖*4/5〗【知识储备】1. CSS文字样式常用属性CSS字体样式(Font Style)是网页中不可或缺的样式属性之一，有了字体样式，网页才能变得更加美观，因此字体样式属性也就成为设计者必须了解的知识。　　1）字体样式： font　　语法如下:{font:font-style| font-variant| font-weight| font-size| font-family}fontstyle表示字体风格；fontvariant表示字体变形；fontweight表示字体粗细；fontsize表示字体大小；fontfamily表示字体类型。　　font的作用是简写属性，提供了对字体所有属性进行设置的快捷方法。　　2）字体类型： fontfamily　　语法如下：{font -family:字体1,字体2,字体3,...}fontfamily的作用是调用客户端字体。当调用客户端字体时，指定多种字体，可用逗号“,”分隔每种字体的名称。当字体名称包含两个以上分开的单词时，用双引号把该字体名称括起来。当样式规则外已经有双引号时，用单引号代替双引号。　　如果在fontfamily后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体，一旦遇到与要求相匹配的字体时，就按这种字体显示网页内容，并停止搜索；如果不匹配就继续搜索，直到找到为止，万一样式表里的所有字体都没有安装，浏览器就会用自己默认的字体来代替显示网页的内容。　　例如，{fontfamily:黑体,隶书;}表示调用客户端的字体类型为黑体。如果没有黑体，则调用客户端的字体类型为隶书。　　3）字体大小： fontsize　　语法如下：{font-size:数值}fontsize的作用是设定文字的大小。　　例如，{fontsize:18px;}表示当前字体大小为18像素。　　4）字体风格： fontstyle　　语法如下：{font-style:inherit|italic|normal|oblique}inherit表示字体继承；italic表示字体斜体；normal表示字体正常；oblique表示字体偏斜体。　　fontstyle的作用是使文本显示为偏斜体或斜体等，表示强调。　　5）字体粗细： fontweight　　语法如下：{font-weight:100-900|bold|bolder|lighter|normal;}bold表示粗体（相当于数值700）；bolder表示特粗体；lighter表示细体；normal表示字体正常(相当于数值400)。　　在字体应用中，取值范围为100～900，浏览器默认的字体粗细为400。另外，可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。　　fontweight的作用是设定文字的粗细。　　6）字体颜色： color　　语法如下：{color: 数值}color的作用是设置字体的颜色。　　字体颜色参数取值范围中，可以以RGB值表示，也可以以十六进制色彩值表示，或以默认颜色的英文名称表示。　　字体颜色的设定，以默认颜色的英文名称表示无疑是*为方便的。但由于预定义的颜色种类太少，所以更多的网页设计者喜欢用RGB方式。RGB方式的好处很多，不但可以用数字的形式精确地表示颜色，而且也是很多图像制作软件（比如Photoshop）默认使用的规范，这样一来就为如图片等和网页更好地结合打下了坚实的基础。　　7）字体行高： lineheight　　语法如下：{line-height:数值|inherit|normal}inherit表示行高继承父元素的值；normal表示行高为默认值。　　lineheight的作用是设置行与行之间的距离。　　行距是指上下两行基准线之间的垂直距离。如果文字字体很大，而行距相对较小，可能会发生上下两行文字相互重叠的现象。　　8）字间距： letterspacing　　语法如下：{letter-spacing:数值|inherit|normal}inherit表示字间距继承父元素的值；normal表示字间距为默认值。　　letterspacing的作用是控制文本元素字母间的间距，所设置的距离适用于整个元素。　　9）单词间距： wordspacing　　语法如下：{word-spacing:数值|inherit|normal} 单词间距指的是英文每个单词之间的距离，不包括中文文字。间距的取值单位是points、em、pixes、in、cm、mm、pc、ex、normal等。　　2. 网页中元素的长度单位　　CSS设置样式时，长度单位有相对类型和绝对类型。相对类型包括px（像素）、%（百分比）、em（字符高度）。　　px表示像素，当使用它作为文字或其他网页元素尺寸单位时，屏幕分辨率越大，相同像素的网页元素就显得越小。　　%表示百分比，以父元素大小的百分比来定义当前文字或其他网页元素的大小。如果没有设定父元素大小，则浏览器采用默认字体大小的百分比。一般情况下，浏览器默认的字体大小为16px。　　em表示字符高度，以父元素大小的倍数来定义字体大小。例如，若父元素字体大小为12px，则1em就表示12px；2em就表示12px2=24px。若没有设定父元素大小，则相对于浏览器默认字体大小的倍数显示。　　绝对类型包括in（英寸）、cm（厘米）、mm（毫米）、pt（点数）。　　【素材收集】　　创建站点，用Dreamweaver CS制作网页。实例图片和文字内容见本单元中的素材文件夹。　　实例素材位置： “单元3”目录下的“文字.txt”和images子目录。　　效果文件位置： “单元3”目录下的plc.html。　　【任务实施】　　企业产品介绍页面的具体制作，分为构建HTML结构和设置CSS样式属性两部分来进行。　　1）构建HTML结构　　（1）将素材实例文件夹复制至创建My Web站点的根目录中。　　（2）启动Dreamweaver CS，打开“文件”面板，在复制的文件夹中创建一个名为plc.html的网页文档，并在文档窗口中打开。　　（3）将文字内容复制并粘贴到新建文档的设计视图中。　　（4）添加文字标题。　　（5）添加水平虚线。将标题文字和内容进行形式上的分开。　　水平虚线代码如下：　　（6）保存文件。按Ctrl+S快捷键保存网页，然后按F12键在浏览器中预览效果，完成此页面的制作。如图31所示为页面预览效果。　　图31页面预览效果（1）　　2）设置CSS样式属性　　（1）页面中引入CSS样式属性方法。在“”标签对之间输入以下代码。　　　(2) 设置CSS样式属性。整体页面中文字元素代码如下:　　（3）保存文件。按Ctrl+S快捷键保存网页，然后按F12键在浏览器中预览效果，完成此页面的制作。页面预览效果如图32所示。　　……

商品评论(0条)

写书评赚书币

暂无评论……

书友推荐