8.2 制作一个简单的站点 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第八章 网站制作实例 本章主要介绍本地服务器的配置、一个完整静态站点的制作过程，通过本章个人站点制作过程的学习可以系统全面的回顾本教材所讲解的静态网页设计与制作的基本知识，并学会系统使用。 8.2 制作一个简单的站点 8.2.1创建页面—心灵品管 本页面主要应用嵌套的框架 8.2 制作一个简单的站点 8.2.1创建页面—心灵品管 1.制作页面8-2-1.htm 8.2 制作一个简单的站点 8.2.1创建页面—心灵品管 2.制作页面8-2-2.htm 8.2 制作一个简单的站点 8.2.1创建页面—心灵品管 3.制作页面8-2-3.htm 8.2 制作一个简单的站点 8.2.1创建页面—心灵品管 制作页面8-2-3.htm 8.2 制作一个简单的站点 8.2.1创建页面—心灵品管 4.制作页面8-2-5.htm 与制作8-2-1.htm方法相同，设置好页面属性后，插入库元素即可，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 此页面是文章鉴赏栏目下的一个子页面，主要应用层来完成，如图所示。 此处只介绍该网页的制作，其他网页的制作可以自由设计。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 1．使用模板文件index.dwt创建新页面8-6.htm 2．将光标定位在EditRegion3所在表格的第1行单元格中，设置背景图像为8-2.jpg，单元格高为75像素，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 3．插入图像8-12.gif，设置为右对齐，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 4.光标定位在第3行中输入导航栏文字，样式为CS1，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 5．定位在第4行单元格中，设定背景图像为8-39.jpg，单元格高为60像素。插入图像8-38.jpg，宽53像素，高70像素，对齐为绝对居中，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 6．光标放在图像右侧输入文字“文章鉴赏”，字体为华文新魏，大小为36，颜色为白色，并居中对齐，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 7．在文字右侧重复插入图像8-38.jpg，设置如上，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 8．将网页与模板分离。 9．光标定位在表格1第二行中，设置背景颜色为#FFFFFF，高为400像素。插入图像8-31.jpg，高200，宽120像素，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 10．光标定位在图像下一行，插入一个层，选中层，设置高为30像素，宽为200像素，调整至适当位置。同样的方法再插入4个层，调整至适当位置，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 12．插入层，高340，宽615像素，调整至适当位置。层的编号为Layer6。在层中输入文字（文字内容自定），标题字体样式与Layer1中的大话相同，正文字体样式选择CS3。光标定位在文字下一行，插入图像8-37.jpg，宽290，高180像素，居中对齐，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 13．打开层面板隐藏Layer6，在同样的位置再插入一个层Layer7，大小与Layer6相同，同样输入文字，插入素材图片8-36.jpg。同样的方法插入层Layer8，Layer9，Layer10，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 14．为Layer1和Layer2设置行为，选中Layer1，打开行为面板，单击+，在弹出的菜单中选择“显示-隐藏层”命令，弹出对话框设置Layer6为显示，Layer7、8、9、10为隐藏。在行为面板中将行为onfocus改为onclick。如图示 8.2 制作一个简单的站点 8.2.2创建页面—感悟 15．同样设置Layer2行为，Layer7为显示，Layer6、8、9、10为隐藏。 16．光标定位在Layer7下方，插入图像8-8.jpg，居中对齐，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 17．光标定位在表格1的第3行，插入库元素8-1，如图所示。 8.2 制作一个简单的站点 8.2.2创建页面—感悟 18．用同样的方法为独饮 春夜 乱弹设置Layer3 Layer4 Layer5的行为。 8.2 制作一个简单的站点 8.2.3 设置链接 1．设置首页链接 （1