21创建范例网站简介页面2教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

《21创建范例网站简介页面2教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《21创建范例网站简介页面2教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、21创建范例网站简介页面2教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）创建范例网站简介页面2静态网站制作教学资源课件静态网站制作教学资源课件，下面我们制作页面的中部，栏目内导航栏和文章正文部分制作空白行制作空白行将插入点光标移到页面布局表格的第四行中，在单元格属性面板的“HTML”功能区，设置单元格高度为：10像素。，制作中部布局表格制作中部布局表格将插入点光标移到页面布局表格的第五行中，插入1行2列的页面中部布局表格，表格宽度：100%，“边框粗细”、“单元格边距”、“单元格间距”都设置为0px。在左侧单元中单击，并在属性面板中进行如下设置，如图2.100所示。制

2、作栏目内导航栏制作栏目内导航栏1、在左侧单元格中插入一个一行一列的表格，做二级导航的布局表格，宽度：200像素。2、在刚插入的二级导航的布局表格中，创建单元格的样式“.left_td”，并应用。文字颜色：#0c73d2，背景颜色：#eff7ff，垂直对齐：顶部，文字对齐：居中，高度：430像素，边框样式：实线，边框宽度：1像素，颜色：#B8FCFC。制作栏目内导航栏制作栏目内导航栏3、将插入点光标移至二级导航的布局表格，选择如图2.101所示“插入”工具栏“文本”选项卡中的“h2”按钮，插入标签“标题二”，并输入：学校概况，创建标题二样式“.left_td h2”，并应用。字大小：16像素，行

3、高：50像素，加粗，下边框样式：实线，下边框宽度：1像素，颜色：#B8FCFC。4、按回车键，在“学校概况”的下面插入一个五行一列，宽度90%的表格，居中对齐。制作栏目内导航栏制作栏目内导航栏5、输入：学校简介、荣誉展厅、职能部门、校园景观、消防安全，创建单元格样式“.ejdh_td”，并对每个单元格应用。文字大小：12像素，行高：30像素，文字颜色：#0c73d2，文字对齐：居中，下边框样式：点划线，下边框宽度：1像素，颜色：#1070d6。制作文章正文部分制作文章正文部分1、在页面中部布局表格的右侧单元格中再插入一个一行一列的表格，做文章正文的布局表格，宽度：100%。2、将光标移至刚插入

4、的表格中，创建单元格样式“.right_td”并应用。边框样式：实线，边框宽度：1像素，颜色：#B8FCFC。3、输入：石家庄市第二职业中专学校简介石家庄市第二职业中专学校简介，选中文字，在“插入”工具栏的“文本”选项卡中将文章标题设置为“标题一标题一”。制作文章正文部分制作文章正文部分4、保持标题的选中状态，在CSS属性面板的“目标规则”中选择“内联样式内联样式”，如图2.103所示，即对HTML标签直接设置样式，大小：28像素，字体：黑体，行高：50像素，加粗，宽度：700像素，高度50像素，文字对齐：居中对齐，设计效果如图2.104所示。制作文章正文部分制作文章正文部分5、插入图像“sjz2zz_pic.jpg”。6、输入以下四段文字。并创建样式规则“.right_td p”，文字大小：14像素，行高：28像素，文字对齐：左对齐，文字缩进：2em(2个文字)，上边距：20像素，左边距：12像素，如图2.105所示。