如何用记事本建立简单的网页
第9章 网页制作实验指导
第九章网页制作实验指导实验一使用记事本建立HTML文件一、实验目的及任务要求1.实验目的了解HTML语言的基本概念和HTML文件的基本结构，掌握常用HTML标记意义和语法，学会使用记事本编辑简单的HTML文件。
2.任务要求使用记事本编辑简单的HTML文件“刘翔.html”（图9-1），其中包括设置网页标题、建立表格、插入图片等。
图9-1 刘翔的个人小档案二、实验所需素材实验素材\第9章\第1节三、实验练习利用所给素材，使用记事本建立HTML文件“刘翔.html”（图9-1）。
在浏览器中打开、查看设计的网页。
实验二在FrontPage的Web页中插入文本、图片、水平线等对象，并用表格定位一、实验目的及任务要求1.实验目的掌握在FrontPage2003中新建站点和网页，在网页中插入文本、图片、水平线等对象的方法；掌握利用表格对文字、图片等内容进行定位的方法。
2.任务要求使用FrontPage2003新建一个站点，并在其中新建网页。
利用所给素材制作一个关于历届奥运会吉祥物的网页（图9-2），要求使用表格进行定位，插入文本、图片和水平线等对象。
图9-2 历届奥运吉祥物二、实验所需素材实验素材\第9章\第2节三、实验练习建立站点Web1，根据所给素材制作一个反映2008年北京奥运会吉祥物“福娃”的网页，保存为“2008奥运会吉祥物.htm”。
要求使用表格定位网页内容，插入素材中的文字、图片等，还可以插入水平线。
可以使用任何学到的知识进一步美化网页。
实验三插入文本、图片的超链接，并设置图片对象的格式一、实验目的及任务要求1.实验目的掌握在FrontPage2003中插入文本、图片的超链接，以及设置图片对象格式的基本方法。
2.任务要求打开实验二创建的站点Web1，编辑主页（index.htm），插入标题、水平线、文本、图片，以及文本、图片的超链接，并设置图片的对象格式，如图9-3所示。
图9-3 奥运会吉祥物二、实验所需素材本实验及实验练习所需素材文件同实验二三、实验练习打开实验二创建的站点Web1，以奥运吉祥物为内容，设计主页（index.htm），插入文本、图片的超链接，并在浏览器中打开该站点，浏览网页，测试超链接。
HTML 菜鸟进阶教程 !
一、什么是HTML？HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言(Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言(markup language)标记语言是一套标记标签(markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为HTML 标签(HTML tag)。
HTML 标签是由尖括号包围的关键词，比如<html>HTML 标签通常是成对出现的，比如<b> 和</b>标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签HTML 文档= 网页HTML 文档描述网页HTML 文档包含HTML 标签和纯文本HTML 文档也被称为网页Web 浏览器的作用是读取HTML 文档，并以网页的形式显示出它们。
浏览器不会显示HTML 标签，而是使用标签来解释页面的内容：<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>例子解释<html> 与</html> 之间的文本描述网页<body> 与</body> 之间的文本是可见的页面内容<h1> 与</h1> 之间的文本被显示为标题<p> 与</p> 之间的文本被显示为段落二、HTML 基础基本的HTML 标签- 四个实例HTML 标题HTML 标题（Heading）是通过<h1> - <h6> 等标签进行定义的。
实例<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>HTML 段落HTML 段落是通过<p> 标签进行定义的。
如何在OneNote中创建笔记本和页面
如何在OneNote中创建笔记本和页面OneNote 是一款非常实用的笔记软件，它可以帮助我们有效地整理和管理各种信息。
无论是工作中的项目资料、学习中的笔记，还是生活中的点滴灵感，都能在 OneNote 中得到妥善的记录和分类。
在使用OneNote 时，创建笔记本和页面是基础操作，下面我将为您详细介绍如何进行这两项操作。
首先，我们来了解一下为什么要创建不同的笔记本和页面。
就好比我们整理房间，会把不同类型的物品放在不同的柜子和抽屉里，OneNote 中的笔记本和页面也是为了让我们能够更有条理地存放和查找信息。
比如，您可以为工作创建一个笔记本，为学习创建另一个笔记本，然后在每个笔记本中再根据具体的项目或课程创建不同的页面。
一、创建笔记本1、打开 OneNote 应用程序在您的电脑或移动设备上找到并打开 OneNote 应用。
2、登录账号如果您使用的是 OneNote 的在线版本，可能需要登录您的微软账号。
3、找到“新建笔记本”选项通常在软件的界面中，会有一个明显的“新建笔记本”按钮或选项。
4、为笔记本命名给您的笔记本取一个清晰、易懂的名字，这样在后续查找和使用时能够快速找到。
比如，如果是用于记录工作相关的笔记，可以命名为“工作笔记”；如果是用于旅行规划，可以命名为“旅行计划”。
5、选择保存位置OneNote 会为您提供一些默认的保存位置选项，您可以根据自己的需求选择合适的位置，比如保存在 OneDrive 中以便在不同设备上同步访问，或者保存在本地电脑的特定文件夹中。
6、创建笔记本完成上述步骤后，点击“创建”按钮，新的笔记本就创建成功了。
二、创建页面1、打开要创建页面的笔记本在 OneNote 中找到您刚刚创建的笔记本并打开。
2、找到“新建页面”选项一般在笔记本的页面列表区域，会有“新建页面”的图标或选项。
3、为页面命名给页面取一个能够准确反映其内容的名字。
比如，如果是记录某个会议的要点，可以命名为“会议名称要点”；如果是关于某个问题的解决方案，可以命名为“问题名称解决方案”。
小学五年级信息技术学习制作简单的网页
小学五年级信息技术学习制作简单的网页在小学五年级的信息技术学习中，学生们将学习如何制作简单的网页。
通过掌握基本的HTML标记语言和网页设计原则，他们可以创造出具有一定交互性和美观性的网页。
下面将介绍制作简单网页的步骤和技巧。
一、准备工作1. 打开文本编辑器：在开始制作网页之前，学生需要打开一个文本编辑器，例如Windows平台上的记事本或者Mac平台上的文本编辑器等。
2. 保存文件：学生应该将文件保存在一个容易访问的地方，例如桌面或一个新建的文件夹中。
文件的后缀应为.html。
二、编写基本结构1. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body></body></html>以上是一个基本的HTML结构。
其中，<!DOCTYPE html> 表示这是一个HTML5文件，<html>标签是HTML文档的根元素，<head>标签用于放置与网页相关的元数据，<meta charset="UTF-8">定义了网页的字符编码，<title>标签用于定义网页的标题，<body>标签包裹了网页的主要内容。
三、添加网页内容在<body>标签中，可以添加各种网页内容，例如文字、图片、链接等。
1. 文字<h1>欢迎来到我的网页</h1><p>这是我第一个制作的网页，非常兴奋！</p>使用<h1>标签可以定义一级标题，<p>标签可以定义段落。
学生可以根据需要添加更多的标题和段落内容。
2. 图片<img src="图片的URL或路径" alt="图片描述">使用<img>标签可以插入图片。
网页制作教案
教案课程网页制作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 软件界面的相关操作。
网页设计实习指导书
网页设计实习指导书（54学时for 信计）邹青编信息工程学院二００六年八月实习一掌握HTML的格式一、实习目的1. 掌握网页的基本结构及必须的标记；2. 了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。
3. 学会并掌握从网上获取HTML的知识及下载网页元素；二、实习要求1. 掌握网页的基本结构，熟悉html、head、body、title基本标记2. 了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示3. 用记事本完成简单的网页4. 学会从InterNet上获取网页元素三、实习内容及方法1. 网页基本结构<html> ……表示网页的开始<head> ……网页头，用来保存对网页的一些注释及规定一些动作<title>网页标题</title> ……在浏览器标题栏显示的内容</head> ……结束网页头<body> ……正文开始正文……显示在浏览器中的内容</body> ……正文结束</html> ……网页结束2. 用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容<html><head><title>我的第一个网页</title></head><body>Hollo, World!!!!</body></html>第三步：在文件菜单中单击保存→选择保存类型为：所以类型→输入文件名为test.html→单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3. Body属性的使用及特殊字符的显示。
用记事本建立一个网页sec.htm，内容如下：<html><head><title>我的第二个网页</title></head><body BGColor＝#cccccc Text=blue Link=black ALink=redVLink=green>我的<友情链接><a href=””>搜狐</a><br><a href=” ”>西北农林科技大学</a><br><a href=” http://127.0.0.1”>我自己</a></body></html>4. 从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。
网页设计与制作课程课程大纲
xxx学校课程大纲科目名称：《网页设计与制作》专业：计算机说明随着互联网的高速发展和广泛传播，对从事网页设计与制作的人员需求量也愈来愈多。
教材在教学过程中起着至关重要的作用，而缺乏优秀实用的网页设计与制作方面的教材是目前中职学校普遍存在的问题。
本书编者旨在为中职学校相关专业，以及对网页设计与制作有兴趣的人员提供一本实用教程。
本书是依据网页设计行业的业内制作标准和相关案例执行为范围编写的。
在编写过程中针对读者的特点，项目选择合理、针对性强、理论和实践有机融合；以实践为主，特别注重实用性，并注重融入先进的教学理念与方法，注重提高读者的学习能力。
全书从实用的网页设计制作项目入手，以任务驱动的方式系统地介绍了以下内容：网站的制作流程、使用HTML制作简单网页、认识Dreamweaver CS3、搭建与管理本地站点、网页元素的编辑、使用CSS控制页面元素、使用表格布局制作页面、使用框架布局制作网页、使用CSS+DIV布局页面、使用模板和库提高制作效率、使用JAVAScript制作网页特效、策划与制作个人艺术网站。
同时结合作者多年来积累的教学工作经验，以实践为主，理论融合其中，是帮助教师联想三大软件、提高学生实践力的有力助手。
通过课程学习，学生将具备网页设计与制作的基本技能，并帮助学生在从业道路上积累经验。
本教材还具备一下特点：1.任务明确；2.结构新颖；3.图文并茂，简洁易懂；4.与国家职业资格证接轨。
《网页设计与制作》课程教学大纲课程名称：《网页设计与制作》课程总学时：72一、教学目的和任务（一）目的《网页设计与制作》是计算机相关专业的一门应用性较强的选修课程。
通过对网页设计与制作的初步学习，使学生对网页设计与制作的各个环节有感性的认识并理性理解各个网页中各布局的功能和特点，学习网页设计与制作制作方法，为今后在网页设计与制作行业工作提供必要的基础知识，以便能够得心应手地使用好Dreamweaver软件，更好地使设计网页发挥作用。
使用Windows自带的记事本编写简单代码
使用Windows自带的记事本编写简单代码在如今数字化的时代，编程不再是专业程序员的专属技能，普通人也可以通过简单的工具和基础的知识来体验编程的乐趣。
Windows 自带的记事本就是这样一个容易上手的工具，它虽然看似简单，但却能帮助我们编写一些简单的代码。
首先，让我们来了解一下记事本。
记事本是 Windows 操作系统中一个基本的文本编辑工具，它没有复杂的功能和花哨的界面，只有纯粹的文字编辑区域。
但这恰恰为我们编写代码提供了一个干净、简洁的环境。
当我们决定使用记事本编写代码时，第一步就是打开它。
在Windows 系统中，您可以通过点击“开始”菜单，然后在搜索框中输入“记事本”来找到并打开它。
或者，您也可以按下快捷键“Windows ＋R”，在弹出的“运行”对话框中输入“notepad”并回车。
接下来，让我们从一个简单的 HTML 代码开始入手。
HTML（超文本标记语言）是用于创建网页的基础语言。
以下是一个简单的 HTML代码示例，用于创建一个包含标题和段落的网页：｀｀｀html＜！DOCTYPE html>＜html>＜head>＜title>我的第一个网页<／title>＜／head>＜body>＜h1>这是一个标题<／h1>＜p>这是一个段落。
＜／p>＜／body>＜／html>｀｀｀在记事本中输入上述代码后，点击“文件”菜单，选择“另存为”。
在“文件名”框中，输入“my_first_webpagehtml”（注意，一定要加上“html”扩展名，否则浏览器无法正确识别它为 HTML 文件），然后选择保存类型为“所有文件”，最后选择一个您想要保存的位置，点击“保存”。
保存完成后，找到您保存的文件，双击它，它应该会在您的默认浏览器中打开，显示出您刚刚编写的网页内容，包含一个标题和一个段落。
除了 HTML，我们还可以使用记事本编写 Python 代码。
自己制作网页的7个步骤
自己制作网页的7个步骤怎样自己制作网页？需要在互联网了解一点的做法，一旦你掌握了它，这是一个很大的乐趣。
第一步是决定你想要您的网页上发布。
也许你想发布，你已经写了一个原始的故事，分享您已经阅读评论的书籍，或创建一个电子杂志，你的业余爱好之一。
无论您希望把什么放到您的网页上，这一步一步的指南会指示如何做到这一点。
怎样自己制作网页步骤1:创建一个文本文档首先,您需要创建一个文本文档包含单词,你想要出现在您的Web页面。
只要你给你的文档名称结尾，大多数文字处理程序将会工作的很好。
首先一个标题和一个引人注目的问候或介绍,所以人们会立即告诉您的页面是什么,会想要读更多。
思考逻辑的地方插入你的文本。
没有人想要向下滚动一个长,不间断的文本块。
你的页面将会更可读的如果你把在频繁的换行符和水平规则。
想想,你可能想要插入图片,如果你让他们在电子文件。
大量的网页开始与一个引人注目的图像顶端,旁边的标题。
怎样自己制作网页步骤2:学习基本的HTML标记现在您需要插入一些格式化标记你的文档,会告诉一个互联网浏览器如何安排你的文字和图片在屏幕上。
这些标签组成一个语言称为超文本标记语言,或者HTML。
一个基本结构H TML文档像这样:< HTML ><头><标题>的标题页< /标题>< /头><身体>文本的页……< /身体>< / html >注意(1)每个格式标记之间出现“小于”(<)和“大于”(>)符号,以及(2)标签通常成对出现,第二个标记用“削减”(/)。
下面列出的一些基本的格式化HTML标记:< h1 >…< / h1 >头,一级。
小标题都带有< h2 >…< / h2 >、< h3 >…< / h3 >等。
< b >…< / b >粗体文本< i >…< / i >斜体文本<center>…< /center>居中文本< p >段落返回(插入额外的线之间的空间段)注意:任何段落的回报,你在你的文档插入通过简单地击打键盘上的回车键将会忽略一个Web浏览器。
用Microsoft+FrontPage制作网页
学习做网页之前，我们首先要知道网页是什么，一般来说网页是用在网络上的htm文件，通过网页可以很方便的实现网络资源的共享，上网分为三个步骤；1、输入正确的网址1）在桌面上找到Internet Explorer ，双击打开，出现浏览器窗口，一般会自动进入微软的网站；2）找到地址栏一个长白条，里面有一串以http打头的字符，这就是地址栏；3）在地址栏里头点一下鼠标左键，然后删除里面的字符，输入自己的的网址，网址一般是英文的以http打头，然后是一个冒号和两个斜杠（双斜杠），然后是www（三W），后面跟一个点，最后一般是com结尾，例如输入输完检查一下，没问题就按一下回车键，这时窗口右上角的小图标就开始运动，也就是正在搜索；4)一切正常就会进入到搜狐网站的首页；2、找超级链接网页上的内容是一页一页的，一般都藏在一个叫超链接的后面，所以第二步就是要找到超链接；超链接有三个特点，首先文字的颜色是蓝色的，非常醒目，其次文字下面有一条下划线，便于查找，最关键的是当鼠标移过去以后，指针会变成手形，这一点很重要；找到超链接以后就可以鼠标左键单击，进入相应的内容了；3、后退按钮看完一页后如何返回呢？在窗口的左上角有一个后退按钮，点一下就可以回到上一页，这样就不会迷失方向了；其他还有浏览、下载、另存为等等也都是网络的功能；本节学习了上网的基础知识，学习了上网的三步曲，网址－超链接和后退，如果你成功地理解并完成了练习，请继续学习下一课内容。
第2课网页基础这一节我们来学习做网页，通过上一节我们可以知道网页包括标题、内容和超链接几部分组成，下面我们通过一个练习来看看怎样做一个网页；1、启动FrontPage1）单击“开始－程序－Microsoft FrontPage”一个蓝色的箭头图标，启动FrontPage 程序，自动新建一个空白文档；2）单击工具栏上的保存按钮，出现保存对话框，从上到下先找到自己的文件夹，然后在下边的文件名框里点一下，删除里面的字符，输入index然后再点旁边的“更改”按钮，输入网页标题“青青草”，单击“确定”－“保存”，就成功地新建一个网页；2、输入内容保存完毕回到窗口中，输入网页标题和内容，这里我们创建个人主页，一行一行往里面输入，一行输完按一下回车键到下一行：第一行是标题，也就是网页的名称，个人主页包括自己的简介、爱好等内容，注意输“联系”的时候，在冒号后面加一个空格就不会错了；3、格式设计下面把网页的版面设计一下，也就是把网页修饰的漂亮一些；1）背景色单击“格式”菜单，选择“背景”命令，如果没找着，就点一下菜单最下面的折叠按钮，藏在下面呢；打开背景对话框以后，在中间找到“颜色”里面的“背景”，在“自动”上点一下，出来颜色对话框，在“其他颜色”上点一下，选一个自己喜欢的颜色，单击“确定”，背景色就加好了，单击“保存”按钮，保存一下文件；2）标题修饰选中标题“青青草花园”，单击工具栏上的居中按钮，让标题居中，然后从左到右依次选择字体、字号、颜色，字体设为华文彩云，字号设为6，颜色设为红色，注意颜色是大A按钮，旁边的铅笔是背景色，保存一下文件；3）文本修饰选中其他文本内容，把字体改为华文行楷，字号为4，颜色设为一个好看的颜色，保存一下文件；4）做好的网页怎么观看呢？在工具栏上找到一个放大镜“浏览”按钮，就可以查看自己的网页了（如果网页没出来，就到底下的任务栏上找一找）。
网页设计实验
实验二HTML语言（一）【实验目的】1．掌握<head></head>的<title>标记，和<meta>标记；2．掌握使用<body>标记设置网页背景颜色和文本颜色。
学习使用分段标记<p></p>；3．掌握使用<font>标记设置文字的属性；4．掌握在网页中插入背景图片；5．掌握在网页中插入水平线，并设置水平线的属性；6．掌握在网页中插入背景音乐。
【实验环境】Windows xp【实验重点及难点】掌握字体、水平线等常用标记。
【实验内容】1、制作一个简单的网页sy1-1.htm，用记事本编辑，内容为个人简介信息。
要求：●搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。
●背景为#33ccff,文本颜色为黑色，文本需分段表示。
2、过记事本编辑网页sy1-2.htm，内容为李白的诗“静夜思”。
要求：每行诗为一个段落，四行文字颜色不同，字体不同。
3、通过记事本编辑网页sy1-3.htm，实现如图页面。
4、通过记事本编辑网页sy1-4.htm，实现如下页面。
图片自选，插入背景音乐。
5、通过记事本编辑网页sy1-5.htm，实现如下页面。
实验三HTML语言（二）【实验目的】1．掌握给文字添加绝对超级链接，例如：<a href=></a>和相对超级链接，例如：<a href=/images/1.jpg></a>；2．掌握使用<pre></pre>标记；3．掌握使用<marquee></marquee>标记设置滚动字幕；4．掌握使用列表标记。
【实验环境】Windows xp【实验重点及难点】掌握使用超级链接、列表、滚动字幕等HTML常用标记。
【实验内容】1、制作一个网页sy2-1.htm，用记事本编辑。
要求：●网页名称为：超级链接练习●以一张图片作为背景，并且设置图片固定。
利用记事本编写网页快捷方式教程
利用记事本编写网页快捷方式教程
步骤：
1.新建一个txt的记事本文件
2.写入如下程序
[internetshortcut]
url=
3.单击“文件”，另存为【例如：“文件名: *.url”“保存类型：所有文件”“编码ANSI”】
注意，程序要分行写，不要连在后面写，如果出错要记得检查，
说明：
[internetshortcut]
可以理解为URL网页的快捷方式，“[internetshortcut]”不要修改，这是一种格式。
url=http://*.com
“http://*.com”表示自己的网站域名，前面的“URL=”不要修改，这是一种格式。
除了记事本的这种方法制作网页快捷方式，还有一些专业软件也可以，很多浏览器也可以右键存储快捷方式，修改图标和URL直接右键快捷方式图标也可以，我个人觉得记事本的功能还是很强大的，一些小程序基本可以写，比如说bat批处理文件，vbs脚本,scf显示桌面，以前学C的时候，经常看我们老师用记事本。
值得学习借鉴和研究。
用记事本建立网页
用记事本建立网页制作人：正元设计个人设计网站：/邮箱：nobdgu@网页制作实验一用记事本建立简单的HTML文件【实验目的】学会用HTML语言建立一个简单的网页。
【实验内容】建立一个网页，布局自定，包括自我介绍、图片、自己的电子信箱地址等，要求在标题与正文之间插入一条水平线。
(实验中所用到的图片、音乐等素材均可在计算中心配备的计算机中找到，具体路径为C:\DATA)【实验步骤】1、启动“记事本”和“IE浏览器”，并纵向平铺两窗口；2、在“记事本”窗口输入下面的代码：<html><head><title>欢迎光临悠悠小屋</title></head>3、保存该文件到D:\myweb文件夹中，取名为“yoyo.htm”；（注意，文件的扩展名一定为.htm或html；如果没有myweb文件夹，请建立之）4、在IE浏览器的地址栏输入d:\myweb\yoyo.htm；显示如图9-1；图9-1 网页头部代码与相应显示5、在“记事本”窗口输入以下语句：<body><h2 align="center"><font color="blue" face="楷体" >欢迎进入悠悠网</font><p><img border="0" src="d:\myweb\woman.gif" Width="138" height="169"></p></h2>6、保存记事本文件，并刷新IE浏览器窗口，显示如图9-2；（请先将C:\data中的woman.gif 文件复制到D:\myweb下）图9-2 字体与图片代码与相应显示7、在“记事本”窗口输入以下语句(注意被超链接的文件地址书写格式)：<hr><p align="center"><font face="幼圆" size="3" color="#3366FF">我叫悠悠，这里是我的家，欢迎大家来这里听歌喝茶（当然也有coffee了）！</font></p><p align="center">撒拉.布莱曼的<a href="file:///D:/Myweb/Music/moon/there for me.mp3">《There for me》</a></p><p align="center">撒拉.布莱曼的<a href="file:///D:/Myweb/Music/moon/THe Winter of July.mp3">《The Winter of July》</a></p>8、保存记事本文件，并刷新IE浏览器窗口，显示如图9-3；图9－3 超链接代码与相应显示9、在“记事本”窗口输入以下语句(注意发送电子邮件的超链接的书写格式)：<p align="left"><font color="#808000" face="幼圆">还想听什么歌，告诉我啊！<ahref="mailto:youyou2001@">youyo u2001@</a></font></p></body></html>10、保存记事本文件，并刷新IE浏览器窗口，显示如图9-4；图9－4 邮件超链接代码与相应显示11、自此，该网页设计结束，点击超链接，检查链接是否正确，如果不正确，检查被链接文件是否在其设定的目录内。
用记事本写html的基本html语言
用记事本写html的基本html语言用记事本写HTML的基本HTML语言一、HTML标签HTML是一种使用标签和属性组成的标记语言，它用来描述网页的结构和展示。
我们通过记事本来编写HTML代码，下面是一些基本的HTML标签：1.<!DOCTYPE>：这个标签用来声明文档类型，告诉浏览器使用哪种HTML版本来解析网页。
例如：<!DOCTYPE html>表示使用HTML5版本。
2.<html>和</html>：这对标签是HTML文档的根标签，它们包裹着整个网页的内容。
3.<head>和</head>：这对标签包含了网页的头部信息，通常包括<title>标签（用来定义网页的标题）、<link>标签（用于引入外部样式表）和<script>标签（用于引入JavaScript代码）等。
4.<body>和</body>：这对标签定义了网页的主体内容，包含了需要显示给用户的文本、图片、链接等。
二、基本文本标签在网页中，我们经常需要使用到一些文本标签来定义文本的样式和结构。
下面是一些常用的文本标签：1.<h1>到<h6>：这些标签用来定义标题的大小，<h1>是最大的标题，<h6>是最小的标题。
2.<p>：这个标签用来定义段落，用于将文本分为不同的段落。
3.<a>：这个标签用来创建链接，通过设置href属性来指定链接的目标地址。
4. <b>和<i>：这对标签分别用来定义加粗和斜体文本。
三、图片标签图片在网页中起着非常重要的作用，可以使网页更加生动和美观。
以下是使用图片标签的方法：1.<img>：这个标签用来在网页中插入图片，需要设置src属性来定义图片的路径。
2.<figure>和<figcaption>：这对标签可以用来定义图片的标题和说明文字，更好地描述图片的内容。
用HTML代码在记事本制作简单网页
用HTML 代码在记事本制作简单网页HTML （Hyper Text Markup Language ）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网 页文档的主要语言。
HTML 网页由HTML 代码编写出来 HTML 的结构包括头部（Head ）、主体（Body ）两大部分， 其中头部描述浏览器所需的信息，而主体则包含所要说明的 具体内容。
HTML 代码是成对存在的！任何的HTML 代码都 必须有开始标记和结束标记！下面介绍用HTML 代码在记事本中编写简单网页的方法!第一步，打开记事本。
第二步，开始编写HTML 代码。
首先编写必须的几个代码：<html>, v/html>、 <head>, v/head>、 <title> , v/title>、vbody>, v/body>c 无标题-记事本丈件®鋼辑⑥格式辺査看迪 帮助①）<htnl>| Ro 游戏 捕助工貝通讯C3启动远程协助Iftternet Ewpl ^rer 暴凤影音EnEdi tor v3 Adobe勾TrueType 造字程序 矗tfindows 资鴻管球爲 他程序兼容性向导M 画窗 ..J 记爭本迫漫游Windows XP血命令提示符Outlook Ex:pr Windows Media Flayer Windows Nl@ss«ng«r indo WE Movi & Maker<head><title></title></head><body></body></htnl>第三步，在<title> , v/title>里面编写上内容：我的第一个网页，并以*.html或*.htm为后缀保存文件;文件世）编辑⑧ 格式◎）查看（D 帮助迪<html><head>我的第一个网页</head><body></body> </htnl>第四步，打开网页，即可看见:文件编辑⑥ 查看迪收藏工具⑴帮肋QI）■-迟搜索收藏夹地址⑪罔C： \Eoc\unents and S0ttings*dmiid£trator\桌面\1. html第五步，在<body>, v/body>理编写上“这是我的第一个网页，欢迎光临！”，然后保存。
第四章 制作简单网页
第四章制作简单网页（文本和图像在网页中的使用）本章要点：●网页中插入文本●编辑文本●网页中插入图像●编辑图像●创建网页导航条一、在网页中插入文本1、插入文本（1）直接输入文本：注意分段的两种方式Enter，Shift+Enter（2）复制和粘贴文本：例：复制记事本中的一段文本内容注意尽量减少使用快捷键，有些内容只能通过菜单命令进行操作（3）导入文本：【命令】文件-导入-Word/Excel文档例4-1：新建一个网页文档，导入一个Excel文档到网页文档中，添加文本内容（标题：收入比较表，表格背景色天蓝，居中对齐）（4）输入特殊字符：版权符号，货币符号，注册商标号及直线等【命令】插入-文本-字符：标点类（不换行空格，换行符），货币类，版权类，其他字符（5）复制和粘贴HTML代码：如制作鼠标特效●在代码视图中制作鼠标特效【命令】查看-代码/代码视图在</body>标记前输入鼠标特效代码例：紧随鼠标的流动彩色字串●使用记事本制作鼠标特效【命令】记事本-另存为-保存类型（所有文件）-文件名.html例：跟随鼠标的时钟2、插入水平线和日期（1）插入水平线水平线：对信息的组织很有用，可使用水平线来分隔文本和对象，比使用段落更加分明，具有层次感插入记录-HTML-水平线例：导入word文件（目录），在每章节分隔处添加水平线（<hr />）（2）插入日期插入-常用-日期例4-2：打开一个网页文档，在文档中插入日期和时间1、应用标准格式：段落，标题2、设置文本字体：编辑字体列表3、设置文本字号：4、设置文本颜色：改变网页文本默认颜色（修改-页面属性）5、设置文本对齐方式例4-3：新建一个网页文档，在文档中插入文本内容，设置文本内容属性标题：大小24像素，蓝色，粗体，华文行楷，居中对齐正文：楷体，18像素，缩进三、在网页中插入图像1、图像格式：●Gif：256色，适合显示色调不连续或具有大面积单一颜色的图像（导航条，按钮，图标等具有统一色彩的图像）●JPEG：用于摄影或连续色调的图像。
html记事本案例
html记事本案例
HTML记事本是一个简单的文本编辑器，用于创建和编辑HTML
文件。
它通常用于初学者学习HTML编程语言时进行实践和练习。
下
面我将从多个角度来介绍HTML记事本的案例。
1. 功能，HTML记事本提供基本的文本编辑功能，包括创建、
打开、编辑和保存HTML文件。
它通常具有简单的代码高亮显示功能，以帮助用户更容易地识别和编辑HTML标记。
2. 用途，HTML记事本主要用于编写和编辑HTML代码。
它适用
于初学者学习HTML语言，也可以用于快速编辑和查看HTML文件，
例如在网页开发过程中对代码进行调试和修改。
3. 用户界面，HTML记事本通常具有简洁的用户界面，包括菜
单栏、工具栏和编辑区域。
用户可以在编辑区域输入和编辑HTML代码，并通过菜单栏或工具栏进行文件操作和其他功能操作。
4. 实例，例如，当用户需要创建一个简单的网页，可以使用HTML记事本编写HTML代码，包括文本、图像和超链接等元素。
用
户可以在编辑器中编写代码并保存为HTML文件，然后在浏览器中打
开预览效果。
5. 学习工具，对于初学者来说，HTML记事本是一个理想的学习工具，因为它简单易用，让用户专注于学习和实践HTML语言的基本知识和技能。
总之，HTML记事本作为一个简单的文本编辑器，提供了基本的HTML编辑功能，适用于学习、练习和快速编辑HTML代码。
它在网页开发和学习过程中发挥着重要的作用。
希望这些信息能够帮助你更好地了解HTML记事本的案例。
利用记事本完成网上注册工作
ｌ ｃ ｌ ｏ ｔｉ ｏ ｍ ｆ ｅ ｔ ａ ｄ ｔ ｅ ｉ ｆ ｒ ｔｏ ｏ ｌ ｅ ｒ ａ ｎ ｌ ｄ ｉ ｎ ｗｅ ． ｈ ｌ ｈ ｒ ｓｓ ｍｅ ｈ ｎ ｏ ｇ ｏ ａ ｈ ｓ ｎ ｆ ｒ ｏ ｘ ， ｎ ｈ ｎ ｏ ｍａ ｉ ｎ ｃ ｕ ｄ ｂ ｅ ｄ ａ ｄ ｆ ｌ ｎ ｏ ｂ Ｗ ｉ ｔ ｅ ｅ ｉ ｏ ｔ ｉ ｇ ｗｒ ｎ ｔ ｉ ｅ ｅ
ｓ ｖ ｄ Ｔｈ ｓｍ ｅｈ ｄ ｉ ｏ ｖ ｎ ｅ ｃ ｒｔ ｅ ｕ ｅ ｓｗｈ ｎ ｏ ｒ ｇｉｔｒｏ ｂ ｓ ｍｅ ｉ ｅ ． ａｅ． ｉ ｔ ｏ ｓｃ ｎ ｅ ｉ ｎ ｅ ｆ ｓ ｒ ｏ ｗａ ｔ ｅ ｓｅ ｎ ｗｅ ｏ ｔ ｏ ｈ ｔ ｍ ｓ
ｌｃ ｌｏｔ Ｗ ｈ ｎｔｅｂｅ ｋ ｏ ｅｔ ｄ ｔｅｒｇｓ ａｉｎｔｓ ａ ｅｃｍｐｅｅｂ ａ ｉｇｔｅｉｆｒ ｔ ｎｊｓ ｏ ａｈ ｓ． ｅ ｒａ ｄ ｗｎｉ ｓｔｅ ，ｈ ｅ ｉｔ ｔ ａｋｃｎｂ ｏ ｌ ｙ ｌ ｄｎ ｈ ｎｏｍａｉ ｕｔ ｈ ｓ ｌ ｒ ｏ ｔ ｏ ｏ
放 在逻辑 代码 页 面ｒ ，本文 中的处理代 码均 放在逻 辑代 码 贞面 中． ｆ １
１ ． ＴＦａ ｗ ｒ 供 的 文 件 读 写 操 作 ＮＥ ｒｍｅ ｏｋ提
ＮＥ ｒｍｅ ｒ Ｔ Ｆａ ｗｏｋ提 供 了一 个 Ｓ ｓ ｍ． 命名空 间 ，其 中包含所有 和 １ 输入 、输 ｍ操 作 有关 的类 ， ｙｔ Ｉ ｅ Ｏ ／ Ｏ ＦｌＳｒａ 类 用于 文件的读 写操作 ，Ｓｒａ ｅｄ ｒ 用于读 取 Ｓｒａ ｉ ｔ ｍ ｅ ｅ ｔ ｍＲ ａ ｅ 类 ｅ ｔ ｍ类 中的字符 ，Ｓｒａ ｅ ｔ ｍＷｒｅ 类用 丁（ ｅ ｉｒ ｔ 向
ｉ ｅ ｎ ｔ ｒ ｒｔ ｅｌ ｃ ｌ ｏ ｔ ａ ｏ ｏ ｎ ｃ ｔ ｅ ｎ ｔ ｅ ｗｏ ｋ ｏ ｈ ｏ ａ ｈ ｓ ｎ ｎ ｔｃ ｎ ｅ ｔｗｉ ｒ ｍｏ ｅ ｓ ｒ ｅ ， ｈ ｆ ｒ ｔｏ ｆ ｅ ｉｔａ ｉ ｎ ｃ ｎ ｂ ａ ｅ ｎ ｈ ｃ ｈ ｔ ｅ ｖ ｒ ｔ ｅ ｉ ｏ ｍａ ｉｎ ｏ ｇ ｓ ｒ ｔｏ ａ ｅ ｓ ｖ ｄ ｉ ｎ ｒ
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
制作人：正元设计个人设计网站：/邮箱：**************
第九章网页制作
实验一用记事本建立简单的HTML文件
【实验目的】
学会用HTML语言建立一个简单的网页。
【实验内容】
建立一个网页，布局自定，包括自我介绍、图片、自己的电子信箱地址等，要求在标题与正文之间插入一条水平线。
(实验中所用到的图片、音乐等素材均可在计算中心配备的计算机中找到，具体路径为C:\DATA)
【实验步骤】
1、启动“记事本”和“IE浏览器”，并纵向平铺两窗口；
2、在“记事本”窗口输入下面的代码：
<html>
<head>
<title>欢迎光临悠悠小屋</title>
</head>
3、保存该文件到D:\myweb文件夹中，取名为“yoyo.htm”；（注意，文件的扩展名一定
为.htm或html；如果没有myweb文件夹，请建立之）
4、在IE浏览器的地址栏输入d:\myweb\yoyo.htm；显示如图9-1；
图9-1 网页头部代码与相应显示
5、在“记事本”窗口输入以下语句：
<body>
<h2 align="center"><font color="blue" face="楷体" >
欢迎进入悠悠网</font>
<p><img border="0" src="d:\myweb\woman.gif" Width="138" height="169">
</p></h2>
6、保存记事本文件，并刷新IE浏览器窗口，显示如图9-2；（请先将C:\data中的woman.gif
文件复制到D:\myweb下）
图9-2 字体与图片代码与相应显示
7、在“记事本”窗口输入以下语句(注意被超链接的文件地址书写格式)：
<hr>
<p align="center"><font face="幼圆" size="3" color="#3366FF">我叫悠悠，这里是我的家，欢迎大家来这里听歌喝茶（当然也有coffee了）！</font></p>
<p align="center">撒拉.布莱曼的<a href="file:///D:/Myweb/Music/moon/there for me.mp3">《There for me》</a></p>
<p align="center">撒拉.布莱曼的<a href="file:///D:/Myweb/Music/moon/THe Winter of July.mp3">《The Winter of July》</a></p>
8、保存记事本文件，并刷新IE浏览器窗口，显示如图9-3；
图9－3 超链接代码与相应显示
9、在“记事本”窗口输入以下语句(注意发送电子邮件的超链接的书写格式)：
<p align="left"><font color="#808000" face="幼圆">还想听什么歌，告诉我啊！
<ahref="mailto:******************">******************
</a></font></p>
</body>
</html>
10、保存记事本文件，并刷新IE浏览器窗口，显示如图9-4；
图9－4 邮件超链接代码与相应显示
11、自此，该网页设计结束，点击超链接，检查链接是否正确，如果不正确，检查被链
接文件是否在其设定的目录内。
实验二使用FrontPage 2000设计个人网页
【实验目的】
通过本实验，使学生掌握利用FrontPage 2000建立简单个人网页的方法。
【实验内容】
1、创建有框架网页；
2、插入图片，并设置图片的超级链接；
3、设置背景图案和背景音乐；
4、插入活动字幕；
5、设置悬停按钮；
6、设置邮件地址超链接。
【实验步骤】
1、创建有框架网页。
（1）启动FrontPage 2000；
（2）单击“文件”－>“新建”－>“网页”；
（3）在弹出的“新建”对话框中，选择“框架网页”选项卡；
（4）单击“目录”图标－>“确定”，如图9－5；
图9－5 新建框架网页
（5）单击左侧和右侧框架的“新建网页”按钮，建立两个新页面；
（6）单击“保存”按钮；
（7）在弹出的“另存为”对话框中，给左边的框架取名为“left”，给右边的框架取名为“right”，给整个框架取名为“index”，如图9－6；
图9－6 框架网页的保存
（8）在左侧框架任意位置右击，在弹出的快捷菜单中，选择“框架属性”；
（9）在弹出的“框架属性”对话框中，将“可在浏览器中调整大小”前的对勾去掉，并在“显示滚动条”下拉列表中选择“不显示”，如图9－7；
图9－7 “框架属性”设置
（10）单击“框架网页”按钮，在弹出的“网页属性”对话框中，去掉“显示边框”前的对勾，如图9－8；
图9－8 “网页属性”对话框
（11）在右窗口输入网页介绍文字，其字体、段落格式的设置同WORD，略；
2、插入图片，并设置图片的超级链接
（1）在左窗口任意位置单击，点击“插入”－>“图片”－>“来自文件”；
（2）在弹出的窗口中选择已经编辑好的图片（C:\DATA目录中）；
（3）单击图片，出现“图片”工具栏；
（4）选择“图片”工具栏中的“长方形热点”工具按钮；
（5）在图片的“网页介绍”四个字区域自左上至右下拖动鼠标，拖出热点区域；
（6）松开鼠标，在弹出的“插入超链接”对话框中，选择文件RIGHT.HTM；
3、设置背景图案和背景音乐。
（1）单击右框架任意位置，单击“格式”－>“背景”，在弹出的“网页属性”对话框中，选择已存在的图片，如图9-9；
图9-9 设置背景图案
（2）右击左窗口，在弹出的快捷菜单中，选择“网页属性”；
（3）在“网页属性”对话框中，选择“常规”选项卡，单击“浏览”按钮选择背景音乐文件；
（4）如果希望音乐循环播放，则选择“不限次数”，如图9－10；
图9－10 设置背景音乐
4、插入活动字幕
（1）在需要插入活动字幕的位置单击，设置插入点；
（2）单击“插入”－>“组件”－>“字幕”，弹出“字幕属性”对话框，如图9－11；
图9－11 “字幕属性”对话框
（3）在“文本”编辑框中输入显示的活动字幕；
（4）适当设置“方向”、“速度”、“表现方式”，单击“确定”，如图9－12；
图9－12 “字幕属性”输入
5、设置悬停按钮。
（1）选择相应文字，如邮件地址；
（2）选择“格式”－>“动态HTML”，显示“DHTML 效果”工具条，如图9－13；
图9－13 “DHTML 效果”工具条
（1）在“选择一种事件”下拉列表中，选择“鼠标悬停”；
（2）在“应用”下拉列表中选择“格式”；
（3）在“选择设置”下拉列表中选择“字体”；
（4）在“字体”对话框中适当设置，使得鼠标在此处悬停时，产生变化；
6、设置邮件地址超链接。
（1）选中邮件地址，在选中区域右击；
（2）在弹出的快捷菜单中，选择“超链接”；
（3）在弹出的“插入超链接”对话框中，选择“链接到”－>“电子邮件地址”；
（4）在电子邮件文本框中输入自己的电子邮件地址，如图9－14；
自此，一个简单的个人网页已经初具规模，读者可以依照本节的练习，完成其它超链接，如“音乐欣赏”、“个人心语”等。
有一点需要学生注意，虽然图片和音乐可以为网页添色
不少，但也影响了该网页的浏览速度，因此，读者尽量选取体积小的GIF、JEPG格式的图片文件、压缩比较高的音频文件，如WMA、MP3格式的文件。
图9－14 设置邮件地址超链接。