DIV+CSS3.0网页布局实战从入门到精通(txt+pdf+epub+mobi电子书下载)


发布时间:2020-09-07 22:33:27

点击下载

作者:新视角文化行(编著)

出版社:数字艺术出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

DIV+CSS3.0网页布局实战从入门到精通

DIV+CSS3.0网页布局实战从入门到精通试读:

前言

丰富多样的网站是现代社会发展不可缺少的一部分,在很大程度上推动了许多行业的迅速发展,随着Internet技术及其应用的不断发展,网络在大部分人的生活中已经占据了不可替代的位置。

网页是宣传网站的重要窗口,只有将网页设计得更加精美并极具创意,才能够吸引更多的浏览者进行访问。那么,如何才能将网页设计得更加实用、精致呢?在Web标准席卷国内网站设计领域的时代,使用Div+CSS布局设计网页已成为一种流行趋势,它能够真正做到W3C提出的内容与表现相分离的Web标准,本书主要讲述的便是基于Web标准的Div+CSS网页的设计方法以及制作技巧,希望能够帮助大家及时转变传统的网站设计思维。

本书的特点与内容安排

本书主要介绍了如何使用Div+CSS的布局方式进行网页布局设计,并通过 100 个经典实例与知识点相结合的形式进行讲解。另外,在较为难以理解的地方加以提示,使读者能够轻松、快速地掌握该种布局方式。全书共分为12章,每章的主要内容如下。

第 1 章 Dreamweaver 与 CSS 基础。本章通过 7 个实例介绍了如何在Dreamweaver中创建站点、远程交互站点以及设置远程服务器。另外,本章还介绍了CSS样式的基础知识,其中包括内联CSS样式、内部CSS样式和外部CSS样式以及使用CSS样式定义单位、值等。

第2章 Div+CSS布局基础。本章通过9个实例介绍了Div常用的布局方式以及常用的定位方式,并且还讲述了在进行margin属性设置时经常出现的空白边叠加现象以及较为特殊的流体网格布局的使用方法和制作技巧。

第 3章 使用CSS控制网页背景。本章通过 7个实例介绍了使用CSS样式定义网页背景颜色、背景图像,以及控制背景图像的位置、固定背景图像等方面的相关知识,并且还介绍了CSS 3.0中新增的背景控制属性。

第4章 使用CSS控制文本。本章通过13个实例全方位地介绍了在CSS样式中定义文字属性的方法和技巧,以及网页中特殊字体的使用方法和CSS类选区的应用,并且还介绍了CSS 3.0中新增的文字属性。

第 5章 使用CSS控制图片效果。本章通过 8个实例介绍了使用CSS样式对网页中图片的边框、缩放、对齐方式进行控制的技巧以及实现图文混排效果的方法,并且还介绍了CSS 3.0中新增的边框控制属性。

第 6章 使用CSS控制列表样式。本章通过 9个实例全面并细致地介绍了网页中列表标签的使用方法、使用CSS样式定义列表的方法以及通过CSS样式与列表相结合制作网页导航菜单的方法,并且还介绍了CSS 3.0中新增的内容和透明度属性。

第 7章 使用CSS美化表格和表单元素。本章通过 12个实例介绍了网页中表格和表单元素的创建方法以及使用CSS样式对表格和表单元素进行设置和调整的技巧,并且还介绍了如何使用CSS样式实现表格特效和CSS 3.0中新增的多列布局的相关属性及使用方法。

第 8章 使用CSS样式美化超链接和鼠标指针。本章通过 9个实例介绍了如何创建、定义网页超链接,以及如何使用CSS样式实现超链接和鼠标指针的特殊效果,并且还介绍了CSS 3.0中新增的与界面有关的属性及应用方法。

第 9章 使用CSS滤镜。本章通过 5个实例简单介绍了有关CSS滤镜的相关知识,其中包括Alpha滤镜、BlendTrans滤镜、Blur滤镜、FlipH和FlipV滤镜以及DropShadow滤镜,并且还介绍了CSS样式中各种滤镜效果的应用方法。

第10章 CSS与其他语言综合运用。本章通过6个实例介绍了CSS与其他语言综合运用的方法和技巧,以及运用后所产生的效果。

第 11章 使用网站常见效果。本章通过 5个实例详细介绍了如何创建和修改 Spry构件,其中包括Spry菜单栏、Spry选项卡式面板、Spry折叠式面板、Spry可折叠面板和Spry工具提示。

第 12章 布局制作商业网站页面。本章通过 10个商业网站实例的设计制作,向读者全面介绍了如何使用Div+CSS布局方式设计制作不同类型的商业网站页面。

关于本书作者

本书作者有着多年的网页教学以及网页设计制作的工作经验,先后在多家网络公司从事网页设计制作工作,积累了大量网页设计制作经验并精通网页布局和美化的多种技巧。本书基于最新版本的Dreamweaver CS6软件,按照从简单到复杂、从入门到精通的思路进行写作,作者还结合了 100个典型的网站实例进行讲解,从而使读者能够快速地掌握目前流行的Div+CSS网页布局及制作技能。

如何阅读本书

本书采用了图文相结合的方式对网页的设计以及制作的细节进行全面的展示,本书配套光盘中提供了书中所有实例的源文件、相关素材以及书中实例的视频教程,方便读者学习和参考。

