网页制作电子教案系列第二章.pptVIP

教学目标 能够添加文本并对文本进行格式化 创建列表 了解Web中常用的图像类型 在网页中添加图像，使用图像属性修改图像 了解什么是CSS，创建简单的CSS并将其应用到项目中 范例网站--企业宣传页面 新建网页文档 1、新建网页文档　首先打开Dreamweaver创建一个新的基本页，将“标题”文字改为“沈阳电缆厂石家庄销售处”，按“Ctrl+S”快捷键，打开“另存为”对话框，选择文档存放位置—本地站点根文件夹“d:\mysite1”，以“jianjie.htm”文件名保存。 设置页面属性 2、设置页面属性 针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“Ctrl+J”快捷键，打开“页面属性”对话框，在“外观”选项组中将“上边距”全部设为0像素，单击“确定”按钮，关闭对话框。 插入文件头内容 3、插入网页说明的内容为“沈阳电缆厂石家庄销售处”，关键字为“电力电缆、通信电缆、电气装备电缆、光纤光缆、裸电线及电缆附件”。 插入表格、规范网页布局 4、单击“插入”菜单中的“表格”命令，插入一个4行1列的表格，表格宽度设置为770px，“边框粗细”、“单元格边距”、“单元格间距”都设置为0，单位都是象素，将该表格对齐方式设为“居中对齐”。 插入图像 5、插入网站主题图片　在刚生成表格的第一行中插入网站主题图片“bt.jpg”。 制作左侧导航菜单 将插入点光标移到表格的第二行中，单击表格属性面板中的“拆分”按钮，把该行拆分成两列。 将插入点光标移到第二行的左单元格中，在单元格属性面板中的“背景”文本框中输入“image/back.gif”，即为该单元格设置背景图片，再在“垂直”列表中选择“顶端对齐”选项，将设置单元格中内容的水平对齐方式 制作左侧导航菜单 在第二行的左单元格中，插入图片“left.gif” 选中图片“left.gif”再按键盘中向右的方向键将插入点光标移至图片的后面，再单击“Ctrl+Alt+t”快捷键，打开“插入表格”对话框，再设置插入一个行数为“6”，列数为“1”，宽度为“120”，其余各项为0的表格 制作左侧导航菜单 将插入点光标移到刚插入表格的第一个单元格中，按住鼠标左键拖动选中所有的单元格，注意是选中所有的单元格不是选中整个表格，这样属性面板才显示的单元格的相关属性，在单元格属性面板的“高”文本框中输入“30”，设置单元格高度为“30”，并在“垂直”下拉列表中选择“居中”，设置单元格中内容垂直居中对齐， 在第一个单元格中插入图片“an1.gif”，设置链接为“＃”，目标为“_blank”，重复上述步骤，依次添加上其余5个导航按钮，并全部设置成空链接。 制作右侧页面 将光标移至第二行的右单元格，选择“属性”面板中的，将该单元格拆分成2行，定义上一行单元格高度为“65”，插入图片“gsjj.gif”. 光标移至下边单元格，将垂直对齐方式定为“顶端”对齐，输入公司简介文字。 制作右侧页面 完成后选中所有文字，点击右方CSS样式面板的“新建样式”按钮，新建一个名为“.wen”的样式，定义在“仅对该文档”，字体设置为“宋体”、大小为12像素，行高为18像素。 单击属性面板“样式”列表中的为“.wen”，将单元格中文本定义为该样式，并将单元格中文字设置为“左对齐” 制作右侧页面 将光标移至本单元格顶部，插入一个两行一列，宽度为245像素的表格，表格相对于表格外的文字“右对齐”，即选中新建表格后单击属性面板中的“对齐”列表中的“右对齐”选项。将插入点光标移到第一个单元格中，在属性面板的“高”文本框中输入“185”，将新建表格第一行高度设为“185”像素，按相同方法将新建表格的第二行设为“25”像素，并将两个单元格中内容的水平对齐方式设为“居中” 在新建表格第一行单元格格插入图片“jzm.jpg”，并在第二行输入说明文字：“江泽民同志视察我厂” 制作页面底部 将插入点光标移至大表格的第三行单元格，在属性面板中设置样式为“.wen”，单元格中内容水平“居中”对齐，单元格高度为25像素，并设置单元格背景图片为“di.gif”，依照相同办法，第四行也设成相同属性。 并分别在单元格内输入文字，所有内容制作完毕，保存文档，按F12预览 企业宣传页面二 新建网页文档　按“Ctrl+N”快捷键，创建一个新的空白文档，在“文档”工具栏的“标题”文本框中输入“电子工业出版社”，为网页创建将来在标题栏中显示的标题。 保存网页文档　单击“文件”菜单中的“保存”命令或按“Ctrl+S”快捷键，打开“另存为”对话框，在对话框中选择文档存放位置—例如：“d:\mysite2”，并在“文件名”下拉列表框中输入文件名称—“intro”，单击“保存”按钮即可。在Dreamweaver环