网页制作操作一

题目：设计一个个人网站一、要求：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⽹页制作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”对声音进行录制、截取、拼接、转换。

Dreamweaver网页制作教程：定义站点网页教学网【转载】Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。

Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。

创建 Web 站点的第一步是规划。

为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。

决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。

请执行以下操作：启动 Dreamweaver MX 2004：选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。

出现“管理站点”对话框。

在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。

出现“站点定义”对话框。

如果对话框显示的是“高级”选项卡，则单击“基本”。

出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。

在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。

该名称可以是任何所需的名称。

单击“下一步”。

出现向导的下一个界面，询问您是否要使用服务器技术。

选择“否”选项，指示目前该站点是一个静态站点，没有动态页。

单击“下一步”。

出现向导的下一个界面，询问您要如何使用您的文件。

选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。

在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。

单击该文本框旁边的文件夹图标。

随即会出现“选择站点的本地根文件夹”对话框。

单击“下一步”，出现向导的下一个界面，询问您如何连接到远程服务器。

从弹出式菜单中选择“无”。

您可以稍后设置有关远程站点的信息。

目前，本地站点信息对于开始创建网页已经足够了。

单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。

单击“完成”完成设置。

随即出现“管理站点”对话框，显示您的新站点。

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．王某在互联网上开着一家小店专营手机电池，店名叫“超越电池***”，并将“超越电池***”登录到搜索引擎，希望借此吸引更多的客户，以扩大小店的知名度。

四、网页制作操作所需素材均存放于考生文件夹的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。