本书由新视角文化行编著,在成书的过程中得到了杜昌国、解晓丽、王红蕾、陆沁、孙倩、时延辉、黄友良、刘绍捷、赵頔、刘冬美、尚彤、王梓力、刘爱华、周莉、王海鹏、刘智梅、齐新、蒋立军、戴时影、王君赫、张杰、张猛、吕亚鹏、蒋岚、蒋玉、苏丽荣、谭明宇、李岩、吴承国、孟琦、曹培强等人的大力帮助和支持,在此表示感谢。

由于作者编写水平有限,书中难免有错误和疏漏之处,恳请广大读者批评、指正。读者在学习的过程中,如果遇到问题,可以联系作者(电子邮件nvangle@163.com),也可以与本书策划编辑郭发明联系交流(guofaming@ptpress.com.cn)。编著2013年2月

基础篇

第1章Dreamweaver与CSS基础

Dreamweaver是一款所见即所得的网页编辑软件,它是第一款针对专业网页设计师的视觉化网页制作软件,利用它可以轻而易举地制作出跨平台限制、跨浏览器限制且充满动感的网页。

在Dreamweaver中设计制作网页时,需要使用CSS样式对页面进行控制和修饰,在网页中应用CSS样式表有 4 种方式,内联即样式、嵌入样式、链接外部样式和导入样式,用户可以根据所设计网页的不同要求进行选择。实例1 建站第一步——创建本地静态站点

在 Dreamweaver 中创建本地站点非常简便、快捷。不管制作什么类型、什么风格的网站页面都要从构建站点开始,首先要理清网站结构的脉络,然后才能在创建的静态站点中设计制作网页。

实例分析

本实例主要通过执行“站点→新建站点”菜单命令,然后在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置,实例1设置完成后的效果如图1-1所示。图1-1 最终效果

知识点链接

在创建本地静态站点时,唯一用到的菜单命令就是“站点→新建站点”命令,通过该命令弹出“站点设置对象”对话框,在该对话框中进行相应的设置即可。

制作步骤执行“站点→新建站点”菜单命令,弹出“站点设置对象”对话框,在“站点名称”文本框中输入站点的名称,如图1-2所示。单击“本地站点文件夹”文本框后的“浏览”按钮,弹出“选择根文件夹”对话框,浏览到本地站点的位置,如图1-3所示。图1-2 “站点设置对象”对话框图1-3 “选择根文件夹”对话框单击“选择”按钮,确定本地站点根目录位置,此时“站点设置对象”对话框如图1-4所示。单击“保存”按钮,完成本地站点的创建。这时Dreamweaver将自动打开“文件”面板,在该面板中显示了刚刚创建的静态站点,如图1-5所示。图1-4 “站点设置对象”对话框图1-5 “文件”面板

提问:在Dreamweaver中,新建站点有几种方式?

答:两种。一种是通过执行“站点→新建站点”菜单命令来新建站点;另一种是执行“站点→管理站点”菜单命令,在弹出的“管理站点”对话框中单击“新建”按钮,同样可以弹出“站点设置对象”对话框,在该对话框中设置以及新建站点。

提问:为什么要创建本地静态站点?

答:在大多数情况下,都是在本地站点中对网页进行编辑制作,然后再通过FTP上传到远程服务器上,因此在制作网页之前应创建本地静态站点。实例2 设置远程服务器——创建企业网站站点

在创建站点时,可以先将该站点的远程服务器信息设置好,这样的话可以制作好一部分网站页面,就上传一部分页面,便于随时在网络中查看页面的效果。

实例分析

本实例主要通过执行“站点→新建站点”菜单命令,在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置,然后再切换到“服务器”选项的设置界面中,对服务器信息进行设置,实例2设置完成后的效果如图1-6所示。图1-6 最终效果

知识点链接

本实例的关键在于服务器信息的设置,在设置信息时要确保FTP地址、用户名和密码全部正确,才能连接上Web服务器。

制作步骤执行“站点→新建站点”菜单命令,弹出“站点设置对象”对话框,在“站点名称”对话框中输入站点的名称,单击“本地站点文件夹”后的“浏览”按钮,弹出“选择根文件夹”对话框,浏览到站点的根文件夹,如图 1-7 所示。单击“选择”按钮,选定站点根文件夹,如图1-8所示。图1-7 “选择根文件夹”对话框图1-8 “站点设置对象”对话框单击“站点设置对象”对话框左侧的“服务器”选项,切换到“服务器”选项设置界面,如图1-9所示。单击“添加新服务器”按钮,弹出“添加新服务器”窗口,对远程服务器的相关信息进行设置,如图1-10所示。单击“测试”按钮,弹出“文件活动”对话框,显示正在与设置的远程服务器进行连接,如图 1-11 所示。连接成功后,弹出提示对话框,提示“Dreamweaver 已成功连接到您的 Web服务器”,如图1-12所示。图1-9 “服务器”选项设置界面图1-10 设置服务器信息图1-11 “文件活动”对话框图1-12 与远程服务器连接成功单击“添加新服务器”窗口上的“高级”选项卡,切换到“高级”选项卡的设置,在“服务器模型”下拉列表中选择“PHP MySQL”选项,如图 1-13所示。单击“保存”按钮,完成“添加新服务器”窗口的设置,如图1-14所示。图1-13 设置“服务器模型”图1-14 完成远程服务器设置单击“保存”按钮,完成企业网站站点的创建,“文件”面板将自动切换为刚建立的站点,如图 1-15 所示。单击“文件”面板上的“连接到远程服务器”按钮,即可连接到该站点所设置的远程服务器上,如图1-16所示。图1-15 “文件”面板

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载