教你做一个简单的网页
- 格式:doc
- 大小:335.50 KB
- 文档页数:5
任务1:请学生观看登录页面,回答它包含了哪些主要元素? :(1)账号输人框:用于采集用户账号信息。
(2)密码输人框:用于采集用户的密码信息。
(3)登录按钮:用于将账号和密码信息提交到服务器。
(4)其他登录方式:用户登录网站的其他选择。
(5)忘记密码:用户用于获取密码的途径。
(6)立即注册:新用户注册会员的途径。
任务2:用PHOTOSHOP制作登录页面所需的图像如果无法完成的同学,就利用老师准备的素材做任务3任务3:实现登录页面的布局(1)创建站点(ymzz01),新建并保存文件(index)。
网页需要保存在站点中。
打开“文件”菜单,选择“保存”命令,或按快捷键〈Ctrl〉+〈S〉,将弹出“另存为”对话框,选择保存的位置并输入保存文件名,单击“保存”按钮即可将网页保存。
注意:文件名通常使用小写英文字母,不使用空格、特殊符号,不要使用中文。
文件命名尽量以四种方式命名:汉语拼音、汉语拼音缩写、英文或英文缩写,以方便通过文件名直观地了解页面内容。
(2)插人表格。
设置表格为行-列,宽424(像素)边框1(像素),表格居中对齐。
如图右图所示。
(3)嵌套表格。
在当前表格中插人一个新的表格,设置表格为9行1列、宽100%,表格居中对齐,如下图所示。
(4)插人图像。
依次从1至9行插人图像“0.jpg、1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、6.jpg、7.jpg、8.jpg、9.jpg。
(其中第3行、第八行不插图像)如右图所示。
(5)、保存网页(6)预览。
按F12键,预览用户登录页面,如图2- 26所示。
任务2修改单元格属性单击“单元格”,选择“属性”面板,找到“单元格”的各种属性,就可以设置它的对齐方式。
解决问题的策略教学内容:苏教版教材五年级上册第94-95页例1和练一练,第97页练习十七第1-3题。
教学目标:1.使学生经历用列举的策略解决简单的实际问题的过程,能通过有序地列举不重复、不遗漏找到符合要求的所有答案。
教案课程网页制作2016——2017学年第一学期班级计算机应用二年级教师胡发萍课时进度表网页制作全册备课网页制作第一章备课通过上面的讲解,下面我们从一些网页上观察一些超链接及区别打开该网页进行比较讲解最后留一步分时间让同学们一些好的网页进行浏览如:课后记:由于同学们都没有书,这节课的内容比较少,同学们都能很好的掌握。
的统一的语言规范。
用HTML语言制作网页,一般有两种方法:一是使用记事本之类的工具,输入HTML标记和网页的内容进行直接编写,然后保存在以html或htm为扩展名的网页文件;另一种方法是使用可视化的网页制作工具,自动生成HTML代码。
例:我的第一个网页1、执行菜单的“开始”—“程序”—“附件”—“记事本”2、将以下代码完整正确地输入到记事本软件中:<html><head><title>欢迎大家光临</title></head><body><p>这是我用记事本编写的第一个网页,<font size=”+7”color=”red”>欢迎光临!</font></p></body></html>3、执行菜单的“文件”—“另存为”,存时注意必须加上扩展名.htm或.html。
4、双击打开刚才保存的文件。
作业:同学们现在做出这样的一个网页。
课后记:通过案例的制作,同学们都能做出来,同学们的学习兴趣有了一定的提高。
班级计算机二年级课时5、6网页制作第二章单元备课班级计算机二年级课时7、8课题 2.1 Dreamweaver MX的工作界面和基本操作教学目标掌握Dreamweaver MX软件的启动方法熟悉Dreamweaver MX软件的界面掌握Dreamweaver MX软件的基本操作教学重点Dreamweaver MX软件的基本操作教学难点Dreamweaver MX软件的基本操作教学方法教学一体化教学内容:一、熟悉Dreamweaver MX 2004的工作界面Dreamweaver欢迎界面1、启动Dreamweaver MX 2004Dreamweaver MX 2004的工作界面2、认识窗口布局、面板与面板组“插入”栏文档工具栏“文档”窗口面板组Array“标签”选择器“属性”面板“文件”面板3、Dreamweaver MX 软件界面的相关操作。
怎样制作网页制作网页详细操作步骤怎样制作网页制作网页详细操作步骤制作网页主要有以下一些工具Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地,我不太喜欢。
Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。
建议初学者选用。
另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。
大型的网站往往还需要数据库的支持,所以还得懂数据库。
sql、甲骨文等。
总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。
随便混就好了!网站设计八步骤由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。
一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。
建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。
一、确定网站主题网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。
特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。
你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。
网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。
二、搜集材料明确了网站的主题以后,你就要围绕主题开始搜集材料了。
常言道:“巧妇难为无米之炊”。
要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。
题目:设计一个个人网站一、要求:1.使用Dreamweave网页工具制作一个个人网站;2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计),网页之间用超链接相连。
3.网页中要有图片和文字内容,用表格进行页面布局;4.添加至少两种行为,并为首页添加背景音乐。
5. 在网站中设计一个表单页面。
6. 首页必须包含页面标题,动态按钮导航栏。
首先新建一个文件夹,文件夹的名字不能为汉字,做网站所有的路径都必须用字母或者数字,不能用汉字,我们就用名字吧,譬如说名字张三,那文件夹名字就是zs,如图打开Dreamweaver软件,得到图做网页要新建站点,关于站点配置服务器什么的,这里不讲了,只讲建立站点。
选择站点——新建站点。
我们建的文件夹就是站点根文件夹。
新建站点后得到这样一个界面点选高级,得到界面站点名称与我们建文件夹得名字相同,zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs,http地址为http://localhost/zs接下来选择左侧栏里远程信息点击无后面的那个三角,选择本地网络,远端文件夹同样选择我们新建的那个文件夹接下来点选左面菜单里的测试服务器,点选访问后面那个三角,选择本地网络,测试服务器文件夹也为我们建好的文件夹zs,在url前缀后面加上zs然后点击确定就可以了得到这样一个界面。
下面看老师的第一条要求,是要至少四个网页,那我们就做四个单击新建,然后单击接下来,选择然后单击创建,接下单击文件——保存,保存这个文件,保存在我们一开始建好的文件夹里面,保存名字不能是汉字,只能是字母或者数字,因为我们只坐四个网页,可以简单一点,把这四个网页命名为a、b、c、d,或者1、2、3、4,当然一个网站默认的索引首页名为index,这里也用index,单击保存,这样得到第一个页面,以同样的方式建剩下的三个页面,这里我的首页默认为index.html,其他三个网页的名字分别为a.html、b.html、c.html,我们这四个网页文件已经保存在我们建的文件夹里。
一、选择图片1、打开psotoshop,在“文件”里打开一张你准备使用的图片,最好是JPG格式的静态图片,同时注意图片的选取要有作为LOGO图标的价值,这就看个人审美了。
2、图片的上方如果显示是“索引”字样,就必须用“图象”——“模式”——改为“RGB颜色”,否则很多功能无法使用。
3、然后选择工具栏的“裁切工具”,裁切一个88*31大小的图片,图片切得大了就继续切,切到合适为止,切得小了就重来。
这里裁切的尺度是80*31。
如下图。
(或者可以用矩形工具选取一个88831的区域,再新建一个空白图片粘贴上去)二、加入文字在LOGO中显示的一般是网站名称和地址,这里以名称“天空之城”和地址为例。
做LOGO最主要的是用各种显示的方法突出文字信息,以给人深刻和良好的印象。
就说说简单的滑行效果吧!滑行效果:字体从旁边慢慢滑行出来的效果。
1、在工具栏选择文字工具——文字工具的样子的大写的“T”,在合适的地方输入文字,一般LOGO的文字格式是默认的宋体,12号大小,去掉锯齿。
如下图。
字体常用的特效有投影、描边、模糊等,这里的例子用白色字体,绿色描边。
进入特效设置的方法是在右下角的图层上用右键点出“混合选项”,如下图。
2、简单介绍一下这几种效果的使用方法。
点击“投影”字样(而不是点击它前面的选框),把投影选项中的“距离”“大小”改为1,“角度”改为150或120,“不透明度”自己定——不透明度是指投影颜色的深浅,在“混合模式”后面的黑框里选择颜色。
如下图。
3、点击“描边”,把“大小”改为1,把颜色改成你想要的。
如下图。
另外一个“模糊”效果是在“滤镜”——“模糊”——“动感模糊”里。
4、输入文字并设置好效果后,用移动工具拖动文字的位置。
如下图。
将文字往里拖动,显示三个字,并保存,如图。
再将字拉过来些,再保存。
将文字拉到最后确定的地方,保存。
在这里可以用“缩放工具”放大图片,以便更好地设置。
注意文字移动的曲线要在同一条直线上,分毫都不可偏差,比如说从左移到右,一般是用移动工具移动4或5次,每一次移动之后就要保存。
实验报告学生姓名:学号:一、实验室名称:软件大楼302二、实验项目名称:用HTML语言制作简单的网页三、实验原理:1.网页(1)网页就是在浏览器上看到的一页,网页也称为Web页。
(2)主页通常是进入网站首先浏览的网页,具有引导用户浏览整个网站内容的作用。
(3)超链接是网页中的特殊标记。
它指向了WWW中的其他资源,如其他网页、网页的另一个段落、声音文件等。
这些资源可以位于自己的计算机上,也可以位于其他计算机上。
用作超链接的标记可以是一段文字、一幅图像,也可以是一幅图像的一部分。
在浏览网页时,单击超链接就可以跳转到超链接所指向的资源。
超链接像一根一根的线一样,将各种网页链接在一起,形成一个庞大的信息网。
2.HTML语言(1)HTML语言就是超文本标记语言,是网页制作的基础,也是基本的工具,使用其他任何工具制作的网页,最终都要以HTML方式存储在计算机里。
(2)HTML的脚本可用任何一种文本编辑器进行编写,如记事本、Microso ft Word等。
保存时要将脚本保存成纯文本格式,扩展名必须是.htm。
(3)HTML脚本的基本结构。
HTML脚本总是以<html>标记开头,</html>标记结尾,在<html>和</html>标记之间是HTML的所有内容,一般情况下它分为两部分:头部和主体。
头部总是由<head>和</head>标记定义的,其中包含了HTML脚本的标题和说明信息;头部下面是HTML脚本的主体部分,它以<body>作为起始标记,</body>作为结束标记,其中所包含的就是在浏览器中所看到的内容,包括文字、图片、动画等。
3.FrontPage,dreamwerver,notepad以FrontPage为例,它是一种简单易学的Web管理和网页制作的软件。
Front Page2000的窗口,如图1.1所示。
一、如何设计网页怎么设计制作一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然,比较复杂的网站就需要很多技术上面的知识咯,比要制交互功能,管理后台这些就需要掌握html、css、javascrpt这些基础脚本知识和动态编程知识(如asp、php、),下面介绍目前两种主流的制作网页的方法:方法一(适合菜鸟)下载专业的网站内容网站管理来做,互联网发展到今天,做网站也变得非常简单和编辑,国内也出现了一批很专业的专门用于做网站的网站管理系统,有的甚至支持多语言,多站点,总之有一句话说得好,站在巨人肩上会看的更高,一样道理,用专业的网站系统来做做网站就是一个非常省力,省时的过程,国内很多网站90%都是基于这些专业系统基础上搭建,当然,选中一个系统后你需要去熟悉这个系统功能你才能运用得很好,一般来说这些系统都不需要你具备专业的知识,只需要花几天时间看看教程就可以熟练运用并建站,下面收集了国内一些比较常用和知名的系统,大家可以根据自己要做的网站类型去下载对应的系统,系统地址这里就不发了,自己百度一下就能找到。
CMS系统:适合做门户,学校,政府,企业这类网站1、PageAdmin系统2、Drupal系统3、Joomla! 系统论坛系统1、Discuz系统2、Phpwind系统商城系统:用来做在线购物网站1、Ecshop2、ShopEX博客系统1、Wordpress2、e-blog不同系统都针对不同类型的网站,用户下载下来后可以根据系统环境要求在本地配置环境来运行,本地不会配置的朋友也可以购买符合系统环境要求的虚拟主机上传到主机上安装,每种系统官方网站都会有详细的环境要求及使用教程,一般新手学习和熟悉一个系统功能大概要花费几天时间,熟悉功能后就可以很轻松的制作出自己需要的网站。
方法二(专业人员必看)这个也是本本要重点讨论的,这也是一个专业做网站人员必须掌握的方法,因为掌握下面基础,即使你用方法一来做网站,也能运用得更好,因为一把好剑也需要一个好的剑客。
Dreamweaver网页制作教程:定义站点网页教学网【转载】Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。
Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点。
创建 Web 站点的第一步是规划。
为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规划。
决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。
请执行以下操作:启动 Dreamweaver MX 2004:选择“站点”>“管理站点”(即,从“站点”菜单选择“管理站点”)。
出现“管理站点”对话框。
在“管理站点”对话框中,单击“新建”,然后从弹出式菜单中选择“站点”。
出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡,则单击“基本”。
出现“站点定义向导”的第一个界面,要求您为站点输入一个名称。
在文本框中,输入一个名称以在 Dreamweaver MX 2004中标识该站点。
该名称可以是任何所需的名称。
单击“下一步”。
出现向导的下一个界面,询问您是否要使用服务器技术。
选择“否”选项,指示目前该站点是一个静态站点,没有动态页。
单击“下一步”。
出现向导的下一个界面,询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”的选项。
在站点开发过程中有多种处理文件的方式,初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。
随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”,出现向导的下一个界面,询问您如何连接到远程服务器。
从弹出式菜单中选择“无”。
您可以稍后设置有关远程站点的信息。
目前,本地站点信息对于开始创建网页已经足够了。
单击“下一步”,该向导的下一个屏幕将出现,其中显示您的设置概要。
单击“完成”完成设置。
随即出现“管理站点”对话框,显示您的新站点。