网页设计实训指导书 .docVIP

Dreamweaver网页设计实训指导书 编者 赵淑梅 计算机应用教研室 使用说明 本实训指导书根据校颁计算机类专业《Dreamweaver网页设计实训》课程实施性大纲编制，是一个适合于我院开设《Dreamweaver网页设计实训》课程专业的通用指导书，实训指导教师可根据各层次的课程实施性演练大纲选择使用。 Dreamweaver网页设计实训是一个操作能力很强的演练项目，要求同学们用所学知识，创造性、灵活性地解决实际问题，对上机操作过程中出现的随机问题会分析和判断，从而强化训练学生对软件技巧、工具应用的掌握。因此，本指导书中所列项目是演练的最低要求，同学们可以使用发散思维，制作更为复杂和富有创意性的网站。 目 录 教学目标……………………………………………….………………4 教学、学习资料与工具设备…………………………………………4 三、 教学内容……………………………………………………………… 4 四、 重点和难点…………………………………………………………… 4 五、 教学或学习建议……………………………………………………….5 六、 效果评价……………………………………………………………….5 Dreamweaver网页设计实训内容 一、教学目标 1. 熟练掌握Dreamweaver的基础操作和操作环境； 2. 熟练掌握站点的管理、文本、图像和链接表格、框架和表单的使用等操作; 3. 掌握站点设计和规划的步骤。 4. 培养学生设计网页时在“主题展示”、“页面布局”、“色彩搭配”等方面的综合设计能力; 5. 提高独立分析问题和解决问题的能力,为以后从事网站设计和管理工作打下坚实的基础。 二、教学、学习资料、工具设备 1．本学期使用的教材；有关Dreamweaver的参考书。 2．工具与设备： 硬件：PII及以上PC机，能连接外网。 软件：WINDOWS2000操作系统；Dreamweaver 8.0以上环境。 三、实训内容及具体案例操作步骤 （一）实训内容 在Dreamweaver环境中设计网站: 该网站需要设计的基本要求主要有： 从网页的构思、版式、色彩、赋于网页新颖独特的样式，给浏览者以良好的视觉感受。 良好的浏览导航、让浏览者可以很容易找到要找的东西，网页内容便于阅读。 与题目特点相符合的创意。 网页中应出现:美化文字内容、 HTML样式的创建、CSS样式的创建与运用、编辑图、合理的布局。 导航栏包括多个部分。 不少于20个页面，包括首页和若干个二级子页面。 （二）具体案例操作步骤 实例一.个人网站的制作站点规划 制作网站时首先应设计规划一个具体的方案，以此作为进一步工作的依据，下面就开始进行实例网站的规划工作。 1．确定建设网站的目标 在考虑网站的内容之前，首先要明确网站的目标。本网站是一个个人网站，所以建设该网站的目标是介绍自己，把自己的兴趣爱好做上去，和别人交流，让朋友们认识自己，同时为朋友们提供常用软件下载的网址。 2．分析目标用户对站点的需求 览该网站的群体一般都是一些在校学生，所以在制作网站时结合当前学生的兴趣爱好。所以本网站的内容从以下几个方面来划分：我的简历、给我留言、飞鸽传书、音乐试听、心情日记、软件下载等，整个站点的导航结构如图1所示。 图1 站点结构图 3．确定网站风格 由于该网站属于个人网站，它直接反映个性，所以从整个网站风格来考虑，将该网站的风格定为画廊式。 4．考虑网络的技术问题 由于本网站的目标用户极不固定，所以只按照普通目标用户的要求来规划出相关的技术约束 使用Windows系统和IE济览器 主要采用800×600分辨率，兼顾1024×768分辨率 需要安装Flash插件 (Ⅱ) 网页制作 对网站进行基本规划之后，就可以开始页面设计和素材准备的工作。然后就开始网站制作这一流程，包括站点的创建和具体页面的制作。 本网站的主题是反映一个大学生的校园生活，其主页的效果如图所示。 图2 个人网站首页 1．站点的建立 新建一个站点的具体步骤如下： （1）使用Windows 资源管理器新建一个文件夹，本例中选择E盘，给新建文件命名为grwz。 （2）启动Dreamweaver，选择【站点】→【管理站点】→【新建站点】菜单命令，在定义站点对话框中确定站点名称。单击【下一步】按钮，在是否打算使用服务器技术中选择否，即不想使用服务器技术。再单击【下一步】，在您将把文件存储在计算机上的什么位置中定位到D:\ glwz，单击【下一步】，在您如何连接到远程服务器中选择无单击【下一步】按钮再单击【完成】按钮即可。 （3）在站点根文件夹指定好之后，就可以根据站点设计方案在根目录中添加一些文件夹，搭建起站点的组织结构，如图3所示。将此网站中用到的图片、音乐文件及Flash动画保存在