1初级网页制作-实训指导书

《1初级网页制作-实训指导书》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实训指导书（2011-2012学年度第二学期）实训类型：初级网页制作适用专业：网络技术撰写教师：陈冠星素材资源：一、实训目标3二、实训资料、工具设备3三、实训内容及具体项目操作步骤3(-)实训内容3(-)具体项目操作步骤个人网站的制作4一、实训目标1.熟练掌握Dreamweaver的呈础操作和操作环境；2.进-步熟悉和掌握网站建设的基本流程和技术规范；3.熟练掌握站点的管理、文本、图像和链接表格、框架和表单的使用等操作；4.能独立设计一个内容完整、图文并茂、技术运用得当的网站；5.培养学主设计网页时在“主题展示”、“页面布局”、“色

2、彩搭配”等方面的综合设计能力;6.具备独立撰写实训报告等科技文件的基本能力；7.提高独立分析问题和解决问题的能力，为以后从事网站设计和管理工作打下坚实的基础。二、实训资料、工具设备1.本学期使用的教材；有关Dreamweaver的参考巧。2.工具与设备：硬件:PC机，能连接外网。软件：WINDOWS操作系统；Dreamweavercs3环境。三、实训内容及具体项目操作步骤1・在Dreamweaver环境屮设计网站：♦站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。♦进行主页设计。构思主页布局，

3、进行主页标题图片的设计，进行主页英余图片的设计和页面内容的录入，最后进行主页的整体优化设计。♦网页设计。包括版而设计和图形设计、内容录入等。♦综合优化。链接正确、得当，动态效果好。♦网站测试并递交。在浏览器中対完成的网站逐页打开测试，包括链接正确与否，页血打开时间，图片和动画是否丢失等。2.该网站需要设计的基本要求主要有：♦从网页的构思、版式、色彩、赋于网页新颖独特的样式，给浏览者以良好的视觉感受。♦良好的浏览导航、让浏览者可以很容易找到要找的东西，网页内容便于阅读。♦与题冃特点相符合的创意。♦网页屮应出现:美化文字内容、HTML样

4、式的创建、CSS样式的创建与运用、编辑图、合理的布局。♦导航栏包括多个部分。♦不少于10个页面，包括首页和若干个二级子页面。(-)具体项目操作步骤个人网站的制作(I)站点规划制作网站吋首先应设计规划一个具体的方案，以此作为进一步工作的依据，下而就开始进行实例网站的规划工作。1.确定建设网站的目标在考虑网站的内容之前，首先要明确网站的目标。本网站是一个个人网站，所以建设该网站的口标是介绍白己，把白己的兴趣爱好做上去，和别人交流，让朋友们认识白己，同时为朋友们提供常用软件下载的网址。2.分析冃标用户对站点的需求洌览该网站的群体一般都是一

5、些在校学生，所以在制作网站时可以考虑结合当前学生的兴趣和爱好。所以木网站的内容从以下几个方面來划分：我的简历、给我留言、飞鸽传书、咅乐试听、心情日记、软件下载等，整个站点的导航结构如图1护示。个人网站首页我的简历给我留if心情日记音乐试听飞鸽传书软件下载文章1文章2文章3文章4文章n图1站点结构图3.确定网站风格由于该网站属于个人网站，它直接反映人的个性，所以可以根据个人喜好來设计网站的风格。4.考虑网络的技术问题•由于本网站的目标用户极不固定，所以只按照普通目标用户的要求來规划出相关的技术约束。•使用Windows系统和IE济览器

6、。•主要采用1024x768分辨率。•需要安装Flash插件。仃I)网页制作对网站进行基木规划之示，就可以开始页面设计和素材准备的工作。然示就开始网站制作这一流程,包括站点的创建和具体页面的制作。本网站的主题是反映一个大学生的校园生活。1.站点的建立新建一个站点的具体步骤如下：（1）使用Windows资源管理器新建一个文件夹，木例中选择E盘，给新建文件命名为grwzo（2）启动Dreamweaver,选择【站点】—＞【管理站点】—＞【新建站点】菜单命令，在“定义站点”对话框中确定站点名称。单击【下一步】按钮，在“是否打算使用服务器技

7、术”中选择“否”，即不想使用服务器技术。再单击【下一步】按钮，在“您将把文件存储在计算机上的什么位置”中定位到D:glwz,单击【下一步】按钮，在“您如何连接到远程服务器”选项中选择“无”。单击【下一步】按钮再单击【完成】按钮即可。（3）在站点根文件夹指定好之示，就可以根据站点设计方案在根目录屮添加一些文件夹，搭建起站点的组织结构。将此网站中用到的图片、咅乐文件&Flash动画保存在站点image,sound及swf文件夹屮，同时再建一个文件夹other,用来存放三级页面。2.制作主页制作主页步骤如下。（1）选择菜单【文件】-＞【

8、新建】命令，在弹出的对话框屮选择“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）在刚才网页中插入一个预先准备好的Flash影片，并使其在单元格中处于水平居中，垂直置底的位置。然后选择【文件】-【保存】