文档介绍：国贸学院实验项目讲义
《网页设计与制作》
编写单位: 国贸学院
编写教师: 程超
适用专业: 电子商务
编写日期:
《网页设计与制作》课程实验指导
实验一用HTML制作简单网页
基本要求:
掌握HTML文档的基本结构、标记和标记属性的概念及作用;学会使用文本编辑软件建立和编辑HTML文档的方法;能够使用标记在网页中插入和编辑基本的网页元素;能够利用表格标记建立和编辑表格,学会在表格中使用其他网页元素。
重点与难点:
重点:使用标记在网页中插入和编辑基本的网页元素;
难点:建立和编辑表格,学会在表格中使用其他网页元素。
操作步骤:
背景知识
根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。
实训准备工作
上网找一些篮球相关的图片素材,以备下面的操作做准备。
实训要求
创建一个以篮球为话题的网站,要求如下:
(1)编辑网站首页,效果图类似于下图所示,包括有图像映射、鼠标经过图像、导航条。
(2)编辑其它内容网页并添加超链接,如图所示,其它页面中包括有图像和文本等,有一个网页中是明星的相册。
图篮球俱乐部首页
实训指导
网站首页制作过程
步骤1 启动Dreamweaver,定义本地站点,新建一个网页,。
步骤2 单击“属性”面板中的“页面属性”按钮,选择“常规”选项卡,,选择“标题/编码”选项卡,设置网页标题为“篮球俱乐部”。
步骤3 单击“插入”栏|“常用”选项|“图像”按钮,,选中图像,单击“属性”面板中的矩形“热点”工具,在NBA标志图像上绘制矩形区域,在“属性”面板的链接框中输入链接地址:多边形“热点”工具,在中国篮球标志图像上绘制多边形区域,在“属性”面板的链接框中输入链接地址:,如图所示。
图篮球俱乐部内容页
图图像映射实例
步骤4 单击“插入”栏|“常用”选项|“表格”按钮,插入一个一行两列的表格,表格的宽度为770像素,单元格边距和间距为0,边框粗细为0。把光标放在左边的那个单元格中,单击“插入”栏|“常用”选项|“图像”组|“鼠标经过图像”按钮,弹出“插入鼠标经过图像”对话框,选择原始图像的文件路径、鼠标经过图像的文件路径,选中“预载鼠标经过图像”复选框,替换文本、URL链接地址设置为空,单击“确定”按钮。
步骤5 光标放在右边的那个单元格中,单击“插入”栏|“常用”选项|“图像”组|“导航条”按钮,弹出“插入导航条”的对话框,分别设置导航条元件,每一个导航条元件有二幅图像:状态图像、鼠标经过图像,在“按下时,前往的URL”文本框:选择URL地址,在插入下拉列表中选择垂直,导航条垂直排列,选择“使用表格”复选框,单击“确定”按钮,完成。
创建网站相册
选择“命令”菜单|“创建网站相册”命令,弹出“创建网站相册”对话框,进行相关参数的设置,单击“确定”按钮,启动Fireworks,批处理图像。
其它网页的制作(略)
添加网页之间的超链接
实验项目二 CSS样式表的应用
基本要求:
进一步了解CSS样式的概念与作用;了解CSS样式的格式规则及样式类型;掌握CSS样式设置与管理方法;掌握在网页设计与维护中应用CSS样式的方法。
重点与难点:
重点:CSS样式的格式规则及样式类型;
难点:CSS样式设置与管理方法。
本章通过多个CSS样式的应用实例,重点介绍了CSS样式表功能、定义CSS规则的方法,应用内嵌式样式表和链接外部样式表的方法等,通过本章的学习,学生应了解CSS样式表的用途,掌握创建和应用CSS样式表的方法,学会用CSS样式表进行网页的美化和网页布局。
一、使用CSS 样式表的网页实例
CSS样式表是由一系列样式选择器和CSS属性组成,它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等,增强了网页的格式化功能。
使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰,当需要更改样式设置时,只要在这个样式表中修改,而不用对每个页面逐个进行修改,简化了格式化网页的工作。
利用CSS样式还可以代替表格进行网页布局,这是目前较为流行页面排版方式。
本实例主要采用了div标签+css样式,涉及到的知识点有以下几点:
分析构架:画出构架图;
模块拆分:分别定义Div的CSS样式;
在网页中插入Div标签,在Div中填充网页内容;
总体调整:色彩及内容调整,适当修改CSS样式。
二、使用CSS样式表
1、CSS样式表概述
样式表的使用
CSS样式表的使用常用的方法有以下两种:
页面内嵌