当前位置:
首页 > 计算机 > 网页设计 > CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

本站仅展示书籍部分内容

如有任何咨询

请加微信10090337咨询

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

书名:CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

推荐语:清华大学出版社“案例课堂”大系列-网站开发案例课堂提供大量实用技巧和网页设计的案例,看得懂、学得会、做得出

作者:刘玉红著

出版社:清华大学出版社

出版时间:2015-01-01

书籍编号:30286232

ISBN:9787302386155

正文语种:中文

字数:166629

版次:1

所属分类:计算机-网页设计

全书内容:

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载





















内容简介


本书作者根据自己在长期教学中积累的丰富的网页设计教学经验,完整、详尽地介绍了CSS 3+p网页样式与布局的技术。全书共分为24章,前19章分别介绍了开发网站的准备工作、HTML5技术、CSS样式入门、CSS样式基本语法、CSS 3的高级特性、控制网页字体和段落样式、控制网页图片样式、控制网页背景和边框样式、美化网页浏览效果、控制表格与表单样式、控制列表样式、使用CSS 3滤镜美化网页元素、CSS定位与p布局核心技术、CSS+p盒子的浮动与定位、固定宽度网页布局剖析与制作、自动缩放网页布局剖析与制作、CSS 3与JavaScript的搭配应用、CSS与XML的综合应用、CSS与Ajax的综合应用。最后5章介绍了5个综合性网站的例子。通过学习案例,使读者进一步巩固所学的知识,提高实战能力。本书内容丰富、全面,图文并茂,步骤清晰,通俗易懂,专业性强,使读者能理解CSS 3+p网页样式与布局的技术,并能解决实际生活或工作中的问题,真正做到知其然更知其所以然。通过重点章节,条理清晰、系统地介绍了读者希望了解的网页设计技巧。本书涉及面广泛,几乎囊括了CSS 3+p网页样式与布局的所有重要知识,适合所有的网页设计初学者快速入门,同时也适合想全面了解CSS 3+p网页样式与布局的设计人员阅读。

前言


伴随着Web 2.0潮流的盛行,传统的表格布局模式正逐渐被网页标准化CSS+p的设计方式取代,对最新CSS 3的学习也成为网页设计师的必修功课。本书专门针对网页样式与布局的初学者,帮助他们快速提高实战水平。


1.本书特色


(1)知识全面:由浅入深,涵盖了所有的CSS 3+p知识点,帮助读者快速掌握网页设计方面的技能。


(2)图文并茂:在介绍案例的过程中,每一个操作均有对应的插图。图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程及效果,便于更快地理解和掌握。


(3)易学易用:颠覆传统“看”书的观念,变成一本能“操作”的图书。


(4)案例丰富:把知识点融会于系统的案例实训中,并且结合经典案例进行讲解和拓展,进而实现“知其然,并知其所以然”的效果。


(5)贴心提示:本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“注意”等形式进行说明,以免读者在学习的过程中走弯路。


(6)超值赠送:除了本书的素材和结果外,还附赠封面所述的大量的资源,读者可以全面掌握网页设计方方面面的知识。


2.读者对象


本书不仅适合网页设计初级读者入门学习,也可作为中、高级用户的参考手册。书中大量的实例模拟真实的网页设计案例,对读者的工作有现实的借鉴作用。


3.作者团队


本书作者刘玉红长期从事网站设计与开发工作。胡同夫、梁云亮、王攀登、王婷婷、陈伟光、包慧利、孙若淞、肖品、王维维和刘海松等人参与了本书的编写工作。


本书虽然倾注了编者的努力,但由于水平有限,书中难免存在疏漏之处,恳请读者批评指正。读者如果遇到问题或有意见和建议,敬请与我们联系,我们将全力提供帮助。


编者

第1章 制作网页的准备工作


随着Internet的发展与普及,越来越多的人开始在网上通信、工作、购物、娱乐,甚至在网络上建立自己的网站。网站代表了企业和个人的形象,正确的布局可以让网站的结构更加合理,使网站变得更加美观。


