网页制作与网站设计_04Dreamweaver格式设置、CSS式样解剖.ppt

建立网页布局 4．设置首页，利用网页布局表格和布局单元格，表格居中，如图所示。 插入图像输入文字的网站 5．在网页的单元格中分别插入图象，在相应的单元格中输入文字，如：“网站首页?| 学校概况?| 校园文化?| 专业设置?|?德育之窗?|?教学之窗?| 招生咨询?| 就业管理”，如下图所示。 6．建立CSS样式文件 1）选择 ? CSS样式 ? 新建，进入新建 CSS 规则对话框，设置属性：选择器类型：单选“”；“名称”：输入“LX1”；“定义在”单选，单击按钮，如图所示。 2）在LX1的CSS规则定义中，在类型属性中设置字体、大小、行高、颜色等选项，单击按钮，如图所示。 在HEML文档中利用CSS格式化网页 网页中文本段落、图象、颜色、边框等可以通过设定样式表的属性来完成，非常方便、高效、快捷。应用CSS样式格式化的“学校网页园”的效果，如图所示。 项目小结 本项目讲解了网页的基本元素文本和图象、网页图象的使用、CSS样式表的使用方法和技巧。特别特种标签式样的制作，同时以建立“校园网页”的实际例子讲述了CSS样式的运用。CSS样式包含的内容还很多，需要在网页设计中反复实践不断地积累经验，还需要阅读这方面的书籍，丰富和提高能力，才能逐步成为网页设计的高手。 项目四 Dreamweaver格式设置、CSS式样 内容摘要 介绍了网页的基本元素文本和图象 介绍了网页图象的使用 介绍了CSS样式表的使用方法和技巧 ? 学习文本的输入与格式化 ? 学习图象的插入与编辑 理解和使用网页的自动化功能 理解制作规范、专业的网页的方法 掌握网页中页面属性的设置 ? 掌握CSS样式、库、模板。 学习目标 任务1：设置页面基本属性  任务描述 1. 任务说明 本任务将使用“页面属性”对话框，对Dreamweaver CS3中创建的网页文件的布局和格式等进行设置。网页建成以后，一般不是立即放置网页元素，而是先设置网页的标题、背景图象或是背景颜色，以及文本图象的超级链接的颜色等页面属性。 2. 操作步骤 在Dreamweaver CS3的主窗口中新建一个网页文件，并输入相应内容如图4-1所示。按组合键Ctrl+J或选择主菜单中的【修改】一【页面属性】命令，打开“页面属性”对话框。 在“分类”列表框中选择“外观”类别，设置页面字体为华文新魏；文本颜色为蓝色；页面背景文件为“0401.gif”，如图4-2所示。 图4-1页面属性的“外观”设置对话框 图4-2页面属性的设置“背景图象” 单击【确定】按钮，按F12键预览，如图4-3带有背景图象的效果所示。 如图所示，在“页面属性”对话框的“分类”列表框中选择“链接”选项，设置链接文字的链接色为蓝色既“#0033FF”，变换图像链接为绿色即“#00FF00”，活动链接为黑色 “#000000”，已访问链接的颜色选择默认。 如图所示，在“页面属性”对话框的“分类”列表框中选择“标题”选项，设置网页标题的字大小、颜色等。 在“页面属性”对话框的“分类”列表框中选择“标题／编码”选项，在“标题”文本框中输入网页标题，编码选择简体中文(GB2312)，如图所示 如图4-7所示，在“页面属性”对话框的“分类”列表框中选择“跟踪图像”选项。单击【浏览】按钮， 任务2：输入文字 任务说明 文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式。用文本制作的网页占用空间小，浏览时，可以很快地展现在用户面前。文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印在：Dreamweaver CS3中，文字可以直接输入到页面上，也可以输入到表格和层等区域中。输入的文字一般分为普通文本和特殊字符两种。 操作步骤 1. 建立新网页：在Dreamweaver CS3的主窗口中新建一个网页文件，在页面中需要输入文字的位置单击鼠标左键，出现插入点。 2. 输入文本：选择适当的输入法输入文字，网页中必不可少的信息就是文本，它是网页传输数据信息最主要的方式之一。在Dreamweaver CS3的文档窗口中将光标移动到要添加文本的地方，然后就可以直接在文档窗口中输入文本。取消这次操作，快捷键是Ctrl+Z。继续执行刚才的操作，快捷键是Ctrl+Y。文本超出了表格的显示范围时会自动换行。 3. 段落中换行：在一个段落未结束，又