![DIV+CSS 3.0网页布局实战从入门到精通(全彩超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/850/22652850/b_22652850.jpg)
第1篇 基础篇
第1章 Dreamweaver与CSS基础
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1738827524-Rz9V93beNmRZPLc8kuDbbbf964N5HEEq-0-882a540f5dcac18bafdbda30f36fd072)
Dreamweaver是一款所见即所得的网页编辑软件,它是第一款针对专业网页设计师的视觉化网页制作软件,利用它可以轻而易举地制作出跨平台限制、跨浏览器限制且充满动感的网页。
在Dreamweaver中设计制作网页时,需要使用CSS样式对页面进行控制和修饰,在网页中应用CSS样式表有4种方式,内联即样式、嵌入样式、链接外部样式和导入样式,用户可以根据所设计网页的不同要求进行选择。
实例001 建站第一步——创建本地静态站点
在Dreamweaver中创建本地站点非常简便、快捷。不管制作什么类型、什么风格的网站页面都要从构建站点开始,首先要理清网站结构的脉络,然后才能在创建的静态站点中设计制作网页。
●源文件 无
●视频 光盘\视频\第1章\实例1.swf
●知识点 创建站点
●学习时间 5分钟
实例分析
本实例主要通过执行“站点→新建站点”菜单命令,然后在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置,实例1设置完成后的效果如图1-1所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0019_0005.jpg?sign=1738827524-esdElJidzfQNiy6DD4DYN8FewL05dpPd-0-4518eae657317d9f334adff68f09d867)
图1-1 最终效果
知识点链接
在创建本地静态站点时,唯一用到的菜单命令就是“站点→新建站点”命令,通过该命令弹出“站点设置对象”对话框,在该对话框中进行相应的设置即可。
制作步骤
01 执行“站点→新建站点”菜单命令,弹出“站点设置对象”对话框,在“站点名称”文本框中输入站点的名称,如图1-2所示。单击“本地站点文件夹”文本框后的“浏览”按钮,弹出“选择根文件夹”对话框,浏览到本地站点的位置,如图1-3所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0019_0007.jpg?sign=1738827524-ZF0JKkpzzNhQ7Mf7uXiQ1gIxSvRuS1QK-0-5fd4385ec69dad1ce882ced4fc43cf3f)
图1-2 “站点设置对象”对话框
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0019_0008.jpg?sign=1738827524-ArjkldxooR230nuDNUoNgyOqOvjFywPA-0-a6f39ad0e3e876e10e380a14eab12cd4)
图1-3 “选择根文件夹”对话框
02 单击“选择”按钮,确定本地站点根目录位置,此时“站点设置对象”对话框如图1-4所示。单击“保存”按钮,完成本地站点的创建。这时Dreamweaver将自动打开“文件”面板,在该面板中显示了刚刚创建的静态站点,如图1-5所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1738827524-CLaGKRORm3qt2LeI6bOglE1rbRpegCCP-0-88a2d4adc8c3dee85472d07716236472)
图1-4 “站点设置对象”对话框
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1738827524-DN1KQEJNPfG4n6eirnSoJiPcwow945h5-0-02ecf135cf00bc1273302b6a41260213)
图1-5 “文件”面板
Q 在Dreamweaver中,新建站点有几种方式?
A 两种。一种是通过执行“站点→新建站点”菜单命令来新建站点;另一种是执行“站点→管理站点”菜单命令,在弹出的“管理站点”对话框中单击“新建”按钮,同样可以弹出“站点设置对象”对话框,在该对话框中设置以及新建站点。
Q 为什么要创建本地静态站点?
A 在大多数情况下,都是在本地站点中对网页进行编辑制作,然后再通过FTP上传到远程服务器上,因此在制作网页之前应创建本地静态站点。
实例002 设置远程服务器——创建企业网站站点
在创建站点时,可以先将该站点的远程服务器信息设置好,这样的话可以制作好一部分网站页面,就上传一部分页面,便于随时在网络中查看页面的效果。
●源文件 无
●视频 光盘\视频\第1章\实例2.swf
●知识点 设置服务器信息
●学习时间 10分钟
实例分析
本实例主要通过执行“站点→新建站点”菜单命令,在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置,然后再切换到“服务器”选项的设置界面中,对服务器信息进行设置,实例2设置完成后的效果如图1-6所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0020_0007.jpg?sign=1738827524-aWQ3hUmEsQ8COQHhGy1wkgHPBksVcIs3-0-88d812ab1875f440fa6e3e98c5baf148)
图1-6 最终效果
知识点链接
本实例的关键在于服务器信息的设置,在设置信息时要确保FTP地址、用户名和密码全部正确,才能连接上Web服务器。
01 执行“站点→新建站点”菜单命令,弹出“站点设置对象”对话框,在“站点名称”对话框中输入站点的名称,单击“本地站点文件夹”后的“浏览”按钮,弹出“选择根文件夹”对话框,浏览到站点的根文件夹,如图1-7所示。单击“选择”按钮,选定站点根文件夹,如图1-8所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1738827524-DCKGX85xS4E5wiJA3XHMiQZc3bgZz2P9-0-29835057c26eb5987edb667118b4c395)
图1-7 “选择根文件夹”对话框
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0021_0003.jpg?sign=1738827524-vtLnARUql8wexBkQZZh3Cuf5Co7GsOmU-0-9195e83be25d16387bff52ad7ce5c565)
图1-8 “站点设置对象”对话框
02 单击“站点设置对象”对话框左侧的“服务器”选项,切换到“服务器”选项设置界面,如图1-9所示。单击“添加新服务器”按钮,弹出“添加新服务器”窗口,对远程服务器的相关信息进行设置,如图1-10所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0021_0005.jpg?sign=1738827524-LRuL9cAIZKlrmesbcGMdzetEQEiAsBjt-0-0d1df076389315929c40d5ed9e1f2125)
图1-9 “服务器”选项设置界面
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0021_0006.jpg?sign=1738827524-Hu3zejocASmeOpvHHopG31PEH6lMSCkd-0-09b395e09816b8074f9f145d2ffbcb27)
图1-10 设置服务器信息
03 单击“测试”按钮,弹出“文件活动”对话框,显示正在与设置的远程服务器进行连接,如图1-11所示。连接成功后,弹出提示对话框,提示“Dreamweaver已成功连接到您的Web服务器”,如图1-12所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0021_0007.jpg?sign=1738827524-GrPVI6EEZNh7tTYSPDKhAXtG8eJGyzxW-0-6a7b6d282fa59133ac98f159c0c68240)
图1-11 “文件活动”对话框
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0021_0008.jpg?sign=1738827524-zVHRAjpaXfulzw5zaJhMnCLUXeabLyPQ-0-ac0b08a2589969eafffc45d4ce75782b)
图1-12 与远程服务器连接成功
04 单击“添加新服务器”窗口上的“高级”选项卡,切换到“高级”选项卡的设置,在“服务器模型”下拉列表中选择“PHP MySQL”选项,如图1-13所示。单击“保存”按钮,完成“添加新服务器”窗口的设置,如图1-14所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1738827524-QGnAyuz3C8qr4FpydndMSzMGyCLMxrbW-0-dde1566ca9f7cdbf29b72f26a231d84d)
图1-13 设置“服务器模型”
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1738827524-qEvIBdOIWuGgcKw6HTUcFwgAcqUqjWkM-0-eb8dd34ebafe3840ebf7d444711c8e75)
图1-14 完成远程服务器设置
05 单击“保存”按钮,完成企业网站站点的创建,“文件”面板将自动切换为刚建立的站点,如图1-15所示。单击“文件”面板上的“连接到远程服务器”按钮,即可连接到该站点所设置的远程服务器上,如图1-16所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0022_0004.jpg?sign=1738827524-KBg5mpGLMemXhnMVOES9FfL0i5GbKIFk-0-e0e11f0f3de87040bd1a6cea2ed40b73)
图1-15 “文件”面板
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0022_0005.jpg?sign=1738827524-UAVWI0Mqn5CzJDKRunhWOA4j6II8I4aY-0-04d7a8ee1febe77f860705aa323b9ff5)
图1-16 连接到远程服务器
Q 在创建站点时需不需要设置“服务器”选项卡中的相关选项?
A 如果用户需要使用Dreamweaver连接远程服务器,用来将站点中的文件通过Dreamweaver上传到远程服务器,则需要对“服务器”选项卡中的选项进行设置;否则,不需要设置。
Q 在创建远程站点的过程中,对于“服务器模型”需不需要进行设置?
A 可以设置也可以不设置,这两者没有太大的关系。如果已经确定了网站的形式,则可以进行设置,例如在实例2中,该企业网站已经确定使用PHP MySQL形式进行开发,则可以设置“服务器模型”为PHP MySQL。
实例003 远程交互站点——创建Business Catalyst站点
Business Catalyst是Dreamweaver CS6新增的一项功能,它可以提供一个专业的在线远程服务器站点,从而使设计者能够获得一个专业的在线平台。
●源文件 无
●视频 光盘\视频\第1章\实例3.swf
●知识点 新建Business Catalyst站点
●学习时间 15分钟
实例分析
在Dreamweaver CS6中,创建Business Catalyst站点与创建本地静态站点一样,非常方便、快捷,创建完的Business Catalyst站点的效果如图1-17所示。下面我们将向大家介绍一下如何创建Business Catalyst站点。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0023_0005.jpg?sign=1738827524-vAefSvxvUF5x8oLuIfYOppor8cDCJKWM-0-033f2418729652aadf0917a546e5c7fa)
图1-17 最终效果
知识点链接
通过执行“站点→新建Business Catalyst站点”菜单命令,在弹出的对话框中进行设置,即可创建Business Catalyst站点,其优势在于可以为网页设计者提供一个专业的在线远程服务器站点,从而能够获得一个专业的在线平台。
制作步骤
01 执行“站点→新建Business Catalyst站点”菜单命令,Dreamweaver CS6会自动连接Business Catalyst平台服务器,如图1-18所示。弹出“登录”窗口,需要使用所注册的Adobe ID登录,如图1-19所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0023_0006.jpg?sign=1738827524-u6ZepexJQdNBD6kMvuq7wzeuCgR8FhnL-0-62867d32f522b6036c9c498d89667243)
图1-18 连接Business Catalyst平台服务器
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0023_0007.jpg?sign=1738827524-kuoiWWtg9hSiAhYlnghttq1vS65PNIAI-0-d25c3f8ab704a9c8f206a2c4d7f8887f)
图1-19 登录窗口
02 输入Adobe ID和密码,单击“登录”按钮,登录到Business Catalyst服务器,显示创建Business Catalyst站点的相关选项,如图1-20所示。在“Site Name”文本框中输入Business Catalyst站点的名称,在URL文本框中输入Business Catalyst站点的URL名称,如图1-21所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1738827524-KocDIzrUVBTH5TL5DoHyHHN5wQZj8Chl-0-f55c9d09099cd4c37235c692416feab5)
图1-20 business Catalyst站点设置选项
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0024_0002.jpg?sign=1738827524-kcyAjSt6p2HZp8gHNi8nzPqsJ244UC2T-0-b1c317d26db7f58b63bc3f008ca4a0d2)
图1-21 设置business Catalyst站点
03 单击“Create Free Temporary Site”按钮,即可创建一个免费的临时Business Catalyst站点。如果所设置的URL名称已经被占用,则会给出相应的提示,并自动分配一个没有被占用的URL,如图1-22所示。单击“Create Free Temporary Site”按钮,弹出“选择站点的本地根文件夹”对话框,浏览到Business Catalyst站点的本地根文件夹,如图1-23所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0024_0003.jpg?sign=1738827524-LI8lx45974AAAThMrVG0sWFNHqd2cFcg-0-f55bb7e96e2d72f6ac4eb14a0e6eabf3)
图1-22 自动分配URL名称
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0024_0004.jpg?sign=1738827524-Rhbd8CUn5xRjngAh5TQ9yw3RgLb4VkED-0-eb9112b7c14bd8a1ee4d2ce5798e45d5)
图1-23 “选择站点的本地根文件夹”对话框
04 单击“选择”按钮,确定站点的本地根文件夹,弹出“输入站点的密码”对话框,可以为所创建Business Catalyst站点设置密码,如图1-24所示。单击“确定”按钮,Dreamweaver CS6会自动将Business Catalyst站点中的文件与本地根文件夹进行同步,如图1-25所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0024_0005.jpg?sign=1738827524-gnAv3XcmhcF7OvZfZrK1hzWlbQtemgWB-0-17c996c1b750b71bd382220b1c1ac587)
图1-24 “输入站点的密码”对话框
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0024_0006.jpg?sign=1738827524-AdNhLE3uugH74RosuEbVbtNs2elUTBnl-0-0e381c1e49ca53114fd3d3f6c4f0d947)
图1-25 “文件活动”对话框
05 完成Business Catalyst站点与本地根文件夹的同步操作,在“文件”面板中可以看到所创建的Business Catalyst站点,如图1-26所示。在本地根文件夹中可以看到从Business Catalyst站点中下载的相关文件,如图1-27所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0025_0001.jpg?sign=1738827524-ikgEbtmn20K8VqPgfo1rc0u29e32xdLl-0-a0c2ce88230c2b225069fd32dca450fe)
图1-26 创建的Business Catalyst站点
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0025_0002.jpg?sign=1738827524-Ip86dAvjT3JeFx5VC1fzUWSe03c0BrPT-0-22b41989034e4767af77df7b769f9fac)
图1-27 本地根文件夹
06 打开浏览器,在地址栏中输入所创建的Business Catalyst站点的URL地址,可以看到所创建Business Catalyst站点的默认网站效果,如图1-28所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0025_0003.jpg?sign=1738827524-bychnc60lcKKiILIWQlAV9ACxyUWEmEl-0-0d6fad7b477b044f7c6365769b4e0467)
图1-28 Business Catalyst站点默认网站效果
Q 在“输入站点的密码”对话框中是否需要勾选“保存密码”复选框?
A 视情况而定,如果勾选“保存密码”复选框,则以后连接到该Business Catalyst站点时不需要再输入密码;如果没有选中该复选框,则每次连接到该Business Catalyst站点时都需要输入密码。
Q 如何编辑和修改已经创建好的Business Catalyst站点页面?
A 在Dreamweaver CS6中,新增了一个Business Catalyst面板,就是用来编辑和修改Business Catalyst站点页面的,通过该面板可以对所创建的Business Catalyst站点页面进行设置和创建相应的内容。
实例004 内联CSS样式——控制文本显示效果
内联样式是将CSS样式代码直接添加到HTML的标签中,即作为HTML标签的属性存在。它是所有CSS样式中控制网页最为简单、直观的方式,通过这种方法可以很方便地对某个元素单独定义样式。
●源文件 光盘\源文件\第1章\实例4.html
●视频 光盘\视频\第1章\实例4.swf
●知识点 内联CSS样式
●学习时间 10分钟
实例分析
本实例通过内联CSS样式,也就是直接在HTML标签中使用style属性对页面中文本的显示效果进行控制,页面的最终效果如图1-29所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0025_0008.jpg?sign=1738827524-ZTOvceeUQncJ5NTKeof9AlL692mqvPcd-0-1b0d3018dece5374e0350b4634d1b537)
图1-29 最终效果
知识点链接
使用内联CSS样式的方法是直接在HTML标签中使用style属性,该属性的内容就是CSS的属性和值,其格式如下:
<p style="font-family:宋体;font-size:12px; color:#CCCCCC; ">内联CSS样式</p>
制作步骤
01 执行“文件→打开”菜单命令,打开页面“光盘\源文件\第1章\实例4.html”,页面效果如图1-30所示。转换到代码视图,可以看到页面的代码,如图1-31所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1738827524-JAZ9UPlsFLSMneLfDU80sbuPVoQbwv6m-0-add53897c60e9b3b2a501dfc8d063842)
图1-30 页面效果
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1738827524-p5fvO8MVto8Q6QIhtSXkiLil54rzLELr-0-377ccf280a49c0b9ae6f28b6c833ac78)
图1-31 代码视图
02 在<p>标签中添加style属性设置,添加相应的内联CSS样式代码,如图1-32所示。执行“文件→保存”菜单命令,保存页面。在浏览器中预览该页面,效果如图1-33所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0026_0003.jpg?sign=1738827524-NY7SlgUppnQKyrE6gPfn0glCkCrbQHHP-0-c4e9b026a392cc5401c57ead95dde4f1)
图1-32 添加内联CSS样式代码
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0026_0004.jpg?sign=1738827524-nswL7wNXNSAHEahMetjJNLzjQXPCr0i8-0-39bea8f8486282b0b9c0fc648deafb64)
图1-33 预览效果
Q 使用内联CSS样式有哪些规定?
A 内联CSS样式是由HTML文档中标签的style属性所支持,只需要将CSS代码使用“;”(分号)隔开并输入在style=""中,便可以完成对当前标签的样式定义,这是CSS样式定义的一种基本形式。
Q 内联CSS样式属于表现与内容分离的设计模式吗?
A 内联CSS样式仅仅是HTML标签对于style属性的支持所产生的一种CSS样式编写方式,并不符合表现与内容分离的设计模式。使用内联CSS样式与表格布局从代码结构上来说完全相同,但是仅利用了CSS对于元素的精确控制优势,并没有很好地实现表现与内容的分离,所以不属于表现与内容分离的设计模式。
实例005 内部CSS样式——控制页面整体效果
内部CSS样式就是将CSS样式代码嵌入到<head>与</head>标签之间,并且用<style>与<style>标签进行声明。这种写法虽然没有完全实现页面内容与CSS样式表现的完全分离,但可以将内容与HTML代码分离在两个部分进行统一的管理。
●源文件 光盘\源文件\第1章\实例5.html
●视频 光盘\视频\第1章\实例5.swf
●知识点 内部CSS样式
●学习时间 10分钟
实例分析
本实例主要通过对“页面属性”对话框中的相关属性进行设置来控制页面的整体属性,并且通过设置该对话框生成的代码全部显示在<head>与</head>标签之间,页面的最终效果如图1-34所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0026_0009.jpg?sign=1738827524-3QuwXo28msdByJM5oqReme2roX5Tq6dU-0-d2a12231597346fee11724408a5e2023)
图1-34 最终效果
知识点链接
“页面属性”对话框通过对页面的字体、字体大小、字体颜色、背景颜色以及背景图像等属性进行设置来控制页面的效果,但是不能设置行高属性。
制作步骤
01 执行“文件→打开”菜单命令,打开页面“光盘\源文件\第1章\实例5.html”,页面效果如图1-35所示。转换到代码视图,在页面头部的<head>与</head>标签之间可以看到该页面的内部CSS样式,如图1-36所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1738827524-foDwVIvcljcpkZ7hC16RDGkNjoe4TBJE-0-6f0aa02bd035ebd81132858c6d8b8b63)
图1-35 页面效果
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1738827524-2Ek1cJnvI1d4YakD0ZLSH6Mz7130J5nm-0-871e705424429fc5293051b8f546d65d)
图1-36 代码视图
02 单击“属性”面板上的“页面属性”按钮,弹出“页面属性”对话框,设置如图1-37所示。设置完成后,单击“确定”按钮,可以看到页面的效果,如图1-38所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0003.jpg?sign=1738827524-hUKJa3bnkNi4JqivnNRpBeCXYJ2edBMM-0-c6919f32d4202ab8320865e54b0398c9)
图1-37 页面效果
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0004.jpg?sign=1738827524-n3H970fEgOLro5izxGGpNfhJhXXn0DNd-0-75cd940b82b008bfba583ece5360ebf7)
图1-38 代码视图
03 切换到代码视图,可以看到通过“页面属性”面板设置所生成的相关内部CSS样式,如图1-39所示。在内部的CSS样式代码中定义一个名为.font的类CSS样式,如图1-40所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0005.jpg?sign=1738827524-CKM67Hm0Qy86TVh6mA2AOnzQsrPtEeFs-0-b958929513ae0dd578a6a63a76a3dc60)
图1-39 CSS样式代码
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0006.jpg?sign=1738827524-mqrNz9yplPxjc56IB2zj7XcmyApgxhPR-0-cbfe1f9ce908bb6a7913e55cb9af1f8c)
图1-40 类CSS样式代码
04 返回到设计视图中,选中相应的文字,在“属性”面板上的“类”下拉列表中应用刚定义的类CSS样式font,如图1-41所示。转换到代码视图,可以看到在<p>标签中添加的相应代码,如图1-42所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0007.jpg?sign=1738827524-me4imruxuihr9LwJIHR9hl2NOT1Bxnrz-0-2572b85bb4989703416645f6c738c0cf)
图1-41 应用该样式
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0027_0008.jpg?sign=1738827524-3kkI7ckLDLooG5q71pMdkvrIFSxDOD8w-0-f2ba3c206c6ec5f8ccdd53523d2d9b5e)
图1-42 代码视图
05 执行“文件→保存”命令,保存页面。在浏览器中预览该页面,效果如图1-43所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1738827524-WWeBGXGhilLnqE5RJFSPsz1Uh4vglH85-0-c37175d5691d39bb9aed526670919230)
图1-43 预览效果
Q 在制作网页时使用内部CSS样式有哪些优势?
A 在内部CSS样式中,所有的CSS代码都编写在<style>与</style>标签之间,这样既方便了后期对页面的维护,也极大地减少了代码的数量。
Q 内部CSS样式的局限性在哪里?
A 内部CSS样式只适合于单一页面设置单独的CSS样式,如果一个网站拥有很多页面,并且对于不同页面中的<p>标签都希望采用同样的CSS样式设置时,这种方式便显得有点麻烦了。
实例006 外部CSS样式——链接外部CSS样式表文件
外部样式表是CSS样式表中较为理想的一种形式,能够实现代码的最大化使用及网站文件的最优化配置。
将CSS样式表代码单独编写在一个独立文件之中,由网页进行调用,并且多个不同的网页可以调用同一个外部样式表文件。
●源文件 光盘\源文件\第1章\实例6.html
●视频 光盘\视频\第1章\实例6.swf
●知识点 外部CSS样式表
●学习时间 10分钟
实例分析
本实例所制作的页面大部分是由图像组成的,且使用了外部CSS样式表对整个页面的排版进行控制,使得页面修改起来更加方便,页面的最终效果如图1-44所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0028_0006.jpg?sign=1738827524-FGo4zY4ARDx9jfvJzX1scn7wCSVHDLEC-0-e749de1f632e2d0ba59311929efc1891)
图1-44 最终效果
知识点链接
外部CSS样式是指在外部定义CSS样式并形成以.css为扩展名的文件,然后在页面中通过<link>标签将外部的CSS样式文件链接到页面中,而且该语句必须放在页面的<head>与</head>标签之间。
制作步骤
01 执行“文件→打开”菜单命令,打开页面“光盘\源文件\第1章\实例6.html”,页面效果如图1-45所示。执行“文件→新建”菜单命令,弹出“新建文档”对话框,在“页面类型”列表中选择CSS选项,如图1-46所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1738827524-ZygLEzhaba2XQpTNQ8WKWsbYhq4D5Tgy-0-6eb2cb097841731dd58d913c17cfd3f9)
图1-45 页面效果
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0029_0002.jpg?sign=1738827524-nbqMsCeYZLIkmBqcDn4avIkcpxGu9XMi-0-a215dbbc2dca6943413ccafea47a4328)
图1-46 “新建文档”对话框
02 单击“确定”按钮,创建一个外部CSS样式文件,将该文件保存为“光盘\源文件\第1章\style\1-6.css”。返回到“实例6.html”页面中,打开“CSS样式”面板,单击“附加样式表”按钮,如图1-47所示。弹出“链接外部样式表”对话框,单击“浏览”按钮,选择需要链接的外部CSS样式文件,如图1-48所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0029_0004.jpg?sign=1738827524-Qsy7dKwpcaoR4FWLYc3mqUFKXAc5y6cG-0-1b0605953d4b2a900c35c1b9549dae8a)
图1-47 “CSS样式”面板
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0029_0005.jpg?sign=1738827524-7Rzu232ByRGWqjXcB7RkcWwl6XZ5Fsmq-0-3ff17129dbdc9b298a28b2f301f6a65d)
图1-48 “链接外部样式表”对话框
03 单击“确定”按钮,即可链接指定的外部CSS样式文件,在“CSS样式”面板中显示出所链接的外部CSS样式文件,如图1-49所示。转换到代码视图中,在<head>与</head>标签之间可以看到链接外部CSS样式文件的代码,如图1-50所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0029_0006.jpg?sign=1738827524-mbYPSnVOOtxJsHY69HvsvcH7YLRo1UCV-0-7b67885b514e4b88b821e52605cf7924)
图1-49 “CSS样式”面板
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0029_0007.jpg?sign=1738827524-dkFgVYLqMnHJybnaEN8HIsvA5bY3dMf3-0-1264844f34a25dfbca760ef761af16dc)
图1-50 代码视图
04 切换到1-6.css文件中,创建相应的CSS样式,如图1-51所示。返回到设计视图,可以看到页面的效果,如图1-52所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0030_0001.jpg?sign=1738827524-rE4JTyyLocIvyx4lDPcCOo8UJMIf0Khd-0-d01280e26e4c59645798dca2762aef9b)
图1-51 CSS样式代码
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1738827524-yCsKObA7ExPdLKwMiUfeox3fWCSuWqom-0-15b4411d544353167b3c5d455b8df109)
图1-52 页面效果
05 执行“文件→保存”菜单命令,保存该页面。按F12键即可在浏览器中预览该页面,效果如图1-53所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0030_0003.jpg?sign=1738827524-lpJp6YEJzherzbq47MqM7UDG49VOUYry-0-0d1d9dc2ad0c4f0d8541eedd2fb79f13)
图1-53 预览效果
Q 什么情况下需要将外部CSS样式表导入到网页文件中?
A 将外部CSS样式表导入到网页文件中后,每个网页文件都要下载样式表代码,因此通常情况下不使用这种方式,只有在一个网页中使用第三方样式表文件时才需要使用该方法。
Q 外部CSS样式的优势有哪些?
A 在网页中使用外部CSS样式表文件具有以下优势。
●独立于HTML文件,便于修改。
●多个文件可以引用同一个CSS样式表文件。
●CSS样式文件只需要下载一次,就可以在其他链接了该文件的页面内使用。
●浏览器会先显示HTML内容,然后再根据CSS样式文件进行渲染,从而使访问者可以更快地看到内容。
实例007 @import方式——导入外部CSS样式
导入样式与链接样式的方法基本相同,都是创建一个单独的CSS样式文件,然后再链接到HTML文件中,但是在语法和运作方式上有所区别。
导入的CSS样式,在HTML文件初始化时会被导入到HTML文件内作为文件的一部分,类似于内部CSS样式;而链接的CSS样式是在HTML标签需要CSS样式风格时才以链接方式引入。
●源文件 光盘\源文件\第1章\实例7.html
●视频 光盘\视频\第1章\实例7.swf
●知识点 导入外部CSS样式
●学习时间 10分钟
实例分析
本实例通过将外部CSS样式导入到页面中对页面进行控制,这种方法的优势在于可以一次导入多个CSS文件,页面的最终效果如图1-54所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0031_0003.jpg?sign=1738827524-OgHliCwuKVQL15MykRdHGfvRqOTeCZbV-0-d68a51ccec75b8d09252cb138e48ba61)
图1-54 最终效果
知识点链接
导入外部CSS样式是指在<style>与</style>标签中,使用@import语句导入一个外部CSS样式表文件中的CSS样式。
制作步骤
01 执行“文件→打开”菜单命令,打开页面“光盘\源文件\第1章\实例7.html”,页面效果如图1-55所示。转换到代码视图,可以看到页面中并没有链接外部CSS样式,也没有内嵌的CSS样式,如图1-56所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0031_0004.jpg?sign=1738827524-6Wev2PQ4I0ebebWNT7prMGQmR7T0JNdb-0-17a90ca9c2dec276fa96d5bad5ef4b3b)
图1-55 页面效果
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0031_0005.jpg?sign=1738827524-Pyk8VQyYt6YoPJtatc9KozwGkT7QaiQs-0-8e65d80fb2ee55e2e8bbd23785749721)
图1-56 “新建文档”对话框
02 返回到设计视图,打开“CSS样式”面板,单击“附加样式表”按钮,弹出“链接外部样式表”对话框,单击“浏览”按钮,选择相应的外部CSS样式文件,如图1-57所示,单击“确定”按钮。设置“链接外部样式表”对话框中“添加为”选项为“导入”,如图1-58所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0031_0007.jpg?sign=1738827524-Mz5lubuElEHIgZlRkaSV2uIDni0hddUL-0-90a2e7a5e8766e899a51f2bcfe5a14ee)
图1-57 “选择样式表文件”对话框
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0031_0008.jpg?sign=1738827524-AncBiU3cM8MLHqIxbIauIoF0h3MZ3uxA-0-0f8eab0cd4a6117c6c641d5b30a8d6f0)
图1-58 “链接外部样式表”对话框
03 单击“确定”按钮,导入相应的CSS样式,页面的效果如图1-59所示。转换到代码视图中,在页面头部的<head>与</head>标签之间可以看到自动添加的导入CSS样式文件的代码,如图1-60所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1738827524-pVlaVYYfxWtjORN1W4U3J85RJpvTqEav-0-94c7b240fe61dfc21f43d4acd9098334)
图1-59 页面效果
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0032_0002.jpg?sign=1738827524-wbIbBva9Ezd3jitxRhA87L3lsEfRd0jH-0-1f8366973bd7f497ee64f611a373a65d)
图1-60 代码视图
04 执行“文件→保存”菜单命令,保存该页面。按F12键即可在浏览器中预览该页面,效果如图1-61所示。
![](https://epubservercos.yuewen.com/1E9ABD/11229161603800906/epubprivate/OEBPS/Images/figure_0032_0003.jpg?sign=1738827524-B57jGk2UfN7tkPZkdKwjgiktNyJwhNp4-0-c66e3e673990d81cfa6c533e68f5f447)
图1-61 预览效果
Q 导入CSS样式与链接CSS样式相比哪个更具有优势?
A 导入外部CSS样式表相当于将CSS样式表导入到内部CSS样式中,该方式更具有优势。另外,导入样式与链接样式相比较,最大的优点在于导入样式可以一次导入多个CSS文件。
Q 导入的外部样式表需要在内部样式表的什么位置?
A 导入外部样式表必须在内部样式表的开始部分,即其他内部CSS样式代码之前。