实验5-Dreamweaver网页制作与设计(一)创建网站-第13周共27页文档
dreamweaver网页设计实验指导书
网页设计实验指导书（一）DreamWeaver静态网页制作第一章网站规划 ................................................................................................... - 3 - 第二章Dreamweaver静态网页设计实验 ...................................................... - 8 - 实验一在Dreamweaver中建立一个站点.................................................. - 8 - 实验二在网页中使用文本........................................................................... - 15 - 实验三超级链接的建立............................................................................... - 21 - 实验四网页图像的应用............................................................................... - 29 - 实验五网页表格操作 ..................................................................................... - 36 - 实验六利用表格进行网页布局..................................................................... - 39 - 实验七利用层进行网页布局....................................................................... - 48 - 实验八行为和图层的应用............................................................................. - 53 -实验九框架型网页的制作........................................................................... - 66 - 实验十一交互式表单的应用..................................................................... - 84 - 实验十二HTML语言基础应用 .................................................................... - 90 - 实验十三网页动态效果辑............................................................................. - 97 - 实验十四CSS样式表的创建及运用....................................................... - 106 -第一章网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。
实验五网页的简单制作PPT参考课件
• 关于“布局”模式 • 从“标准”模式切换到“布局”模式 • 在“布局”模式中绘制 • 将内容添加到布局单元格中 • 清除自动设置的单元格高度 • 调整布局单元格和表格的大小以及移动它们 • 设置布局单元格和表格的格式 • 设置列宽度
设置模板首选参数。 • 您可以在模板的“设计备注”文件中存储关于模板的附加信息（如创作者、
最后一次更改的时间或作出某些布局决定的原因）（基于模板的文档不继承 模板的设计备注。 • 若要创建模板，请执行以下操作： • 打开要另存为模板的文档： • 若要打开一个现有文档，请选择“文件”>“打开”，然后选择该文档。 • 若要打开一个新的空文档，请选择“文件”>“新建”。在出现的对话框中， 选择“基本页”或“动态页”，选择要使用的页面类型，然后单击“创建”。 • 文档打开时，执行下列操作之一： • 选择“文件”>“另存为模板”。 • 在“插入”栏的“常用”类别中，单击“模板”按钮上的箭头，然后选择 “创建模板”。 • 除非您以前选择了“不再显示此对话框”，否则您将收到一个警告，表示您 正在保存的文档中没有可编辑区域。单击“确定”将文档另存为模板，或单 击“取消”退出此对话框而不创建模板。 • 出现“另存为模板”对话框。
– 设置好 Dreamweaver 站点后，最好将该站点导出，以便拥有一个本地备份副本。有关 更多信息，请参见导入和导出站点。
• 设置本地文件夹 • 本地文件夹是 Dreamweaver 站点的工作目录。此文件夹可以位
于本地计算机上，也可以位于网络服务器上。
• 若要设置本地文件夹，请执行以下操作： • 选择“站点”>“管理站点”。 出现“管理站点”对话框。 • 注意 • 如果您没有定义任何 Dreamweaver 站点，则会出现“站点定义”
Dreamweaver网页设计_实训报告
广播电视大学实训报告书一姓名学号专业/班级14秋计算机信息管理课程名称Dreamweaver网页设计教材网页设计与制作――Macromedia Dreamweaver 8任务编号01 任务名称使用Dreamweaver建立网站，建立一个名为“wywed”的网站思考题1、通过站点设置向导建立了站点之后，怎样进一步了解站点的设置可以进一步在高级模式下了解站点的设置2、对多个网站进行管理，要通过什么面板进行对多个网站进行管理是通过"文件"面板进行的3、思考建立一个个人网站应包括的内容、建立的栏目、需要的素材内容：文本、图形、链接、表格表单、Flash内容、计数器、时间戳栏目：主页日志相册留言关于素材：文本、图片、动画、midi、视频和音乐等考核内容及标准分值作品评语及成绩评定学生互评成绩20 非常熟练的完成操作，成绩：20设计与制作得分40心得及思考题得分40综合评语总分考核标准（分4个等级）1．优：在较好的完成实训任务书中的各项任务的基础上，有自己的创新，并能够应用所学的知识实现学生自己的设计想法。
2．良：能够按照要求完成实训任务书中的各项任务。
3．可：能够完成实训任务书中的各项任务，但有1－2个任务没有按照要求完成设计。
4．差：不能够完成实训任务书中的各项任务。
说明：1．浅灰色部分由学生填写2．白色部分为教师判分用3．本报告与学生实际作品相关联姓名学号专业/班级14秋计算机信息管理课程名称Dreamweaver网页设计教材网页设计与制作――Macromed ia Dreamweaver 8任务编号02 任务名称网页中插入导航条本次实训你掌握了哪些新的技术在网页中插入导航条正确设置导航条的各属性思考题1、怎样在页面中插入“鼠标经过图像”？在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。
使用以下方法之一插入鼠标经过图像：1）、在“插入”栏的“常用”类别中，单击“图像”按钮，然后选择“鼠标经过图像”图标。
怎么使用dreamweaver制作网页教程dw建站设计网页
怎么使⽤dreamweaver制作⽹页教程dw建站设计⽹页这⼀款专业的⽹页制作软件，相信相关专业的⼈员都不会陌⽣。
可以说，它是第⼀套针对专业⽹页设计师特别发展的视觉化⽹页开发⼯具，利⽤它可以轻⽽易举地制作出跨越平台限制和跨越浏览器限制的充满动感的⽹页。
这⾥西西给⼤家带来⼀个dreamweaver制作⽹页的教程，初学DW的朋友可以参考⼀下。
⼀、定义站点1、在任意⼀个根⽬录下创建好⼀个⽂件夹（我们这⾥假设为E盘），如取名为MyWeb。
***备注：⽹站中所⽤的⽂件都要⽤英⽂名。
2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。
在站点名称中输⼊⽹站的名称（可⽤中⽂），在本地根⽂件夹中选择刚才创建的⽂件夹（E:web）。
然后确定即可。
***备注：再次打开Dreamweaver，会⾃动找到刚才设⽴的站点。
如果有多个站点，可以在菜单“站点—打开站点”中去选择。
⼆、创建页⾯1、在本地⽂件夹E:\MyWeb下⾯的空⽩处，按右键选“新建⽂件”，这样就建好了⼀个页⾯，默认的⽂件名为untitled.htm。
htm 就表⽰这个⽹页⽂件是⼀个静态的HTML⽂件。
给它改名为index.htm。
***⽹站第⼀页的名字通常是index.htm或index.html。
其它页⾯的名字可以⾃⼰取。
2、双击index.htm进⼊该页⾯的编辑状态。
在标题空格⾥输⼊⽹页名称，按右键选页⾯属性，打开“页⾯属性”窗⼝。
在这⾥可以设置⽹站的标题、背景颜⾊或背影图像，超级链接的颜⾊（⼀般默认即可），其他都保持默认即可。
3．此时光标位于左上⾓，可输⼊⼀句话，如“欢迎来到我的主页”。
选取⽂字，⽤菜单“窗⼝/属性”打开属性⾯板，选取⽂字⼤⼩为6，再使⽂字居中，然后在⽂字前⽤⼏个回车使其位于页⾯中间。
4．如要选取字体，则选择字体中的最后⼀项：编辑字体列表。
然后在对话框中选+号，接着在“可⽤字体”栏中选择需要加⼊到字体列表中的⼀种字体，点击中间的按钮就可以加⼊了。
Dreamweaver网页设计实验
网页设计Dreamweaver实验实验1 网页元素的基本操作一．实验目的和要求1．掌握Dreamweaver中本地站点的创建2．掌握网页的新建、保存与浏览3．掌握文本的添加与格式化4．掌握图像元素的设置5．掌握表格的设置6．掌握对象的超链接二．实验内容和步骤在设计网页之前，我们必须首先建立网站，此后Dreamweaver会自动将所有网站资源（如网页文档、图片、动画、音频文件、视频文件、程序等）都保存到该网站文件夹之中，从而保证网站发布后网页上的所有元素都可以正常浏览。
网站分为本地站点与远程站点。
本地站点存放在本地硬盘上，远程站点存放在发布网站的服务器端。
这里我们介绍本地站点的创建。
1.创建本地站点①在E盘创建文件夹myweb，用来存放网站资源。
②启动Dreamweaver 8，依次单击菜单栏“站点/新建站点”命令，打开站点定义对话框，如图5-1所示。
图5-1 站点定义对话框③在“基本”选项卡中的第一个文本框中输入新建站点的站点名myweb，单击“下一步”按钮。
④在接下来的第二个对话框中，对于“是否打算使用服务器技术”选择“否，我不想使用服务器技术”，单击“下一步”按钮，如图5-2所示。
图5-2 是否使用服务器技术⑤在第三个对话框中，选择单选框“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”，在下侧的文本框中输入“E:\myweb\”，如图5-3所示。
图5-3 如何使用编辑文件⑥如果路径比较复杂，也可以单击文本框右侧的文件夹按钮，在弹出的“选择站点myweb的本地根文件夹”窗口中确定文件夹的位置，如图5-4所示。
图5-4 选择本地根文件夹⑦在第四个对话框中，对于“如何连接到远程服务器”，选择“无”。
单击“下一步”，如图5-5所示。
图5-5 连接远程服务器⑧在最后一个对话框中显示了刚建立的本地站点的信息，如图5-6所示。
图5-6 本地站点信息⑨单击“完成”按钮，结束站点定义。
此时可以在“文件”面板中看到我们定义的站点myweb，如图5-7所示。
第五章使用Dreamweaver制作网页
为名为topFrame框架指 定网页文件top.html
演示示例5：制作框架网页
20
制作框架网页
教员演示制作框架网页的步骤： 设置超链接
1、在left.html中设置超链接文本
right.html文件会在框架名 2、在属性窗口中，选择链接网页文件和输入目标框架名 为mainFrame窗口中显示
创建列表
7
什么是表格布局
单元格背 景图像 跨4列 单元格
表格背景色
跨3行 单元格
单元格 背景色
单元格内容居 中对其
如何实现这样的 表格布局？
使用表格进行布局时，一般把表格边框宽度 设为0，还有单元格的填充和间距也设为0。
8
表格的使用
教员演示创建表格布局页面： 创建跨行或跨列的表格
1、 “插入” ”表格”
16
小结2
使用Dreamweaver制作如下图所示的页 面效果
练习页面 练习答案
单选按钮 单行文本域
密码文本域
复选框
下拉列表
文本域
提交按钮 重置按钮
17
框架集页面 (FrameSet.thm)
框架网页
广告栏顶部框架 (top.html)
框架的 边框
导航栏左侧框 架(left.html)
详细内容页面右侧 框架(right.html)
第五章
使用Dreamweaver制作网页
本章任务
制作点卡购买页面
点卡购 买页面 客户中 心页面 用户注 册页面
制作用户注册页面
制作客户中心页面
2
本章目标
会用Dreamweaver实现已学的各类HTML 标签
用dreamweaver制作网页的实践报告
目录目录 0摘要 (2)正文 (3)网页制作过程大纲 (3)具体操作步骤 (3)制作过程简介 (4)制作网页前的准备： (4)开始制作网页： (4)网页制作的要点： (5)实践心得 (6)学到的知识： (7)网页制作心得： (8)一．页面的设计方面 (8)二．网页视觉效果 (8)三．网页的整体布局和导航 (8)四．网页中文字、图像 (9)五．网页制作过程中的其他注意事项 (9)Web考试网页制作摘要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
对于现在的社会，科技的飞速发展已经成为社会发展的标志。
其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。
计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet 的普及和发展，网络已经成为了不可或缺的通信手段。
不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。
但是什么为这所有的一切提供平台的呢。
我们又是通过什么来获取这些消息的呢——对就是网页。
现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。
在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。
网页是我们在网络上的“代言人”。
我们将什么样的信息传达给浏览者，要讲述什么样的事情，网页在这里起着重要的作用。
企业网站在企业的网络营销当中占有及其重要的地位，只要是涉及网络宣传的企业，都应该建立属于自己的个性企业网站。
他不仅能够让企业在网络上展示自己的产品，促进实际销售的增长，更能够通过一根网线，向目标客户展示企业自身的形象。
如何使用Dreamweaver进行网页设计和编写
如何使用Dreamweaver进行网页设计和编写第一章：Dreamweaver的介绍和安装1.Dreamweaver是什么Dreamweaver是一款功能强大的网页设计和编写软件，由Adobe公司开发。
它提供了直观的用户界面和丰富的功能，可以方便地创建和编辑网页。
2.Dreamweaver的安装在Adobe官网上下载Dreamweaver安装程序，运行安装程序并按照向导进行操作。
安装完成后，可以启动Dreamweaver开始网页设计和编写的工作。
第二章：创建新网页1.新建网页打开Dreamweaver，在菜单栏中选择“文件”->“新建”->“空白网页”，可以创建一个新的空白网页。
2.选择网页布局在新建网页的过程中，可以选择不同的网页布局。
可以根据需要选择固定布局或自适应布局，以及其他特定的布局选项。
第三章：编辑网页内容1.插入文本在网页中插入文本时，可以使用Dreamweaver提供的文本工具或直接复制粘贴文本。
还可以选择文本样式、大小、字体等。
2.插入图片和多媒体Dreamweaver支持插入图片和多媒体元素，可以使用菜单栏中的“插入”选项来插入图片、音频和视频等元素。
还可以设置它们的大小、位置和其他属性。
第四章：设计网页样式1.样式管理器Dreamweaver提供了样式管理器，可以轻松管理和编辑网页的样式。
通过样式管理器可以添加、删除和修改样式，还可以为不同元素设置不同的样式。
2.CSS样式可以使用CSS（层叠样式表）来设计网页的样式。
Dreamweaver提供了CSS编辑器，可以直观地编辑CSS代码，并且可以在代码视图和设计视图之间切换。
第五章：网页布局和导航1.布局工具Dreamweaver提供了丰富的布局工具，可以帮助设计和调整网页的布局。
可以使用表格、CSS布局、网格系统等来创建网页布局。
2.导航栏设计导航栏是网页中非常重要的一部分，可以使用Dreamweaver提供的导航栏工具来设计和创建导航栏。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
四、实验报告
根据“二、实验内容及步骤：”的目录 任选其中一个实验内容，将实验步骤写 在实验报告书上。
实验报告应该包括以下几点内容： 一、实验目的 二、实验内容 三、实验步骤 四、实验心的/总结
谢谢！
里直接阅览。
若运行正常则出现窗口如下图：
（三）创建新网页并测试预览 网页
网站设计好后，在该网站下创建两个新 网页：first.html和first.asp。并对他们进 行预览测试。如果预览成功，则如下图 所示：
图1（文件first.html）：
图2（first.asp）
网页源代码参考：
第二种方法：针对iis安装后不能正常启动的情 况。
步骤1、下载一个程序“aws.exe”绿色软件(或 是“简易iis服务器”)，并将文件复制到网站的 根目录下。
步骤2、点击运行该程序，即可自动运行网站 的默认首页。或是在浏览器里输入网址： localhost/index.html
127.0.0.1/index.html
设置“本地根文件夹”路径： D:\DM实例
2）设置“测试服务器”选项参数，如图：
在“测试服务器-URL前缀”一栏输入： localhost/DM站点/
在“测试服务器文件夹”一栏输入网站 的具体路径：
D:\DM实例
步骤3、最后在浏览器里测试并浏览网页， 选择“文件-在浏览器中预览-IExproler 6.0”或是按快捷键“F12”,如果连接正常 则如下图所示：
步骤4、选择第一项（默认推荐），并在“文 件存储位置”一栏输入具体路径，如“D:\DM 实例”，点击“下一步”，如图：
步骤5、在“如何连接到远程服务器”一栏选 择“无”，点击“下一步”。最后点击“完成” 即可。随后出现对话框，如图：再点击“完成” 即可。
（二）在dreamweaver中管理站点， 并和测试服务器建立连接
1、 First.html文件： <html> <head> <title>HTML实例</title> </head> <body> <font size=7>欢迎访问WEB！</font> </body> </html>
2、 first.asp文件： <% language="vbscript" %> <htmБайду номын сангаас> <head> <title>ASP实例</title> </head> <body> <% For i=3 to 6 %> <font size=<% =i %> > 欢迎访问WEB！<br> </font> <% next %> </body> </html>
步骤3、在 dreamweaver里面修改测试服 务器设置参数：
1）修改“高级-本地信息”的选项参数 在“http地址：”一栏输入 ： localhost/ 或者
127.0.0.1
2）修改“高级-测试服务器“一栏的参 数
在“URL前缀”一栏输入： localhost/ 或者
127.0.0.1/ 步骤4、最后按快捷键F12即可在浏览器
（一）在dreamweaver中建立 站点
假设需要D盘新建一个站点名为“DM站点”。 具体步骤如下：
步骤1、点击菜单“站点-编辑站点”，出现对 话框，如图：
步骤2、点击“新建”，出现站点定义对话框， 如图：
在”站点名称”一栏输入：“DM站点”，点 击“下一步”，如图：
步骤3、选择“否，我不想使用服务器技术” （如果用到.asp文件，则需要选择“是”）， 点击“下一步”，如图：
第一种方法：直接和iis服务器连接 步骤1、进入iis信息服务台，创建虚拟目
录，如命名为“DM站点”，并将虚拟目 录的路径指向刚才建立的站点“D:\DM 实例”；
步骤2、进入Dreamweaver修改站点的属性，如下图， 1）点击“高级”，修改“本地信息”选项参数：
在“本地信息-http地址：”一栏输入 ： localhost/DM站点/
一、实验目的
使用Dreamweaver制作一个简单的个人 网站，能够实现个人网站最基本的功能。 掌握Dreamweaver的基本操作、网页基 本元素的使用方法和操作技巧等。
二、实验内容及步骤：
1、在Dreamweaver中创建并管理网站
2、创建编辑新网页并测试预览 3、在outlook中设置本地邮箱