网页制作操作一
简单的网页制作教程-设计一个个人网站
题目：设计一个个人网站一、要求：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，我们这四个网页文件已经保存在我们建的文件夹里。
Dreamweaver1网页制作
Dreamweaver1⽹页制作1.站点1.1 创建站点点击菜单栏中站点进⾏站点创建，输⼊站点名称，路径1.2 设置图像⽂件夹1.3 站点管理站点的编辑、复制、删除2.页⾯属性栏2.1 外观1.设置页⾯整体的字体、⼤⼩、颜⾊2.背景颜⾊，背景图像，图像是否重复，怎么重复3.页⾯边距2.2 链接1.链接的字体、⼤⼩、颜⾊2.链接颜⾊：链接颜⾊：本⾝颜⾊变换图像链接：⿏标经过链接时的颜⾊ 已访问链接：已访问之后的颜⾊ 活动链接：⿏标点击时的颜⾊2.3标题1.能分为六层标题2.设置标题字体、颜⾊2.4 标题/编码1.⽹页名称2.5 跟踪图像跟踪图像”是Dreamweaver⼀个⾮常有效的功能，它允许⽤户在⽹页中将原来的平⾯设计稿作为辅助的背景。
这么⼀来，⽤户就可以⾮常⽅便地定位⽂字、图像、表格、层等⽹页元素在该页⾯中的位置了。
跟踪图像的具体使⽤是这样的：⾸先使⽤各种绘图软件作出⼀个想象中的⽹页排版格局图，然后将此图保存为⽹络图像格式（包括gif、jpg、jpeg和png）。
⽤Dreamweaver打开你所编辑的⽹页，在菜单中选择“修改>页⾯属性”，然后在弹出的对话框中的“跟踪图像”项中输⼊刚才创建的⽹页排版格局图所在位置。
再在图像透明度中设定跟踪图像的透明度，OK。
这样你就可以在当前⽹页中⽅便地定位各个⽹页元素的位置了。
使⽤了跟踪图像的⽹页在⽤Dreamweaver编辑时不会再显⽰背景图案，但当使⽤浏览器浏览时正好相反，跟踪图像不见了，所见的就是经过编辑的⽹页（当然能够显⽰背景图案）。
3.制作⽹页基本操作3.1 ⽂本3.11 添加⽂本直接编辑、复制粘贴、其他⽂件导⼊3.12 添加空格1.默认只能添加⼀个空格2.通过插⼊菜单 —— HTML —— 特殊字符 —— 插⼊空格3.Ctrl+shift+空格3.13 添加⽇期插⼊菜单进⾏操作3.14 插⼊⽔平线.通过插⼊菜单 —— HTML —— ⽔平线3.15 添加特殊字符.通过插⼊菜单 —— HTML —— 特殊字符3.16设置⽂本格式字体、⼤⼩、颜⾊3.17 分段与换⾏分段：enter换⾏：shift+enter3.18 设置段落格式1.对齐⽅式：2.列表变编号3.缩进3.2 图像3.21 常⽤图⽚格式1.GIF：特点：图⽚数据量⼩、可带动画信息、可透明背景显⽰，最⾼只⽀持265种颜⾊ ⽤途：⽹站logo、⼴告条、⽹页背景图像2.JPEG：特点：可⾼效的压缩图⽚的数据量、图⽚变⼩却不会丢失颜⾊画质 ⽤途：显⽰照⽚等颜⾊丰富的图像3. PNG：特点：融合了GIF能做透明背景的特点，⼜具有JPEG处理精美图像的特点 ⽤途：绘制⽹页效果图3.22 插⼊图像3.23 设置图像基本属性图像名称、宽、⾼、源⽂件、替代、边框3.24 图⽂混排1.边距2.对齐3.25 编辑图像1.裁剪2.锐化3.对⽐度、亮度4.重新采样5.优化（为图⽚瘦⾝）3.26 ⿏标经过更换图⽚特效插⼊菜单栏完成4.超链接4.1 内部链接——同个⽹站中的其他⽹页4.2 外部链接——不同站点或本站点以外的⽹页1.链接中输⼊链接地址2.⽬标中选择打开位置 _blank ：每点击⼀次链接创建⼀个新的窗⼝ _self ：会在当前窗⼝、框架页⾯中打开 _new ：会在同⼀个刚创建好的窗⼝中打开 _parent ：如果是嵌套框架，会在⽗框架中打开 _top ：会在完整的浏览器窗⼝中打开4.3 链接样式参考2.24.4 锚点链接——到⽹页中某⼀特定位置1.选中要命名的锚点点击锚点，对该锚点命名2.选择链接点，当前页⾯：在链接中输⼊ #锚点名其他⽹页：⽹页地址#锚点名4.5 E-mail电⼦邮件链接选中需要连接部分，点击电⼦邮件链接，输⼊链接地址4.6 下载链接1.当⽂件是exe⽂件、zip、rar类型问件时浏览器⽆法直接打开，便会提⽰下载4.7 空链接1.在链接中输⼊#2.⼀般导航栏中⾸页位置就是⼀个空链接4.8 图像热区链接在图像中绘制⼀块区域，创建链接4.9 图像导航条图像超链接4.10 跳转菜单选中表单中的跳转菜单，进⾏编辑4.11 脚本链接——通过触发脚本命令在链接中输⼊脚本代码1. 添加到收藏夹：javascript:window.external.addFavorite('⽹址','名称')2. 表⽰关闭窗⼝：javascript:window.close()3. 表⽰弹出⼀个提⽰对话框：javascript:alert('hello!')4. 设置为默认主页：（需通过空链接#,触发onClick事件）在链接中输⼊#选中链接点，在代码中#后输⼊onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('⽹址')"4.12 超链接的管理1.连接路径： 绝对路径：链接中使⽤完整URL地址 相对于⽂档的路径：../ 表⽰上⼀层⽂件夹 相对于站点根⽬录的路径：/ 表⽰根⽬录2. ⾃动更新链接：⽂件位置变动，⾃动更新⽹页中链接路径3. 检查连接5.表格5.1插⼊表格，进⾏设置5.2 选定表格、单元格进⾏设置5.3 表格嵌套在单元格中插⼊表格5.4 应⽤表格布局页⾯5.41 类型：1.国⼦型2.拐⾓型3.标题正⽂型4.左右框架型5.上下框架型6.综合框架型7.封⾯型8.flash型9.变化型5.42 页眉通常放置logo，⼴告条5.43 页脚放置版权信息、联系电话、⽹站介绍、备案信息等5.44 导航栏双倍单元格，空⼀格放⼀个信息，设置⾼度，内容位置5.45 信息栏6.框架6.1 框架⼀个框架就是⼀个区域，可以单独打开⼀个HTML⽂档，多个框架就组成了框架集6.2 创建框架选择框架结构，创建框架6.3保存框架有多少个框架就要保存多少次，再加最外层6.4 作⽤1.做⽹页的布局，将⽹页分成不同的部分2.简化⽹页的编写：⽹页之间相同的内容，只需要编写⼀次3.加快⽹页的浏览：每次⽹页只需要更新变化的那个框架的内容6.5设置框架集和框架属性⿏标单击框架边框，对框架进⾏设置6.6⾃定义框架1.拖动编辑窗⼝的边框：⿏标位于编辑窗⼝的边框，对边框进⾏拖动，创建新的框架2.按住 alt 键时拖动7.多媒体元素7.1多媒体元素flash多媒体元素⾳频多媒体元素视频多媒体元素7.2 插⼊flash多媒体元素7.21 flash动画插⼊flash动画⽂件，扩展名为 .swf7.22 插⼊flash按钮Dreamweaver⾃⾝带有⼀些flash按钮，也可⾃⼰做，⽂件扩展名为 .swf7.23插⼊flash⽂本7.24插⼊图像查看器7.25插⼊flash paper7.26插⼊flash视频7.3 插⼊⾳频多媒体元素8.AP DIV元素8.1. APAP：绝对定位元素，称为层，定位灵活8.2 创建AP DIV1.点击布局中的绘制层，直接在页⾯中绘制2.按住绘制层，拖动⾄页⾯中，这样的层⼤⼩⼀定，颜⾊⼀定，可设置8.3 编辑AP DIV点击层左上⾓，在属性栏中设置8.4 层的可见性设置在窗⼝菜单中打开层，即可对层可见性进⾏设置8.5 层的嵌套将光标置于层中，进⾏绘制8.6 与表格的转换下修改菜单中，选择转换，将层转换为表格，或表格转换为层9.⾏为特效9.1.添加在窗⼝菜单中（或 shift+F4）打开⾏为，选择所要添加⾏为的部分，进⾏添加，添加后选择事件启动⾏为步骤：选择对象、添加动作、调整事件9.2 事件1.常见事件OnMouseOver ：⿏标经过OnMouseOut ：⿏标移开OnLoad ：页⾯打开OnUnLoad ：页⾯关闭其他：onClick ：单击onDbclick ：双击onKeyDown ：当按下任意键的同时产⽣。
网页制作第一节教案
【第六章第一节网页制作】教案一、【教学目标】1、理解网页与网站的概念3、掌握页面文件与图片的保存二、【教学重点】三、【难点、关键】1．建站点的位置2．页面文件与图片的保存四、【教学方法】演示、任务驱动法五、【课时安排】3课时六、【教学环境】多媒体教育广播系统，Dreamweaver软件七、【教学过程】第1课时1．导入新课师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。
生：学生作答。
师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？概念：网页：通常我们在WWW上所能看到的每一个页面都称之为网页,它能够形象地比喻成一篇文章.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,能够形象地比喻成一本杂志或一本书.下面我们来学习如何用Dreamweaver这个软件制作网页。
2．新课讲述在制作个人网站之前，应先确定网站的主题。
2008奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设一、启动Dreamweaver，理解其工作界面“开始”-“程序”-“Macromedia Dreamweaver 8”Dreamweaver工作界面包括：菜单栏插入栏编辑窗口属性面板浮动面板组1．菜单栏（包括10个菜单项）符号所表示的含意黑色命令：表示该命令当前是可用的灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。
带有复选标记√的命令：表示该命令是一种可选择命令，若前面出现√标记，表示该命令正在使用；若没有√标记时，表示该命令没有被使用。
带有三角形▼的命令：表示在该命令下还有下一级子菜单命令。
带有省略号的…的命令：表示选择命令后会弹出一个相关的对话框。
《网页设计与制作》操作题
《网页设计与制作》操作题（一）题目一：根据图例要求，编辑给定网页，index.htm,jianli.htm,zuoping.htm,zuoyouming.htm，为指定网页添加文字，图片，超链接（导航超链接、邮件超链接），效果图如下。
（素材在“操作题（一）/题目一”文件夹下，简历文字在“简历.txt”、座右铭文字在“座右铭.doc”中），完成后上传教师机，文件名姓名+学号。
首页我的简历我的作品座右铭题目二：使用表格构造布局网页，效果图如下：(素材在“操作题（一）/题目二”中，文字在“表格布局.txt”中)，完成后上传教师机，文件名姓名+学号。
题目三：制作图片翻转的导航菜单，效果图如下：(素材在“操作题（一）/题目三”中) 完成后上传教师机，文件名姓名+学号。
《网页设计与制作》操作题（二）题目一：根据范例图片的效果，制作鼠标拖动图片到不同位置，实现拼图效果网页制作。
效果图如下，素材图片在“操作题（二）/题目一/images”目录下, 完成后上传教师机，文件名姓名+学号。
题目二：使用表格、布局视图设计、制作网站《我的相册》，效果图如下，素材在“操作题（二）/题目二”目录下, 完成后上传教师机，文件名姓名+学号。
《我的相册》首页效果图“四季”效果图“万物”效果图“外面的世界”链接网址：/《网页设计与制作》操作题（三）题目一：使用表格、布局视图设计、制作购物网站首页，效果图如下，素材在操作题（三）目录中, 完成后上传教师机，文件名姓名+学号。
题目二：1、熟练使用搜索引擎查找所需素材并能够进行图片、文字、声音等素材的下载。
2、.学会分门别类地收集和整理素材。
3、学会图片格式转换和一般效果的处理。
Photoshop简单处理图片、软件"格式工厂”转换图片格式。
4、学会声音和视频的简单截取和格式转换等操作。
软件“视频编辑专家”对视频进行截取、分割、合并、格式转换等操作。
利用软件“GoldWAVE”对声音进行录制、截取、拼接、转换。
网页设计与制作实用教程(第3版) 第1章-网站开发基础
1.1.2 网站的类型及定位
2．电子商务网站 电子商务网站是目前最具发展潜力的网站类型。电 子商务网站提供网上交易和管理等全过程的服务， 因为它具有广告宣传、咨询洽谈、网上订购、网上 支付、电子账户、服务传递、意见征询、交易管理 等各种功能。
1.1.2 网站的类型及定位
3．视频分享网站 视频分享网站为用户提供视频播客、视频分享、视 频搜索及所有数字视频内容的存储和传输服务。可 供用户在线观看最新、最热的电视、电影和视频资 讯等。
1.1.3 认识网页
表单：访问者要查找一些信息或申请一些服务时需 要向网页提交一些信息，这些信息就是通过表单的 方式输入到Web服务器，并根据所设置的表单处 理程序进行加工处理的。表单中包括输入文本、单 选按钮、复选框和下拉菜单等。 超链接：超链接是实现网页按照一定逻辑关系进行 跳转的元素。 动态元素：动态元素包括GIF动画、Flash动画、 滚动字幕、悬停按钮、广告横幅、网站计数器等。
网页设计与制作实用教程（Dreamweaver+Flash+Photoshop（第3版））
第1章 网站开发基础
本章主要内容：
网站开发概述 网站开发流程 常用网页设计软件 HTML入门
1.1 网站开发概述
网站开发就是使用网页设计软件， 经过平面设计、网络动画设计、网页排 版等步骤，设计出多个页面。这些网页 通过一定逻辑关系的超链接，构成一个 网站。
1.1.2 网站的类型及定位
网站是一种新型媒体，在日常生活、商业活动、娱 乐游戏、新闻资讯等方面有着广泛的应用。在网站 开发之前，需要认识各种网站的主要功能和特点， 对网站进行定位。下面介绍几种常见的网站类型。
1.1.2 网站的类型及定位
1．综合门户网站 综合门户网站具有受众群体范围广泛，访问量高、信 息容量大等特点，包含时尚生活、时事新闻、运动娱 乐等众多栏目。综合门户网站定位明确，以文字链接 为主要内容、版式和色彩较为直观、简洁。
Dreamweaver网页制作教程
Dreamweaver网页制作教程：定义站点网页教学网【转载】Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。
Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。
创建 Web 站点的第一步是规划。
为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。
决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。
请执行以下操作：启动 Dreamweaver MX 2004：选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。
出现“管理站点”对话框。
在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。
出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡，则单击“基本”。
出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。
在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。
该名称可以是任何所需的名称。
单击“下一步”。
出现向导的下一个界面，询问您是否要使用服务器技术。
选择“否”选项，指示目前该站点是一个静态站点，没有动态页。
单击“下一步”。
出现向导的下一个界面，询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。
在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。
随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”，出现向导的下一个界面，询问您如何连接到远程服务器。
从弹出式菜单中选择“无”。
您可以稍后设置有关远程站点的信息。
目前，本地站点信息对于开始创建网页已经足够了。
单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。
随即出现“管理站点”对话框，显示您的新站点。
网页制作教程第3章
3.2.2 插入图像
(2) 在【选择图像源文 对话框中点选【 件】对话框中点选【文 件系统】单选钮， 件系统】单选钮，在 ch3】 【ch3】文件夹的列表 框中选择要插入的图像 文件，单击【确定】 文件，单击【确定】按 如图3 所示。 钮，如图3-6所示。弹 出【图像标签辅助功能 属性】对话框。 属性】对话框。
3.1.1 添加文本
2. 插入空格 若要在文本中插入空格，可执行下列操作之一。 在菜单栏中选择【插入记录】→【HTML】→ 【特殊字符】→【不换行空格】命令。 按<Ctrl>+<Shift>+<空格>组合键。 在【插入】工具栏的【文本】选项卡中，选 择【字符】下拉列表框中的【不换行空格】命令。
3.1 添 加 文 本
3.1.1 添加文本 3.1.2 设置文本格式
3.1.1 添加文本
1. 插入文字 若要将文字添加到网页文档中，可执行下列操 作之一。 ◆直接在【文档】窗口中输入文字。 ◆从其他应用程序中复制文本，切换到 Dreamweaver，将插入点定位在【文档】窗口的【设 计】视图中，然后在菜单栏中选择【编辑】→【粘 贴】命令。 ◆在菜单栏中选择【编辑】→【选择性粘贴】命 令，弹出【选择性粘贴】对话框，然后选择需要的 选项。
3.3 添 加 声 音
3.3.1 适合网页使用的声音格式 3.3.2 链接到声音文件 3.3.3 嵌入声音文件
3.3.1 适合网页使用的声音格式
MIDI格式 1. MIDI格式 MIDI是 乐器数字接口” MIDI是“乐器数字接口”(Musical Instrument Digital Interface)的简称 其扩展名为MID MIDI记录的不是声音本 的简称， MID。 Interface)的简称，其扩展名为MID。MIDI记录的不是声音本 而是将每个音符记录为一个数字， 身，而是将每个音符记录为一个数字，从而形成声音文件的格 MIDI格式文件声音效果的好与差 格式文件声音效果的好与差， 式。MIDI格式文件声音效果的好与差，与用户计算机声卡质量 有直接关系。很小的MIDI MIDI格式文件就可以提供较长时间的声音 有直接关系。很小的MIDI格式文件就可以提供较长时间的声音 剪辑。 剪辑。 MP3格式 2. MP3格式 MP3格式 是运动图像专家组音频第3 格式， MP3格式，是运动图像专家组音频第3层(Motion Picture Layer-3)，或称为MPEG音频第3 MPEG音频第 Experts Group Audio Layer-3)，或称为MPEG音频第3层的一 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD mp3文件 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD 音乐相媲美。MP3技术用户可以对文件进行 流式处理” 技术用户可以对文件进行“ 音乐相媲美。MP3技术用户可以对文件进行“流式处理”，以 便用户不必等待整个文件下载完成即可收听该文件。 便用户不必等待整个文件下载完成即可收听该文件。
网页制作(综合技能实践)(网页编辑操作)
1. 利用FrontPage 2000制作一个嵌套式层次结构框架网页，如图1所示，并按照要求将此文件保存到考生文件夹内，名为page1.htm。
（15分）要求：新建嵌套式层次结构框架网页，设置右上方框架高度为64像素，标题为华文行楷，24磅，居中，将右上方框架保存为考生文件夹内的p1-1.htm；在左框架中设置宽度为150像素，文字“纽约迪斯尼乐园夏威夷洛杉矶”为蓝色，分别链接到考生文件夹下的200465003858.jpg，将左框架保存为p1-2.htm；设置右下方框架的背景为D18.jpg，将右下方框架保存为考生文件夹内的p1-3.htm；将编辑好的框架网页保存在考生文件夹内，命名为page1.htm。
图12．请利用FrontPage2000建立一个如图2所示的网页，并按照要求将此文件保存到考生文件夹内，名为page2.htm。
(15分)要求：插入2行4列表格，表格水平居中，表格宽度为63%；放图片的单元格设置为宽度21%，高度69像素，放文字的单元格设置为宽度25%，高度80像素；单元格中插入的图片为第一列：2.jpg，j028.gif，第三列为：d003.gif，z004.gif；表格的顶端标题文字为幼圆，蓝色，24磅，加粗，居中对齐；第一行单元格中文字为橄榄色，第二行单元格中文字为绿色；选择考生文件夹内的图片文件5.jpg为网页背景；将编辑好的文件保存为考生文件夹内的page2.htm。
图２3．李某收集了各式各样的古董相机，并经常拿来在网上进行二手交易，这次他准备把一部莱卡M3德国相机拿出来拍卖，起拍价为10000元，每次增额必须大于500元，最后这部相机是被账号为“photo***”的顾客以12500元的价格拍得。
（提示：李某的C2C商城的账号为lj***，添加拍卖产品前先添加一级目录?照相器材，以及在此目录下的二级目录?古董相机，拍卖产品的详细信息可酌情自拟，***代表准考证号的后3位）（15分）4．王某在互联网上开着一家小店专营手机电池，店名叫“超越电池***”，并将“超越电池***”登录到搜索引擎，希望借此吸引更多的客户，以扩大小店的知名度。
计算机1级 网页制作1
四、网页制作操作所需素材均存放于考生文件夹的Web子文件夹中，参考样页按下列要求进行操作。
1. 打开站点“Web”，编辑网页Index.htm，将其标题设置为“可持续发展概念”，设置下框架初始网页为main.htm，并设置main.htm背景图片为bg.gif；2. 参考样页，在上框架网页中插入图片title.jpg，设置其宽度为100%；设置上框架高度为90像素，所有框架均不显示边框；3. 参考样页，在下框架网页中，为小标题文字“生态可持续发展”、“经济可持续发展”和“社会可持续发展”设置图片项目符号，图片采用arrow.bmp；4. 在下框架网页文字的下方插入交互式按钮，输入文字“更多”，并建立超链接，指向“可持续发展.htm”，目标框架为相同框架；5. 设置下框架网页过渡效果为圆形收缩，离开网页时发生，周期为2秒；6. 完善PowerPoint文件Web.ppt，并发布为网页，链接到网页中，具体要求如下：（1）所有幻灯片应用设计模板Capsules.pot；打开Web.ppt，删除最后一张幻灯片，并将第四张幻灯片与第五张幻灯片互换位置；(2) 除标题幻灯片外，设置其它幻灯片标题的动画效果为盒状、方向向外，单击时开始；（3）在最后一张幻灯片的右下角插入一个“第一张”动作按钮，超链接指向首张幻灯片；(4) 除标题幻灯片外，在其它所有幻灯片中插入图片map.gif，设置图片宽度为260像素，保持纵横比，设置其亮度及对比度均为60％，置图片于底层；(5)将list.txt中的内容作为第二张幻灯片的备注；（6）将制作好的演示文稿以文件名：Web，文件类型：演示文稿（*.PPT）保存，同时另存为Web页，文件名为Web.htm，文件均存放于考生文件夹下的Web站点中；（7）参考样页，为上框架网页中的图片建立超链接，指向Web.htm，目标框架为“新建窗口”。
7. 将所有修改过的网页以原文件名保存，文件均存放于考生文件夹下的Web站点中。
网页制作基础教程
网页制作基础教程网页制作是一项包含许多技术和概念的复杂过程。
在本教程中，我们将为您提供一些基础知识，帮助您开始学习和理解网页制作的重要方面。
首先，让我们来了解一些常用的网页制作术语。
在网页中，HTML（超文本标记语言）是一种用于创建网页结构和内容的标记语言。
与HTML相关的另一个重要技术是CSS（层叠样式表），它用于控制网页的样式和外观。
此外，JavaScript是一种用于添加交互性和动态功能的编程语言。
在开始编写网页之前，您需要一个文本编辑器。
Windows上的常见文本编辑器包括Notepad++、Sublime Text和Visual Studio Code等。
对于Mac用户，TextWrangler和Sublime Text也是很受欢迎的选择。
一旦您选择了合适的文本编辑器，就可以开始编写HTML了。
在一个HTML文件的起始位置，您需要添加一个<! DOCTYPE>声明，它告诉浏览器您正在使用的是哪个HTML版本。
然后，使用<html>标记来定义HTML文档的根元素。
在<head>元素中，您可以添加一些元数据，例如<title>标记，用于定义网页的标题。
您可以使用<link>标记引入CSS文件，并使用<script>标记引入JavaScript文件。
在<body>标记内，您可以创建并组织网页的内容。
常见的HTML元素包括标题（<h1>到<h6>），段落（<p>），图像（<img>）和链接（<a>）等。
您可以使用CSS样式属性来修改这些元素的外观和布局。
例如，在CSS中，您可以使用选择器来选择具有相同样式的元素。
选择器可以是元素名称、类名或ID。
然后，您可以为这些选择器添加属性和值，例如颜色、字体大小和边框。
最后，如果您希望网页具有交互性和动态功能，您可以使用JavaScript。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页制作操作一
一、实验范例
1．在C:\创建站点FL19。
2．打开网页index.htm，将jxydjs.txt中标题和前三段文本复制到index.htm中。
3．将标题文字“极限运动（Extreme--Sports）介绍”放置在独立的一个段落中，并设置格式为华文行楷、24像素、#000066、居中；设置正文首行缩进2个汉字的位置；在标题上方插入一条高为3像素的蓝色水平线。
4．在网页的开头水平线上方采用默认对齐方式插入一张图片logo.gif，在图片下方增加左右交替滚动的文字“极限运动风靡全球”，字体为幼圆、14像素，文字在蓝色(#6699FF)背景上滚动，滚动延迟时间为300毫秒。
5．在滚动文字的下方依次插入图片n01.gif、n02.gif、n03.gif、n04.gif；利用站点中的Applet程序文件fprotate.class，逐张播放图像t1.jpg、t2.jpg、t3.jpg和t4.jpg，大小为高70、宽180；在logo.gif右边插入falsh播放文件1.swf。
查看并测试网页。
二、实验内容
1．利用实验素材创建站点SY19。
2．在站点SY19新建网页index.htm，设置网页标题为：蔬菜；将lssc.txt中的文本复制到index.htm。
3．将网页index.htm标题文字“绿色蔬菜”的格式设置为华文新魏、24像素、#6633CC、居中；将标题文字“绿色蔬菜”下面的一段正文首行缩进2个汉字的位置；把原来的数字编号的段落修改成默认项目列表的段落。
4．在index.htm网页的开头(标题文字“绿色蔬菜”上面)采用默认对齐方式插入图片logo.gif，在文档末尾增加左右交替滚动的文字“环境保护，人人有责”，字体为隶书、16像素，文字在绿色背景(#00FFFF)上滚动，滚动延迟时间为100毫秒。
5．为index.htm网页增加循环播放的背景音乐can.mid；将网页中文字“食用菌类”修改成华文行楷、16像素、转滚颜色为#000066的Flash文本；将网页中文字“海藻类植物”修改成Flash按钮，按钮样式：Beveled-Rect-Green，字体为华文楷体、大小为16像素。
6．把index.htm网页滚动的文字“环境保护，人人有责”下方输入自己的完整学号、姓名，并设置自行选择适当的格式（例如文字格式、字幕、Flash文本等）。
7．在网页index.htm的设计窗口首行输入文字：绿色建筑，并在代码窗口对该行作如下
修改：<p><a href="lsjz.htm">绿色建筑</a> </p>。
查看并测试index.htm网页，效果如图所示。
8．在站点sy19新建网页lsjz.htm，设置网页标题为：绿色建筑；图片bj1.jpg作为网页的背景，并且设置当文字在浏览器中上下滚动时，背景图片不随之滚动；网页内容在lsjz.txt 中。
9．将网页lsjz.htm标题文字“绿色建筑离百姓还有多远”的格式设置为隶书、36像素、蓝色、居中。
10．在网页lsjz.htm中插入图像bridge.jpg，设置图像左右、上下与文本的距离为6像素；图像边框宽度为3像素，与文本右对齐。
11．在网页lsjz.htm的设计窗口首行输入文字：返回首页，并在代码窗口对该行作如下修改：<p><a href="index.htm">返回首页</a></p>。
12．在网页lsjz.htm首行文字“返回首页”的左侧，利用站点中的Applet程序文件lake.class 使图像water.jpg产生水中倒影的效果，设置参数“image”的值为“water.jpg”，大小为高161、宽256。
13．将C:\WINDOWS\Media文件夹下的chimes.wav声音文件导入到站点中，在lsjz.htm 中插入多媒体插件宽200，高100，位置在上题插入的Applet程序左侧，播放该声音文件chimes.wav，要求插件绝对居中。
14．在lsjz.htm网页标题文字“绿色建筑离百姓还有多远”下面显示存储网页的时间日期及版权符号、本人的专业及姓名，要求存储网页的时间日期可以随网页存储自动更新。
查看并测试网页lsjz.htm，效果如图所示。