搜索
第二章创建企业宣传页面教学目标能够添加文本并对文本进行格式化创建列表了解Web中常用的图像类型在网页中添加图像，使用图像属性修改图像了解什么是CSS，创建简单的CSS并将其应用到项目中范例网站--企业宣传页面新建网页文档1、新建网页文档首先打开Dreamweaver创建一个新的基本页，将“标题”文字改为“沈阳电缆厂石家庄销售处”，按“Ctrl+S”快捷键，打开“另存为”对话框，选择文档存放位置—本地站点根文件夹“d:\mysite1”，以“jianjie.htm”文件名保存。设置页面属性2、设置页面属性针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“Ctrl+J”快捷键，打开“页面属性”对话框，在“外观”选项组中将“上边距”全部设为0像素，单击“确定”按钮，关闭对话框。插入文件头内容3、插入网页说明的内容为“沈阳电缆厂石家庄销售处”，关键字为“电力电缆、通信电缆、电气装备电缆、光纤光缆、裸电线及电缆附件”。插入表格、规范网页布局4、单击“插入”菜单中的“表格”命令，插入一个4行1列的表格，表格宽度设置为770px，“边框粗细”、“单元格边距”、“单元格间距”都设置为0，单位都是象素，将该表格对齐方式设为“居中对齐”。插入图像5、插入网站主题图片在刚生成表格的第一行中插入网站主题图片“bt.jpg”。制作左侧导航菜单1.将插入点光标移到表格的第二行中，单击表格属性面板中的“拆分”按钮，把该行拆分成两列。2.将插入点光标移到第二行的左单元格中，在单元格属性面板中的“背景”文本框中输入“image/back.gif”，即为该单元格设置背景图片，再在“垂直”列表中选择“顶端对齐”选项，将设置单元格中内容的水平对齐方式制作左侧导航菜单3.在第二行的左单元格中，插入图片“left.gif”4.选中图片“left.gif”再按键盘中向右的方向键将插入点光标移至图片的后面，再单击“Ctrl+Alt+t”快捷键，打开“插入表格”对话框，再设置插入一个行数为“6”，列数为“1”，宽度为“120”，其余各项为0的表格制作左侧导航菜单5.将插入点光标移到刚插入表格的第一个单元格中，按住鼠标左键拖动选中所有的单元格，注意是选中所有的单元格不是选中整个表格，这样属性面板才显示的单元格的相关属性，在单元格属性面板的“高”文本框中输入“30”，设置单元格高度为“30”，并在“垂直”下拉列表中选择“居中”，设置单元格中内容垂直居中对齐，6.在第一个单元格中插入图片“an1.gif”，设置链接为“＃”，目标为“_blank”，重复上述步骤，依次添加上其余5个导航按钮，并全部设置成空链接。制作右侧页面1.将光标移至第二行的右单元格，选择“属性”面板中的，将该单元格拆分成2行，定义上一行单元格高度为“65”，插入图片“gsjj.gif”.2.光标移至下边单元格，将垂直对齐方式定为“顶端”对齐，输入公司简介文字。制作右侧页面3.完成后选中所有文字，点击右方CSS样式面板的“新建样式”按钮，新建一个名为“.wen”的样式，定义在“仅对该文档”，字体设置为“宋体”、大小为12像素，行高为18像素。4.单击属性面板“样式”列表中的为“.wen”，将单元格中文本定义为该样式，并将单元格中文字设置为“左对齐”制作右侧页面5.将光标移至本单元格顶部，插入一个两行一列，宽度为245像素的表格，表格相对于表格外的文字“右对齐”，即选中新建表格后单击属性面板中的“对齐”列表中的“右对齐”选项。将插入点光标移到第一个单元格中，在属性面板的“高”文本框中输入“185”，将新建表格第一行高度设为“185”像素，按相同方法将新建表格的第二行设为“25”像素，并将两个单元格中内容的水平对齐方式设为“居中”6.在新建表格第一行单元格格插入图片“jzm.jpg”，并在第二行输入说明文字：“江泽民同志视察我厂”制作页面底部1.将插入点光标移至大表格的第三行单元格，在属性面板中设置样式为“.wen”，单元格中内容水平“居中”对齐，单元格高度为25像素，并设置单元格背景图片为“di.gif”，依照相同办法，第四行也设成相同属性。2.并分别在单元格内输入文字，所有内容制作完毕，保存文档，按F12预览企业宣传页面二1.新建网页文档按“Ctrl+N”快捷键，创建一个新的空白文档，在“文档”工具栏的“标题”文本框中输入“电子工业出版社”，为网页创建将来在标题栏中显示的标题。2.保存网页文档单击“文件”菜单中的“保存”命令或按“Ctrl+S”快捷键，打开“另存为”对话框，在对话框中选择文档存放位置—例如：“d:\mysite2”，并在“文件名”下拉列表框中输入文件名称—“intro”，单击“保存”按钮即可。在Dreamweaver环境中网页文档最常用保存格式是.HTM和.HTML。3.设置页面属性针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“Ctrl+J”快捷键，打开“页面属性”对话框，在“外观”选项组中将“上、下、左、右边距”全部设为0像素，其它设置暂不作修改，保持默认值。4、单击“插入”菜单中的“表格”命令，打开“表格”对话框，下面我们在这个对话框中初步设置所插表格的属性，如图2.61所示，在表格大小一栏中，将其行数设置为3，列数为1，表格宽度设置为602，（注意：由于我们当前的工作任务其实只是整个网页中的一部分，所以插入的表格宽度为602，而根据目前主流显示器的分辨率1024＊768。）单位为象素，“边框粗细”、“单元格边距”、“单元格间距”都设置为0，单位都是象素；页眉及辅助功能设置不用更改设置。5.选中表格，在属性面板里找到“对齐”一项，选择“居中对齐”，在刚生成的表格的第一行中插入一个图片wsjj_04.gif。6.将插入点光标移至第二行的单元格中，选择“插入”工具栏中的“HTML”选项卡，然后单击“水平线”按钮，在第二行表格中插入一条水平线，7.就像使用其他的文字编辑软件一样，将插入点光标移至表格的第三行，用熟悉的输入法录入文本。8.将插入点光标移至段落的段首。按“Ctrl+Alt+I”快捷键，打开“选择图像源文件”对话框。在“选择图像源文件”对话框中选择一个图像文件D盘“素材”文件夹的子文件夹“session2”中的his_prize.gif，9.单击图像将其选中，在图像属性面板中，单击选中“对齐”下拉列表中的“右对齐”按钮，设置图像与同一行文本之间的对齐方式，再单击“左对齐”按钮来设置图像所在文本段落相对页面的水平对齐方式。10.将插入点光标移到段落首行的前端。单击“插入”工具栏中“文本”选项卡中的“字符”按钮，在弹出的下拉菜单中选择“不换行空格”按钮四次，因为每插入“不换行空格”只是首行缩进半个字符，11.输入“企业文化”，用鼠标选中，在属性面板中设置按“居中对齐”按钮设置“居中对齐”格式，按“加粗”按钮设置“加粗”格式。用鼠标单击下一行的行首，将插入点移至下一行，这里如果用回车键实现换行就会将本行的格式设置遗传到下一行。分行录入以下文本，用鼠标手动拖动选中这些文本，单击属性面板中的“项目列表”按钮设置列表格式12.按上述方法输入标题“优势与策略”并设置格式，再将插入点移至新行的行首，以上文本内容分六个段落输入。选中刚录入的六段文本，单击属性面板上的“项目列表”按钮，设置整体列表格式。