网页设计与制作实训指导书

《网页设计与制作实训指导书》由会员分享，可在线阅读，更多相关《网页设计与制作实训指导书（17页珍藏版）》请在金锄头文库上搜索。

1、网页设计实训指导书主编：2014年 3 月目 录网页设计实验实训室设备使用安全守则2实训一 查找网站并分析，尝试申请域名空间3实训二 练习制作第一个个人主页7实训三 练习文本、图像、超级链接8实训四 表格设计10实训五 框架页面设计 实训六 层和动画的制作11实训七 网页的美化14网页设计实验实训室设备使用安全守则1.严禁在实验室内使用明火、用电充电及取暖等。 2.机房应成为精神文明的良好工作场所，室内不得大声喧闹。非机房有关人员不得随意进入机房。3.不要随便尝试不明的或不熟悉的计算机操作步骤。遇到计算机发生异常而自己无法解决时，请专业老师解决。4.不要随便运行或删除电脑上的文件或程序，不要随

2、意计算机参数等。5.不要随便安装或使用不明来源的软件或程序。不要随意开启来历不明的电子邮件或电子邮件附件。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. 实训指导以中联网为例，详细介绍如何申请免费个人空间和域名。1. 打开浏览器，在地址栏上输入，如图2-36所示。

4、图2-36 中联网主页2. 点击100M免费空间，弹出申请条款，开始申请免费个人主页空间。核实它所给出的条款后，单击“我同意”按钮，出现图2-37所示的注册页面。图2-37 用户注册页面3. 所有信息都填好并核实无误后，单击提交按钮。如果填的不正确，页面会给出提示，并要求重填。注意该网站中户名只能用英文或数字。4. 注册成功后，会显示欢迎页面，等待管理员审核，如图2-38所示。图2-38 等待审核界面5. 单击“自助开通个人主页空间”字样，又重新弹出用户登录区，输入刚才注册的用户名和密码登录。登录后，显示登录情况，如图2-39所示。图2-39 登录情况显示界面6. 然后单击页面左边“免费主页申

5、请”按钮，出现审核通过界面，如图2-40所示。它提示审核已经通过，可以开通个人空间了。图2-40 通过审核界面7. 单击“马上开通”字样，开通个人空间，出现图2-41所示页面。在该页面中填写网站的名称，网站分类以及网站的简介，填好后单击“即时开通”按钮。图2-41 网站简介8. 即时开通后，出现图2-42所示页面。该页面中给出了FTP登录用户名、FTP密码和FTP地址，这是上传网页时要用到的地址。另外还给出了一个HTTP地址，这就是中联网提供给我们的主页的二级域名，在主页上传后，通过它可以访问个人主页。这些地址和密码都要记录下来，用于后续操作。至此，免费个人主页空间和域名已经申请好了。图2-4

6、2 开通主页资料实训二 练习制作第一个个人主页1.背景知识根据已经掌握的网络知识和本章学习的html语言的知识，编写简单网页的源代码；浏览网站，分析网站的特点。根据本章所学的内容，创建站点和创建个人主页。2.实训准备工作保证internet连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、fireworks、flash、photoshop等。在本地硬盘创建一个空文件夹myweb，并建一个子文件夹images。3.实训要求 (3) 打开浏览器，浏览某个网页，查看其源代码，了解HTML代码的含义。 (4) 打开记事本，试用HTML语言编写一个简单的网页，网页中要包含以下内容：

7、网页标题、文字、图像、超链接等。 (5) 上网浏览不同的电子商务网站，比如：淘宝、联想等，分析站点结构、站点风格及网页配色等，写出分析报告。 (6) 创建站点和创建网页要求：定义本地站点和新建一个网页并进行编辑。4.课时安排：2课时5.实训指导(1) 如何查看网页源代码？打开浏览器，点击“查看”菜单“源文件”命令。(2) 如何编写HTML代码？打开记事本，手工编写HTML代码，注意HTML代码的编写顺序及网页元素对应的标签。保存网页时，网页的后缀名为html或htm。(3) 略(4) 创建站点和制作简单个人主页步骤1定义本地站点，新建若干文件夹，如：images、flash、templates

8、等，有些文件夹可暂时为空，以备将来存放设定的内容。步骤2在定义好的站点下新建一个网页，第一个个人主页为index.htm或是index.html，输入文本，插入Flash动画和图像。 实训三 练习文本、图像、超级链接1. 背景知识根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。2. 实训准备工作将文本素材和图像素材准备好，发送到学生主机上，以供学生参考使用。3. 实训要求创建一个以篮球为话题的网站，要求如下：（1）编辑网站首页，效果图如图所示，包括有图像映射、鼠标经过图像、导航条。（2）编辑其它内容网页并添加超链接，如图所示，其它页面中包括有图像

