网页设计与制作实训指导书.docx
《网页设计与制作实训指导书.docx》由会员分享,可在线阅读,更多相关《网页设计与制作实训指导书.docx(17页珍藏版)》请在冰豆网上搜索。
网页设计与制作实训指导书
网页设计
实训指导书
主编:
2014年3月
目录
网页设计实验实训室设备使用安全守则2
实训一查找网站并分析,尝试申请域名空间3
实训二练习制作第一个个人主页7
实训三练习文本、图像、超级链接8
实训四表格设计10
实训五框架页面设计实训六层和动画的制作11
实训七网页的美化14
网页设计实验实训室设备使用安全守则
1.严禁在实验室内使用明火、用电充电及取暖等。
2.机房应成为精神文明的良好工作场所,室内不得大声喧闹。
非机房有关人员不得随意进入机房。
3.不要随便尝试不明的或不熟悉的计算机操作步骤。
遇到计算机发生异常而自己无法解决时,请专业老师解决。
4.不要随便运行或删除电脑上的文件或程序,不要随意计算机参数等。
5.不要随便安装或使用不明来源的软件或程序。
不要随意开启来历不明的电子邮件或电子邮件附件。
6.使用计算机人员应爱护计算机、要按操作规程来操作、使用计算机等设备。
7.关机前应检查是否有U盘,如有,先取出,后开、关机。
需要使用U盘时,先用杀毒软件对U盘查、杀病毒,后使用。
8.禁止私自安装、修改、删除非文档文件。
如发现计算机出现异常现象,如:
速度特别慢、出现乱码、防毒软件报告有病毒等,应及时反映,并暂停使用。
9.保持计算机室及计算机的周边环境卫生,禁止在计算机旁吸烟、乱扔废纸和杂物、吃带皮食物。
10.禁止私自打开计算机主机,乱接线。
实训一查找网站并分析,尝试申请域名空间
1.背景知识
查找各类型网站并分析,分析网页布局和结构规划,网页常见布局形式有:
1.“T”型布局
2.“口”型布局
3.POP布局
根据本章所学的内容,尝试申请域名空间。
实训准备工作
保证internet连接畅通,学生主机安装相应的网页设计与制作软件:
dreamweaver、fireworks、flash、photoshop等。
2.实训要求
(1)上网浏览不同的电子商务网站,比如:
淘宝、联想等,分析站点结构、站点风格及网页配色等,写出分析报告。
(2)尝试申请域名空间。
3.课时安排:
2课时
4.实训指导
以中联网为例,详细介绍如何申请免费个人空间和域名。
1.打开浏览器,在地址栏上输入,如图2-36所示。
图2-36中联网主页
2.点击100M免费空间,弹出申请条款,开始申请免费个人主页空间。
核实它所给出的条款后,单击“我同意”按钮,出现图2-37所示的注册页面。
图2-37用户注册页面
3.所有信息都填好并核实无误后,单击提交按钮。
如果填的不正确,页面会给出提示,并要求重填。
注意该网站中户名只能用英文或数字。
4.注册成功后,会显示欢迎页面,等待管理员审核,如图2-38所示。
图2-38等待审核界面
5.单击“自助开通个人主页空间”字样,又重新弹出用户登录区,输入刚才注册的用户名和密码登录。
登录后,显示登录情况,如图2-39所示。
图2-39登录情况显示界面
6.然后单击页面左边“免费主页申请”按钮,出现审核通过界面,如图2-40所示。
它提示审核已经通过,可以开通个人空间了。
图2-40通过审核界面
7.单击“马上开通”字样,开通个人空间,出现图2-41所示页面。
在该页面中填写网站的名称,网站分类以及网站的简介,填好后单击“即时开通”按钮。
图2-41网站简介
8.即时开通后,出现图2-42所示页面。
该页面中给出了FTP登录用户名、FTP密码和FTP地址,这是上传网页时要用到的地址。
另外还给出了一个HTTP地址,这就是中联网提供给我们的主页的二级域名,在主页上传后,通过它可以访问个人主页。
这些地址和密码都要记录下来,用于后续操作。
至此,免费个人主页空间和域名已经申请好了。
图2-42开通主页资料
实训二练习制作第一个个人主页
1.背景知识
根据已经掌握的网络知识和本章学习的html语言的知识,编写简单网页的源代码;浏览网站,分析网站的特点。
根据本章所学的内容,创建站点和创建个人主页。
2.实训准备工作
保证internet连接畅通,学生主机安装相应的网页设计与制作软件:
dreamweaver、fireworks、flash、photoshop等。
在本地硬盘创建一个空文件夹myweb,并建一个子文件夹images。
3.实训要求
(3)打开浏览器,浏览某个网页,查看其源代码,了解HTML代码的含义。
(4)打开记事本,试用HTML语言编写一个简单的网页,网页中要包含以下内容:
网页标题、文字、图像、超链接等。
(5)上网浏览不同的电子商务网站,比如:
淘宝、联想等,分析站点结构、站点风格及网页配色等,写出分析报告。
(6)创建站点和创建网页 要求:
定义本地站点和新建一个网页并进行编辑。
4.课时安排:
2课时
5.实训指导
(1)如何查看网页源代码?
打开浏览器,点击“查看”菜单|“源文件”命令。
(2)如何编写HTML代码?
打开记事本,手工编写HTML代码,注意HTML代码的编写顺序及网页元素对应的标签。
保存网页时,网页的后缀名为html或htm。
(3)略
(4)创建站点和制作简单个人主页
步骤1 定义本地站点,新建若干文件夹,如:
images、flash、templates等,有些文件夹可暂时为空,以备将来存放设定的内容。
步骤2 在定义好的站点下新建一个网页,第一个个人主页为index.htm或是index.html,输入文本,插入Flash动画和图像。
实训三练习文本、图像、超级链接
1.背景知识
根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。
2.实训准备工作
将文本素材和图像素材准备好,发送到学生主机上,以供学生参考使用。
3.实训要求
创建一个以篮球为话题的网站,要求如下:
(1)编辑网站首页,效果图如图所示,包括有图像映射、鼠标经过图像、导航条。
(2)编辑其它内容网页并添加超链接,如图所示,其它页面中包括有图像和文本等,有一个网页中是明星的相册。
图篮球俱乐部首页
4.课时安排:
4课时,每一项实训要求为2课时
5.实训指导
(1)网站首页制作过程
步骤1 启动Dreamweaver,定义本地站点,新建一个网页,保存为index.htm。
步骤2 单击“属性”面板中的“页面属性”按钮,选择“常规”选项卡,设置背景图像为bg.gif,选择“标题/编码”选项卡,设置网页标题为“篮球俱乐部”。
步骤3 单击“插入”栏|“常用”选项|“图像”按钮,插入网站标志图像logo.gif,选中图像,单击“属性”面板中的矩形“热点”工具,在NBA标志图像上绘制矩形区域,在“属性”面板的链接框中输入链接地址:
,再单击多边形“热点”工具,在中国篮球标志图像上绘制多边形区域,在“属性”面板的链接框中输入链接地址:
,如图所示。
图篮球俱乐部内容页
图图像映射实例
步骤4 单击“插入”栏|“常用”选项|“表格”按钮,插入一个一行两列的表格,表格的宽度为770像素,单元格边距和间距为0,边框粗细为0。
把光标放在左边的那个单元格中,单击“插入”栏|“常用”选项|“图像”组|“鼠标经过图像”按钮,弹出“插入鼠标经过图像”对话框,选择原始图像的文件路径、鼠标经过图像的文件路径,选中“预载鼠标经过图像”复选框,替换文本、URL链接地址设置为空,单击“确定”按钮。
步骤5 光标放在右边的那个单元格中,单击“插入”栏|“常用”选项|“图像”组|“导航条”按钮,弹出“插入导航条”的对话框,分别设置导航条元件,每一个导航条元件有二幅图像:
状态图像、鼠标经过图像,在“按下时,前往的URL”文本框:
选择URL地址,在插入下拉列表中选择垂直,导航条垂直排列,选择“使用表格”复选框,单击“确定”按钮,完成。
(2)创建网站相册
选择“命令”菜单|“创建网站相册”命令,弹出“创建网站相册”对话框,进行相关参数的设置,单击“确定”按钮,启动Fireworks,批处理图像。
(3)其它网页的制作(略)
(4)添加网页之间的超链接
实训四表格设计
1.背景知识
根据本章所学的网页布局、时间轴及行为的知识,再综合前面所学的创建站点及编辑网页的知识,进行网页不同排版方式的练习。
2.实训准备工作
实训素材和网页草图发送到学生的主机中,以供学生参考使用。
3.实训要求
(1)根据网页草图1,如图所示,利用表格设计网页布局,在单元格中添加网页元素。
图表格排版网页草图
4.实训指导
(1)表格设计网页布局
步骤1 首先创建一个本地站点,新建一个文档(其余几个实训是一样的,这是必须的一个步骤),然后单击“属性”面板中的“页面属性”按钮,弹出“页面属性”对话框,单击“跟踪图像”选项卡,将草图导入到跟踪图像中,改变透明度为50%。
步骤2 选择“插入”栏|“布局”选项|“布局模式”按钮,切换到布局模式,单击“布局表格”按钮,绘制三个表格(上中下),表格的宽度与草图总的宽度相同:
853,每一个布局表格左侧插入布局单元格,单元格的宽度与绿色色块相同:
161,如图所示。
步骤3 插入网页元素。
最后打开“页面属性”对话框,删除跟踪图像,保存网页。
图利用表格布局网页结构图
实训五框架页面设计实训六层和动画的制作
1.背景知识
根据本章所学的网页布局、时间轴及行为的知识,再综合前面所学的创建站点及编辑网页的知识,进行网页不同排版方式的练习。
2.实训准备工作
实训素材和网页草图发送到学生的主机中,以供学生参考使用。
3.实训要求
(1)根据网页草图,如图所示,利用层设计网页布局,并向层中添加网页元素。
图 层排版网页草图
(2)在上一步的基础上,利用时间轴和行为添加网页动态效果:
飘动的图片、弹出信息和打开浏览器窗口。
(3)根据网页草图,如图所示,利用框架设计网页布局,左框架中是导航条,上框架中插入图片和FLASH动画,主框架中插入图片和文本。
图框架排版网页草图
5.课时安排:
2课时。
6.实训指导
(1)层设计网页布局
步骤1 创建本地站点,创建一个HTML文档,在“页面属性”中插入跟踪图像,单击“插入”栏|“布局”|“绘制层”按钮,共绘制7层,注意层的排列位置、叠放顺序,如图所示。
图层布局图
步骤2 根据草图,在各层内插入相应的网页元素。
保存网页,浏览网页效果。
(2)在上一步的基础上继续制作网页动态效果
1)特效1 随时间飘动的图标
步骤1 首先插入一个层,在层内插入一幅图像。
步骤2 选中层,选择“修改”菜单|“录制层路径”命令,拖动层随心所欲地移动,最后回到起点。
步骤3 在“时间轴”面板中选择“自动播放”和“循环”两个复选框。
2)特效2 弹出信息
步骤1 选择“窗口”菜单|“行为”命令,打开“行为”面板,选中特效1中已插入的层,单击“行为”面板中的“添加行为”按钮,选中“弹出信息”命令,在“弹出信息”对话框中输入“欢迎光临汽车沙龙”,单击“确定”按钮。
步骤2 在“行为”面板中,选中事件为“onclick”。
3)特效3 打开浏览窗口
步骤1 新建一个网页,在网页中输入文本,插入图像,网页内容相对简单,集中在网页的左上部,保存为guanggao.htm。
步骤2 打开
(2)中用层布局的网页,单击“文档”窗口左下角的
标签,单击“行为”面板中“添加行为”按钮,选择“打开浏览器窗口”命令,在“打开浏览器窗口”对话框中,输入网页地址guanggao.htm,定义窗口大小及其它属性,单击“确定”按钮。
步骤3 在“行为”面板中,选择事件为“onload”。
(3)框架设计网页布局
框架布局图,如图所示。
步骤1 分别制作三个网页分别为:
top.htm、left.htm、main.htm,注意这三个网页中所包含的网页内容:
top.htm包括的是标志,left.htm包括的是导航条,main.htm包括的是文本和图像内容。
步骤2 选择“文件”菜单|“新建”命令,在“新建文档”对话框中,单击“常规”选项卡,选择“框架集”中的“上方固定,左侧嵌套”的样式。
步骤3 打开“框架”面板,然后选中topFrame框架,在“属性”面板中设置“框架”属性,在“源文件”文本框中输入top.htm。
同理选中leftFrame框架、mainFrame框架分别设置“框架”属性,将网页路径分别为:
left.htm和main.htm,将各个框架页面链接到框架集中。
图框架布局图
图top.htm
步骤4 单击左框架内,选中导航条按钮,在“属性”面板中添加超链接地址:
main0.htm,第二个导航栏按钮的链接地址为:
main.htm,这两个超链接的链接目标均为mainFrame。
步骤5 鼠标指标放在框架边框处,调整各框架的显示范围,或选中“框架集”,在“属性”面板中,设置框架的行高或列宽,调整框架显示范围。
步骤6 打开“框架”面板,选择“文件”菜单|“保存框架页”或“框架集另存为”命令,保存框架集。
图left.htm
图main.htm
实训七网页的美化
1.背景知识
根据本章所学的CSS样式表的知识,再综合前面所学的创建站点及编辑网页的知识,制作精美的网页及应用CSS扩展功能。
2.实训准备工作
实训素材、网页元素及网页样图,发送到学生的主机中,以供学生参考使用。
3.实训要求
(1)利用CSS样式表制作精美的网页,如图所示。
图网页效果图
要求:
根据给定的素材,首先设置页面属性 其次定义特定Id的DIV标签的CSS样式,然后插入DIV标签,在DIV中插入内容,最后通过定义类,设置图像CSS样式。
(2)
图滤镜效果
在网页中添加CSS扩展效果:
滤镜
要求:
制作:
投影字体、发光字体、图像的透明效果、图像的波浪效果等,如图所示。
4.课时安排:
2课时
5.实训指导
(1)利用CSS样式表制作精美的网页
步骤1新建一个本地站点,站点内新建两个子文件夹,images和CSS,将图像素材保存到images文件夹。
新建一个网页,保存为index.htm。
步骤2页面属性的设置:
单击“属性”面板中的“页面属性”按钮,在“页面属性”对话框中,设置背景图像:
images/bg.jpg,页边距均为0,设置字体大小为12像素,字体颜色为灰色(#666666)。
步骤3在“CSS样式”面板中,单击“新建CSS规则”按钮,弹出“新建CSS规则”对话框,选择器类型:
高级,“选择器”文本框中输入#image01(这个区域用于放置图像),定义在:
“新建样式文件”,保存样式文件在css文件夹中,命名为main.css。
弹出“#images01的CSS规则定义”对话框,单击“方框”选项卡,宽度为200像素,浮动为左对齐,填充均为3像素,边界:
上为500像素,左为30像素,右和下均为30,选择“区块”选项卡,文本对齐:
居中。
步骤4新建一个#content选择器样式,定义在main.css文件。
弹出“#content的CSS规则定义”对话框,单击“类型”选项卡,行高为20像素,单击“区块”选项卡,文本缩进:
20像素,单击“方框”选项卡,宽度:
600像素,填充均为30像素,边界:
上为200像素,左为320,右和下均为30。
步骤5重定义标签H1:
单击“类型”选项卡,字体大小24像素,行高35像素,粗细为特粗,颜色为深绿色009900。
步骤6重定义标签img:
单击“方框”选项卡,填充均为3,边框均设置:
样式:
实线,宽度1像素,颜色为灰色(#999999)
步骤7插入两个DIV标签,ID分别为image01和content,然后在image01中插入两幅图像,在content中输入文本,完成。
(3)在网页中添加CSS扩展效果:
滤镜
步骤1 新建一个类dropshadow,单击“扩展”选项卡,在“滤镜”下拉列表中选择dropshadow,参数设置DropShadow(Color=#000000,offx=2,offy=2,Positive=45),可以设置为不同的参数效果不同。
步骤2插入一个表格,在单元格中输入文字,选中单元格,在“属性”面板中选择类:
dropshadow。
步骤3 新建一个类glow,参数设置为:
Glow(Color=#ffff00,Strength=5),然后在单元格中输入文本,选中单元格,套用类的样式。
步骤4 新建一个类wave,参数设置为:
Wave(Add=0,Freq=5,LightStrength=5,strength=5),插入图像,选中图像套用类样式。
步骤5 新建一个类chroma,参数设置为:
Chroma(Color=#ff0000),插入图像,选中图像套用类样式。