1.1 认识网页和网站


现在,网站已经成为越来越重要的信息发布途径。拥有自己的网站,可以说是每个网页创作者的梦想。要学习网站建设,首先应当认识一下网页和网站,了解它们的相关概念。


1.1.1 什么是网页


网页是Internet中最基本的信息单位,是把文字、图形、声音及动画等各种多媒体信息相互链接起来而构成的一种信息表达方式。


通常情况下,网页中有文字和图像等基本信息,有些网页中还有声音、动画和视频等多媒体内容。


网页一般由站标、导航栏、广告栏、信息区和版权区等部分组成,如图1-1所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-1 网页的外观

在访问一个网站时,首先看到的网页一般称为该网站的首页。有些网站的首页具有欢迎访问者的作用。首页只是网站的开场页,单击页面上的文字或图片,即可打开网站主页,而首页也随之关闭,如图1-2所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-2 网站的首页

网站主页与首页的区别在于:主页设有网站的导航栏,是所有网页的链接中心。但多数网站的首页与主页通常合为一个页面,即省略了首页而直接显示主页,在这种情况下,它们指的是同一个页面,如图1-3所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-3 网站主页与首页合二为一

1.1.2 什么是网站


网站就是在Internet上通过超级链接的形式构成的相关网页的集合。简单地说,网站是一种通信工具,人们可以通过网页浏览器来访问网站,获取自己需要的资源或享受网络提供的服务。例如,人们可以通过淘宝网站查找自己需要的信息,如图1-4所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-4 淘宝网站

1.2 网页中需要包含的要素


在互联网中,网页是一个文件,存储在某一台与互联网相连的计算机或服务器中,使用统一资源定位符(URL)来识别和访问,本节就来介绍网页中需要包含的要素。


1.2.1 需要HTML文件


HTML(Hypertext Marked Language),即超文本标记语言,是一种用来制作超文本文档的简单标记语言,是应用非常广泛的网页格式,也是用来显示Web页面的语言之一。


网页中所有定义的色彩、文字、表格,甚至是视频等元素的网页相关代码,都是编写在HTML文件中的,可以说HTML就是网站展示声音、图片、文字等元素的平台。图1-5展示了淘宝网首页的HTML相关代码。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-5 淘宝网首页的HTML相关代码

1.2.2 需要p层


<div>标记是一个区块容器标记,在<div></div>标记中,可以放置其他的一些HTML元素,例如段落<p>、标题<h1>、表格<table>、图片<img>和表单等。然后使用CSS 3相关的属性把div容器标记中的元素作为一个独立的对象进行修饰,这样就不会影响到其他HTML元素了。


形象地讲,在HTML网页文件中,p就相当于一个“圈地者”,它将网页分成若干个小区域,每一个p在网页上占据了一定的位置,在这个位置上,用户可以放置特定的内容。图1-6中的“手机数码”区域,就是先用p圈出一块地方,然后在上面放置“手机数码”的分类信息,其他区域也是这样来放置网页元素的,最后合在一起,就整合出了一个完美的网页了。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-6 网页上的“手机数码”区域及其他区域

1.2.3 需要CSS定义的网页样式


在网页中,设计者将p元素都放置好了,要想给浏览者呈现出一个丰富多彩的网页效果,还需要利用CSS来定义网页样式。


在设计网页的过程中,CSS扮演了一个“美术家”的角色,利用CSS,可以定义网页文字、图片以及视频等元素的显示方式,使其能够更贴切地接近我们的要求。如图1-7所示的网页中就使用了CSS来定义网页样式。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-7 使用了CSS来定义网页样式

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载CSS样式一般是作用在p上的,它需要与p一起构成网页上的一个模块,而网页又是由多个p构成的,因此,从狭义上讲,HTML+p+CSS组合起来,就能构成一个网站。


1.2.4 需要JavaScript设置网页动画


