02制作首页教学课件 高教版 中职 网页设计与制作(Dreamweaver CS5) .ppt
《02制作首页教学课件 高教版 中职 网页设计与制作(Dreamweaver CS5) .ppt》由会员分享,可在线阅读,更多相关《02制作首页教学课件 高教版 中职 网页设计与制作(Dreamweaver CS5) .ppt(34页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、02制作首页教学课件 高教版 中职 网页设计与制作(Dreamweaver CS5)制作个人网站的首页静态网站制作教学资源课件静态网站制作教学资源课件7.4.2 制作首页1.新建一个HTML文件,保存到codes文件夹下,文件名为:index.htm,修改标题为:中国梦教育梦。2.在CSS面板中,单击“新建CSS规则”按钮,在弹出的对话框中,选择器类型选择“标签(重新定义HTML元素)”,选择器名称填写“*”,规则定义选择“(新建样式表文件)”,将新建的样式表文件命名为main.css,并保存在“css”文件夹下。3.在弹出的“*的CSS规则定义(新建样式表文件)”对话框的“类型”选项卡中,字
2、体大小设置为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元素)”,选择器名称填写“bo
3、x”,规则定义选择“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面板中,单击“新建
4、CSS规则”按钮,在弹出的对话框中,选择器类型选择“标签(重新定义HTML标签),选择器名称选择“span”,规则定义选择“main.css”,在弹出的对话框中,左侧选项卡选择“方框”,浮动设置为“右对齐”。7.3.2 制作首页11.在CSS面板中,单击“新建CSS规则”按钮,在弹出的对话框中,选择器类型选择“ID(仅应用于一个HTML元素)”,选择器名称填写“showtime”,规则定义选择“main.css”,在弹出的对话框中,左侧选项卡选择“区块”,显示设置为“内嵌”。12.切换到“代码”视图,在标签之间添加代码如下:今天是:设为首页 加入收藏 7.3.2 制作首页13.返回“设计”视图
5、,将光标置于“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)按方向键右,将光标置于图片lo
6、go.jpg之后,选择菜单“插入”-“表单”-“表单”,将光标置于表单中,选择菜单“插入”-“表单”-“文本域”,ID填写“input1”,单击“确定”按钮,将光标置于input1之后,选择菜单“插入”-“表单”-“按钮”,ID填写“input2”,单击“确定”按钮,选中刚插入的按钮,在属性面板上,值填写“搜索”。(4)在CSS面板中,单击“新建CSS规则”按钮,在弹出的对话框中,选择器类型选择“复合内容(基于选择的内容)”,选择器名称填写“#top2 form”,规则定义选择“main.css”,左侧选项卡选择“方框”,浮动设置为“右对齐”,取消勾选边界的全部相同,上右下左对应的值分别为:5
7、5、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”,
8、左侧选项卡选择“类型”,字体大小为“12像素”,颜色为“#FFF”,左侧选项卡选择“背景”,背景颜色为“#C8000B”,左侧选项卡选择“方框”,设置宽为“50像素”,高为“20像素”。7.4.2 制作首页(7)在CSS面板中,单击“新建CSS规则”按钮,在弹出的对话框中,选择器类型选择“ID(仅应用于一个HTML元素)”,选择器名称填写“nav”,规则定义选择“main.css”,左侧选项卡选择“类型”,行高为“40像素”,左侧选项卡选择“背景”,背景颜色为“#C8000B”,左侧选项卡选择“区块”,文本对齐为“居中”,左侧选项卡选择“方框”,高为“40像素”,取消勾选边界的全部相同,设置下
9、为“5像素”,其它留空。(8)选择菜单“插入”-“布局对象”-“Div标签”,插入选择“在标签之后”“”,类选择“box”,ID选择“nav”。(9)在层nav中输入文字:首页、教育力量、教育心愿、教育成就、教育公平、教育展望、客户留言,并对其加上链接#。制作导航栏7.4.2 制作首页(10)在CSS面板中,单击“新建CSS规则”按钮,在弹出的对话框中,选择器类型选择“复合内容(基于选择的内容)”,选择器名称填写“#nav a:link”,规则定义选择“main.css”,左侧选项卡选择“类型”,字体大小为“14像素”,粗细为“粗体”,颜色为“#FFF”,左侧选项卡选择“区块”,文本对齐选择“
10、居中”,显示选择“块”,左侧选项卡选择“方框”,宽为“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
11、”,左侧选项卡选择“背景”,背景图像选择images文件夹下的bg1.gif图片,背景重复选择“不重复,左侧选项卡选择“区块”,文本对齐选择“居中”,显示选择“块”,左侧选项卡选择“方框”,宽为“110像素”,高为“40像素”,浮动选择“左对齐”,取消勾选边界的全部相同,上右下左设置为:0、10像素、0、10像素。7.4.2 制作首页(13)选择菜单“插入”-“布局对象”-“Div标签”,插入选择“在标签之后”“”,类选择“box”,ID填写“banner”。(14)将光标置于层banner中,选择菜单“插入”-“图像”,选择images文件夹下的图片banner.jpg。添加banner图片
12、7.4.2 制作首页三、制作首页中部制作当前位置版块(1)在CSS面板中,单击“新建CSS规则”按钮,在弹出的对话框中,选择器类型选择“ID(仅应用于一个HTML元素)”,选择器名称填写“navi”,规则定义选择“main.css”,左侧选项卡选择“区块”,文本对齐选择“左对齐”,左侧选项卡选择“方框”,取消勾选边界的全部相同,设置上为“5像素”,左侧选项卡选择“边框”,取消勾选全部相同,设置下的样式选择“虚线”,宽度为“1像素”,颜色为“#CCC”。(2)选择菜单“插入”-“布局对象”-“Div标签”,插入选择“在标签之后”“”,类选择“box”,ID选择“navi”。(3)将光标置于层na
13、vi中,输入文字:当前位置 首页。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.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 02制作首页教学课件 高教版 中职 网页设计与制作Dreamweaver CS5 02 制作 首页 教学 课件 高教 网页 设计 Dreamweaver CS5
限制150内