9、和文本等，有一个网页中是明星的相册。图 篮球俱乐部首页4. 课时安排：4课时，每一项实训要求为2课时5. 实训指导（） 网站首页制作过程步骤1启动Dreamweaver，定义本地站点，新建一个网页，保存为index.htm。步骤2单击“属性”面板中的“页面属性”按钮，选择“常规”选项卡，设置背景图像为bg.gif，选择“标题编码”选项卡，设置网页标题为“篮球俱乐部”。步骤3单击“插入”栏“常用”选项“图像”按钮，插入网站标志图像logo.gif，选中图像，单击“属性”面板中的矩形“热点”工具，在NBA标志图像上绘制矩形区域，在“属性”面板的链接框中输入链接地址：http:/，再单击多边形“热点

10、”工具，在中国篮球标志图像上绘制多边形区域，在“属性”面板的链接框中输入链接地址：http:/，如图所示。图 篮球俱乐部内容页图 图像映射实例步骤4单击“插入”栏“常用”选项“表格”按钮，插入一个一行两列的表格，表格的宽度为770像素，单元格边距和间距为0，边框粗细为0。把光标放在左边的那个单元格中，单击“插入”栏“常用”选项“图像”组“鼠标经过图像”按钮，弹出“插入鼠标经过图像”对话框，选择原始图像的文件路径、鼠标经过图像的文件路径，选中“预载鼠标经过图像”复选框，替换文本、URL链接地址设置为空，单击“确定”按钮。步骤5光标放在右边的那个单元格中，单击“插入”栏“常用”选项“图像”组“导航

11、条”按钮，弹出“插入导航条”的对话框，分别设置导航条元件，每一个导航条元件有二幅图像：状态图像、鼠标经过图像，在“按下时，前往的URL”文本框：选择URL地址，在插入下拉列表中选择垂直，导航条垂直排列，选择“使用表格”复选框，单击“确定”按钮，完成。（） 创建网站相册选择“命令”菜单“创建网站相册”命令，弹出“创建网站相册”对话框，进行相关参数的设置，单击“确定”按钮，启动Fireworks，批处理图像。（） 其它网页的制作（略）（） 添加网页之间的超链接实训四 表格设计1. 背景知识根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创建站点及编辑网页的知识，进行网页不同排版方式的练

12、习。2. 实训准备工作实训素材和网页草图发送到学生的主机中，以供学生参考使用。3. 实训要求(1) 根据网页草图1，如图所示，利用表格设计网页布局，在单元格中添加网页元素。图 表格排版网页草图4. 实训指导(1) 表格设计网页布局步骤1首先创建一个本地站点，新建一个文档（其余几个实训是一样的，这是必须的一个步骤），然后单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，单击“跟踪图像”选项卡，将草图导入到跟踪图像中，改变透明度为50%。步骤2选择“插入”栏“布局”选项“布局模式”按钮，切换到布局模式，单击“布局表格”按钮，绘制三个表格（上中下），表格的宽度与草图总的宽度相同：853，

13、每一个布局表格左侧插入布局单元格，单元格的宽度与绿色色块相同：161，如图所示。步骤3插入网页元素。最后打开“页面属性”对话框，删除跟踪图像，保存网页。绿色色块公司标志导航栏广告横幅绿色色块公司简介一个布局表格，左侧插入一个布局单元格一个布局表格，左侧插入一个布局单元格一个布局表格，左侧插入一个布局单元格图 利用表格布局网页结构图实训五 框架页面设计 实训六 层和动画的制作1. 背景知识根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创建站点及编辑网页的知识，进行网页不同排版方式的练习。2. 实训准备工作实训素材和网页草图发送到学生的主机中，以供学生参考使用。3. 实训要求（1）根

14、据网页草图，如图所示，利用层设计网页布局，并向层中添加网页元素。图层排版网页草图(2) 在上一步的基础上，利用时间轴和行为添加网页动态效果：飘动的图片、弹出信息和打开浏览器窗口。(3) 根据网页草图，如图所示，利用框架设计网页布局，左框架中是导航条，上框架中插入图片和FLASH动画，主框架中插入图片和文本。图 框架排版网页草图5. 课时安排：2课时。6. 实训指导(1)层设计网页布局步骤1创建本地站点，创建一个HTML文档，在“页面属性”中插入跟踪图像，单击“插入”栏“布局”“绘制层”按钮，共绘制7层，注意层的排列位置、叠放顺序，如图所示。层1层2层3层4层5层6层7图 层布局图步骤2根据草图，在各层内插入相应的网页元素。保存网页，浏览网页效果。(2) 在上一步的基础上继续制作网页动态效果1） 特效1随时间飘动的图标步骤1首先插入一个层，在层内插入一幅图像。步骤2选中层，选择“修改”菜单“录制层路径”命令，拖动层随心所欲地移动，最后回到起点。步骤3在“时间轴”面板中选择“自动播放”和“循环”两个复选框。2） 特效2弹