Dreamweaver网页设计任务5完成首页内容区制作2

1、Dreamweaver网页设计项目教程机械工业出版社任务5完成首页内容区制作2（建议2学时）任务实施任务实施双击添加标题文字Index_top制作 #index_top在#main的上部，包括左侧的“flash”及登录区；右侧的新闻列表区。其结构如图所示 ：任务实施双击添加标题文字Index_top制作 （1）创建#index_top内的布局 1）插入#pic。插入Div标签，插入位置在#index_top结束标签前，名称为“#pic”，如图所示: 任务实施双击添加标题文字Index_top制作 2）插入#hot_news。插入Div标签，插入位置在#index_top结束标签前，名称为“#h

2、ot_news”，如图所示:任务实施双击添加标题文字Index_top制作 3）插入#login。插入Div标签，插入位置在#pic结束标签前，名称为“#login”，如图所示:任务实施双击添加标题文字Index_top制作 4）插入#news_top。插入Div标签，插入位置在#hot_news结束标签前，名称为“#news_top”，如图所示: 任务实施双击添加标题文字Index_top制作 5）插入#news_list。插入Div标签，插入位置在#hot_news结束标签前，名称为“#news_list”，如图所示:任务实施双击添加标题文字Index_top制作 （2）设置#index_

3、top内div的CSS样式 1）设置#pic的CSS样式。 创建#pic的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。 在方框样式中，设置它的宽度为269px，左浮动 任务实施双击添加标题文字Index_top制作 2）设置#hot_news的CSS样式。 创建#hot_news的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。任务实施双击添加标题文字Index_top制作 在背景样式中，设置它的背景图片为h

4、ot_bg.gif（在默认的网站图片文件 夹images中），背景图片不重复 在方框样式中，设置它的宽度为358px、高度为255px，右浮动任务实施双击添加标题文字Index_top制作 3）设置#login的CSS样式。 创建#login的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮 在方框样式中，设置它的上边距为6px 任务实施双击添加标题文字Index_top制作 4）设置#news_top的CSS样式。 创建#news_top的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹

5、出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。 在方框样式中，设置它的下填充为8px 在边框样式中，设置它的下边框线样式（border-bottom）为点状线（dotted），线粗细1px，边框线颜色为#ccc 任务实施双击添加标题文字Index_top制作 5）设置#news_list的CSS样式。 创建#news_list的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。 在方框样式中，设置它的上填充为6px， 任务实施双击添加标题文字Index_top制作 上述操作在

6、layout.css文档中的代码为：#pic float:left; width:269px;#login margin-top:6px;#hot_news Zfloat:right; width:358px; height:225px; padding:15px; background:url(./images/hot_bg.gif) 0 0 no-repeat;#news_top border-bottom:1px dotted #ccc; padding-bottom:8px;#news_list padding-top:6px;任务实施双击添加标题文字Index_top制作 （3）为#

7、index_top添加内容 1）在#pic中内容的添加。 光标定位在#pic中，选择“插入”“媒体”“SWF”，在弹出的“选择SWF”对话框中找到“indexpic.swf”，单击“确定”按钮。 对于“对象标签辅助功能属性”选择“取消”即可，在index.html代码中的#pic下出现一段JS代码，即插入SFW文档的代码。 插入“登录”图片。光标定位在#login中，选择“插入”“图像”，在“选择图像源文件”对话框中找到“btn_login.gif”，单击“确定”按钮。 重复步骤，插入图片“btm_login1.gif”，也可直接在代码窗口复制并修改代码 。 login添加图片任务实施双击添加

8、标题文字Index_top制作 2）在hot_news中内容的添加。 光标定位在#hot_news中，输入文字如图所示: 光标定位在#news_top中，输入文字如图所示。任务实施双击添加标题文字Index_top制作 光标定位在#news_list中，选择“插入”“文本”“项目列表”，输入文字如图所示。任务实施双击添加标题文字Index_top制作 选中列表文字，在下面属性栏中为列表文字添加链接，如图所示。 index.html中生成的代码如图所示: 复制并修改代码，完成#news_list中的项目列表，如图所示:任务实施双击添加标题文字Index_top制作 （4）CSS样式美化 1）标题