JavaScript是一种为了使网页能够具有交互性,能够包含更多活跃的元素,而嵌入在网页中的技术,它使我们的网页能够表现得内容更加生动,使网页的效果更加醒目。


JavaScript作为一种可以给网页增加交互性的脚本语言,拥有近20年的发展历史。它的简单、易学易用特性,使其立于不败之地。使用JavaScript可以很容易地制作出很多网页动画效果,如漂亮的时钟、广告效果的跑马灯等。


图1-8中,网页里的广告图片会自动地切换,而且单击图片左右两侧的箭头时,广告也会切换。这种效果就是用JavaScript脚本控制的。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-8 网页里的广告图片效果

1.2.5 需要域名与服务器空间


一个网站开发完成后,要想运营,需要给网站申请一个域名。申请域名的方法很多,用户可以登录域名服务商的网站,根据提示申请域名。域名有免费域名和收费域名两种,用户可以根据实际的需要进行选择。


域名注册成功之后,还需要申请网站空间,应根据不同的网站类型选择不同的空间。网站空间有免费空间和收费空间两种。对于个人网站的用户来说,可以先申请免费空间使用。免费空间只需向空间的服务提供商提出申请,在得到答复后,按照说明上传主页即可,主页的域名和空间都不用操心。对于商业网站而言,用户需要考虑空间和安全性等因素,为此可以选择收费网站。


CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载使用免费空间美中不足的是:网站的空间有限,提供的服务一般,空间不是非常稳定,域名不能随心所欲地选择。


域名与网站是一一对应的关系,用户只需要在浏览器里输入某个域名,就能进入到对应的站点中。例如,在浏览器的地址栏中输入“www.baidu.com”这个域名,就能进入百度网站,如图1-9所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-9 进入百度网站

1.3 一个简单网页的基本构成


任何一个网页的内容都包含在<html>和</html>这对标签之内,在这对标签中,通常包含三个要素,分别是head部分、body部分以及注释部分。


1.3.1 head部分


头标记head用于说明文档头部的相关信息,一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息以<head>开始,以</head>结束,语法格式如下:

    <head>

</head>


CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载<head>元素的作用范围是整篇文档,定义在HTML语言头部的内容往往不会在网页上直接显示。在head标记中,一般可以设置title和meta等标记的内容。


1.3.2 body部分


网页所要显示的内容都放在网页的主体标记内,主体标记以<body>开始,以</body>标记结束,语法格式如下。

    <body>

</body>


主体标记是HTML文件的重点所在,HTML的所有标记都将放在这个标记内。然而它并不仅仅是一个形式上的标记,它本身也可以控制网页的背景颜色或背景图像。


注意,在构建HTML结构时,标记不允许交错出现,否则会造成错误。例如,下列代码中出现了交错:

    <html>

<head>

<title>html标记</title>

<body> <!--<body>开始标记出现在<head>标记内-->

</head>

</body>

</html>


代码中的第4行<body>开始标记和第5行的</head>结束标记出现了交叉,这是错误的。HTML中的所有代码都不允许交错出现。


1.3.3 注释部分


注释是在HTML代码中插入的描述性文本,用来解释该代码或提示其他信息。注释只出现在代码中,浏览器对注释代码不进行解释,并且在浏览器的页面中不显示注释。


在HTML源代码中适当地插入注释语句是一种非常好的习惯,对于设计者日后的代码修改、维护工作很有好处。如果将有注释的代码交给其他设计者,其他人也能很快地读懂前者所撰写的内容。


注释的语法格式如下:

    <!--注释的内容-->


注释语句元素由前后两半部分组成,前半部分由一个左尖括号、一个半角感叹号和两个连字符头组成,后半部分由两个连字符和一个右尖括号组成。例如:

    <html>

<head>

<title>标记测试</title>

</head>

<body>

<!-- 这里是页内标题-->

<h1>网页</h1>

</body>

</html>


