一、网络专题的设计
【目标】
完成网络专题的设计与材料的搜集、整理、加工。
【步骤】
1.根据自己的需要，确定专题的主题。
2.分析与思考，并回答以下几个问题：
Ÿ为什么要选择这个专题？
Ÿ这个专题准备给谁看？
Ÿ通过这个专题，收到什么效果？
3.初步编写策划设计方案，方案应包括以下内容：
标题：××××专题策划案
策划人：×××
策划时间：××年××月××日
正文：
专题主题：××××××
专题关键字：××××
专题说明：……
创意说明：……
版式设计：…
附图（版式与结构）
材料分类：
4.根据策划设计方案确定的栏目，利用搜索引擎等进行相关材料的搜集、整理。
5.对主要文字稿件进行必要的修改加工。
6.对多媒体素材进行修改加工。
【实现】
学习WEB设计专题策划案
策划人:Logic101
策划时间:2024年5月30日
正文:
专题主题:学习WEB设计
专题关键字:网页设计、WEB设计、html、css、JavaScript、php
专题说明:为了同学们更好地学习网页设计这门课程，因而选择了这个专题，希望对大家有所帮助。
创意说明:
相关视觉创意来源于国家开放大学网络信息制作与发布课程的相关教学PPT文档。
版式设计:
首页采用frame框架结构，以top、left、right三个页面构成框架主体，Left页面负责显示所有栏目，Right页面负责加载栏目具体信息。
附图（版式与结构）：
专题栏目：WEB设计基础、创意思维方法及工具、Web标准化布局、Web界面设计、色彩基础、HSB色彩模式、RGB色彩模式、CMYK色彩模式、灰度色彩模式、图像通道、位图、矢量图、色彩的联想、CSS层叠样式表（上）、CSS层叠样式表（下）、网络信息的发布与维护、html相关视频教程、javascript相关视频教程、PHP相关视频教程、CSS的动态效果案例
材料分类：图片、视频、精典案例演示等。
二、网站站点结构的构建
[目标]
设计网站的布局结构，至少完成二级结构（栏目）的设计。
[步骤]
1.根据大作业1确定的网站主题，设计网站的布局结构，可以借鉴同类型网页的布局结构。
2.分析与思考，并回答以下几个问题：
Ÿ 网站内容都包括哪些
Ÿ 网站的内容根据重要性如何进行排列
Ÿ 如何通过网站布局，突出重要信息
3.使用Word、PowerPoint、Photoshop等绘制页面布局结构图，注明每个区域的功能，并形成文档。
标题：××××网站布局方案
设计人：×××
设计时间：××年××月××日
正文：
网站主题：××××××
网站关键字：××××
网站说明：……
创意说明：……
版式设计：……
附图（版式与结构）
4.对页面布局结构进行修改加工。
【实现】
布局结构图
三、网站艺术设计
[目标]
为确定好的网站结构进行色彩、版式、字体、图像设计。
[步骤]
1.根据提供的网页效果图，分析网页的色彩、版式及页面元素构成。
2.分析与思考，并回答以下几个问题：
Ÿ 网站的主要内容包括哪些
Ÿ 网站属于什么类型的网站
Ÿ 网站所面对的访问群体是什么样的
3.使用Word、PowerPoint、Photoshop等绘制页面布局结构图，并给出配色方案。
4.需要以Word文档的形式来写出为配色方案，可以在之前的布局方案的基础上增加内容。
标题：××××网站配色方案
设计人：×××
设计时间：××年××月××日
正文：
网站主题：××××××
网站关键字：××××
网站说明：……
创意说明：……
版式设计：……
色彩设计：……
附图（版式与结构）
【实现】
色彩设计
以深灰和蓝色为主色调。
版式与结构
四、制作网页
[目标]
使用WEB标准化布局技术制作网站。
[步骤]
1.明确网站的主题，同时也可以借鉴同类型的网站。
2.使用Dreamweaver创建站点结构，使用WEB标准化布局的技术制作企业网站。。
3.使用Dreamweaver插入网站中的各种页面元素，包括文字、图片、多媒体、表单等。
4.使用模板和库来定义同样结构的内容页面。
【实现】
五、网络信息的发布
[目标]
完成用Dreamweaver和CuteFTP发布专题网站，修改、备份网站文件的工作。
[步骤]
网站发布的步骤：
1. 完成域名申请，确定网站空间的工作（可以利用本地服务器或者虚拟主机）。
2. 启动Dreamweaver，进行远程服务器的设置。
3. 将制作好的专题网站文件夹添加到Dreamweaver中。
4. 利用Dreamweaver的上传功能，将网站文件全部传送到远程服务器。
5. 观察Dreamweaver左下部的FTP记录窗口，检查文件上传情况。
6. 启动CuteFTP，进行远程服务器的设置。
7. 将制作好的专题网站文件夹添加到CuteFTP中。
8. 利用CuteFTP的上传功能，将网站文件全部传送到远程服务器。
9. 观察CuteFTP下部的队列窗口，检查文件上传情况。
网站维护的步骤：
1.启动Dreamweaver并连接到远程服务器。
2.打开本地或远程任意一个窗口，选择要修改的文件。
3.单击鼠标右键，在“打开方式”中选择“Dreamweaver”，则在左侧工作窗口中显示文件的代码，可以进行修改。
4.对文件进行修改后，点击“全部保存”按钮，则修改后的文件自动同步到本地站点文件夹或者远程服务器站点中。
5.使用浏览器对网站进行浏览，检查修改后的网页。
6.在远程窗口中选择站点的全部文件，然后点击“从远程服务器获取文件”，则全部远程站点文件自动保存到本地，完成备份。
7.启动CuteFTP并连接到远程服务器。
8.打开本地窗口，选择要修改的文件。
9. 单击鼠标右键，在选择“编辑”，则在右侧工作窗口中显示文件的代码，可以进行修改。
10. 将修改后的文件上传至远程服务器。
11. 使用浏览器对网站进行浏览，检查修改后的网页。
12. 打开菜单栏的“工具”→“文件夹工具”→“备份远程文件夹”命令，则将全部远程站点文件保存到本地，完成备份。
【实现】
[目标]完成用Dreamweaver和CuteFTP发布专题网站，修改、备份网站文件的工作。
[步骤]
网站发布的步骤：
- 完成域名申请，确定网站空间的工作（可以利用本地服务器或者虚拟主机）。
注：本次实验利用本地服务器进行，假设申请的域名为：myweb.com
①进行域名解析：在C:\Windows\System32\drivers\etc\hosts中进行如下设置：
②在IIS服务管理器中创建站点，并进行如下设置：
2.启动Dreamweaver，进行远程服务器的设置。
3.将制作好的专题网站文件夹添加到Dreamweaver中。
4.利用Dreamweaver的上传功能，将网站文件全部传送到远程服务器。
5.观察Dreamweaver左下部的FTP记录窗口，检查文件上传情况。
6.启动CuteFTP，进行远程服务器的设置。
7.将制作好的专题网站文件夹添加到CuteFTP中。
8.利用CuteFTP的上传功能，将网站文件全部传送到远程服务器。
网站维护的步骤：
1.启动Dreamweaver并连接到远程服务器。
2.打开本地或远程任意一个窗口，选择要修改的文件。
3.单击鼠标右键，在“打开方式”中选择“Dreamweaver”，则在左侧工作窗口中显示文件的代码，可以进行修改。
4.对文件进行修改后，点击“全部保存”按钮，则修改后的文件自动同步到本地站点文件夹或者远程服务器站点中。
5.使用浏览器对网站进行浏览，检查修改后的网页。
6.在远程窗口中选择站点的全部文件，然后点击“从远程服务器获取文件”，则全部远程站点文件自动保存到本地，完成备份。
7.启动CuteFTP并连接到远程服务器。
8.打开本地窗口，选择要修改的文件。
9.单击鼠标右键，在选择“编辑”，则在右侧工作窗口中显示文件的代码，可以进行修改。
10.将修改后的文件上传至远程服务器。
11.使用浏览器对网站进行浏览，检查修改后的网页。
12.打开菜单栏的“工具”→“文件夹工具”→“备份远程文件夹”命令，则将全部远程站点文件保存到本地，完成备份。
关于css的动态效果演示，请看进入以下博文中查看：
告别静态网页！CSS Transition 动画效果全集，含8种核心交互效果详解与源码（翻转/弹跳/伸展/渐变等）
本文为个人学习笔记与经验总结，仅供学习交流参考
