02制作首页教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

02制作首页教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）制作个人网站的首页静态网站制作教学资源课件静态网站制作教学资源课件7.4.2 制作首页1.新建一个HTML文件，保存到codes文件夹下，文件名为：index.htm，修改标题为：中国梦教育梦。2.在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML元素）”，选择器名称填写“*”，规则定义选择“（新建样式表文件）”，将新建的样式表文件命名为main.css，并保存在“css”文件夹下。3.在弹出的“*的CSS规则定义（新建样式表文件）”对话框的“类型”选项卡中，字体大小设置为12像素，颜色设置为#333333，在“方框”选项卡中，设置“上”填充和“上”边界都为“0px”。一、制作页面顶部7.3.2 制作首页4.在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“top1”，规则定义选择“main.css”，具体样式规则设置如图所示。7.3.2 制作首页5.选择“插入”-“布局对象”-“Div标签”，插入选择“在插入点”，ID选择“top1”。6.在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“类（可应用于任何HTML元素）”，选择器名称填写“box”，规则定义选择“main.css”，具体样式规则设置如图所示。7.3.2 制作首页7.将光标置于“top1”层中，插入选择“在插入点”，类选择“box”。8.在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称选择“a:link”，规则定义选择“main.css”，文本修饰选择“无”，颜色为“#666”。9.重复上述步骤，分别添加样式：a:visited，a:hover，a:active，其中，a:hover的颜色为“#C8000B”，a:visited和a:active的样式同a:link。10.在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML标签），选择器名称选择“span”，规则定义选择“main.css”，在弹出的对话框中，左侧选项卡选择“方框”，浮动设置为“右对齐”。7.3.2 制作首页11.在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“showtime”，规则定义选择“main.css”，在弹出的对话框中，左侧选项卡选择“区块”，显示设置为“内嵌”。12.切换到“代码”视图，在标签之间添加代码如下：今天是：设为首页 加入收藏 7.3.2 制作首页13.返回“设计”视图，将光标置于“box”层中，选择菜单“插入”-“HTML”-“脚本对象”-“脚本”，在内容处输入所需要的脚本“setInterval(showtime.innerHTML=new Date().toLocaleString(),1000)”，如图所示。7.4.2 制作首页(1)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID输入“top2”，如图所示，单击“确定”按钮。二、制作页面头部7.4.2 制作首页(2)将光标置于层top2中，选择菜单“插入”-“图像”，选择images文件夹中的logo.jpg文件。(3)按方向键右，将光标置于图片logo.jpg之后，选择菜单“插入”-“表单”-“表单”，将光标置于表单中，选择菜单“插入”-“表单”-“文本域”，ID填写“input1”，单击“确定”按钮，将光标置于input1之后，选择菜单“插入”-“表单”-“按钮”，ID填写“input2”，单击“确定”按钮，选中刚插入的按钮，在属性面板上，值填写“搜索”。(4)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#top2 form”，规则定义选择“main.css”，左侧选项卡选择“方框”，浮动设置为“右对齐”，取消勾选边界的全部相同，上右下左对应的值分别为：55、0、5、0。制作logo和站内搜索表单7.4.2 制作首页(5)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“input1”，规则定义选择“main.css”，左侧选项卡选择“方框”，宽为“150像素”，高为“18像素”，左侧选项卡选择“边框”，样式勾选中“全部相同”，样式选择“实线”，宽度为“1像素”，颜色为“#CCC”。(6)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“input2”，规则定义选择“main.css”，左侧选项卡选择“类型”，字体大小为“12像素”，颜色为“#FFF”，左侧选项卡选择“背景”，背景颜色为“#C8000B”，左侧选项卡选择“方框”，设置宽为“50像素”，高为“20像素”。7.4.2 制作首页(7)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“nav”，规则定义选择“main.css”，左侧选项卡选择“类型”，行高为“40像素”，左侧选项卡选择“背景”，背景颜色为“#C8000B”，左侧选项卡选择“区块”，文本对齐为“居中”，左侧选项卡选择“方框”，高为“40像素”，取消勾选边界的全部相同，设置下为“5像素”，其它留空。(8)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID选择“nav”。(9)在层nav中输入文字：首页、教育力量、教育心愿、教育成就、教育公平、教育展望、客户留言，并对其加上链接#。制作导航栏7.4.2 制作首页(10)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#nav a:link”，规则定义选择“main.css”，左侧选项卡选择“类型”，字体大小为“14像素”，粗细为“粗体”，颜色为“#FFF”，左侧选项卡选择“区块”，文本对齐选择“居中”，显示选择“块”，左侧选项卡选择“方框”，宽为“110像素”，高为“40像素”，浮动选择“左对齐”，取消勾选边界的全部相同，上右下左设置为：0、10像素、0、10像素。(11)重复上述步骤，分别新建#nav a:visited和#nav a:active，css规则同#nav a:link的。7.4.2 制作首页(12)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#nav a:hover”，规则定义选择“main.css”，左侧选项卡选择“类型”，字体大小为“14像素”，粗细为“粗体”，颜色为“#C8000B”，左侧选项卡选择“背景”，背景图像选择images文件夹下的bg1.gif图片，背景重复选择“不重复，左侧选项卡选择“区块”，文本对齐选择“居中”，显示选择“块”，左侧选项卡选择“方框”，宽为“110像素”，高为“40像素”，浮动选择“左对齐”，取消勾选边界的全部相同，上右下左设置为：0、10像素、0、10像素。7.4.2 制作首页(13)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID填写“banner”。(14)将光标置于层banner中，选择菜单“插入”-“图像”，选择images文件夹下的图片banner.jpg。添加banner图片7.4.2 制作首页三、制作首页中部制作当前位置版块(1)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“navi”，规则定义选择“main.css”，左侧选项卡选择“区块”，文本对齐选择“左对齐”，左侧选项卡选择“方框”，取消勾选边界的全部相同，设置上为“5像素”，左侧选项卡选择“边框”，取消勾选全部相同，设置下的样式选择“虚线”，宽度为“1像素”，颜色为“#CCC”。(2)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID选择“navi”。(3)将光标置于层navi中，输入文字：当前位置 首页。7.4.2 制作首页(4)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID填写“index”。(5)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“index”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置填充为“0像素”，上边界为“5像素”。(6)将光标置于层index中，选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在插入点”，ID填写“index_1_1”。制作焦点图、教育力量、最新公告版块7.4.2 制作首页(7)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“index_1_1”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“400像素”，浮动选择“左对齐”，边界、填充均为0。(8)将光标置于层index_1_1中，选择菜单“插入”-“媒体”-“SWF”，选择文件夹images下的index.swf文件。(9)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，ID填写“index_1_2”。7.4.2 制作首页(10)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“index_1_2”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“400像素”，浮动选择“左对齐”，边界上下为0，左右为“7像素”，填充均为0。(11)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML元素）”，选择器名称选择“h2”，规则定义选择“main.css”，左侧选项卡选择“类型”，设置字体大小为“14像素”，粗细为“粗体”，行高为“20像素”，颜色为“#FFF”，左侧选项卡选择“背景”，背景图像选择文件夹images下的bg2.jpg，背景重复选择“不重复”，左侧选项卡选择“方框”，设置高为“20像素”，左填充为“12像素”，边界为“5像素”，左侧选项卡选择“边框”，取消勾选“全部相同”，边框下样式选择“实线”，宽度为“2像素”，颜色为“#C8000B”。(12)选择菜单“插入”-“HTML”-“文本对象”-“标题2”，并输入文字“教育力量”。7.4.2 制作首页(13)切换到代码视图，在标签前插入代码“更多”，切换回设计视图，为“更多”添加空链接。(14)任务栏选择“”，按方向键右，输入文字“梦开始的地方2013-11-01”，选择菜单“插入”-“HTML”-“文本对象”-“项目列表”，为“梦开始的地方”添加空链接，选中“2013-11-01”，选择菜单“插入”-“标签”，在打开的“标签选择器”对话框中，左侧选择“HTML标签”，右侧选择“span”，单击“插入”按钮。(15)按回车后输入“职业教育绘精彩人生2013-11-01”、“高薪高效高就业2013-11-01”、“青春飞扬，梦想起航2013-11-01”、“袁贵仁：我的中国教育梦2013-11-01”、“2011计划让创新要素活起来2013-11-01”、“教育是百年梦想的基础2013-11-01”、“习近平：实现中国梦必须走中国道路2013-11-01”。重复上面的步骤，分别给文章标题添加空链接，将日期添加“span”标签。7.4.2 制作首页(16)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML元素）”，选择器名称选择“ul”，规则定义选择“main.css”，左侧选项卡选择“类型”，行高为“32像素”，左侧选项卡选择“方框”，设置左填充为“10像素”，左侧选项卡选择“列表”，设置列表样式为“无”。(17)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML元素）”，选择器名称选择“li”，规则定义选择“main.css”，左侧选项卡选择“边框”，设置下边框样式为“虚线”，宽度为“1像素”，颜色为“#CCC”。(18)“教育力量”版块制作效果如图所示。7.4.2 制作首页7.4.2 制作首页(19)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，ID填写“index_1_3”。(20)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“index_1_2”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“186像素”，浮动选择“左对齐”，边界、填充均为0。(21)选择菜单“插入”-“HTML”-“文本对象”-“标题2”，并输入文字“最新公告”。(22)任务栏选择“”，按方向键右，输入文字“教育助力中国梦”。(23)单击任务栏上的“”，按方向键右键，输入文字“教育助力中国梦”，选择菜单“插入”-“HTML”-“文本对象”-“项目列表”，为“教育助力中国梦”添加空链接。7.4.2 制作首页(24)按回车后继续输入“百名书记畅谈中国梦”，“中国梦我的梦”，“袁贵仁：我的中国教育梦”，完成“最新公告”版块文章标题列表的输入。(25)单击任务栏的“”，按方向键右键，在文章标题列表的后面插入图片文件夹images下的index_1_3.jpg。(26)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#index_1_3 img”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置边界上为“20像素”，左为“15像素”。(27)“最新公告”版块制作效果如图所示。7.4.2 制作首页7.4.2 制作首页(28)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID填写“ad”。(29)选择菜单“插入”-“图像”，选择文件夹images下的banner2.jpg。制作页中广告条7.4.2 制作首页(30)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，ID填写“index_2_1”。(31)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“index_2_1”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“350像素”，浮动选择“左对齐”，边界、填充均为0。(32)选择菜单“插入”-“HTML”-“文本对象”-“标题2”，并输入文字“教育成就”,切换到代码视图，在标签前插入代码“更多”，切换回设计视图，为“更多”添加空链接。(33)任务栏选择“”，按方向键右，选择菜单“插入”-“图像”，选择文件夹images下的index_2_1.jpg。制作教育成就、教育展望、百年教育版块7.4.2 制作首页(34)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#index_2_1 img”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置边界上为“4像素”，左为“15像素”。(35)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#index_2_1 p”，规则定义选择“main.css”，左侧选项卡选择“类型”，行高为“20像素”，颜色为“#888888”，左侧选项卡选择“区块”，文本对齐选择“左对齐”，文字缩进为“2字体高”，左侧选项卡选择“方框”，宽为“320像素”，取消勾选边界的全部相同，设置上为“10像素”，左为“18像素”。7.4.2 制作首页(36)选中刚插入的图片，按方向键右键，按组合件shift+回车，输入文字“教育部部长袁贵仁用四个词表明自己心中的中国教育梦：有教无类、因材施教、终身学习、人人成才。他说：我们教育的孩子应成为一个堂堂正正的中国人，成为能够适应21世纪世界发展潮流需要的有用人才。”，进入代码视图，选中刚输入的文字，选择菜单“插入”-“HTML”-“文本对象”-“段落”，返回设计视图。(37)重复步骤30-36，制作模块“教育展望”，图片使用文件夹images下的index_2_2.jpg，输入文字为“去年11月29日，中共中央总书记习近平带领新一届中央领导集体参观中国国家博物馆复兴之路展览时，把实现伟大复兴就是中华民族近代以来最伟大梦想定义为中国梦。”，如图所示。7.4.2 制作首页7.4.2 制作首页(41)任务栏选择“”，按方向键右，输入文字“教育助力中国梦”。(42)单击任务栏上的“”，按方向键右键，输入文字“教育助力中国梦”，选择菜单“插入”-“HTML”-“文本对象”-“项目列表”，为“教育助力中国梦”添加空链接。(43)按回车后继续输入“百名书记畅谈中国梦”，“坚持诚信公平 拥抱基础教育的春天”，“中国梦我的梦”，“袁贵仁：我的中国教育梦”，完成“百年教育”版块文章标题列表的输入。(44)单击任务栏的“”，按方向键右键，在文章标题列表的后面插入图片文件夹images下的index_2_3.jpg。(45)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合内容（基于选择的内容）”，选择器名称填写“#index_2_3 img”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置边界上为“20像素”，左为“15像素”。(46)“百年教育”版块制作效果如图所示。7.4.2 制作首页7.4.2 制作首页四、制作首页底部(1)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID填写“bottom”。(2)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“bottom”，规则定义选择“main.css”，左侧选项卡选择“类型”，设置行高为“30像素”，颜色为“#999999”，左侧选项卡选择“区块”，文本对齐选择“居中”，左侧选项卡选择“边框”，取消勾选边框全部相同，设置上样式为“实线”，宽度为“2像素”，颜色为“#C8000B”。(3)将光标置于层bottom中，输入文字“版权所有 Copyright 2014 中国梦”，按组合键“shift+回车”，输入文字“Email:”，按组合键“shift+回车”，输入文字“站长统计 冀 ICP备05029101号”。