页面注释不但可以对HTML中一行或多行代码进行解释说明,而且能够注释掉某些代码。如果希望某些HTML代码在浏览器中不显示,可以将这部分内容放在<!--和-->之间。例如,修改上述代码,如下所示:

    <html>

<head>

<title>标记测试</title>

</head>

<body>

<!--

<h1>网页</h1>

-->

</body>

</html>


修改后的代码,将<h1>标记作为注释内容处理,在浏览器中将不会显示这部分内容。

1.4 制作网页的总体流程


对于一个网站来说,除了网页内容外,还要对网站进行整体规划设计。格局凌乱的网站的内容再精彩,也不能说是一个好网站。


要设计出一个精美的网站,前期的规划是必不可少的。


1.4.1 网页规划


规划站点就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。规划站点就是对站点中所使用的素材和资料进行管理和规划,对网站中栏目的设置、颜色的搭配、版面的设计、文字图片的运用等进行规划。


一般情况下,将站点中所用的图片和按钮等图形元素放在images文件夹中,HTML文件放在根目录下,而动画和视频等放在flash文件夹中。对站点中的素材进行详细的规划,便于日后管理。


1.4.2 搜集资料


确定了网站风格和布局后,就要开始搜集素材了。常言道:“巧妇难为无米之炊”,要让自己的网站有声有色、能吸引人,就要尽量搜集素材,包括文字、图片、音频、动画及视频等,搜集到的素材越充分,制作网站就越容易。素材既可以从图书、报刊、光盘及多媒体上得来,也可以从网上搜集,还可以自己制作,然后把搜集到的素材去粗取精,选出制作网页所需的素材。如图1-10所示就是百度图库里面的精彩图片。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-10 搜索素材图片

不过,在搜集图片素材时,一定要注意图片的大小,因为在网络中传输时,图片的容量越小,传输的速度就越快,所以应尽量搜集容量小、画面精美的图片。


1.4.3 使用Photoshop设计网页的总体效果


制作网页是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂的顺序来制作。所谓先大后小,就是在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题能及时修改。使用Photoshop可以设计网页的总体效果。如图1-11所示,就是使用Photoshop制作出的网页效果。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-11 使用Photoshop制作出的网页总体效果

1.4.4 通过切图,得到网页素材文件


在得到网页的总体效果后,还需要通过切图,得到网页素材文件,最常用的切图工具仍然是Photoshop。切图并保存素材文件的操作步骤如下。


step 01 打开Photoshop软件,在工作界面中选择“文件”→“打开”菜单命令,在打开的对话框中选择制作好的网页总体效果图,如图1-12所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-12 打开网页效果图

step 02 在工具箱中单击“切片工具”按钮CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载,根据需要,在网页中选择需要切割的图片,如图1-13所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-13 选择切片

step 03 选择“文件”→“存储为Web所用格式”菜单命令,弹出“存储为Web和设备所用格式”对话框,在其中选中所有切片图像,如图1-14所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-14 “存储为Web和设备所用格式”对话框

step 04 单击“存储”按钮,即可打开“将优化结果存储为”对话框,单击“切片”后面的下三角按钮,从弹出的下拉列表中选择“所有切片”选项,如图1-15所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-15 “将优化结果存储为”对话框

step 05 单击“保存”按钮,即可将所有切片中的图像保存起来,如图1-16所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-16 开始进行切片并保存

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载在切图过程中,如果有格式一致的重复项,我们只需切一次,其他重复项我们通过调整table表格,使它正常,这样做的好处有两点,一是避免重复劳动,二是保证每个重复项表格图片大小统一或一致。


1.4.5 搭建网页p层


开发网站的首要任务就是搭建网页p层,搭建p的方法是在HTML里的body部分,先用一些空白的p层说明某个位置应该放某个特定的模块。


如图1-17所示,我们通过Photoshop得到了网页的整体效果后,下面就可以在HTML页面中用p搭建起其中的“产品分类”、“联系我们”、“友情链接”等模块,最后再向p层添加相应的内容,来实现效果了。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-17 p效果演示

