下载文档原格式
《企业网站开发》实验指导书计算机科学与技术学院2013-3目录实验一HTML语言标志 (1)【实验目的】 (1)【实验环境】 (1)【实验重点及难点】 (1)【实验内容】 (1)实验二使用Dreamweaver创建本地站点 (2)实验三网页编辑与超链接 (6)【实验目的】 (6)【实验环境】 (6)【实验重点及难点】 (6)【实验内容】 (6)实验四网页图像的应用 (7)实验五表格和布局表格 (10)【实验目的】 (10)【实验环境】 (10)【实验重点及难点】 (10)【实验内容】 (10)实验六CSS样式的应用 (11)【实验目的】 (11)【实验环境】 (11)【实验重点及难点】 (11)【实验内容】 (11)实验七层 (12)实验八Dreamweaver的框架和行为 (13)【实验目的】 (13)【实验环境】 (13)【实验重点及难点】 (13)【实验内容】 (13)实验九Dreamweaver的模版 (14)【实验目的】 (14)【实验环境】 (14)【实验重点及难点】 (14)【实验内容】 (14)实验十Dreamweaver表单 (15)【实验目的】 (15)【实验环境】 (15)【实验重点及难点】 (15)【实验内容】 (15)实验一HTML语言标志【实验目的】1．掌握<head></head>的<title>标记，和<meta>标记；2．掌握使用<body>标记设置网页背景颜色和文本颜色。
学习使用分段标记<p></p>；3．掌握使用<font>标记设置文字的属性；4．掌握在网页中插入背景图片；5．掌握在网页中插入水平线，并设置水平线的属性；6．掌握在网页中插入背景音乐。
【实验环境】Windows xp【实验重点及难点】掌握字体、水平线等常用标记。
【实验内容】1、制作一个简单的网页sy1-1.htm，用记事本编辑，内容为个人简介信息。
实验10 CSS 基础基础（（Dreamwaver8）一、实验实验目的目的1. 了解HTML 式样和CSS 式样。
2. 学会在Dreamwaver8创建CSS 式样。
3. 在Dreamwaver8中应用自定义的CSS 式样。
4. 学会用CSS 式样修饰网页。
二、实验实验理论理论1. HTML 式样和CSS 式样所谓HTML 式样和CSS 式样是针对文本的排版格式而言的。
HTML 是使用文本标记符号进行文本格式进行排版。
文本的排版格式主要涉及在文字中插入一些特殊的内容，如空格、特殊字符、日期、水平线等等；在文字和段落中设置字体式样、文字对齐和缩进、文字颜色、项目列表等等。
大多数的HTML 式样可以使用编辑属性方式进行，如图10-1所示。
在Dreamwaver8中的也有“属性”框，方便（a ） （b ） 图10-1 HTML 的首选参数用户对文字进行设置。
在菜单栏还提供了“文本”项菜单，方便用户对文字编辑。
如图10-2所示。
图10-2 “文本”编辑菜单CSS是英文Cascading Style Sheet的缩写，中文译为“层叠样式表”，它是一系列格式设置的规则，用来控制网页内容的各种显示风格。
使用CSS 设置页面格式时，内容与表现形式是相互分开的。
页面内容（HTML 代码）位于自身的HTML 文件中，而定义代码表现形式的CSS 规则位于另一个文件（外部样式表）或HTML 文档的另一部分（通常为<head> 部分）中。
使用CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。
CSS 还可以控制许多仅使用HTML 无法控制的属性。
例如，为所选文本指定不同的字体大小和单位（像素、磅值等），以确保在多个浏览器中以更一致的方式处理页面布局和外观。
CSS 格式设置规则由两部分组成：选择器和声明。
选择器是标识已设置格式元素（如P、H1、类名称或ID）的术语，而声明则用于定义样式元素。
第1篇一、实验目的1. 掌握网页设计的基本流程和原则；2. 熟悉网页制作的基本工具和软件；3. 学会使用HTML、CSS等网页制作技术；4. 提高网页布局和美化的能力；5. 提升团队协作和沟通能力。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 编程语言：HTML、CSS4. 编辑器：Visual Studio Code三、实验内容1. 网页布局设计2. 网页内容编写3. 网页美化4. 网页测试与发布四、实验步骤1. 网页布局设计（1）确定网页主题和风格：根据需求，选择合适的主题和风格，如简约、商务、创意等。
（2）绘制网页草图：使用绘图工具（如Photoshop、Illustrator等）绘制网页草图，包括导航栏、内容区域、侧边栏等。
（3）布局设计：根据草图，使用HTML和CSS进行布局设计。
使用HTML标签（如div、ul、li等）划分页面结构，使用CSS进行样式设置。
2. 网页内容编写（1）收集素材：根据网页主题，收集相应的图片、文字、视频等素材。
（2）编写HTML代码：使用HTML标签编写网页内容，如标题、段落、图片、列表等。
（3）编写CSS代码：根据网页布局设计，编写CSS代码，实现网页的样式设置。
3. 网页美化（1）图片处理：对收集到的图片进行裁剪、调整大小等处理，使其符合网页设计需求。
（2）动画效果：使用CSS3动画效果（如过渡、关键帧动画等）增强网页的视觉效果。
（3）背景音乐：根据网页主题，选择合适的背景音乐，增强网页的氛围。
4. 网页测试与发布（1）测试网页：在本地浏览器中预览网页效果，检查网页布局、样式和功能是否正常。
（2）调试问题：根据测试结果，对网页进行调试，修复存在的问题。
（3）发布网页：将网页上传至服务器，通过域名或IP地址访问网页。
五、实验结果与分析1. 网页布局设计：通过HTML和CSS实现网页布局，使网页内容层次分明，符合用户体验。
试验４绘制网页布局网页布局是网页设计中的一项重要的内容。
通过对本试验的学习，用户需熟悉掌握在布局时如中如何创建表格和布局单元格，以及设置他们的相关属性和参数。
说明页面布局是指页面的浏览器中显示的方式，比如导航的位置、图像的位置等等。
Dreamweaver 提供了布局视图功能，利用此功能可以使原来繁琐的页面布局工作变得简单而轻松。
对应知识点绘制布局表格和布局单元格设置布局单元格和表格的属性在布局单元格内添加内容对应《Macromedia Dreamweaver MX 2004 标准教程》第４章的内容。
试验课时：２课时新闻内容电子文档。
在本书配套光盘exp4-5\sucai04中包含该素材。
1．启动Dreamweaver MX 2004程序，选择菜单“文件”“新建”命令，创建HTML 网页。
2．按Ctrl+S键，将文件保存为page04.htm。
3．选择菜单“窗口”“插入”命令，打开插入面板。
选择下拉列表中的“布局”选项，打开布局面板。
如图4-1所示。
4．在布局面板中单击“布局”按钮，打开“从布局模式开始”提示框，显示在布局模式下绘制布局表格和布局单元格的说明。
如图4-2所示。
图4-1 选择下拉列表中的布局选项图4-2 “从布局模式开始”提示框说明在“从布局模式开始”提示框中，如果选中了“不要再显示此消息”复选框，则下次再选择“布局”按钮时将不再显示此提示框。
5．单击“确定”按钮，在空白文档顶部显示“布局模式”状态。
如图4-3所示说明单击“退出”按钮，将返回“标准模式”。
这时“布局表格”和“绘制布局单元格”按钮将变成灰色按钮按钮，这表示两个对象不能在标准视图下使用；而原来灰色的“表格”、“插入Div标签”和“绘制层”等按钮图4-3 文档顶部显示“布局模式”状态则变成了彩色按钮按钮按钮，此时可以使用这三个对象进行页面布局。
６．在布局面板上进行单击“布局表格”按钮。
如图4-4所示。
这时鼠标指针将变成加号“+”。
网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。
素材准备：准备制作网页所需的文字素材、图像素材。
实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。
实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。
4.切换代码模式下，输入代码。
5.保存文件，预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。
页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。
素材准备：准备好从网上下载的安装程序。
实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。
计算机信息管理专业课程实验课程编码课程名称课程实验内容实验性质学时计算机应用基础统必 45 1(实验一:WindowsXP基本操作和汉字输入练习2(实验二: 文字编辑和排版3(实验三:表格编辑4(实验四:演示文稿制作5(实验五: 因特网接入、浏览网页和电子邮件的收发网络实用技术基础统必 24 实验一局域网安装与使用实验二 Internet接入与应用实验三 Windows 2000 安装与配置实验四局域网交换机设置实验五路由器的基本设置实验六网络安全54 统必 Dreamweaver网页设计实训1:基本网页设计实训2利用表格进行网页排版实训3使用页面布局模式实训4对网页进行排版应用CSS样式表实训5在网页中应用模板实训6在网页中应用库实训7在网页中插入导航条和翻转按钮实训8插入Flash及多媒体内容实训9使用层进行网页的排版和布局选做实训题实训1:插入Flash及多媒体内容实训2:自行设计和制作个人网站实训3:自行设计和制作商业网站数据库基础与应用统必 42 本课程必做实验共42学时，具体题目如下:(1) ACCESS实验内容12学时实验一表的操作实验二查询操作实验三窗体的操作实验四报表的操作实验五宏与数据访问页的使用实验六数据导入与导出(2) SQL Server实验内容30学时实验一安装与配置SQL Server实验二创建“进销存”数据库实验三创建表和索引实验四备份与恢复数据库实验五 Transact-SQL综合查询应用实验六触发器设计实验七存储过程设计(选做)实验八数据库安全性管理(选做) 实验九 ODBC及SQL Server应用程序设计(选做)36 限选 Visual Basic程序设计实验一:Visual Basic开发环境实验二:简单程序设计实验三:菜单设计实验四:鼠标、键盘、API函数调用实验五:文件管理程序设计实验六:绘图和多媒体应用实验七:数据库应用程序设计实验八:网络应用程序设计实验九:简单程序调试及错误处理实验十:ActiveX的简单应用。
DW_教案讲解[五篇范例]第一篇：DW_教案讲解一网页制作与网址建设基础知识（1学时）一.教学目标初步了解WEB工作原理、初步了解URL构成、了解网页版面布局连接了Internet计算机、DreamWeaver 8和IE 6软件二．教学环境、设备三.教学步骤（一）背景知识简述WEB网站也是常用的一种软件开发模式（B/S）网站的访问是通过网址（URL地址）进行网页版面布局是网页制作中最为重要的环节之一（二）实验步骤1.Web和浏览器2.网页制作的相关知识3.网页制作的基本方法4.熟悉Macromedia Studio 8安装及操作界面四．实验习题1.确认计算机连接了Internet2.双击IE浏览器3.在地址栏中输入网址二认识DreamWeaver 8基本操作（1学时）一.教学目的了解DreamWeaver软件，能够使用DreamWeaver制作简单的网页站点的作用，创建WEB站点、创建一个静态网页并能够保存在磁盘上形成文件二．教学难点三．教学环境、设备计算机、DreamWeaver 8和IE 6软件四.教学步骤（一）背景知识简述DreamWeaver软件是当前最为流行的网页制作软件之一，熟悉和熟练掌握该软件对学生在进行后面的学习中将起到关键的作用（二）教学步骤1.了解Dreamweaver及其基本特点2.了解Dreamweaver 8的新功能3.Dreamweaver 8概述4.Dreamweaver 8的新功能5.Dreamweaver 8的编辑环境6.建立站点7.创建简单的页面8.预览页面四．实验习题1、确认计算机连接了Internet2、双击IE浏览器3、在地址栏中输入网址五．实验拓展习题使用DreamWeaver 8创建一个站点，并创建一个名为Index.html的网页三插入文本和图像（1学时）一.教学目的了解网页中插入文本和图像的基本操作、并能对插入的文本和图像进行属性设置二．教学难点文字图像的排版三．教学环境、设备计算机、DreamWeaver 8和IE 6软件四.教学步骤（一）背景知识简述文本和图像是一个网页的基本元素，向网页中插入文本和图像以及对问本和图像进行属性设置也是网页制作人员必备的技能（二）实验步骤1.掌握插入与修改文本的方法2.了解CSS样式3.插入文本4.设置文本属性5.创建列表项6.拼写检查7.图像编排 9.文本和图像应用五、实验习题1、新建一个静态页面2、在网页中输入文本3、利用属性面板对文本进行格式化操作4、向网页中插入图像5、利用属性面板对图像进行格式化操作六．实验拓展习题（学生选做）使用DreamWeaver 8创建一个图文并茂的网页四超级链接（1学时）一.教学目的了解超链接的基本特点、掌握超链接的创建与管理方法二．教学难点创建图像及热点超链接、创建邮件、关闭窗口和后退的超链接三．教学环境、设备计算机、DreamWeaver 8和IE 6软件四.教学步骤（一）背景知识简述超链接是网页间的桥梁、是一个网站必备的元素；一个有效网站就是有一个主页和多个网页构成的，网页间的相互访问就是通过超链接来实现的（二）教学步骤1.创建超链接概述2.在页面中创建文本超链接3.在页面中创建图像超链接4.在页面中创建图像热点超链接5.在页面中创建邮件超链接6.在页面中创建后退、前进和关闭超链接7.超链接管理五.实验习题1、创建两个网页，并命名为test1.htm和test2.htm2、在test1.htm中输入文本3、选中输入的文本，在属性面板中使用超链接属性来选中test2.htm 六．实验拓展习题（学生选做）制作网页间的超链接制作图像及热点超链接制作邮件、关闭窗口和后退的超链接五表格（2学时）一.教学目的了解Dreamweaver 8中表格的基本特点、掌握表格的基本操作、掌握使用表格创建网页的方法二．教学难点插入并美化表格进行页面布局。
Dreamveaver实验一
【实验准备】将Y：盘中的Dreamveaver1文件夹复制到Z：盘
【实验目的】熟悉利用Dreamweaver进行可视化网页设计
【涉及章节】Dreamweaver网页设计基础、CSS设置与应用
【实验内容】1、站点定义
2、网页文本编辑
3、插入网页元素
4、CSS设置与应用
本次实验第一部分将完成如下图所示的网页
第一部分：网页设计基本操作
【操作步骤】（编辑网页的时候，每一步骤都保存一次，以防数据丢失）
1.启动Dreamweaver程序
2.站点定义。
执行菜单“站点→新建站点”
3.打开文件。
通过文件面板，双击打开index.htm文件。
4.添加字体。
把光标定位在页面的文字中，在Dreamweaver下部会出现文字的属性面板，选择
“”，点击字体框右边的按钮，打开字体列表框，选择“编辑字体列表”。
出现“编辑字体列表”对话框。
添加“黑体、华文新魏、华文行楷、隶书”（独立添加）。
方法：在右下侧可用字体窗口选择字体，然后点击“<<”按钮添加到“选择的字体”，然后按窗口上部的“＋”添加到字体列表。
5.文本编辑。
a)窗口标题。
在标题栏输入“中国园林建筑”。
b)主标题。
涂黑选择“欢迎来到中国园林建筑艺术主页！”，在属性面板点击“”，在格
式框选择：标题1
在属性面板点击“”，字体选择“隶书”，在弹出的“新建CSS规则”对话框输入选择器名称：maintitle ，点击“确定”按钮完成CSS规则的建立。
继续在属性面板中选择“居中对齐”。
c)其他文段。
涂黑选择“轻一推门……”文段。
在属性面板中点击“”，设置格式为：颜色#999 (第2列第4行)，在弹出的“新建
CSS规则”对话框输入选择器名称p1，单击[确定]按钮，完成CSS规则的建立。
继续在属性面板中选择字体为：华文行楷。
涂黑选择“园林是建筑…..”文段，仿照上述操作，先在属性面板中单击“”设置格
式为：段落，再在属性面板中点击“”，设置格式为：华文新魏，在弹出的“新建CSS规则”对话框输入选择器名称p2，继续在属性面板中设置字体大小为16、粗体。
6.背景图像。
执行菜单“修改→页面属性”，浏览背景图像，选择images\bg.jpg。
7.插入图片。
把光标放在标题“欢迎来到... ”文段前，按[Enter]键，把光标放在第一行。
执行菜
单“插入→图像”，选择images\banner.jpg；把光标放在“欢迎来到...”文段后，执行菜单“插入→图像”，选择images\main.jpg。
宽设定为：450，高设定为：280，在属性面板中选择图片的对齐为：“右对齐”。
8.插入横线。
把光标定在“请浏览园林特点”后，执行菜单“插入→HTML→水平线”。
9.插入日期。
把光标定在水平线后，按[Enter]键。
执行菜单“插入→日期”。
选择“03/07/1974”样
式。
10.插入个人信息。
在日期之后，输入“Copyright .All Right Reserved by ”，光标定在Copyright
后，执行菜单“插入→HTML→特殊字符→版权”；光标定在by后，执行菜单“插入→HTML→特殊字符→注册商标”，然后在后面加上自己的中文姓名。
11.插入音乐。
执行菜单“插入→媒体→插件”，选择images/back.mid。
12.插入超链接。
涂黑选择“请浏览园林特点”文段，在属性面板，单击链接框右边的[浏览文件]按钮，
选择a.htm。
13.插入图片超链接。
单击选择插入的banner.jpg图片，在属性面板，单击链接框右边的[浏览文件]
按钮，选择b.htm。
14.插入热点链接：单击选择main.jpg，在图片中建立两个矩形热点，分别超链接目标为redian1.htm、
redian2.htm。
15.完成后保存文件，并按键盘f12键浏览网页。
16.设置书签（锚记）。
在文件面板，打开b.htm，在光标定在“[返回主页]”前，执行菜单“插入→命
名锚记”，输入h0；然后分别在四个红色段落标题前，分别添加命名锚记为h1，h2，h3，h4。
17.链接书签（锚记）。
涂黑选定蓝色文段“台榭参差金碧里，烟霞舒卷图画中”，在属性面板的链接框
输入＃h1；然后分别涂黑选定其他三行蓝色文段，设定连接到＃h2，＃h3，＃h4；选择红色文段“返回”, 在字体属性面板的链接框输入＃h0，然后分别设定其他三个“返回”，链接到相同的h0号锚记上。
18.完成后保存文件，并按键盘f12键浏览网页。
第二部分：css设置与应用
本部分实验将完成下图所示的网页:
1.打开文件。
打开Z：\Dreamveaver1\css.htm.文件。
2.打开样式面板。
执行菜单“窗口→CSS样式”，打开了CSS样式面板。
3.新建CSS样式。
选择面板下方按钮，在新建CSS规则对话框中，选择器类型：类（可应用于任
何HTML元素）；选择器名称：t1；规则定义：新建样式表文件。
保存CSS文件名为model。
4.设置t1样式。
选择“类型”分类，字体（Font-family）选择“华文行楷”（若默认选项没有，请
选择编辑字体列表添加）；大小（Font-size）：24象素；粗细（Font-weight）：粗体(bold)；颜色(Color)：输入“＃006600”。
单击[确定]按钮。
5.设定使用t1样式。
分别涂黑选择文段中“一、中国古典..”“二、园林建筑…”，然后在属性面板
的“目标规则”框中打开按钮选择t1样式，以应用。
6.继续选择面板下方按钮，在新建CSS规则对话框中，选择器类型：类（可应用于任何HTML元素）；
选择器名称：t2；规则定义：model.css。
7.设置t2样式。
选择“类型”分类，大小（Font-size）：36象素；行高（Line-height）：80象素；
颜色(Color)：输入“＃333333”。
钩选“上划线（overline）”、“下划线(underline)”；选择“背
景”分类，设定背景图像(Background-image)，浏览选择images\point.gif；选择“区块”分类，选择文本对齐（Text-align）：居中（center）。
单击[确定]按钮。
8.设定使用t2样式。
涂黑选择文段标题“浅谈中国古典…”，然后在属性面板的“目标规则”框中
打开按钮选择t2样式，以应用。
9.新建p样式。
继续选择面板中的添加按钮，在新建CSS规则对话框中，选择器类型：标签（重
新定义HTML元素）；选择器名称：p；规则定义：model.css。
10.设置p样式。
选择“类型”分类，设置行高（Line-height）：25象素；选择“区块”分类，设置文
字缩进（Text-indent）：40象素。
单击[确定]按钮，可以看到文段中的文字已经自动应用了p样式。
11.继续选择面板下方按钮，在新建CSS规则对话框中，选择器类型：复合内容（基于选择的内容）；
选择器名称：a:link；规则定义：model.css。
选择“类型”分类，设置颜色(Color)：#FF6600；
修饰(Text-decoration)选择：无(none)。
12.继续选择面板下方按钮，在新建CSS规则对话框中，选择器类型：复合内容（基于选择的内容）；
选择器名称：a:hover；选择“类型”分类，设置颜色(Color)：#FFCC00；修饰(Text-decoration)选择：删除线(line-through)。
13.完成后保存文件，并按键盘f12键浏览网页。
