《网站建设与网页设计》实验指导书.docx
《《网站建设与网页设计》实验指导书.docx》由会员分享,可在线阅读,更多相关《《网站建设与网页设计》实验指导书.docx(20页珍藏版)》请在冰豆网上搜索。
《网站建设与网页设计》实验指导书
实验一熟悉HTML语言
一、实验名称
熟悉HTML语言
二、实验目的
1.掌握常用的HTML语言标记;
2.会使用文本编辑器和Dreamweaver建立HTML文档,制作简单网页。
3.学习将其它格式的文档转换成HTML格式的文档
三、实验类型及学时
验证性实验、2学时
四、实验内容
1、用文本编辑器(如记事本)做出以下图1-1的页面效果。
图1-1第一个网页效果图
要求:
要有标题“我的第一个网页”,页面中有文字:
“我的个人主页”,文字格式为标题h2。
文字的前面空一行,后面一根标尺线,标尺线颜色是红色,宽度占整个页面的80%,大小为2。
页面背景颜色代码为“#f0ffFF”。
完成后保存为.HTML格式,并浏览效果。
2、在以上基础上增加代码,达到如下图1-2的效果:
图1-2进一步完善后的效果图
要求:
设置如效果图中所示的三行文字,字体大小为5,颜色是蓝色,宋体。
3、掌握Dreamweaver8的基本操作,并完成上面所有用记事本写的HTML
4、用记事本和Dreamweaver8分别练习设置几种物理字体和逻辑字体。
物理字体:
明确指明了字体的类型,无论是何种浏览器,遇到这些表示文字的标签时,都用相同的方式进行显示
文字加粗,文字为斜体,文字加下划线。
文字添加删除线
逻辑字体:
并不能像物理字体那样明确知道字体的显示方式,这些标签并不指明字体如何显示,而是让Web浏览器自行决定显示方式,不同的浏览器解释的效果可能就不一样.
文字加粗文字为斜体
要求:
用上面介绍的物理字体显示以下效果。
并练习用逻辑字体设置加粗和斜体。
图1-3文字设置
5、分别用记事本和Dreamweaver8设置会移动的文字。
(1)基本语法:
(2)文字移动属性的设置
方向#=left或right
练习:
分别设置文字从左向右移和从右向左移。
方式#=scroll:
一个方向不停地移动slide:
移动一次就停止。
Alternate:
来回移动。
练习:
请分别设置以上三种效果。
循环#=次数;若未指定则循环不止(infinite)
练习:
配合上面“方式”中的属性,设置移动的次数。
速度时间用数值表示
练习:
文字的移动速度设置
延时移动过程中每移一次停顿的时间
练习:
配合“速度”练习设置本属性。
(3)其它方式:
可设置对齐方式,文字底色、移动面积等。
6、简单的多窗口页面
基本语法
...
(1)示例:
纵向排列多个窗口的设置,页面效果如图1-4,如下列代码:
多窗口页面—各窗口的尺寸位置-->
图1-4框架集应用
请参考上述代码,设计横向排列的三个窗口,并分别指向A.html、B.html和C.html三个文件。
提示:
横向排列的属性为:
rows。
(2)示例:
页面效果如图1-5,代码如下:
---省略部分代码----
---省略部分代码----
图1-5框架集应用
参照上述代码设计如图1-6所示页面:
图1-6框架集应用
实验二文本、图像及超链接的应用
一、实验名称
文本、图像及超链接的应用
二、实验目的
1.掌握文本布局的基本方法;
2.掌握图像的一些基本应用。
3.学习使用超链接。
三、实验类型及学时
验证性实验、2学时
四、实验内容
1、用文本编辑器(如记事本)或Dreamweaver做出以下的页面效果。
(1)文本行的控制
段(Paragraph)(可以看作是空行)#=left,center,right
换行
...居中
请设计如图2-1所页面效果:
要求段1文字居中,段2靠左,第三行进行换行显示。
第四行文字居中。
图2-1文本设置
(2)列表
无序列表:
有序列表:
- ...
定制列表元素:
#=disk(实心圆),circle(圆圈),square(正方形)
定制有序列表中的序号:
#=A,a,I,i,1
定制有序列表的的起始值:
#=number
用上述语法设计如图2-2,2-3所示的页面效果:
图2-2图2-3
2、图像
(1)链入图象的基本语法
#=图象的URL
#=在浏览器尚未完全读入图象时,在图象位置显示的文字。
(2)图象和文字的对齐
#=top,middle,bottom
(3)图象在页面中的对齐/布局(FloatingImage)
#=left,right,middle
(4)图像的提示信息;双引号填入提示内容。
(5)设置页面背景图像
定义背景图像。
设计如图2-4所示的页面效果图:
要求先给页面背景插入一张图片,再插入两张图片,第一行文字与图片顶端对齐,当鼠标放在第一张笑脸上时,有提示内容。
第二行图片居页面的右边,文字位置不变。
图2-4定义背景图像
3、超链接
(1)建立超链接基本语法
添加超链接的文字
链接地址:
http:
//,ftp:
//,mailto:
,File:
,Gopher:
//(gopher协议),News:
(usernet新闻组协议),Telnet:
(使用Telnet的互动会话)。
常用的有前面三个。
(2)增加提示信息
添加超链接的文字
(3)被链接文件载入位置
添加超链接的文字
#:
有4种表示形式
_blank:
将被链接文档载入到新的未命名的浏览器窗口
_parent:
将被链接文档载入到父框架集或包含链接的框架窗口中
_self:
将被链接文档载入到与该链接相同的框架或窗口中(这个载入位置是默认的)
_top:
将被链接文档载入到整个浏览器窗口并删除所有框架。
设计如图2-5所页面。
要求:
第一个链接进入一个internet网站,并在一个新浏览器窗口打开,第二个链接进入你所设计的任意一个页面文件,当把鼠标放到超链接的文字上时有提示文字。
图2-5超链接应用
(4)锚点设计基本语法:
添加超链接的文字
页面中的文字
注意:
#号不可缺少,且相链接的两个锚点名要一致。
设计如图2-6所示的页面效果:
图2-6锚点设置
(5)电子邮件链接基本语法
邮箱地址>网页中显示的文本
练习:
设置一个链接,打开链接地址发邮件。
Windows默认打开的的outlook.
(6)图片添加链接
练习:
设置一个链接,当点击图片时进入一个Internet网址,或指向一个页面文件。
实验三网页排版与布局
一、实验名称
网页排版与布局
二、实验目的
1.学会应用表格进行网页排版与布局;
2.熟练掌握表格的基本语法。
三、实验类型及学时
验证性实验、4学时
四、实验内容
1、表格的基本语法
-定义表格
-定义表行-定义表头 | -定义表元(表格的具体数据) (1) 常用的属性:align属性: left,center,right表格的三种对齐方式。 width、height: 表格的宽度和高度 border: 表格的边框,若无border,表格是无边框的。 可对border设置,表示边框的大小。 bgcolor: 表格背景颜色。 background: 表格背景图片。 Cellspacing: 表格单元格之间的距离。 即外边距 Cellpadding: 单元格式边框与单元格内的数据之间的距离。 即内边距。 (2) |
|
表行的常用属性
align:
left,center,right。
行水平对齐方式,可控制表格单元格中的数据的水平对齐方式。
valign:
top,middle,bottom。
行垂直对齐方式,可控制表格单元格中的数据的垂直对齐方式。
Height:
行的高度属性。
(3)
| 表单元格属性--------
| 表头的属性与它相同。
Colspans:
跨多列进行单元格合并。
Rowspans:
跨多行进行单元格合并。
(4)表格的嵌套
表格可以嵌套,在表格里面再建立表格。
如以下代码:
外层表格单元格 | 外层表格单元格 |
|
嵌套表格 | 嵌套表格 |
嵌套表格 | 嵌套表格 |
外层表格单元格 |
图3-1表格的使用
2、练习:
按照上面的语法在记事本或Dreamweaver8中设计如图3-2所示的表格。
图3-2表格的使用
要求:
表格在页面中的对齐方式为居中对齐,背景色为:
#FFCC99,表格有border属性,但不设置值,表格的宽度为占整个页面的40%,表格中单元格的间距为2。
所有表格中的数据都是水平、垂直居中。
提示:
多列、多行合并,在单元格
标签或表头标签 | 中进行设置,第一行的合并数为4,左下角的列合并数为3. 3、综合设计: 图3-3是北京希望电子出版社网站的首页栏目模块划分图。 说明: 栏目区是一个表格,导航区是一个表格,网页的主题部分是一个1*3的辅助表格,版权区是一个表格,而注册/登录区、链接区等都是辅助表格中的嵌套表格。 要求: 按照这个网页模板的划分,把这个网站的首页所有表格都设计出来,且布局要合理。 只需要把表格设计出来就行,里面的任何内容及表单、控件等都不需要设计。 提示: 先从栏目区开始设计,分析栏目区时,要设计好表格有几行,几列,有没有多列或多行的合并。 每个表中的单元格要计算好它的长宽。 图3-3网站首页模块划分 实验四表单的设计 一、实验名称 表单的设计 二、实验目的 1.掌握表单的基本语法; 2.掌握常用的HTML控件的使用。 3.能够应用表单设计友好的界面。 三、实验类型及学时 验证性实验、2学时 四、实验内容 1、表单的基本语法 *表示: get或post ... Form表单的常用属性 action: 表单提交后发送到url的地址。 Method: 用来定义提交表单信息的方式,可取值为post或get. Name: 表单名称,表单名称的定义是为了脚本语言等对它进行控制。 2、HTML控件 (1)type类型不同,也有不同的属性。 #表示控件的类型,有这些: text: 文本框,passsoword: 密码框,button: 普通按钮,reset: 重置按钮,submit: 提交按钮,radio: 单选框,checkbox: 复选框,file: 文件域,image: 图像域,hidden: 隐藏域。 (2)文本区域内容: 文本区域 (3)列表框(SelectableMenu)
2、根据上面的HTML语法知识,设计如图4-1所示页面: 图4-1设计表单 实验五层、行为和时间轴 一、实验名称 层、行为和时间轴 二、实验目的 1.掌握层、行为和时间轴的基本概念; 2.掌握层、行为和时间轴的基本语法。 3.能够熟练使用Dreamweaver8利用层、行为和时间轴设计友好的界面。 三、实验类型及学时 验证性实验、2学时 四、实验内容 1、用Dreamweaver进行层的操作 (1)创建层: 把Dreamweaver切换到“设计”面板,依次点击菜单中的插入----布局对象----层,即创建了一个层。 选中层,点击菜单上的“窗口”-----“属性”,即可对层的属性进行修改。 点击菜单上的“窗口”-----“层”,即在右边打开层的控制面板,可对层进行控制。 (2)插入对象和调整层的大小。 选中层,可在属性中“背景图像”中选择所要插入的图像。 选中层,层四周出现8个小方块,可选中它进行拉伸以调整层的大小。 (3)多个层操作 当建立了多个层时,可全部选中它们(按住shift键不放,鼠标进行占选),进行对齐方式操作。 选择菜单上的“修改”----排列顺序,即可对选中的层进行对齐操作。 打开右边的层控制面板,可调整层的堆放顺序,层名称旁边的“z”表示,层的堆放顺序,数字越大表示越在上面,可拖动图层调整其堆放顺序。 还有一个“眼睛”图标,表示图层的可见性,可点击它进行设置。 练习: 任意建立几个层进行练习。 2、行为 (1)启动行为面板菜单-----窗口----行为 (2)创建行为 首先选中要创建行为的对象(比如图片、超链接、表单等),在右边的行为控制面板里,选择图标“ ”,添加行为事件。 如果是点击显示层的话,就选择“显示-隐藏层”命令。 设计图5-1页面效果。 要求: 建立两个层,两个链接。 当鼠标放在“教材介绍”超链接上时,显示教材的介绍,当鼠标移走时,介绍内容消失。 当鼠标放在“目录”超链接上时,显示目录内容,移走时,目录内容消失。 提示: 用到了行为里的两个事件: onMouserOver(鼠标在***的上面)和onMouseOut(鼠标移走)。 在选择了行为控制面板的“ ”图标后,选择“显示-隐藏层”命令。 即可得到所要的效果。 图5-1行为与层的应用 3、时间轴 (1)打开时间轴 菜单----时间轴或Alt+f9组合键。 (2)按如下图5-2所示设计一只蝴蝶的飞行路径。 说明: 建立一个层,层加载一张背景图片。 建立时间轴。 建立时间轴与层之间的关系。 方法: 可用鼠标选中层,将其拖至时间轴。 然后添加关键帧,在每一个关键帧的位置上选中层并移动,以此来改变飞行路径。 再在“行为频道”上添加行为,使在飞行过程触发事件,方法与前面添加行为的方法一样。 图5-2时间轴的应用 实验六CSS样式 一、实验名称 CSS样式 二、实验目的 1.掌握CSS的语法定义形式; 2.会使用文本编辑器和Dreamweaver建立HTML文档,制作简单网页。 3.学习将其它格式的文档转换成HTML格式的文档 三、实验类型及学时 验证性实验、2学时 四、实验内容 1、CSS定义的基本语法 selector{property: value} selector: 有四种形式(标签选择器、id选择器、class选择器和伪类选择器) property和value: CSS所控制对象的样式属性,value是其对应的值。 它们之间用冒号分开。 2、CSS的三种样式 行间样式: 将CSS样式编码写在HTML标签中 内部样式: 定义在HTML的一个固定位置,如 标签内,其格式:
selector{property: value} 外部样式: 定义成单独的.css文件,在调用文件中进行引用,格式为:
3根据以上基本知识,用HTML语言设计如下的页面。 图6-1CSS应用 要求: 首先通过CSS样式给页面背景加载一幅图片。 古诗在页面上居中显示,“古诗题目”字体为楷体,加粗,大小为45px,居中。 “作者”字体为隶书,加粗斜体,大小30px,靠左。 四句古诗都加下划线,字体为宋体,大小35px,第一、三句诗为一种颜色,第二四句诗又为另一种颜色,颜色自选。 这些设置都在CSS中进行,要建立.css类型的文件,并在HtML文件中,通过标签进行引用。 4、DIV+CSS的页面布局 DIV+CSS是进行排版布局的另一种方法。 标签语法:
下面是一个常见的网页布局模式,请用DivCSS模式设计。 说明: 网站的框架分为4个部分,顶部,主体部分左侧,主体部分右侧和底部。 分别定义样式来进行布局。 图6-2DIV+CSS布局 实验七搭建一个小型网站 一、实验名称 搭建一个小型网站 二、实验目的 1.掌握建立一个小型网站的基本步骤; 2.能够综合运用HTML、CSS、Javascript、VBscript和ASP进行编程。 3.能够较好地掌握网站主页的排版与布局、前后台管理功能的开发。 三、实验类型及学时 综合性实验、6学时 四、实验内容 1、本次实验要求搭建一个小型网站。 运用HTML、CSS、Javascript或VBScript、ASP等各种开发语言。 2、网站建设要求: (1)网站的主页设计,设计的效果如图7-1所示: 开发一个关于“网站建设与网页设计”这方面内容的网站。 网站主页主要是界面设计,不涉及数据库。 主要任务是网页的排版与布局,图片、文字等的摆放要合理,各种控制、超链接、样式等的正确应用。 界面设计中包含以下内容: 主栏目中包括: 技巧专栏、教程专栏、文章专栏、网页制作、下载专区和推荐站点。 每个栏目下的内容都要有超链接。 导航区包括: 首页、技巧专栏、教程专栏、文章专栏、网页制作、留言簿和关于我们这些栏目,每个栏目下的内容都要有超链接。 其中留言簿功能要与数据库连接来实现。 公告区是滚动的新闻及当日的时间显示。 搜索区: 搜索区在这里只实现它的界面设计,具体的搜索功能先暂时不实现。 热点区: 包括文章和专题,主要是显示当前最热门的一些文章和专题信息,要有超链接。 版权区: 关于版权的一些信息。 还有最上面的要嵌入一张图片,其它的背景图案也应该有。 总的要求就是要设计合理、美观的界面 图7-1网站首页 (2)留言簿的开发 以ASP语言为主开发一个在线留言簿,后台数据库用SQLServer或Access。 其功能包括: 游客留言、留言分页显示和后台留言的管理(包括登录后台功能、管理员回复留言和删除留言)。 其实现的效果图如下所示: 图7-2留言簿
展开阅读全文
相关搜索
|