下载文档原格式
![实例4——国字型布局网页_网站设计 开发 维护 推广 从入门到精通_[共6页]](https://img.taocdn.com/s1/m/ceef96dd79563c1ec4da712e.png)
使用表格排列网页数据Chapter 7 7.5.4 实例4——国字型布局网页国字型布局常用于主页布局，下面通过实例讲述国字型布局网页的制作，具体操作步骤如下。
◆ 选择菜单中的【文件】|【新建】命令，创建一空白文档，如图7-51所示。
选择菜单中的【文件】|【另存为】命令，弹出【另存为】对话框，在对话框中的【名称】文本框中输入index1，如图7-52所示。
图7-51 新建文档 图7-52 【另存为】对话框 ♦ 单击【保存】按钮，保存文档。
选择菜单中的【插入】|【表格】命令，弹出【Table 】对话框，如图7-53所示。
⌧ 在对话框中将【行数】设置为1，【列数】设置为1，【表格宽度】设置为780像素，单击【确定】按钮，插入表格，此表格设置为表格1，如图7-54所示。
图7-53 【Table 】对话框 图7-54 插入表格1 ⍓ 将光标放置在单元格中，选择菜单中的【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择“images/banner.jpg ”文件，如图7-55所示。
7.5 实例——利用表格布局网页单击【确定】按钮，插入图像，如图7-56所示。
图7-55 【选择图像源文件】对话框图7-56 插入图像将光标置于表格1的右边，选择菜单中的【插入】|【表格】命令，插入2行1列的表格，此表格设置为表格2，如图7-57所示。
将光标放置在表格2的第1行单元格中，选择菜单中的【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择“images/topbj.jpg”文件，单击【确定】按钮，插入图像，如图7-58所示。
图7-57 插入表格2 图7-58 插入图像❝将光标放置在表格2的第2行单元格中，选择菜单中的【插入】|【表格】命令，插入1行5列的表格，此表格设置为表格3，如图7-59所示。
❞将光标放置在表格3的第1列单元格中，在【属性】面板中将【宽】设置为7，【背景颜色】设置为#198402，如图7-60所示。
网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。
素材准备：准备制作网页所需的文字素材、图像素材。
实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。
实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。
4.切换代码模式下，输入代码。
5.保存文件，预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。
页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。
素材准备：准备好从网上下载的安装程序。
实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
![12.4.4 综合实例：创建浮动框架网页_全能网站建设完全自学手册_[共2页]](https://img.taocdn.com/s1/m/663955c9c5da50e2534d7f43.png)
176
在【框架】面板中单击框架集的边框，即可选择整个框架集。
12.4.3 在文档窗口中选择框架或框架集
在设计视图中单击某个框架的边框，可以选择该框架所属的框架集。
当一个框架集被选中时，框架集内的所有框架的边框都会带有虚线轮廓。
要将选择转移到另一个框架，可以进行以下操作之一。
⑴按【Alt】键和左（或右）箭头键，可将选择转移到下一个框架。
⑵按【Alt】键和上箭头键，可将选择转移到父框架。
⑶按【Alt】键和下箭头键，可将选择转移到子框架。
12.4.4 综合实例：创建浮动框架网页
使用浮动框架可以实现在不修改原来网页结构的基础上添加更多的网页内容效果。
实例名称：创建浮动框架网页
实例目的：通过本实例的制作，加深对框架的理解，并与表格布局网页进行比较
素材：素材\ch12\12.4.4\index.htm
结果：结果\ch12\12.4.4\index.htm l
具体的操作步骤如下。
➊打开随书光盘中的“素材\ch12\12.4.4\。
第6章综合实例2──为“SM”网站主页伴随窗口
本例将在本章综合实例1中制作好的“index.html”网页文档的基础上，为网页主页添加伴随窗口，效果如图6-3所示。
图6-3 为“SM”网站主页添加伴随窗口最终效果
制作思路：
首先打开“index.html”网页文档，然后利用“行为”添加“打开浏览器窗口”动作，并设置网页下载完毕后即显示伴随窗口。
制作步骤：
Step01 启动Dreamweaver 8后，打开“SM”站点中的文档“index.html”。
Step02 首先单击选择“标签选择器”最左侧的“<body>”标签，然后单击“行为”面板中的“添加行为”按钮，在打开的“行为”列表中选择“打开浏览器窗口”，如图6-3-1所示。
图6-3-1 添加行为
Step03弹出“打开浏览器窗口”对话框，单击“要显示的URL”编辑框右侧的“浏览”按钮，如图6-3-2所示。
图6-3-2 设置“要显示的URL”_1
Step04打开“选择文件”对话框，选择“SM”站点中的网页文档“guanggao.html”，然后单击“确定”按钮，如图6-3-3所示。
图6-3-3设置“要显示的URL”_2
Step05回到“打开浏览器窗口”对话框，设置“窗口宽度”和“窗口高度”分别为500和626，窗口名称为“banner”，然后单击“确定”按钮，如图6-3-4所示。
图6-3-4 设置窗口属性
Step06设置“事件”为“onLoad”，以使网页下载完毕后即显示伴随窗口，如图6-3-5所示。
图6-3-5 设置“事件”
Step07保存网页文档，然后按【F12】键预览网页，在打开网页的同时打开伴随窗口，如图6-3所示。
D re am we a ve r网页设计制作的实例教程100例第一章软件简介与设置 1.课程介绍与基础知识 2.软件起始页的用法 3.界面布局与切换 4.定制工具箱 5.代码拆分与设计模式 6.定制实用界面布局7.标签选择器8.选取手形和缩放工具9.显示设置与速度统计10.属性面板与设置11.菜单命令快速上手12.网页色彩搭配13.HT ML 基础知识14.企业识别系统与W WW 第二章定义站点页面属性1.制作网站三大原则 2.定义新站点 3.文件面板基础操作 4.创建新网页与网站地图 5.创建新的链接 6.地图模式下修改文件标题7.自定义根查看链接关系8.CSS的设置一，外观设置9.CS S的设置二，链接设置10.CSS的设置三，标题设置11.CSS的设置四，跟踪图像12.基础HT ML 页面设置13.本小节HT ML基础14.名词解释，h ttp和URL 第三章文本与列表控制 1.文本与列表控制学习 2.网页标题修改多种途径 3.征文标题文字格式的设置 4.文字大小颜色与对齐 5.问题，文本中输入空格 6.段落切换与强行换行7.文本编辑基础8.从外部导入文本内容9.清理冗余代码10.列表与排序11.定义列表12.插入排版水平线第四章链接的使用 1.链接的使用学习计划 2.定义页面链接样式3.一般链接的常见形式 4.输入法建立第一个链接 5.指向法制作链接 6.快捷键拖动法创建链接7.插入法建立链接8.直接用代码建立链接9.插入标签法建立链接10.环绕标签法建立链接11.链接的修改与Em a il链接12.制作特殊的Em a il链接13.制作下载类链接14.锚链接的制作15.色彩搭配和HT ML基础第五章图像处理 1.图像处理学习计划与目标 2.用菜单插入及设置图片 3.用代码直接插入图片 4.为图片添加链接 5.为图片添加提示文本 6.用标签检查器设置图片7.用属性面板设置图片8.编辑图像热区9.调用外部程序编辑图像10.优化与裁切图像11.对图像重新取样12.调整图像亮度和对比度13.锐化图像14.插入图像占位符15.插入鼠标经过图像16.添加导航条17.基础知识与名词解释第六章添加多媒体内容 1.添加多媒体内容 2.插入F LAS H S WF文件 3.插入F LAS H按钮 4.插入F LAS H文本 5.插入F LAS H PAP ER 6.插入F LAS HVI D EO 7.插入媒体插件8.插入视频文件9.插入F LAS H元素10.插入注释11.插入时间第七章表格基础知识 1.表格基础学习计划与目标 2.在页面中插入表格 3.设置表格页眉及辅助功能 4.在表格中添加内容5.如何导入和导出表格数据 6.导入Exc e l文件与导出表格7.选择表格的常用方法8.插入行或列9.嵌套表格10.表格属性设置11.行，列和单元格属性设置<I MG t it le=“友情的语言，不是文字，而是意义。
综合实例——“宝贝爱网站”制做指南2.1 创建站点在编辑网页之前，首先要定义一个站点，以下是高级模式的定义过程：[1] 启动Dreamweaver CS3软件，执行【站点】→【新建站点】菜单命令。
[2] 在【站点定义为】的对话框中选择“高级”选项卡，点击新建两个文件夹baby （根文件夹）和images（图像文件夹），如下图所示，设置“本地信息”的各个参数。
本例的主目录为baby，在信息服务默认站点EC中，“HTTP地址”为http://localhost/，其他默认，完成后点“确定”。
因为是静态网页，可以不设测试服务器。
[3] 将素材文件复制到baby文件夹下（含images文件夹和news.html文件）。
2.2 制作网页模板为便于理解，我们将网页模板的制作分为4小节，下面来看具体操作。
1．新建模板文档(1)选择【文件】→【新建】菜单，打开【新建文档】对话框。
单击“空模板”，在“模板类型”列表中选择“HTML模板”，默认“布局”为 <无>，最后单击“创建”按钮，如图2-1所示。
图2-1(2)按【Ctrl+S】组合键保存文档，弹出图2-2所示提示框，勾选“不再警告我”复选框，之后单击“确定”按钮。
图2-2(3)在打开的【另存模板】对话框中，从“站点”下拉列表中选择“宝贝爱”，在“另存为”文本框中输入模板文件名“ml”，最后单击“保存”按钮，如图2-3所示。
图2-3(4)按【Ctrl+J】组合键，打开【页面属性】对话框。
单击左侧“分类”列表中的“标题／编码”，设置标题为“宝贝爱网站”，其余默认，如图2-4所示。
图2-4(5)再次按【Ctrl+S】组合键保存文件（*养成习惯）。
2．设置模板内容(1) 单击【插入】面板【常用】栏中的“表格”按钮，在页面中插入一个1行2列，宽1000像素，边框粗细、单元格边距和间距均为0的表格，如图2-5所示。
图2-5在该表格【属性】面板中，设置“表格ID”为“1”（定义为表格1，参见图2-6底部提示标签<table#1>），“对齐”方式为“居中对齐”，如下图所示：(2)在表格1（table#1）的左右两个单元格中（用Ctrl+鼠标来选择定位，此方式以后会常用到）分别插入图片“in01.gif”和“index_02.gif”，如图2-6所示。
网页制作综合实例
16.1制作前的准备工作
首先在E盘上建立一个文件夹（如玫瑰信使），再在其下建立images文件夹和css文件夹。
将“ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。
建立站点和规划目录结构、指定默认图像文件夹
主页制作前的准备工作，有定义站点和设计网站结构的目录，还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好是放在站点根目录中的一个文件夹中，如images。
这样便于设计制作时的选取使用，也不易造成素材的混乱。
如下图：
规划站点目录结构
为站点中使用的图像文件指定一个默认图像文件夹，如下图：
设置站点中的默认图像文件夹
在站点下建立一个主页文件index.html。
16.2设置页面属性及样式
16.2.1页面属性设置
1.在站点资源管理器的本地视窗中，选择并双击已经定义的首页面文件ch16\index.asp。
2．在打开的index.asp文件的文档窗口中，选择“修改”---“页面属性”菜单项，打开“页面属性”对话框。
设置网页标题为：“家庭百科”
设置背景图像为images/bj.gif
将“左边界”、“顶部边界”、“边界宽度”、“边界高度”项均设为5。
3．设置完成后，单击“确定”按钮，确定操作返回到index.asp文档窗口。
16.2.2定义CSS样式文件
定义body样式
1.在index.htm文档窗口中，依次单击“窗口”---“CSS样式”菜单项，打开“CSS
样式”面板。
选择“新建CSS样式”菜单命令。
2.打开“新建CSS样式”对话框，“类型”选择“重定义HTML标签”，在“标
签”框中选择或输入body，“定义在”选择“（新建样式表文件）”。
3.单击“确定”按钮，在弹出的“保存样式表文件为”对话框中，选择样式文件
保存的路径（站点下的CSS文件夹），输入样式文件名（这里存为css）。
4.单击“保存”按钮，在出现的样式定义对话框中选择“类型”，在“字体”下
拉列表框中选择“宋体”;在“大小”下拉列表中选择“9”，后面的单位下拉列表框中选择“点数（pt）”度量单位。
5.单击“确定”按钮，便完成对body标记的定义
定义td
定义td的方法和定义body一样，在“新建CSS样式”对话框中将“类型”选择为“重定义html标签”；在“标签”框中选择或输入td。
在定义样式对话框中将字体设置为宋体9磅字。
定义文档的链接颜色
1.单击“窗口”----“CSS样式”菜单项，打开“CSS样式”面板。
2.单击“CSS样式”面板中的“新建样式”按钮，打开“新建CSS样式”对话
框。
“类型”选择“使用CSS选择器”；“选择器”框中选择或输入a:active（选中超链接状态）；“定义在”框中选择CSS，这样便可和前面定义的样式存放在一起，供别的文档
使用。
3.单击“确定”按钮，在出现的对话框中，将该超链接状态的颜色设置为#334dcc。
4.单击“确定”按钮，便完成了超链接状态的颜色设定。
返回到“新建CSS样
式”对话框中，在“选择器”框中选择或输入a:hover（鼠标经过超链接状态）。
5.单击“确定”按钮，在出现的对话框中，将该鼠标经过超链接状态的颜色设置
为#ff0000。
6.单击“确定”按钮返回到“新建CSS样式”对话框，可以定义其他的样式。
7.按照相同的方法，完成下列超链接颜色的设置。
a:link：超链接的正常状态，没有任何动作的时候；颜色设置为：#cc6633
a:viseted：访问过的超链接状态；颜色设置为#334dcc。
完成这些标签样式的定义，基本能满足一般网页的需要了。
由于将这些标记保存为样式文件，所以可供多个文档共同使用。
16.3制作一个完整的个人主页
完成页面设置后可进入网页具体制作阶段。
在本页面的制作过程中用到聊表格、嵌套表格，多处用到对表格中单元格的合并、拆分等技巧性设置。
布局页面每个区域所采用的表格，上下是孤立的，而左右保持了一定的嵌套关系。
这样做的好处是：上下孤立有助于提高网页下载的速度；左右使用嵌套表格有助于对网页元素的定位和特殊页面效果的设计。
16.3.1页眉区制作
该页眉区用一个1行3列的表格来制作，在第一列单元格中插入该网站的标志，第二列单元格中插入该网站的广告，第三列单元格中插入显示当前日期的程序代码。
页眉区制作步骤如下：
1.将光标停留在index.asp文档窗口中，选择“插入”---“表格”命令。
2.在弹出的“插入表格”对话框中，设置插入一个1行3列，宽度为750像素的表格，其
余设置为0，单击“确定”按钮。
3.选中刚插入的表格，选择“窗口”---“属性”命令，打开“属性”面板，在“属性”面
板中将表格的高度设置为60，表格对齐方式为居中。
4.设置单元格。
将第一列单元格的宽度设置为139像素；第二列单元格的宽度设置为468
像素；第三列单元格的宽度设置为143像素。
单元格的对齐方式设置为水平居中对齐，垂直中间。
5.插入网站标志。
将光标停留在第一列单元格中，选择“插入”—“图像”菜单命令，在
“选择图像源”对话框中，选择“images”文件夹内的logo.gif标志图像，单击“确认”
按钮插入网站标志。
6.在第二列单元格中，插入images文件夹内的head.gif网站广告图像。
7.完成“显示当前日期”。
该部分使用代码来完成。
在“属性”面板中将第三列单元格的
对齐方式设置为水平居中、垂直中间。
在“代码”视图，将“显示日期”的代码插入单元格。
16.3.2导航区的制作
导航区的制作从整体上可分为上下两部分，分别用表格来完成。
上部导航的制作
上部导航由1行3列的表格构成。
其中第一列用于设置“跑马灯”效果；第二列设为“设为首页”；第三列设置为“加入收藏夹
具体步骤为：
1.选中页眉区的表格，按下键盘中的右方向键，使得光标置于页眉区表格的右边。
2.在文档窗口的主菜单栏选择“插入”—“表格”菜单命令，插入一个1行3列的表格，
填充0，间距0，边框粗细0，宽度750像素。
3.将插入表格的第1，2，3列的宽度依次设置为450、150、150像素。
各单元格的高度设
置为20像素。
单元格的对齐方式为水平左对齐，垂直居中；整个表格居中对齐。
4.切换到代码视图，在第一列单元格中插入“滚马灯”代码。
5.在设计视图中，在第二、第三列单元格中分别插入images文件夹下的home.gif和sc.gif
图像。
6.在代码视图中，在第二列单元格“首页面图像”右边插入“设为首页”的代码；在第三
列单元格“加入收藏”图像右边插入“加入收藏”的代码。
下部导航的制作
下部导航由1行3列表格构成，但在第三列单元格中海包括一个嵌套表格。
具体步骤是：1.选中上部导航区表格，按键盘中右方向键，使得光标置于表格的右边。
2.选择“插入”---“表格”命令，插入1行3列的表格，表格宽度为750像素，其余均为
0.
3.将表格高度设置为30像素。
1—3列单元格的宽度依次为：150像素、19像素、581像
素。
第一列单元格的对齐方式为水平居中、垂直靠下，并将该单元格的背景颜色设为#ea7609，最后输入“百科首页”文本，文本的颜色设置为白色。
在第二列单元格中插入images文件夹下的jiao.gif图像。
在第三列单元格中插入1行7列的表格，并作如下图的设置。
4.设置嵌套表格。
选中所插入的嵌套表格，在“属性”面板中将表格的对齐方式设置为居
中对齐，高度设置为22像素，背景颜色设置为#ff9966，边框颜色为#ffffff。
5.设置嵌套表格中的单元格。
选中所有单元格，打开“属性”面板，将各单元格的高度设
置为18像素；宽度设置为80像素，对齐方式为水平居中、垂直底部。
6.输入嵌套表格中的各单元格对应导航文本：“家庭理财”、“家庭医生”、“居室装饰”、“追
求娱乐”、“购物防伪”、“留言板”、“浪漫一刻”，并将文本的颜色设置为黑色。
16.3.3主内容一区的制作
主内容一区从左到右共包含3部分，分别是：“搜索引擎”、“家庭理财”、“动态公告”。
该区最外层是一个1行4列的表格，通过在第1、3和4列单元格内嵌套表格完成。
首先插入一个1行4列的表格，步骤是：
1.选中下部导航栏表格，并按键盘中的右方向键，使得光标置于该表格的右边。
2.插入1行4列的表格，表格宽度为750像素，其余各项设置为0。
将表格居中对齐，并
将第1，2，3，4列单元格的宽度分别设置为172、18、418和142，单位均为像素。
各单元格的高度设置为130像素。
