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