第6章 网页整体属性设置
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6.1.3
设置“链接（CSS）”选项
在“页面属性”对话框左侧的“分类”列表中选择“链接（CSS）” 选项，可以切换到“链接（CSS）”选项设置界面，在该部分可以设置页 面中链接文本的效果。
动手实践——设置“链接（CSS）”选项
动手实践：设置“链接（CSS）”选项 最终文件：光盘\最终文件\第6章\6-1-3.html 视 频：光盘\视频\第6章\6-1-3.swf
将设计视图切换到代码视图，会看到<body>和</body>标签，网页的 主体部分就位于这两个标签之间。<body>标签作为一个对象，会有许多相 关的属性，本节将围绕这些属性的设置展开，其中包括网页的标题、文本 颜色、背景颜色、背景图片等设置。
6.1.1
设置“外观（CSS）”选项
执行“修改>页面属性”命令，或单击“属性”面板上的“页面属性” 按钮 ，弹出“页面属性”对话框，Dreamweaver CC将页面属性分 为许多类别，其中“外观（CSS）”是设置页面的一些基本属性，并且将 设置的页面相关属性自动生成为CSS样式表，写在页面头部。
动手实践——设置“外观（CSS ）”选项
动手实践：设置“外观（CSS）选项” 最终文件：光盘\最终文件\第6章\6-1-1.html 视 频：光盘\视频\第6章\6-1-1.swf
6.1.2
设置“外观（HTML）”选项
在“页面属性”对话框左侧的“分类”列表中选择“外观（HTML）” 选项，可以切换到“外观（HTML）”选项设置界面，该选项的设置与“外 观（CSS）”的设置基本相同，唯一的区别ቤተ መጻሕፍቲ ባይዱ在“外观（HTML）”选项中 设置的页面属性，将会自动在页面主体标签<body>中添加相应的属性设置 代码，而不会自动生成CSS样式。
6.2.1
配置窗口大小
随着科技的发展，现在人们不仅仅可以在电脑上浏览网页，还可以通 过手机或者平板电脑来浏览网页。在设计制作网页时，设计师需要充分考 虑使用人群，如果是针对手机用户的，则设计制作页面时，就需要考虑手 机屏幕尺寸的大小；如果是针对平板电脑的，则制作的网页要符合平板电 脑的屏幕尺寸要求。
6.1.5
设置“标题和编码”选项
在“页面属性”对话框左侧的“分类”列表中选择“标题/编码”选 项，可以切换到“标题/编码”选项设置界面，在“标题/编码”选项中可 以设置网页的标题、文字编码等。
6.1.6
设置“跟踪图像”选项
在正式制作网页之前，会用绘图工具绘制一幅设计草图，相当于为 设计网页打草稿。Dreamweaver CC 可以将这种设计草图设置成跟踪 图像，铺在编辑的网页下面作为背景，用于引导网页的设计。 在“页面属性”对话框左侧的“分类”列表中选择“跟踪图像” 选项，可以切换到“跟踪图像”选项设置界面，在“跟踪图像”选项中 可以设置跟踪图像的属性。
更多的用户还是通过电脑来浏览网页的，但目前电脑的屏幕分辨率并没 有统一的标准，老式的CRT显示器屏幕分辨率多为1024 X 768，而笔记本电 脑的分辨率多为1280 X 800或者1366 X 768。而网页通常是不能缩放的，制 作的网页大小应该迎合的哪一种需要呢？原则就是要迎合大众的需要。 单击“状态”栏上“窗口大小”位置，可以打开窗口大小的选择菜单。 该菜单中显示了不同的窗口大小，括号中的内容是指该尺寸适应的屏幕分辨 率。
6.2.5
使用“历史记录”面板
使用“历史记录”面板可以恢复上一步或上几步的操作，也可以创建 需要频繁使用的命令组合，以便Dreamweaver自动完成。 1．“历史记录”面板 2．将历史保存为命令 3．设置恢复的操作步骤数目
在Dreamweaver中可以通过“页面属性”对话框，对页面的整体属 性进行控制，例如页面的背景颜色、背景图像、字体、字体大小、字体 颜色以及页面边距等，下面通过一个小练习介绍如何通过页面属性的设 置对页面整体外观效果进行控制。
6.2.3
使用网格
网格是在Dreamweaver窗口的设计视图中对元素进行定位和大小调整 的可视化向导。通过对网格的操作，可以使页面元素在被移动后自动靠齐 到网格，并通过指定网格设置来更改网格或控制靠齐行为，只有绝对定位 的Div才能靠齐到网格。
6.2.4
辅助线
使用Dreamweaver中的辅助线功能，可以对页面中的对象精确定位。 在Dreamweaver中执行“查看>辅助线>显示辅助线”命令，然后从左侧或 上侧的标尺上拖动鼠标，均可以拖动出辅助线，如图6-42所示。辅助线旁 边会即时显示所在的位置距左侧或上侧的尺寸。
6.1.4
设置“标题（CSS）”选项
在“页面属性”对话框左侧的“分类”列表中选择“标题（CSS）” 选项，可以切换到“标题（CSS）”选项设置界面，在“标题（CSS）” 选项中可以设置标题文字的相关属性，
动手实践——设置“标题（ CSS）”选项
动手实践：设置“标题（CSS）”选项 最终文件：光盘\最终文件\第6章\6-1-4.html 视 频：光盘\视频\第6章\6-1-4.swf
6.2.2
使用标尺
使用标尺，可以更精确地估计所编辑网页的宽度和高度，使网页能更 符合浏览器的显示要求。 标尺原点的默认位置位于Dreamweaver窗口设计视图的左上角。可以 将标尺原点图标拖动至页面的任意位置。如果要将原点重设到它的默认位 置，只需要在Dreamweaver窗口中执行“查看>标尺>重设原点”命令即可。
动手实践——设置个人网站 页面属性
动手实践：设置个人网站页面属性 最终文件：光盘\最终文件\第6章\6-3.html 视 频：光盘\视频\第6章\6-3.swf
本章介绍了页面属性的设置方法，除了设置常规的背景颜色、背景图 像等属性之外，Dreamweaver中还有如辅助线、标尺和网格等常用且必备 的功能。掌握好这些基本工具的使用，将有助于读者更好地制作网站页面。
动手实践——设置“跟踪图像”选项
动手实践：设置“跟踪图像”选项 最终文件：光盘\最终文件\第6章\6-1-6.html 视 频：光盘\视频\第6章\6-1-6.swf
使用过Photoshop的用户都应该用过Photoshop中的辅助线、图像放 大或缩小等各种不同的功能。Dreamweaver CC 同样为用户提供了类似 的多种辅助功能。例如标尺、网格和使用辅助线等多种辅助功能。