1.4.6 定义CSS和JavaScript效果


搭建好网页的p层后,就能在网页中通过HTML标签来定义页面的效果了。在搭建的过程中,需要使用CSS来定义样式,用JavaScript来定义动态的效果。


CSS的作用主要是定义网页中的各个部分以及元素的样式,比如图片的大小、文字的显示方式、边框的样式等。


JavaScript的作用主要是定义网页动态效果,通过JavaScript的设置,可以使网页变得更加灵活、亲切,能够吸引更多的眼球。如图1-18所示,这是在某页面中添加了JavaScript脚本,实现的效果就是图片自动循环切换。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-18 某页面添加JavaScript脚本实现的效果

1.4.7 测试网页


网页制作完毕,上传到网站之后,要在浏览器中打开网站,逐一对站点中的网页进行测试,发现问题要及时修改,然后重新上传。


1.文字、图片的测试


网页的主要元素就是文字与图片,在网页中,适当的图片和动画既能起到广告宣传的作用,又能起到美化页面的作用。一个网页的元素可以包括图片、动画、边框、颜色、字体、背景、按钮等。测试的内容主要包括以下几个部分:



  • 要确保图形有明确的用途,图片或动画不要胡乱地堆在一起,以免浪费传输时间。
  • 验证所有页面字体的风格是否一致,以及文字表述信息是否有误。
  • 背景颜色应该与字体颜色和前景颜色相搭配。
  • 图片的大小和质量也是一个很重要的因素,一般采用JPG或GIF压缩。

2.测试链接


一个网页中,一般存在有多个超级链接,测试链接的主要内容可分为三个方面:



  • 测试所有链接是否按指示的那样确实链接到了该链接的页面。
  • 测试所链接的页面是否存在。
  • 保证Web应用系统上没有孤立的页面。所谓孤立页面,是指没有链接指向该页面,只有知道正确的URL地址才能访问。

3.浏览器兼容性测试


浏览器是Web客户端最核心的构件,来自不同厂商的浏览器对Java、JavaScript、ActiveX、plug-ins或不同的HTML规格有不同的支持。例如,ActiveX是Microsoft的产品,是为Internet Explorer而设计的,JavaScript是Netscape的产品,Java是Sun的产品等。另外,框架和层次结构风格在不同的浏览器中也有不同的显示,甚至根本不显示。不同的浏览器对安全性和Java的设置也不一样。


测试浏览器兼容性的一个方法是创建一个兼容性矩阵。在这个矩阵中,测试不同厂商、不同版本的浏览器对某些构件和设置的适应性。

1.5 网站种类与网页布局方式


当用户在网络中遨游时,一个个精彩的网页会呈现在我们面前。网页的精彩因素有哪些呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个重要的因素,那就是网页的布局设计。


1.5.1 网站的种类


按照内容形式的不同,网站可以分为门户网站、职能网站、专业网站和个人网站。


1.门户网站


门户网站是指涉及领域非常广泛的综合性网站,如国内著名的三大门户网站:网易、搜狐和新浪。如图1-19所示为网易网站的首页。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-19 网易网站的首页

2.职能网站


职能网站是指一些公司为展示其产品或对其所提供的售后服务进行说明而建立的网站。如图1-20所示为联想集团的中文官方网站。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-20 联想集团的中文官方网站

3.专业网站


专业网站指的是专门以某个主题为内容而建立的网站,这种网站都是以某一题材作为网站内容的。如图1-21所示为赶集网站,该网站主要为用户提供租房、二手货交易等同城相关服务。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-21 赶集网

4.个人网站


个人网站是由个人开发建立的网站,在内容形式上具有很强的个性,通常用来宣传自己或展示个人的兴趣爱好。如现在比较流行的淘宝网,在淘宝网上注册一个账户,开家自己的小店,在一定程度上就宣传了自己和展示了个人的兴趣与爱好,如图1-22所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-22 淘宝网上的个人小店

1.5.2 网页布局方式


