第07讲 网页的排版制作

素材下载方式n本课程所用素材可登陆以下邮箱进行下载：具体操作：1、在IE浏览器内访问网址http:/2、在免费邮箱登陆栏内分别输入用户名(webstudy2007)和密码(web123456)3、下载相关素材第七讲第七讲 网页的排版制作网页的排版制作学习学习DreamweaverDreamweaver7.1 Dreamweaver 8基础n掌握本地站点的创建与管理方法n掌握文档属性的设置方法n掌握文本的插入及属性设置方法n掌握不同图像的插入及编辑方法n掌握创建文本、图像、热点、锚点及邮件超链接的方法本课导读 Dreamweaver是一种所见即所得的可视化网页编辑软件。它有3种设计视图可供选择，熟悉HTML语言的用户可以直接在代码视图中编写网页，熟悉排版的用户可以直接在设计视图中编辑。无论以哪一种方式制作网页，都必须先创建站点，再进行文本及图像编辑。7.1.1 认识Dreamweaver Dreamweaver是一款网页编辑软件，可将图像、动画等各种素材有机地整合在同一网页中，通过超链接实现网页间的相互切换。认识网页工作环境 从【开始】菜单中启动Dreamweaver 8，进入初始界面，如下图所示。认识网页工作环境 n在【创建新项目】栏中单击【HTML】超链接，新建一个HTML文档并进入Dreamweaver设计窗口，如下图所示。7.1.2 站点管理 制作的网页（包括网页中用到的图像）需要上传到网络上。为了网页图像正确显示，也为了便于文件调用，常在制作网站内容前先建立站点，将网站中用到的所有素材都放置于站点中进行管理，所以建立站点是制作网页的第一步。1.认识【文件】面板 选择【窗口】【文件】命令或按【F8】键，打开【文件】面板，如下图所示。2.建立站点 建立站点的具体操作如下：（1）在站点列表下拉列表框中选择【管理站点】选项，打开【管理站点】对话框，如图9.8所示。（2）单击 按钮，在弹出的菜单中选择【站点】命令，打开【未命名站点1的站点定义为】对话框。2.建立站点 （3）在【站点名称】文本框中输入站点名称，如“mysite”；在【本地根文件夹】文本框中输入保存站点的文件夹，也可以单击 图标来指定保存路径。（4）单击 按钮返回【管理站点】对话框,单击 按钮，新建的站点将显示在【文件】面板中。3.管理站点文件n站点建立好后，需要将站点中网页的内容用文件夹的形式分类存放起来。n在站点内容列表框中，在站点上单击鼠标右键，在弹出的快捷菜单中选择【新建文件夹】命令，并更改文件夹的名称为需要的名称。如果要在建立的文件夹中细化文件类型，那么可以在文件夹上单击鼠标右键，在弹出的快捷菜单中选择【新建文件夹】命令，创建子文件夹。3.管理站点文件n在站点内容列表框中，在站点上单击鼠标右键，在弹出的快捷菜单中选择【新建文件夹】命令，并更改文件夹的名称为需要的名称。如果要在建立的文件夹中细化文件类型，那么可以在文件夹上单击鼠标右键，在弹出的快捷菜单中选择【新建文件夹】命令，创建子文件夹。n新建文件是制作网页文档的第一步，除了通过初始界面创建文件外，还可以通过选择【文件】【新建】命令来创建文件，也可以在【文件】面板中的网页文件夹上单击鼠标右键，在弹出的快捷菜单中选择【新建文件】命令，并更改文件名称和后缀名来创建文件。3.管理站点文件n常用的静态文档后缀名为html，它们之间没有区别。根据编写语言的不同，可以创建后缀名为asp和php的动态文档。本书着重介绍静态文档的制作。7.2 编辑网页文本和图像 文本和图像是网页中的基本元素，因此，编辑文本和图像是制作网页的基础。1.设置文档属性 网页文档属性主要包括网页的字体、字号、背景色、标题栏名称及超链接等。在【属性】面板中单击 按钮或按【Ctrl+J】组合键可打开【页面属性】对话框，在其中可进行各项设置。2.插入文本和特殊字符 n在网页中添加文本的方法很多，可以直接输入；可以复制其他程序中的文本粘贴到设计窗口中；也可以选择【文件】【导入】命令，在弹出的子菜单中选择相应的命令，导入对应的数据和文本。n插入特殊字符的方法是：在插入栏的【文本】选项卡中单击右侧的 按钮，在弹出的菜单中选择需要的符号。3.设置文本格式设置文本格式 在设计窗口中选取文本，打开文本的【属性】面板（如下图所示），然后设置需要的参数即可。4.插入与编辑图像插入与编辑图像n网页中常用的图像格式有GIF，JPEG和PNG 3种，其中，GIF和JPEG格式在大部分浏览器中都能正常显示，因此使用最为普遍。如果要使图像背景为透明的，那么可以使用GIF或PNG格式的图像。1）插入图像 插入图像最直接的方法是将站点中需要的图像拖入到要放置图像的位置。也可以单击插入栏的【常用】选项卡中的 按钮中的下拉箭头，在弹出的下拉菜单中选择相应的命令，从而插入图像。4.插入与编辑图像插入与编辑图像 2）编辑图像 将图像添加到页面中后，如果图像大小、效果与页面不协调，那么可通过图像的【属性】面板对其进行一些必要的编辑。选择要编辑的图像，在【属性】面板（如下图所示）中修改对应的参数即可。典型案例制作简单页面 n案例目标 本案例制作简介页，主要练习文档属性的设置、文本格式的设置及图像的插入与编辑等。具体操作见教材P2212267.3 超链接的应用n在讲述Fireworks和Flash的相关知识时都提到过超链接，这里主要针对超链接的类型进行详细介绍。1.绝对超链接和相对超链接n根据链接对象的路径是否必须完整，超链接可分为绝对超链接和相对超链接两种。n绝对超链接必须从计算机的盘符开始或从服务器的根目录开始往下一直到指定的文件，如file:/C:/Documents and Settings/lfg-jj/Cookies/lfg-jjinteractual1.txt或网址http:/ 文本链接的对象是文本，图像链接的对象是图像，不论文本还是图像，链接方法都相同，其具体操作如下：（1）选取要添加超链接的文本或图像。（2）在【属性】面板的【链接】文本框中输入要链接到的文档路径或网址。（3）在【目标】下拉列表框中指定链接后文档的打开方式，有【_blank】、【_self】、【_parent】、【_top】4个选项。3.热点链接 热点链接是指对图像中的某区域创建超链接。创建热点链接的具体操作如下：（1）选取图像，在【属性】面板中选择 、或 工具，在图像中要创建链接的位置绘制热点区域。（2）选取一个热点，其【属性】面板如下图所示。【链接】文本框中有“#”字符，表示该热点区域的超链接为空链接，拖动 图标与站内文件建立链接或输入链接路径即可。4.锚点链接 锚点是文档中用于定位的一个特殊标记。利用锚点创建的超链接，可以快速而准确地跳转到目标位置。创建锚点链接的具体操作如下：（1）将光标定位在要插入锚点的位置。（2）在插入栏的【常用】选项卡中单击 按钮，打开【命名锚记】对话框。4.锚点链接 （3）在【锚记名称】文本框中输入一个名称。锚记名称中不能含空格且不能置于层内。（4）单击 按钮，锚记 显示在光标处。（5）选取文本、图像或热点，在【链接】文本框中输入“#锚记名称”。如锚记名称为“top”，则链接为“#top”。如果在不同的文档间创建锚点链接，则先按相对链接或绝对链接的方式写出链接路径，然后再输入“#锚记名称”，如“jie1.html#top”。5.邮件链接n邮件链接即E-mail链接，主要目的是为了方便访问者联系，因此在制作网页时常写出E-mail并添加超链接，让访问者单击该链接即可编写并发送邮件。n创建邮件链接的方法为：选取邮件地址，在【链接】文本框中输入“mailto:邮件地址”，如“mailto:”。7.4 用CSS样式规范网页元素 为了操作简便，在网页设计中常用CSS样式来控制文本、边框、背景和列表等的样式，创建的样式可以反复调用。CSS样式可以嵌入在当前文档的头部标签中，也可导出为外部样式表文件应用到其他文档中。CSS指层叠样式表，它是Cascading Style Sheet的缩写。在制作网页时需要让整个网站的风格统一，但手动设置每个网页的格式将会非常麻烦，用CSS样式能快速完成网页文本格式的统一，有利于提高工作效率。1.认识【CSS样式】面板 选择【窗口】【CSS样式】命令或按【Shift+F11】组合键，打开【CSS样式】面板，如下图所示。2.创建CSS样式 创建CSS样式的具体操作如下。（1）在【CSS样式】面板中单击 按钮，打开如下图所示的【新建CSS规则】对话框，进行相应的设置。2.创建CSS样式 （2）在【新建CSS规则】对话框中单击 按钮或保存样式表文件后，打开如下图所示的对话框。2.创建CSS样式（3）在【分类】列表框中选择分类，右侧显示对应的参数项，进行相应的设置。（4）设置完成后，单击 按钮，定义的样式将显示在【CSS样式】面板中。如果要修改样式，可以单击【CSS样式】面板底部的 按钮，打开【CSS规则定义】对话框；也可单击 或 按钮，在属性列表框中添加或修改样式属性。3.应用CSS样式 CSS样式的应用比较简单，在窗口中选中要应用CSS样式的对象，在对应的【属性】面板的【样式】或【类】下拉列表框中选择需要的样式即可。4.应用外部样式表文件 外部样式表文件是指把文档中将要用到的CSS样式全部定义，并以文件的形式存储在站点中，以方便该站点各页面元素使用。外部样式表文件有两种创建方法：一种是直接新建外部样式表文件，另一种是将当前文件中的样式导出为外部样式表文件。7.5 用表格和层进行布局 表格与层是进行网页布局的常用工具，主要用于对文本和图形进行定位，对页面进行分栏等。n使用表格和层n布局设计具体要求n掌握表格与单元格的属性设置n掌握边框样式的设置n掌握层的属性设置n了解一般网页的大小7.5.1 使用表格 表格是处理数据最有效的工具，它能使数据得到合理的分配。通过表格与单元格的属性控制，可以使表格及表格数据表现出丰富的视觉效果。1.认识表格及表格元素标签 在 H T M L 语 言 中，表 格 标 签 用表示，表格元素标签位于和之间。行标签为，单元格标签为。2.设置表格属性 n在设置表格属性前，首先要插入表格并选择表格。n将光标定位在插入的表格中，此时表格的上方或下方出现带有标注的绿线，单击绿线区域即可选取光标所在的表格。如果没有绿线，则可以通过在表格左下方的标签栏上单击标签来选取表格。2.设置表格属性n选取表格后，【属性】面板如下图所示。3.设置单元格属性 按住鼠标左键拖动选取需要的单元格后，其【属性】面板如下图所示。典型案例制作细框表格 n案例目标 本案例将制作如下图所示的表格效果，主要练习设置表格背景、单元格背景和表格边框等。典型案例制作细框表格n案例小结本案例通过制作table.html表格文档，主要练习了表格的插入、填充、对齐，单元格的背景颜色、背景图像、水平对齐方式、标题及字号的设置以及单元格的合并等。7.5.2 布局设计 布局是网页效果的实现方式，分为表格布局和框架布局等。本部分将介绍一般网页的大小、表格的嵌套、用CSS定义表格边框、表格与层的转换等知识。1.网页大小的规定n一般以800600像素和1024768像素下全屏显示时的网页宽度来确定网页的大小。一般来说，除去浏览器的边框，800600像素下全屏显 示 时 的 网 页 宽 度 是 7 7 8 或 7 7 6 像 素；1024768像素下全屏显示时的网页宽度为1002或1000像素。用户也可以根据设计效果指定所需的宽度。网页高度一般不受限制，可以向下适当延展。2.嵌套表格n在使用表格对网页进行布局时，嵌套表格使用得十分广泛。嵌套表格是指在表格的单元格中再插入表格来放置网页元素。一般而言，一个网页中嵌套表格的层次不能超过3层。层次越多，文件越大，因此，应尽量采用较少的嵌套层次来进行网页布局。典型案例对“圣能赛普”的主页进行布局 n案例目标 本案例将用表格来对“圣能赛普”的主页进行布局，主要练习表格的创建、设置及嵌套表格的使用，完成后的效果如下图所示。典型案例对“圣能赛普”的主页进行布局典型案例对“圣能赛普”的主页进行布局n案例小结本案例通过对主页进行布局，练习了表格的插入、嵌套、拆分、合并及表格与单元格的属性设置等。在对网页进行布局时，各个单元格都需要设置顶端对齐，以便使插入的图像之间无缝。采用背景显示效果的单元格需要设置行高以确保网页与设计效果一致。作业：用表格对主页进行布局 本练习将对一个主页进行布局，主要练习表格布局，效果如下图所示。作业：用表格对主页进行布局 操作思路：n新建jianyi目录，并新建index.html文件，将“jian_img”中的文件复制到jianyi目录的images文件夹中。n将bg.gif图像设置为背景。n创建5行1列、宽780像素的表格，用于放置所有的网页元素。n在对banner下方的内容进行布局时，可以拆分单元格来满足需要。n没有背景图像的区域用白色填充。n文本可复制“生命.doc”中的内容。n在网页底部输入自己的学号和姓名。