主页 雪景 古诗词 网页设计_古诗词雪景
主页 雪景 古诗词 网页设计由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“古诗词雪景”。
网页设计
一、实验目的1．掌握Dreamweaver CS5的基本操作。2．掌握设计简单网页的技术。
二、实验环境要求
安装了Dreamweaver CS5中文版的计算机。
三、实验任务描述
1．创建本地站点。
2．制作古诗网页（添加并设置网页的文本、图像等元素）。3．设计动画雪景（运用Flash动画）。
4．设计个人简历（表格排版、插入图像、创建并应用CSS样式）。5．制作主页index.html（网页布局，设置超链接）。
四、实验预备知识
Dreamweaver集网页制作和站点管理于一身，是网页设计的首选工具。Dreamweaver具有“所见即所得的”设计方式，能够实现网站的管理，并可制作出支持数据库的动态网页。
1．创建本地站点
网站建设的基本方法是先在本地计算机上创建页面，然后将其上传到服务器。一个网站的文件往往比较多，为了便于文件的管理和维护，需将网站的所有文件存放在一个文件夹内，这个文件夹就是站点。
在Dreamweaver CS5中，通过【站点】→【新建站点】命令，可创建站点。
2．文本的添加和设置
在网页中添加文本有三种方法：第一种是直接输入；第二种是复制粘贴（在其他窗口中复制文本，然后粘贴到页面中指定位置）；第三种是导入法（执行【文件】→【导入】菜单中的相关命令）。
通过【页面属性】对话框，可以设置页面中的字体、字号、颜色和背景图像等属性。
3．插入图像和动画
图像具有直观、形象的特点，在网页中插入图像的方法是：光标放置在文档的相应位置，执行【插入】→【图像】命令，弹出“选择图像源文件”对话框，在其中选择要插入的图片后，单击【确定】按钮。
插入Flash动画、音频和视频，可以丰富网页的内容。
4．设置超链接
网络中的所有资源都是通过超级链接联系在一起的。选中文本或图像，在【属性】检查器中即可添加超链接。对文字或图片设置超链接后，在浏览器中鼠标单击超链接载体就会跳转到其他页面。
4．表格布局
表格在网页中往往用来定位和排版。在【插入】面板中，单击【常用】选项卡的【表格】按钮，弹出【表格】对话框，设置相应的参数后，即可插入表格。
在表格中，按住左键拖动鼠标，可选择连续的单元格；按住Ctrl键后，分别单击要选定的单元格，可选中不连续的单元格。
5．CSS样式
CSS（层叠样式表）是现在广泛使用的格式控制技术，是Web标准化体系中重要的组成部分。在Dreamweaver 中能以可视化方式编辑CSS样式，并应用到网页中。
在【CSS样式】面板中，单击【新建CSS规划】按钮，即可创建CSS。
五、实验项目及步骤
实验项目一
在Dreamweaver CS5中创建站点
打开“新建站点”对话框，在其中输入站点名称（学号），并选择“实验24”为本地站点文件夹。
实验项目二
制作古诗网页
网页中最基本的元素是文本和图像，这两种元素可以组成最简单的网页。将诗歌内容与特色背景图像搭配，能较好地表现页面的主题内容。本练习通过对文字与背景图像的设置，制作一个古诗网页，预览效果如图24-1所示。
图24-1 古诗页面
操作步骤：
1．在站点中新建网页文件gsxs.html，标题设置为：古诗欣赏。
2．打开“实验24”的“sc”文件夹中的“sgwb.txt”文件，复制其中的古诗文本到页面中。
3．单击【属性】检查器中的【页面属性】按钮，打开相应的对话框，如图24-2所示。
图24-2 “页面属性”对话框
4．在文字【大小】文本框中选择“24px”；【文本颜色】文本框中选择“绿色”（#360）；单击【背景图像】文本框右侧的【浏览】按钮，在弹出对话框中选择“images”文件夹中的“zhu.jpg”，【重复】文本框中选择“no-repeat”；单击【确定】按钮，将其应用到网页文档中。
5．将光标放置在“咏竹”文本的前面，按Enter键换行。然后单击【属性】检查器中的【内缩区块】按钮，将文本向右缩进（单击五次）；再分别将光标放置在各个诗句的前面，单击【属性】检查器中的【内缩区块】按钮，将文本向右缩进（各单击二次）。
6．选择“咏竹”文本，在【属性】检查器的【格式】下拉列表中选择“标题1”，完成标题格式的设置。
7．保存网页后，按F12键可在浏览器中预览页面效果。
实验项目三
设计网页动画雪景
要想使网页的视觉效果更加丰富，多媒体元素的加入必不可少，而Flash动画是网页中常用的元素之一。本练习将设计网页动画雪景，预览效果如图24-3所示。
图24-3 动画雪景页面
操作步骤： 1．新建网页文件dhxj.html，标题设置为：动画雪景。
2．单击【属性】检查器中的【页面属性】按钮，打开相应的对话框。设置【背景图像】为“images”文件夹中的“dhbj.jpg”，【重复】文本框中选择“no-repeat”；设置【左边距】、【上边距】、【右边距】、【下边距】四个属性值均为0，如图24-4所示，然后单击【确定】按钮。
图24-4 “页面属性”对话框
3．执行【插入】→【媒体】→SWF 命令，弹出【选择SWF】对话框，在其中选择“sc”文件夹中的“snow.swf”，单击【确定】按钮插入动画。
4．在【属性】检查器中，设置Flash动画【宽】为1000px，【高】为650px，【Wmode】的下拉列表中选择“透明”选项，如图24-5所示。
图24-5 “属性”检查器
5．保存网页，按F12键在浏览器中预览页面效果。
实验项目四
设计个人简历
在Dreamweaver中，表格除了归纳的作用外，还具有排版与定位的作用。当一个表格无法满足所有需要时，可使用嵌套表格。本练习运用嵌套表格制作一份具有蓝色细框线的个人简历，其整体效果如图24-6所示。
图24-6 个人简历页面
操作步骤： 1．在站点中新建网页文件grjl.html，标题为：个人简历。
2．单击【插入】面板中的【表格】按钮，在弹出的【表格】对话框中，设置行数和列数都为3，表格宽度为760像素，边框粗细、单元格边距、单元格间距均设为0，如图24-7所示。单击【确定】按钮后，在页面中即插入一个3行3列、宽760像素的表格。
图24-7 “插入表格”对话框
3．分别选择第一行和第三行的所有的单元格，单击【属性】检查器中的【合并单元格】按钮。将单元格合并后，分别在表格的上、左、右、下单元格中插入图像top.gif、left.gif、right.gif和foot.gif，并调整单元格的大小。
4．将光标置于中间单元格中，插入一个13行4列的嵌套表格（宽度为690像素，边框粗细为0，单元格边距为5，单元格间距为1），并用鼠标拖动的方法调整嵌套表格的高度以适应最大外框。然后选定嵌套表格，在【属性】检查器中设置对齐方式为“居中对齐”。
5．打开【CSS样式】面板，单击【新建CSS规划】按钮，在弹出对话框的“选择器名称”文本框中输入tbg，单击【确定】按钮弹出“.tbg的CSS规则定义”对话框，在其中选择“分类”中的“背景”，设置Background-color（背景颜色）为#4BACC6（蓝色），如图24-8所示。
图24-8 “.tbg的CSS规则定义”对话框
6．选中嵌套表格后在【属性】检查器中点开“类”的下拉列表，选择其中的“tbg”，为表格添加蓝色背景；再选中嵌套表格的所有单元格，设置单元格背景颜色为白色（#FFFFFF），从而制作出蓝色细框线的表格，如图24-9所示。
图24-9 蓝色细线边框表格
7．按照图24-6的样式合并相应的单元格，并用鼠标拖动的方法调整单元格的宽度；然后在单元格中输入相应的文字，并设置单元格背景颜色和文字对齐方式，如图24-9所示。其中第1、5、7、12行的背景颜色为“蓝色”（#D2EAF1），文字“加粗”；第2、3、4行的第1、3列和第8行的背景颜色为“灰色”（#EFEFEF），文字水平对齐方式为“居中对齐”。
图24-10 输入栏目名称的表格
8．最后在表格中填入自己的个人信息，右上角单元格中插入头像图片，按F12键在浏览器中预览页面效果
实验项目五
制作主页index.html
图24-11 index.html页面
操作步骤：
1．在站点中新建网页文件index.html，标题为：主页。2．打开【页面属性】对话框，设置【左边距】、【上边距】、【右边距】、【下边距】四个属性值都为0。
3．插入一个4行3列、宽1000像素的表格（边框粗细、单元格边距、单元格间距都设为0）。
4．选择第一行的三个单元格，在【属性】检查中设置单元格的高度为50px，文本水平对齐方式为“居中对齐”，背景颜色为#F4F4F4，并单击“加粗”按钮。
5．在三个单元格中分别输入图24-11中的导航文本。选中“古诗欣赏”，在【属性】检查器中对其添加超链接（链接到gsxs.html，并设置为“在新窗口中打开”）；第二个单元格中的“动画雪景”文本链接到dhxj.html（新窗口中打开）；第三个单元格中的“个人简历”文本链接到grjl.html（新窗口中打开）。
6．合并第二行的三个单元格，在其中插入图像mxcz.jpg。
7．将第三行的三个单元格背景颜色设置为#EEEEEE，高度为50px，文本水平对齐方式为“居中”。然后分别输入图24-11中的文本，将“友情链接”文本链接到http://www.daodoc.com（新窗口中打开）；“与我联系”链接到电子邮箱hkj@163.com（选中“与我联系”文本后，【插入】面板中单击“电子邮件链接”按钮，在弹出的对话框中输入电子邮件地址）。
8．合并第四行的三个单元格，设置文本水平居中对齐，输入版权信息。9．最后按F12在浏览器中打开网页，测试超链接。
四川旅游学院信息技术系
