初网页制作-实训指导书.docVIP

实 训 指 导 书 （2011 -2012学年度 第 二 学期） 实训类型： 初级网页制作 适用专业： 网络技术 撰写教师： 陈冠星 素材资源： 目 录 一、实训目标 3 二、实训资料、工具设备 3 三、实训内容及具体项目操作步骤 3 （一）实训内容 3 （二）具体项目操作步骤 4 个人网站的制作 4 一、实训目标 1. 熟练掌握Dreamweaver的基础操作和操作环境; 2. 进一步熟悉和掌握网站建设的基本流程和技术规范; 3. 熟练掌握站点的管理、文本、图像和链接表格、框架和表单的使用等操作; 4. 能独立设计一个内容完整、图文并茂、技术运用得当的网站; 5. 培养学生设计网页时在“主题展示”、“页面布局”、“色彩搭配”等方面的综合设计能力; 6.具备独立撰写实训报告等科技文件的基本能力; 7. 提高独立分析问题和解决问题的能力,为以后从事网站设计和管理工作打下坚实的基础。 二、实训资料、工具设备 1．本学期使用的教材；有关Dreamweaver的参考书。 2．工具与设备： 硬件：PC机，能连接外网。 软件：WINDOWS 操作系统；Dreamweaver cs3环境。 三、实训内容及具体项目操作步骤 （一）实训内容 1．在Dreamweaver环境中设计网站： ? 站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。 ? 进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。 ? 网页设计。包括版面设计和图形设计、内容录入等。 ? 综合优化。链接正确、得当，动态效果好。 ? 网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。 2. 该网站需要设计的基本要求主要有： ? 从网页的构思、版式、色彩、赋于网页新颖独特的样式，给浏览者以良好的视觉感受。 ? 良好的浏览导航、让浏览者可以很容易找到要找的东西，网页内容便于阅读。 ? 与题目特点相符合的创意。 ? 网页中应出现:美化文字内容、 HTML样式的创建、CSS样式的创建与运用、编辑图、合理的布局。 ? 导航栏包括多个部分。 ? 不少于10个页面，包括首页和若干个二级子页面。 （二）具体项目操作步骤 个人网站的制作 (I) 站点规划 制作网站时首先应设计规划一个具体的方案，以此作为进一步工作的依据，下面就开始进行实例网站的规划工作。 1．确定建设网站的目标 在考虑网站的内容之前，首先要明确网站的目标。本网站是一个个人网站，所以建设该网站的目标是介绍自己，把自己的兴趣爱好做上去，和别人交流，让朋友们认识自己，同时为朋友们提供常用软件下载的网址。 2．分析目标用户对站点的需求 洌览该网站的群体一般都是一些在校学生，所以在制作网站时可以考虑结合当前学生的兴趣和爱好。所以本网站的内容从以下几个方面来划分：我的简历、给我留言、飞鸽传书、音乐试听、心情日记、软件下载等，整个站点的导航结构如图1所示。 图1 站点结构图 3．确定网站风格 由于该网站属于个人网站，它直接反映人的个性，所以可以根据个人喜好来设计网站的风格。 4．考虑网络的技术问题 ? 由于本网站的目标用户极不固定，所以只按照普通目标用户的要求来规划出相关的 技术约束。 ? 使用Windows系统和IE济览器。 ? 主要采用1024×768分辨率。 ? 需要安装Flash插件。 (Ⅱ) 网页制作 对网站进行基本规划之后，就可以开始页面设计和素材准备的工作。然后就开始网站制作这一流程，包括站点的创建和具体页面的制作。 本网站的主题是反映一个大学生的校园生活。 1．站点的建立 新建一个站点的具体步骤如下： （1）使用Windows 资源管理器新建一个文件夹，本例中选择E盘，给新建文件命名为grwz。 （2）启动Dreamweaver，选择【站点】→【管理站点】→【新建站点】菜单命令，在“定义站点”对话框中确定站点名称。单击【下一步】按钮，在“是否打算使用服务器技术”中选择“否”，即不想使用服务器技术。再单击【下一步】按钮，在“您将把文件存储在计算机上的什么位置”中定位到D:\ glwz，单击【下一步】按钮，在“您如何连接到远程服务器”选项中选择“无”。单击【下一步】按钮再单击【完成】按钮即可。 （3）在站点根文件夹指定好之后，就可以根据站点设计方案在根目录中添加一些文件夹，搭建起站点的组织结构。将此网站中用到的图片、音乐文件及Flas