如何用记事本建立简单的网页
第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 代码。
- 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 设置邮件地址超链接。