项目2我的校园生活网站制作ppt课件.ppt
《项目2我的校园生活网站制作ppt课件.ppt》由会员分享,可在线阅读,更多相关《项目2我的校园生活网站制作ppt课件.ppt(98页珍藏版)》请在三一办公上搜索。
1、项目2 我的校园生活网站制作,本项目内容提要:本项目结合“我的校园生活”的规划设计与制作过程,讲述了HTML语言的基本组成与特点、文本格式标记、版面控制标记、图像标记、超链接标记、表格标记、表单标记、多媒体及其他常用标记等知识与应用。本项目能力目标:1 具备表格结构网站规划设计的基本能力。2 掌握HTML语言文本格式、版面控制、图像、超链接、表格、表单、多媒体等常用标记的基本格式与使用方法,能够应用HTML语言常用标记制作简单网页。本项目知识目标:1 掌握HTML语言组成与特点等基本知识。2 掌握HTML语言文本格式标记、版面控制标记、图像标记、超链接标记、表格标记、表单标记、多媒体及其他常用
2、标记等相关知识。,2.1 我的校园生活网站制作过程,任务2-1 设计规划我的校园生活网站,【子任务2-1-1】设计规划我的校园生活网站的布局结构本网站主要采用表格进行布局,这是大多数网站的布局方式。网站的主题栏目有校园新闻、文体活动、情感天地、就业交流、校园掠影、读书园地。网站主页规划的结构如图2-1所示。设计网页尽寸。选择1024768规格,实际尺寸为:1000*。,任务2-1 设计规划我的校园生活网站,图2-1 我的校园生活网站规划布局图,任务2-1 设计规划我的校园生活网站,【子任务2-1-2】收集我的校园生活网站所需要的素材收集的素材包括:1.图片:校园标志图片、校园生活精品图片、文本
3、站标等。2.音乐:代表校园文化的音乐。3.文章:体现校园生活的新闻、情感、就业、摄影、读书、文体活动等资料。【子任务2-1-3】确定“我的校园生活网站”色彩风格网站色彩风格选择清新淡雅色,如灰色、蓝色、绿色,适当渗入红色,体现校园的青春激情。,任务2-2 创建我的校园生活网站站点,【子任务2-2-1】设置本地站点文件夹操作步骤如下:(1)在桌面双击“我的电脑”图标;(2)在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器(例如为E盘);(3)使用【文件】新建文件夹命令,在硬盘中建立一个新文件夹。(4)在新文件夹上单击右键,选择“重命名”选项,在英文输入法状态下输入站点名称。例如输入“Scho
4、ol”,然后在空白处单击确定,如图2-2所示。,任务2-2 创建我的校园生活网站站点,图2-2 建立并重命名站点文件夹,本项目所用站点文件夹,任务2-2 创建我的校园生活网站站点,【子任务2-2-2】建立站点子文件夹这里我们需要建立2个子文件夹:图片文件夹images、子网页文件夹web。操作步骤如下:(1)在桌面双击“我的电脑”图标;(2)在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器(例如为E盘);(3)双击打开站点文件夹“School”(4)使用【文件】新建文件夹命令,在站点文件夹“School”中建立一个新文件夹。(5)在新文件上单击右键,选择“重命名”选项,在英文输入法状态下输
5、入子文件夹名称“images”,然后在空白处单击确定。(6)同样方法建立子文件夹“web”。,任务2-3 建立包含网页主体标记的主页文件,网页主体标记为标记。建立主页文件index.html操作步骤如下:(1)启动记事本或其它文本编辑工具。(2)输入如下代码:我的校园生活(3)保存文件Index.html 到站点文件夹E:/School中,任务2-4 应用Dreamweaver表格标记进行网站布局,【子任务2-4-1】根据网站主页布局规划图,设计网站主页表格结构设计网站主页表格结构,如图2-3所示:,图2-3 我的校园生活主页表格结构,任务2-4 应用Dreamweaver表格标记进行网站布局
6、,【子任务2-4-2】应用表格标记实现主页布局表格标记主要有:完成布局的操作步骤如下:(1)应用记事本打开index.html。(2)在主体标记和之间输入如下代码:第1行开始 第5行结束(3)保存文件Index.html。(4)运行Index.html,效果如图2-4所示。(操作演示),任务2-4 应用Dreamweaver表格标记进行网站布局,图2-4 应用表格布局的index.html文件运行效果图,任务2-5 应用文本格式标记编辑文本,文本格式标记为【子任务2-5-1】编辑导航区文本在第2行内嵌表格的第2列单元格标记与之间,编辑输入导航文字内容:首页校园新闻文体活动情感天地就业交流校园掠
7、影读书园地设置文字格式:字体为宋体,字号为5,颜色为红色(#ff0000),并设该单元格align属性为center,实现代码如下:首页校园掠影运行修改后的index.html文件,局部效果如图2-5所示。(操作演示),图2-5 导航区文本编辑后运行效果,任务2-5 应用文本格式标记编辑文本,【子任务2-5-2】编辑主体区文本操作步骤如下:(1)在主体表格的第3行第1列单元格标记与 之间内嵌一个3行2列表格,并对第1行,第3行并行单元格合并,代码如下:内嵌表格第1行开始(2)在内嵌表格的第1行的与之间输入“欢迎光临我的校园生活网”并设居中、黑体、4号字、蓝色,代码如下:欢迎光临我的校园生活网,
8、任务2-5 应用文本格式标记编辑文本,(3)在内嵌表格的第2行第1列的与之间,输入网站栏目“校园新闻”、“文体活动”介绍文本,并加项目编号,设为宋体、2号字,栏目名称加粗。代码如下:在第一时间向您报道,校园里所发生的有趣事、感人事、奇异事。:记录校园体育赛事活动、文化交流活动、文娱赛事活动。,任务2-5 应用文本格式标记编辑文本,(4)在内嵌表格的第3行的与之间,输入网站栏目“”、“”、“”、“”介绍文本,并加项目编号,设为宋体、2号字,栏目名称加粗。代码如下:读书园地:这里有古典文学作品品评,这里有现代文学作品欣赏,这里有校园文学精品介绍,这里有网络文学作品推荐,请驻足读书园地。校园掠影:教
9、室、长廊、花园、宿舍、食堂、图书馆、运动场,都留下了我们青春的足迹,校园掠影将为您保留大学校园的美好回忆。情感天地:同学间的情感互助,师生间的真挚友谊,名人爱情故事。情感天地与您分享。就业交流:介绍相关就业政策,帮您提高面试技巧,提高您的自主创业能力。请关注就业交流。,任务2-5 应用文本格式标记编辑文本,主体区文本编辑结束后,局部运行效果如图2-6所示(操作演示),图2-6 主体区文本编辑结束后局部运行效果图,任务2-5 应用文本格式标记编辑文本,【子任务2-5-3】编辑版权区文本操作步骤如下:(1)在主体表格的第5行单元格标记与 之间,输入版权信息文本“Copyright20102016
10、版权所有:我的校园生活创意工作室 地址;辽宁省 辽阳市八一街11号 邮编:111000”,并设置文本居中,文本颜色为蓝色,其它参数默认。代码如下:Copyright20102016 版权所有:我的校园生活创意工作室 地址;辽宁省 辽阳市八一街11号 邮编:111000版权区文本编辑结束后,运行的局部效果如图2-7所示:,图2-7 版权区文本编辑结束后运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-1】在标题区插入站标图像站标图像文件为zb1.gif,在站点文件夹的images文件夹下。在主表格第1行第1列的单元格标记与之间插入图像标记,宽度:1000,高度:120。具体代码如下:
11、插入站标图像后运行效果如图2-8所示。,图2-8 在标题区插入站标图像的运行效果,任务2-6 应用图像标记插入图像,【子任务2-6-2】在导航区插入站标文字图像在第2行的内嵌表格的第1列的单元格标记与之间,插入图像标记,宽度:138,高度:45。具体代码如下:在导航区插入站标文字图像后运行效果如图2-9所示。,图2-9在导航区插入站标文字图像后运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-3】在主体文本区插入文字图像在主体区的内嵌表格的第2行第2列单元格标记与之间,插入图像标记,宽度:180,高度:55。具体代码如下:在主体文本区插入文字图像后的运行效果如图2-10所示。,任务
12、2-6 应用图像标记插入图像,图2-10 在主体文本区插入文字图像后的运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-4】在主体图像区插入校园生活精品图片操作步骤如下:(1)在主表格的第4行第1列的单元格标记与之间插入表格标记,表格为2行4列,并将第1行的4个单元格合并。代码如下:内嵌表格第1行,任务2-6 应用图像标记插入图像,(2)在内嵌表格第1行的单元格标记与之间输入文本“校园生活精品图片”,并设置居中、黑体、5号字、蓝色。代码如下:校园生活精品图片(3)在内嵌表格第2行的各单元格标记与之间输入图像标记,并设置图像大小,宽度:168,高度:100,代码如下:在主体图像区插入
13、校园生活精品图片后的运行效果如图2-11所示。,任务2-6 应用图像标记插入图像,图2-11 在主体图像区插入校园生活精品图片后的运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-5】设置单元格背景图像分别设置导航区、主体区标题等背景。(1)设置导航区所在单元格的背景images/bj2.gif,具体代码如下:首页 校园新闻 文体活动 读书园地 校园掠影 情感天地 就业交流(2)设置主体区标题单元格背景images/bj.gif,具体代码如下:欢迎光临我的校园生活网校园生活精品图片背景图像设置后运行效果如图2-12所示。注意:这里我们适当调整了主体区文本的行间距,使文本更紧凑。,任
14、务2-6 应用图像标记插入图像,图2-12 背景图像设置后运行效果图,任务2-7 应用表单标记制作表单,【子任务2-7-1】设计一名为userinfo的表单,放在主表格的第3行的第2列中,用以收集注册用户的:用户名、密码、性别、教育水平、电子信箱等信息,并将其提交给userlogin.asp页面处理。实现的HTML代码为:操作步骤如下:(1)在主表格的第3行第2列的单元格标记与之间,插入一个2行1列表格,代码如下:内嵌表格第1行 内嵌表格第2行(2)在内嵌表格第1行单元格标记中输入文本“用户注册”,黑体、黄色、4号字、居中。并设单元格背景色为#3366FF(天蓝色)代码如下:用户注册,任务2-
15、7 应用表单标记制作表单,(3)在内嵌表格第2行单元格标记中输入以下表单代码:用 户 名:密 码:性 别:男 女 教育水平:硕士以上 大学本科 大专 中专以下 电子信箱:,任务2-7 应用表单标记制作表单,表单运行结果如图2-13所示。,图2-13 表单运行结果图,任务2-8 应用多媒体标记插入多媒体对像,【子任务2-8-1】制作滚动字幕,用于滚动显示友情链接网站名称,要求垂直向上滚动。该滚动栏用一个2行1列,第1行用于显示“友情链接”,文本颜色为白色,背景颜色为#339999,表格边框宽度为1,边框颜色为#339999。第2行用作文本滚动区域,背景颜色为#eeffee,要滚动的文本是:中央电
16、视台、百度搜索、辽宁教育信息网,人人网,腾讯网。分析:该例实质是设计一个带链接的滚动文本,这可通过 标记符来实现。操作步骤如下:,任务2-8 应用多媒体标记插入多媒体对像,(1)在主表格的第4行第2列单元格标记之间,嵌入一个2行1列表格标记,表格宽度为192,表格边线宽度为1,内嵌表格第2行行距为18pt。实现的HTML代码为:内嵌表格第1行 内嵌表格第2行(2)在内嵌表格的第1行的单元格标记与之间,输入“友情链接”,并设字号为4,颜色为白色,居中对齐。代码如下:友情链接,任务2-8 应用多媒体标记插入多媒体对像,(3)在内嵌表格的第2行的单元格标记与之间输入滚动标记,向上滚动,行程150。其
17、它参数按任务要求执行。代码如下:中央电视台辽宁教育信息百 度 搜 索腾 讯 网人 人 网,任务2-8 应用多媒体标记插入多媒体对像,完成任务的完整代码如下:友情链接 中央电视台辽宁教育信息百 度 搜 索腾 讯 网人 人 网,任务2-8 应用多媒体标记插入多媒体对像,滚动字幕运行效果如图2-14所示。,图2-14滚动字幕运行效果图,任务2-9 制作子网页并应用链接标记建立导航链接,【子任务2-9-1】制作子网页操作步骤如下:(1)在子文件夹web中建立扩展子网页文件,分别为xyxw.html、wthd.html、dsyd.html、xylyhtml、qgtd.html、jyjl.html。(2)
18、在文件编辑软件中打开子网页文件,如dsyd.html。(3)应用所学标记,编辑相关HTML代码。读书园地1.这里有古典文学作品品评2.这里有现代文学作品欣赏3.这里有校园文学精品介绍4.这里有网络文学作品推荐具体制作过程这里不再详述。,任务2-9 制作子网页并应用链接标记建立导航链接,【子任务2-9-2】应用超级链接标记建立导航文本与各子网页的链接超级链接标记为文本或图像建立超级链接的操作步骤如下:(1)将“首页”作为超级链接的文本放在与 之间,并设url为index.html代码如下:首页(2)将“校园新闻”作为超级链接的文本放在与 之间,并设url为web/xyxw.html代码如下:校园
19、新闻(3)采用同样方法,设置“文体天地”、“读书园地”、“校园掠影”、“情感天地”、“就业”的超级链接。代码如下:文体活动读书园地校园掠影情感天地就业交流设置好超级链接后,运行主页,设有超级链接的文本将变蓝,并加上下划线,如图2-13所示。,任务2-9 制作子网页并应用链接标记建立导航链接,【子任务2-9-3】应用超级链接标记建立友情链接,在【子任务8-1】基础上实现对“中央电视台”等网站的访问。要求实现当用户鼠标移入滚动区域时,则停止滚动,移出时继续滚动,当用户单击滚动文本时,则链接到相应的网站。分析:标记支持stop()和start()方法,分别用于控制滚动的停止和开始。当鼠标移入滚动区域
20、时,将触发OnMouseOver事件,当移出时,又会触发OnMouseOut事件,因此,可通过两个事件来分别调用stop()方法和start()方法,从而实现滚动与停止的自动控制。,任务2-9 制作子网页并应用链接标记建立导航链接,这里只修改代码如下:中央电视台辽宁教育信息百 度 搜 索腾 讯 网人 人 网,任务2-9 制作子网页并应用链接标记建立导航链接,在滚动字幕字完成外部链接后,相应文本下将添加下划线,效果如图2-15所示。至此,我的校园生活网站创建完成。对代码进行适当优化,去除不必要的表格边线等。运行效果如图2-16所示:,图2-15 能够实现外部链接的滚动字幕,任务2-9 制作子网页
21、并应用链接标记建立导航链接,图2-16“我的校园生活”网站运行效果图,2.2 我的校园生活网站制作相关知识,知识点2-1 HTML网页的基本组成与特点,HTML是超文本标记语言(Hypertext Mark-up Language)的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言,而是一种描述性的标记语言。所有网页软件都是以HTML为基础,学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中,常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码,此时就必须对HTML标记相当熟悉才行。HTML文件是纯文本文件,能用任意的文本编辑器编辑,如:记事本、写字板、Wor
22、d、Dreamweaver、Frontpage等。,知识点2-1 HTML网页的基本组成与特点,1.用HTML制作网页的简单实例【实例2-1】制作李白诗望庐山瀑布制作过程:(1)用任何文本编辑器(如记事本、写字板、WORD等)输入下列文本(代码):李白诗望庐山瀑布望庐山瀑布李白日照香炉生紫烟遥望瀑布挂前川飞流直下三千尺疑是银河落九天(2)以纯文本格式存为2-1.htm文件(假设位置为:E:Item2)。(3)打开浏览器,在地址栏中输入E:Item22-1.htm,就会看到所制作的网页。如图2-17所示。,知识点2-1 HTML网页的基本组成与特点,图2-17 李白诗望庐山瀑布网页效果,知识点2
23、-1 HTML网页的基本组成与特点,启动Dreamweaver后,切换到代码浏览窗口,此时看到的HTML代码,即是网页的基本组成部分,其代码为:李白诗望庐山瀑布从中可见,一个最基本的网页一般由三个部分组成,分别是:(1)标记用于定义网页文件的开始,对应的结束标记为则定义网页的结束。(2)该组标记用于定义网页的头,用来说明文件的一些基本信息,如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。在这里,和标记定义网页的标题,该标题将显示在浏览器的标题栏中。标记有很多用法,这里是用于指定网页所使用的字符集,是可选项。(3)用于定义网页的正文开始,
24、用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间,bgcolor为标记的属性,用于指定网页的背景颜色,text也为标记的属性,用于指定网页正文的前景色。,知识点2-1 HTML网页的基本组成与特点,HTML文件是标准的文本文件,以纯文本形式存放,扩展名为*.htm或*.html。若系统为UNIX系统,则扩展名为*.html。HTML是由若干标记符和文本构成,标记符适用于组织网页的内容和控制输出格式,HTML具有以下几个特点:(1)HTML标记的一般格式HTML标记均是用括起来的,大多数标记是成对出现的,有开始标记和对应的结束标记,结束标记多一根斜杠。许多标记还有属性,用于对标记进行
25、详细设置。HTML标记的一般格式为:例如:但有的标记没有结束标记,称为单标记,如:(2)各属性项间用空格分隔,属性值可用双引号或单引号引起来,也可不引而直接表达。例如控制文本字体的标记为,该标记有face、size、color属性,分别用于控制字体名、字体大小和字体颜色,用法为:字体属性测试(3)HTML标记不区分大小写,与和是相同的。,知识点2-1 HTML网页的基本组成与特点,(4)HTML中一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。例如:2020年,我国将全面建成小康社会!和2020年,我国将全面建成小康社会!都是正确的,且显示效果相同,但HTML标记中的一个单词不
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 项目 校园生活 网站 制作 ppt 课件
链接地址:https://www.31ppt.com/p-4923443.html