网页制作_任务书_第05章 网站css和div布局设计

《网页制作_任务书_第05章 网站css和div布局设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、任务一、前期准备工作步骤1：在“E:”新建一个文件夹，以“学号+姓名”命名。步骤2：将素材解压到“E:”中新建的文件夹（“学号+姓名”）中。步骤3：建立站点，站点以“学号+姓名”命名。步骤4：将建立好的站点导出到“E:”的素材文件夹，保存站点的文件名为“学号+姓名.ste”。步骤5：为每个任务的“index.html”文档，作者名称和版权信息。其中：作者为“自己的姓名”，版权归“自己的班级”。任务二、预设计CSS+DIV布局步骤1：在菜单栏中选择“文件-新建”命令，打开“新建文档”对话框，依次选择“空白页-HTML”选项。在“布局”列表中选择“2列固定，左侧栏、标题和脚注”，在“布局

2、CSS位置”下拉列表中选择“添加到文档头”，单击“创建”按钮。1步骤2：将页面保存在“ysjcss”文件夹中，名称为“index1.html”，并浏览网页。2步骤3：在菜单栏中选择“文件-新建”命令，打开“新建文档”对话框，依次选择“空白页-HTML”选项。在“布局”列表中选择“2列液体，左侧栏、标题和脚注”，在“布局CSS位置”下拉列表中选择“添加到文档头”，单击“创建”按钮。3步骤4：将页面保存在“ysjcss”文件夹中，名称为“index2.html”，并浏览网页。45任务三、绘制层步骤1：在“hzc”文件夹中新建“index.html”文件。步骤2：设置网页标题为“绘制层”。步骤3

3、：插入DIV标签“div-1”，创建高级CSS样式“#div-1”，然后创建高级CSS样式“#div-1”，设置字体“黑体”、大小“30像素”、行高“50像素”；背景颜色“#CCCCCC”、水平；方框宽“300像素”、高“100像素”、填充“5像素”；边框样式“双线”、宽度“5像素”、颜色“#999999”。步骤4：输入文本“机器的摩擦耗费成本，人际间的摩擦损耗心灵”。步骤5：保存（Ctrl+S），并预览文件（F12）。6任务四、咏柳步骤1：在“yl”文件夹中新建“index.html”文档。步骤2：设置网页标题为“咏柳”。步骤3：插入DIV标签“mydiv”，然后创建高级CSS样式“#m

4、ydiv”，设置其背景为“bg.jpg”，重复方式为“不重复”，水平和垂直位置分别为“右对齐”和“居中”，宽度和高度分别为“550像素”和“500像素”，左右边界均为“自动”。7步骤4：在DIV标签“mydiv”内插入DIV标签“mydiv-1”并输入文本“咏柳”，然后创建类样式“.mytitle”，设置其文本大小为“100像素”，颜色为“#0033FF”，文本对齐方式为“居中”，宽度和高度分别为“120像素”和“自动”，浮动为“左对齐”，上边界、左边界和右边界分别为“100像素”、“40像素”和“0”，并将该样式应用到DIV标签“mydiv-1”。步骤5：在DIV标签“mydiv-1”后

5、插入DIV标签“mydiv-2”，然后创建高级CSS样式“#mydiv-2”，设置其宽度和高度分别为“300像素”和“自动”，浮动为“左对齐”，上边界和左边界分别为“50像素”和“80像素”。8步骤6：在DIV标签“mydiv-2”内输入文本，每行以“Enter”键结束，然后创建标签CSS样式“p”，设置其文本大小为“36像素”，“粗体”显示，行高为“85像素”，颜色为“#FF0000”，上下边界均为“0”。步骤7：保存（Ctrl+S），并预览文件（F12）。9任务五、逢雪宿芙蓉山主人步骤1：在“fxmfrszr”文件夹中创建“index.html”文档。步骤2：设置网页标题为“冯雪宿芙蓉

6、山主人”。步骤3：插入DIV标签“mydiv”，然后创建高级CSS样式“#mydiv”，设置背景图像为“images/tu.jpg”；方框宽度为“450”，高度为“570”。10步骤4：删除“mydiv”层中的文字，在“mydiv”层中插入DIV标签“mydiv-1”：字体为“黑体”；大小为“36像素”；行高为“60像素”；颜色为“#FFFFFF”；文本对齐方式为“居中”；方框宽度为“320像素”，高度为“60像素”，上边距为“20像素”，左边界为“20像素”，输入文本“逢雪宿芙蓉山主人”。步骤5：在“mydiv-1”后插入DIV标签“mydiv-2”：字体为“楷体_GB2312”；大小为

7、“24像素”；行高为“40像素”；颜色为“#FFFFFF”；背景颜色为“#ACCED8”；文本对齐方式为“居中”；方框宽度为“150像素”，高度为“40像素”，上边距为“20像素”，下边距为“100像素”，浮动为“左对齐”，输入文本“刘长卿”。11步骤6：在“mydiv-2”后插入DIV标签“mydiv-3”：文本对齐方式为“居中”；方框宽度为“350像素”，高度为“210像素”，上边距为“200像素”，下边距为“20像