网 制作综合实例.docx
- 文档编号:11085295
- 上传时间:2023-05-29
- 格式:DOCX
- 页数:9
- 大小:18.61KB
网 制作综合实例.docx
《网 制作综合实例.docx》由会员分享,可在线阅读,更多相关《网 制作综合实例.docx(9页珍藏版)》请在冰点文库上搜索。
网制作综合实例
网页制作综合实例
制作前的准备工作
首先在E盘上建立一个文件夹(如玫瑰信使),再在其下建立images文件夹和css文件夹。
将“ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。
建立站点和规划目录结构、指定默认图像文件夹
主页制作前的准备工作,有定义站点和设计网站结构的目录,还有就是要将网页设计制作中需要用到的所有图像素材整理好,最好是放在站点根目录中的一个文件夹中,如images。
这样便于设计制作时的选取使用,也不易造成素材的混乱。
如下图:
规划站点目录结构
为站点中使用的图像文件指定一个默认图像文件夹,如下图:
设置站点中的默认图像文件夹
在站点下建立一个主页文件。
设置页面属性及样式
16.2.1页面属性设置
1.在站点资源管理器的本地视窗中,选择并双击已经定义的首页面文件ch16\。
2.在打开的文件的文档窗口中,选择“修改”---“页面属性”菜单项,打开“页面属性”对话框。
设置网页标题为:
“家庭百科”
设置背景图像为images/
将“左边界”、“顶部边界”、“边界宽度”、“边界高度”项均设为5。
3.设置完成后,单击“确定”按钮,确定操作返回到文档窗口。
16.2.2定义CSS样式文件
定义body样式
1.在文档窗口中,依次单击“窗口”---“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.1页眉区制作
该页眉区用一个1行3列的表格来制作,在第一列单元格中插入该网站的标志,第二列单元格中插入该网站的广告,第三列单元格中插入显示当前日期的程序代码。
页眉区制作步骤如下:
1.将光标停留在文档窗口中,选择“插入”---“表格”命令。
2.在弹出的“插入表格”对话框中,设置插入一个1行3列,宽度为750像素的表格,其余设置为0,单击“确定”按钮。
3.选中刚插入的表格,选择“窗口”---“属性”命令,打开“属性”面板,在“属性”面板中将表格的高度设置为60,表格对齐方式为居中。
4.设置单元格。
将第一列单元格的宽度设置为139像素;第二列单元格的宽度设置为468像素;第三列单元格的宽度设置为143像素。
单元格的对齐方式设置为水平居中对齐,垂直中间。
5.插入网站标志。
将光标停留在第一列单元格中,选择“插入”—“图像”菜单命令,在“选择图像源”对话框中,选择“images”文件夹内的标志图像,单击“确认”按钮插入网站标志。
6.在第二列单元格中,插入images文件夹内的网站广告图像。
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文件夹下的和图像。
6.在代码视图中,在第二列单元格“首页面图像”右边插入“设为首页”的代码;在第三列单元格“加入收藏”图像右边插入“加入收藏”的代码。
下部导航的制作
下部导航由1行3列表格构成,但在第三列单元格中海包括一个嵌套表格。
具体步骤是:
1.选中上部导航区表格,按键盘中右方向键,使得光标置于表格的右边。
2.选择“插入”---“表格”命令,插入1行3列的表格,表格宽度为750像素,其余均为0.
3.将表格高度设置为30像素。
1—3列单元格的宽度依次为:
150像素、19像素、581像素。
第一列单元格的对齐方式为水平居中、垂直靠下,并将该单元格的背景颜色设为#ea7609,最后输入“百科首页”文本,文本的颜色设置为白色。
在第二列单元格中插入images文件夹下的图像。
在第三列单元格中插入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像素。
制作“搜索引擎”区
1.在1行4列表格的第一列单元格插入一个4行1列的嵌套表格。
2.设置嵌套表格,将嵌套表格的宽度设为172像素,高度均设置为130像素。
3.设置单元格。
在嵌套表格的第一行单元格内插入images/图像;在第二、四行单元格内插入images/图像,并将该单元格的背景颜色设置为#ff6633,高度设置为1像素;最后将第三行单元格的背景图像设置为images/图像。
4.插入搜索引擎表单。
将光标停留在嵌套表格的第三行单元格中,对齐方式设置为水平居中、垂直考上,切换到代码视图,插入“搜索引擎”代码
制作“家庭理财”区
要完成“家庭理财”区的制作,请执行下列操作:
1、在该区的第三列单元格内插入一个5行1列的表格。
表格中各行单元格的高度均设置为26像素,表格的宽度设置为98%,并将该表格的其余项设置为0,表格的对齐方式设置为居中。
2、选中所有单元格,将各单元格的对齐方式设置为靠左对齐、垂直中间,并在第一行单元格中插入images/图像,其他行单元格中输入对应的文本(参考已完成的最终页面)。
制作“动感公告”区
“动感公告”区的制作可以使用与“搜索引擎”表格相同的方法完成,其中第三行单元格的背景图像修改为images/图像,表格的宽度设置为142像素。
然后插入“本站简介”代码片段即可。
具体操作如下:
1、将主内容一区表格的第四列单元格对齐方式设置为水平左对齐、垂直靠上,并将光标停留在此单元格内。
2、选择代码视图,将“本站简介”代码片段插入。
3、完成主内容一区的制作,预览看实际效果。
16.3.4主内容二区的制作
主内容二区从左到右共包含4部分,分别是“天天饮食”、“家庭医生”、“通信信箱”、“本站导航”。
该区最外层是一个2行4列的表格,然后在第1、3和4列单元格内嵌套表格完成。
首先插入一个2行4列的表格,请执行以下操作步骤:
1、选中“主内容一区”的表格,并按键盘中的右方向键,使得光标置于该表格的右边。
2、插入2行4列的表格,表格的宽度设置为750像素,其余各项设置为0.将表格的对齐方式设置为居中对齐,并将第1、2、3、4列单元格的宽度分别设置为172、18、418和142,单位均为像素。
然后对第2行单元格的第3列与第4列进行合并,对第一列单元格进行合并,对第二列单元格进行合并。
“天天饮食”区的制作
“天天饮食”区的制作步骤如下:
1、将主内容二区表格的第1列单元格的对齐方式设置为水平左对齐、垂直靠上,并将光标停留在此单元格内。
2、在该单元格中插入一个4行1列的嵌套表格。
3、设置嵌套表格。
将嵌套表格的宽度设置为172像素,高度均设置为140像素。
4、设置嵌套表格中的单元格。
在嵌套表格的第1行单元格内插入images/图像;在第2、4行单元格内插入images/图像,并将该单元格的背景颜色设置为#ff6633,高度设置为1像素。
最后ijiang第3行单元格的背景图像设置为images/图像。
5、插入天天饮食内容。
在“天天饮食”表格的第3行单元格内插入一个4行1列的表格,表格的宽度设置为100%,然后再对应的单元格内输入相应的文本。
“家庭医生”区的制作
1、在主内容二区的第1行的第3列单元格中插入一个7行1列的表格。
其中表格的宽度设置为100%,高度设置为150像素。
2、设置单元格。
将各个单元格的对齐方式设置为:
水平左对齐、垂直居中。
3、在第1行单元格中插入images/图像,并在各单元格中输入相应的文本。
“通信信箱”区的制作
在主内容二区表格的第1行的第4列中创建“通信信箱”区,该区的制作比较简单,可以使用与“动感公告”相同的方法。
惟一的区别是在第1行单元格中插入images/图像,并输入相应的“通信信箱”文本。
“本站”导航区的制作
1、将光标停留在主内容二区表格的第2行第3列单元格中,插入images/图像,然后再插入一个6行2列的表格,表格的高度设置为100%,边框设置为1.
2、将1、3、5、6行单元格的高度设置为20像素,2、4行单元格的高度设置为30像素,宽度均设置为50%。
3、在对应的单元格内输入相应的文本(参照完成页面)
16.3.5版权区的制作
版权区的制作相比起各个主内容区要简单得多,可用一个3行1列的表格完成。
步骤如下:
1、将光标停留在主内容二区的右边,插入一个3行1列的表格,表格的宽度设置为750像素,其余各项设置为0.
2、设置表格和单元格。
表格对齐方式设置为水平居中对齐、垂直中间;其中第1、2、3行单元格的高度依次设置为30像素、20像素、30像素。
各单元格的对齐方式设置为水平居中对齐、垂直中间。
3、插入水平线。
将光标停留在第2行单元格中,在文档窗口的菜单栏中依次选择“插入”—“水平线”菜单命令,插入水平线。
4、设置水平线。
选中水平线,在“属性”面板中设置水平线,其中高度设置为1,宽度设置为70%,对齐方式设置为居中对齐。
5、在表格的对应单元格中输入版权区所对应的内容(参照完成页面)。
6、完成。
网页特效
16.4.1弹出“小人”网页特效
具体操作步骤如下:
1、在文档窗口中打开代码视图。
2、在代码编辑窗口中的
和之间,插入“小人”的代码。注意,一般插入在
和之间任何位置都可以,但是考虑到网页元素的完整性,不要在一个元素之间插入这段功能代码,一般插入在网页元素的最前面。16.4.2实现网页中飘动的图层特效
步骤如下:
1、打开页面。
2、切换到代码视图。
3、在代码编辑状态下,在
和之间插入“飘动的图层”代码。4、查看“飘动的图层”功能代码,在代码中查找关于图像的链接。
具体方法可以用“查找”命令,搜索img。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 制作综合实例 制作 综合 实例