9、美化CSS样式。 创建#mews_top hi CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图设置，设置完成后单击“确定”按钮。 在类型样式中，设置它的字体（font-family）为雅黑（yahei），字号（font-size）为16px，行高2.2倍，颜色（color）为#444 任务实施双击添加标题文字Index_top制作 创建#news_top P CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮 在类型样式中，设置它的颜色（color）为#

10、999 任务实施双击添加标题文字Index_top制作 应用CSS样式。返回index.html的设计窗口，选中#hot_news中的标题文字，选择“插入”“文本”“h2”，如图所示: 也可以用手输入代码的方法添加标题样式。方法如下:返回index.html的代码窗口，光标定位在#hot_news中的标题文字处，用手输入代码“h”（注意：代码为英文半角小写），此时系统给出提示，选中“h2”并按回车，或直接用手输入“”，如图所示: 在标题文字结尾，用手输入“/”，系统自动给出结束符“”， 任务实施双击添加标题文字Index_top制作 2）项目列表美化CSS样式 创建“# news_list u

11、l li”CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮 任务实施双击添加标题文字Index_top制作 在类型样式中，设置它的行高为1.9。 在背景样式中，设置它的背景图片（backgroud-iamges）为“icon.gif”，设置背景不重复，设置背景位移x方向为0，y方向为300px 。 在方框样式中，设置它的左填充（padding-left）为20px layout.css代码窗口显示如下 任务实施双击添加标题文字Index_top制作 创建“# news_list ul li span”CS

12、S样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮 任务实施双击添加标题文字Index_top制作 在类型样式中，设置它的颜色（color）为#579f11 在方框样式中，设置它的浮动（float）为右浮动（right） 返回index.html代码窗口，为#news_list列表项添加日期 复制代码，为各列表项添加日期,最终效果如图所示: 任务实施双击添加标题文字#Index_pic制作 （1）添加产品图片 1）光标定位在#pic中，选择“插入”“常用”“图像”，在弹出的“选择图像源文件”对话框中找到“./i

13、mages/1.jpg”，单击“确定”按钮 。 2）在“图像标签辅助功能属性”对话框中，替换文本为“产品说明”，此项功能在网页浏览过程中可以帮助阅读显示内容。 3）为图片添加链接。选中图片，在下方的属性面板中添加空链接。 4）选中图片，为其插入“项目列表” 。 5）光标定位在图片后，按键，为其添加一个换行，输入图片的说明文字为“iphone 4” 。 6）重复步骤1）至5），为#index_pic插入其他图片。更简单的方法是通过复制代码，修改相应的参数来完成其他图片的插入。任务实施双击添加标题文字#Index_pic制作 （2）创建#index_pic的内部CSS样式 1）设置#index_p

14、ic标题CSS样式。 创建#index_pic h2 CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。任务实施双击添加标题文字#Index_pic制作 在背景样式中，设置它的背景图片（back-ground）为“box_tit_bg.gif” 。 在方框样式中，设置它的高度（height）为28px。 在边框样式中，设置它的边框线样式（style）为实线（solid），线粗细（width）为1px，颜色为#dbdbdb。 在空位样式中，设置它的超出部分隐藏 。 创建#index_pic h2 spanC

15、SS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。 任务实施双击添加标题文字#Index_pic制作 在背景的样式中，设置它的背景图片（back-ground）为“rmcp.gif”及不重复，图片X的偏移量为12px，图片Y的编移量为6px 。 在区块样式中，设置它的显示（Display）为区块（block）。 在方框样式中，设置它的高度（height）为25px 。 任务实施双击添加标题文字#Index_pic制作 2）设置#index_pic列表CSS样式。设置#index_pic列表CSS样式的操作方法与上面的操作类似，这里直接用手写代码的方法完成CSS样式设置。 返回到layout.css，输入状态为英文半角，输入“#index_pic ul”+“空格”，系统出现提示，