天津电子信息职业技术学院网页制作A阶段作业一姓
学
系
专
班名：号：别：业：计算机网络技术级：网络S14-3
指导教师：完成时间：2015年5月15日
1.设计题目
个人网站
2.设计目的
（1）进一步熟练掌握软件DreamweaverCS5，更一步提升网页的熟练设计；
（2）由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。
3.设计思路
通过参阅资料和近半学期自己对网页知识的学习，最后决定做一个关于90后追求个性和自由的个人网站.一个展示自己的平台,给大家带来乐的平台,它包括一个主页和若干分页，主页内要有导航栏目，每一个导航栏目都要有相应的链接，每一个链接的页面都要有不同的内容显示，用尽可能多的网页元素规划网页,并且具有文字、图像、声音等。
主页以展现个性为主，同时要不失美观典雅，而且要符合设计题目的要求，不是为了单纯的网页课程设计，而且要通过本次的练习使自己学到更多的东西，使自己在这方面也有所提高，就构成了现在的设计思路。4.设计模块
个人网站
主页日志相册音乐说说留言板个人档联系我们更多
5.设计过程
5.1查阅相关资料
查阅网页制作三剑客（AdobeDreamweaverCS5的IFRAME布局、AdobeFirworksCS5、AdobeFlashCS5），流光字体制作等资料，决定做一个关于90后追求个性和自由的主页、其他分页为辅的个人网站。
5.2相关的素材的收集与整理
通过上网和查阅书籍收集素材，主要包括音乐、图片、文字等。
5.3框架和定义
-1-
首先，我的思路是在同一个页面跳转部分内容，当时在课堂学习的框架布局知识，不能实现我想要的设计。然后我就在网上查阅相关资料，查到iframe框架布局可以实现。我就自学了iframe框架布局。
iframe就是我们常用的iframe标签：
。以
结尾，将需要的文本内容添加到两个标签之间即可。
6.制作步骤
6.1准备工作
在C盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入mywebsite。在此文件夹中新建一个图像文件夹images、分页文件夹feils、音乐文件夹music、样式文件夹styles、文本文件夹text，并将所需素材复制到其中。
6.2建立本地站点
打开AdobeDreamweaverCS5站点菜单下的管理站点，在打开的管理站点框中点击新建站点。在站点设置对象窗口选择“站点”选项卡，然后在站点名称里输入mywebsite，“本地站点文件夹”选择你站点的根目录,然后点击“确定”。
6.3
编辑网页首页
图1.首页部分效果预览
-2-
(1)新建一张网页，在Dreamweaver【窗口】|【插入】，调出【插入】面板，在”常用”下拉菜单选择“布局”，再点击“插入DIV标签”。在出现的对话框中，“类”的输入框中，输入head，点击“新建CSS样式规则”。在出现的“新建CSS规则”对话框中，选择器类型为“类”，名称为“.head”，规则定义为“新建样式
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
文件”，然后点击确定。弹出“将样式表另存为”对话框，选择站点下styles文件夹，文件名起名为“index.css”,然后确定。
在弹出的“Css规则定义”窗口中，分类列表选择“背景”设置背景图像，选择站点根目录下index文件夹中名为head.jpg图片素材，背景重复选择不重复，附加选择固定，水平位置选择居中，垂直位置选择顶端（这样设置是为了将图片居中）。“方框”中，设置宽为1920px，高为372px（设置大小），边界的“上”为0，右为“auto”，下为“0”，左为“auto”（这样设置是将DIV框居中于屏幕）。确定后，将Div框中“此处显示class"head"
的内容”一行删除。
图2.headCSS规则设置
（2）切换到“拆分”编辑下，代码
浙公网安备 33021202002483