常见的网页布局有“同”字型、“厂”字型、标题正文型、分栏型、封面型和Flash型等。


1.“同”字型


“同”字型是大型网站常用的页面布局,特点是内容丰富、链接多、信息量大。网页的上部是徽标和导航栏,下部分为3列,两边区域是图片或文字链接和小图片广告,中间是网站的主要内容,最下面是版权信息等,如图1-23所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-23 “同”字型网站

2.“厂”字型


“厂”字型布局的特点是内容清晰、一目了然,网页顶端是徽标和导航栏,左侧是文本和图片链接,右边是正文信息区,如图1-24所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-24 “厂”字型网站

3.标题正文型


标题正文型布局的特点是内容简单,网页上部是网站徽标和标题,下部是网页正文,如图1-25所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-25 标题正文型网站

4.分栏型


分栏型布局一般分为左右(或上下)两栏或者多栏。一栏是导航链接,一栏是正文信息,如图1-26所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-26 分栏型布局网站

5.封面型


封面型布局更接近于平面设计艺术,主要应用于首页上,一般为设计精美的图片或动画,多用于个人网页,如果处理得好,会给人带来赏心悦目的感觉,如图1-27所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-27 封面型布局网站

6.Flash型


Flash型布局采用Flash技术完成,页面所表达的信息极富感染力,其视觉效果与听觉效果与传统页面不同,能给浏览者以很大的冲击,很受年轻人的喜爱,如图1-28所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-28 Flash型布局网站

1.6 综合示例——在Photoshop CS6中构建网页结构


设计网页之前,设计者可以先在Photoshop中勾画出框架,那么后来的设计就可以在此框架基础上进行布局了,具体的操作步骤如下。


step 01 打开Photoshop CS6,如图1-29所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-29 Photoshop工作界面

step 02 选择“文件”→“新建”菜单命令,打开“新建”对话框,在其中设置文档的宽度为1024像素、高度为768像素,如图1-30所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-30 “新建”对话框

step 03 单击“确定”按钮,创建一个1024×768像素的文档,如图1-31所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-31 创建空白文档

step 04 选择左侧工具框中的“矩形工具”,并调整为路径状态,画出一个矩形框,如图1-32所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-32 绘制矩形框

step 05 使用文字工具,创建一个文本图层,输入“网页的头部”,如图1-33所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-33 输入文字

step 06 依次绘出中左、中右和底部,网页的结构布局最终如图1-34所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-34 网页布局效果

1.7 上机练习——使用Photoshop制作纵向导航条


制作垂直导航条的具体操作步骤如下。


step 01 新建一个宽“300px”,高“500px”的文件,将它命名为“垂直导航条”,如图1-35所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-35 “新建”对话框

step 02 单击“确定”按钮,创建一个空白文档,如图1-36所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-36 创建的空白文档

step 03 在工具箱中单击“前景色”按钮,打开“拾色器(前景色)”对话框,设置前景色为灰色(R229,G229,B229),如图1-37所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-37 “拾色器”对话框

step 04 单击“确定”按钮,按下Alt+Delete键,填充颜色,如图1-38所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-38 填充颜色

step 05 新建“图层1”,使用矩形选区工具绘制区域,填充为白色,如图1-39所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-39 绘制形状

step 06 双击“图层1”,打开“图层样式”对话框,给该图层添加投影、内阴影、渐变叠加以及描边样式。然后单击“确定”按钮,即可看到添加图层样式后的效果,如图1-40所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-40 添加图层样式

step 07 选择“工具箱”中的“横排文字工具”,输入导航条上的文字,并设置文字的颜色、大小等属性,如图1-41所示。

CSS3+DIV网页样式与布局案例课堂pdf/doc/txt格式电子书下载

图1-41 输入文字

step 08 选择“工具箱”中的“自定义形状”按钮,在上方

....

本站仅展示书籍部分内容

如有任何咨询

请加微信10090337咨询

本站仅展示书籍部分内容
如有任何咨询

请加微信10090337咨询

再显示